@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system201.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system201.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":"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"}
+{"version":3,"file":"design-system201.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  active = false,\n  avatar = false,\n  loading = true,\n  paragraph = true,\n  round = false,\n  title = true,\n} = defineProps<{\n  /**\n   * Show the animated shimmer effect.\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Show the avatar placeholder. Pass an object to configure its shape/size/active.\n   * @default false\n   */\n  avatar?: boolean | BSkeletonAvatarConfig;\n  /**\n   * When `false`, renders the default slot (real content) instead of placeholders.\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Show paragraph placeholder rows. Pass an object to configure rows / row widths.\n   * @default true\n   */\n  paragraph?: boolean | BSkeletonParagraphConfig;\n  /**\n   * Round corners on title and paragraph rows.\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Show the title bar placeholder. Pass an object to configure its width.\n   * @default true\n   */\n  title?: boolean | BSkeletonTitleConfig;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Real content rendered when `loading` is `false`. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => avatar !== false && avatar != null);\nconst showTitle = computed(() => title !== false && title != null);\nconst showParagraph = computed(() => paragraph !== false && paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof avatar === 'object' && avatar !== null ? avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof title === 'object' && title !== null ? title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof paragraph === 'object' && paragraph !== null ? paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': round,\n  },\n]);\n</script>\n\n<template>\n  <div v-if=\"loading\" :class=\"rootClasses\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n    <div v-if=\"showAvatar\" class=\"b-skeleton__header\">\n      <BSkeletonAvatar\n        :active=\"active || avatarConfig.active\"\n        :shape=\"avatarConfig.shape\"\n        :size=\"avatarConfig.size\"\n      />\n    </div>\n\n    <div class=\"b-skeleton__content\">\n      <h3\n        v-if=\"showTitle\"\n        class=\"b-skeleton__title\"\n        :style=\"titleWidth ? { width: titleWidth } : undefined\"\n        aria-hidden=\"true\"\n      />\n\n      <ul v-if=\"showParagraph\" class=\"b-skeleton__paragraph\" aria-hidden=\"true\">\n        <li\n          v-for=\"(w, i) in paragraphRowWidths\"\n          :key=\"i\"\n          class=\"b-skeleton__paragraph-row\"\n          :style=\"w ? { width: w } : undefined\"\n        />\n      </ul>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot />\n  </template>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ─────────────────────────────────────────────\n   AntD design-token mapping:\n     gradientFromColor  → --b-skeleton-gradient-from-color\n     gradientToColor    → --b-skeleton-gradient-to-color\n     titleHeight        → --b-skeleton-title-height\n     paragraphLiHeight  → --b-skeleton-paragraph-li-height\n     paragraphMarginTop → --b-skeleton-paragraph-margin-top\n     blockRadius        → --b-skeleton-block-radius\n     borderRadius       → --b-skeleton-border-radius\n     borderRadiusSM     → --b-skeleton-border-radius-sm\n     controlHeight      → --b-skeleton-control-height\n     controlHeightLG    → --b-skeleton-control-height-lg\n     controlHeightSM    → --b-skeleton-control-height-sm\n     ─────────────────────────────────────────── */\n.b-skeleton {\n  --b-skeleton-gradient-from-color: oklch(93% 0 0); /* #f2f2f2 */\n  --b-skeleton-gradient-to-color: oklch(85% 0 0); /* #d9d9d9 */\n  --b-skeleton-title-height: 16px;\n  --b-skeleton-paragraph-li-height: 16px;\n  --b-skeleton-paragraph-margin-top: 28px;\n  --b-skeleton-paragraph-row-gap: 16px;\n  --b-skeleton-block-radius: 4px;\n  --b-skeleton-border-radius: 6px;\n  --b-skeleton-border-radius-sm: 4px;\n  --b-skeleton-control-height: 32px;\n  --b-skeleton-control-height-lg: 40px;\n  --b-skeleton-control-height-sm: 24px;\n  --b-skeleton-avatar-size-default: 32px;\n  --b-skeleton-avatar-size-small: 24px;\n  --b-skeleton-avatar-size-large: 40px;\n  --b-skeleton-image-size: 96px;\n  --b-skeleton-button-min-width: 64px;\n  --b-skeleton-input-min-width: 160px;\n  --b-skeleton-animation-duration: 1.4s;\n  --b-skeleton-content-gap: 16px;\n}\n\n/* Dark mode (explicit + system) */\n[data-prefers-color='dark'] .b-skeleton,\n[data-prefers-color='dark'] .b-skeleton-element {\n  --b-skeleton-gradient-from-color: oklch(28% 0 0);\n  --b-skeleton-gradient-to-color: oklch(35% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton,\n  [data-prefers-color='system'] .b-skeleton-element {\n    --b-skeleton-gradient-from-color: oklch(28% 0 0);\n    --b-skeleton-gradient-to-color: oklch(35% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Layout\n   ───────────────────────────────────────────── */\n.b-skeleton {\n  display: flex;\n  width: 100%;\n  gap: var(--b-skeleton-content-gap);\n  box-sizing: border-box;\n}\n\n.b-skeleton__header {\n  flex-shrink: 0;\n}\n\n.b-skeleton__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-skeleton__title {\n  width: 38%;\n  height: var(--b-skeleton-title-height);\n  margin: 0;\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton--with-avatar .b-skeleton__title {\n  width: 50%;\n}\n\n.b-skeleton--round .b-skeleton__title {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Paragraph\n   ───────────────────────────────────────────── */\n.b-skeleton__paragraph {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__title + .b-skeleton__paragraph {\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__paragraph-row {\n  width: 100%;\n  height: var(--b-skeleton-paragraph-li-height);\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton__paragraph-row + .b-skeleton__paragraph-row {\n  margin-top: var(--b-skeleton-paragraph-row-gap);\n}\n\n.b-skeleton--round .b-skeleton__paragraph-row {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Active shimmer animation\n   ───────────────────────────────────────────── */\n.b-skeleton--active .b-skeleton__title,\n.b-skeleton--active .b-skeleton__paragraph-row {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color) 25%,\n    var(--b-skeleton-gradient-to-color) 37%,\n    var(--b-skeleton-gradient-from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration) ease infinite;\n}\n\n@keyframes b-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* Shared active shimmer for sub-components (Avatar, Button, Input, Image, Node) */\n.b-skeleton-element--active {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 25%,\n    var(--b-skeleton-gradient-to-color, oklch(85% 0 0)) 37%,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration, 1.4s) ease infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-skeleton--active .b-skeleton__title,\n  .b-skeleton--active .b-skeleton__paragraph-row,\n  .b-skeleton-element--active {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,IAAa,QAAe,EAAA,WAAW,MAAS,EAAA,UAAU,KAAK,EAC/D,IAAY,QAAe,EAAA,UAAU,MAAS,EAAA,SAAS,KAAK,EAC5D,IAAgB,QAAe,EAAA,cAAc,MAAS,EAAA,aAAa,KAAK,EAExE,IAAe,QACnB,OAAO,EAAA,UAAW,YAAY,EAAA,WAAW,OAAO,EAAA,SAAS,EAAE,CAC5D,EAEK,IAAc,QAClB,OAAO,EAAA,SAAU,YAAY,EAAA,UAAU,OAAO,EAAA,QAAQ,EAAE,CACzD,EAEK,IAAkB,QACtB,OAAO,EAAA,aAAc,YAAY,EAAA,cAAc,OAAO,EAAA,YAAY,EAAE,CACrE,EAEK,IAAa,QAAe,EAAe,EAAY,MAAM,MAAM,CAAC,EAEpE,IAAgB,QAAe;GACnC,IAAM,IAAI,EAAgB,MAAM;AAChC,UAAO,OAAO,KAAM,YAAY,IAAI,IAAI,KAAK,MAAM,EAAE,GAAG;IACxD,EAEI,IAAqB,QAAyB;GAClD,IAAM,IAAS,EAAgB,MAAM,OAC/B,IAAO,EAAc,OACrB,IAAgB,EAAE;AACxB,QAAK,IAAI,IAAI,GAAG,IAAI,GAAM,KAAK,EAC7B,KAAI,MAAM,QAAQ,EAAO,EAAE;IACzB,IAAM,IAAI,EAAO;AACjB,MAAI,KAAK,EAAe,EAAE,IAAI,GAAG;cACxB,MAAM,IAAO,GAAG;IAEzB,IAAM,IAAI,EAAe,EAAO;AAChC,MAAI,KAAK,KAAK,MAAM;SAEpB,GAAI,KAAK,GAAG;AAGhB,UAAO;IACP;EAEF,SAAS,EAAe,GAAoD;AACtE,YAAK,KAET,QADI,OAAO,KAAM,WAAiB,GAAG,EAAE,MAChC;;EAGT,IAAM,IAAc,QAAe,CACjC,cACA;GACE,sBAAsB,EAAA;GACtB,2BAA2B,EAAW;GACtC,qBAAqB,EAAA;GACtB,CACF,CAAC;mBAIW,EAAA,WAAA,GAAA,EAAX,EA0BM,OAAA;;GA1Be,OAAK,EAAE,EAAA,MAAW;GAAE,MAAK;GAAS,aAAU;GAAS,cAAW;MACxE,EAAA,SAAA,GAAA,EAAX,EAMM,OANN,GAMM,CALJ,EAIE,GAAA;GAHC,QAAQ,EAAA,UAAU,EAAA,MAAa;GAC/B,OAAO,EAAA,MAAa;GACpB,MAAM,EAAA,MAAa;;;;;qBAIxB,EAgBM,OAhBN,GAgBM,CAdI,EAAA,SAAA,GAAA,EADR,EAKE,MAAA;;GAHA,OAAM;GACL,OAAK,EAAE,EAAA,QAAU,EAAA,OAAY,EAAA,OAAU,GAAK,KAAA,EAAS;GACtD,eAAY;4BAGJ,EAAA,SAAA,GAAA,EAAV,EAOK,MAPL,GAOK,EAAA,EAAA,GAAA,EANH,EAKE,GAAA,MAAA,EAJiB,EAAA,QAAT,GAAG,YADb,EAKE,MAAA;GAHC,KAAK;GACN,OAAM;GACL,OAAK,EAAE,IAAC,EAAA,OAAY,GAAC,GAAK,KAAA,EAAS;gDAO1C,EAAQ,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA"}

package/dist/design-system203.js

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

package/dist/design-system203.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system203.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":""}
+{"version":3,"file":"design-system203.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  active = false,\n  avatar = false,\n  loading = true,\n  paragraph = true,\n  round = false,\n  title = true,\n} = defineProps<{\n  /**\n   * Show the animated shimmer effect.\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Show the avatar placeholder. Pass an object to configure its shape/size/active.\n   * @default false\n   */\n  avatar?: boolean | BSkeletonAvatarConfig;\n  /**\n   * When `false`, renders the default slot (real content) instead of placeholders.\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Show paragraph placeholder rows. Pass an object to configure rows / row widths.\n   * @default true\n   */\n  paragraph?: boolean | BSkeletonParagraphConfig;\n  /**\n   * Round corners on title and paragraph rows.\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Show the title bar placeholder. Pass an object to configure its width.\n   * @default true\n   */\n  title?: boolean | BSkeletonTitleConfig;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Real content rendered when `loading` is `false`. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => avatar !== false && avatar != null);\nconst showTitle = computed(() => title !== false && title != null);\nconst showParagraph = computed(() => paragraph !== false && paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof avatar === 'object' && avatar !== null ? avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof title === 'object' && title !== null ? title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof paragraph === 'object' && paragraph !== null ? paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': round,\n  },\n]);\n</script>\n\n<template>\n  <div v-if=\"loading\" :class=\"rootClasses\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n    <div v-if=\"showAvatar\" class=\"b-skeleton__header\">\n      <BSkeletonAvatar\n        :active=\"active || avatarConfig.active\"\n        :shape=\"avatarConfig.shape\"\n        :size=\"avatarConfig.size\"\n      />\n    </div>\n\n    <div class=\"b-skeleton__content\">\n      <h3\n        v-if=\"showTitle\"\n        class=\"b-skeleton__title\"\n        :style=\"titleWidth ? { width: titleWidth } : undefined\"\n        aria-hidden=\"true\"\n      />\n\n      <ul v-if=\"showParagraph\" class=\"b-skeleton__paragraph\" aria-hidden=\"true\">\n        <li\n          v-for=\"(w, i) in paragraphRowWidths\"\n          :key=\"i\"\n          class=\"b-skeleton__paragraph-row\"\n          :style=\"w ? { width: w } : undefined\"\n        />\n      </ul>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot />\n  </template>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ─────────────────────────────────────────────\n   AntD design-token mapping:\n     gradientFromColor  → --b-skeleton-gradient-from-color\n     gradientToColor    → --b-skeleton-gradient-to-color\n     titleHeight        → --b-skeleton-title-height\n     paragraphLiHeight  → --b-skeleton-paragraph-li-height\n     paragraphMarginTop → --b-skeleton-paragraph-margin-top\n     blockRadius        → --b-skeleton-block-radius\n     borderRadius       → --b-skeleton-border-radius\n     borderRadiusSM     → --b-skeleton-border-radius-sm\n     controlHeight      → --b-skeleton-control-height\n     controlHeightLG    → --b-skeleton-control-height-lg\n     controlHeightSM    → --b-skeleton-control-height-sm\n     ─────────────────────────────────────────── */\n.b-skeleton {\n  --b-skeleton-gradient-from-color: oklch(93% 0 0); /* #f2f2f2 */\n  --b-skeleton-gradient-to-color: oklch(85% 0 0); /* #d9d9d9 */\n  --b-skeleton-title-height: 16px;\n  --b-skeleton-paragraph-li-height: 16px;\n  --b-skeleton-paragraph-margin-top: 28px;\n  --b-skeleton-paragraph-row-gap: 16px;\n  --b-skeleton-block-radius: 4px;\n  --b-skeleton-border-radius: 6px;\n  --b-skeleton-border-radius-sm: 4px;\n  --b-skeleton-control-height: 32px;\n  --b-skeleton-control-height-lg: 40px;\n  --b-skeleton-control-height-sm: 24px;\n  --b-skeleton-avatar-size-default: 32px;\n  --b-skeleton-avatar-size-small: 24px;\n  --b-skeleton-avatar-size-large: 40px;\n  --b-skeleton-image-size: 96px;\n  --b-skeleton-button-min-width: 64px;\n  --b-skeleton-input-min-width: 160px;\n  --b-skeleton-animation-duration: 1.4s;\n  --b-skeleton-content-gap: 16px;\n}\n\n/* Dark mode (explicit + system) */\n[data-prefers-color='dark'] .b-skeleton,\n[data-prefers-color='dark'] .b-skeleton-element {\n  --b-skeleton-gradient-from-color: oklch(28% 0 0);\n  --b-skeleton-gradient-to-color: oklch(35% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton,\n  [data-prefers-color='system'] .b-skeleton-element {\n    --b-skeleton-gradient-from-color: oklch(28% 0 0);\n    --b-skeleton-gradient-to-color: oklch(35% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Layout\n   ───────────────────────────────────────────── */\n.b-skeleton {\n  display: flex;\n  width: 100%;\n  gap: var(--b-skeleton-content-gap);\n  box-sizing: border-box;\n}\n\n.b-skeleton__header {\n  flex-shrink: 0;\n}\n\n.b-skeleton__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-skeleton__title {\n  width: 38%;\n  height: var(--b-skeleton-title-height);\n  margin: 0;\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton--with-avatar .b-skeleton__title {\n  width: 50%;\n}\n\n.b-skeleton--round .b-skeleton__title {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Paragraph\n   ───────────────────────────────────────────── */\n.b-skeleton__paragraph {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__title + .b-skeleton__paragraph {\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__paragraph-row {\n  width: 100%;\n  height: var(--b-skeleton-paragraph-li-height);\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton__paragraph-row + .b-skeleton__paragraph-row {\n  margin-top: var(--b-skeleton-paragraph-row-gap);\n}\n\n.b-skeleton--round .b-skeleton__paragraph-row {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Active shimmer animation\n   ───────────────────────────────────────────── */\n.b-skeleton--active .b-skeleton__title,\n.b-skeleton--active .b-skeleton__paragraph-row {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color) 25%,\n    var(--b-skeleton-gradient-to-color) 37%,\n    var(--b-skeleton-gradient-from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration) ease infinite;\n}\n\n@keyframes b-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* Shared active shimmer for sub-components (Avatar, Button, Input, Image, Node) */\n.b-skeleton-element--active {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 25%,\n    var(--b-skeleton-gradient-to-color, oklch(85% 0 0)) 37%,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration, 1.4s) ease infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-skeleton--active .b-skeleton__title,\n  .b-skeleton--active .b-skeleton__paragraph-row,\n  .b-skeleton-element--active {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system204.js

@@ -1,103 +1,38 @@
-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",
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i } from "vue";
+//#region src/components/BSkeleton/BSkeletonButton.vue?vue&type=script&setup=true&lang.ts
+var a = /* @__PURE__ */ n({
+	__name: "BSkeletonButton",
 	props: {
-		spinning: {
+		active: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		size: { default: () => e.Default },
-		tip: { default: "" },
-		delay: { default: 0 },
-		fullscreen: {
+		block: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		shape: { default: "default" },
+		size: { default: "default" }
 	},
-	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}`,
+	setup(n) {
+		let a = e(() => [
+			"b-skeleton-element",
+			"b-skeleton-button",
+			`b-skeleton-button--${n.shape}`,
+			`b-skeleton-button--${n.size}`,
 			{
-				"b-spin--spinning": P.value,
-				"b-spin--nested": L.value,
-				"b-spin--has-tip": R.value,
-				"b-spin--fullscreen": e.fullscreen
+				"b-skeleton-button--block": n.block,
+				"b-skeleton-element--active": n.active
 			}
 		]);
-		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));
+		return (e, n) => (i(), t("span", {
+			class: r(a.value),
+			role: "presentation",
+			"aria-hidden": "true"
+		}, null, 2));
 	}
 });
 //#endregion
-export { N as default };
+export { a as default };
 
 //# sourceMappingURL=design-system204.js.map

package/dist/design-system204.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system204.js","names":[],"sources":["../src/components/BSpin/BSpin.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  spinning = true,\n  size = BSpinSize.Default,\n  tip = '',\n  delay = 0,\n  fullscreen = false,\n} = defineProps<{\n  /**\n   * Whether the Spin indicator is active.\n   * @default true\n   */\n  spinning?: boolean;\n  /**\n   * Size of the spinner - small, default, or large.\n   * @default 'default'\n   */\n  size?: `${BSpinSize}`;\n  /**\n   * Descriptive text displayed below the spinning indicator.\n   */\n  tip?: string;\n  /**\n   * Delay in milliseconds before the spinner shows after `spinning` becomes true.\n   * Prevents flicker for fast operations. Does not apply to hiding.\n   * @default 0\n   */\n  delay?: number;\n  /**\n   * Display as fullscreen overlay (fixed, covers the entire viewport).\n   * @default false\n   */\n  fullscreen?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Content to wrap with a spinning overlay. */\n  default?(): unknown;\n  /** Custom spinner indicator (replaces the default dots). */\n  indicator?(): unknown;\n  /** Custom tip content (replaces the `tip` prop text). */\n  tip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst tipId = useId();\n\n/** Delayed spinning state - respects `delay` prop. */\nconst shouldShow = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction applySpinning(value: boolean) {\n  clearTimeout(delayTimer);\n  if (value && delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(spinning);\n\nwatch(() => spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${size}`,\n  {\n    'b-spin--spinning': shouldShow.value,\n    'b-spin--nested': isNested.value,\n    'b-spin--has-tip': hasTip.value,\n    'b-spin--fullscreen': fullscreen,\n  },\n]);\n</script>\n\n<template>\n  <!-- Fullscreen mode: uses Teleport to <body> -->\n  <Teleport v-if=\"fullscreen\" to=\"body\">\n    <Transition name=\"b-spin-fade\">\n      <div\n        v-if=\"shouldShow\"\n        class=\"b-spin b-spin--fullscreen\"\n        :class=\"[`b-spin--${size}`, { 'b-spin--spinning': shouldShow, 'b-spin--has-tip': hasTip }]\"\n        role=\"status\"\n        :aria-label=\"hasTip ? undefined : 'Loading'\"\n        :aria-describedby=\"hasTip ? tipId : undefined\"\n      >\n        <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\">\n            <span class=\"b-spin__dot\">\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n            </span>\n          </slot>\n        </div>\n        <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n          <slot name=\"tip\">{{ tip }}</slot>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n\n  <!-- Standalone (no children) -->\n  <template v-else-if=\"!isNested\">\n    <div\n      v-if=\"shouldShow\"\n      :class=\"rootClasses\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n  </template>\n\n  <!-- Nested (wraps children) -->\n  <div v-else :class=\"rootClasses\">\n    <div\n      v-if=\"shouldShow\"\n      class=\"b-spin__overlay-container\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n    <div\n      class=\"b-spin__content\"\n      :class=\"{ 'b-spin__content--blurred': shouldShow }\"\n      :aria-busy=\"shouldShow\"\n      :inert=\"shouldShow\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-spin {\n  /* Dot sizes per variant */\n  --b-spin-dot-size-small: 14px;\n  --b-spin-dot-size-default: 20px;\n  --b-spin-dot-size-large: 32px;\n\n  /* Dot colour */\n  --b-spin-dot-color: oklch(50% 0.169 237.323); /* primary – darkened for AA contrast */\n\n  /* Tip text */\n  --b-spin-tip-color: oklch(50% 0.169 237.323);\n  --b-spin-tip-font-size: 0.875rem;\n\n  /* Overlay */\n  --b-spin-overlay-bg: oklch(100% 0 0 / 0.6);\n  --b-spin-content-blur: 0.5px;\n\n  /* Fullscreen */\n  --b-spin-fullscreen-bg: oklch(100% 0 0 / 0.75);\n\n  /* Animation */\n  --b-spin-animation-duration: 1.2s;\n  --b-spin-transition-duration: 300ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-spin {\n  --b-spin-dot-color: oklch(72% 0.14 237);\n  --b-spin-tip-color: oklch(72% 0.14 237);\n  --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n  --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-spin {\n    --b-spin-dot-color: oklch(72% 0.14 237);\n    --b-spin-tip-color: oklch(72% 0.14 237);\n    --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n    --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-spin {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n/* Nested wrapper needs relative positioning for overlay */\n.b-spin--nested {\n  position: relative;\n  display: block;\n}\n\n/* ── Overlay container (nested mode) ── */\n.b-spin__overlay-container {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-overlay-bg);\n  border-radius: inherit;\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n/* ── Content (nested) ── */\n.b-spin__content {\n  transition:\n    opacity var(--b-spin-transition-duration) ease,\n    filter var(--b-spin-transition-duration) ease;\n}\n\n.b-spin__content--blurred {\n  opacity: 0.5;\n  filter: blur(var(--b-spin-content-blur));\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ── Fullscreen ── */\n.b-spin--fullscreen {\n  position: fixed;\n  inset: 0;\n  z-index: 1070;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-fullscreen-bg);\n}\n\n/* ── Dot indicator ── */\n.b-spin__indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.b-spin__dot {\n  position: relative;\n  display: inline-block;\n  font-size: var(--b-spin-dot-size-default);\n  width: 1em;\n  height: 1em;\n  animation: b-spin-rotate var(--b-spin-animation-duration) linear infinite;\n}\n\n.b-spin--small .b-spin__dot {\n  font-size: var(--b-spin-dot-size-small);\n}\n\n.b-spin--large .b-spin__dot {\n  font-size: var(--b-spin-dot-size-large);\n}\n\n.b-spin__dot-item {\n  position: absolute;\n  display: block;\n  width: calc(1em * 0.45);\n  height: calc(1em * 0.45);\n  background-color: var(--b-spin-dot-color);\n  border-radius: 50%;\n  opacity: 0.3;\n  animation: b-spin-bounce var(--b-spin-animation-duration) ease-in-out infinite;\n  transform: scale(0.75);\n}\n\n.b-spin__dot-item:nth-child(1) {\n  top: 0;\n  left: 0;\n}\n\n.b-spin__dot-item:nth-child(2) {\n  top: 0;\n  right: 0;\n  animation-delay: 0.4s;\n}\n\n.b-spin__dot-item:nth-child(3) {\n  right: 0;\n  bottom: 0;\n  animation-delay: 0.8s;\n}\n\n.b-spin__dot-item:nth-child(4) {\n  bottom: 0;\n  left: 0;\n  animation-delay: 1.2s;\n}\n\n/* ── Tip ── */\n.b-spin__tip {\n  color: var(--b-spin-tip-color);\n  font-size: var(--b-spin-tip-font-size);\n  text-align: center;\n}\n\n/* ─────────────────────────────────────────────\n   Keyframes\n   ───────────────────────────────────────────── */\n@keyframes b-spin-rotate {\n  to {\n    transform: rotate(405deg);\n  }\n}\n\n@keyframes b-spin-bounce {\n  0%,\n  100% {\n    opacity: 0.3;\n    transform: scale(0.75);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Fade transition (fullscreen)\n   ───────────────────────────────────────────── */\n.b-spin-fade-enter-active,\n.b-spin-fade-leave-active {\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n.b-spin-fade-enter-from,\n.b-spin-fade-leave-to {\n  opacity: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-spin__dot {\n    animation: none;\n  }\n\n  .b-spin__dot-item {\n    animation: none;\n    opacity: 0.8;\n    transform: scale(1);\n  }\n\n  .b-spin-fade-enter-active,\n  .b-spin-fade-leave-active {\n    transition: none;\n  }\n\n  .b-spin__content {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"design-system204.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonButtonShape, BSkeletonButtonSize } from './types';\n\nconst {\n  active = false,\n  block = false,\n  shape = 'default',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to full width. @default false */\n  block?: boolean;\n  /** Button shape. @default 'default' */\n  shape?: BSkeletonButtonShape;\n  /** Button size. @default 'default' */\n  size?: BSkeletonButtonSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-button',\n  `b-skeleton-button--${shape}`,\n  `b-skeleton-button--${size}`,\n  {\n    'b-skeleton-button--block': block,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-button {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-button-min-width, 64px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-button--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 48px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 80px;\n}\n\n.b-skeleton-button--round {\n  border-radius: 100px;\n}\n\n.b-skeleton-button--circle {\n  width: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-control-height, 32px);\n  border-radius: 50%;\n}\n.b-skeleton-button--circle.b-skeleton-button--small {\n  width: var(--b-skeleton-control-height-sm, 24px);\n  min-width: var(--b-skeleton-control-height-sm, 24px);\n}\n.b-skeleton-button--circle.b-skeleton-button--large {\n  width: var(--b-skeleton-control-height-lg, 40px);\n  min-width: var(--b-skeleton-control-height-lg, 40px);\n}\n\n.b-skeleton-button--square {\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAoBA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,sBAAsB,EAAA;GACtB,sBAAsB,EAAA;GACtB;IACE,4BAA4B,EAAA;IAC5B,8BAA8B,EAAA;IAC/B;GACF,CAAC;yBAIA,EAAgE,QAAA;GAAzD,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY"}

package/dist/design-system206.js

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

package/dist/design-system206.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system206.js","names":[],"sources":["../src/components/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":""}
+{"version":3,"file":"design-system206.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonButtonShape, BSkeletonButtonSize } from './types';\n\nconst {\n  active = false,\n  block = false,\n  shape = 'default',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to full width. @default false */\n  block?: boolean;\n  /** Button shape. @default 'default' */\n  shape?: BSkeletonButtonShape;\n  /** Button size. @default 'default' */\n  size?: BSkeletonButtonSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-button',\n  `b-skeleton-button--${shape}`,\n  `b-skeleton-button--${size}`,\n  {\n    'b-skeleton-button--block': block,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-button {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-button-min-width, 64px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-button--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 48px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 80px;\n}\n\n.b-skeleton-button--round {\n  border-radius: 100px;\n}\n\n.b-skeleton-button--circle {\n  width: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-control-height, 32px);\n  border-radius: 50%;\n}\n.b-skeleton-button--circle.b-skeleton-button--small {\n  width: var(--b-skeleton-control-height-sm, 24px);\n  min-width: var(--b-skeleton-control-height-sm, 24px);\n}\n.b-skeleton-button--circle.b-skeleton-button--large {\n  width: var(--b-skeleton-control-height-lg, 40px);\n  min-width: var(--b-skeleton-control-height-lg, 40px);\n}\n\n.b-skeleton-button--square {\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":""}

package/dist/design-system207.js

@@ -1,22 +1,31 @@
-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");
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a } from "vue";
+//#region src/components/BSkeleton/BSkeletonImage.vue?vue&type=script&setup=true&lang.ts
+var o = /* @__PURE__ */ r({
+	__name: "BSkeletonImage",
+	props: { active: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(r) {
+		let o = e(() => [
+			"b-skeleton-element",
+			"b-skeleton-image",
+			{ "b-skeleton-element--active": r.active }
+		]);
+		return (e, r) => (a(), t("div", {
+			class: i(o.value),
+			role: "presentation",
+			"aria-hidden": "true"
+		}, [...r[0] ||= [n("svg", {
+			class: "b-skeleton-image__svg",
+			viewBox: "0 0 1098 1024",
+			xmlns: "http://www.w3.org/2000/svg",
+			"aria-hidden": "true",
+			focusable: "false"
+		}, [n("path", { d: "M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z" })], -1)]], 2));
 	}
 });
 //#endregion
-export { n as default };
+export { o as default };
 
 //# sourceMappingURL=design-system207.js.map

package/dist/design-system207.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system207.js","names":[],"sources":["../src/components/BSplitter/BSplitterPanel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * BSplitterPanel\n * --------------\n * A pure data/marker component used inside <BSplitter>.\n *\n * It does not render any wrapper element of its own — <BSplitter> reads the\n * VNode's props and default-slot content and renders the panel <div>\n * itself, so that draggers can be interspersed correctly between panels.\n *\n * Props mirror AntD's `Splitter.Panel` API.\n */\nimport type { BSplitterPanelCollapsible } from './types';\n\ndefineOptions({ name: 'BSplitterPanel' });\n\ndefineProps<{\n  /** Controlled size (px number or any CSS unit string e.g. '50%'). */\n  size?: number | string;\n  /** Initial size for uncontrolled mode (px number or CSS string). */\n  defaultSize?: number | string;\n  /** Minimum size (px or CSS string). */\n  min?: number | string;\n  /** Maximum size (px or CSS string). */\n  max?: number | string;\n  /** Whether the dragger adjacent to this panel can resize it. @default true */\n  resizable?: boolean;\n  /** Collapsible config — `true` enables both directions, or pass an object. */\n  collapsible?: boolean | BSplitterPanelCollapsible;\n  /** Destroy panel content from the DOM when its size collapses to 0. @default false */\n  destroyOnHidden?: boolean;\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n</script>\n\n<template>\n  <!-- Render only the slot content. BSplitter wraps it in a panel div. -->\n  <slot />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;mBAwCE,EAAQ,EAAA,QAAA,UAAA"}
+{"version":3,"file":"design-system207.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-image',\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <svg\n      class=\"b-skeleton-image__svg\"\n      viewBox=\"0 0 1098 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style>\n.b-skeleton-image {\n  display: inline-flex;\n  vertical-align: top;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-skeleton-image-size, 96px);\n  height: var(--b-skeleton-image-size, 96px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-image__svg {\n  width: 48px;\n  height: 48px;\n  fill: oklch(75% 0 0);\n}\n\n[data-prefers-color='dark'] .b-skeleton-image__svg {\n  fill: oklch(50% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton-image__svg {\n    fill: oklch(50% 0 0);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;EAQA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,EAAE,8BAA8B,EAAA,QAAQ;GACzC,CAAC;yBAIA,EAYM,OAAA;GAZA,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY;mBACpD,EAUM,OAAA;GATJ,OAAM;GACN,SAAQ;GACR,OAAM;GACN,eAAY;GACZ,WAAU;MAEV,EAEE,QAAA,EADA,GAAE,m3BAAi3B,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/design-system209.js

@@ -1,6 +1,8 @@
-//#region src/components/BSplitter/types.ts
-var e = Symbol("BSplitterContext");
+import e from "./design-system207.js";
+/* empty css                 */
+//#region src/components/BSkeleton/BSkeletonImage.vue
+var t = e;
 //#endregion
-export { e as BSplitterContextKey };
+export { t as default };
 
 //# sourceMappingURL=design-system209.js.map

package/dist/design-system209.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system209.js","names":[],"sources":["../src/components/BSplitter/types.ts"],"sourcesContent":["import type { InjectionKey, VNode } from 'vue';\n\nexport type BSplitterOrientation = 'horizontal' | 'vertical';\n\n/**\n * Per-side collapsible config on a panel.\n * `start` = collapse toward the previous (left/top) panel.\n * `end`   = collapse toward the next (right/bottom) panel.\n */\nexport interface BSplitterPanelCollapsible {\n  start?: boolean;\n  end?: boolean;\n}\n\n/**\n * Splitter-level collapsible config (motion + custom icons).\n */\nexport interface BSplitterCollapsible {\n  /** Whether the size change should animate (CSS transition). @default true */\n  motion?: boolean;\n  /** Custom icon nodes for the collapse buttons. */\n  icon?: {\n    start?: VNode | string;\n    end?: VNode | string;\n  };\n}\n\n/** Resolved per-panel configuration extracted from slot VNodes. */\nexport interface BSplitterPanelConfig {\n  /** Panel index (0-based). */\n  index: number;\n  size?: number | string;\n  defaultSize?: number | string;\n  min?: number | string;\n  max?: number | string;\n  resizable: boolean;\n  collapsible: BSplitterPanelCollapsible | false;\n  destroyOnHidden: boolean;\n  /** Default slot content for the panel. */\n  content?: VNode[];\n}\n\n/** Context provided by BSplitter to its children (currently unused; kept for future). */\nexport interface BSplitterContext {\n  orientation: 'horizontal' | 'vertical';\n}\n\nexport const BSplitterContextKey: InjectionKey<BSplitterContext> = Symbol('BSplitterContext');\n"],"mappings":";AA+CA,IAAa,IAAsD,OAAO,mBAAmB"}
+{"version":3,"file":"design-system209.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-image',\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <svg\n      class=\"b-skeleton-image__svg\"\n      viewBox=\"0 0 1098 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style>\n.b-skeleton-image {\n  display: inline-flex;\n  vertical-align: top;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-skeleton-image-size, 96px);\n  height: var(--b-skeleton-image-size, 96px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-image__svg {\n  width: 48px;\n  height: 48px;\n  fill: oklch(75% 0 0);\n}\n\n[data-prefers-color='dark'] .b-skeleton-image__svg {\n  fill: oklch(50% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton-image__svg {\n    fill: oklch(50% 0 0);\n  }\n}\n</style>\n"],"mappings":""}