@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system195.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system195.js","names":[],"sources":["../src/components/BSlider/BSlider.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { withModifiers as _withModifiers, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, normalizeClass as _normalizeClass, unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode } from \"vue\"\n\nconst _hoisted_1 = [\"tabindex\", \"aria-valuemin\", \"aria-valuemax\", \"aria-valuenow\", \"aria-disabled\", \"aria-orientation\", \"aria-label\"]\nconst _hoisted_2 = [\"tabindex\", \"aria-valuemin\", \"aria-valuemax\", \"aria-valuenow\", \"aria-disabled\", \"aria-orientation\", \"aria-label\"]\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-slider__marks\"\n}\n\nimport { computed, onBeforeUnmount, ref, useAttrs } from 'vue';\nimport type { BSliderMarks, BSliderRange, BSliderTooltip } from './types.ts';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  ...{ inheritAttrs: false },\n  __name: 'BSlider',\n  props: /*@__PURE__*/_mergeModels({\n    disabled: { type: Boolean, default: false },\n    dots: { type: Boolean, default: false },\n    included: { type: Boolean, default: true },\n    keyboard: { type: Boolean, default: true },\n    max: { default: 100 },\n    min: { default: 0 },\n    range: { type: [Boolean, Object], default: false },\n    reverse: { type: Boolean, default: false },\n    step: { default: 1 },\n    vertical: { type: Boolean, default: false },\n    tooltip: { default: () => ({}) },\n    marks: {}\n  }, {\n    \"modelValue\": { default: 0 },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\", \"changeComplete\"], [\"update:modelValue\"]),\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst attrs = useAttrs();\n\n//#region Props\n\n\nconst model = _useModel<number | [number, number]>(__props, \"modelValue\");\n\nconst emit = __emit;\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(() => __props.range !== false);\nconst draggableTrack = computed(() => typeof __props.range === 'object' && __props.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 __props.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 (__props.max === __props.min) return 0;\n  return ((value - __props.min) / (__props.max - __props.min)) * 100;\n}\n\nfunction percentToValue(percent: number): number {\n  const raw = __props.min + (percent / 100) * (__props.max - __props.min);\n  return snapToStep(raw);\n}\n\nfunction snapToStep(value: number): number {\n  if (__props.step === null) {\n    if (!__props.marks) return clamp(value);\n    const markValues = Object.keys(__props.marks).map(Number);\n    let closest = markValues[0] ?? __props.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 - __props.min) / __props.step) * __props.step + __props.min;\n  return clamp(stepped);\n}\n\nfunction clamp(value: number): number {\n  return Math.min(__props.max, Math.max(__props.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 (__props.vertical) {\n    return __props.reverse\n      ? { top: `${100 - start - length}%`, height: `${length}%` }\n      : { bottom: `${100 - start - length}%`, height: `${length}%` };\n  }\n  return __props.reverse\n    ? { right: `${start}%`, width: `${length}%` }\n    : { left: `${start}%`, width: `${length}%` };\n});\n\nconst lowerHandleStyle = computed(() => {\n  const pct = lowerPercent.value;\n  if (__props.vertical) {\n    return __props.reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return __props.reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst upperHandleStyle = computed(() => {\n  const pct = upperPercent.value;\n  if (__props.vertical) {\n    return __props.reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return __props.reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst markList = computed(() => {\n  if (!__props.marks) return [];\n  return Object.entries(__props.marks).map(([key, val]) => {\n    const numKey = Number(key);\n    const percent = valueToPercent(numKey);\n    const isActive =\n      __props.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 (!__props.dots || __props.step === null) return [];\n  const result: { value: number; percent: number; isActive: boolean }[] = [];\n  for (let v = __props.min; v <= __props.max; v += __props.step) {\n    const percent = valueToPercent(v);\n    const isActive =\n      __props.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 (__props.tooltip.formatter === null) return null;\n  if (__props.tooltip.formatter) return __props.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 (__props.tooltip.formatter === null) return false;\n  if (__props.tooltip.open !== undefined) return __props.tooltip.open;\n  return tooltipVisible.value.lower || dragging.value === 'lower' || dragging.value === 'track';\n});\n\nconst showUpperTooltip = computed(() => {\n  if (__props.tooltip.formatter === null) return false;\n  if (__props.tooltip.open !== undefined) return __props.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 = __props.vertical ? event.touches[0].clientY : event.touches[0].clientX;\n  } else {\n    clientPos = __props.vertical ? event.clientY : event.clientX;\n  }\n\n  if (__props.vertical) {\n    size = rect.height;\n    const offset = clientPos - rect.top;\n    return __props.reverse ? (offset / size) * 100 : ((size - offset) / size) * 100;\n  } else {\n    size = rect.width;\n    const offset = clientPos - rect.left;\n    return __props.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 (__props.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 (__props.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 || __props.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 >= __props.min && newUpper <= __props.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 (__props.disabled || !__props.keyboard) return;\n  const effectiveStep = __props.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 = __props.min - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    case 'End':\n      delta = __props.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 (__props.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\n__expose({ 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\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    ref_key: \"rootRef\",\n    ref: rootRef,\n    class: _normalizeClass([\"b-slider\", [\n      {\n        'b-slider--vertical': __props.vertical,\n        'b-slider--disabled': __props.disabled,\n        'b-slider--with-marks': !!__props.marks,\n        'b-slider--reverse': __props.reverse,\n        'b-slider--hovered': hovered.value,\n      },\n    ]]),\n    onMouseenter: handleMouseEnter,\n    onMouseleave: handleMouseLeave\n  }, [\n    _createElementVNode(\"div\", {\n      ref_key: \"railRef\",\n      ref: railRef,\n      class: \"b-slider__rail\",\n      onMousedown: handleRailClick\n    }, [\n      (__props.included)\n        ? (_openBlock(), _createElementBlock(\"div\", {\n            key: 0,\n            class: \"b-slider__track\",\n            style: _normalizeStyle(trackStyle.value),\n            onMousedown: _withModifiers(handleTrackMouseDown, [\"stop\"])\n          }, null, 36))\n        : _createCommentVNode(\"\", true),\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(dotList.value, (dot) => {\n        return (_openBlock(), _createElementBlock(\"span\", {\n          key: `dot-${dot.value}`,\n          class: _normalizeClass([\"b-slider__dot\", { 'b-slider__dot--active': dot.isActive }]),\n          style: _normalizeStyle(__props.vertical\n          ? (__props.reverse ? { top: `${100 - dot.percent}%` } : { bottom: `${100 - dot.percent}%` })\n          : (__props.reverse ? { right: `${dot.percent}%` } : { left: `${dot.percent}%` })\n        )\n        }, null, 6))\n      }), 128)),\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(markList.value, (mark) => {\n        return (_openBlock(), _createElementBlock(\"span\", {\n          key: `mark-dot-${mark.value}`,\n          class: _normalizeClass([\"b-slider__dot\", { 'b-slider__dot--active': mark.isActive }]),\n          style: _normalizeStyle(__props.vertical\n          ? (__props.reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n          : (__props.reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n        )\n        }, null, 6))\n      }), 128)),\n      (isRange.value)\n        ? (_openBlock(), _createElementBlock(\"div\", {\n            key: 1,\n            class: _normalizeClass([\"b-slider__handle\", {\n          'b-slider__handle--active': dragging.value === 'lower' || focusedHandle.value === 'lower',\n        }]),\n            style: _normalizeStyle(lowerHandleStyle.value),\n            role: \"slider\",\n            tabindex: __props.disabled ? -1 : 0,\n            \"aria-valuemin\": __props.min,\n            \"aria-valuemax\": upperValue.value,\n            \"aria-valuenow\": lowerValue.value,\n            \"aria-disabled\": __props.disabled || undefined,\n            \"aria-orientation\": __props.vertical ? 'vertical' : 'horizontal',\n            \"aria-label\": (_unref(attrs)['aria-label'] as string) ? `${_unref(attrs)['aria-label']} - minimum` : 'Minimum',\n            onMousedown: _cache[0] || (_cache[0] = (e) => handleDragStart('lower', e)),\n            onTouchstart: _cache[1] || (_cache[1] = (e) => handleDragStart('lower', e)),\n            onKeydown: _cache[2] || (_cache[2] = (e) => handleKeyDown(e, 'lower')),\n            onFocus: _cache[3] || (_cache[3] = ($event: any) => (handleHandleFocus('lower'))),\n            onBlur: _cache[4] || (_cache[4] = ($event: any) => (handleHandleBlur('lower'))),\n            onMouseenter: _cache[5] || (_cache[5] = ($event: any) => (handleHandleMouseEnter('lower'))),\n            onMouseleave: _cache[6] || (_cache[6] = ($event: any) => (handleHandleMouseLeave('lower')))\n          }, [\n            (lowerTooltipText.value !== null)\n              ? (_openBlock(), _createElementBlock(\"div\", {\n                  key: 0,\n                  class: _normalizeClass([\"b-slider__tooltip\", { 'b-slider__tooltip--visible': showLowerTooltip.value }]),\n                  role: \"tooltip\"\n                }, _toDisplayString(lowerTooltipText.value), 3))\n              : _createCommentVNode(\"\", true)\n          ], 46, _hoisted_1))\n        : _createCommentVNode(\"\", true),\n      _createElementVNode(\"div\", {\n        class: _normalizeClass([\"b-slider__handle\", {\n          'b-slider__handle--active': dragging.value === 'upper' || focusedHandle.value === 'upper',\n        }]),\n        style: _normalizeStyle(upperHandleStyle.value),\n        role: \"slider\",\n        tabindex: __props.disabled ? -1 : 0,\n        \"aria-valuemin\": isRange.value ? lowerValue.value : __props.min,\n        \"aria-valuemax\": __props.max,\n        \"aria-valuenow\": upperValue.value,\n        \"aria-disabled\": __props.disabled || undefined,\n        \"aria-orientation\": __props.vertical ? 'vertical' : 'horizontal',\n        \"aria-label\": (_unref(attrs)['aria-label'] as string) || (isRange.value ? 'Maximum' : 'Slider'),\n        onMousedown: _cache[7] || (_cache[7] = (e) => handleDragStart('upper', e)),\n        onTouchstart: _cache[8] || (_cache[8] = (e) => handleDragStart('upper', e)),\n        onKeydown: _cache[9] || (_cache[9] = (e) => handleKeyDown(e, 'upper')),\n        onFocus: _cache[10] || (_cache[10] = ($event: any) => (handleHandleFocus('upper'))),\n        onBlur: _cache[11] || (_cache[11] = ($event: any) => (handleHandleBlur('upper'))),\n        onMouseenter: _cache[12] || (_cache[12] = ($event: any) => (handleHandleMouseEnter('upper'))),\n        onMouseleave: _cache[13] || (_cache[13] = ($event: any) => (handleHandleMouseLeave('upper')))\n      }, [\n        (upperTooltipText.value !== null)\n          ? (_openBlock(), _createElementBlock(\"div\", {\n              key: 0,\n              class: _normalizeClass([\"b-slider__tooltip\", { 'b-slider__tooltip--visible': showUpperTooltip.value }]),\n              role: \"tooltip\"\n            }, _toDisplayString(upperTooltipText.value), 3))\n          : _createCommentVNode(\"\", true)\n      ], 46, _hoisted_2)\n    ], 544),\n    (__props.marks)\n      ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3, [\n          (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(markList.value, (mark) => {\n            return (_openBlock(), _createElementBlock(\"span\", {\n              key: `mark-label-${mark.value}`,\n              class: _normalizeClass([\"b-slider__mark-text\", { 'b-slider__mark-text--active': mark.isActive }]),\n              style: _normalizeStyle({\n          ...(__props.vertical\n            ? (__props.reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n            : (__props.reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n          ),\n          ...mark.style,\n        })\n            }, _toDisplayString(mark.label), 7))\n          }), 128))\n        ]))\n      : _createCommentVNode(\"\", true)\n  ], 34))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system195.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonInputSize } from './types';\n\nconst {\n  active = false,\n  block = false,\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  /** Input size. @default 'default' */\n  size?: BSkeletonInputSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-input',\n  `b-skeleton-input--${size}`,\n  {\n    'b-skeleton-input--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-input {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-input-min-width, 160px);\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-input--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 96px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-input--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 200px;\n}\n\n.b-skeleton-input--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;EAiBA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,qBAAqB,EAAA;GACrB;IACE,2BAA2B,EAAA;IAC3B,8BAA8B,EAAA;IAC/B;GACF,CAAC;yBAIA,EAAgE,QAAA;GAAzD,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY"}

package/dist/design-system197.js

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

package/dist/design-system197.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system197.js","names":[],"sources":["../src/components/BSlider/BSlider.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineOptions({ inheritAttrs: false });\n\nimport { computed, onBeforeUnmount, ref, useAttrs } from 'vue';\nimport type { BSliderMarks, BSliderRange, BSliderTooltip } from './types.ts';\n\nconst attrs = useAttrs();\n\n//#region Props\nconst {\n  disabled = false,\n  dots = false,\n  included = true,\n  keyboard = true,\n  max = 100,\n  min = 0,\n  range = false,\n  reverse = false,\n  step = 1,\n  vertical = false,\n  tooltip = {},\n  marks,\n} = defineProps<{\n  /** Whether the slider is disabled. */\n  disabled?: boolean;\n  /** Whether only dots can be selected (step snap). */\n  dots?: boolean;\n  /** Whether the track between handles is filled. */\n  included?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Maximum value. */\n  max?: number;\n  /** Minimum value. */\n  min?: number;\n  /** Whether range mode is enabled (dual handles). Can also be an object with draggableTrack. */\n  range?: boolean | BSliderRange;\n  /** Whether the slider is reversed. */\n  reverse?: boolean;\n  /** Step granularity. null means only marks are selectable. */\n  step?: number | null;\n  /** Whether the slider is vertical. */\n  vertical?: boolean;\n  /** Tooltip configuration. */\n  tooltip?: BSliderTooltip;\n  /** Tick marks on the slider. Keys are percentages (0–100 mapped to min–max). */\n  marks?: BSliderMarks;\n}>();\n\nconst model = defineModel<number | [number, number]>({ default: 0 });\n\nconst emit = defineEmits<{\n  change: [value: number | [number, number]];\n  changeComplete: [value: number | [number, number]];\n}>();\n//#endregion\n\n//#region Internal state\nconst railRef = ref<HTMLElement | null>(null);\nconst rootRef = ref<HTMLElement | null>(null);\n\nconst dragging = ref<null | 'lower' | 'upper' | 'track'>(null);\nconst hovered = ref(false);\nconst focusedHandle = ref<'lower' | 'upper' | null>(null);\nconst tooltipVisible = ref<{ lower: boolean; upper: boolean }>({ lower: false, upper: false });\n\nconst trackDragStartValue = ref<[number, number] | null>(null);\nconst trackDragStartPos = ref(0);\n//#endregion\n\n//#region Computed values\nconst isRange = computed(() => range !== false);\nconst draggableTrack = computed(() => typeof range === 'object' && range.draggableTrack);\n\nconst lowerValue = computed(() => {\n  if (isRange.value) {\n    const v = model.value as [number, number];\n    return v[0];\n  }\n  return min;\n});\n\nconst upperValue = computed(() => {\n  if (isRange.value) {\n    const v = model.value as [number, number];\n    return v[1];\n  }\n  return model.value as number;\n});\n\nfunction valueToPercent(value: number): number {\n  if (max === min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction percentToValue(percent: number): number {\n  const raw = min + (percent / 100) * (max - min);\n  return snapToStep(raw);\n}\n\nfunction snapToStep(value: number): number {\n  if (step === null) {\n    if (!marks) return clamp(value);\n    const markValues = Object.keys(marks).map(Number);\n    let closest = markValues[0] ?? min;\n    let closestDist = Math.abs(value - closest);\n    for (const mv of markValues) {\n      const dist = Math.abs(value - mv);\n      if (dist < closestDist) {\n        closest = mv;\n        closestDist = dist;\n      }\n    }\n    return clamp(closest);\n  }\n  const stepped = Math.round((value - min) / step) * step + min;\n  return clamp(stepped);\n}\n\nfunction clamp(value: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nconst lowerPercent = computed(() => valueToPercent(lowerValue.value));\nconst upperPercent = computed(() => valueToPercent(upperValue.value));\n\nconst trackStyle = computed(() => {\n  const start = isRange.value ? lowerPercent.value : 0;\n  const length = isRange.value\n    ? upperPercent.value - lowerPercent.value\n    : upperPercent.value;\n\n  if (vertical) {\n    return reverse\n      ? { top: `${100 - start - length}%`, height: `${length}%` }\n      : { bottom: `${100 - start - length}%`, height: `${length}%` };\n  }\n  return reverse\n    ? { right: `${start}%`, width: `${length}%` }\n    : { left: `${start}%`, width: `${length}%` };\n});\n\nconst lowerHandleStyle = computed(() => {\n  const pct = lowerPercent.value;\n  if (vertical) {\n    return reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst upperHandleStyle = computed(() => {\n  const pct = upperPercent.value;\n  if (vertical) {\n    return reverse ? { top: `${100 - pct}%` } : { bottom: `${100 - pct}%` };\n  }\n  return reverse ? { right: `${pct}%` } : { left: `${pct}%` };\n});\n\nconst markList = computed(() => {\n  if (!marks) return [];\n  return Object.entries(marks).map(([key, val]) => {\n    const numKey = Number(key);\n    const percent = valueToPercent(numKey);\n    const isActive =\n      included &&\n      (isRange.value\n        ? numKey >= lowerValue.value && numKey <= upperValue.value\n        : numKey <= upperValue.value);\n    const label = typeof val === 'string' ? val : val.label;\n    const style = typeof val === 'object' ? val.style : undefined;\n    return { value: numKey, percent, isActive, label, style };\n  });\n});\n\nconst dotList = computed(() => {\n  if (!dots || step === null) return [];\n  const result: { value: number; percent: number; isActive: boolean }[] = [];\n  for (let v = min; v <= max; v += step) {\n    const percent = valueToPercent(v);\n    const isActive =\n      included &&\n      (isRange.value\n        ? v >= lowerValue.value && v <= upperValue.value\n        : v <= upperValue.value);\n    result.push({ value: v, percent, isActive });\n  }\n  return result;\n});\n\nfunction formatTooltip(value: number): string | null {\n  if (tooltip.formatter === null) return null;\n  if (tooltip.formatter) return tooltip.formatter(value);\n  return String(value);\n}\n\nconst lowerTooltipText = computed(() => formatTooltip(lowerValue.value));\nconst upperTooltipText = computed(() => formatTooltip(upperValue.value));\n\nconst showLowerTooltip = computed(() => {\n  if (tooltip.formatter === null) return false;\n  if (tooltip.open !== undefined) return tooltip.open;\n  return tooltipVisible.value.lower || dragging.value === 'lower' || dragging.value === 'track';\n});\n\nconst showUpperTooltip = computed(() => {\n  if (tooltip.formatter === null) return false;\n  if (tooltip.open !== undefined) return tooltip.open;\n  return tooltipVisible.value.upper || dragging.value === 'upper' || dragging.value === 'track';\n});\n//#endregion\n\n//#region Event handlers\nfunction getPercentFromEvent(event: MouseEvent | TouchEvent): number {\n  if (!railRef.value) return 0;\n  const rect = railRef.value.getBoundingClientRect();\n  let clientPos: number;\n  let size: number;\n\n  if ('touches' in event) {\n    clientPos = vertical ? event.touches[0].clientY : event.touches[0].clientX;\n  } else {\n    clientPos = vertical ? event.clientY : event.clientX;\n  }\n\n  if (vertical) {\n    size = rect.height;\n    const offset = clientPos - rect.top;\n    return reverse ? (offset / size) * 100 : ((size - offset) / size) * 100;\n  } else {\n    size = rect.width;\n    const offset = clientPos - rect.left;\n    return reverse ? ((size - offset) / size) * 100 : (offset / size) * 100;\n  }\n}\n\nfunction getCloserHandle(percent: number): 'lower' | 'upper' {\n  if (!isRange.value) return 'upper';\n  const distToLower = Math.abs(percent - lowerPercent.value);\n  const distToUpper = Math.abs(percent - upperPercent.value);\n  if (distToLower < distToUpper) return 'lower';\n  if (distToUpper < distToLower) return 'upper';\n  return percent < lowerPercent.value ? 'lower' : 'upper';\n}\n\nfunction updateValue(handle: 'lower' | 'upper', newValue: number) {\n  if (isRange.value) {\n    const current = model.value as [number, number];\n    let updated: [number, number];\n    if (handle === 'lower') {\n      updated = [Math.min(newValue, current[1]), current[1]];\n    } else {\n      updated = [current[0], Math.max(newValue, current[0])];\n    }\n    model.value = updated;\n    emit('change', updated);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleRailClick(event: MouseEvent) {\n  if (disabled) return;\n  if ((event.target as HTMLElement).closest('.b-slider__handle')) return;\n\n  const percent = getPercentFromEvent(event);\n  const value = percentToValue(percent);\n  const handle = getCloserHandle(percent);\n\n  if (draggableTrack.value && isRange.value) {\n    const lp = lowerPercent.value;\n    const up = upperPercent.value;\n    if (percent >= lp && percent <= up) return;\n  }\n\n  updateValue(handle, value);\n  emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n}\n\nfunction handleDragStart(handle: 'lower' | 'upper' | 'track', event: MouseEvent | TouchEvent) {\n  if (disabled) return;\n  event.preventDefault();\n  dragging.value = handle;\n\n  if (handle === 'track' && isRange.value) {\n    trackDragStartValue.value = [...(model.value as [number, number])] as [number, number];\n    trackDragStartPos.value = getPercentFromEvent(event);\n  }\n\n  document.addEventListener('mousemove', handleDragMove);\n  document.addEventListener('mouseup', handleDragEnd);\n  document.addEventListener('touchmove', handleDragMove);\n  document.addEventListener('touchend', handleDragEnd);\n}\n\nfunction handleDragMove(event: MouseEvent | TouchEvent) {\n  if (!dragging.value || disabled) return;\n  const percent = getPercentFromEvent(event);\n\n  if (dragging.value === 'track' && trackDragStartValue.value) {\n    const delta = percent - trackDragStartPos.value;\n    const startLower = trackDragStartValue.value[0];\n    const startUpper = trackDragStartValue.value[1];\n    const lowerPct = valueToPercent(startLower) + delta;\n    const upperPct = valueToPercent(startUpper) + delta;\n\n    const newLower = percentToValue(lowerPct);\n    const newUpper = percentToValue(upperPct);\n\n    if (newLower >= min && newUpper <= max) {\n      model.value = [newLower, newUpper];\n      emit('change', [newLower, newUpper]);\n    }\n    return;\n  }\n\n  const value = percentToValue(percent);\n  updateValue(dragging.value as 'lower' | 'upper', value);\n}\n\nfunction handleDragEnd() {\n  if (dragging.value) {\n    emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n  }\n  dragging.value = null;\n  trackDragStartValue.value = null;\n  document.removeEventListener('mousemove', handleDragMove);\n  document.removeEventListener('mouseup', handleDragEnd);\n  document.removeEventListener('touchmove', handleDragMove);\n  document.removeEventListener('touchend', handleDragEnd);\n}\n\nfunction handleKeyDown(event: KeyboardEvent, handle: 'lower' | 'upper') {\n  if (disabled || !keyboard) return;\n  const effectiveStep = step ?? 1;\n  let delta = 0;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp':\n      delta = effectiveStep;\n      break;\n    case 'ArrowLeft':\n    case 'ArrowDown':\n      delta = -effectiveStep;\n      break;\n    case 'Home':\n      delta = min - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    case 'End':\n      delta = max - (handle === 'lower' ? lowerValue.value : upperValue.value);\n      break;\n    default:\n      return;\n  }\n\n  event.preventDefault();\n  const currentVal = handle === 'lower' ? lowerValue.value : upperValue.value;\n  const newValue = snapToStep(currentVal + delta);\n  updateValue(handle, newValue);\n  emit('changeComplete', isRange.value ? (model.value as [number, number]) : (model.value as number));\n}\n\nfunction handleHandleFocus(handle: 'lower' | 'upper') {\n  focusedHandle.value = handle;\n  tooltipVisible.value[handle] = true;\n}\n\nfunction handleHandleBlur(handle: 'lower' | 'upper') {\n  focusedHandle.value = null;\n  tooltipVisible.value[handle] = false;\n}\n\nfunction handleHandleMouseEnter(handle: 'lower' | 'upper') {\n  tooltipVisible.value[handle] = true;\n}\n\nfunction handleHandleMouseLeave(handle: 'lower' | 'upper') {\n  if (focusedHandle.value !== handle && dragging.value !== handle) {\n    tooltipVisible.value[handle] = false;\n  }\n}\n\nfunction handleMouseEnter() {\n  hovered.value = true;\n}\n\nfunction handleMouseLeave() {\n  hovered.value = false;\n}\n\nfunction handleTrackMouseDown(event: MouseEvent) {\n  if (disabled || !draggableTrack.value) return;\n  handleDragStart('track', event);\n}\n//#endregion\n\n//#region Expose\nfunction focus() {\n  const el = rootRef.value?.querySelector('.b-slider__handle') as HTMLElement | null;\n  el?.focus();\n}\n\nfunction blur() {\n  const el = rootRef.value?.querySelector('.b-slider__handle:focus') as HTMLElement | null;\n  el?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n\n//#region Cleanup\nonBeforeUnmount(() => {\n  document.removeEventListener('mousemove', handleDragMove);\n  document.removeEventListener('mouseup', handleDragEnd);\n  document.removeEventListener('touchmove', handleDragMove);\n  document.removeEventListener('touchend', handleDragEnd);\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-slider\"\n    :class=\"[\n      {\n        'b-slider--vertical': vertical,\n        'b-slider--disabled': disabled,\n        'b-slider--with-marks': !!marks,\n        'b-slider--reverse': reverse,\n        'b-slider--hovered': hovered,\n      },\n    ]\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <!-- Rail -->\n    <div\n      ref=\"railRef\"\n      class=\"b-slider__rail\"\n      @mousedown=\"handleRailClick\"\n    >\n      <!-- Track -->\n      <div\n        v-if=\"included\"\n        class=\"b-slider__track\"\n        :style=\"trackStyle\"\n        @mousedown.stop=\"handleTrackMouseDown\"\n      />\n\n      <!-- Dots -->\n      <span\n        v-for=\"dot in dotList\"\n        :key=\"`dot-${dot.value}`\"\n        class=\"b-slider__dot\"\n        :class=\"{ 'b-slider__dot--active': dot.isActive }\"\n        :style=\"vertical\n          ? (reverse ? { top: `${100 - dot.percent}%` } : { bottom: `${100 - dot.percent}%` })\n          : (reverse ? { right: `${dot.percent}%` } : { left: `${dot.percent}%` })\n        \"\n      />\n\n      <!-- Marks -->\n      <span\n        v-for=\"mark in markList\"\n        :key=\"`mark-dot-${mark.value}`\"\n        class=\"b-slider__dot\"\n        :class=\"{ 'b-slider__dot--active': mark.isActive }\"\n        :style=\"vertical\n          ? (reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n          : (reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n        \"\n      />\n\n      <!-- Lower handle (range only) -->\n      <div\n        v-if=\"isRange\"\n        class=\"b-slider__handle\"\n        :class=\"{\n          'b-slider__handle--active': dragging === 'lower' || focusedHandle === 'lower',\n        }\"\n        :style=\"lowerHandleStyle\"\n        role=\"slider\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :aria-valuemin=\"min\"\n        :aria-valuemax=\"upperValue\"\n        :aria-valuenow=\"lowerValue\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :aria-label=\"(attrs['aria-label'] as string) ? `${attrs['aria-label']} - minimum` : 'Minimum'\"\n        @mousedown=\"(e) => handleDragStart('lower', e)\"\n        @touchstart=\"(e) => handleDragStart('lower', e)\"\n        @keydown=\"(e) => handleKeyDown(e, 'lower')\"\n        @focus=\"handleHandleFocus('lower')\"\n        @blur=\"handleHandleBlur('lower')\"\n        @mouseenter=\"handleHandleMouseEnter('lower')\"\n        @mouseleave=\"handleHandleMouseLeave('lower')\"\n      >\n        <div\n          v-if=\"lowerTooltipText !== null\"\n          class=\"b-slider__tooltip\"\n          :class=\"{ 'b-slider__tooltip--visible': showLowerTooltip }\"\n          role=\"tooltip\"\n        >\n          {{ lowerTooltipText }}\n        </div>\n      </div>\n\n      <!-- Upper handle (always) -->\n      <div\n        class=\"b-slider__handle\"\n        :class=\"{\n          'b-slider__handle--active': dragging === 'upper' || focusedHandle === 'upper',\n        }\"\n        :style=\"upperHandleStyle\"\n        role=\"slider\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :aria-valuemin=\"isRange ? lowerValue : min\"\n        :aria-valuemax=\"max\"\n        :aria-valuenow=\"upperValue\"\n        :aria-disabled=\"disabled || undefined\"\n        :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n        :aria-label=\"(attrs['aria-label'] as string) || (isRange ? 'Maximum' : 'Slider')\"\n        @mousedown=\"(e) => handleDragStart('upper', e)\"\n        @touchstart=\"(e) => handleDragStart('upper', e)\"\n        @keydown=\"(e) => handleKeyDown(e, 'upper')\"\n        @focus=\"handleHandleFocus('upper')\"\n        @blur=\"handleHandleBlur('upper')\"\n        @mouseenter=\"handleHandleMouseEnter('upper')\"\n        @mouseleave=\"handleHandleMouseLeave('upper')\"\n      >\n        <div\n          v-if=\"upperTooltipText !== null\"\n          class=\"b-slider__tooltip\"\n          :class=\"{ 'b-slider__tooltip--visible': showUpperTooltip }\"\n          role=\"tooltip\"\n        >\n          {{ upperTooltipText }}\n        </div>\n      </div>\n    </div>\n\n    <!-- Mark labels -->\n    <div v-if=\"marks\" class=\"b-slider__marks\">\n      <span\n        v-for=\"mark in markList\"\n        :key=\"`mark-label-${mark.value}`\"\n        class=\"b-slider__mark-text\"\n        :class=\"{ 'b-slider__mark-text--active': mark.isActive }\"\n        :style=\"{\n          ...(vertical\n            ? (reverse ? { top: `${100 - mark.percent}%` } : { bottom: `${100 - mark.percent}%` })\n            : (reverse ? { right: `${mark.percent}%` } : { left: `${mark.percent}%` })\n          ),\n          ...mark.style,\n        }\"\n      >\n        {{ mark.label }}\n      </span>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-slider {\n  --b-slider-rail-bg: rgba(0, 0, 0, 0.04);\n  --b-slider-rail-hover-bg: rgba(0, 0, 0, 0.06);\n  --b-slider-rail-size: 4px;\n  --b-slider-track-bg: #91caff;\n  --b-slider-track-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-slider-track-hover-bg: #69b1ff;\n  --b-slider-handle-color: #91caff;\n  --b-slider-handle-color-disabled: #bfbfbf;\n  --b-slider-handle-active-color: #1677ff;\n  --b-slider-handle-active-outline-color: rgba(22, 119, 255, 0.2);\n  --b-slider-handle-line-width: 2px;\n  --b-slider-handle-line-width-hover: 2.5px;\n  --b-slider-handle-size: 10px;\n  --b-slider-handle-size-hover: 12px;\n  --b-slider-dot-border-color: #f0f0f0;\n  --b-slider-dot-active-border-color: #91caff;\n  --b-slider-dot-size: 8px;\n  --b-slider-control-size: 10px;\n\n  position: relative;\n  box-sizing: border-box;\n  padding: 4px 0;\n  cursor: pointer;\n  touch-action: none;\n}\n\n.b-slider--vertical {\n  display: inline-block;\n  height: 100%;\n  min-height: 200px;\n  padding: 0 4px;\n}\n\n.b-slider--disabled {\n  cursor: not-allowed;\n}\n\n/* Rail */\n.b-slider__rail {\n  position: relative;\n  width: 100%;\n  height: var(--b-slider-rail-size);\n  background-color: var(--b-slider-rail-bg);\n  border-radius: calc(var(--b-slider-rail-size) / 2);\n  transition: background-color 0.2s;\n}\n\n.b-slider--hovered:not(.b-slider--disabled) .b-slider__rail {\n  background-color: var(--b-slider-rail-hover-bg);\n}\n\n.b-slider--vertical .b-slider__rail {\n  width: var(--b-slider-rail-size);\n  height: 100%;\n}\n\n/* Track */\n.b-slider__track {\n  position: absolute;\n  height: 100%;\n  background-color: var(--b-slider-track-bg);\n  border-radius: calc(var(--b-slider-rail-size) / 2);\n  transition: background-color 0.2s;\n}\n\n.b-slider--hovered:not(.b-slider--disabled) .b-slider__track {\n  background-color: var(--b-slider-track-hover-bg);\n}\n\n.b-slider--disabled .b-slider__track {\n  background-color: var(--b-slider-track-bg-disabled);\n}\n\n.b-slider--vertical .b-slider__track {\n  width: 100%;\n  height: auto;\n}\n\n/* Handle */\n.b-slider__handle {\n  position: absolute;\n  top: 50%;\n  width: var(--b-slider-handle-size);\n  height: var(--b-slider-handle-size);\n  background-color: #fff;\n  border: var(--b-slider-handle-line-width) solid var(--b-slider-handle-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  cursor: grab;\n  outline: none;\n  transition:\n    width 0.2s,\n    height 0.2s,\n    border-color 0.2s,\n    border-width 0.2s,\n    box-shadow 0.2s;\n  touch-action: none;\n  z-index: 1;\n}\n\n.b-slider--vertical .b-slider__handle {\n  top: auto;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n\n.b-slider__handle:hover,\n.b-slider__handle:focus-visible {\n  width: var(--b-slider-handle-size-hover);\n  height: var(--b-slider-handle-size-hover);\n  border-width: var(--b-slider-handle-line-width-hover);\n  border-color: var(--b-slider-handle-active-color);\n}\n\n.b-slider__handle--active {\n  width: var(--b-slider-handle-size-hover);\n  height: var(--b-slider-handle-size-hover);\n  border-width: var(--b-slider-handle-line-width-hover);\n  border-color: var(--b-slider-handle-active-color);\n  box-shadow: 0 0 0 4px var(--b-slider-handle-active-outline-color);\n  cursor: grabbing;\n}\n\n.b-slider__handle:focus-visible {\n  box-shadow: 0 0 0 4px var(--b-slider-handle-active-outline-color);\n}\n\n.b-slider--disabled .b-slider__handle {\n  border-color: var(--b-slider-handle-color-disabled);\n  cursor: not-allowed;\n  box-shadow: none;\n}\n\n.b-slider--disabled .b-slider__handle:hover,\n.b-slider--disabled .b-slider__handle:focus-visible {\n  width: var(--b-slider-handle-size);\n  height: var(--b-slider-handle-size);\n  border-width: var(--b-slider-handle-line-width);\n  border-color: var(--b-slider-handle-color-disabled);\n  box-shadow: none;\n}\n\n/* Tooltip */\n.b-slider__tooltip {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%) scale(0.8);\n  padding: 4px 8px;\n  background-color: rgba(0, 0, 0, 0.85);\n  color: #fff;\n  font-size: 12px;\n  line-height: 1.4;\n  border-radius: 4px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity 0.2s,\n    transform 0.2s;\n}\n\n.b-slider__tooltip--visible {\n  opacity: 1;\n  transform: translateX(-50%) scale(1);\n}\n\n.b-slider--vertical .b-slider__tooltip {\n  bottom: auto;\n  left: calc(100% + 8px);\n  top: 50%;\n  transform: translateY(-50%) scale(0.8);\n}\n\n.b-slider--vertical .b-slider__tooltip--visible {\n  transform: translateY(-50%) scale(1);\n}\n\n/* Dots */\n.b-slider__dot {\n  position: absolute;\n  top: 50%;\n  width: var(--b-slider-dot-size);\n  height: var(--b-slider-dot-size);\n  background-color: #fff;\n  border: 2px solid var(--b-slider-dot-border-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.b-slider--vertical .b-slider__dot {\n  top: auto;\n  left: 50%;\n  transform: translate(-50%, 50%);\n}\n\n.b-slider__dot--active {\n  border-color: var(--b-slider-dot-active-border-color);\n}\n\n/* Marks */\n.b-slider__marks {\n  position: relative;\n}\n\n.b-slider--vertical .b-slider__marks {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 3;\n  pointer-events: none;\n}\n\n.b-slider__mark-text {\n  position: absolute;\n  top: 8px;\n  transform: translateX(-50%);\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.65);\n  white-space: nowrap;\n  user-select: none;\n}\n\n.b-slider--vertical .b-slider__mark-text {\n  top: auto;\n  left: 20px;\n  transform: translateY(50%);\n}\n\n.b-slider__mark-text--active {\n  color: rgba(0, 0, 0, 0.88);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-slider {\n  --b-slider-rail-bg: rgba(255, 255, 255, 0.08);\n  --b-slider-rail-hover-bg: rgba(255, 255, 255, 0.12);\n  --b-slider-track-bg: #177ddc;\n  --b-slider-track-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-slider-track-hover-bg: #3c9ae8;\n  --b-slider-handle-color: #177ddc;\n  --b-slider-handle-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-slider-handle-active-color: #3c9ae8;\n  --b-slider-handle-active-outline-color: rgba(23, 125, 220, 0.2);\n  --b-slider-dot-border-color: rgba(255, 255, 255, 0.12);\n  --b-slider-dot-active-border-color: #177ddc;\n}\n\n[data-prefers-color='dark'] .b-slider__tooltip {\n  background-color: rgba(255, 255, 255, 0.9);\n  color: #141414;\n}\n\n[data-prefers-color='dark'] .b-slider__handle {\n  background-color: #141414;\n}\n\n[data-prefers-color='dark'] .b-slider__mark-text {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n[data-prefers-color='dark'] .b-slider__mark-text--active {\n  color: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-slider {\n    --b-slider-rail-bg: rgba(255, 255, 255, 0.08);\n    --b-slider-rail-hover-bg: rgba(255, 255, 255, 0.12);\n    --b-slider-track-bg: #177ddc;\n    --b-slider-track-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-slider-track-hover-bg: #3c9ae8;\n    --b-slider-handle-color: #177ddc;\n    --b-slider-handle-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-slider-handle-active-color: #3c9ae8;\n    --b-slider-handle-active-outline-color: rgba(23, 125, 220, 0.2);\n    --b-slider-dot-border-color: rgba(255, 255, 255, 0.12);\n    --b-slider-dot-active-border-color: #177ddc;\n  }\n  [data-prefers-color='system'] .b-slider__tooltip {\n    background-color: rgba(255, 255, 255, 0.9);\n    color: #141414;\n  }\n  [data-prefers-color='system'] .b-slider__handle {\n    background-color: #141414;\n  }\n  [data-prefers-color='system'] .b-slider__mark-text {\n    color: rgba(255, 255, 255, 0.65);\n  }\n  [data-prefers-color='system'] .b-slider__mark-text--active {\n    color: rgba(255, 255, 255, 0.88);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-slider__handle,\n  .b-slider__track,\n  .b-slider__rail,\n  .b-slider__tooltip {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system197.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonInputSize } from './types';\n\nconst {\n  active = false,\n  block = false,\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  /** Input size. @default 'default' */\n  size?: BSkeletonInputSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-input',\n  `b-skeleton-input--${size}`,\n  {\n    'b-skeleton-input--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-input {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-input-min-width, 160px);\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-input--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 96px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-input--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 200px;\n}\n\n.b-skeleton-input--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":""}

package/dist/design-system198.js

@@ -1,103 +1,34 @@
-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, renderSlot as a } from "vue";
+//#region src/components/BSkeleton/BSkeletonNode.vue?vue&type=script&setup=true&lang.ts
+var o = /* @__PURE__ */ n({
+	__name: "BSkeletonNode",
 	props: {
-		spinning: {
+		active: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		size: { default: () => e.Default },
-		tip: { default: "" },
-		delay: { default: 0 },
-		fullscreen: {
+		fullSize: {
 			type: Boolean,
 			default: !1
 		}
 	},
-	setup(e) {
-		let f = b(), N = y(), P = h(!1), F;
-		function I(t) {
-			clearTimeout(F), t && e.delay > 0 ? F = setTimeout(() => {
-				P.value = !0;
-			}, e.delay) : P.value = t;
-		}
-		I(e.spinning), x(() => e.spinning, I);
-		let L = i(() => !!f.default), R = i(() => !!(e.tip || f.tip)), z = i(() => [
-			"b-spin",
-			`b-spin--${e.size}`,
+	setup(n) {
+		let o = e(() => [
+			"b-skeleton-element",
+			"b-skeleton-node",
 			{
-				"b-spin--spinning": P.value,
-				"b-spin--nested": L.value,
-				"b-spin--has-tip": R.value,
-				"b-spin--fullscreen": e.fullscreen
+				"b-skeleton-node--full-size": n.fullSize,
+				"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("div", {
+			class: r(o.value),
+			role: "presentation",
+			"aria-hidden": "true"
+		}, [a(e.$slots, "default")], 2));
 	}
 });
 //#endregion
-export { N as default };
+export { o as default };
 
 //# sourceMappingURL=design-system198.js.map

package/dist/design-system198.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system198.js","names":[],"sources":["../src/components/BSpin/BSpin.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useSlots as _useSlots, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock, Fragment as _Fragment, createStaticVNode as _createStaticVNode } from \"vue\"\n\nconst _hoisted_1 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_2 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = [\"id\"]\nconst _hoisted_4 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_5 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_6 = [\"id\"]\nconst _hoisted_7 = [\"aria-label\", \"aria-describedby\"]\nconst _hoisted_8 = {\n  class: \"b-spin__indicator\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_9 = [\"id\"]\nconst _hoisted_10 = [\"aria-busy\", \"inert\"]\n\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSpin',\n  props: {\n    spinning: { type: Boolean, default: true },\n    size: { default: () => (BSpinSize.Default) },\n    tip: { default: '' },\n    delay: { default: 0 },\n    fullscreen: { type: Boolean, default: false }\n  },\n  setup(__props: any) {\n\n\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = _useSlots();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst tipId = useId();\n\n/** Delayed spinning state - respects `delay` prop. */\nconst shouldShow = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction applySpinning(value: boolean) {\n  clearTimeout(delayTimer);\n  if (value && __props.delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, __props.delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(__props.spinning);\n\nwatch(() => __props.spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(__props.tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${__props.size}`,\n  {\n    'b-spin--spinning': shouldShow.value,\n    'b-spin--nested': isNested.value,\n    'b-spin--has-tip': hasTip.value,\n    'b-spin--fullscreen': __props.fullscreen,\n  },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (__props.fullscreen)\n    ? (_openBlock(), _createBlock(_Teleport, {\n        key: 0,\n        to: \"body\"\n      }, [\n        _createVNode(_Transition, { name: \"b-spin-fade\" }, {\n          default: _withCtx(() => [\n            (shouldShow.value)\n              ? (_openBlock(), _createElementBlock(\"div\", {\n                  key: 0,\n                  class: _normalizeClass([\"b-spin b-spin--fullscreen\", [`b-spin--${__props.size}`, { 'b-spin--spinning': shouldShow.value, 'b-spin--has-tip': hasTip.value }]]),\n                  role: \"status\",\n                  \"aria-label\": hasTip.value ? undefined : 'Loading',\n                  \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n                }, [\n                  _createElementVNode(\"div\", _hoisted_2, [\n                    _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                      _cache[0] || (_cache[0] = _createElementVNode(\"span\", { class: \"b-spin__dot\" }, [\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" }),\n                        _createElementVNode(\"i\", { class: \"b-spin__dot-item\" })\n                      ], -1))\n                    ])\n                  ]),\n                  (hasTip.value)\n                    ? (_openBlock(), _createElementBlock(\"div\", {\n                        key: 0,\n                        id: _unref(tipId),\n                        class: \"b-spin__tip\"\n                      }, [\n                        _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                          _createTextVNode(_toDisplayString(__props.tip), 1)\n                        ])\n                      ], 8, _hoisted_3))\n                    : _createCommentVNode(\"\", true)\n                ], 10, _hoisted_1))\n              : _createCommentVNode(\"\", true)\n          ]),\n          _: 3\n        })\n      ]))\n    : (!isNested.value)\n      ? (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [\n          (shouldShow.value)\n            ? (_openBlock(), _createElementBlock(\"div\", {\n                key: 0,\n                class: _normalizeClass(rootClasses.value),\n                role: \"status\",\n                \"aria-label\": hasTip.value ? undefined : 'Loading',\n                \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n              }, [\n                _createElementVNode(\"div\", _hoisted_5, [\n                  _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                    _cache[1] || (_cache[1] = _createStaticVNode(\"<span class=\\\"b-spin__dot\\\"><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i></span>\", 1))\n                  ])\n                ]),\n                (hasTip.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", {\n                      key: 0,\n                      id: _unref(tipId),\n                      class: \"b-spin__tip\"\n                    }, [\n                      _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.tip), 1)\n                      ])\n                    ], 8, _hoisted_6))\n                  : _createCommentVNode(\"\", true)\n              ], 10, _hoisted_4))\n            : _createCommentVNode(\"\", true)\n        ], 64))\n      : (_openBlock(), _createElementBlock(\"div\", {\n          key: 2,\n          class: _normalizeClass(rootClasses.value)\n        }, [\n          (shouldShow.value)\n            ? (_openBlock(), _createElementBlock(\"div\", {\n                key: 0,\n                class: \"b-spin__overlay-container\",\n                role: \"status\",\n                \"aria-label\": hasTip.value ? undefined : 'Loading',\n                \"aria-describedby\": hasTip.value ? _unref(tipId) : undefined\n              }, [\n                _createElementVNode(\"div\", _hoisted_8, [\n                  _renderSlot(_ctx.$slots, \"indicator\", {}, () => [\n                    _cache[2] || (_cache[2] = _createStaticVNode(\"<span class=\\\"b-spin__dot\\\"><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i><i class=\\\"b-spin__dot-item\\\"></i></span>\", 1))\n                  ])\n                ]),\n                (hasTip.value)\n                  ? (_openBlock(), _createElementBlock(\"div\", {\n                      key: 0,\n                      id: _unref(tipId),\n                      class: \"b-spin__tip\"\n                    }, [\n                      _renderSlot(_ctx.$slots, \"tip\", {}, () => [\n                        _createTextVNode(_toDisplayString(__props.tip), 1)\n                      ])\n                    ], 8, _hoisted_9))\n                  : _createCommentVNode(\"\", true)\n              ], 8, _hoisted_7))\n            : _createCommentVNode(\"\", true),\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-spin__content\", { 'b-spin__content--blurred': shouldShow.value }]),\n            \"aria-busy\": shouldShow.value,\n            inert: shouldShow.value\n          }, [\n            _renderSlot(_ctx.$slots, \"default\")\n          ], 10, _hoisted_10)\n        ], 2))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system198.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonNode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false, fullSize = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to fill the parent's width and height. @default false */\n  fullSize?: boolean;\n}>();\n\ndefineSlots<{\n  /** Custom content placed inside the placeholder block (e.g., an icon). */\n  default?(): unknown;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-node',\n  {\n    'b-skeleton-node--full-size': fullSize,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <slot />\n  </div>\n</template>\n\n<style>\n.b-skeleton-node {\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  color: oklch(75% 0 0);\n}\n\n.b-skeleton-node--full-size {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;EAeA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA;IACE,8BAA8B,EAAA;IAC9B,8BAA8B,EAAA;IAC/B;GACF,CAAC;yBAIA,EAEM,OAAA;GAFA,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY;MACpD,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

package/dist/design-system200.js

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

package/dist/design-system200.js.map

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