@7pmlabs/design-system 1.0.8 → 1.0.10

package/dist/design-system197.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system197.js","names":[],"sources":["../src/components/BTabs/BTabPane.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, createCommentVNode as _createCommentVNode } from \"vue\"\n\nimport type { VNode } from 'vue';\nimport { inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue';\n\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BTabPane',\n  props: {\n    tabKey: {},\n    tab: {},\n    disabled: { type: Boolean },\n    closable: { type: Boolean },\n    destroyOnHidden: { type: Boolean },\n    forceRender: { type: Boolean },\n    keepAlive: { type: Boolean }\n  },\n  setup(__props: any) {\n\nconst props = __props;\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\n\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Inject parent context\n// ─────────────────────────────────────────────\nconst tabsContext = inject(BTabsContextKey, null);\n\n// ─────────────────────────────────────────────\n// Registration helpers\n// ─────────────────────────────────────────────\nfunction buildRegistration() {\n  return {\n    key: props.tabKey,\n    label: props.tab,\n    disabled: props.disabled,\n    closable: props.closable,\n    destroyOnHidden: props.destroyOnHidden,\n    forceRender: props.forceRender,\n    keepAlive: props.keepAlive,\n    renderContent: () => (slots.default?.() ?? []) as VNode[],\n    renderLabel: slots.tab ? () => slots.tab!() as VNode[] : undefined,\n  };\n}\n\nonMounted(() => {\n  tabsContext?.register(buildRegistration());\n});\n\nonBeforeUnmount(() => {\n  tabsContext?.unregister(props.tabKey);\n});\n\nwatch(\n  () => [\n    props.tab,\n    props.disabled,\n    props.closable,\n    props.destroyOnHidden,\n    props.forceRender,\n    props.keepAlive,\n  ],\n  () => {\n    tabsContext?.update(props.tabKey, buildRegistration());\n  },\n);\n\nreturn (_ctx: any,_cache: any) => {\n  return false\n    ? _renderSlot(_ctx.$slots, \"default\", { key: 0 })\n    : _createCommentVNode(\"\", true)\n}\n}\n\n})"],"mappings":";;;AAYA,IAAA,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,QAAQ,EAAE;EACV,KAAK,EAAE;EACP,UAAU,EAAE,MAAM,SAAS;EAC3B,UAAU,EAAE,MAAM,SAAS;EAC3B,iBAAiB,EAAE,MAAM,SAAS;EAClC,aAAa,EAAE,MAAM,SAAS;EAC9B,WAAW,EAAE,MAAM,SAAS;EAC7B;CACD,MAAM,GAAc;EAEtB,IAAM,IAAQ,GAOR,IAAQ,GAAU,EAKlB,IAAc,EAAO,GAAiB,KAAK;EAKjD,SAAS,IAAoB;AAC3B,UAAO;IACL,KAAK,EAAM;IACX,OAAO,EAAM;IACb,UAAU,EAAM;IAChB,UAAU,EAAM;IAChB,iBAAiB,EAAM;IACvB,aAAa,EAAM;IACnB,WAAW,EAAM;IACjB,qBAAsB,EAAM,WAAW,IAAI,EAAE;IAC7C,aAAa,EAAM,YAAY,EAAM,KAAM,GAAc,KAAA;IAC1D;;AAyBH,SAtBA,QAAgB;AACd,MAAa,SAAS,GAAmB,CAAC;IAC1C,EAEF,QAAsB;AACpB,MAAa,WAAW,EAAM,OAAO;IACrC,EAEF,QACQ;GACJ,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACN,EAAM;GACP,QACK;AACJ,MAAa,OAAO,EAAM,QAAQ,GAAmB,CAAC;IAEzD,GAEO,GAAU,MAGZ,EAAoB,IAAI,GAAK;;CAIlC,CAAA"}
+{"version":3,"file":"design-system197.js","names":[],"sources":["../src/components/BSlider/BSlider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false });\n\nimport { computed, onBeforeUnmount, ref, useAttrs } from 'vue';\nimport type { BSliderMarks, BSliderRange, BSliderTooltip } from './types.ts';\n\nconst attrs = useAttrs();\n\n//#region Props\nconst {\n  disabled = false,\n  dots = false,\n  included = true,\n  keyboard = true,\n  max = 100,\n  min = 0,\n  range = false,\n  reverse = false,\n  step = 1,\n  vertical = false,\n  tooltip = {},\n  marks,\n} = defineProps<{\n  /** Whether the slider is disabled. */\n  disabled?: boolean;\n  /** Whether only dots can be selected (step snap). */\n  dots?: boolean;\n  /** Whether the track between handles is filled. */\n  included?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Maximum value. */\n  max?: number;\n  /** Minimum value. */\n  min?: number;\n  /** Whether range mode is enabled (dual handles). Can also be an object with draggableTrack. */\n  range?: boolean | BSliderRange;\n  /** Whether the slider is reversed. */\n  reverse?: boolean;\n  /** Step granularity. null means only marks are selectable. */\n  step?: number | null;\n  /** Whether the slider is vertical. */\n  vertical?: boolean;\n  /** Tooltip configuration. */\n  tooltip?: BSliderTooltip;\n  /** Tick marks on the slider. Keys are percentages (0–100 mapped to min–max). */\n  marks?: BSliderMarks;\n}>();\n\nconst model = defineModel<number | [number, number]>({ default: 0 });\n\nconst emit = defineEmits<{\n  change: [value: number | [number, number]];\n  changeComplete: [value: number | [number, number]];\n}>();\n//#endregion\n\n//#region Internal state\nconst railRef = ref<HTMLElement | null>(null);\nconst rootRef = ref<HTMLElement | null>(null);\n\nconst dragging = ref<null | 'lower' | 'upper' | 'track'>(null);\nconst hovered = ref(false);\nconst focusedHandle = ref<'lower' | 'upper' | null>(null);\nconst tooltipVisible = ref<{ lower: boolean; upper: boolean }>({ lower: false, upper: false });\n\nconst trackDragStartValue = ref<[number, number] | null>(null);\nconst trackDragStartPos = ref(0);\n//#endregion\n\n//#region Computed values\nconst isRange = computed(() => range !== false);\nconst draggableTrack = computed(() => typeof range === 'object' && range.draggableTrack);\n\nconst lowerValue = computed(() => {\n  if (isRange.value) {\n    const v = model.value as [number, number];\n    return v[0];\n  }\n  return min;\n});\n\nconst upperValue = computed(() => {\n  if (isRange.value) {\n    const v = model.value as [number, number];\n    return v[1];\n  }\n  return model.value as number;\n});\n\nfunction valueToPercent(value: number): number {\n  if (max === min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction percentToValue(percent: number): number {\n  const raw = min + (percent / 100) * (max - min);\n  return snapToStep(raw);\n}\n\nfunction snapToStep(value: number): number {\n  if (step === null) {\n    if (!marks) return clamp(value);\n    const markValues = Object.keys(marks).map(Number);\n    let closest = markValues[0] ?? min;\n    let closestDist = Math.abs(value - closest);\n    for (const mv of markValues) {\n      const dist = Math.abs(value - mv);\n      if (dist < closestDist) {\n        closest = mv;\n        closestDist = dist;\n      }\n    }\n    return clamp(closest);\n  }\n  const stepped = Math.round((value - min) / step) * step + min;\n  return clamp(stepped);\n}\n\nfunction clamp(value: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nconst lowerPercent = computed(() => valueToPercent(lowerValue.value));\nconst upperPercent = computed(() => valueToPercent(upperValue.value));\n\nconst trackStyle = computed(() => {\n  const start = isRange.value ? lowerPercent.value : 0;\n  const length = isRange.value\n    ? upperPercent.value - lowerPercent.value\n    : upperPercent.value;\n\n  if (vertical) {\n    return reverse\n      ? { top: `${100 - start - length}%`, height: `${length}%` }\n      : { bottom: `${100 - start - length}%`, height: `${length}%` };\n  }\n  return reverse\n    ? { right: `${start}%`, width: `${length}%` }\n    : { left: `${start}%`, width: `${length}%` };\n});\n\nconst lowerHandleStyle = computed(() => {\n  const pct = lowerPercent.value;\n  if (vertical) {\n    return reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst upperHandleStyle = computed(() => {\n  const pct = upperPercent.value;\n  if (vertical) {\n    return reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst markList = computed(() => {\n  if (!marks) return [];\n  return Object.entries(marks).map(([key, val]) => {\n    const numKey = Number(key);\n    const percent = valueToPercent(numKey);\n    const isActive =\n      included &&\n      (isRange.value\n        ? numKey >= lowerValue.value && numKey <= upperValue.value\n        : numKey <= upperValue.value);\n    const label = typeof val === 'string' ? val : val.label;\n    const style = typeof val === 'object' ? val.style : undefined;\n    return { value: numKey, percent, isActive, label, style };\n  });\n});\n\nconst dotList = computed(() => {\n  if (!dots || step === null) return [];\n  const result: { value: number; percent: number; isActive: boolean }[] = [];\n  for (let v = min; v <= max; v += step) {\n    const percent = valueToPercent(v);\n    const isActive =\n      included &&\n      (isRange.value\n        ? v >= lowerValue.value && v <= upperValue.value\n        : v <= upperValue.value);\n    result.push({ value: v, percent, isActive });\n  }\n  return result;\n});\n\nfunction formatTooltip(value: number): string | null {\n  if (tooltip.formatter === null) return null;\n  if (tooltip.formatter) return tooltip.formatter(value);\n  return String(value);\n}\n\nconst lowerTooltipText = computed(() => formatTooltip(lowerValue.value));\nconst upperTooltipText = computed(() => formatTooltip(upperValue.value));\n\nconst showLowerTooltip = computed(() => {\n  if (tooltip.formatter === null) return false;\n  if (tooltip.open !== undefined) return tooltip.open;\n  return tooltipVisible.value.lower || dragging.value === 'lower' || dragging.value === 'track';\n});\n\nconst showUpperTooltip = computed(() => {\n  if (tooltip.formatter === null) return false;\n  if (tooltip.open !== undefined) return tooltip.open;\n  return tooltipVisible.value.upper || dragging.value === 'upper' || dragging.value === 'track';\n});\n//#endregion\n\n//#region Event handlers\nfunction getPercentFromEvent(event: MouseEvent | TouchEvent): number {\n  if (!railRef.value) return 0;\n  const rect = railRef.value.getBoundingClientRect();\n  let clientPos: number;\n  let size: number;\n\n  if ('touches' in event) {\n    clientPos = vertical ? event.touches[0].clientY : event.touches[0].clientX;\n  } else {\n    clientPos = vertical ? event.clientY : event.clientX;\n  }\n\n  if (vertical) {\n    size = rect.height;\n    const offset = clientPos - rect.top;\n    return reverse ? (offset / size) * 100 : ((size - offset) / size) * 100;\n  } else {\n    size = rect.width;\n    const offset = clientPos - rect.left;\n    return reverse ? ((size - offset) / size) * 100 : (offset / size) * 100;\n  }\n}\n\nfunction getCloserHandle(percent: number): 'lower' | 'upper' {\n  if (!isRange.value) return 'upper';\n  const distToLower = Math.abs(percent - lowerPercent.value);\n  const distToUpper = Math.abs(percent - upperPercent.value);\n  if (distToLower < distToUpper) return 'lower';\n  if (distToUpper < distToLower) return 'upper';\n  return percent < lowerPercent.value ? 'lower' : 'upper';\n}\n\nfunction updateValue(handle: 'lower' | 'upper', newValue: number) {\n  if (isRange.value) {\n    const current = model.value as [number, number];\n    let updated: [number, number];\n    if (handle === 'lower') {\n      updated = [Math.min(newValue, current[1]), current[1]];\n    } else {\n      updated = [current[0], Math.max(newValue, current[0])];\n    }\n    model.value = updated;\n    emit('change', updated);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleRailClick(event: MouseEvent) {\n  if (disabled) return;\n  if ((event.target as HTMLElement).closest('.b-slider__handle')) return;\n\n  const percent = getPercentFromEvent(event);\n  const value = percentToValue(percent);\n  const handle = getCloserHandle(percent);\n\n  if (draggableTrack.value && isRange.value) {\n    const lp = lowerPercent.value;\n    const up = upperPercent.value;\n    if (percent >= lp && percent <= up) return;\n  }\n\n  updateValue(handle, value);\n  emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n}\n\nfunction handleDragStart(handle: 'lower' | 'upper' | 'track', event: MouseEvent | TouchEvent) {\n  if (disabled) return;\n  event.preventDefault();\n  dragging.value = handle;\n\n  if (handle === 'track' && isRange.value) {\n    trackDragStartValue.value = [...(model.value as [number, number])] as [number, number];\n    trackDragStartPos.value = getPercentFromEvent(event);\n  }\n\n  document.addEventListener('mousemove', handleDragMove);\n  document.addEventListener('mouseup', handleDragEnd);\n  document.addEventListener('touchmove', handleDragMove);\n  document.addEventListener('touchend', handleDragEnd);\n}\n\nfunction handleDragMove(event: MouseEvent | TouchEvent) {\n  if (!dragging.value || disabled) return;\n  const percent = getPercentFromEvent(event);\n\n  if (dragging.value === 'track' && trackDragStartValue.value) {\n    const delta = percent - trackDragStartPos.value;\n    const startLower = trackDragStartValue.value[0];\n    const startUpper = trackDragStartValue.value[1];\n    const lowerPct = valueToPercent(startLower) + delta;\n    const upperPct = valueToPercent(startUpper) + delta;\n\n    const newLower = percentToValue(lowerPct);\n    const newUpper = percentToValue(upperPct);\n\n    if (newLower >= min && newUpper <= max) {\n      model.value = [newLower, newUpper];\n      emit('change', [newLower, newUpper]);\n    }\n    return;\n  }\n\n  const value = percentToValue(percent);\n  updateValue(dragging.value as 'lower' | 'upper', value);\n}\n\nfunction handleDragEnd() {\n  if (dragging.value) {\n    emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n  }\n  dragging.value = null;\n  trackDragStartValue.value = null;\n  document.removeEventListener('mousemove', handleDragMove);\n  document.removeEventListener('mouseup', handleDragEnd);\n  document.removeEventListener('touchmove', handleDragMove);\n  document.removeEventListener('touchend', handleDragEnd);\n}\n\nfunction handleKeyDown(event: KeyboardEvent, handle: 'lower' | 'upper') {\n  if (disabled || !keyboard) return;\n  const effectiveStep = step ?? 1;\n  let delta = 0;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp':\n      delta = effectiveStep;\n      break;\n    case 'ArrowLeft':\n    case 'ArrowDown':\n      delta = -effectiveStep;\n      break;\n    case 'Home':\n      delta = min - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    case 'End':\n      delta = max - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    default:\n      return;\n  }\n\n  event.preventDefault();\n  const currentVal = handle === 'lower' ? lowerValue.value : upperValue.value;\n  const newValue = snapToStep(currentVal + delta);\n  updateValue(handle, newValue);\n  emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n}\n\nfunction handleHandleFocus(handle: 'lower' | 'upper') {\n  focusedHandle.value = handle;\n  tooltipVisible.value[handle] = true;\n}\n\nfunction handleHandleBlur(handle: 'lower' | 'upper') {\n  focusedHandle.value = null;\n  tooltipVisible.value[handle] = false;\n}\n\nfunction handleHandleMouseEnter(handle: 'lower' | 'upper') {\n  tooltipVisible.value[handle] = true;\n}\n\nfunction handleHandleMouseLeave(handle: 'lower' | 'upper') {\n  if (focusedHandle.value !== handle && dragging.value !== handle) {\n    tooltipVisible.value[handle] = false;\n  }\n}\n\nfunction handleMouseEnter() {\n  hovered.value = true;\n}\n\nfunction handleMouseLeave() {\n  hovered.value = false;\n}\n\nfunction handleTrackMouseDown(event: MouseEvent) {\n  if (disabled || !draggableTrack.value) return;\n  handleDragStart('track', event);\n}\n//#endregion\n\n//#region Expose\nfunction focus() {\n  const el = rootRef.value?.querySelector('.b-slider__handle') as HTMLElement | null;\n  el?.focus();\n}\n\nfunction blur() {\n  const el = rootRef.value?.querySelector('.b-slider__handle:focus') as HTMLElement | null;\n  el?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n\n//#region Cleanup\nonBeforeUnmount(() => {\n  document.removeEventListener('mousemove', handleDragMove);\n  document.removeEventListener('mouseup', handleDragEnd);\n  document.removeEventListener('touchmove', handleDragMove);\n  document.removeEventListener('touchend', handleDragEnd);\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-slider\"\n    :class=\"[\n      {\n        'b-slider--vertical': vertical,\n        'b-slider--disabled': disabled,\n        'b-slider--with-marks': !!marks,\n        'b-slider--reverse': reverse,\n        'b-slider--hovered': hovered,\n      },\n    ]\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <!-- Rail -->\n    <div\n      ref=\"railRef\"\n      class=\"b-slider__rail\"\n      @mousedown=\"handleRailClick\"\n    >\n      <!-- Track -->\n      <div\n        v-if=\"included\"\n        class=\"b-slider__track\"\n        :style=\"trackStyle\"\n        @mousedown.stop=\"handleTrackMouseDown\"\n      />\n\n      <!-- Dots -->\n      <span\n        v-for=\"dot in dotList\"\n        :key=\"`dot-${dot.value}`\"\n        class=\"b-slider__dot\"\n        :class=\"{ 'b-slider__dot--active': dot.isActive }\"\n        :style=\"vertical\n          ? (reverse ? { top: `${100 - dot.percent}%` } : { bottom: `${100 - dot.percent}%` })\n          : (reverse ? { right: `${dot.percent}%` } : { left: `${dot.percent}%` })\n        \"\n      />\n\n      <!-- Marks -->\n      <span\n        v-for=\"mark in markList\"\n        :key=\"`mark-dot-${mark.value}`\"\n        class=\"b-slider__dot\"\n        :class=\"{ 'b-slider__dot--active': mark.isActive }\"\n        :style=\"vertical\n          ? (reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n          : (reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n        \"\n      />\n\n      <!-- Lower handle (range only) -->\n      <div\n        v-if=\"isRange\"\n        class=\"b-slider__handle\"\n        :class=\"{\n          'b-slider__handle--active': dragging === 'lower' || focusedHandle === 'lower',\n        }\"\n        :style=\"lowerHandleStyle\"\n        role=\"slider\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :aria-valuemin=\"min\"\n        :aria-valuemax=\"upperValue\"\n        :aria-valuenow=\"lowerValue\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :aria-label=\"(attrs['aria-label'] as string) ? `${attrs['aria-label']} - minimum` : 'Minimum'\"\n        @mousedown=\"(e) => handleDragStart('lower', e)\"\n        @touchstart=\"(e) => handleDragStart('lower', e)\"\n        @keydown=\"(e) => handleKeyDown(e, 'lower')\"\n        @focus=\"handleHandleFocus('lower')\"\n        @blur=\"handleHandleBlur('lower')\"\n        @mouseenter=\"handleHandleMouseEnter('lower')\"\n        @mouseleave=\"handleHandleMouseLeave('lower')\"\n      >\n        <div\n          v-if=\"lowerTooltipText !== null\"\n          class=\"b-slider__tooltip\"\n          :class=\"{ 'b-slider__tooltip--visible': showLowerTooltip }\"\n          role=\"tooltip\"\n        >\n          {{ lowerTooltipText }}\n        </div>\n      </div>\n\n      <!-- Upper handle (always) -->\n      <div\n        class=\"b-slider__handle\"\n        :class=\"{\n          'b-slider__handle--active': dragging === 'upper' || focusedHandle === 'upper',\n        }\"\n        :style=\"upperHandleStyle\"\n        role=\"slider\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :aria-valuemin=\"isRange ? lowerValue : min\"\n        :aria-valuemax=\"max\"\n        :aria-valuenow=\"upperValue\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :aria-label=\"(attrs['aria-label'] as string) || (isRange ? 'Maximum' : 'Slider')\"\n        @mousedown=\"(e) => handleDragStart('upper', e)\"\n        @touchstart=\"(e) => handleDragStart('upper', e)\"\n        @keydown=\"(e) => handleKeyDown(e, 'upper')\"\n        @focus=\"handleHandleFocus('upper')\"\n        @blur=\"handleHandleBlur('upper')\"\n        @mouseenter=\"handleHandleMouseEnter('upper')\"\n        @mouseleave=\"handleHandleMouseLeave('upper')\"\n      >\n        <div\n          v-if=\"upperTooltipText !== null\"\n          class=\"b-slider__tooltip\"\n          :class=\"{ 'b-slider__tooltip--visible': showUpperTooltip }\"\n          role=\"tooltip\"\n        >\n          {{ upperTooltipText }}\n        </div>\n      </div>\n    </div>\n\n    <!-- Mark labels -->\n    <div v-if=\"marks\" class=\"b-slider__marks\">\n      <span\n        v-for=\"mark in markList\"\n        :key=\"`mark-label-${mark.value}`\"\n        class=\"b-slider__mark-text\"\n        :class=\"{ 'b-slider__mark-text--active': mark.isActive }\"\n        :style=\"{\n          ...(vertical\n            ? (reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n            : (reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n          ),\n          ...mark.style,\n        }\"\n      >\n        {{ mark.label }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-slider {\n  --b-slider-rail-bg: rgba(0, 0, 0, 0.04);\n  --b-slider-rail-hover-bg: rgba(0, 0, 0, 0.06);\n  --b-slider-rail-size: 4px;\n  --b-slider-track-bg: #91caff;\n  --b-slider-track-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-slider-track-hover-bg: #69b1ff;\n  --b-slider-handle-color: #91caff;\n  --b-slider-handle-color-disabled: #bfbfbf;\n  --b-slider-handle-active-color: #1677ff;\n  --b-slider-handle-active-outline-color: rgba(22, 119, 255, 0.2);\n  --b-slider-handle-line-width: 2px;\n  --b-slider-handle-line-width-hover: 2.5px;\n  --b-slider-handle-size: 10px;\n  --b-slider-handle-size-hover: 12px;\n  --b-slider-dot-border-color: #f0f0f0;\n  --b-slider-dot-active-border-color: #91caff;\n  --b-slider-dot-size: 8px;\n  --b-slider-control-size: 10px;\n\n  position: relative;\n  box-sizing: border-box;\n  padding: 4px 0;\n  cursor: pointer;\n  touch-action: none;\n}\n\n.b-slider--vertical {\n  display: inline-block;\n  height: 100%;\n  min-height: 200px;\n  padding: 0 4px;\n}\n\n.b-slider--disabled {\n  cursor: not-allowed;\n}\n\n/* Rail */\n.b-slider__rail {\n  position: relative;\n  width: 100%;\n  height: var(--b-slider-rail-size);\n  background-color: var(--b-slider-rail-bg);\n  border-radius: calc(var(--b-slider-rail-size) / 2);\n  transition: background-color 0.2s;\n}\n\n.b-slider--hovered:not(.b-slider--disabled) .b-slider__rail {\n  background-color: var(--b-slider-rail-hover-bg);\n}\n\n.b-slider--vertical .b-slider__rail {\n  width: var(--b-slider-rail-size);\n  height: 100%;\n}\n\n/* Track */\n.b-slider__track {\n  position: absolute;\n  height: 100%;\n  background-color: var(--b-slider-track-bg);\n  border-radius: calc(var(--b-slider-rail-size) / 2);\n  transition: background-color 0.2s;\n}\n\n.b-slider--hovered:not(.b-slider--disabled) .b-slider__track {\n  background-color: var(--b-slider-track-hover-bg);\n}\n\n.b-slider--disabled .b-slider__track {\n  background-color: var(--b-slider-track-bg-disabled);\n}\n\n.b-slider--vertical .b-slider__track {\n  width: 100%;\n  height: auto;\n}\n\n/* Handle */\n.b-slider__handle {\n  position: absolute;\n  top: 50%;\n  width: var(--b-slider-handle-size);\n  height: var(--b-slider-handle-size);\n  background-color: #fff;\n  border: var(--b-slider-handle-line-width) solid var(--b-slider-handle-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  cursor: grab;\n  outline: none;\n  transition:\n    width 0.2s,\n    height 0.2s,\n    border-color 0.2s,\n    border-width 0.2s,\n    box-shadow 0.2s;\n  touch-action: none;\n  z-index: 1;\n}\n\n.b-slider--vertical .b-slider__handle {\n  top: auto;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n\n.b-slider__handle:hover,\n.b-slider__handle:focus-visible {\n  width: var(--b-slider-handle-size-hover);\n  height: var(--b-slider-handle-size-hover);\n  border-width: var(--b-slider-handle-line-width-hover);\n  border-color: var(--b-slider-handle-active-color);\n}\n\n.b-slider__handle--active {\n  width: var(--b-slider-handle-size-hover);\n  height: var(--b-slider-handle-size-hover);\n  border-width: var(--b-slider-handle-line-width-hover);\n  border-color: var(--b-slider-handle-active-color);\n  box-shadow: 0 0 0 4px var(--b-slider-handle-active-outline-color);\n  cursor: grabbing;\n}\n\n.b-slider__handle:focus-visible {\n  box-shadow: 0 0 0 4px var(--b-slider-handle-active-outline-color);\n}\n\n.b-slider--disabled .b-slider__handle {\n  border-color: var(--b-slider-handle-color-disabled);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n.b-slider--disabled .b-slider__handle:hover,\n.b-slider--disabled .b-slider__handle:focus-visible {\n  width: var(--b-slider-handle-size);\n  height: var(--b-slider-handle-size);\n  border-width: var(--b-slider-handle-line-width);\n  border-color: var(--b-slider-handle-color-disabled);\n  box-shadow: none;\n}\n\n/* Tooltip */\n.b-slider__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%) scale(0.8);\n  padding: 4px 8px;\n  background-color: rgba(0, 0, 0, 0.85);\n  color: #fff;\n  font-size: 12px;\n  line-height: 1.4;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity 0.2s,\n    transform 0.2s;\n}\n\n.b-slider__tooltip--visible {\n  opacity: 1;\n  transform: translateX(-50%) scale(1);\n}\n\n.b-slider--vertical .b-slider__tooltip {\n  bottom: auto;\n  left: calc(100% + 8px);\n  top: 50%;\n  transform: translateY(-50%) scale(0.8);\n}\n\n.b-slider--vertical .b-slider__tooltip--visible {\n  transform: translateY(-50%) scale(1);\n}\n\n/* Dots */\n.b-slider__dot {\n  position: absolute;\n  top: 50%;\n  width: var(--b-slider-dot-size);\n  height: var(--b-slider-dot-size);\n  background-color: #fff;\n  border: 2px solid var(--b-slider-dot-border-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.b-slider--vertical .b-slider__dot {\n  top: auto;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n\n.b-slider__dot--active {\n  border-color: var(--b-slider-dot-active-border-color);\n}\n\n/* Marks */\n.b-slider__marks {\n  position: relative;\n}\n\n.b-slider--vertical .b-slider__marks {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 3;\n  pointer-events: none;\n}\n\n.b-slider__mark-text {\n  position: absolute;\n  top: 8px;\n  transform: translateX(-50%);\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.65);\n  white-space: nowrap;\n  user-select: none;\n}\n\n.b-slider--vertical .b-slider__mark-text {\n  top: auto;\n  left: 20px;\n  transform: translateY(50%);\n}\n\n.b-slider__mark-text--active {\n  color: rgba(0, 0, 0, 0.88);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-slider {\n  --b-slider-rail-bg: rgba(255, 255, 255, 0.08);\n  --b-slider-rail-hover-bg: rgba(255, 255, 255, 0.12);\n  --b-slider-track-bg: #177ddc;\n  --b-slider-track-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-slider-track-hover-bg: #3c9ae8;\n  --b-slider-handle-color: #177ddc;\n  --b-slider-handle-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-slider-handle-active-color: #3c9ae8;\n  --b-slider-handle-active-outline-color: rgba(23, 125, 220, 0.2);\n  --b-slider-dot-border-color: rgba(255, 255, 255, 0.12);\n  --b-slider-dot-active-border-color: #177ddc;\n}\n\n[data-prefers-color='dark'] .b-slider__tooltip {\n  background-color: rgba(255, 255, 255, 0.9);\n  color: #141414;\n}\n\n[data-prefers-color='dark'] .b-slider__handle {\n  background-color: #141414;\n}\n\n[data-prefers-color='dark'] .b-slider__mark-text {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n[data-prefers-color='dark'] .b-slider__mark-text--active {\n  color: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-slider {\n    --b-slider-rail-bg: rgba(255, 255, 255, 0.08);\n    --b-slider-rail-hover-bg: rgba(255, 255, 255, 0.12);\n    --b-slider-track-bg: #177ddc;\n    --b-slider-track-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-slider-track-hover-bg: #3c9ae8;\n    --b-slider-handle-color: #177ddc;\n    --b-slider-handle-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-slider-handle-active-color: #3c9ae8;\n    --b-slider-handle-active-outline-color: rgba(23, 125, 220, 0.2);\n    --b-slider-dot-border-color: rgba(255, 255, 255, 0.12);\n    --b-slider-dot-active-border-color: #177ddc;\n  }\n  [data-prefers-color='system'] .b-slider__tooltip {\n    background-color: rgba(255, 255, 255, 0.9);\n    color: #141414;\n  }\n  [data-prefers-color='system'] .b-slider__handle {\n    background-color: #141414;\n  }\n  [data-prefers-color='system'] .b-slider__mark-text {\n    color: rgba(255, 255, 255, 0.65);\n  }\n  [data-prefers-color='system'] .b-slider__mark-text--active {\n    color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-slider__handle,\n  .b-slider__track,\n  .b-slider__rail,\n  .b-slider__tooltip {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system198.js

@@ -1,7 +1,103 @@
-import e from "./design-system197.js";
-//#region src/components/BTabs/BTabPane.vue
-var t = e;
+import { BSpinSize as e } from "./design-system3.js";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createStaticVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, useSlots as b, watch as x, withCtx as S } from "vue";
+//#region src/components/BSpin/BSpin.vue?vue&type=script&setup=true&lang.ts
+var C = ["aria-label", "aria-describedby"], w = {
+	class: "b-spin__indicator",
+	"aria-hidden": "true"
+}, T = ["id"], E = ["aria-label", "aria-describedby"], D = {
+	class: "b-spin__indicator",
+	"aria-hidden": "true"
+}, O = ["id"], k = ["aria-label", "aria-describedby"], A = {
+	class: "b-spin__indicator",
+	"aria-hidden": "true"
+}, j = ["id"], M = ["aria-busy", "inert"], N = /* @__PURE__ */ f({
+	__name: "BSpin",
+	props: {
+		spinning: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: () => e.Default },
+		tip: { default: "" },
+		delay: { default: 0 },
+		fullscreen: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let f = b(), N = y(), P = h(!1), F;
+		function I(t) {
+			clearTimeout(F), t && e.delay > 0 ? F = setTimeout(() => {
+				P.value = !0;
+			}, e.delay) : P.value = t;
+		}
+		I(e.spinning), x(() => e.spinning, I);
+		let L = i(() => !!f.default), R = i(() => !!(e.tip || f.tip)), z = i(() => [
+			"b-spin",
+			`b-spin--${e.size}`,
+			{
+				"b-spin--spinning": P.value,
+				"b-spin--nested": L.value,
+				"b-spin--has-tip": R.value,
+				"b-spin--fullscreen": e.fullscreen
+			}
+		]);
+		return (i, f) => e.fullscreen ? (m(), a(n, {
+			key: 0,
+			to: "body"
+		}, [d(r, { name: "b-spin-fade" }, {
+			default: S(() => [P.value ? (m(), s("div", {
+				key: 0,
+				class: p(["b-spin b-spin--fullscreen", [`b-spin--${e.size}`, {
+					"b-spin--spinning": P.value,
+					"b-spin--has-tip": R.value
+				}]]),
+				role: "status",
+				"aria-label": R.value ? void 0 : "Loading",
+				"aria-describedby": R.value ? v(N) : void 0
+			}, [c("div", w, [g(i.$slots, "indicator", {}, () => [f[0] ||= c("span", { class: "b-spin__dot" }, [
+				c("i", { class: "b-spin__dot-item" }),
+				c("i", { class: "b-spin__dot-item" }),
+				c("i", { class: "b-spin__dot-item" }),
+				c("i", { class: "b-spin__dot-item" })
+			], -1)])]), R.value ? (m(), s("div", {
+				key: 0,
+				id: v(N),
+				class: "b-spin__tip"
+			}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, T)) : o("", !0)], 10, C)) : o("", !0)]),
+			_: 3
+		})])) : L.value ? (m(), s("div", {
+			key: 2,
+			class: p(z.value)
+		}, [P.value ? (m(), s("div", {
+			key: 0,
+			class: "b-spin__overlay-container",
+			role: "status",
+			"aria-label": R.value ? void 0 : "Loading",
+			"aria-describedby": R.value ? v(N) : void 0
+		}, [c("div", A, [g(i.$slots, "indicator", {}, () => [f[2] ||= l("<span class=\"b-spin__dot\"><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i></span>", 1)])]), R.value ? (m(), s("div", {
+			key: 0,
+			id: v(N),
+			class: "b-spin__tip"
+		}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, j)) : o("", !0)], 8, k)) : o("", !0), c("div", {
+			class: p(["b-spin__content", { "b-spin__content--blurred": P.value }]),
+			"aria-busy": P.value,
+			inert: P.value
+		}, [g(i.$slots, "default")], 10, M)], 2)) : (m(), s(t, { key: 1 }, [P.value ? (m(), s("div", {
+			key: 0,
+			class: p(z.value),
+			role: "status",
+			"aria-label": R.value ? void 0 : "Loading",
+			"aria-describedby": R.value ? v(N) : void 0
+		}, [c("div", D, [g(i.$slots, "indicator", {}, () => [f[1] ||= l("<span class=\"b-spin__dot\"><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i><i class=\"b-spin__dot-item\"></i></span>", 1)])]), R.value ? (m(), s("div", {
+			key: 0,
+			id: v(N),
+			class: "b-spin__tip"
+		}, [g(i.$slots, "tip", {}, () => [u(_(e.tip), 1)])], 8, O)) : o("", !0)], 10, E)) : o("", !0)], 64));
+	}
+});
 //#endregion
-export { t as default };
+export { N as default };
 
 //# sourceMappingURL=design-system198.js.map

package/dist/design-system198.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system198.js","names":[],"sources":["../src/components/BTabs/BTabPane.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VNode } from 'vue';\nimport { inject, onBeforeUnmount, onMounted, useSlots, watch } from 'vue';\n\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = defineProps<{\n  /** Unique key identifying this tab pane. */\n  tabKey: string;\n  /** Tab header label text. Use the `tab` slot for rich labels. */\n  tab?: string;\n  /** Whether this tab is disabled. @default false */\n  disabled?: boolean;\n  /** Show close button in editable-card mode. @default true */\n  closable?: boolean;\n  /** Destroy content when tab is hidden. @default false */\n  destroyOnHidden?: boolean;\n  /** Force render content even when inactive. @default false */\n  forceRender?: boolean;\n  /** Keep component state alive when switching away. Overrides global setting. */\n  keepAlive?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Tab pane content. */\n  default?: () => unknown;\n  /** Custom tab label content. */\n  tab?: () => unknown;\n}>();\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Inject parent context\n// ─────────────────────────────────────────────\nconst tabsContext = inject(BTabsContextKey, null);\n\n// ─────────────────────────────────────────────\n// Registration helpers\n// ─────────────────────────────────────────────\nfunction buildRegistration() {\n  return {\n    key: props.tabKey,\n    label: props.tab,\n    disabled: props.disabled,\n    closable: props.closable,\n    destroyOnHidden: props.destroyOnHidden,\n    forceRender: props.forceRender,\n    keepAlive: props.keepAlive,\n    renderContent: () => (slots.default?.() ?? []) as VNode[],\n    renderLabel: slots.tab ? () => slots.tab!() as VNode[] : undefined,\n  };\n}\n\nonMounted(() => {\n  tabsContext?.register(buildRegistration());\n});\n\nonBeforeUnmount(() => {\n  tabsContext?.unregister(props.tabKey);\n});\n\nwatch(\n  () => [\n    props.tab,\n    props.disabled,\n    props.closable,\n    props.destroyOnHidden,\n    props.forceRender,\n    props.keepAlive,\n  ],\n  () => {\n    tabsContext?.update(props.tabKey, buildRegistration());\n  },\n);\n</script>\n\n<template>\n  <!-- BTabPane is a registration-only component. All rendering is handled by BTabs. -->\n  <slot v-if=\"false\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"design-system198.js","names":[],"sources":["../src/components/BSpin/BSpin.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useSlots as _useSlots, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock, Fragment as _Fragment, createStaticVNode as _createStaticVNode } from \"vue\"\n\nconst _hoisted_1 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_2 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = [\"id\"]\nconst _hoisted_4 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_5 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_6 = [\"id\"]\nconst _hoisted_7 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_8 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_9 = [\"id\"]\nconst _hoisted_10 = [\"aria-busy\", \"inert\"]\n\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSpin',\n  props: {\n    spinning: { type: Boolean, default: true },\n    size: { default: () => (BSpinSize.Default) },\n    tip: { default: '' },\n    delay: { default: 0 },\n    fullscreen: { type: Boolean, default: false }\n  },\n  setup(__props: any) {\n\n\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = _useSlots();\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 && __props.delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, __props.delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(__props.spinning);\n\nwatch(() => __props.spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(__props.tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${__props.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': __props.fullscreen,\n  },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (__props.fullscreen)\n    ? (_openBlock(), _createBlock(_Teleport, {\n        key: 0,\n        to: \"body\"\n      }, [\n        _createVNode(_Transition, { name: \"b-spin-fade\" }, {\n          default: _withCtx(() => [\n            (shouldShow.value)\n              ? (_openBlock(), _createElementBlock(\"div\", {\n                  key: 0,\n                  class: _normalizeClass([\"b-spin b-spin--fullscreen\", [`b-spin--${__props.size}`, { 'b-spin--spinning': shouldShow.value, 'b-spin--has-tip': hasTip.value }]]),\n                  role: \"status\",\n                  \"aria-label\": hasTip.value ? undefined : 'Loading',\n                  \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n                }, [\n                  _createElementVNode(\"div\", _hoisted_2, [\n                    _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                      _cache[0] || (_cache[0] = _createElementVNode(\"span\", { class: \"b-spin__dot\" }, [\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" })\n                      ], -1))\n                    ])\n                  ]),\n                  (hasTip.value)\n                    ? (_openBlock(), _createElementBlock(\"div\", {\n                        key: 0,\n                        id: _unref(tipId),\n                        class: \"b-spin__tip\"\n                      }, [\n                        _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                          _createTextVNode(_toDisplayString(__props.tip), 1)\n                        ])\n                      ], 8, _hoisted_3))\n                    : _createCommentVNode(\"\", true)\n                ], 10, _hoisted_1))\n              : _createCommentVNode(\"\", true)\n          ]),\n          _: 3\n        })\n      ]))\n    : (!isNested.value)\n      ? (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [\n          (shouldShow.value)\n            ? (_openBlock(), _createElementBlock(\"div\", {\n                key: 0,\n                class: _normalizeClass(rootClasses.value),\n                role: \"status\",\n                \"aria-label\": hasTip.value ? undefined : 'Loading',\n                \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n              }, [\n                _createElementVNode(\"div\", _hoisted_5, [\n                  _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                    _cache[1] || (_cache[1] = _createStaticVNode(\"<span class=\\\"b-spin__dot\\\"><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i></span>\", 1))\n                  ])\n                ]),\n                (hasTip.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", {\n                      key: 0,\n                      id: _unref(tipId),\n                      class: \"b-spin__tip\"\n                    }, [\n                      _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.tip), 1)\n                      ])\n                    ], 8, _hoisted_6))\n                  : _createCommentVNode(\"\", true)\n              ], 10, _hoisted_4))\n            : _createCommentVNode(\"\", true)\n        ], 64))\n      : (_openBlock(), _createElementBlock(\"div\", {\n          key: 2,\n          class: _normalizeClass(rootClasses.value)\n        }, [\n          (shouldShow.value)\n            ? (_openBlock(), _createElementBlock(\"div\", {\n                key: 0,\n                class: \"b-spin__overlay-container\",\n                role: \"status\",\n                \"aria-label\": hasTip.value ? undefined : 'Loading',\n                \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n              }, [\n                _createElementVNode(\"div\", _hoisted_8, [\n                  _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                    _cache[2] || (_cache[2] = _createStaticVNode(\"<span class=\\\"b-spin__dot\\\"><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i></span>\", 1))\n                  ])\n                ]),\n                (hasTip.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", {\n                      key: 0,\n                      id: _unref(tipId),\n                      class: \"b-spin__tip\"\n                    }, [\n                      _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.tip), 1)\n                      ])\n                    ], 8, _hoisted_9))\n                  : _createCommentVNode(\"\", true)\n              ], 8, _hoisted_7))\n            : _createCommentVNode(\"\", true),\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-spin__content\", { 'b-spin__content--blurred': shouldShow.value }]),\n            \"aria-busy\": shouldShow.value,\n            inert: shouldShow.value\n          }, [\n            _renderSlot(_ctx.$slots, \"default\")\n          ], 10, _hoisted_10)\n        ], 2))\n}\n}\n\n})"],"mappings":"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"}

package/dist/design-system200.js

@@ -0,0 +1,8 @@
+import e from "./design-system198.js";
+/* empty css                 */
+//#region src/components/BSpin/BSpin.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=design-system200.js.map

package/dist/design-system200.js.map

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

@@ -1,8 +1,22 @@
-import e from "./design-system199.js";
-/* empty css                 */
-//#region src/components/BTabs/BTabs.vue
-var t = e;
+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 { t as default };
+export { n as default };
 
 //# sourceMappingURL=design-system201.js.map

package/dist/design-system201.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system201.js","names":[],"sources":["../src/components/BTabs/BTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component, VNode } from 'vue';\nimport { computed, defineComponent, h, nextTick, onMounted, provide, ref, useId, watch } from 'vue';\n\nimport type {\n  BTabItem,\n  BTabPaneRegistration,\n  BTabsContext,\n  BTabsPlacement,\n  BTabsSize,\n  BTabsType,\n} from './types';\nimport { BTabsContextKey } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  activeKey,\n  defaultActiveKey,\n  items = [],\n  type = 'line',\n  placement = 'top',\n  size = 'middle',\n  centered = false,\n  animated = true,\n  hideAdd = false,\n  destroyOnHidden = false,\n  keepAlive = false,\n  tabBarGutter,\n} = defineProps<{\n  /** Current active tab key (controlled via v-model:activeKey). */\n  activeKey?: string;\n  /** Initial active tab key for uncontrolled mode. @default first non-disabled tab */\n  defaultActiveKey?: string;\n  /** Tab items configuration. When provided and non-empty, BTabPane children are ignored. */\n  items?: BTabItem[];\n  /** Visual style of the tabs. @default 'line' */\n  type?: BTabsType;\n  /** Position of the tab bar. @default 'top' */\n  placement?: BTabsPlacement;\n  /** Size preset for the tab bar. @default 'middle' */\n  size?: BTabsSize;\n  /** Whether to center the tab items. @default false */\n  centered?: boolean;\n  /** Whether content switching is animated. @default true */\n  animated?: boolean;\n  /** Whether to hide the add button in editable-card mode. @default false */\n  hideAdd?: boolean;\n  /** Whether to destroy inactive tab content globally. @default false */\n  destroyOnHidden?: boolean;\n  /** Whether to keep component state alive when switching tabs globally. @default false */\n  keepAlive?: boolean;\n  /** Gap between tabs in pixels. */\n  tabBarGutter?: number;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the active tab changes. */\n  (e: 'update:activeKey', key: string): void;\n  /** Fires when the active tab changes (alias for update:activeKey). */\n  (e: 'change', key: string): void;\n  /** Fires when a tab is clicked. */\n  (e: 'tabClick', key: string, event: MouseEvent): void;\n  /** Fires when a tab is added or removed (editable-card only). */\n  (e: 'edit', key: string | null, action: 'add' | 'remove'): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Items mode: receives { item } scoped prop. Pane mode: contains BTabPane children (no props). */\n  default?: (props: { item?: BTabItem }) => unknown;\n  /** Custom label renderer for each tab (items mode). */\n  label?: (props: { item: BTabItem; active: boolean }) => unknown;\n  /** Extra content on the left side of the tab bar. */\n  leftExtra?: () => unknown;\n  /** Extra content on the right side of the tab bar. */\n  rightExtra?: () => unknown;\n  /** Custom add button (editable-card type). */\n  addIcon?: () => unknown;\n  /** Custom remove/close icon (editable-card type). */\n  removeIcon?: (props: { item: BTabItem }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Instance-scoped ID prefix (prevents duplicate IDs when multiple BTabs on page)\n// ─────────────────────────────────────────────\nconst uid = useId();\nconst tabId = (key: string) => `${uid}-tab-${key}`;\nconst panelId = (key: string) => `${uid}-tabpanel-${key}`;\n\n// ─────────────────────────────────────────────\n// Pane registry (for BTabPane child component API)\n// ─────────────────────────────────────────────\nconst paneRegistry = ref(new Map<string, BTabPaneRegistration>());\nconst paneOrder = ref<string[]>([]);\n\nfunction registerPane(pane: BTabPaneRegistration) {\n  paneRegistry.value.set(pane.key, pane);\n  if (!paneOrder.value.includes(pane.key)) {\n    paneOrder.value = [...paneOrder.value, pane.key];\n  }\n}\n\nfunction unregisterPane(key: string) {\n  paneRegistry.value.delete(key);\n  paneOrder.value = paneOrder.value.filter((k) => k !== key);\n}\n\nfunction updatePane(key: string, pane: BTabPaneRegistration) {\n  paneRegistry.value.set(key, pane);\n}\n\n// ─────────────────────────────────────────────\n// Mode detection + effective items\n// ─────────────────────────────────────────────\nconst isItemsMode = computed(() => items && items.length > 0);\n\nconst effectiveItems = computed<BTabItem[]>(() => {\n  if (isItemsMode.value) return items;\n  return paneOrder.value\n    .map((key) => paneRegistry.value.get(key))\n    .filter((p): p is BTabPaneRegistration => p !== undefined)\n    .map((pane) => ({\n      key: pane.key,\n      label: pane.label,\n      disabled: pane.disabled,\n      closable: pane.closable,\n      destroyOnHidden: pane.destroyOnHidden,\n      forceRender: pane.forceRender,\n      keepAlive: pane.keepAlive,\n    }));\n});\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => activeKey !== undefined);\n\nconst firstEnabledKey = computed(\n  () => effectiveItems.value.find((i) => !i.disabled)?.key ?? effectiveItems.value[0]?.key ?? '',\n);\n\nconst internalKey = ref<string>(activeKey ?? defaultActiveKey ?? firstEnabledKey.value);\n\nwatch(\n  () => activeKey,\n  (val) => {\n    if (val !== undefined) internalKey.value = val;\n  },\n);\n\nwatch(effectiveItems, () => {\n  if (\n    internalKey.value === undefined ||\n    !effectiveItems.value.find((i) => i.key === internalKey.value)\n  ) {\n    internalKey.value = firstEnabledKey.value;\n  }\n});\n\nconst currentKey = computed(() => (isControlled.value ? activeKey! : internalKey.value));\n\n// ─────────────────────────────────────────────\n// Provide context to BTabPane children\n// ─────────────────────────────────────────────\nconst context: BTabsContext = {\n  activeKey: currentKey,\n  type: computed(() => type),\n  size: computed(() => size),\n  placement: computed(() => placement),\n  keepAlive: computed(() => keepAlive),\n  destroyOnHidden: computed(() => destroyOnHidden),\n  register: registerPane,\n  unregister: unregisterPane,\n  update: updatePane,\n};\n\nprovide(BTabsContextKey, context);\n\n// ─────────────────────────────────────────────\n// Tab activation\n// ─────────────────────────────────────────────\nfunction activateTab(key: string, event?: MouseEvent) {\n  const item = effectiveItems.value.find((i) => i.key === key);\n  if (!item || item.disabled) return;\n\n  if (event) {\n    emit('tabClick', key, event);\n  }\n\n  if (key === currentKey.value) return;\n\n  if (!isControlled.value) {\n    internalKey.value = key;\n  }\n  emit('update:activeKey', key);\n  emit('change', key);\n}\n\n// ─────────────────────────────────────────────\n// Editable-card actions\n// ─────────────────────────────────────────────\nfunction onAdd() {\n  emit('edit', null, 'add');\n}\n\nfunction onRemove(key: string, event: MouseEvent) {\n  event.stopPropagation();\n  emit('edit', key, 'remove');\n}\n\n// ─────────────────────────────────────────────\n// Ink bar positioning\n// ─────────────────────────────────────────────\nconst tabListRef = ref<HTMLElement | null>(null);\nconst inkBarStyle = ref<Record<string, string>>({});\n\nfunction updateInkBar() {\n  if (!tabListRef.value || type !== 'line') return;\n  const activeEl = tabListRef.value.querySelector<HTMLElement>('.b-tabs__tab--active');\n  if (!activeEl) return;\n\n  const isVertical = placement === 'left' || placement === 'right';\n\n  if (isVertical) {\n    inkBarStyle.value = {\n      top: `${activeEl.offsetTop}px`,\n      height: `${activeEl.offsetHeight}px`,\n    };\n  } else {\n    inkBarStyle.value = {\n      left: `${activeEl.offsetLeft}px`,\n      width: `${activeEl.offsetWidth}px`,\n    };\n  }\n}\n\nwatch(currentKey, async () => {\n  await nextTick();\n  updateInkBar();\n});\n\nonMounted(() => {\n  updateInkBar();\n});\n\n// ─────────────────────────────────────────────\n// Keyboard navigation (roving tabindex)\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent) {\n  const isVertical = placement === 'left' || placement === 'right';\n  const nextKeys = isVertical ? ['ArrowDown'] : ['ArrowRight'];\n  const prevKeys = isVertical ? ['ArrowUp'] : ['ArrowLeft'];\n\n  // Delete key closes the active tab in editable-card mode\n  if (event.key === 'Delete' && type === 'editable-card') {\n    const item = effectiveItems.value.find((i) => i.key === currentKey.value);\n    if (item && item.closable !== false) {\n      event.preventDefault();\n      emit('edit', currentKey.value, 'remove');\n    }\n    return;\n  }\n\n  if ([...nextKeys, ...prevKeys, 'Home', 'End'].includes(event.key)) {\n    event.preventDefault();\n    const enabledItems = effectiveItems.value.filter((i) => !i.disabled);\n    if (enabledItems.length === 0) return;\n\n    const currentIdx = enabledItems.findIndex((i) => i.key === currentKey.value);\n\n    let targetIdx: number;\n    if (nextKeys.includes(event.key)) {\n      targetIdx = (currentIdx + 1) % enabledItems.length;\n    } else if (prevKeys.includes(event.key)) {\n      targetIdx = (currentIdx - 1 + enabledItems.length) % enabledItems.length;\n    } else if (event.key === 'Home') {\n      targetIdx = 0;\n    } else {\n      targetIdx = enabledItems.length - 1;\n    }\n\n    const targetKey = enabledItems[targetIdx].key;\n    activateTab(targetKey);\n\n    nextTick(() => {\n      if (!tabListRef.value) return;\n      const targetEl = tabListRef.value.querySelector<HTMLElement>(`[data-tab-key=\"${targetKey}\"]`);\n      targetEl?.focus();\n    });\n  }\n}\n\n// ─────────────────────────────────────────────\n// KeepAlive + content visibility\n// ─────────────────────────────────────────────\nconst renderedKeys = ref<Set<string>>(new Set([currentKey.value]));\n\nwatch(currentKey, (key) => {\n  renderedKeys.value.add(key);\n});\n\nfunction shouldUseKeepAlive(item: BTabItem): boolean {\n  if (item.destroyOnHidden) return false;\n  if (item.keepAlive !== undefined) return item.keepAlive;\n  if (destroyOnHidden) return false;\n  return keepAlive;\n}\n\nfunction shouldRender(item: BTabItem): boolean {\n  if (item.forceRender) return true;\n  if (shouldUseKeepAlive(item)) return true;\n  const itemDestroy = item.destroyOnHidden ?? destroyOnHidden;\n  if (itemDestroy) return item.key === currentKey.value;\n  return renderedKeys.value.has(item.key);\n}\n\n// ─────────────────────────────────────────────\n// KeepAlive panel wrapper components\n// ─────────────────────────────────────────────\nconst panelWrappers = computed<Record<string, Component>>(() => {\n  const wrappers: Record<string, Component> = {};\n  for (const item of effectiveItems.value) {\n    if (!shouldUseKeepAlive(item)) continue;\n    wrappers[item.key] = defineComponent({\n      name: `BTabPanel_${item.key}`,\n      setup() {\n        return () => {\n          const pane = paneRegistry.value.get(item.key);\n          if (pane) {\n            return pane.renderContent();\n          }\n          return null;\n        };\n      },\n    });\n  }\n  return wrappers;\n});\n\nfunction getPaneContent(key: string): VNode[] {\n  const pane = paneRegistry.value.get(key);\n  return pane?.renderContent() ?? [];\n}\n\nfunction getPaneLabel(key: string): VNode[] | undefined {\n  const pane = paneRegistry.value.get(key);\n  return pane?.renderLabel?.();\n}\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-tabs',\n  `b-tabs--${type}`,\n  `b-tabs--${placement}`,\n  `b-tabs--${size}`,\n  { 'b-tabs--centered': centered },\n]);\n\nconst tabBarGutterStyle = computed(() =>\n  tabBarGutter !== undefined ? { gap: `${tabBarGutter}px` } : undefined,\n);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <!-- Tab bar -->\n    <div class=\"b-tabs__header\">\n      <div v-if=\"$slots.leftExtra\" class=\"b-tabs__extra b-tabs__extra--left\">\n        <slot name=\"leftExtra\" />\n      </div>\n\n      <div\n        ref=\"tabListRef\"\n        class=\"b-tabs__list\"\n        role=\"tablist\"\n        :aria-orientation=\"\n          placement === 'left' || placement === 'right' ? 'vertical' : 'horizontal'\n        \"\n        :style=\"tabBarGutterStyle\"\n      >\n        <div\n          v-for=\"item in effectiveItems\"\n          :key=\"item.key\"\n          :data-tab-key=\"item.key\"\n          class=\"b-tabs__tab\"\n          :class=\"{\n            'b-tabs__tab--active': item.key === currentKey,\n            'b-tabs__tab--disabled': item.disabled,\n          }\"\n          role=\"tab\"\n          :aria-selected=\"item.key === currentKey\"\n          :aria-disabled=\"item.disabled || undefined\"\n          :aria-controls=\"panelId(item.key)\"\n          :id=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          @click=\"!item.disabled && activateTab(item.key, $event)\"\n          @keydown=\"onKeydown\"\n        >\n          <span class=\"b-tabs__tab-label\">\n            <!-- Items mode: use label slot or item.label -->\n            <template v-if=\"isItemsMode\">\n              <slot name=\"label\" :item=\"item\" :active=\"item.key === currentKey\">\n                {{ item.label }}\n              </slot>\n            </template>\n            <!-- Pane mode: use pane's renderLabel or label string -->\n            <template v-else>\n              <component\n                v-if=\"getPaneLabel(item.key)\"\n                :is=\"() => h('span', getPaneLabel(item.key)!)\"\n              />\n              <template v-else>{{ item.label }}</template>\n            </template>\n          </span>\n          <span\n            v-if=\"type === 'editable-card' && item.closable !== false\"\n            class=\"b-tabs__tab-remove\"\n            aria-hidden=\"true\"\n            @click.stop=\"onRemove(item.key, $event)\"\n          >\n            <slot name=\"removeIcon\" :item=\"item\">\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" class=\"b-tabs__close-icon\">\n                <path\n                  d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\"\n                />\n              </svg>\n            </slot>\n          </span>\n        </div>\n\n        <!-- Ink bar (line type only) -->\n        <div\n          v-if=\"type === 'line'\"\n          class=\"b-tabs__ink-bar\"\n          aria-hidden=\"true\"\n          :style=\"inkBarStyle\"\n        />\n      </div>\n\n      <!-- Add button (outside tablist to avoid aria-required-children violation) -->\n      <button\n        v-if=\"type === 'editable-card' && !hideAdd\"\n        class=\"b-tabs__add\"\n        aria-label=\"Add tab\"\n        @click=\"onAdd\"\n      >\n        <slot name=\"addIcon\">\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" class=\"b-tabs__add-icon\">\n            <path\n              d=\"M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z\"\n            />\n          </svg>\n        </slot>\n      </button>\n\n      <div v-if=\"$slots.rightExtra\" class=\"b-tabs__extra b-tabs__extra--right\">\n        <slot name=\"rightExtra\" />\n      </div>\n    </div>\n\n    <!-- Hidden slot area for BTabPane registration (pane mode only) -->\n    <div v-if=\"!isItemsMode\" v-show=\"false\" aria-hidden=\"true\" style=\"display: none\">\n      <slot />\n    </div>\n\n    <!-- Tab panels -->\n    <div class=\"b-tabs__content\">\n      <template v-for=\"item in effectiveItems\" :key=\"item.key\">\n        <!-- KeepAlive panels -->\n        <div\n          v-if=\"shouldUseKeepAlive(item)\"\n          :id=\"panelId(item.key)\"\n          class=\"b-tabs__panel\"\n          :class=\"{\n            'b-tabs__panel--active': item.key === currentKey,\n            'b-tabs__panel--animated': animated,\n          }\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          :aria-hidden=\"item.key !== currentKey\"\n          v-show=\"item.key === currentKey\"\n        >\n          <!-- Pane mode: KeepAlive caches wrapper component instances -->\n          <KeepAlive v-if=\"!isItemsMode\">\n            <component\n              v-if=\"item.key === currentKey\"\n              :is=\"panelWrappers[item.key] ?? (() => null)\"\n              :key=\"item.key\"\n            />\n          </KeepAlive>\n          <!-- Items mode: always render slot content; v-show on parent preserves state -->\n          <template v-if=\"isItemsMode\">\n            <slot :item=\"item\" />\n          </template>\n        </div>\n\n        <!-- Standard panels (no KeepAlive) -->\n        <div\n          v-else-if=\"shouldRender(item)\"\n          v-show=\"item.key === currentKey\"\n          :id=\"panelId(item.key)\"\n          class=\"b-tabs__panel\"\n          :class=\"{\n            'b-tabs__panel--active': item.key === currentKey,\n            'b-tabs__panel--animated': animated,\n          }\"\n          role=\"tabpanel\"\n          :aria-labelledby=\"tabId(item.key)\"\n          :tabindex=\"item.key === currentKey ? 0 : -1\"\n          :aria-hidden=\"item.key !== currentKey\"\n        >\n          <!-- Items mode: scoped slot -->\n          <template v-if=\"isItemsMode\">\n            <slot :item=\"item\" />\n          </template>\n          <!-- Pane mode: render registered content -->\n          <component v-else :is=\"() => getPaneContent(item.key)\" />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BTabs - Design tokens (scoped to .b-tabs)\n   ───────────────────────────────────────────── */\n.b-tabs {\n  --b-tabs-ink-bar-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-active-color: oklch(35% 0.2 260);\n  --b-tabs-item-color: oklch(30% 0.02 260 / 88%);\n  --b-tabs-item-hover-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-selected-color: oklch(54.6% 0.245 262.881);\n  --b-tabs-item-disabled-color: oklch(30% 0.02 260 / 25%);\n  --b-tabs-title-font-size: 14px;\n  --b-tabs-title-font-size-lg: 16px;\n  --b-tabs-title-font-size-sm: 14px;\n  --b-tabs-card-bg: oklch(97% 0.003 260 / 50%);\n  --b-tabs-card-height: 40px;\n  --b-tabs-card-height-lg: 48px;\n  --b-tabs-card-height-sm: 32px;\n  --b-tabs-card-padding: 8px 16px;\n  --b-tabs-card-padding-lg: 11px 16px;\n  --b-tabs-card-padding-sm: 4px 8px;\n  --b-tabs-card-gutter: 2px;\n  --b-tabs-card-border-radius: 8px 8px 0 0;\n  --b-tabs-horizontal-item-gutter: 32px;\n  --b-tabs-horizontal-item-padding: 12px 0;\n  --b-tabs-horizontal-item-padding-lg: 16px 0;\n  --b-tabs-horizontal-item-padding-sm: 8px 0;\n  --b-tabs-horizontal-margin: 0 0 16px 0;\n  --b-tabs-vertical-item-margin: 16px 0 0 0;\n  --b-tabs-vertical-item-padding: 8px 24px;\n  --b-tabs-border-color: oklch(80% 0.005 260);\n  --b-tabs-content-min-height: 0;\n  --b-tabs-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n  --b-tabs-transition-duration: 200ms;\n\n  display: flex;\n  flex-direction: column;\n  font-size: var(--b-tabs-title-font-size);\n  line-height: 1.5;\n}\n\n/* ── Placement layouts ── */\n.b-tabs--left {\n  flex-direction: row;\n}\n\n.b-tabs--right {\n  flex-direction: row-reverse;\n}\n\n.b-tabs--bottom {\n  flex-direction: column-reverse;\n}\n\n/* ── Size variants ── */\n.b-tabs--large {\n  --b-tabs-title-font-size: var(--b-tabs-title-font-size-lg);\n}\n\n.b-tabs--small {\n  --b-tabs-title-font-size: var(--b-tabs-title-font-size-sm);\n}\n\n/* ─────────────────────────────────────────────\n   Header\n   ───────────────────────────────────────────── */\n.b-tabs__header {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.b-tabs--top .b-tabs__header,\n.b-tabs--bottom .b-tabs__header {\n  border-bottom: 1px solid var(--b-tabs-border-color);\n  margin: var(--b-tabs-horizontal-margin);\n}\n\n.b-tabs--bottom .b-tabs__header {\n  border-bottom: none;\n  border-top: 1px solid var(--b-tabs-border-color);\n  margin: 0;\n}\n\n.b-tabs--left .b-tabs__header,\n.b-tabs--right .b-tabs__header {\n  flex-direction: column;\n  align-items: stretch;\n  border-right: 1px solid var(--b-tabs-border-color);\n  margin: 0;\n}\n\n.b-tabs--right .b-tabs__header {\n  border-right: none;\n  border-left: 1px solid var(--b-tabs-border-color);\n}\n\n/* Card type removes border from header */\n.b-tabs--card .b-tabs__header,\n.b-tabs--editable-card .b-tabs__header {\n  border-bottom: 1px solid var(--b-tabs-border-color);\n}\n\n/* ─────────────────────────────────────────────\n   Tab list (roving tabindex container)\n   ───────────────────────────────────────────── */\n.b-tabs__list {\n  display: flex;\n  position: relative;\n  flex: 1;\n  gap: var(--b-tabs-horizontal-item-gutter);\n}\n\n.b-tabs--centered .b-tabs__list {\n  justify-content: center;\n}\n\n.b-tabs--left .b-tabs__list,\n.b-tabs--right .b-tabs__list {\n  flex-direction: column;\n  gap: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Individual tab\n   ───────────────────────────────────────────── */\n.b-tabs__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n  padding: var(--b-tabs-horizontal-item-padding);\n  border: none;\n  background: none;\n  color: var(--b-tabs-item-color);\n  font-size: inherit;\n  font-family: inherit;\n  cursor: pointer;\n  white-space: nowrap;\n  outline: none;\n  transition: color var(--b-tabs-transition-duration);\n  line-height: 1.5;\n}\n\n.b-tabs__tab:hover:not(.b-tabs__tab--disabled) {\n  color: var(--b-tabs-item-hover-color);\n}\n\n.b-tabs__tab--active {\n  color: var(--b-tabs-item-selected-color);\n  font-weight: 500;\n}\n\n.b-tabs__tab--active:hover {\n  color: var(--b-tabs-item-active-color);\n}\n\n.b-tabs__tab--disabled {\n  color: var(--b-tabs-item-disabled-color);\n  cursor: not-allowed;\n}\n\n.b-tabs__tab:focus-visible {\n  box-shadow: var(--b-tabs-focus-ring);\n  border-radius: 4px;\n}\n\n/* Large size - tab padding */\n.b-tabs--large .b-tabs__tab {\n  padding: var(--b-tabs-horizontal-item-padding-lg);\n}\n\n/* Small size - tab padding */\n.b-tabs--small .b-tabs__tab {\n  padding: var(--b-tabs-horizontal-item-padding-sm);\n}\n\n/* Vertical tabs */\n.b-tabs--left .b-tabs__tab,\n.b-tabs--right .b-tabs__tab {\n  padding: var(--b-tabs-vertical-item-padding);\n  justify-content: flex-start;\n}\n\n.b-tabs--left .b-tabs__tab:not(:first-child),\n.b-tabs--right .b-tabs__tab:not(:first-child) {\n  margin: var(--b-tabs-vertical-item-margin);\n}\n\n/* ─────────────────────────────────────────────\n   Card-type tab\n   ───────────────────────────────────────────── */\n.b-tabs--card .b-tabs__list,\n.b-tabs--editable-card .b-tabs__list {\n  gap: var(--b-tabs-card-gutter);\n}\n\n.b-tabs--card .b-tabs__tab,\n.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding);\n  background: var(--b-tabs-card-bg);\n  border: 1px solid var(--b-tabs-border-color);\n  border-bottom: none;\n  border-radius: var(--b-tabs-card-border-radius);\n  height: var(--b-tabs-card-height);\n  margin-bottom: -1px;\n}\n\n.b-tabs--card .b-tabs__tab--active,\n.b-tabs--editable-card .b-tabs__tab--active {\n  background: white;\n  border-bottom-color: white;\n}\n\n.b-tabs--large.b-tabs--card .b-tabs__tab,\n.b-tabs--large.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding-lg);\n  height: var(--b-tabs-card-height-lg);\n}\n\n.b-tabs--small.b-tabs--card .b-tabs__tab,\n.b-tabs--small.b-tabs--editable-card .b-tabs__tab {\n  padding: var(--b-tabs-card-padding-sm);\n  height: var(--b-tabs-card-height-sm);\n}\n\n/* ─────────────────────────────────────────────\n   Ink bar (line type indicator)\n   ───────────────────────────────────────────── */\n.b-tabs__ink-bar {\n  position: absolute;\n  background: var(--b-tabs-ink-bar-color);\n  transition:\n    left var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    width var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    top var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),\n    height var(--b-tabs-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);\n  pointer-events: none;\n}\n\n.b-tabs--top .b-tabs__ink-bar,\n.b-tabs--bottom .b-tabs__ink-bar {\n  bottom: 0;\n  height: 2px;\n}\n\n.b-tabs--bottom .b-tabs__ink-bar {\n  bottom: auto;\n  top: 0;\n}\n\n.b-tabs--left .b-tabs__ink-bar {\n  right: 0;\n  width: 2px;\n}\n\n.b-tabs--right .b-tabs__ink-bar {\n  left: 0;\n  width: 2px;\n}\n\n/* ─────────────────────────────────────────────\n   Close / Remove button\n   ───────────────────────────────────────────── */\n.b-tabs__tab-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.6;\n  transition:\n    opacity var(--b-tabs-transition-duration),\n    background var(--b-tabs-transition-duration);\n}\n\n.b-tabs__tab-remove:hover {\n  opacity: 1;\n  background: oklch(0% 0 0 / 8%);\n}\n\n.b-tabs__close-icon {\n  width: 12px;\n  height: 12px;\n}\n\n/* ─────────────────────────────────────────────\n   Add button\n   ───────────────────────────────────────────── */\n.b-tabs__add {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tabs-card-padding);\n  background: var(--b-tabs-card-bg);\n  border: 1px solid var(--b-tabs-border-color);\n  border-bottom: none;\n  border-radius: var(--b-tabs-card-border-radius);\n  height: var(--b-tabs-card-height);\n  margin-bottom: -1px;\n  cursor: pointer;\n  color: var(--b-tabs-item-color);\n  transition: color var(--b-tabs-transition-duration);\n}\n\n.b-tabs__add:hover {\n  color: var(--b-tabs-item-hover-color);\n}\n\n.b-tabs__add:focus-visible {\n  box-shadow: var(--b-tabs-focus-ring);\n}\n\n.b-tabs__add-icon {\n  width: 16px;\n  height: 16px;\n}\n\n/* ─────────────────────────────────────────────\n   Extra content slots\n   ───────────────────────────────────────────── */\n.b-tabs__extra {\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Content area\n   ───────────────────────────────────────────── */\n.b-tabs__content {\n  flex: 1;\n  min-height: var(--b-tabs-content-min-height);\n}\n\n.b-tabs__panel {\n  outline: none;\n}\n\n.b-tabs__panel--animated {\n  animation: b-tabs-fade-in var(--b-tabs-transition-duration) ease-in-out;\n}\n\n@keyframes b-tabs-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-tabs {\n  --b-tabs-ink-bar-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-active-color: oklch(80% 0.14 262.881);\n  --b-tabs-item-color: oklch(85% 0.01 260 / 88%);\n  --b-tabs-item-hover-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-selected-color: oklch(70% 0.18 262.881);\n  --b-tabs-item-disabled-color: oklch(85% 0.01 260 / 25%);\n  --b-tabs-card-bg: oklch(25% 0.015 260 / 50%);\n  --b-tabs-border-color: oklch(35% 0.01 260);\n}\n\n[data-prefers-color='dark'] .b-tabs--card .b-tabs__tab--active,\n[data-prefers-color='dark'] .b-tabs--editable-card .b-tabs__tab--active {\n  background: oklch(20% 0.015 260);\n  border-bottom-color: oklch(20% 0.015 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tabs {\n    --b-tabs-ink-bar-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-active-color: oklch(80% 0.14 262.881);\n    --b-tabs-item-color: oklch(85% 0.01 260 / 88%);\n    --b-tabs-item-hover-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-selected-color: oklch(70% 0.18 262.881);\n    --b-tabs-item-disabled-color: oklch(85% 0.01 260 / 25%);\n    --b-tabs-card-bg: oklch(25% 0.015 260 / 50%);\n    --b-tabs-border-color: oklch(35% 0.01 260);\n  }\n  [data-prefers-color='system'] .b-tabs--editable-card .b-tabs__tab--active {\n    background: oklch(20% 0.015 260);\n    border-bottom-color: oklch(20% 0.015 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tabs {\n    --b-tabs-transition-duration: 0ms;\n  }\n\n  .b-tabs__panel--animated {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system201.js","names":[],"sources":["../src/components/BSplitter/BSplitterPanel.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot } from \"vue\"\n\nimport type { BSplitterPanelCollapsible } from './types';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  ...{ name: 'BSplitterPanel' },\n  __name: 'BSplitterPanel',\n  props: {\n    size: {},\n    defaultSize: {},\n    min: {},\n    max: {},\n    resizable: { type: Boolean },\n    collapsible: { type: [Boolean, Object] },\n    destroyOnHidden: { type: Boolean }\n  },\n  setup(__props: any) {\n\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 */\n\n\n\n\n\n\nreturn (_ctx: any,_cache: any) => {\n  return _renderSlot(_ctx.$slots, \"default\")\n}\n}\n\n})"],"mappings":";;AAMA,IAAA,IAA4B,kBAAiB;CACtC,MAAM;CACX,QAAQ;CACR,OAAO;EACL,MAAM,EAAE;EACR,aAAa,EAAE;EACf,KAAK,EAAE;EACP,KAAK,EAAE;EACP,WAAW,EAAE,MAAM,SAAS;EAC5B,aAAa,EAAE,MAAM,CAAC,SAAS,OAAO,EAAE;EACxC,iBAAiB,EAAE,MAAM,SAAS;EACnC;CACD,MAAM,GAAc;AAmBtB,UAAQ,GAAU,MACT,EAAY,EAAK,QAAQ,UAAU;;CAI3C,CAAA"}

package/dist/design-system202.js

@@ -1,122 +1,7 @@
-import { Transition as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, watch as m, withCtx as h, withModifiers as g } from "vue";
-//#region src/components/BTag/BTag.vue?vue&type=script&setup=true&lang.ts
-var _ = ["aria-hidden"], v = { class: "b-tag__content" }, y = ["data-icon"], b = {
-	key: 1,
-	class: "b-tag__close-icon",
-	viewBox: "0 0 12 12",
-	xmlns: "http://www.w3.org/2000/svg",
-	"aria-hidden": "true",
-	focusable: "false"
-}, x = /* @__PURE__ */ s({
-	__name: "BTag",
-	props: {
-		color: {},
-		variant: { default: "filled" },
-		size: { default: "default" },
-		closable: {
-			type: Boolean,
-			default: !1
-		},
-		closeIcon: {},
-		visible: {
-			type: Boolean,
-			default: () => void 0
-		},
-		bordered: {
-			type: Boolean,
-			default: !0
-		},
-		icon: {}
-	},
-	emits: [
-		"close",
-		"afterClose",
-		"update:visible"
-	],
-	setup(s, { emit: x }) {
-		let S = x, C = [
-			"default",
-			"success",
-			"processing",
-			"error",
-			"warning",
-			"magenta",
-			"red",
-			"volcano",
-			"orange",
-			"gold",
-			"lime",
-			"green",
-			"cyan",
-			"blue",
-			"geekblue",
-			"purple"
-		], w = t(() => s.color === void 0 || C.includes(s.color)), T = t(() => w.value ? s.color ?? "default" : "default"), E = t(() => s.visible !== void 0), D = d(!0);
-		m(() => s.visible, (e) => {
-			e !== void 0 && (D.value = e);
-		});
-		let O = t(() => E.value ? s.visible : D.value);
-		function k(e) {
-			S("close", e), E.value ? S("update:visible", !1) : D.value = !1;
-		}
-		function A(e) {
-			k(e);
-		}
-		function j(e) {
-			(e.key === "Enter" || e.key === " " || e.key === "Escape") && (e.preventDefault(), k(e));
-		}
-		function M() {
-			S("afterClose");
-		}
-		let N = t(() => [
-			"b-tag",
-			`b-tag--${T.value}`,
-			`b-tag--${s.variant}`,
-			{
-				"b-tag--borderless": !s.bordered,
-				"b-tag--closable": s.closable,
-				"b-tag--small": s.size === "small",
-				"b-tag--large": s.size === "large",
-				"b-tag--custom-color": !w.value
-			}
-		]), P = t(() => {
-			if (!w.value) return { "--b-tag-custom-color": s.color };
-		});
-		return (t, d) => (u(), n(e, {
-			name: "b-tag-fade",
-			onAfterLeave: M
-		}, {
-			default: h(() => [O.value ? (u(), i("span", {
-				key: 0,
-				class: c(N.value),
-				style: l(P.value)
-			}, [
-				t.$slots.icon || s.icon ? (u(), i("span", {
-					key: 0,
-					class: "b-tag__icon",
-					"aria-hidden": t.$slots.icon ? void 0 : "true"
-				}, [f(t.$slots, "icon", {}, () => [o(p(s.icon), 1)])], 8, _)) : r("", !0),
-				a("span", v, [f(t.$slots, "default")]),
-				s.closable ? (u(), i("button", {
-					key: 1,
-					type: "button",
-					class: "b-tag__close",
-					"aria-label": "Remove tag",
-					tabindex: "0",
-					onClick: g(A, ["stop"]),
-					onKeydown: j
-				}, [f(t.$slots, "closeIcon", {}, () => [s.closeIcon ? (u(), i("span", {
-					key: 0,
-					class: "b-tag__close-label",
-					"aria-hidden": "true",
-					"data-icon": s.closeIcon
-				}, null, 8, y)) : (u(), i("svg", b, [...d[0] ||= [a("path", { d: "M9.5 3.205 8.795 2.5 6 5.295 3.205 2.5 2.5 3.205 5.295 6 2.5 8.795 3.205 9.5 6 6.705 8.795 9.5 9.5 8.795 6.705 6z" }, null, -1)]]))])], 32)) : r("", !0)
-			], 6)) : r("", !0)]),
-			_: 3
-		}));
-	}
-});
+import e from "./design-system201.js";
+//#region src/components/BSplitter/BSplitterPanel.vue
+var t = e;
 //#endregion
-export { x as default };
+export { t as default };
 
 //# sourceMappingURL=design-system202.js.map

package/dist/design-system202.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system202.js","names":[],"sources":["../src/components/BTag/BTag.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, withModifiers as _withModifiers, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, Transition as _Transition, withCtx as _withCtx, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = [\"aria-hidden\"]\nconst _hoisted_2 = { class: \"b-tag__content\" }\nconst _hoisted_3 = [\"data-icon\"]\nconst _hoisted_4 = {\n  key: 1,\n  class: \"b-tag__close-icon\",\n  viewBox: \"0 0 12 12\",\n  xmlns: \"http://www.w3.org/2000/svg\",\n  \"aria-hidden\": \"true\",\n  focusable: \"false\"\n}\n\nimport { computed, ref, watch } from 'vue';\n\nimport type { BTagColor, BTagPresetColor, BTagSize, BTagVariant } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BTag',\n  props: {\n    color: {},\n    variant: { default: 'filled' },\n    size: { default: 'default' },\n    closable: { type: Boolean, default: false },\n    closeIcon: {},\n    visible: { type: Boolean, default: () => (undefined) },\n    bordered: { type: Boolean, default: true },\n    icon: {}\n  },\n  emits: [\"close\", \"afterClose\", \"update:visible\"],\n  setup(__props: any, { emit: __emit }) {\n\n\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = __emit;\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\n\n\n// ─────────────────────────────────────────────\n// Preset colors\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: BTagPresetColor[] = [\n  'default',\n  'success',\n  'processing',\n  'error',\n  'warning',\n  'magenta',\n  'red',\n  'volcano',\n  'orange',\n  'gold',\n  'lime',\n  'green',\n  'cyan',\n  'blue',\n  'geekblue',\n  'purple',\n];\n\nconst isPreset = computed(() => __props.color === undefined || (PRESET_COLORS as string[]).includes(__props.color));\n\nconst effectiveColor = computed<BTagPresetColor>(() =>\n  isPreset.value ? ((__props.color ?? 'default') as BTagPresetColor) : 'default',\n);\n\n// ─────────────────────────────────────────────\n// Visibility state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => __props.visible !== undefined);\nconst internalVisible = ref(true);\n\n// Sync external → internal when switching to controlled\nwatch(\n  () => __props.visible,\n  (val) => {\n    if (val !== undefined) internalVisible.value = val;\n  },\n);\n\nconst isVisible = computed(() => (isControlled.value ? __props.visible! : internalVisible.value));\n\n// ─────────────────────────────────────────────\n// Close logic\n// ─────────────────────────────────────────────\nfunction handleClose(event: MouseEvent | KeyboardEvent) {\n  emit('close', event);\n  if (isControlled.value) {\n    emit('update:visible', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onCloseClick(event: MouseEvent) {\n  handleClose(event);\n}\n\nfunction onCloseKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ' || event.key === 'Escape') {\n    event.preventDefault();\n    handleClose(event);\n  }\n}\n\nfunction onAfterLeave() {\n  emit('afterClose');\n}\n\n// ─────────────────────────────────────────────\n// Root class\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-tag',\n  `b-tag--${effectiveColor.value}`,\n  `b-tag--${__props.variant}`,\n  {\n    'b-tag--borderless': !__props.bordered,\n    'b-tag--closable': __props.closable,\n    'b-tag--small': __props.size === 'small',\n    'b-tag--large': __props.size === 'large',\n    'b-tag--custom-color': !isPreset.value,\n  },\n]);\n\n// ─────────────────────────────────────────────\n// Custom color inline style\n// ─────────────────────────────────────────────\nconst customColorStyle = computed(() => {\n  if (isPreset.value) return undefined;\n  // For custom colors: use the color as border + text; tint bg at 10% opacity\n  return {\n    '--b-tag-custom-color': __props.color,\n  } as Record<string, string>;\n});\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createBlock(_Transition, {\n    name: \"b-tag-fade\",\n    onAfterLeave: onAfterLeave\n  }, {\n    default: _withCtx(() => [\n      (isVisible.value)\n        ? (_openBlock(), _createElementBlock(\"span\", {\n            key: 0,\n            class: _normalizeClass(rootClasses.value),\n            style: _normalizeStyle(customColorStyle.value)\n          }, [\n            (_ctx.$slots.icon || __props.icon)\n              ? (_openBlock(), _createElementBlock(\"span\", {\n                  key: 0,\n                  class: \"b-tag__icon\",\n                  \"aria-hidden\": _ctx.$slots.icon ? undefined : 'true'\n                }, [\n                  _renderSlot(_ctx.$slots, \"icon\", {}, () => [\n                    _createTextVNode(_toDisplayString(__props.icon), 1)\n                  ])\n                ], 8, _hoisted_1))\n              : _createCommentVNode(\"\", true),\n            _createElementVNode(\"span\", _hoisted_2, [\n              _renderSlot(_ctx.$slots, \"default\")\n            ]),\n            (__props.closable)\n              ? (_openBlock(), _createElementBlock(\"button\", {\n                  key: 1,\n                  type: \"button\",\n                  class: \"b-tag__close\",\n                  \"aria-label\": \"Remove tag\",\n                  tabindex: \"0\",\n                  onClick: _withModifiers(onCloseClick, [\"stop\"]),\n                  onKeydown: onCloseKeydown\n                }, [\n                  _renderSlot(_ctx.$slots, \"closeIcon\", {}, () => [\n                    (__props.closeIcon)\n                      ? (_openBlock(), _createElementBlock(\"span\", {\n                          key: 0,\n                          class: \"b-tag__close-label\",\n                          \"aria-hidden\": \"true\",\n                          \"data-icon\": __props.closeIcon\n                        }, null, 8, _hoisted_3))\n                      : (_openBlock(), _createElementBlock(\"svg\", _hoisted_4, [...(_cache[0] || (_cache[0] = [\n                          _createElementVNode(\"path\", { d: \"M9.5 3.205 8.795 2.5 6 5.295 3.205 2.5 2.5 3.205 5.295 6 2.5 8.795 3.205 9.5 6 6.705 8.795 9.5 9.5 8.795 6.705 6z\" }, null, -1)\n                        ]))]))\n                  ])\n                ], 32))\n              : _createCommentVNode(\"\", true)\n          ], 6))\n        : _createCommentVNode(\"\", true)\n    ]),\n    _: 3\n  }))\n}\n}\n\n})"],"mappings":";;AAGA,IAAM,IAAa,CAAC,cAAc,EAC5B,IAAa,EAAE,OAAO,kBAAkB,EACxC,IAAa,CAAC,YAAY,EAC1B,IAAa;CACjB,KAAK;CACL,OAAO;CACP,SAAS;CACT,OAAO;CACP,eAAe;CACf,WAAW;CACZ,EAUD,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,OAAO,EAAE;EACT,SAAS,EAAE,SAAS,UAAU;EAC9B,MAAM,EAAE,SAAS,WAAW;EAC5B,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,WAAW,EAAE;EACb,SAAS;GAAE,MAAM;GAAS,eAAgB,KAAA;GAAY;EACtD,UAAU;GAAE,MAAM;GAAS,SAAS;GAAM;EAC1C,MAAM,EAAE;EACT;CACD,OAAO;EAAC;EAAS;EAAc;EAAiB;CAChD,MAAM,GAAc,EAAE,MAAM,KAAU;EAOxC,IAAM,IAAO,GAUP,IAAmC;GACvC;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EAEK,IAAW,QAAe,EAAQ,UAAU,KAAA,KAAc,EAA2B,SAAS,EAAQ,MAAM,CAAC,EAE7G,IAAiB,QACrB,EAAS,QAAU,EAAQ,SAAS,YAAiC,UACtE,EAKK,IAAe,QAAe,EAAQ,YAAY,KAAA,EAAU,EAC5D,IAAkB,EAAI,GAAK;AAGjC,UACQ,EAAQ,UACb,MAAQ;AACP,GAAI,MAAQ,KAAA,MAAW,EAAgB,QAAQ;IAElD;EAED,IAAM,IAAY,QAAgB,EAAa,QAAQ,EAAQ,UAAW,EAAgB,MAAO;EAKjG,SAAS,EAAY,GAAmC;AAEtD,GADA,EAAK,SAAS,EAAM,EAChB,EAAa,QACf,EAAK,kBAAkB,GAAM,GAE7B,EAAgB,QAAQ;;EAI5B,SAAS,EAAa,GAAmB;AACvC,KAAY,EAAM;;EAGpB,SAAS,EAAe,GAAsB;AAC5C,IAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,OAAO,EAAM,QAAQ,cAC9D,EAAM,gBAAgB,EACtB,EAAY,EAAM;;EAItB,SAAS,IAAe;AACtB,KAAK,aAAa;;EAMpB,IAAM,IAAc,QAAe;GACjC;GACA,UAAU,EAAe;GACzB,UAAU,EAAQ;GAClB;IACE,qBAAqB,CAAC,EAAQ;IAC9B,mBAAmB,EAAQ;IAC3B,gBAAgB,EAAQ,SAAS;IACjC,gBAAgB,EAAQ,SAAS;IACjC,uBAAuB,CAAC,EAAS;IAClC;GACF,CAAC,EAKI,IAAmB,QAAe;AAClC,UAAS,MAEb,QAAO,EACL,wBAAwB,EAAQ,OACjC;IACD;AAEF,UAAQ,GAAU,OACR,GAAY,EAAE,EAAa,GAAa;GAC9C,MAAM;GACQ;GACf,EAAE;GACD,SAAS,QAAe,CACrB,EAAU,SACN,GAAY,EAAE,EAAoB,QAAQ;IACzC,KAAK;IACL,OAAO,EAAgB,EAAY,MAAM;IACzC,OAAO,EAAgB,EAAiB,MAAM;IAC/C,EAAE;IACA,EAAK,OAAO,QAAQ,EAAQ,QACxB,GAAY,EAAE,EAAoB,QAAQ;KACzC,KAAK;KACL,OAAO;KACP,eAAe,EAAK,OAAO,OAAO,KAAA,IAAY;KAC/C,EAAE,CACD,EAAY,EAAK,QAAQ,QAAQ,EAAE,QAAQ,CACzC,EAAiB,EAAiB,EAAQ,KAAK,EAAE,EAAE,CACpD,CAAC,CACH,EAAE,GAAG,EAAW,IACjB,EAAoB,IAAI,GAAK;IACjC,EAAoB,QAAQ,GAAY,CACtC,EAAY,EAAK,QAAQ,UAAU,CACpC,CAAC;IACD,EAAQ,YACJ,GAAY,EAAE,EAAoB,UAAU;KAC3C,KAAK;KACL,MAAM;KACN,OAAO;KACP,cAAc;KACd,UAAU;KACV,SAAS,EAAe,GAAc,CAAC,OAAO,CAAC;KAC/C,WAAW;KACZ,EAAE,CACD,EAAY,EAAK,QAAQ,aAAa,EAAE,QAAQ,CAC7C,EAAQ,aACJ,GAAY,EAAE,EAAoB,QAAQ;KACzC,KAAK;KACL,OAAO;KACP,eAAe;KACf,aAAa,EAAQ;KACtB,EAAE,MAAM,GAAG,EAAW,KACtB,GAAY,EAAE,EAAoB,OAAO,GAAY,CAAC,GAAI,AAAc,EAAO,OAAK,CACnF,EAAoB,QAAQ,EAAE,GAAG,qHAAqH,EAAE,MAAM,GAAG,CAClK,CAAG,CAAC,EACV,CAAC,CACH,EAAE,GAAG,IACN,EAAoB,IAAI,GAAK;IAClC,EAAE,EAAE,IACL,EAAoB,IAAI,GAAK,CAClC,CAAC;GACF,GAAG;GACJ,CAAC;;CAIH,CAAA"}
+{"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":""}

package/dist/design-system203.js

@@ -0,0 +1,6 @@
+//#region src/components/BSplitter/types.ts
+var e = Symbol("BSplitterContext");
+//#endregion
+export { e as BSplitterContextKey };
+
+//# sourceMappingURL=design-system203.js.map

package/dist/design-system203.js.map

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