@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system57.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system57.js","names":[],"sources":["../src/components/BColorPicker/BColorPicker.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment } from \"vue\"\n\nconst _hoisted_1 = [\"tabindex\", \"aria-expanded\", \"aria-controls\", \"aria-disabled\", \"aria-label\"]\nconst _hoisted_2 = { class: \"b-color-picker__swatch-wrapper\" }\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-color-picker__text\"\n}\nconst _hoisted_4 = [\"id\"]\nconst _hoisted_5 = {\n  key: 0,\n  class: \"b-color-picker__arrow\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_6 = [\"aria-valuetext\"]\nconst _hoisted_7 = { class: \"b-color-picker__controls\" }\nconst _hoisted_8 = { class: \"b-color-picker__preview\" }\nconst _hoisted_9 = { class: \"b-color-picker__sliders\" }\nconst _hoisted_10 = [\"aria-valuenow\"]\nconst _hoisted_11 = [\"aria-valuenow\"]\nconst _hoisted_12 = { class: \"b-color-picker__input-row\" }\nconst _hoisted_13 = {\n  key: 1,\n  class: \"b-color-picker__format-label\"\n}\nconst _hoisted_14 = [\"value\"]\nconst _hoisted_15 = [\"value\"]\nconst _hoisted_16 = {\n  key: 1,\n  class: \"b-color-picker__presets\"\n}\nconst _hoisted_17 = { class: \"b-color-picker__preset-label\" }\nconst _hoisted_18 = { class: \"b-color-picker__preset-colors\" }\nconst _hoisted_19 = [\"aria-label\", \"onClick\"]\nconst _hoisted_20 = {\n  key: 2,\n  class: \"b-color-picker__clear-row\"\n}\n\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\nimport {\n  BColorPickerFormat,\n  BColorPickerPlacement,\n  BColorPickerSize,\n  BColorPickerTrigger,\n  type BColorHsb,\n  type BColorHsl,\n  type BColorPickerPreset,\n  type BColorRgb,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BColorPicker',\n  props: {\n    modelValue: { default: () => (undefined) },\n    defaultValue: { default: '#1677ff' },\n    disabled: { type: Boolean, default: false },\n    open: { type: Boolean, default: () => (undefined) },\n    trigger: { default: () => (BColorPickerTrigger.Click) },\n    size: { default: () => (BColorPickerSize.Medium) },\n    placement: { default: () => (BColorPickerPlacement.BottomLeft) },\n    format: { default: () => (undefined) },\n    defaultFormat: { default: () => (BColorPickerFormat.Hex) },\n    disabledAlpha: { type: Boolean, default: false },\n    disabledFormat: { type: Boolean, default: false },\n    showText: { type: [Boolean, Function], default: false },\n    presets: { default: () => (undefined) },\n    allowClear: { type: Boolean, default: false },\n    destroyOnHidden: { type: Boolean, default: false },\n    arrow: { type: Boolean, default: true }\n  },\n  emits: [\"update:modelValue\", \"update:open\", \"change\", \"changeComplete\", \"formatChange\", \"clear\", \"openChange\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst emit = __emit;\n\n\n\n// ─────────────────────────────────────────────\n// Color conversion utilities\n// ─────────────────────────────────────────────\n\nfunction hexToRgb(hex: string): BColorRgb {\n  let h = hex.replace('#', '');\n  let a = 1;\n  if (h.length === 4) {\n    h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];\n  } else if (h.length === 8) {\n    a = parseInt(h.slice(6, 8), 16) / 255;\n    h = h.slice(0, 6);\n  }\n  const num = parseInt(h, 16);\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255, a };\n}\n\nfunction rgbToHex(rgb: BColorRgb): string {\n  const toHex = (n: number) =>\n    Math.round(Math.max(0, Math.min(255, n)))\n      .toString(16)\n      .padStart(2, '0');\n  const hex = `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;\n  if (rgb.a < 1) {\n    return hex + toHex(Math.round(rgb.a * 255));\n  }\n  return hex;\n}\n\nfunction rgbToHsb(rgb: BColorRgb): BColorHsb {\n  const r = rgb.r / 255;\n  const g = rgb.g / 255;\n  const b = rgb.b / 255;\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const d = max - min;\n  let h = 0;\n  const s = max === 0 ? 0 : d / max;\n  const v = max;\n  if (d !== 0) {\n    switch (max) {\n      case r:\n        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n        break;\n      case g:\n        h = ((b - r) / d + 2) / 6;\n        break;\n      case b:\n        h = ((r - g) / d + 4) / 6;\n        break;\n    }\n  }\n  return { h: h * 360, s: s * 100, b: v * 100, a: rgb.a };\n}\n\nfunction hsbToRgb(hsb: BColorHsb): BColorRgb {\n  const h = hsb.h / 360;\n  const s = hsb.s / 100;\n  const v = hsb.b / 100;\n  let r = 0,\n    g = 0,\n    b = 0;\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  switch (i % 6) {\n    case 0:\n      r = v;\n      g = t;\n      b = p;\n      break;\n    case 1:\n      r = q;\n      g = v;\n      b = p;\n      break;\n    case 2:\n      r = p;\n      g = v;\n      b = t;\n      break;\n    case 3:\n      r = p;\n      g = q;\n      b = v;\n      break;\n    case 4:\n      r = t;\n      g = p;\n      b = v;\n      break;\n    case 5:\n      r = v;\n      g = p;\n      b = q;\n      break;\n  }\n  return {\n    r: Math.round(r * 255),\n    g: Math.round(g * 255),\n    b: Math.round(b * 255),\n    a: hsb.a,\n  };\n}\n\nfunction rgbToHsl(rgb: BColorRgb): BColorHsl {\n  const r = rgb.r / 255;\n  const g = rgb.g / 255;\n  const b = rgb.b / 255;\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  let h = 0;\n  let s = 0;\n  const l = (max + min) / 2;\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    switch (max) {\n      case r:\n        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n        break;\n      case g:\n        h = ((b - r) / d + 2) / 6;\n        break;\n      case b:\n        h = ((r - g) / d + 4) / 6;\n        break;\n    }\n  }\n  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100), a: rgb.a };\n}\n\nfunction hslToRgb(hsl: BColorHsl): BColorRgb {\n  const h = hsl.h / 360;\n  const s = hsl.s / 100;\n  const l = hsl.l / 100;\n  let r: number, g: number, b: number;\n  if (s === 0) {\n    r = g = b = l;\n  } else {\n    const hue2rgb = (p: number, q: number, t: number) => {\n      if (t < 0) t += 1;\n      if (t > 1) t -= 1;\n      if (t < 1 / 6) return p + (q - p) * 6 * t;\n      if (t < 1 / 2) return q;\n      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n      return p;\n    };\n    const q2 = l < 0.5 ? l * (1 + s) : l + s - l * s;\n    const p2 = 2 * l - q2;\n    r = hue2rgb(p2, q2, h + 1 / 3);\n    g = hue2rgb(p2, q2, h);\n    b = hue2rgb(p2, q2, h - 1 / 3);\n  }\n  return {\n    r: Math.round(r * 255),\n    g: Math.round(g * 255),\n    b: Math.round(b * 255),\n    a: hsl.a,\n  };\n}\n\nfunction parseColor(input: string): BColorHsb {\n  const s = input.trim().toLowerCase();\n\n  // HSL string\n  const hslMatch = s.match(/hsla?\\(\\s*(\\d+)\\s*,\\s*(\\d+)%?\\s*,\\s*(\\d+)%?\\s*(?:,\\s*([\\d.]+))?\\s*\\)/);\n  if (hslMatch) {\n    const hsl: BColorHsl = {\n      h: parseInt(hslMatch[1]),\n      s: parseInt(hslMatch[2]),\n      l: parseInt(hslMatch[3]),\n      a: hslMatch[4] !== undefined ? parseFloat(hslMatch[4]) : 1,\n    };\n    return rgbToHsb(hslToRgb(hsl));\n  }\n\n  // RGB string\n  const rgbMatch = s.match(/rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*([\\d.]+))?\\s*\\)/);\n  if (rgbMatch) {\n    const rgb: BColorRgb = {\n      r: parseInt(rgbMatch[1]),\n      g: parseInt(rgbMatch[2]),\n      b: parseInt(rgbMatch[3]),\n      a: rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : 1,\n    };\n    return rgbToHsb(rgb);\n  }\n\n  // HSB string\n  const hsbMatch = s.match(/hsb\\(\\s*(\\d+)\\s*,\\s*(\\d+)%?\\s*,\\s*(\\d+)%?\\s*(?:,\\s*([\\d.]+))?\\s*\\)/);\n  if (hsbMatch) {\n    return {\n      h: parseInt(hsbMatch[1]),\n      s: parseInt(hsbMatch[2]),\n      b: parseInt(hsbMatch[3]),\n      a: hsbMatch[4] !== undefined ? parseFloat(hsbMatch[4]) : 1,\n    };\n  }\n\n  // Hex (default)\n  return rgbToHsb(hexToRgb(s));\n}\n\nfunction hsbToString(hsb: BColorHsb, fmt: `${BColorPickerFormat}`): string {\n  const rgb = hsbToRgb(hsb);\n  switch (fmt) {\n    case BColorPickerFormat.Hex:\n      return rgbToHex(rgb);\n    case BColorPickerFormat.Rgb:\n      return rgb.a < 1\n        ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${roundTo(rgb.a, 2)})`\n        : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n    case BColorPickerFormat.Hsl: {\n      const hsl = rgbToHsl(rgb);\n      return hsl.a < 1\n        ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${roundTo(hsl.a, 2)})`\n        : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;\n    }\n    case BColorPickerFormat.Hsb:\n      return hsb.a < 1\n        ? `hsb(${Math.round(hsb.h)}, ${Math.round(hsb.s)}%, ${Math.round(hsb.b)}%, ${roundTo(hsb.a, 2)})`\n        : `hsb(${Math.round(hsb.h)}, ${Math.round(hsb.s)}%, ${Math.round(hsb.b)}%)`;\n    default:\n      return rgbToHex(rgb);\n  }\n}\n\nfunction roundTo(n: number, decimals: number): number {\n  const factor = 10 ** decimals;\n  return Math.round(n * factor) / factor;\n}\n\nfunction hsbToCssColor(hsb: BColorHsb): string {\n  const rgb = hsbToRgb(hsb);\n  return rgb.a < 1\n    ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${roundTo(rgb.a, 2)})`\n    : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n}\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst panelId = useId();\n\nconst initialColor = parseColor(__props.modelValue ?? __props.defaultValue);\nconst internalHsb = ref<BColorHsb>({ ...initialColor });\nconst internalFormat = ref<`${BColorPickerFormat}`>(__props.format ?? __props.defaultFormat);\nconst internalOpen = ref(false);\nconst cleared = ref(false);\nconst hasBeenOpened = ref(false);\n\nconst isOpen = computed(() => (__props.open !== undefined ? __props.open : internalOpen.value));\nconst shouldRender = computed(() => {\n  if (__props.destroyOnHidden) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nconst activeFormat = computed(() => __props.format ?? internalFormat.value);\n\nconst colorString = computed(() => hsbToString(internalHsb.value, activeFormat.value));\nconst cssColor = computed(() => hsbToCssColor(internalHsb.value));\n\nconst displayText = computed(() => {\n  if (!__props.showText) return '';\n  if (typeof __props.showText === 'function') return __props.showText(colorString.value);\n  return colorString.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\nwatch(\n  () => __props.modelValue,\n  (val) => {\n    if (val !== undefined) {\n      const parsed = parseColor(val);\n      internalHsb.value = parsed;\n      cleared.value = false;\n    }\n  },\n);\n\nwatch(\n  () => __props.format,\n  (val) => {\n    if (val) internalFormat.value = val;\n  },\n);\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nconst triggerRef = ref<HTMLDivElement | null>(null);\nconst panelRef = ref<HTMLDivElement | null>(null);\n\nlet hoverTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction setOpen(val: boolean) {\n  if (__props.disabled) return;\n  if (__props.open !== undefined) {\n    emit('update:open', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\nfunction toggleOpen() {\n  setOpen(!isOpen.value);\n}\n\nfunction onTriggerClick() {\n  if (__props.trigger === BColorPickerTrigger.Click) toggleOpen();\n}\n\nfunction onTriggerMouseEnter() {\n  if (__props.trigger === BColorPickerTrigger.Hover) {\n    if (hoverTimer) clearTimeout(hoverTimer);\n    setOpen(true);\n  }\n}\n\nfunction onTriggerMouseLeave() {\n  if (__props.trigger === BColorPickerTrigger.Hover) {\n    hoverTimer = setTimeout(() => setOpen(false), 150);\n  }\n}\n\nfunction onPanelMouseEnter() {\n  if (__props.trigger === BColorPickerTrigger.Hover && hoverTimer) {\n    clearTimeout(hoverTimer);\n  }\n}\n\nfunction onPanelMouseLeave() {\n  if (__props.trigger === BColorPickerTrigger.Hover) {\n    hoverTimer = setTimeout(() => setOpen(false), 150);\n  }\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    setOpen(false);\n    triggerRef.value?.focus();\n  }\n  if ((event.key === 'Enter' || event.key === ' ') && !isOpen.value) {\n    event.preventDefault();\n    setOpen(true);\n  }\n}\n\n// Close on outside click\nfunction onDocumentClick(event: MouseEvent) {\n  if (!isOpen.value) return;\n  const target = event.target as Node;\n  if (triggerRef.value?.contains(target) || panelRef.value?.contains(target)) {\n    return;\n  }\n  setOpen(false);\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', onDocumentClick);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('mousedown', onDocumentClick);\n  if (hoverTimer) clearTimeout(hoverTimer);\n});\n\n// Sync controlled open → popover\nwatch(\n  () => __props.open,\n  (val) => {\n    if (val === undefined) return;\n    internalOpen.value = val;\n  },\n);\n\n// Focus management\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    nextTick(() => {\n      panelRef.value?.focus();\n    });\n  } else {\n    nextTick(() => previouslyFocusedElement?.focus());\n  }\n});\n\n// ─────────────────────────────────────────────\n// Saturation panel interaction\n// ─────────────────────────────────────────────\nconst saturationRef = ref<HTMLDivElement | null>(null);\nlet isDraggingSat = false;\n\nfunction updateSaturationFromEvent(event: MouseEvent | TouchEvent) {\n  if (!saturationRef.value) return;\n  const rect = saturationRef.value.getBoundingClientRect();\n  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;\n  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;\n  const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n  const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));\n  internalHsb.value = {\n    ...internalHsb.value,\n    s: x * 100,\n    b: (1 - y) * 100,\n  };\n  emitChange();\n}\n\nfunction onSaturationMouseDown(event: MouseEvent) {\n  event.preventDefault();\n  isDraggingSat = true;\n  updateSaturationFromEvent(event);\n  document.addEventListener('mousemove', onSaturationMouseMove);\n  document.addEventListener('mouseup', onSaturationMouseUp);\n}\n\nfunction onSaturationMouseMove(event: MouseEvent) {\n  if (!isDraggingSat) return;\n  updateSaturationFromEvent(event);\n}\n\nfunction onSaturationMouseUp() {\n  isDraggingSat = false;\n  document.removeEventListener('mousemove', onSaturationMouseMove);\n  document.removeEventListener('mouseup', onSaturationMouseUp);\n  emitChangeComplete();\n}\n\nfunction onSaturationTouchStart(event: TouchEvent) {\n  event.preventDefault();\n  isDraggingSat = true;\n  updateSaturationFromEvent(event);\n  document.addEventListener('touchmove', onSaturationTouchMove);\n  document.addEventListener('touchend', onSaturationTouchEnd);\n}\n\nfunction onSaturationTouchMove(event: TouchEvent) {\n  if (!isDraggingSat) return;\n  updateSaturationFromEvent(event);\n}\n\nfunction onSaturationTouchEnd() {\n  isDraggingSat = false;\n  document.removeEventListener('touchmove', onSaturationTouchMove);\n  document.removeEventListener('touchend', onSaturationTouchEnd);\n  emitChangeComplete();\n}\n\n// ─────────────────────────────────────────────\n// Hue slider interaction\n// ─────────────────────────────────────────────\nconst hueRef = ref<HTMLDivElement | null>(null);\nlet isDraggingHue = false;\n\nfunction updateHueFromEvent(event: MouseEvent | TouchEvent) {\n  if (!hueRef.value) return;\n  const rect = hueRef.value.getBoundingClientRect();\n  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;\n  const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n  internalHsb.value = { ...internalHsb.value, h: x * 360 };\n  emitChange();\n}\n\nfunction onHueMouseDown(event: MouseEvent) {\n  event.preventDefault();\n  isDraggingHue = true;\n  updateHueFromEvent(event);\n  document.addEventListener('mousemove', onHueMouseMove);\n  document.addEventListener('mouseup', onHueMouseUp);\n}\n\nfunction onHueMouseMove(event: MouseEvent) {\n  if (!isDraggingHue) return;\n  updateHueFromEvent(event);\n}\n\nfunction onHueMouseUp() {\n  isDraggingHue = false;\n  document.removeEventListener('mousemove', onHueMouseMove);\n  document.removeEventListener('mouseup', onHueMouseUp);\n  emitChangeComplete();\n}\n\n// ─────────────────────────────────────────────\n// Alpha slider interaction\n// ─────────────────────────────────────────────\nconst alphaRef = ref<HTMLDivElement | null>(null);\nlet isDraggingAlpha = false;\n\nfunction updateAlphaFromEvent(event: MouseEvent | TouchEvent) {\n  if (!alphaRef.value) return;\n  const rect = alphaRef.value.getBoundingClientRect();\n  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;\n  const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n  internalHsb.value = { ...internalHsb.value, a: roundTo(x, 2) };\n  emitChange();\n}\n\nfunction onAlphaMouseDown(event: MouseEvent) {\n  event.preventDefault();\n  isDraggingAlpha = true;\n  updateAlphaFromEvent(event);\n  document.addEventListener('mousemove', onAlphaMouseMove);\n  document.addEventListener('mouseup', onAlphaMouseUp);\n}\n\nfunction onAlphaMouseMove(event: MouseEvent) {\n  if (!isDraggingAlpha) return;\n  updateAlphaFromEvent(event);\n}\n\nfunction onAlphaMouseUp() {\n  isDraggingAlpha = false;\n  document.removeEventListener('mousemove', onAlphaMouseMove);\n  document.removeEventListener('mouseup', onAlphaMouseUp);\n  emitChangeComplete();\n}\n\n// ─────────────────────────────────────────────\n// Format switching\n// ─────────────────────────────────────────────\nconst formatOrder: `${BColorPickerFormat}`[] = [\n  BColorPickerFormat.Hex,\n  BColorPickerFormat.Hsb,\n  BColorPickerFormat.Rgb,\n  BColorPickerFormat.Hsl,\n];\n\nfunction cycleFormat() {\n  if (__props.disabledFormat) return;\n  const idx = formatOrder.indexOf(activeFormat.value);\n  const next = formatOrder[(idx + 1) % formatOrder.length];\n  if (__props.format === undefined) {\n    internalFormat.value = next;\n  }\n  emit('formatChange', next);\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nconst inputValue = computed(() => {\n  switch (activeFormat.value) {\n    case BColorPickerFormat.Hex:\n      return rgbToHex(hsbToRgb(internalHsb.value)).replace('#', '');\n    case BColorPickerFormat.Rgb: {\n      const rgb = hsbToRgb(internalHsb.value);\n      return `${rgb.r}, ${rgb.g}, ${rgb.b}`;\n    }\n    case BColorPickerFormat.Hsl: {\n      const hsl = rgbToHsl(hsbToRgb(internalHsb.value));\n      return `${hsl.h}, ${hsl.s}%, ${hsl.l}%`;\n    }\n    case BColorPickerFormat.Hsb:\n      return `${Math.round(internalHsb.value.h)}, ${Math.round(internalHsb.value.s)}%, ${Math.round(internalHsb.value.b)}%`;\n    default:\n      return '';\n  }\n});\n\nconst alphaPercent = computed(() => Math.round(internalHsb.value.a * 100));\n\nfunction onInputChange(event: Event) {\n  const val = (event.target as HTMLInputElement).value.trim();\n  try {\n    let parsed: BColorHsb;\n    switch (activeFormat.value) {\n      case BColorPickerFormat.Hex:\n        parsed = parseColor('#' + val);\n        break;\n      case BColorPickerFormat.Rgb: {\n        const parts = val.split(',').map((s) => parseInt(s.trim()));\n        if (parts.length >= 3) {\n          parsed = rgbToHsb({ r: parts[0], g: parts[1], b: parts[2], a: internalHsb.value.a });\n        } else return;\n        break;\n      }\n      case BColorPickerFormat.Hsl: {\n        const parts = val.split(',').map((s) => parseInt(s.trim()));\n        if (parts.length >= 3) {\n          parsed = rgbToHsb(\n            hslToRgb({ h: parts[0], s: parts[1], l: parts[2], a: internalHsb.value.a }),\n          );\n        } else return;\n        break;\n      }\n      case BColorPickerFormat.Hsb: {\n        const parts = val.split(',').map((s) => parseInt(s.trim()));\n        if (parts.length >= 3) {\n          parsed = { h: parts[0], s: parts[1], b: parts[2], a: internalHsb.value.a };\n        } else return;\n        break;\n      }\n      default:\n        return;\n    }\n    internalHsb.value = parsed;\n    emitChange();\n    emitChangeComplete();\n  } catch {\n    // Invalid input, ignore\n  }\n}\n\nfunction onAlphaInputChange(event: Event) {\n  const val = parseInt((event.target as HTMLInputElement).value);\n  if (!isNaN(val)) {\n    internalHsb.value = { ...internalHsb.value, a: Math.max(0, Math.min(100, val)) / 100 };\n    emitChange();\n    emitChangeComplete();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Preset selection\n// ─────────────────────────────────────────────\nfunction selectPreset(color: string) {\n  internalHsb.value = parseColor(color);\n  cleared.value = false;\n  emitChange();\n  emitChangeComplete();\n}\n\n// ─────────────────────────────────────────────\n// Clear\n// ─────────────────────────────────────────────\nfunction onClear() {\n  cleared.value = true;\n  emit('clear');\n}\n\n// ─────────────────────────────────────────────\n// Emit helpers\n// ─────────────────────────────────────────────\nfunction emitChange() {\n  cleared.value = false;\n  const str = hsbToString(internalHsb.value, activeFormat.value);\n  const css = hsbToCssColor(internalHsb.value);\n  emit('update:modelValue', str);\n  emit('change', str, css);\n}\n\nfunction emitChangeComplete() {\n  const str = hsbToString(internalHsb.value, activeFormat.value);\n  emit('changeComplete', str);\n}\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-color-picker-anchor-${componentUID.value}`);\n\nconst saturationStyle = computed(() => ({\n  backgroundColor: `hsl(${internalHsb.value.h}, 100%, 50%)`,\n}));\n\nconst saturationHandleStyle = computed(() => ({\n  left: `${internalHsb.value.s}%`,\n  top: `${100 - internalHsb.value.b}%`,\n}));\n\nconst hueHandleStyle = computed(() => ({\n  left: `${(internalHsb.value.h / 360) * 100}%`,\n}));\n\nconst alphaHandleStyle = computed(() => ({\n  left: `${internalHsb.value.a * 100}%`,\n}));\n\nconst alphaGradient = computed(() => {\n  const rgb = hsbToRgb({ ...internalHsb.value, a: 1 });\n  return `linear-gradient(to right, rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgb(${rgb.r}, ${rgb.g}, ${rgb.b}))`;\n});\n\nconst sizeClass = computed(() => {\n  switch (__props.size) {\n    case BColorPickerSize.Small:\n      return 'b-color-picker--sm';\n    case BColorPickerSize.Large:\n      return 'b-color-picker--lg';\n    default:\n      return 'b-color-picker--md';\n  }\n});\n\n// ─────────────────────────────────────────────\n// Panel keyboard nav\n// ─────────────────────────────────────────────\nfunction onPanelKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault();\n    setOpen(false);\n    triggerRef.value?.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\n__expose({ open: () => setOpen(true), close: () => setOpen(false) });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    class: _normalizeClass([\"b-color-picker\", [sizeClass.value, { 'b-color-picker--disabled': __props.disabled }]])\n  }, [\n    _createElementVNode(\"div\", {\n      ref_key: \"triggerRef\",\n      ref: triggerRef,\n      class: \"b-color-picker__trigger\",\n      style: _normalizeStyle({ anchorName: anchorName.value }),\n      role: \"button\",\n      tabindex: __props.disabled ? -1 : 0,\n      \"aria-expanded\": isOpen.value,\n      \"aria-controls\": isOpen.value ? _unref(panelId) : undefined,\n      \"aria-disabled\": __props.disabled,\n      \"aria-label\": `Color picker: ${colorString.value}`,\n      \"aria-haspopup\": \"dialog\",\n      onClick: onTriggerClick,\n      onMouseenter: onTriggerMouseEnter,\n      onMouseleave: onTriggerMouseLeave,\n      onKeydown: onKeydown\n    }, [\n      _renderSlot(_ctx.$slots, \"default\", {}, () => [\n        _createElementVNode(\"div\", _hoisted_2, [\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-color-picker__swatch\", { 'b-color-picker__swatch--cleared': cleared.value && __props.allowClear }]),\n            style: _normalizeStyle({ backgroundColor: cleared.value ? 'transparent' : cssColor.value })\n          }, null, 6)\n        ]),\n        (__props.showText)\n          ? (_openBlock(), _createElementBlock(\"span\", _hoisted_3, _toDisplayString(displayText.value), 1))\n          : _createCommentVNode(\"\", true)\n      ])\n    ], 44, _hoisted_1),\n    (shouldRender.value)\n      ? (_openBlock(), _createElementBlock(\"div\", {\n          key: 0,\n          ref_key: \"panelRef\",\n          ref: panelRef,\n          id: _unref(panelId),\n          class: _normalizeClass([\"b-color-picker__panel\", [\n        `b-color-picker__panel--${__props.placement}`,\n        { 'b-color-picker__panel--open': isOpen.value, 'b-color-picker__panel--no-arrow': !__props.arrow },\n      ]]),\n          style: _normalizeStyle({ positionAnchor: anchorName.value }),\n          role: \"dialog\",\n          \"aria-label\": 'Color picker',\n          tabindex: \"-1\",\n          onMouseenter: onPanelMouseEnter,\n          onMouseleave: onPanelMouseLeave,\n          onKeydown: onPanelKeydown\n        }, [\n          (__props.arrow)\n            ? (_openBlock(), _createElementBlock(\"div\", _hoisted_5))\n            : _createCommentVNode(\"\", true),\n          _createElementVNode(\"div\", {\n            ref_key: \"saturationRef\",\n            ref: saturationRef,\n            class: \"b-color-picker__saturation\",\n            style: _normalizeStyle(saturationStyle.value),\n            role: \"slider\",\n            \"aria-label\": \"Color saturation and brightness\",\n            \"aria-valuetext\": `Saturation ${Math.round(internalHsb.value.s)}%, Brightness ${Math.round(internalHsb.value.b)}%`,\n            tabindex: \"0\",\n            onMousedown: onSaturationMouseDown,\n            onTouchstartPassive: onSaturationTouchStart\n          }, [\n            _cache[0] || (_cache[0] = _createElementVNode(\"div\", { class: \"b-color-picker__saturation-white\" }, null, -1)),\n            _cache[1] || (_cache[1] = _createElementVNode(\"div\", { class: \"b-color-picker__saturation-black\" }, null, -1)),\n            _createElementVNode(\"div\", {\n              class: \"b-color-picker__saturation-handle\",\n              style: _normalizeStyle(saturationHandleStyle.value)\n            }, null, 4)\n          ], 44, _hoisted_6),\n          _createElementVNode(\"div\", _hoisted_7, [\n            _createElementVNode(\"div\", _hoisted_8, [\n              _createElementVNode(\"div\", {\n                class: \"b-color-picker__preview-color\",\n                style: _normalizeStyle({ backgroundColor: cssColor.value })\n              }, null, 4)\n            ]),\n            _createElementVNode(\"div\", _hoisted_9, [\n              _createElementVNode(\"div\", {\n                ref_key: \"hueRef\",\n                ref: hueRef,\n                class: \"b-color-picker__hue\",\n                role: \"slider\",\n                \"aria-label\": \"Hue\",\n                \"aria-valuenow\": Math.round(internalHsb.value.h),\n                \"aria-valuemin\": \"0\",\n                \"aria-valuemax\": \"360\",\n                tabindex: \"0\",\n                onMousedown: onHueMouseDown\n              }, [\n                _createElementVNode(\"div\", {\n                  class: \"b-color-picker__hue-handle\",\n                  style: _normalizeStyle(hueHandleStyle.value)\n                }, null, 4)\n              ], 40, _hoisted_10),\n              (!__props.disabledAlpha)\n                ? (_openBlock(), _createElementBlock(\"div\", {\n                    key: 0,\n                    ref_key: \"alphaRef\",\n                    ref: alphaRef,\n                    class: \"b-color-picker__alpha\",\n                    style: _normalizeStyle({ '--b-color-picker-alpha-gradient': alphaGradient.value }),\n                    role: \"slider\",\n                    \"aria-label\": \"Opacity\",\n                    \"aria-valuenow\": alphaPercent.value,\n                    \"aria-valuemin\": \"0\",\n                    \"aria-valuemax\": \"100\",\n                    tabindex: \"0\",\n                    onMousedown: onAlphaMouseDown\n                  }, [\n                    _createElementVNode(\"div\", {\n                      class: \"b-color-picker__alpha-handle\",\n                      style: _normalizeStyle(alphaHandleStyle.value)\n                    }, null, 4)\n                  ], 44, _hoisted_11))\n                : _createCommentVNode(\"\", true)\n            ])\n          ]),\n          _createElementVNode(\"div\", _hoisted_12, [\n            (!__props.disabledFormat)\n              ? (_openBlock(), _createElementBlock(\"button\", {\n                  key: 0,\n                  class: \"b-color-picker__format-btn\",\n                  type: \"button\",\n                  \"aria-label\": \"Switch color format\",\n                  onClick: cycleFormat\n                }, _toDisplayString(activeFormat.value.toUpperCase()), 1))\n              : (_openBlock(), _createElementBlock(\"span\", _hoisted_13, _toDisplayString(activeFormat.value.toUpperCase()), 1)),\n            _createElementVNode(\"input\", {\n              class: \"b-color-picker__input\",\n              type: \"text\",\n              value: inputValue.value,\n              \"aria-label\": \"Color value\",\n              onChange: onInputChange\n            }, null, 40, _hoisted_14),\n            (!__props.disabledAlpha)\n              ? (_openBlock(), _createElementBlock(\"input\", {\n                  key: 2,\n                  class: \"b-color-picker__alpha-input\",\n                  type: \"text\",\n                  value: `${alphaPercent.value}%`,\n                  \"aria-label\": \"Alpha percentage\",\n                  onChange: onAlphaInputChange\n                }, null, 40, _hoisted_15))\n              : _createCommentVNode(\"\", true)\n          ]),\n          (__props.presets && __props.presets.length)\n            ? (_openBlock(), _createElementBlock(\"div\", _hoisted_16, [\n                (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(__props.presets, (preset) => {\n                  return (_openBlock(), _createElementBlock(\"div\", {\n                    key: preset.label,\n                    class: \"b-color-picker__preset-group\"\n                  }, [\n                    _createElementVNode(\"div\", _hoisted_17, _toDisplayString(preset.label), 1),\n                    _createElementVNode(\"div\", _hoisted_18, [\n                      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(preset.colors, (color) => {\n                        return (_openBlock(), _createElementBlock(\"button\", {\n                          key: color,\n                          type: \"button\",\n                          class: \"b-color-picker__preset-color\",\n                          style: _normalizeStyle({ backgroundColor: color }),\n                          \"aria-label\": `Select color ${color}`,\n                          onClick: ($event: any) => (selectPreset(color))\n                        }, null, 12, _hoisted_19))\n                      }), 128))\n                    ])\n                  ]))\n                }), 128))\n              ]))\n            : _createCommentVNode(\"\", true),\n          (__props.allowClear)\n            ? (_openBlock(), _createElementBlock(\"div\", _hoisted_20, [\n                _createElementVNode(\"button\", {\n                  type: \"button\",\n                  class: \"b-color-picker__clear-btn\",\n                  \"aria-label\": \"Clear color\",\n                  onClick: onClear\n                }, \" Clear \")\n              ]))\n            : _createCommentVNode(\"\", true)\n        ], 46, _hoisted_4))\n      : _createCommentVNode(\"\", true)\n  ], 2))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system57.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":""}

package/dist/design-system58.js

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

package/dist/design-system58.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system58.js","names":[],"sources":["../src/components/BCollapse/types.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue';\n\n// ─────────────────────────────────────────────\n// Enums & literals\n// ─────────────────────────────────────────────\nexport type BCollapseCollapsible = 'header' | 'icon' | 'disabled';\nexport type BCollapseExpandIconPosition = 'start' | 'end';\nexport type BCollapseSize = 'default' | 'small';\n\n// ─────────────────────────────────────────────\n// Group → Panel injection\n// ─────────────────────────────────────────────\nexport interface BCollapseGroupContext {\n  /** Check whether a panel key is currently active. */\n  isActive: (key: string | number) => boolean;\n  /** Toggle a panel open/closed. */\n  toggle: (key: string | number) => void;\n  /** Group-level collapsible override. */\n  collapsible: ComputedRef<BCollapseCollapsible | undefined>;\n  /** Group-level expand icon position. */\n  expandIconPosition: ComputedRef<BCollapseExpandIconPosition>;\n  /** Whether the group is borderless. */\n  bordered: ComputedRef<boolean>;\n  /** Whether the group is in ghost mode. */\n  ghost: ComputedRef<boolean>;\n  /** Size of the collapse group. */\n  size: ComputedRef<BCollapseSize>;\n}\n\nexport const BCollapseGroupContextKey: InjectionKey<BCollapseGroupContext> =\n  Symbol('BCollapseGroupContext');\n"],"mappings":";AA6BA,IAAa,IACX,OAAO,wBAAwB"}

package/dist/design-system59.js

@@ -1,8 +1,67 @@
-import e from "./design-system57.js";
-/* empty css                */
-//#region src/components/BColorPicker/BColorPicker.vue
-var t = e;
+import { BCollapseGroupContextKey as e } from "./design-system58.js";
+import { computed as t, createElementBlock as n, defineComponent as r, normalizeClass as i, openBlock as a, provide as o, ref as s, renderSlot as c, watch as l } from "vue";
+//#region src/components/BCollapse/BCollapse.vue?vue&type=script&setup=true&lang.ts
+var u = /* @__PURE__ */ r({
+	__name: "BCollapse",
+	props: {
+		modelValue: { default: void 0 },
+		defaultActiveKey: { default: () => [] },
+		accordion: {
+			type: Boolean,
+			default: !1
+		},
+		bordered: {
+			type: Boolean,
+			default: !0
+		},
+		collapsible: { default: void 0 },
+		destroyInactivePanel: {
+			type: Boolean,
+			default: !1
+		},
+		expandIconPosition: { default: "start" },
+		ghost: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "default" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(r, { emit: u }) {
+		let d = r, f = u, p = t(() => d.modelValue !== void 0), m = s([...d.defaultActiveKey]), h = t(() => p.value ? d.modelValue ?? [] : m.value);
+		function g(e) {
+			p.value || (m.value = e), f("update:modelValue", e), f("change", e);
+		}
+		l(() => d.modelValue, (e) => {
+			e !== void 0 && (m.value = [...e]);
+		});
+		function _(e) {
+			return h.value.includes(e);
+		}
+		function v(e) {
+			let t = [...h.value], n = t.indexOf(e);
+			d.accordion ? g(n >= 0 ? [] : [e]) : (n >= 0 ? t.splice(n, 1) : t.push(e), g(t));
+		}
+		return o(e, {
+			isActive: _,
+			toggle: v,
+			collapsible: t(() => d.collapsible),
+			expandIconPosition: t(() => d.expandIconPosition),
+			bordered: t(() => d.bordered),
+			ghost: t(() => d.ghost),
+			size: t(() => d.size)
+		}), (e, t) => (a(), n("div", {
+			class: i(["b-collapse", {
+				"b-collapse--bordered": r.bordered,
+				"b-collapse--borderless": !r.bordered,
+				"b-collapse--ghost": r.ghost,
+				"b-collapse--small": r.size === "small"
+			}]),
+			role: "presentation"
+		}, [c(e.$slots, "default")], 2));
+	}
+});
 //#endregion
-export { t as default };
+export { u as default };
 
 //# sourceMappingURL=design-system59.js.map

package/dist/design-system59.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system59.js","names":[],"sources":["../src/components/BColorPicker/BColorPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\nimport {\n  BColorPickerFormat,\n  BColorPickerPlacement,\n  BColorPickerSize,\n  BColorPickerTrigger,\n  type BColorHsb,\n  type BColorHsl,\n  type BColorPickerPreset,\n  type BColorRgb,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  modelValue = undefined,\n  defaultValue = '#1677ff',\n  disabled = false,\n  open = undefined,\n  trigger = BColorPickerTrigger.Click,\n  size = BColorPickerSize.Medium,\n  placement = BColorPickerPlacement.BottomLeft,\n  format = undefined,\n  defaultFormat = BColorPickerFormat.Hex,\n  disabledAlpha = false,\n  disabledFormat = false,\n  showText = false,\n  presets = undefined,\n  allowClear = false,\n  destroyOnHidden = false,\n  arrow = true,\n} = defineProps<{\n  /** Current color value (v-model). Accepts hex, rgb, hsl strings. */\n  modelValue?: string;\n  /** Default color when uncontrolled. */\n  defaultValue?: string;\n  /** Whether the color picker is disabled. */\n  disabled?: boolean;\n  /** Controlled open state of the popup (v-model:open). */\n  open?: boolean;\n  /** How the popup is triggered. */\n  trigger?: `${BColorPickerTrigger}`;\n  /** Size of the trigger button. */\n  size?: `${BColorPickerSize}`;\n  /** Placement of the popup relative to the trigger. */\n  placement?: `${BColorPickerPlacement}`;\n  /** Controlled color format. */\n  format?: `${BColorPickerFormat}`;\n  /** Default color format when uncontrolled. */\n  defaultFormat?: `${BColorPickerFormat}`;\n  /** Whether to disable the alpha slider. */\n  disabledAlpha?: boolean;\n  /** Whether to disable format switching. */\n  disabledFormat?: boolean;\n  /** Whether to show the color text value next to the swatch. */\n  showText?: boolean | ((color: string) => string);\n  /** Preset color groups. */\n  presets?: BColorPickerPreset[];\n  /** Whether to allow clearing the color. */\n  allowClear?: boolean;\n  /** Destroy popup DOM when closed. */\n  destroyOnHidden?: boolean;\n  /** Whether the popup has an arrow. */\n  arrow?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string): void;\n  (e: 'update:open', value: boolean): void;\n  (e: 'change', value: string, css: string): void;\n  (e: 'changeComplete', value: string): void;\n  (e: 'formatChange', format: `${BColorPickerFormat}`): void;\n  (e: 'clear'): void;\n  (e: 'openChange', open: boolean): void;\n}>();\n\ndefineSlots<{\n  /** Custom trigger element. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Color conversion utilities\n// ─────────────────────────────────────────────\n\nfunction hexToRgb(hex: string): BColorRgb {\n  let h = hex.replace('#', '');\n  let a = 1;\n  if (h.length === 4) {\n    h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];\n  } else if (h.length === 8) {\n    a = parseInt(h.slice(6, 8), 16) / 255;\n    h = h.slice(0, 6);\n  }\n  const num = parseInt(h, 16);\n  return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255, a };\n}\n\nfunction rgbToHex(rgb: BColorRgb): string {\n  const toHex = (n: number) =>\n    Math.round(Math.max(0, Math.min(255, n)))\n      .toString(16)\n      .padStart(2, '0');\n  const hex = `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;\n  if (rgb.a < 1) {\n    return hex + toHex(Math.round(rgb.a * 255));\n  }\n  return hex;\n}\n\nfunction rgbToHsb(rgb: BColorRgb): BColorHsb {\n  const r = rgb.r / 255;\n  const g = rgb.g / 255;\n  const b = rgb.b / 255;\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const d = max - min;\n  let h = 0;\n  const s = max === 0 ? 0 : d / max;\n  const v = max;\n  if (d !== 0) {\n    switch (max) {\n      case r:\n        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n        break;\n      case g:\n        h = ((b - r) / d + 2) / 6;\n        break;\n      case b:\n        h = ((r - g) / d + 4) / 6;\n        break;\n    }\n  }\n  return { h: h * 360, s: s * 100, b: v * 100, a: rgb.a };\n}\n\nfunction hsbToRgb(hsb: BColorHsb): BColorRgb {\n  const h = hsb.h / 360;\n  const s = hsb.s / 100;\n  const v = hsb.b / 100;\n  let r = 0,\n    g = 0,\n    b = 0;\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  switch (i % 6) {\n    case 0:\n      r = v;\n      g = t;\n      b = p;\n      break;\n    case 1:\n      r = q;\n      g = v;\n      b = p;\n      break;\n    case 2:\n      r = p;\n      g = v;\n      b = t;\n      break;\n    case 3:\n      r = p;\n      g = q;\n      b = v;\n      break;\n    case 4:\n      r = t;\n      g = p;\n      b = v;\n      break;\n    case 5:\n      r = v;\n      g = p;\n      b = q;\n      break;\n  }\n  return {\n    r: Math.round(r * 255),\n    g: Math.round(g * 255),\n    b: Math.round(b * 255),\n    a: hsb.a,\n  };\n}\n\nfunction rgbToHsl(rgb: BColorRgb): BColorHsl {\n  const r = rgb.r / 255;\n  const g = rgb.g / 255;\n  const b = rgb.b / 255;\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  let h = 0;\n  let s = 0;\n  const l = (max + min) / 2;\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    switch (max) {\n      case r:\n        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n        break;\n      case g:\n        h = ((b - r) / d + 2) / 6;\n        break;\n      case b:\n        h = ((r - g) / d + 4) / 6;\n        break;\n    }\n  }\n  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100), a: rgb.a };\n}\n\nfunction hslToRgb(hsl: BColorHsl): BColorRgb {\n  const h = hsl.h / 360;\n  const s = hsl.s / 100;\n  const l = hsl.l / 100;\n  let r: number, g: number, b: number;\n  if (s === 0) {\n    r = g = b = l;\n  } else {\n    const hue2rgb = (p: number, q: number, t: number) => {\n      if (t < 0) t += 1;\n      if (t > 1) t -= 1;\n      if (t < 1 / 6) return p + (q - p) * 6 * t;\n      if (t < 1 / 2) return q;\n      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n      return p;\n    };\n    const q2 = l < 0.5 ? l * (1 + s) : l + s - l * s;\n    const p2 = 2 * l - q2;\n    r = hue2rgb(p2, q2, h + 1 / 3);\n    g = hue2rgb(p2, q2, h);\n    b = hue2rgb(p2, q2, h - 1 / 3);\n  }\n  return {\n    r: Math.round(r * 255),\n    g: Math.round(g * 255),\n    b: Math.round(b * 255),\n    a: hsl.a,\n  };\n}\n\nfunction parseColor(input: string): BColorHsb {\n  const s = input.trim().toLowerCase();\n\n  // HSL string\n  const hslMatch = s.match(/hsla?\\(\\s*(\\d+)\\s*,\\s*(\\d+)%?\\s*,\\s*(\\d+)%?\\s*(?:,\\s*([\\d.]+))?\\s*\\)/);\n  if (hslMatch) {\n    const hsl: BColorHsl = {\n      h: parseInt(hslMatch[1]),\n      s: parseInt(hslMatch[2]),\n      l: parseInt(hslMatch[3]),\n      a: hslMatch[4] !== undefined ? parseFloat(hslMatch[4]) : 1,\n    };\n    return rgbToHsb(hslToRgb(hsl));\n  }\n\n  // RGB string\n  const rgbMatch = s.match(/rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*([\\d.]+))?\\s*\\)/);\n  if (rgbMatch) {\n    const rgb: BColorRgb = {\n      r: parseInt(rgbMatch[1]),\n      g: parseInt(rgbMatch[2]),\n      b: parseInt(rgbMatch[3]),\n      a: rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : 1,\n    };\n    return rgbToHsb(rgb);\n  }\n\n  // HSB string\n  const hsbMatch = s.match(/hsb\\(\\s*(\\d+)\\s*,\\s*(\\d+)%?\\s*,\\s*(\\d+)%?\\s*(?:,\\s*([\\d.]+))?\\s*\\)/);\n  if (hsbMatch) {\n    return {\n      h: parseInt(hsbMatch[1]),\n      s: parseInt(hsbMatch[2]),\n      b: parseInt(hsbMatch[3]),\n      a: hsbMatch[4] !== undefined ? parseFloat(hsbMatch[4]) : 1,\n    };\n  }\n\n  // Hex (default)\n  return rgbToHsb(hexToRgb(s));\n}\n\nfunction hsbToString(hsb: BColorHsb, fmt: `${BColorPickerFormat}`): string {\n  const rgb = hsbToRgb(hsb);\n  switch (fmt) {\n    case BColorPickerFormat.Hex:\n      return rgbToHex(rgb);\n    case BColorPickerFormat.Rgb:\n      return rgb.a < 1\n        ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${roundTo(rgb.a, 2)})`\n        : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n    case BColorPickerFormat.Hsl: {\n      const hsl = rgbToHsl(rgb);\n      return hsl.a < 1\n        ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${roundTo(hsl.a, 2)})`\n        : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;\n    }\n    case BColorPickerFormat.Hsb:\n      return hsb.a < 1\n        ? `hsb(${Math.round(hsb.h)}, ${Math.round(hsb.s)}%, ${Math.round(hsb.b)}%, ${roundTo(hsb.a, 2)})`\n        : `hsb(${Math.round(hsb.h)}, ${Math.round(hsb.s)}%, ${Math.round(hsb.b)}%)`;\n    default:\n      return rgbToHex(rgb);\n  }\n}\n\nfunction roundTo(n: number, decimals: number): number {\n  const factor = 10 ** decimals;\n  return Math.round(n * factor) / factor;\n}\n\nfunction hsbToCssColor(hsb: BColorHsb): string {\n  const rgb = hsbToRgb(hsb);\n  return rgb.a < 1\n    ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${roundTo(rgb.a, 2)})`\n    : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n}\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst panelId = useId();\n\nconst initialColor = parseColor(modelValue ?? defaultValue);\nconst internalHsb = ref<BColorHsb>({ ...initialColor });\nconst internalFormat = ref<`${BColorPickerFormat}`>(format ?? defaultFormat);\nconst internalOpen = ref(false);\nconst cleared = ref(false);\nconst hasBeenOpened = ref(false);\n\nconst isOpen = computed(() => (open !== undefined ? open : internalOpen.value));\nconst shouldRender = computed(() => {\n  if (destroyOnHidden) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nconst activeFormat = computed(() => format ?? internalFormat.value);\n\nconst colorString = computed(() => hsbToString(internalHsb.value, activeFormat.value));\nconst cssColor = computed(() => hsbToCssColor(internalHsb.value));\n\nconst displayText = computed(() => {\n  if (!showText) return '';\n  if (typeof showText === 'function') return showText(colorString.value);\n  return colorString.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val !== undefined) {\n      const parsed = parseColor(val);\n      internalHsb.value = parsed;\n      cleared.value = false;\n    }\n  },\n);\n\nwatch(\n  () => format,\n  (val) => {\n    if (val) internalFormat.value = val;\n  },\n);\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nconst triggerRef = ref<HTMLDivElement | null>(null);\nconst panelRef = ref<HTMLDivElement | null>(null);\n\nlet hoverTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction setOpen(val: boolean) {\n  if (disabled) return;\n  if (open !== undefined) {\n    emit('update:open', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\nfunction toggleOpen() {\n  setOpen(!isOpen.value);\n}\n\nfunction onTriggerClick() {\n  if (trigger === BColorPickerTrigger.Click) toggleOpen();\n}\n\nfunction onTriggerMouseEnter() {\n  if (trigger === BColorPickerTrigger.Hover) {\n    if (hoverTimer) clearTimeout(hoverTimer);\n    setOpen(true);\n  }\n}\n\nfunction onTriggerMouseLeave() {\n  if (trigger === BColorPickerTrigger.Hover) {\n    hoverTimer = setTimeout(() => setOpen(false), 150);\n  }\n}\n\nfunction onPanelMouseEnter() {\n  if (trigger === BColorPickerTrigger.Hover && hoverTimer) {\n    clearTimeout(hoverTimer);\n  }\n}\n\nfunction onPanelMouseLeave() {\n  if (trigger === BColorPickerTrigger.Hover) {\n    hoverTimer = setTimeout(() => setOpen(false), 150);\n  }\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    setOpen(false);\n    triggerRef.value?.focus();\n  }\n  if ((event.key === 'Enter' || event.key === ' ') && !isOpen.value) {\n    event.preventDefault();\n    setOpen(true);\n  }\n}\n\n// Close on outside click\nfunction onDocumentClick(event: MouseEvent) {\n  if (!isOpen.value) return;\n  const target = event.target as Node;\n  if (triggerRef.value?.contains(target) || panelRef.value?.contains(target)) {\n    return;\n  }\n  setOpen(false);\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', onDocumentClick);\n});\n\nonBeforeUnmount(() => {\n  document.removeEventListener('mousedown', onDocumentClick);\n  if (hoverTimer) clearTimeout(hoverTimer);\n});\n\n// Sync controlled open → popover\nwatch(\n  () => open,\n  (val) => {\n    if (val === undefined) return;\n    internalOpen.value = val;\n  },\n);\n\n// Focus management\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    nextTick(() => {\n      panelRef.value?.focus();\n    });\n  } else {\n    nextTick(() => previouslyFocusedElement?.focus());\n  }\n});\n\n// ─────────────────────────────────────────────\n// Saturation panel interaction\n// ─────────────────────────────────────────────\nconst saturationRef = ref<HTMLDivElement | null>(null);\nlet isDraggingSat = false;\n\nfunction updateSaturationFromEvent(event: MouseEvent | TouchEvent) {\n  if (!saturationRef.value) return;\n  const rect = saturationRef.value.getBoundingClientRect();\n  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;\n  const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;\n  const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n  const y = Math.max(0, Math.min(1, (clientY - rect.top) / rect.height));\n  internalHsb.value = {\n    ...internalHsb.value,\n    s: x * 100,\n    b: (1 - y) * 100,\n  };\n  emitChange();\n}\n\nfunction onSaturationMouseDown(event: MouseEvent) {\n  event.preventDefault();\n  isDraggingSat = true;\n  updateSaturationFromEvent(event);\n  document.addEventListener('mousemove', onSaturationMouseMove);\n  document.addEventListener('mouseup', onSaturationMouseUp);\n}\n\nfunction onSaturationMouseMove(event: MouseEvent) {\n  if (!isDraggingSat) return;\n  updateSaturationFromEvent(event);\n}\n\nfunction onSaturationMouseUp() {\n  isDraggingSat = false;\n  document.removeEventListener('mousemove', onSaturationMouseMove);\n  document.removeEventListener('mouseup', onSaturationMouseUp);\n  emitChangeComplete();\n}\n\nfunction onSaturationTouchStart(event: TouchEvent) {\n  event.preventDefault();\n  isDraggingSat = true;\n  updateSaturationFromEvent(event);\n  document.addEventListener('touchmove', onSaturationTouchMove);\n  document.addEventListener('touchend', onSaturationTouchEnd);\n}\n\nfunction onSaturationTouchMove(event: TouchEvent) {\n  if (!isDraggingSat) return;\n  updateSaturationFromEvent(event);\n}\n\nfunction onSaturationTouchEnd() {\n  isDraggingSat = false;\n  document.removeEventListener('touchmove', onSaturationTouchMove);\n  document.removeEventListener('touchend', onSaturationTouchEnd);\n  emitChangeComplete();\n}\n\n// ─────────────────────────────────────────────\n// Hue slider interaction\n// ─────────────────────────────────────────────\nconst hueRef = ref<HTMLDivElement | null>(null);\nlet isDraggingHue = false;\n\nfunction updateHueFromEvent(event: MouseEvent | TouchEvent) {\n  if (!hueRef.value) return;\n  const rect = hueRef.value.getBoundingClientRect();\n  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;\n  const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n  internalHsb.value = { ...internalHsb.value, h: x * 360 };\n  emitChange();\n}\n\nfunction onHueMouseDown(event: MouseEvent) {\n  event.preventDefault();\n  isDraggingHue = true;\n  updateHueFromEvent(event);\n  document.addEventListener('mousemove', onHueMouseMove);\n  document.addEventListener('mouseup', onHueMouseUp);\n}\n\nfunction onHueMouseMove(event: MouseEvent) {\n  if (!isDraggingHue) return;\n  updateHueFromEvent(event);\n}\n\nfunction onHueMouseUp() {\n  isDraggingHue = false;\n  document.removeEventListener('mousemove', onHueMouseMove);\n  document.removeEventListener('mouseup', onHueMouseUp);\n  emitChangeComplete();\n}\n\n// ─────────────────────────────────────────────\n// Alpha slider interaction\n// ─────────────────────────────────────────────\nconst alphaRef = ref<HTMLDivElement | null>(null);\nlet isDraggingAlpha = false;\n\nfunction updateAlphaFromEvent(event: MouseEvent | TouchEvent) {\n  if (!alphaRef.value) return;\n  const rect = alphaRef.value.getBoundingClientRect();\n  const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;\n  const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n  internalHsb.value = { ...internalHsb.value, a: roundTo(x, 2) };\n  emitChange();\n}\n\nfunction onAlphaMouseDown(event: MouseEvent) {\n  event.preventDefault();\n  isDraggingAlpha = true;\n  updateAlphaFromEvent(event);\n  document.addEventListener('mousemove', onAlphaMouseMove);\n  document.addEventListener('mouseup', onAlphaMouseUp);\n}\n\nfunction onAlphaMouseMove(event: MouseEvent) {\n  if (!isDraggingAlpha) return;\n  updateAlphaFromEvent(event);\n}\n\nfunction onAlphaMouseUp() {\n  isDraggingAlpha = false;\n  document.removeEventListener('mousemove', onAlphaMouseMove);\n  document.removeEventListener('mouseup', onAlphaMouseUp);\n  emitChangeComplete();\n}\n\n// ─────────────────────────────────────────────\n// Format switching\n// ─────────────────────────────────────────────\nconst formatOrder: `${BColorPickerFormat}`[] = [\n  BColorPickerFormat.Hex,\n  BColorPickerFormat.Hsb,\n  BColorPickerFormat.Rgb,\n  BColorPickerFormat.Hsl,\n];\n\nfunction cycleFormat() {\n  if (disabledFormat) return;\n  const idx = formatOrder.indexOf(activeFormat.value);\n  const next = formatOrder[(idx + 1) % formatOrder.length];\n  if (format === undefined) {\n    internalFormat.value = next;\n  }\n  emit('formatChange', next);\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nconst inputValue = computed(() => {\n  switch (activeFormat.value) {\n    case BColorPickerFormat.Hex:\n      return rgbToHex(hsbToRgb(internalHsb.value)).replace('#', '');\n    case BColorPickerFormat.Rgb: {\n      const rgb = hsbToRgb(internalHsb.value);\n      return `${rgb.r}, ${rgb.g}, ${rgb.b}`;\n    }\n    case BColorPickerFormat.Hsl: {\n      const hsl = rgbToHsl(hsbToRgb(internalHsb.value));\n      return `${hsl.h}, ${hsl.s}%, ${hsl.l}%`;\n    }\n    case BColorPickerFormat.Hsb:\n      return `${Math.round(internalHsb.value.h)}, ${Math.round(internalHsb.value.s)}%, ${Math.round(internalHsb.value.b)}%`;\n    default:\n      return '';\n  }\n});\n\nconst alphaPercent = computed(() => Math.round(internalHsb.value.a * 100));\n\nfunction onInputChange(event: Event) {\n  const val = (event.target as HTMLInputElement).value.trim();\n  try {\n    let parsed: BColorHsb;\n    switch (activeFormat.value) {\n      case BColorPickerFormat.Hex:\n        parsed = parseColor('#' + val);\n        break;\n      case BColorPickerFormat.Rgb: {\n        const parts = val.split(',').map((s) => parseInt(s.trim()));\n        if (parts.length >= 3) {\n          parsed = rgbToHsb({ r: parts[0], g: parts[1], b: parts[2], a: internalHsb.value.a });\n        } else return;\n        break;\n      }\n      case BColorPickerFormat.Hsl: {\n        const parts = val.split(',').map((s) => parseInt(s.trim()));\n        if (parts.length >= 3) {\n          parsed = rgbToHsb(\n            hslToRgb({ h: parts[0], s: parts[1], l: parts[2], a: internalHsb.value.a }),\n          );\n        } else return;\n        break;\n      }\n      case BColorPickerFormat.Hsb: {\n        const parts = val.split(',').map((s) => parseInt(s.trim()));\n        if (parts.length >= 3) {\n          parsed = { h: parts[0], s: parts[1], b: parts[2], a: internalHsb.value.a };\n        } else return;\n        break;\n      }\n      default:\n        return;\n    }\n    internalHsb.value = parsed;\n    emitChange();\n    emitChangeComplete();\n  } catch {\n    // Invalid input, ignore\n  }\n}\n\nfunction onAlphaInputChange(event: Event) {\n  const val = parseInt((event.target as HTMLInputElement).value);\n  if (!isNaN(val)) {\n    internalHsb.value = { ...internalHsb.value, a: Math.max(0, Math.min(100, val)) / 100 };\n    emitChange();\n    emitChangeComplete();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Preset selection\n// ─────────────────────────────────────────────\nfunction selectPreset(color: string) {\n  internalHsb.value = parseColor(color);\n  cleared.value = false;\n  emitChange();\n  emitChangeComplete();\n}\n\n// ─────────────────────────────────────────────\n// Clear\n// ─────────────────────────────────────────────\nfunction onClear() {\n  cleared.value = true;\n  emit('clear');\n}\n\n// ─────────────────────────────────────────────\n// Emit helpers\n// ─────────────────────────────────────────────\nfunction emitChange() {\n  cleared.value = false;\n  const str = hsbToString(internalHsb.value, activeFormat.value);\n  const css = hsbToCssColor(internalHsb.value);\n  emit('update:modelValue', str);\n  emit('change', str, css);\n}\n\nfunction emitChangeComplete() {\n  const str = hsbToString(internalHsb.value, activeFormat.value);\n  emit('changeComplete', str);\n}\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-color-picker-anchor-${componentUID.value}`);\n\nconst saturationStyle = computed(() => ({\n  backgroundColor: `hsl(${internalHsb.value.h}, 100%, 50%)`,\n}));\n\nconst saturationHandleStyle = computed(() => ({\n  left: `${internalHsb.value.s}%`,\n  top: `${100 - internalHsb.value.b}%`,\n}));\n\nconst hueHandleStyle = computed(() => ({\n  left: `${(internalHsb.value.h / 360) * 100}%`,\n}));\n\nconst alphaHandleStyle = computed(() => ({\n  left: `${internalHsb.value.a * 100}%`,\n}));\n\nconst alphaGradient = computed(() => {\n  const rgb = hsbToRgb({ ...internalHsb.value, a: 1 });\n  return `linear-gradient(to right, rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgb(${rgb.r}, ${rgb.g}, ${rgb.b}))`;\n});\n\nconst sizeClass = computed(() => {\n  switch (size) {\n    case BColorPickerSize.Small:\n      return 'b-color-picker--sm';\n    case BColorPickerSize.Large:\n      return 'b-color-picker--lg';\n    default:\n      return 'b-color-picker--md';\n  }\n});\n\n// ─────────────────────────────────────────────\n// Panel keyboard nav\n// ─────────────────────────────────────────────\nfunction onPanelKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault();\n    setOpen(false);\n    triggerRef.value?.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: () => setOpen(true), close: () => setOpen(false) });\n</script>\n\n<template>\n  <div class=\"b-color-picker\" :class=\"[sizeClass, { 'b-color-picker--disabled': disabled }]\">\n    <!-- Trigger -->\n    <div\n      ref=\"triggerRef\"\n      class=\"b-color-picker__trigger\"\n      :style=\"{ anchorName }\"\n      role=\"button\"\n      :tabindex=\"disabled ? -1 : 0\"\n      :aria-expanded=\"isOpen\"\n      :aria-controls=\"isOpen ? panelId : undefined\"\n      :aria-disabled=\"disabled\"\n      :aria-label=\"`Color picker: ${colorString}`\"\n      aria-haspopup=\"dialog\"\n      @click=\"onTriggerClick\"\n      @mouseenter=\"onTriggerMouseEnter\"\n      @mouseleave=\"onTriggerMouseLeave\"\n      @keydown=\"onKeydown\"\n    >\n      <slot>\n        <div class=\"b-color-picker__swatch-wrapper\">\n          <div\n            class=\"b-color-picker__swatch\"\n            :class=\"{ 'b-color-picker__swatch--cleared': cleared && allowClear }\"\n            :style=\"{ backgroundColor: cleared ? 'transparent' : cssColor }\"\n          />\n        </div>\n        <span v-if=\"showText\" class=\"b-color-picker__text\">\n          {{ displayText }}\n        </span>\n      </slot>\n    </div>\n\n    <!-- Panel (popup) -->\n    <div\n      v-if=\"shouldRender\"\n      ref=\"panelRef\"\n      :id=\"panelId\"\n      class=\"b-color-picker__panel\"\n      :class=\"[\n        `b-color-picker__panel--${placement}`,\n        { 'b-color-picker__panel--open': isOpen, 'b-color-picker__panel--no-arrow': !arrow },\n      ]\"\n      :style=\"{ positionAnchor: anchorName }\"\n      role=\"dialog\"\n      :aria-label=\"'Color picker'\"\n      tabindex=\"-1\"\n      @mouseenter=\"onPanelMouseEnter\"\n      @mouseleave=\"onPanelMouseLeave\"\n      @keydown=\"onPanelKeydown\"\n    >\n      <!-- Arrow -->\n      <div v-if=\"arrow\" class=\"b-color-picker__arrow\" aria-hidden=\"true\" />\n\n      <!-- Saturation panel -->\n      <div\n        ref=\"saturationRef\"\n        class=\"b-color-picker__saturation\"\n        :style=\"saturationStyle\"\n        role=\"slider\"\n        aria-label=\"Color saturation and brightness\"\n        :aria-valuetext=\"`Saturation ${Math.round(internalHsb.s)}%, Brightness ${Math.round(internalHsb.b)}%`\"\n        tabindex=\"0\"\n        @mousedown=\"onSaturationMouseDown\"\n        @touchstart.passive=\"onSaturationTouchStart\"\n      >\n        <div class=\"b-color-picker__saturation-white\" />\n        <div class=\"b-color-picker__saturation-black\" />\n        <div class=\"b-color-picker__saturation-handle\" :style=\"saturationHandleStyle\" />\n      </div>\n\n      <!-- Sliders + preview row -->\n      <div class=\"b-color-picker__controls\">\n        <div class=\"b-color-picker__preview\">\n          <div class=\"b-color-picker__preview-color\" :style=\"{ backgroundColor: cssColor }\" />\n        </div>\n\n        <div class=\"b-color-picker__sliders\">\n          <!-- Hue slider -->\n          <div\n            ref=\"hueRef\"\n            class=\"b-color-picker__hue\"\n            role=\"slider\"\n            aria-label=\"Hue\"\n            :aria-valuenow=\"Math.round(internalHsb.h)\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"360\"\n            tabindex=\"0\"\n            @mousedown=\"onHueMouseDown\"\n          >\n            <div class=\"b-color-picker__hue-handle\" :style=\"hueHandleStyle\" />\n          </div>\n\n          <!-- Alpha slider -->\n          <div\n            v-if=\"!disabledAlpha\"\n            ref=\"alphaRef\"\n            class=\"b-color-picker__alpha\"\n            :style=\"{ '--b-color-picker-alpha-gradient': alphaGradient }\"\n            role=\"slider\"\n            aria-label=\"Opacity\"\n            :aria-valuenow=\"alphaPercent\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            tabindex=\"0\"\n            @mousedown=\"onAlphaMouseDown\"\n          >\n            <div class=\"b-color-picker__alpha-handle\" :style=\"alphaHandleStyle\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Input row -->\n      <div class=\"b-color-picker__input-row\">\n        <button\n          v-if=\"!disabledFormat\"\n          class=\"b-color-picker__format-btn\"\n          type=\"button\"\n          aria-label=\"Switch color format\"\n          @click=\"cycleFormat\"\n        >\n          {{ activeFormat.toUpperCase() }}\n        </button>\n        <span v-else class=\"b-color-picker__format-label\">\n          {{ activeFormat.toUpperCase() }}\n        </span>\n\n        <input\n          class=\"b-color-picker__input\"\n          type=\"text\"\n          :value=\"inputValue\"\n          aria-label=\"Color value\"\n          @change=\"onInputChange\"\n        />\n\n        <input\n          v-if=\"!disabledAlpha\"\n          class=\"b-color-picker__alpha-input\"\n          type=\"text\"\n          :value=\"`${alphaPercent}%`\"\n          aria-label=\"Alpha percentage\"\n          @change=\"onAlphaInputChange\"\n        />\n      </div>\n\n      <!-- Presets -->\n      <div v-if=\"presets && presets.length\" class=\"b-color-picker__presets\">\n        <div v-for=\"preset in presets\" :key=\"preset.label\" class=\"b-color-picker__preset-group\">\n          <div class=\"b-color-picker__preset-label\">{{ preset.label }}</div>\n          <div class=\"b-color-picker__preset-colors\">\n            <button\n              v-for=\"color in preset.colors\"\n              :key=\"color\"\n              type=\"button\"\n              class=\"b-color-picker__preset-color\"\n              :style=\"{ backgroundColor: color }\"\n              :aria-label=\"`Select color ${color}`\"\n              @click=\"selectPreset(color)\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <!-- Clear button -->\n      <div v-if=\"allowClear\" class=\"b-color-picker__clear-row\">\n        <button\n          type=\"button\"\n          class=\"b-color-picker__clear-btn\"\n          aria-label=\"Clear color\"\n          @click=\"onClear\"\n        >\n          Clear\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (Design Tokens)\n   ──────────────────────────────────────────── */\n.b-color-picker {\n  --b-color-picker-width: 234px;\n  --b-color-picker-handler-size: 16px;\n  --b-color-picker-handler-size-sm: 12px;\n  --b-color-picker-slider-height: 8px;\n  --b-color-picker-preview-size: 28px;\n  --b-color-picker-alpha-input-width: 44px;\n  --b-color-picker-border-width: 1px;\n  --b-color-picker-border-radius: 6px;\n  --b-color-picker-border-radius-sm: 4px;\n  --b-color-picker-font-size: 14px;\n  --b-color-picker-line-height: 1.5714;\n  --b-color-picker-bg: #ffffff;\n  --b-color-picker-border-color: #d9d9d9;\n  --b-color-picker-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-color-picker-trigger-height: 32px;\n  --b-color-picker-trigger-height-sm: 24px;\n  --b-color-picker-trigger-height-lg: 40px;\n  --b-color-picker-swatch-size: 16px;\n  --b-color-picker-swatch-size-sm: 12px;\n  --b-color-picker-swatch-size-lg: 20px;\n  --b-color-picker-panel-padding: 12px;\n  --b-color-picker-saturation-height: 160px;\n  --b-color-picker-color-block-border-radius: 4px;\n  --b-color-picker-input-bg: #ffffff;\n  --b-color-picker-input-border: #d9d9d9;\n  --b-color-picker-text-color: rgba(0, 0, 0, 0.88);\n  --b-color-picker-text-color-secondary: rgba(0, 0, 0, 0.65);\n  --b-color-picker-gap: 8px;\n  --b-color-picker-transition-duration: 200ms;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-color-picker {\n  --b-color-picker-bg: #1f1f1f;\n  --b-color-picker-border-color: #424242;\n  --b-color-picker-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-color-picker-input-bg: #141414;\n  --b-color-picker-input-border: #424242;\n  --b-color-picker-text-color: rgba(255, 255, 255, 0.88);\n  --b-color-picker-text-color-secondary: rgba(255, 255, 255, 0.65);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-color-picker {\n    --b-color-picker-bg: #1f1f1f;\n    --b-color-picker-border-color: #424242;\n    --b-color-picker-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-color-picker-input-bg: #141414;\n    --b-color-picker-input-border: #424242;\n    --b-color-picker-text-color: rgba(255, 255, 255, 0.88);\n    --b-color-picker-text-color-secondary: rgba(255, 255, 255, 0.65);\n  }\n}\n\n/* ────────────────────────────────────────────\n   Root\n   ──────────────────────────────────────────── */\n.b-color-picker {\n  display: inline-flex;\n  position: relative;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: var(--b-color-picker-font-size);\n  line-height: var(--b-color-picker-line-height);\n}\n\n.b-color-picker--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.b-color-picker--disabled .b-color-picker__trigger {\n  pointer-events: none;\n}\n\n/* ────────────────────────────────────────────\n   Trigger\n   ──────────────────────────────────────────── */\n.b-color-picker__trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  height: var(--b-color-picker-trigger-height);\n  padding: 3px;\n  border: var(--b-color-picker-border-width) solid var(--b-color-picker-border-color);\n  border-radius: var(--b-color-picker-border-radius);\n  cursor: pointer;\n  background: var(--b-color-picker-bg);\n  transition: border-color var(--b-color-picker-transition-duration);\n  outline: none;\n}\n\n.b-color-picker__trigger:hover:not([aria-disabled='true']) {\n  border-color: #4096ff;\n}\n\n.b-color-picker__trigger:focus-visible {\n  outline: 2px solid #4096ff;\n  outline-offset: 1px;\n}\n\n.b-color-picker--sm .b-color-picker__trigger {\n  height: var(--b-color-picker-trigger-height-sm);\n  padding: 2px;\n}\n\n.b-color-picker--lg .b-color-picker__trigger {\n  height: var(--b-color-picker-trigger-height-lg);\n  padding: 4px;\n}\n\n.b-color-picker__swatch-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--b-color-picker-trigger-height) - 8px);\n  height: calc(var(--b-color-picker-trigger-height) - 8px);\n  border-radius: var(--b-color-picker-border-radius-sm);\n  background-image: conic-gradient(\n    rgba(0, 0, 0, 0.06) 0 25%,\n    transparent 0 50%,\n    rgba(0, 0, 0, 0.06) 0 75%,\n    transparent 0\n  );\n  background-size: 8px 8px;\n}\n\n.b-color-picker--sm .b-color-picker__swatch-wrapper {\n  width: calc(var(--b-color-picker-trigger-height-sm) - 6px);\n  height: calc(var(--b-color-picker-trigger-height-sm) - 6px);\n}\n\n.b-color-picker--lg .b-color-picker__swatch-wrapper {\n  width: calc(var(--b-color-picker-trigger-height-lg) - 10px);\n  height: calc(var(--b-color-picker-trigger-height-lg) - 10px);\n}\n\n.b-color-picker__swatch {\n  width: 100%;\n  height: 100%;\n  border-radius: var(--b-color-picker-border-radius-sm);\n  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.25);\n}\n\n.b-color-picker__swatch--cleared {\n  background: linear-gradient(135deg, transparent 45%, #ff4d4f 45%, #ff4d4f 55%, transparent 55%)\n    center/100% 100%;\n}\n\n.b-color-picker__text {\n  padding-right: 4px;\n  color: var(--b-color-picker-text-color);\n  font-size: var(--b-color-picker-font-size);\n  user-select: none;\n}\n\n/* ────────────────────────────────────────────\n   Panel\n   ──────────────────────────────────────────── */\n.b-color-picker__panel {\n  position: absolute;\n  z-index: 1050;\n  width: var(--b-color-picker-width);\n  padding: var(--b-color-picker-panel-padding);\n  background: var(--b-color-picker-bg);\n  border-radius: var(--b-color-picker-border-radius);\n  box-shadow: var(--b-color-picker-shadow);\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity var(--b-color-picker-transition-duration),\n    visibility var(--b-color-picker-transition-duration);\n  outline: none;\n}\n\n.b-color-picker__panel--open {\n  opacity: 1;\n  visibility: visible;\n}\n\n/* Placement */\n.b-color-picker__panel--bottom-left {\n  top: calc(100% + var(--b-color-picker-gap));\n  left: 0;\n}\n\n.b-color-picker__panel--bottom-center {\n  top: calc(100% + var(--b-color-picker-gap));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.b-color-picker__panel--bottom-right {\n  top: calc(100% + var(--b-color-picker-gap));\n  right: 0;\n}\n\n.b-color-picker__panel--top-left {\n  bottom: calc(100% + var(--b-color-picker-gap));\n  left: 0;\n}\n\n.b-color-picker__panel--top-center {\n  bottom: calc(100% + var(--b-color-picker-gap));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.b-color-picker__panel--top-right {\n  bottom: calc(100% + var(--b-color-picker-gap));\n  right: 0;\n}\n\n/* ── Arrow ── */\n.b-color-picker__arrow {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background: var(--b-color-picker-bg);\n  transform: rotate(45deg);\n  pointer-events: none;\n  box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);\n}\n\n.b-color-picker__panel--bottom-left .b-color-picker__arrow,\n.b-color-picker__panel--bottom-center .b-color-picker__arrow,\n.b-color-picker__panel--bottom-right .b-color-picker__arrow {\n  top: -4px;\n  left: 16px;\n}\n\n.b-color-picker__panel--top-left .b-color-picker__arrow,\n.b-color-picker__panel--top-center .b-color-picker__arrow,\n.b-color-picker__panel--top-right .b-color-picker__arrow {\n  bottom: -4px;\n  left: 16px;\n}\n\n.b-color-picker__panel--no-arrow .b-color-picker__arrow {\n  display: none;\n}\n\n/* ────────────────────────────────────────────\n   Saturation panel\n   ──────────────────────────────────────────── */\n.b-color-picker__saturation {\n  position: relative;\n  width: 100%;\n  height: var(--b-color-picker-saturation-height);\n  border-radius: var(--b-color-picker-border-radius-sm);\n  cursor: crosshair;\n  overflow: hidden;\n  touch-action: none;\n}\n\n.b-color-picker__saturation-white {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to right, #fff, transparent);\n}\n\n.b-color-picker__saturation-black {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, transparent, #000);\n}\n\n.b-color-picker__saturation-handle {\n  position: absolute;\n  width: var(--b-color-picker-handler-size);\n  height: var(--b-color-picker-handler-size);\n  border: 2px solid #fff;\n  border-radius: 50%;\n  box-shadow:\n    0 0 0 1px rgba(0, 0, 0, 0.2),\n    inset 0 0 1px 1px rgba(0, 0, 0, 0.1);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n\n/* ────────────────────────────────────────────\n   Controls row (preview + sliders)\n   ──────────────────────────────────────────── */\n.b-color-picker__controls {\n  display: flex;\n  align-items: center;\n  gap: var(--b-color-picker-gap);\n  margin-top: var(--b-color-picker-gap);\n}\n\n.b-color-picker__preview {\n  flex-shrink: 0;\n  width: var(--b-color-picker-preview-size);\n  height: var(--b-color-picker-preview-size);\n  border-radius: 50%;\n  background-image: conic-gradient(\n    rgba(0, 0, 0, 0.06) 0 25%,\n    transparent 0 50%,\n    rgba(0, 0, 0, 0.06) 0 75%,\n    transparent 0\n  );\n  background-size: 8px 8px;\n  overflow: hidden;\n}\n\n.b-color-picker__preview-color {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15);\n}\n\n.b-color-picker__sliders {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--b-color-picker-gap);\n}\n\n/* ────────────────────────────────────────────\n   Hue slider\n   ──────────────────────────────────────────── */\n.b-color-picker__hue {\n  position: relative;\n  height: var(--b-color-picker-slider-height);\n  border-radius: calc(var(--b-color-picker-slider-height) / 2);\n  background: linear-gradient(\n    to right,\n    hsl(0, 100%, 50%),\n    hsl(60, 100%, 50%),\n    hsl(120, 100%, 50%),\n    hsl(180, 100%, 50%),\n    hsl(240, 100%, 50%),\n    hsl(300, 100%, 50%),\n    hsl(360, 100%, 50%)\n  );\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n}\n\n.b-color-picker__hue:focus-visible {\n  outline: 2px solid #4096ff;\n  outline-offset: 2px;\n}\n\n.b-color-picker__hue-handle {\n  position: absolute;\n  top: 50%;\n  width: var(--b-color-picker-handler-size);\n  height: var(--b-color-picker-handler-size);\n  border: 2px solid #fff;\n  border-radius: 50%;\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n\n/* ────────────────────────────────────────────\n   Alpha slider\n   ──────────────────────────────────────────── */\n.b-color-picker__alpha {\n  position: relative;\n  height: var(--b-color-picker-slider-height);\n  border-radius: calc(var(--b-color-picker-slider-height) / 2);\n  background-image: conic-gradient(\n    rgba(0, 0, 0, 0.06) 0 25%,\n    transparent 0 50%,\n    rgba(0, 0, 0, 0.06) 0 75%,\n    transparent 0\n  );\n  background-size: 8px 8px;\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n}\n\n.b-color-picker__alpha::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: var(--b-color-picker-alpha-gradient);\n}\n\n.b-color-picker__alpha:focus-visible {\n  outline: 2px solid #4096ff;\n  outline-offset: 2px;\n}\n\n.b-color-picker__alpha-handle {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  width: var(--b-color-picker-handler-size);\n  height: var(--b-color-picker-handler-size);\n  border: 2px solid #fff;\n  border-radius: 50%;\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n\n/* ────────────────────────────────────────────\n   Input row\n   ──────────────────────────────────────────── */\n.b-color-picker__input-row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: var(--b-color-picker-gap);\n}\n\n.b-color-picker__format-btn {\n  flex-shrink: 0;\n  padding: 2px 4px;\n  border: none;\n  background: transparent;\n  color: var(--b-color-picker-text-color-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  border-radius: var(--b-color-picker-border-radius-sm);\n  line-height: 1.5;\n}\n\n.b-color-picker__format-btn:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.b-color-picker__format-btn:focus-visible {\n  outline: 2px solid #4096ff;\n  outline-offset: 1px;\n}\n\n.b-color-picker__format-label {\n  flex-shrink: 0;\n  padding: 2px 4px;\n  color: var(--b-color-picker-text-color-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.5;\n}\n\n.b-color-picker__input {\n  flex: 1;\n  min-width: 0;\n  height: 24px;\n  padding: 0 4px;\n  border: var(--b-color-picker-border-width) solid var(--b-color-picker-input-border);\n  border-radius: var(--b-color-picker-border-radius-sm);\n  background: var(--b-color-picker-input-bg);\n  color: var(--b-color-picker-text-color);\n  font-size: 12px;\n  text-align: center;\n  outline: none;\n}\n\n.b-color-picker__input:focus {\n  border-color: #4096ff;\n}\n\n.b-color-picker__alpha-input {\n  width: var(--b-color-picker-alpha-input-width);\n  height: 24px;\n  padding: 0 4px;\n  border: var(--b-color-picker-border-width) solid var(--b-color-picker-input-border);\n  border-radius: var(--b-color-picker-border-radius-sm);\n  background: var(--b-color-picker-input-bg);\n  color: var(--b-color-picker-text-color);\n  font-size: 12px;\n  text-align: center;\n  outline: none;\n}\n\n.b-color-picker__alpha-input:focus {\n  border-color: #4096ff;\n}\n\n/* ────────────────────────────────────────────\n   Presets\n   ──────────────────────────────────────────── */\n.b-color-picker__presets {\n  margin-top: var(--b-color-picker-gap);\n  border-top: 1px solid var(--b-color-picker-border-color);\n  padding-top: var(--b-color-picker-gap);\n}\n\n.b-color-picker__preset-group + .b-color-picker__preset-group {\n  margin-top: var(--b-color-picker-gap);\n}\n\n.b-color-picker__preset-label {\n  font-size: 12px;\n  color: var(--b-color-picker-text-color-secondary);\n  margin-bottom: 4px;\n}\n\n.b-color-picker__preset-colors {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.b-color-picker__preset-color {\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: var(--b-color-picker-color-block-border-radius);\n  cursor: pointer;\n  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);\n  padding: 0;\n  transition: transform var(--b-color-picker-transition-duration);\n}\n\n.b-color-picker__preset-color:hover {\n  transform: scale(1.2);\n}\n\n.b-color-picker__preset-color:focus-visible {\n  outline: 2px solid #4096ff;\n  outline-offset: 1px;\n}\n\n/* ────────────────────────────────────────────\n   Clear row\n   ──────────────────────────────────────────── */\n.b-color-picker__clear-row {\n  margin-top: var(--b-color-picker-gap);\n  border-top: 1px solid var(--b-color-picker-border-color);\n  padding-top: var(--b-color-picker-gap);\n  display: flex;\n  justify-content: flex-end;\n}\n\n.b-color-picker__clear-btn {\n  padding: 2px 8px;\n  border: var(--b-color-picker-border-width) solid var(--b-color-picker-border-color);\n  border-radius: var(--b-color-picker-border-radius-sm);\n  background: transparent;\n  color: var(--b-color-picker-text-color-secondary);\n  font-size: 12px;\n  cursor: pointer;\n  line-height: 1.5;\n}\n\n.b-color-picker__clear-btn:hover {\n  border-color: #4096ff;\n  color: #4096ff;\n}\n\n.b-color-picker__clear-btn:focus-visible {\n  outline: 2px solid #4096ff;\n  outline-offset: 1px;\n}\n\n/* ────────────────────────────────────────────\n   Reduced motion\n   ──────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-color-picker__panel {\n    transition-duration: 0ms;\n  }\n\n  .b-color-picker__trigger {\n    transition-duration: 0ms;\n  }\n\n  .b-color-picker__preset-color {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system59.js","names":[],"sources":["../src/components/BCollapse/BCollapse.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * BCollapse is the group/container component (AntD Collapse equivalent).\n * It manages active keys and provides context to BCollapsePanel children.\n *\n * This is the same component as BCollapseGroup, exported under both names\n * for flexibility. Use BCollapse + BCollapsePanel in new code.\n */\nimport { computed, provide, ref, watch } from 'vue';\nimport {\n  BCollapseGroupContextKey,\n  type BCollapseCollapsible,\n  type BCollapseExpandIconPosition,\n  type BCollapseGroupContext,\n  type BCollapseSize,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Currently active panel key(s). Use with v-model for controlled mode. */\n    modelValue?: (string | number)[];\n    /** Initial active panel key(s) for uncontrolled mode. */\n    defaultActiveKey?: (string | number)[];\n    /** Accordion mode - only one panel open at a time. */\n    accordion?: boolean;\n    /** Show border around the collapse. @default true */\n    bordered?: boolean;\n    /** Group-level collapsible trigger: 'header' | 'icon' | 'disabled'. */\n    collapsible?: BCollapseCollapsible;\n    /** Destroy (unmount) inactive panel content. @default false */\n    destroyInactivePanel?: boolean;\n    /** Position of the expand icon. @default 'start' */\n    expandIconPosition?: BCollapseExpandIconPosition;\n    /** Ghost mode - borderless with transparent background. @default false */\n    ghost?: boolean;\n    /** Size of the collapse. @default 'default' */\n    size?: BCollapseSize;\n  }>(),\n  {\n    modelValue: undefined,\n    defaultActiveKey: () => [],\n    accordion: false,\n    bordered: true,\n    collapsible: undefined,\n    destroyInactivePanel: false,\n    expandIconPosition: 'start',\n    ghost: false,\n    size: 'default',\n  },\n);\n\nconst emit = defineEmits<{\n  'update:modelValue': [keys: (string | number)[]];\n  change: [keys: (string | number)[]];\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Active keys state (controlled + uncontrolled)\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => props.modelValue !== undefined);\nconst internalKeys = ref<(string | number)[]>([...props.defaultActiveKey]);\n\nconst activeKeys = computed(() =>\n  isControlled.value ? (props.modelValue ?? []) : internalKeys.value,\n);\n\nfunction setActiveKeys(keys: (string | number)[]) {\n  if (!isControlled.value) {\n    internalKeys.value = keys;\n  }\n  emit('update:modelValue', keys);\n  emit('change', keys);\n}\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    if (val !== undefined) {\n      internalKeys.value = [...val];\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Context for child panels\n// ─────────────────────────────────────────────\nfunction isActive(key: string | number): boolean {\n  return activeKeys.value.includes(key);\n}\n\nfunction toggle(key: string | number) {\n  const keys = [...activeKeys.value];\n  const idx = keys.indexOf(key);\n\n  if (props.accordion) {\n    setActiveKeys(idx >= 0 ? [] : [key]);\n  } else {\n    if (idx >= 0) {\n      keys.splice(idx, 1);\n    } else {\n      keys.push(key);\n    }\n    setActiveKeys(keys);\n  }\n}\n\nconst context: BCollapseGroupContext = {\n  isActive,\n  toggle,\n  collapsible: computed(() => props.collapsible),\n  expandIconPosition: computed(() => props.expandIconPosition),\n  bordered: computed(() => props.bordered),\n  ghost: computed(() => props.ghost),\n  size: computed(() => props.size),\n};\n\nprovide(BCollapseGroupContextKey, context);\n</script>\n\n<template>\n  <div\n    class=\"b-collapse\"\n    :class=\"{\n      'b-collapse--bordered': bordered,\n      'b-collapse--borderless': !bordered,\n      'b-collapse--ghost': ghost,\n      'b-collapse--small': size === 'small',\n    }\"\n    role=\"presentation\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BCollapse (Group) styles\n   ───────────────────────────────────────────── */\n.b-collapse {\n  --b-collapse-border-color: oklch(88% 0 0);\n  --b-collapse-border-radius: 8px;\n}\n\n[data-prefers-color='dark'] .b-collapse {\n  --b-collapse-border-color: oklch(32% 0.005 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-collapse {\n    --b-collapse-border-color: oklch(32% 0.005 260);\n  }\n}\n\n.b-collapse {\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n/* ── Bordered (default) ─────────────────────── */\n.b-collapse--bordered {\n  border: 1px solid var(--b-collapse-border-color);\n  border-radius: var(--b-collapse-border-radius);\n  overflow: hidden;\n}\n\n/* ── Borderless ─────────────────────────────── */\n.b-collapse--borderless {\n  background: transparent;\n}\n\n.b-collapse--borderless .b-collapse-panel {\n  border-bottom: 1px solid var(--b-collapse-border-color);\n}\n\n.b-collapse--borderless .b-collapse-panel:last-child {\n  border-bottom: none;\n}\n\n.b-collapse--borderless .b-collapse-panel__body {\n  background: transparent;\n}\n\n/* ── Ghost mode ─────────────────────────────── */\n.b-collapse--ghost {\n  border: none;\n  background: transparent;\n}\n\n.b-collapse--ghost .b-collapse-panel {\n  border-bottom: none;\n  margin-bottom: 8px;\n}\n\n.b-collapse--ghost .b-collapse-panel:last-child {\n  margin-bottom: 0;\n}\n\n.b-collapse--ghost .b-collapse-panel__header {\n  border-radius: var(--b-collapse-border-radius);\n}\n\n.b-collapse--ghost .b-collapse-panel__body {\n  background: transparent;\n  border-top: none;\n}\n\n/* ── Small size ─────────────────────────────── */\n.b-collapse--small .b-collapse-panel__header {\n  padding: 8px 12px;\n  font-size: 13px;\n}\n\n.b-collapse--small .b-collapse-panel__body {\n  padding: 12px;\n  font-size: 13px;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,IAAM,IAAQ,GAkCR,IAAO,GAYP,IAAe,QAAe,EAAM,eAAe,KAAA,EAAU,EAC7D,IAAe,EAAyB,CAAC,GAAG,EAAM,iBAAiB,CAAC,EAEpE,IAAa,QACjB,EAAa,QAAS,EAAM,cAAc,EAAE,GAAI,EAAa,MAC9D;EAED,SAAS,EAAc,GAA2B;AAKhD,GAJK,EAAa,UAChB,EAAa,QAAQ,IAEvB,EAAK,qBAAqB,EAAK,EAC/B,EAAK,UAAU,EAAK;;AAGtB,UACQ,EAAM,aACX,MAAQ;AACP,GAAI,MAAQ,KAAA,MACV,EAAa,QAAQ,CAAC,GAAG,EAAI;IAGlC;EAKD,SAAS,EAAS,GAA+B;AAC/C,UAAO,EAAW,MAAM,SAAS,EAAI;;EAGvC,SAAS,EAAO,GAAsB;GACpC,IAAM,IAAO,CAAC,GAAG,EAAW,MAAM,EAC5B,IAAM,EAAK,QAAQ,EAAI;AAE7B,GAAI,EAAM,YACR,EAAc,KAAO,IAAI,EAAE,GAAG,CAAC,EAAI,CAAC,IAEhC,KAAO,IACT,EAAK,OAAO,GAAK,EAAE,GAEnB,EAAK,KAAK,EAAI,EAEhB,EAAc,EAAK;;SAcvB,EAAQ,GAV+B;GACrC;GACA;GACA,aAAa,QAAe,EAAM,YAAY;GAC9C,oBAAoB,QAAe,EAAM,mBAAmB;GAC5D,UAAU,QAAe,EAAM,SAAS;GACxC,OAAO,QAAe,EAAM,MAAM;GAClC,MAAM,QAAe,EAAM,KAAK;GACjC,CAEyC,kBAIxC,EAWM,OAAA;GAVJ,OAAK,EAAA,CAAC,cAAY;4BACsB,EAAA;+BAA2C,EAAA;yBAAqC,EAAA;yBAAkC,EAAA,SAAI;;GAM9J,MAAK;MAEL,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}