@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system45.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system45.js","names":[],"sources":["../src/components/BCarousel/BCarousel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  Comment,\n  Fragment,\n  Text,\n  computed,\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  useSlots,\n  watch,\n  type PropType,\n  type VNode,\n} from 'vue';\n\nimport type {\n  BCarouselAutoplayConfig,\n  BCarouselDotPlacement,\n  BCarouselEffect,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  modelValue,\n  defaultActiveIndex = 0,\n  arrows = false,\n  autoplay = false,\n  autoplaySpeed = 3000,\n  adaptiveHeight = false,\n  dotPlacement = 'bottom',\n  dots = true,\n  dotsClassName,\n  draggable = false,\n  fade = false,\n  effect,\n  infinite = true,\n  speed = 500,\n  easing = 'linear',\n  waitForAnimate = false,\n  pauseOnHover = true,\n  ariaLabel = 'Carousel',\n} = defineProps<{\n  /**\n   * Active slide index (controlled). Pair with `v-model` for two-way binding.\n   * When omitted, the component manages its own state starting from\n   * `defaultActiveIndex`.\n   */\n  modelValue?: number;\n  /**\n   * Initial active slide index (uncontrolled).\n   * @default 0\n   */\n  defaultActiveIndex?: number;\n  /**\n   * Show prev/next navigation arrows.\n   * @default false\n   */\n  arrows?: boolean;\n  /**\n   * Auto-advance to the next slide. Pass an object `{ dotDuration: true }` to\n   * also display a filling progress bar inside the active dot.\n   * @default false\n   */\n  autoplay?: boolean | BCarouselAutoplayConfig;\n  /**\n   * Milliseconds between automatic slide transitions (when autoplay is on).\n   * @default 3000\n   */\n  autoplaySpeed?: number;\n  /**\n   * When true, the viewport height tracks the active slide's height.\n   * @default false\n   */\n  adaptiveHeight?: boolean;\n  /**\n   * Position of the dots indicator relative to the viewport.\n   * @default 'bottom'\n   */\n  dotPlacement?: BCarouselDotPlacement;\n  /**\n   * Whether to render the dot indicators.\n   * @default true\n   */\n  dots?: boolean;\n  /** Optional CSS class added to the dots list. */\n  dotsClassName?: string;\n  /**\n   * Allow dragging slides with the pointer (mouse / touch).\n   * @default false\n   */\n  draggable?: boolean;\n  /**\n   * Use the fade effect instead of horizontal scroll. Convenience for\n   * `effect=\"fade\"`.\n   * @default false\n   */\n  fade?: boolean;\n  /**\n   * Transition effect. Overrides the `fade` shorthand when specified.\n   * @default 'scrollx'\n   */\n  effect?: BCarouselEffect;\n  /**\n   * When true (default), navigation wraps around at the edges.\n   * @default true\n   */\n  infinite?: boolean;\n  /**\n   * Transition duration in milliseconds.\n   * @default 500\n   */\n  speed?: number;\n  /**\n   * CSS easing function used for the slide transition.\n   * @default 'linear'\n   */\n  easing?: string;\n  /**\n   * When true, navigation requests during an in-flight transition are ignored\n   * until the previous transition completes.\n   * @default false\n   */\n  waitForAnimate?: boolean;\n  /**\n   * Pause autoplay while the pointer hovers over the carousel.\n   * @default true\n   */\n  pauseOnHover?: boolean;\n  /**\n   * Accessible label applied to the carousel root region.\n   * @default 'Carousel'\n   */\n  ariaLabel?: string;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Two-way binding update for the active slide index. */\n  (e: 'update:modelValue', index: number): void;\n  /** Fires AFTER the transition to the new slide completes. */\n  (e: 'change', index: number): void;\n  /** AntD-aligned alias of `change`. */\n  (e: 'afterChange', index: number): void;\n  /** Fires BEFORE the transition begins. */\n  (e: 'beforeChange', current: number, next: number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Slides - each immediate child becomes one slide. */\n  default?(): unknown;\n  /** Custom previous-arrow content. */\n  prevArrow?(): unknown;\n  /** Custom next-arrow content. */\n  nextArrow?(): unknown;\n  /** Custom dot renderer. Receives `{ index, active }`. */\n  dot?(props: { index: number; active: boolean }): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Slot → slide vnode flattening\n// ─────────────────────────────────────────────\nconst slots = useSlots();\n\nfunction flattenSlideVnodes(vnodes: readonly VNode[] = []): VNode[] {\n  const out: VNode[] = [];\n  for (const v of vnodes) {\n    if (!v) continue;\n    if (v.type === Comment) continue;\n    if (\n      v.type === Text &&\n      typeof v.children === 'string' &&\n      v.children.trim() === ''\n    ) {\n      continue;\n    }\n    if (v.type === Fragment) {\n      out.push(...flattenSlideVnodes(v.children as VNode[]));\n    } else {\n      out.push(v);\n    }\n  }\n  return out;\n}\n\n// slideCount is updated at render time by SlideTrack so that subsequent\n// reads (autoplay watcher, navigation) don't invoke the default slot outside\n// the render function. Initial value is derived once at setup so that dots\n// and arrows render synchronously on first mount.\nconst slideCount = ref(flattenSlideVnodes(slots.default?.() ?? []).length);\n\nconst SlideTrack = defineComponent({\n  name: 'BCarouselTrack',\n  inheritAttrs: false,\n  props: {\n    activeIndex: { type: Number, required: true },\n    total: { type: Number, required: true },\n    slideId: {\n      type: Function as PropType<(i: number) => string>,\n      required: true,\n    },\n    trackStyle: { type: Object, default: undefined },\n  },\n  setup(props, { slots: childSlots }) {\n    return () => {\n      const children = flattenSlideVnodes(childSlots.default?.());\n      // sync count back to parent (post-render to avoid mid-render mutation)\n      if (children.length !== slideCount.value) {\n        Promise.resolve().then(() => {\n          slideCount.value = children.length;\n        });\n      }\n      return h(\n        'div',\n        { class: 'b-carousel__track', style: props.trackStyle },\n        children.map((vnode, i) =>\n          h(\n            'div',\n            {\n              id: props.slideId(i),\n              class: [\n                'b-carousel__slide',\n                {\n                  'b-carousel__slide--active': i === props.activeIndex,\n                },\n              ],\n              role: 'group',\n              'aria-roledescription': 'slide',\n              'aria-label': `${i + 1} of ${children.length}`,\n              'aria-hidden': i !== props.activeIndex ? 'true' : undefined,\n              inert: i !== props.activeIndex ? '' : undefined,\n            },\n            [vnode],\n          ),\n        ),\n      );\n    };\n  },\n});\n\n// ─────────────────────────────────────────────\n// Effective effect (fade shorthand)\n// ─────────────────────────────────────────────\nconst effectiveEffect = computed<BCarouselEffect>(\n  () => effect ?? (fade ? 'fade' : 'scrollx'),\n);\n\n// ─────────────────────────────────────────────\n// Active index state (controlled vs uncontrolled)\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => modelValue !== undefined);\nconst internalIndex = ref<number>(\n  Math.max(0, Math.min(defaultActiveIndex, Math.max(0, slideCount.value - 1))),\n);\n\nconst activeIndex = computed(() =>\n  isControlled.value ? modelValue! : internalIndex.value,\n);\n\n// Clamp when slides change\nwatch(slideCount, (n) => {\n  if (n === 0) return;\n  if (internalIndex.value >= n) {\n    internalIndex.value = n - 1;\n  }\n});\n\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val !== undefined && val !== internalIndex.value) {\n      internalIndex.value = val;\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// IDs (a11y)\n// ─────────────────────────────────────────────\nconst uid = useId();\nconst slideId = (i: number) => `${uid}-slide-${i}`;\nconst dotId = (i: number) => `${uid}-dot-${i}`;\n\n// ─────────────────────────────────────────────\n// Animation state\n// ─────────────────────────────────────────────\nconst isAnimating = ref(false);\nlet animationTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction setAnimating() {\n  isAnimating.value = true;\n  if (animationTimer) clearTimeout(animationTimer);\n  animationTimer = setTimeout(() => {\n    isAnimating.value = false;\n    animationTimer = null;\n  }, speed);\n}\n\n// ─────────────────────────────────────────────\n// Navigation\n// ─────────────────────────────────────────────\nfunction setIndex(target: number, dontAnimate = false) {\n  if (slideCount.value === 0) return;\n  if (waitForAnimate && isAnimating.value) return;\n\n  let next = target;\n  if (infinite) {\n    next = ((target % slideCount.value) + slideCount.value) % slideCount.value;\n  } else {\n    next = Math.max(0, Math.min(target, slideCount.value - 1));\n  }\n\n  const current = activeIndex.value;\n  if (next === current) return;\n\n  emit('beforeChange', current, next);\n\n  if (!isControlled.value) {\n    internalIndex.value = next;\n  }\n  emit('update:modelValue', next);\n\n  if (!dontAnimate) {\n    setAnimating();\n  }\n\n  // afterChange fires once the transition finishes (or immediately when not animating)\n  const fire = () => {\n    emit('change', next);\n    emit('afterChange', next);\n  };\n  if (dontAnimate) {\n    fire();\n  } else {\n    setTimeout(fire, speed);\n  }\n}\n\nfunction goTo(idx: number, dontAnimate = false) {\n  setIndex(idx, dontAnimate);\n}\n\nfunction next() {\n  setIndex(activeIndex.value + 1);\n}\n\nfunction prev() {\n  setIndex(activeIndex.value - 1);\n}\n\ndefineExpose({ goTo, next, prev });\n\n// ─────────────────────────────────────────────\n// Autoplay\n// ─────────────────────────────────────────────\nconst autoplayEnabled = computed(() =>\n  typeof autoplay === 'object' ? true : !!autoplay,\n);\nconst showDotProgress = computed(\n  () =>\n    typeof autoplay === 'object' &&\n    autoplay !== null &&\n    autoplay.dotDuration === true,\n);\n\nlet autoplayTimer: ReturnType<typeof setTimeout> | null = null;\nconst isPaused = ref(false);\n\nfunction clearAutoplay() {\n  if (autoplayTimer) {\n    clearTimeout(autoplayTimer);\n    autoplayTimer = null;\n  }\n}\n\nfunction scheduleAutoplay() {\n  clearAutoplay();\n  if (!autoplayEnabled.value || isPaused.value || slideCount.value <= 1) return;\n  if (!infinite && activeIndex.value >= slideCount.value - 1) return;\n  autoplayTimer = setTimeout(() => {\n    next();\n  }, autoplaySpeed);\n}\n\nwatch(\n  [autoplayEnabled, isPaused, activeIndex, slideCount],\n  () => {\n    if (typeof window === 'undefined') return;\n    scheduleAutoplay();\n  },\n  { flush: 'post' },\n);\n\nonMounted(() => {\n  scheduleAutoplay();\n});\n\nonBeforeUnmount(() => {\n  clearAutoplay();\n  if (animationTimer) clearTimeout(animationTimer);\n});\n\nfunction onMouseEnter() {\n  if (pauseOnHover && autoplayEnabled.value) isPaused.value = true;\n}\nfunction onMouseLeave() {\n  if (pauseOnHover && autoplayEnabled.value) isPaused.value = false;\n}\n\n// ─────────────────────────────────────────────\n// Drag-to-scroll\n// ─────────────────────────────────────────────\nconst dragState = ref<{\n  active: boolean;\n  startX: number;\n  deltaX: number;\n  width: number;\n  pointerId: number | null;\n}>({ active: false, startX: 0, deltaX: 0, width: 0, pointerId: null });\n\nconst viewportRef = ref<HTMLElement | null>(null);\n\nfunction onPointerDown(e: PointerEvent) {\n  if (!draggable || slideCount.value <= 1) return;\n  // ignore non-primary buttons\n  if (e.button !== 0 && e.pointerType === 'mouse') return;\n  const target = viewportRef.value;\n  if (!target) return;\n  dragState.value = {\n    active: true,\n    startX: e.clientX,\n    deltaX: 0,\n    width: target.clientWidth || 1,\n    pointerId: e.pointerId,\n  };\n  try {\n    target.setPointerCapture(e.pointerId);\n  } catch {\n    // ignore (jsdom)\n  }\n}\n\nfunction onPointerMove(e: PointerEvent) {\n  if (!dragState.value.active) return;\n  if (\n    dragState.value.pointerId !== null &&\n    e.pointerId !== dragState.value.pointerId\n  )\n    return;\n  dragState.value.deltaX = e.clientX - dragState.value.startX;\n}\n\nfunction onPointerUp(e: PointerEvent) {\n  if (!dragState.value.active) return;\n  const { deltaX, width } = dragState.value;\n  const threshold = Math.max(40, width * 0.15);\n  if (deltaX <= -threshold) {\n    next();\n  } else if (deltaX >= threshold) {\n    prev();\n  }\n  dragState.value = {\n    active: false,\n    startX: 0,\n    deltaX: 0,\n    width: 0,\n    pointerId: null,\n  };\n  const target = viewportRef.value;\n  if (target) {\n    try {\n      target.releasePointerCapture(e.pointerId);\n    } catch {\n      // ignore\n    }\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation on the dots tablist\n// ─────────────────────────────────────────────\nfunction onDotsKeydown(e: KeyboardEvent) {\n  if (slideCount.value === 0) return;\n  switch (e.key) {\n    case 'ArrowRight':\n      e.preventDefault();\n      next();\n      break;\n    case 'ArrowLeft':\n      e.preventDefault();\n      prev();\n      break;\n    case 'Home':\n      e.preventDefault();\n      goTo(0);\n      break;\n    case 'End':\n      e.preventDefault();\n      goTo(slideCount.value - 1);\n      break;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Computed styles & classes\n// ─────────────────────────────────────────────\nconst isHorizontalEffect = computed(() => effectiveEffect.value === 'scrollx');\n\nconst trackStyle = computed(() => {\n  if (!isHorizontalEffect.value) return undefined;\n  const base = -(activeIndex.value * 100);\n  const dragOffsetPct =\n    dragState.value.active && dragState.value.width > 0\n      ? (dragState.value.deltaX / dragState.value.width) * 100\n      : 0;\n  return {\n    transform: `translate3d(${base + dragOffsetPct}%, 0, 0)`,\n    transitionDuration: dragState.value.active\n      ? '0ms'\n      : `var(--b-carousel-speed)`,\n    transitionTimingFunction: 'var(--b-carousel-easing)',\n  };\n});\n\nconst rootStyle = computed<Record<string, string>>(() => ({\n  '--b-carousel-speed': `${speed}ms`,\n  '--b-carousel-easing': easing,\n  '--b-carousel-autoplay-duration': `${autoplaySpeed}ms`,\n}));\n\nconst rootClasses = computed(() => [\n  'b-carousel',\n  `b-carousel--effect-${effectiveEffect.value}`,\n  `b-carousel--dots-${dotPlacement}`,\n  {\n    'b-carousel--arrows': arrows,\n    'b-carousel--draggable': draggable,\n    'b-carousel--adaptive-height': adaptiveHeight,\n    'b-carousel--no-dots': !dots,\n    'b-carousel--dragging': dragState.value.active,\n  },\n]);\n\nconst canPrev = computed(() => infinite || activeIndex.value > 0);\nconst canNext = computed(\n  () => infinite || activeIndex.value < slideCount.value - 1,\n);\n</script>\n\n<template>\n  <section\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"region\"\n    :aria-label=\"ariaLabel\"\n    aria-roledescription=\"carousel\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- ── Viewport ── -->\n    <div\n      ref=\"viewportRef\"\n      class=\"b-carousel__viewport\"\n      @pointerdown=\"onPointerDown\"\n      @pointermove=\"onPointerMove\"\n      @pointerup=\"onPointerUp\"\n      @pointercancel=\"onPointerUp\"\n    >\n      <SlideTrack\n        :active-index=\"activeIndex\"\n        :total=\"slideCount\"\n        :slide-id=\"slideId\"\n        :track-style=\"trackStyle\"\n      >\n        <slot />\n      </SlideTrack>\n    </div>\n\n    <!-- ── Arrows ── -->\n    <template v-if=\"arrows && slideCount > 1\">\n      <button\n        type=\"button\"\n        class=\"b-carousel__arrow b-carousel__arrow--prev\"\n        :disabled=\"!canPrev\"\n        :aria-disabled=\"!canPrev || undefined\"\n        aria-label=\"Previous slide\"\n        @click=\"prev\"\n      >\n        <slot name=\"prevArrow\">\n          <svg\n            class=\"b-carousel__arrow-icon\"\n            viewBox=\"0 0 16 16\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M10.354 3.646a.5.5 0 0 1 0 .708L6.707 8l3.647 3.646a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0z\"\n            />\n          </svg>\n        </slot>\n      </button>\n      <button\n        type=\"button\"\n        class=\"b-carousel__arrow b-carousel__arrow--next\"\n        :disabled=\"!canNext\"\n        :aria-disabled=\"!canNext || undefined\"\n        aria-label=\"Next slide\"\n        @click=\"next\"\n      >\n        <slot name=\"nextArrow\">\n          <svg\n            class=\"b-carousel__arrow-icon\"\n            viewBox=\"0 0 16 16\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M5.646 3.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L9.293 8 5.646 4.354a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </slot>\n      </button>\n    </template>\n\n    <!-- ── Live region (announces active slide change) ── -->\n    <div class=\"b-carousel__sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n      Slide {{ activeIndex + 1 }} of {{ slideCount }}\n    </div>\n\n    <!-- ── Dots ── -->\n    <div\n      v-if=\"dots && slideCount > 1\"\n      class=\"b-carousel__dots\"\n      :class=\"dotsClassName\"\n      role=\"tablist\"\n      :aria-label=\"`${ariaLabel} pagination`\"\n      @keydown=\"onDotsKeydown\"\n    >\n      <div\n        v-for=\"i in slideCount\"\n        :key=\"i - 1\"\n        class=\"b-carousel__dot-wrapper\"\n      >\n        <button\n          type=\"button\"\n          :id=\"dotId(i - 1)\"\n          class=\"b-carousel__dot\"\n          :class=\"{\n            'b-carousel__dot--active': i - 1 === activeIndex,\n            'b-carousel__dot--progress':\n              showDotProgress && i - 1 === activeIndex && !isPaused,\n          }\"\n          role=\"tab\"\n          :aria-selected=\"i - 1 === activeIndex\"\n          :aria-controls=\"slideId(i - 1)\"\n          :aria-label=\"`Go to slide ${i}`\"\n          :tabindex=\"i - 1 === activeIndex ? 0 : -1\"\n          @click=\"goTo(i - 1)\"\n        >\n          <slot name=\"dot\" :index=\"i - 1\" :active=\"i - 1 === activeIndex\">\n            <span class=\"b-carousel__dot-inner\" aria-hidden=\"true\" />\n          </slot>\n        </button>\n      </div>\n    </div>\n  </section>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BCarousel - Design tokens (scoped to .b-carousel)\n   ───────────────────────────────────────────── */\n.b-carousel {\n  /* ── AntD design tokens ── */\n  --b-carousel-arrow-offset: 8px;\n  --b-carousel-arrow-size: 16px;\n  --b-carousel-dot-active-width: 24px;\n  --b-carousel-dot-gap: 4px;\n  --b-carousel-dot-height: 3px;\n  --b-carousel-dot-offset: 12px;\n  --b-carousel-dot-width: 16px;\n\n  /* ── Local extras ── */\n  --b-carousel-arrow-color: oklch(100% 0 0);\n  --b-carousel-arrow-bg: oklch(20% 0.005 260 / 45%);\n  --b-carousel-arrow-bg-hover: oklch(20% 0.005 260 / 70%);\n  --b-carousel-arrow-disabled-opacity: 0.3;\n  --b-carousel-dot-color: oklch(100% 0 0 / 60%);\n  --b-carousel-dot-active-color: oklch(100% 0 0);\n  --b-carousel-bg: oklch(20% 0.005 260);\n  --b-carousel-radius: 4px;\n  --b-carousel-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 50%);\n\n  /* ── Motion (set by inline style; defaults below) ── */\n  --b-carousel-speed: 500ms;\n  --b-carousel-easing: linear;\n  --b-carousel-autoplay-duration: 3000ms;\n\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n}\n\n/* ─────────────────────────────────────────────\n   Viewport\n   ───────────────────────────────────────────── */\n.b-carousel__viewport {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--b-carousel-radius);\n  background: var(--b-carousel-bg);\n  touch-action: pan-y;\n}\n\n.b-carousel--draggable .b-carousel__viewport {\n  cursor: grab;\n}\n\n.b-carousel--dragging .b-carousel__viewport {\n  cursor: grabbing;\n}\n\n/* ─────────────────────────────────────────────\n   Track + slides (scrollx effect)\n   ───────────────────────────────────────────── */\n.b-carousel--effect-scrollx .b-carousel__track {\n  display: flex;\n  flex-wrap: nowrap;\n  width: 100%;\n  transition: transform var(--b-carousel-speed) var(--b-carousel-easing);\n  will-change: transform;\n}\n\n.b-carousel--effect-scrollx .b-carousel__slide {\n  flex: 0 0 100%;\n  min-width: 0;\n  width: 100%;\n}\n\n/* ── Fade effect: stack slides, only active is visible ── */\n.b-carousel--effect-fade .b-carousel__track {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n.b-carousel--effect-fade .b-carousel__slide {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--b-carousel-speed) var(--b-carousel-easing);\n}\n\n.b-carousel--effect-fade .b-carousel__slide:first-child {\n  /* gives the track its intrinsic height (sized to the first slide) */\n  position: relative;\n}\n\n.b-carousel--effect-fade .b-carousel__slide--active {\n  opacity: 1;\n  pointer-events: auto;\n  z-index: 1;\n}\n\n/* ── Adaptive height ── */\n.b-carousel--adaptive-height .b-carousel__viewport,\n.b-carousel--adaptive-height .b-carousel__track {\n  height: auto;\n}\n\n/* ─────────────────────────────────────────────\n   Arrows\n   ───────────────────────────────────────────── */\n.b-carousel__arrow {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--b-carousel-arrow-size) + 16px);\n  height: calc(var(--b-carousel-arrow-size) + 16px);\n  padding: 0;\n  border: none;\n  background: var(--b-carousel-arrow-bg);\n  color: var(--b-carousel-arrow-color);\n  border-radius: 50%;\n  cursor: pointer;\n  z-index: 2;\n  transition: background 200ms;\n}\n\n.b-carousel__arrow:hover:not(:disabled) {\n  background: var(--b-carousel-arrow-bg-hover);\n}\n\n.b-carousel__arrow:disabled {\n  cursor: not-allowed;\n  opacity: var(--b-carousel-arrow-disabled-opacity);\n}\n\n.b-carousel__arrow:focus-visible {\n  outline: none;\n  box-shadow: var(--b-carousel-focus-ring);\n}\n\n.b-carousel__arrow--prev {\n  left: var(--b-carousel-arrow-offset);\n}\n\n.b-carousel__arrow--next {\n  right: var(--b-carousel-arrow-offset);\n}\n\n.b-carousel__arrow-icon {\n  width: var(--b-carousel-arrow-size);\n  height: var(--b-carousel-arrow-size);\n  display: block;\n}\n\n/* ─────────────────────────────────────────────\n   Dots\n   ───────────────────────────────────────────── */\n.b-carousel__dots {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--b-carousel-dot-gap);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  z-index: 2;\n}\n\n.b-carousel--dots-bottom .b-carousel__dots {\n  bottom: var(--b-carousel-dot-offset);\n  left: 50%;\n  transform: translateX(-50%);\n  flex-direction: row;\n}\n\n.b-carousel--dots-top .b-carousel__dots {\n  top: var(--b-carousel-dot-offset);\n  left: 50%;\n  transform: translateX(-50%);\n  flex-direction: row;\n}\n\n.b-carousel--dots-start .b-carousel__dots {\n  left: var(--b-carousel-dot-offset);\n  top: 50%;\n  transform: translateY(-50%);\n  flex-direction: column;\n}\n\n.b-carousel--dots-end .b-carousel__dots {\n  right: var(--b-carousel-dot-offset);\n  top: 50%;\n  transform: translateY(-50%);\n  flex-direction: column;\n}\n\n.b-carousel__dot-wrapper {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n.b-carousel__dot {\n  display: block;\n  width: var(--b-carousel-dot-width);\n  height: var(--b-carousel-dot-height);\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  transition: width 200ms;\n}\n\n.b-carousel__dot-inner {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: calc(var(--b-carousel-dot-height) / 2);\n  background: var(--b-carousel-dot-color);\n  transition:\n    background 200ms,\n    opacity 200ms;\n  pointer-events: none;\n}\n\n.b-carousel__dot:hover .b-carousel__dot-inner {\n  background: var(--b-carousel-dot-active-color);\n  opacity: 0.7;\n}\n\n.b-carousel__dot:focus-visible {\n  outline: none;\n  box-shadow: var(--b-carousel-focus-ring);\n  border-radius: calc(var(--b-carousel-dot-height) / 2);\n}\n\n.b-carousel__dot--active {\n  width: var(--b-carousel-dot-active-width);\n}\n\n.b-carousel__dot--active .b-carousel__dot-inner {\n  background: var(--b-carousel-dot-active-color);\n  opacity: 1;\n}\n\n/* Vertical dot orientation (start / end placements) */\n.b-carousel--dots-start .b-carousel__dot,\n.b-carousel--dots-end .b-carousel__dot {\n  width: var(--b-carousel-dot-height);\n  height: var(--b-carousel-dot-width);\n}\n\n.b-carousel--dots-start .b-carousel__dot--active,\n.b-carousel--dots-end .b-carousel__dot--active {\n  width: var(--b-carousel-dot-height);\n  height: var(--b-carousel-dot-active-width);\n}\n\n/* ── Autoplay progress bar (CSS-only) ── */\n.b-carousel__dot--progress .b-carousel__dot-inner {\n  background: linear-gradient(\n    to right,\n    var(--b-carousel-dot-active-color) 0%,\n    var(--b-carousel-dot-active-color) 100%\n  );\n  background-size: 0% 100%;\n  background-repeat: no-repeat;\n  background-color: var(--b-carousel-dot-color);\n  animation: b-carousel-dot-progress var(--b-carousel-autoplay-duration) linear\n    forwards;\n}\n\n@keyframes b-carousel-dot-progress {\n  from {\n    background-size: 0% 100%;\n  }\n  to {\n    background-size: 100% 100%;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Screen-reader live region (visually hidden)\n   ───────────────────────────────────────────── */\n.b-carousel__sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-carousel {\n  --b-carousel-bg: oklch(15% 0.005 260);\n  --b-carousel-arrow-bg: oklch(95% 0 0 / 12%);\n  --b-carousel-arrow-bg-hover: oklch(95% 0 0 / 25%);\n  --b-carousel-arrow-color: oklch(95% 0 0);\n  --b-carousel-dot-color: oklch(85% 0 0 / 40%);\n  --b-carousel-dot-active-color: oklch(95% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-carousel {\n    --b-carousel-bg: oklch(15% 0.005 260);\n    --b-carousel-arrow-bg: oklch(95% 0 0 / 12%);\n    --b-carousel-arrow-bg-hover: oklch(95% 0 0 / 25%);\n    --b-carousel-arrow-color: oklch(95% 0 0);\n    --b-carousel-dot-color: oklch(85% 0 0 / 40%);\n    --b-carousel-dot-active-color: oklch(95% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-carousel {\n    --b-carousel-speed: 0ms;\n  }\n  .b-carousel__dot--progress .b-carousel__dot-inner {\n    animation: none;\n  }\n  .b-carousel__arrow {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system47.js

@@ -1,53 +1,8 @@
-import { B_CHECKBOX_GROUP_KEY as e } from "./design-system43.js";
-import t from "./design-system46.js";
-import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createTextVNode as o, defineComponent as s, mergeModels as c, openBlock as l, provide as u, reactive as d, renderList as f, renderSlot as p, toDisplayString as m, toRefs as h, useModel as g, withCtx as _ } from "vue";
-//#region src/components/BCheckbox/BCheckboxGroup.vue?vue&type=script&setup=true&lang.ts
-var v = {
-	class: "b-checkbox-group b:inline-flex b:flex-wrap b:gap-2",
-	role: "group"
-}, y = /* @__PURE__ */ s({
-	__name: "BCheckboxGroup",
-	props: /* @__PURE__ */ c({
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		name: { default: "" },
-		options: { default: () => void 0 }
-	}, {
-		modelValue: { default: () => [] },
-		modelModifiers: {}
-	}),
-	emits: /* @__PURE__ */ c(["change"], ["update:modelValue"]),
-	setup(s, { emit: c }) {
-		let y = g(s, "modelValue"), b = c, x = r(() => s.options ? s.options.map((e) => typeof e == "string" || typeof e == "number" ? {
-			label: String(e),
-			value: e
-		} : e) : []);
-		function S(e) {
-			let t = [...y.value], n = t.indexOf(e);
-			n === -1 ? t.push(e) : t.splice(n, 1), y.value = t, b("change", t);
-		}
-		let { disabled: C, name: w } = h(d({
-			disabled: s.disabled,
-			name: s.name
-		}));
-		return u(e, {
-			modelValue: r(() => y.value),
-			disabled: C,
-			name: w,
-			toggleValue: S
-		}), (e, r) => (l(), a("div", v, [x.value.length > 0 ? (l(!0), a(n, { key: 0 }, f(x.value, (e) => (l(), i(t, {
-			key: e.value,
-			value: e.value,
-			disabled: e.disabled
-		}, {
-			default: _(() => [o(m(e.label), 1)]),
-			_: 2
-		}, 1032, ["value", "disabled"]))), 128)) : p(e.$slots, "default", { key: 1 })]));
-	}
-});
+import e from "./design-system45.js";
+/* empty css                */
+//#region src/components/BCarousel/BCarousel.vue
+var t = e;
 //#endregion
-export { y as default };
+export { t as default };
 
 //# sourceMappingURL=design-system47.js.map

package/dist/design-system47.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system47.js","names":[],"sources":["../src/components/BCheckbox/BCheckboxGroup.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot } from \"vue\"\n\nconst _hoisted_1 = {\n  class: \"b-checkbox-group b:inline-flex b:flex-wrap b:gap-2\",\n  role: \"group\"\n}\n\nimport { computed, provide, reactive, toRefs } from 'vue';\nimport BCheckbox from './BCheckbox.vue';\nimport { B_CHECKBOX_GROUP_KEY, type BCheckboxOption } from './types';\n\n//#region Props\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BCheckboxGroup',\n  props: /*@__PURE__*/_mergeModels({\n    disabled: { type: Boolean, default: false },\n    name: { default: '' },\n    options: { default: () => (undefined) }\n  }, {\n    \"modelValue\": { default: () => [] },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\"], [\"update:modelValue\"]),\n  setup(__props: any, { emit: __emit }) {\n\n\n\n/**\n * Array of currently selected values.\n */\nconst model = _useModel<Array<string | number>>(__props, \"modelValue\");\n\nconst emit = __emit;\n//#endregion\n\n//#region Normalize options\nconst normalizedOptions = computed<BCheckboxOption[]>(() => {\n  if (!__props.options) return [];\n  return __props.options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt };\n    }\n    return opt;\n  });\n});\n//#endregion\n\n//#region Group context\nfunction toggleValue(val: string | number) {\n  const current = [...model.value];\n  const index = current.indexOf(val);\n  if (index === -1) {\n    current.push(val);\n  } else {\n    current.splice(index, 1);\n  }\n  model.value = current;\n  emit('change', current);\n}\n\nconst props = reactive({ disabled: __props.disabled, name: __props.name });\nconst { disabled: disabledRef, name: nameRef } = toRefs(props);\n\nprovide(B_CHECKBOX_GROUP_KEY, {\n  modelValue: computed(() => model.value),\n  disabled: disabledRef,\n  name: nameRef,\n  toggleValue,\n});\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n    (normalizedOptions.value.length > 0)\n      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(normalizedOptions.value, (opt) => {\n          return (_openBlock(), _createBlock(BCheckbox, {\n            key: opt.value,\n            value: opt.value,\n            disabled: opt.disabled\n          }, {\n            default: _withCtx(() => [\n              _createTextVNode(_toDisplayString(opt.label), 1)\n            ]),\n            _: 2\n          }, 1032, [\"value\", \"disabled\"]))\n        }), 128))\n      : _renderSlot(_ctx.$slots, \"default\", { key: 1 })\n  ]))\n}\n}\n\n})"],"mappings":";;;;AAGA,IAAM,IAAa;CACjB,OAAO;CACP,MAAM;CACP,EAQD,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAoB,kBAAa;EAC/B,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC3C,MAAM,EAAE,SAAS,IAAI;EACrB,SAAS,EAAE,eAAgB,KAAA,GAAY;EACxC,EAAE;EACD,YAAc,EAAE,eAAe,EAAE,EAAE;EACnC,gBAAkB,EAAE;EACrB,CAAC;CACF,OAAoB,kBAAa,CAAC,SAAS,EAAE,CAAC,oBAAoB,CAAC;CACnE,MAAM,GAAc,EAAE,MAAM,KAAU;EAOxC,IAAM,IAAQ,EAAkC,GAAS,aAAa,EAEhE,IAAO,GAIP,IAAoB,QACnB,EAAQ,UACN,EAAQ,QAAQ,KAAK,MACtB,OAAO,KAAQ,YAAY,OAAO,KAAQ,WACrC;GAAE,OAAO,OAAO,EAAI;GAAE,OAAO;GAAK,GAEpC,EACP,GAN2B,EAAE,CAO/B;EAIF,SAAS,EAAY,GAAsB;GACzC,IAAM,IAAU,CAAC,GAAG,EAAM,MAAM,EAC1B,IAAQ,EAAQ,QAAQ,EAAI;AAOlC,GANI,MAAU,KACZ,EAAQ,KAAK,EAAI,GAEjB,EAAQ,OAAO,GAAO,EAAE,EAE1B,EAAM,QAAQ,GACd,EAAK,UAAU,EAAQ;;EAIzB,IAAM,EAAE,UAAU,GAAa,MAAM,MAAY,EADnC,EAAS;GAAE,UAAU,EAAQ;GAAU,MAAM,EAAQ;GAAM,CAAC,CACZ;AAU9D,SARA,EAAQ,GAAsB;GAC5B,YAAY,QAAe,EAAM,MAAM;GACvC,UAAU;GACV,MAAM;GACN;GACD,CAAC,GAGM,GAAU,OACR,GAAY,EAAE,EAAoB,OAAO,GAAY,CAC1D,EAAkB,MAAM,SAAS,KAC7B,EAAW,GAAK,EAAE,EAAoB,GAAW,EAAE,KAAK,GAAG,EAAE,EAAY,EAAkB,QAAQ,OAC1F,GAAY,EAAE,EAAa,GAAW;GAC5C,KAAK,EAAI;GACT,OAAO,EAAI;GACX,UAAU,EAAI;GACf,EAAE;GACD,SAAS,QAAe,CACtB,EAAiB,EAAiB,EAAI,MAAM,EAAE,EAAE,CACjD,CAAC;GACF,GAAG;GACJ,EAAE,MAAM,CAAC,SAAS,WAAW,CAAC,EAC/B,EAAE,IAAI,IACR,EAAY,EAAK,QAAQ,WAAW,EAAE,KAAK,GAAG,CAAC,CACpD,CAAC;;CAIH,CAAA"}
+{"version":3,"file":"design-system47.js","names":[],"sources":["../src/components/BCarousel/BCarousel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n  Comment,\n  Fragment,\n  Text,\n  computed,\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  useId,\n  useSlots,\n  watch,\n  type PropType,\n  type VNode,\n} from 'vue';\n\nimport type {\n  BCarouselAutoplayConfig,\n  BCarouselDotPlacement,\n  BCarouselEffect,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  modelValue,\n  defaultActiveIndex = 0,\n  arrows = false,\n  autoplay = false,\n  autoplaySpeed = 3000,\n  adaptiveHeight = false,\n  dotPlacement = 'bottom',\n  dots = true,\n  dotsClassName,\n  draggable = false,\n  fade = false,\n  effect,\n  infinite = true,\n  speed = 500,\n  easing = 'linear',\n  waitForAnimate = false,\n  pauseOnHover = true,\n  ariaLabel = 'Carousel',\n} = defineProps<{\n  /**\n   * Active slide index (controlled). Pair with `v-model` for two-way binding.\n   * When omitted, the component manages its own state starting from\n   * `defaultActiveIndex`.\n   */\n  modelValue?: number;\n  /**\n   * Initial active slide index (uncontrolled).\n   * @default 0\n   */\n  defaultActiveIndex?: number;\n  /**\n   * Show prev/next navigation arrows.\n   * @default false\n   */\n  arrows?: boolean;\n  /**\n   * Auto-advance to the next slide. Pass an object `{ dotDuration: true }` to\n   * also display a filling progress bar inside the active dot.\n   * @default false\n   */\n  autoplay?: boolean | BCarouselAutoplayConfig;\n  /**\n   * Milliseconds between automatic slide transitions (when autoplay is on).\n   * @default 3000\n   */\n  autoplaySpeed?: number;\n  /**\n   * When true, the viewport height tracks the active slide's height.\n   * @default false\n   */\n  adaptiveHeight?: boolean;\n  /**\n   * Position of the dots indicator relative to the viewport.\n   * @default 'bottom'\n   */\n  dotPlacement?: BCarouselDotPlacement;\n  /**\n   * Whether to render the dot indicators.\n   * @default true\n   */\n  dots?: boolean;\n  /** Optional CSS class added to the dots list. */\n  dotsClassName?: string;\n  /**\n   * Allow dragging slides with the pointer (mouse / touch).\n   * @default false\n   */\n  draggable?: boolean;\n  /**\n   * Use the fade effect instead of horizontal scroll. Convenience for\n   * `effect=\"fade\"`.\n   * @default false\n   */\n  fade?: boolean;\n  /**\n   * Transition effect. Overrides the `fade` shorthand when specified.\n   * @default 'scrollx'\n   */\n  effect?: BCarouselEffect;\n  /**\n   * When true (default), navigation wraps around at the edges.\n   * @default true\n   */\n  infinite?: boolean;\n  /**\n   * Transition duration in milliseconds.\n   * @default 500\n   */\n  speed?: number;\n  /**\n   * CSS easing function used for the slide transition.\n   * @default 'linear'\n   */\n  easing?: string;\n  /**\n   * When true, navigation requests during an in-flight transition are ignored\n   * until the previous transition completes.\n   * @default false\n   */\n  waitForAnimate?: boolean;\n  /**\n   * Pause autoplay while the pointer hovers over the carousel.\n   * @default true\n   */\n  pauseOnHover?: boolean;\n  /**\n   * Accessible label applied to the carousel root region.\n   * @default 'Carousel'\n   */\n  ariaLabel?: string;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Two-way binding update for the active slide index. */\n  (e: 'update:modelValue', index: number): void;\n  /** Fires AFTER the transition to the new slide completes. */\n  (e: 'change', index: number): void;\n  /** AntD-aligned alias of `change`. */\n  (e: 'afterChange', index: number): void;\n  /** Fires BEFORE the transition begins. */\n  (e: 'beforeChange', current: number, next: number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Slides - each immediate child becomes one slide. */\n  default?(): unknown;\n  /** Custom previous-arrow content. */\n  prevArrow?(): unknown;\n  /** Custom next-arrow content. */\n  nextArrow?(): unknown;\n  /** Custom dot renderer. Receives `{ index, active }`. */\n  dot?(props: { index: number; active: boolean }): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Slot → slide vnode flattening\n// ─────────────────────────────────────────────\nconst slots = useSlots();\n\nfunction flattenSlideVnodes(vnodes: readonly VNode[] = []): VNode[] {\n  const out: VNode[] = [];\n  for (const v of vnodes) {\n    if (!v) continue;\n    if (v.type === Comment) continue;\n    if (\n      v.type === Text &&\n      typeof v.children === 'string' &&\n      v.children.trim() === ''\n    ) {\n      continue;\n    }\n    if (v.type === Fragment) {\n      out.push(...flattenSlideVnodes(v.children as VNode[]));\n    } else {\n      out.push(v);\n    }\n  }\n  return out;\n}\n\n// slideCount is updated at render time by SlideTrack so that subsequent\n// reads (autoplay watcher, navigation) don't invoke the default slot outside\n// the render function. Initial value is derived once at setup so that dots\n// and arrows render synchronously on first mount.\nconst slideCount = ref(flattenSlideVnodes(slots.default?.() ?? []).length);\n\nconst SlideTrack = defineComponent({\n  name: 'BCarouselTrack',\n  inheritAttrs: false,\n  props: {\n    activeIndex: { type: Number, required: true },\n    total: { type: Number, required: true },\n    slideId: {\n      type: Function as PropType<(i: number) => string>,\n      required: true,\n    },\n    trackStyle: { type: Object, default: undefined },\n  },\n  setup(props, { slots: childSlots }) {\n    return () => {\n      const children = flattenSlideVnodes(childSlots.default?.());\n      // sync count back to parent (post-render to avoid mid-render mutation)\n      if (children.length !== slideCount.value) {\n        Promise.resolve().then(() => {\n          slideCount.value = children.length;\n        });\n      }\n      return h(\n        'div',\n        { class: 'b-carousel__track', style: props.trackStyle },\n        children.map((vnode, i) =>\n          h(\n            'div',\n            {\n              id: props.slideId(i),\n              class: [\n                'b-carousel__slide',\n                {\n                  'b-carousel__slide--active': i === props.activeIndex,\n                },\n              ],\n              role: 'group',\n              'aria-roledescription': 'slide',\n              'aria-label': `${i + 1} of ${children.length}`,\n              'aria-hidden': i !== props.activeIndex ? 'true' : undefined,\n              inert: i !== props.activeIndex ? '' : undefined,\n            },\n            [vnode],\n          ),\n        ),\n      );\n    };\n  },\n});\n\n// ─────────────────────────────────────────────\n// Effective effect (fade shorthand)\n// ─────────────────────────────────────────────\nconst effectiveEffect = computed<BCarouselEffect>(\n  () => effect ?? (fade ? 'fade' : 'scrollx'),\n);\n\n// ─────────────────────────────────────────────\n// Active index state (controlled vs uncontrolled)\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => modelValue !== undefined);\nconst internalIndex = ref<number>(\n  Math.max(0, Math.min(defaultActiveIndex, Math.max(0, slideCount.value - 1))),\n);\n\nconst activeIndex = computed(() =>\n  isControlled.value ? modelValue! : internalIndex.value,\n);\n\n// Clamp when slides change\nwatch(slideCount, (n) => {\n  if (n === 0) return;\n  if (internalIndex.value >= n) {\n    internalIndex.value = n - 1;\n  }\n});\n\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val !== undefined && val !== internalIndex.value) {\n      internalIndex.value = val;\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// IDs (a11y)\n// ─────────────────────────────────────────────\nconst uid = useId();\nconst slideId = (i: number) => `${uid}-slide-${i}`;\nconst dotId = (i: number) => `${uid}-dot-${i}`;\n\n// ─────────────────────────────────────────────\n// Animation state\n// ─────────────────────────────────────────────\nconst isAnimating = ref(false);\nlet animationTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction setAnimating() {\n  isAnimating.value = true;\n  if (animationTimer) clearTimeout(animationTimer);\n  animationTimer = setTimeout(() => {\n    isAnimating.value = false;\n    animationTimer = null;\n  }, speed);\n}\n\n// ─────────────────────────────────────────────\n// Navigation\n// ─────────────────────────────────────────────\nfunction setIndex(target: number, dontAnimate = false) {\n  if (slideCount.value === 0) return;\n  if (waitForAnimate && isAnimating.value) return;\n\n  let next = target;\n  if (infinite) {\n    next = ((target % slideCount.value) + slideCount.value) % slideCount.value;\n  } else {\n    next = Math.max(0, Math.min(target, slideCount.value - 1));\n  }\n\n  const current = activeIndex.value;\n  if (next === current) return;\n\n  emit('beforeChange', current, next);\n\n  if (!isControlled.value) {\n    internalIndex.value = next;\n  }\n  emit('update:modelValue', next);\n\n  if (!dontAnimate) {\n    setAnimating();\n  }\n\n  // afterChange fires once the transition finishes (or immediately when not animating)\n  const fire = () => {\n    emit('change', next);\n    emit('afterChange', next);\n  };\n  if (dontAnimate) {\n    fire();\n  } else {\n    setTimeout(fire, speed);\n  }\n}\n\nfunction goTo(idx: number, dontAnimate = false) {\n  setIndex(idx, dontAnimate);\n}\n\nfunction next() {\n  setIndex(activeIndex.value + 1);\n}\n\nfunction prev() {\n  setIndex(activeIndex.value - 1);\n}\n\ndefineExpose({ goTo, next, prev });\n\n// ─────────────────────────────────────────────\n// Autoplay\n// ─────────────────────────────────────────────\nconst autoplayEnabled = computed(() =>\n  typeof autoplay === 'object' ? true : !!autoplay,\n);\nconst showDotProgress = computed(\n  () =>\n    typeof autoplay === 'object' &&\n    autoplay !== null &&\n    autoplay.dotDuration === true,\n);\n\nlet autoplayTimer: ReturnType<typeof setTimeout> | null = null;\nconst isPaused = ref(false);\n\nfunction clearAutoplay() {\n  if (autoplayTimer) {\n    clearTimeout(autoplayTimer);\n    autoplayTimer = null;\n  }\n}\n\nfunction scheduleAutoplay() {\n  clearAutoplay();\n  if (!autoplayEnabled.value || isPaused.value || slideCount.value <= 1) return;\n  if (!infinite && activeIndex.value >= slideCount.value - 1) return;\n  autoplayTimer = setTimeout(() => {\n    next();\n  }, autoplaySpeed);\n}\n\nwatch(\n  [autoplayEnabled, isPaused, activeIndex, slideCount],\n  () => {\n    if (typeof window === 'undefined') return;\n    scheduleAutoplay();\n  },\n  { flush: 'post' },\n);\n\nonMounted(() => {\n  scheduleAutoplay();\n});\n\nonBeforeUnmount(() => {\n  clearAutoplay();\n  if (animationTimer) clearTimeout(animationTimer);\n});\n\nfunction onMouseEnter() {\n  if (pauseOnHover && autoplayEnabled.value) isPaused.value = true;\n}\nfunction onMouseLeave() {\n  if (pauseOnHover && autoplayEnabled.value) isPaused.value = false;\n}\n\n// ─────────────────────────────────────────────\n// Drag-to-scroll\n// ─────────────────────────────────────────────\nconst dragState = ref<{\n  active: boolean;\n  startX: number;\n  deltaX: number;\n  width: number;\n  pointerId: number | null;\n}>({ active: false, startX: 0, deltaX: 0, width: 0, pointerId: null });\n\nconst viewportRef = ref<HTMLElement | null>(null);\n\nfunction onPointerDown(e: PointerEvent) {\n  if (!draggable || slideCount.value <= 1) return;\n  // ignore non-primary buttons\n  if (e.button !== 0 && e.pointerType === 'mouse') return;\n  const target = viewportRef.value;\n  if (!target) return;\n  dragState.value = {\n    active: true,\n    startX: e.clientX,\n    deltaX: 0,\n    width: target.clientWidth || 1,\n    pointerId: e.pointerId,\n  };\n  try {\n    target.setPointerCapture(e.pointerId);\n  } catch {\n    // ignore (jsdom)\n  }\n}\n\nfunction onPointerMove(e: PointerEvent) {\n  if (!dragState.value.active) return;\n  if (\n    dragState.value.pointerId !== null &&\n    e.pointerId !== dragState.value.pointerId\n  )\n    return;\n  dragState.value.deltaX = e.clientX - dragState.value.startX;\n}\n\nfunction onPointerUp(e: PointerEvent) {\n  if (!dragState.value.active) return;\n  const { deltaX, width } = dragState.value;\n  const threshold = Math.max(40, width * 0.15);\n  if (deltaX <= -threshold) {\n    next();\n  } else if (deltaX >= threshold) {\n    prev();\n  }\n  dragState.value = {\n    active: false,\n    startX: 0,\n    deltaX: 0,\n    width: 0,\n    pointerId: null,\n  };\n  const target = viewportRef.value;\n  if (target) {\n    try {\n      target.releasePointerCapture(e.pointerId);\n    } catch {\n      // ignore\n    }\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation on the dots tablist\n// ─────────────────────────────────────────────\nfunction onDotsKeydown(e: KeyboardEvent) {\n  if (slideCount.value === 0) return;\n  switch (e.key) {\n    case 'ArrowRight':\n      e.preventDefault();\n      next();\n      break;\n    case 'ArrowLeft':\n      e.preventDefault();\n      prev();\n      break;\n    case 'Home':\n      e.preventDefault();\n      goTo(0);\n      break;\n    case 'End':\n      e.preventDefault();\n      goTo(slideCount.value - 1);\n      break;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Computed styles & classes\n// ─────────────────────────────────────────────\nconst isHorizontalEffect = computed(() => effectiveEffect.value === 'scrollx');\n\nconst trackStyle = computed(() => {\n  if (!isHorizontalEffect.value) return undefined;\n  const base = -(activeIndex.value * 100);\n  const dragOffsetPct =\n    dragState.value.active && dragState.value.width > 0\n      ? (dragState.value.deltaX / dragState.value.width) * 100\n      : 0;\n  return {\n    transform: `translate3d(${base + dragOffsetPct}%, 0, 0)`,\n    transitionDuration: dragState.value.active\n      ? '0ms'\n      : `var(--b-carousel-speed)`,\n    transitionTimingFunction: 'var(--b-carousel-easing)',\n  };\n});\n\nconst rootStyle = computed<Record<string, string>>(() => ({\n  '--b-carousel-speed': `${speed}ms`,\n  '--b-carousel-easing': easing,\n  '--b-carousel-autoplay-duration': `${autoplaySpeed}ms`,\n}));\n\nconst rootClasses = computed(() => [\n  'b-carousel',\n  `b-carousel--effect-${effectiveEffect.value}`,\n  `b-carousel--dots-${dotPlacement}`,\n  {\n    'b-carousel--arrows': arrows,\n    'b-carousel--draggable': draggable,\n    'b-carousel--adaptive-height': adaptiveHeight,\n    'b-carousel--no-dots': !dots,\n    'b-carousel--dragging': dragState.value.active,\n  },\n]);\n\nconst canPrev = computed(() => infinite || activeIndex.value > 0);\nconst canNext = computed(\n  () => infinite || activeIndex.value < slideCount.value - 1,\n);\n</script>\n\n<template>\n  <section\n    :class=\"rootClasses\"\n    :style=\"rootStyle\"\n    role=\"region\"\n    :aria-label=\"ariaLabel\"\n    aria-roledescription=\"carousel\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- ── Viewport ── -->\n    <div\n      ref=\"viewportRef\"\n      class=\"b-carousel__viewport\"\n      @pointerdown=\"onPointerDown\"\n      @pointermove=\"onPointerMove\"\n      @pointerup=\"onPointerUp\"\n      @pointercancel=\"onPointerUp\"\n    >\n      <SlideTrack\n        :active-index=\"activeIndex\"\n        :total=\"slideCount\"\n        :slide-id=\"slideId\"\n        :track-style=\"trackStyle\"\n      >\n        <slot />\n      </SlideTrack>\n    </div>\n\n    <!-- ── Arrows ── -->\n    <template v-if=\"arrows && slideCount > 1\">\n      <button\n        type=\"button\"\n        class=\"b-carousel__arrow b-carousel__arrow--prev\"\n        :disabled=\"!canPrev\"\n        :aria-disabled=\"!canPrev || undefined\"\n        aria-label=\"Previous slide\"\n        @click=\"prev\"\n      >\n        <slot name=\"prevArrow\">\n          <svg\n            class=\"b-carousel__arrow-icon\"\n            viewBox=\"0 0 16 16\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M10.354 3.646a.5.5 0 0 1 0 .708L6.707 8l3.647 3.646a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0z\"\n            />\n          </svg>\n        </slot>\n      </button>\n      <button\n        type=\"button\"\n        class=\"b-carousel__arrow b-carousel__arrow--next\"\n        :disabled=\"!canNext\"\n        :aria-disabled=\"!canNext || undefined\"\n        aria-label=\"Next slide\"\n        @click=\"next\"\n      >\n        <slot name=\"nextArrow\">\n          <svg\n            class=\"b-carousel__arrow-icon\"\n            viewBox=\"0 0 16 16\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M5.646 3.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L9.293 8 5.646 4.354a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </slot>\n      </button>\n    </template>\n\n    <!-- ── Live region (announces active slide change) ── -->\n    <div class=\"b-carousel__sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n      Slide {{ activeIndex + 1 }} of {{ slideCount }}\n    </div>\n\n    <!-- ── Dots ── -->\n    <div\n      v-if=\"dots && slideCount > 1\"\n      class=\"b-carousel__dots\"\n      :class=\"dotsClassName\"\n      role=\"tablist\"\n      :aria-label=\"`${ariaLabel} pagination`\"\n      @keydown=\"onDotsKeydown\"\n    >\n      <div\n        v-for=\"i in slideCount\"\n        :key=\"i - 1\"\n        class=\"b-carousel__dot-wrapper\"\n      >\n        <button\n          type=\"button\"\n          :id=\"dotId(i - 1)\"\n          class=\"b-carousel__dot\"\n          :class=\"{\n            'b-carousel__dot--active': i - 1 === activeIndex,\n            'b-carousel__dot--progress':\n              showDotProgress && i - 1 === activeIndex && !isPaused,\n          }\"\n          role=\"tab\"\n          :aria-selected=\"i - 1 === activeIndex\"\n          :aria-controls=\"slideId(i - 1)\"\n          :aria-label=\"`Go to slide ${i}`\"\n          :tabindex=\"i - 1 === activeIndex ? 0 : -1\"\n          @click=\"goTo(i - 1)\"\n        >\n          <slot name=\"dot\" :index=\"i - 1\" :active=\"i - 1 === activeIndex\">\n            <span class=\"b-carousel__dot-inner\" aria-hidden=\"true\" />\n          </slot>\n        </button>\n      </div>\n    </div>\n  </section>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BCarousel - Design tokens (scoped to .b-carousel)\n   ───────────────────────────────────────────── */\n.b-carousel {\n  /* ── AntD design tokens ── */\n  --b-carousel-arrow-offset: 8px;\n  --b-carousel-arrow-size: 16px;\n  --b-carousel-dot-active-width: 24px;\n  --b-carousel-dot-gap: 4px;\n  --b-carousel-dot-height: 3px;\n  --b-carousel-dot-offset: 12px;\n  --b-carousel-dot-width: 16px;\n\n  /* ── Local extras ── */\n  --b-carousel-arrow-color: oklch(100% 0 0);\n  --b-carousel-arrow-bg: oklch(20% 0.005 260 / 45%);\n  --b-carousel-arrow-bg-hover: oklch(20% 0.005 260 / 70%);\n  --b-carousel-arrow-disabled-opacity: 0.3;\n  --b-carousel-dot-color: oklch(100% 0 0 / 60%);\n  --b-carousel-dot-active-color: oklch(100% 0 0);\n  --b-carousel-bg: oklch(20% 0.005 260);\n  --b-carousel-radius: 4px;\n  --b-carousel-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 50%);\n\n  /* ── Motion (set by inline style; defaults below) ── */\n  --b-carousel-speed: 500ms;\n  --b-carousel-easing: linear;\n  --b-carousel-autoplay-duration: 3000ms;\n\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n}\n\n/* ─────────────────────────────────────────────\n   Viewport\n   ───────────────────────────────────────────── */\n.b-carousel__viewport {\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--b-carousel-radius);\n  background: var(--b-carousel-bg);\n  touch-action: pan-y;\n}\n\n.b-carousel--draggable .b-carousel__viewport {\n  cursor: grab;\n}\n\n.b-carousel--dragging .b-carousel__viewport {\n  cursor: grabbing;\n}\n\n/* ─────────────────────────────────────────────\n   Track + slides (scrollx effect)\n   ───────────────────────────────────────────── */\n.b-carousel--effect-scrollx .b-carousel__track {\n  display: flex;\n  flex-wrap: nowrap;\n  width: 100%;\n  transition: transform var(--b-carousel-speed) var(--b-carousel-easing);\n  will-change: transform;\n}\n\n.b-carousel--effect-scrollx .b-carousel__slide {\n  flex: 0 0 100%;\n  min-width: 0;\n  width: 100%;\n}\n\n/* ── Fade effect: stack slides, only active is visible ── */\n.b-carousel--effect-fade .b-carousel__track {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n.b-carousel--effect-fade .b-carousel__slide {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--b-carousel-speed) var(--b-carousel-easing);\n}\n\n.b-carousel--effect-fade .b-carousel__slide:first-child {\n  /* gives the track its intrinsic height (sized to the first slide) */\n  position: relative;\n}\n\n.b-carousel--effect-fade .b-carousel__slide--active {\n  opacity: 1;\n  pointer-events: auto;\n  z-index: 1;\n}\n\n/* ── Adaptive height ── */\n.b-carousel--adaptive-height .b-carousel__viewport,\n.b-carousel--adaptive-height .b-carousel__track {\n  height: auto;\n}\n\n/* ─────────────────────────────────────────────\n   Arrows\n   ───────────────────────────────────────────── */\n.b-carousel__arrow {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--b-carousel-arrow-size) + 16px);\n  height: calc(var(--b-carousel-arrow-size) + 16px);\n  padding: 0;\n  border: none;\n  background: var(--b-carousel-arrow-bg);\n  color: var(--b-carousel-arrow-color);\n  border-radius: 50%;\n  cursor: pointer;\n  z-index: 2;\n  transition: background 200ms;\n}\n\n.b-carousel__arrow:hover:not(:disabled) {\n  background: var(--b-carousel-arrow-bg-hover);\n}\n\n.b-carousel__arrow:disabled {\n  cursor: not-allowed;\n  opacity: var(--b-carousel-arrow-disabled-opacity);\n}\n\n.b-carousel__arrow:focus-visible {\n  outline: none;\n  box-shadow: var(--b-carousel-focus-ring);\n}\n\n.b-carousel__arrow--prev {\n  left: var(--b-carousel-arrow-offset);\n}\n\n.b-carousel__arrow--next {\n  right: var(--b-carousel-arrow-offset);\n}\n\n.b-carousel__arrow-icon {\n  width: var(--b-carousel-arrow-size);\n  height: var(--b-carousel-arrow-size);\n  display: block;\n}\n\n/* ─────────────────────────────────────────────\n   Dots\n   ───────────────────────────────────────────── */\n.b-carousel__dots {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--b-carousel-dot-gap);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  z-index: 2;\n}\n\n.b-carousel--dots-bottom .b-carousel__dots {\n  bottom: var(--b-carousel-dot-offset);\n  left: 50%;\n  transform: translateX(-50%);\n  flex-direction: row;\n}\n\n.b-carousel--dots-top .b-carousel__dots {\n  top: var(--b-carousel-dot-offset);\n  left: 50%;\n  transform: translateX(-50%);\n  flex-direction: row;\n}\n\n.b-carousel--dots-start .b-carousel__dots {\n  left: var(--b-carousel-dot-offset);\n  top: 50%;\n  transform: translateY(-50%);\n  flex-direction: column;\n}\n\n.b-carousel--dots-end .b-carousel__dots {\n  right: var(--b-carousel-dot-offset);\n  top: 50%;\n  transform: translateY(-50%);\n  flex-direction: column;\n}\n\n.b-carousel__dot-wrapper {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n.b-carousel__dot {\n  display: block;\n  width: var(--b-carousel-dot-width);\n  height: var(--b-carousel-dot-height);\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n  transition: width 200ms;\n}\n\n.b-carousel__dot-inner {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: calc(var(--b-carousel-dot-height) / 2);\n  background: var(--b-carousel-dot-color);\n  transition:\n    background 200ms,\n    opacity 200ms;\n  pointer-events: none;\n}\n\n.b-carousel__dot:hover .b-carousel__dot-inner {\n  background: var(--b-carousel-dot-active-color);\n  opacity: 0.7;\n}\n\n.b-carousel__dot:focus-visible {\n  outline: none;\n  box-shadow: var(--b-carousel-focus-ring);\n  border-radius: calc(var(--b-carousel-dot-height) / 2);\n}\n\n.b-carousel__dot--active {\n  width: var(--b-carousel-dot-active-width);\n}\n\n.b-carousel__dot--active .b-carousel__dot-inner {\n  background: var(--b-carousel-dot-active-color);\n  opacity: 1;\n}\n\n/* Vertical dot orientation (start / end placements) */\n.b-carousel--dots-start .b-carousel__dot,\n.b-carousel--dots-end .b-carousel__dot {\n  width: var(--b-carousel-dot-height);\n  height: var(--b-carousel-dot-width);\n}\n\n.b-carousel--dots-start .b-carousel__dot--active,\n.b-carousel--dots-end .b-carousel__dot--active {\n  width: var(--b-carousel-dot-height);\n  height: var(--b-carousel-dot-active-width);\n}\n\n/* ── Autoplay progress bar (CSS-only) ── */\n.b-carousel__dot--progress .b-carousel__dot-inner {\n  background: linear-gradient(\n    to right,\n    var(--b-carousel-dot-active-color) 0%,\n    var(--b-carousel-dot-active-color) 100%\n  );\n  background-size: 0% 100%;\n  background-repeat: no-repeat;\n  background-color: var(--b-carousel-dot-color);\n  animation: b-carousel-dot-progress var(--b-carousel-autoplay-duration) linear\n    forwards;\n}\n\n@keyframes b-carousel-dot-progress {\n  from {\n    background-size: 0% 100%;\n  }\n  to {\n    background-size: 100% 100%;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Screen-reader live region (visually hidden)\n   ───────────────────────────────────────────── */\n.b-carousel__sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-carousel {\n  --b-carousel-bg: oklch(15% 0.005 260);\n  --b-carousel-arrow-bg: oklch(95% 0 0 / 12%);\n  --b-carousel-arrow-bg-hover: oklch(95% 0 0 / 25%);\n  --b-carousel-arrow-color: oklch(95% 0 0);\n  --b-carousel-dot-color: oklch(85% 0 0 / 40%);\n  --b-carousel-dot-active-color: oklch(95% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-carousel {\n    --b-carousel-bg: oklch(15% 0.005 260);\n    --b-carousel-arrow-bg: oklch(95% 0 0 / 12%);\n    --b-carousel-arrow-bg-hover: oklch(95% 0 0 / 25%);\n    --b-carousel-arrow-color: oklch(95% 0 0);\n    --b-carousel-dot-color: oklch(85% 0 0 / 40%);\n    --b-carousel-dot-active-color: oklch(95% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-carousel {\n    --b-carousel-speed: 0ms;\n  }\n  .b-carousel__dot--progress .b-carousel__dot-inner {\n    animation: none;\n  }\n  .b-carousel__arrow {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system48.js

@@ -1,7 +1,14 @@
-import e from "./design-system47.js";
-//#region src/components/BCheckbox/BCheckboxGroup.vue
-var t = e;
+//#region src/components/BCascader/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Click = "click", e.Hover = "hover", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.BottomLeft = "bottomLeft", e.BottomRight = "bottomRight", e.TopLeft = "topLeft", e.TopRight = "topRight", e;
+}({}), n = /* @__PURE__ */ function(e) {
+	return e.Small = "sm", e.Medium = "md", e.Large = "lg", e;
+}({}), r = /* @__PURE__ */ function(e) {
+	return e.Error = "error", e.Warning = "warning", e;
+}({});
 //#endregion
-export { t as default };
+export { e as BCascaderExpandTrigger, t as BCascaderPlacement, n as BCascaderSize, r as BCascaderStatus };
 
 //# sourceMappingURL=design-system48.js.map

package/dist/design-system48.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system48.js","names":[],"sources":["../src/components/BCheckbox/BCheckboxGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, provide, reactive, toRefs } from 'vue';\nimport BCheckbox from './BCheckbox.vue';\nimport { B_CHECKBOX_GROUP_KEY, type BCheckboxOption } from './types';\n\n//#region Props\nconst {\n  disabled = false,\n  name = '',\n  options = undefined,\n} = defineProps<{\n  /** Disable all checkboxes in the group. */\n  disabled?: boolean;\n  /** The name property of all child input elements. */\n  name?: string;\n  /** Shorthand options to render checkboxes from an array. */\n  options?: BCheckboxOption[] | string[] | number[];\n}>();\n\n/**\n * Array of currently selected values.\n */\nconst model = defineModel<Array<string | number>>({ default: () => [] });\n\nconst emit = defineEmits<{\n  change: [checkedValues: Array<string | number>];\n}>();\n//#endregion\n\n//#region Normalize options\nconst normalizedOptions = computed<BCheckboxOption[]>(() => {\n  if (!options) return [];\n  return options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt };\n    }\n    return opt;\n  });\n});\n//#endregion\n\n//#region Group context\nfunction toggleValue(val: string | number) {\n  const current = [...model.value];\n  const index = current.indexOf(val);\n  if (index === -1) {\n    current.push(val);\n  } else {\n    current.splice(index, 1);\n  }\n  model.value = current;\n  emit('change', current);\n}\n\nconst props = reactive({ disabled, name });\nconst { disabled: disabledRef, name: nameRef } = toRefs(props);\n\nprovide(B_CHECKBOX_GROUP_KEY, {\n  modelValue: computed(() => model.value),\n  disabled: disabledRef,\n  name: nameRef,\n  toggleValue,\n});\n//#endregion\n</script>\n\n<template>\n  <div class=\"b-checkbox-group b:inline-flex b:flex-wrap b:gap-2\" role=\"group\">\n    <template v-if=\"normalizedOptions.length > 0\">\n      <BCheckbox\n        v-for=\"opt in normalizedOptions\"\n        :key=\"opt.value\"\n        :value=\"opt.value\"\n        :disabled=\"opt.disabled\"\n      >\n        {{ opt.label }}\n      </BCheckbox>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"design-system48.js","names":[],"sources":["../src/components/BCascader/types.ts"],"sourcesContent":["export enum BCascaderExpandTrigger {\n  Click = 'click',\n  Hover = 'hover',\n}\n\nexport enum BCascaderPlacement {\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n}\n\nexport enum BCascaderSize {\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n}\n\nexport enum BCascaderStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport interface BCascaderOption {\n  /** The value used for identification. */\n  value: string | number;\n  /** The display label. */\n  label: string;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n  /** Child options for the next level. */\n  children?: BCascaderOption[];\n  /** Whether this is a leaf node (used with lazy loading). */\n  isLeaf?: boolean;\n}\n\nexport interface BCascaderFieldNames {\n  /** Custom field name for label. */\n  label?: string;\n  /** Custom field name for value. */\n  value?: string;\n  /** Custom field name for children. */\n  children?: string;\n}\n\nexport type BCascaderValueType = (string | number)[];\n\nexport interface BCascaderShowSearchConfig {\n  /** Custom filter function. */\n  filter?: (inputValue: string, path: BCascaderOption[]) => boolean;\n  /** Maximum number of search results. */\n  limit?: number;\n  /** Custom render function for search results. */\n  render?: (inputValue: string, path: BCascaderOption[]) => string;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,cACA,EAAA,cAAA,eACA,EAAA,UAAA,WACA,EAAA,WAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,MACA,EAAA,SAAA,MACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD"}