@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system88.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system88.js","names":[],"sources":["../src/components/BEmpty/BEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BEmptyImage } from '@/types.ts';\nimport { computed } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Customize description text. Pass empty string to show no text,\n     * or set hideDescription to true to hide the description entirely.\n     */\n    description?: string;\n    /**\n     * Set to true to hide the description area completely.\n     * @default false\n     */\n    hideDescription?: boolean;\n    /**\n     * Image type or custom image URL string.\n     * Use BEmptyImage.Default for the detailed illustration or\n     * BEmptyImage.Simple for the minimal version.\n     * @default BEmptyImage.Default\n     */\n    image?: `${BEmptyImage}` | string;\n    /**\n     * Inline styles applied to the image element.\n     */\n    imageStyle?: Record<string, string>;\n  }>(),\n  {\n    description: 'No data',\n    hideDescription: false,\n    image: BEmptyImage.Default,\n  },\n);\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Default slot: action content below description (e.g. button). */\n  default?(): unknown;\n  /** Custom description content, overrides the description prop. */\n  description?(): unknown;\n  /** Custom image content, overrides the image prop entirely. */\n  image?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isSimple = computed(() => props.image === BEmptyImage.Simple);\n\nconst isBuiltInImage = computed(\n  () => props.image === BEmptyImage.Default || props.image === BEmptyImage.Simple,\n);\n\nconst isCustomUrl = computed(\n  () => !isBuiltInImage.value && typeof props.image === 'string' && props.image.length > 0,\n);\n\nconst showDescription = computed(() => {\n  if (slots.description) return true;\n  return !props.hideDescription;\n});\n\nconst descriptionText = computed(() => {\n  return props.description;\n});\n</script>\n\n<template>\n  <div\n    class=\"b-empty\"\n    :class=\"{ 'b-empty--simple': isSimple }\"\n    role=\"status\"\n    :aria-label=\"props.description || 'No data'\"\n  >\n    <!-- Image -->\n    <div class=\"b-empty__image\" :style=\"props.imageStyle\">\n      <slot name=\"image\">\n        <!-- Default built-in illustration -->\n        <svg\n          v-if=\"props.image === BEmptyImage.Default\"\n          class=\"b-empty__svg b-empty__svg--default\"\n          viewBox=\"0 0 184 152\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g fill=\"none\" fill-rule=\"evenodd\">\n            <g transform=\"translate(24 31.67)\">\n              <ellipse class=\"b-empty__ellipse\" cx=\"67.797\" cy=\"106.89\" rx=\"67.797\" ry=\"12.668\" />\n              <path\n                class=\"b-empty__path-bg\"\n                d=\"M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z\"\n              />\n              <path\n                class=\"b-empty__path-main\"\n                d=\"M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z\"\n                transform=\"translate(13.56)\"\n              />\n              <path\n                class=\"b-empty__path-front\"\n                d=\"M33.83 0h67.933a4 4 0 014 4v93.344H29.83V4a4 4 0 014-4z\"\n              />\n              <path\n                class=\"b-empty__path-panel\"\n                d=\"M42.678 9.953h50.237a2 2 0 012 2V36.91h-54.237V11.953a2 2 0 012-2zM42.94 49.767h49.713a2.262 2.262 0 110 4.524H42.94a2.262 2.262 0 110-4.524zM42.94 61.53h49.713a2.262 2.262 0 110 4.525H42.94a2.262 2.262 0 010-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 01-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393 0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z\"\n              />\n            </g>\n            <path\n              class=\"b-empty__path-dot\"\n              d=\"M149.121 33.292l-6.83 2.65a1 1 0 01-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z\"\n            />\n            <g class=\"b-empty__path-dots-group\" transform=\"translate(149.65 15.383)\">\n              <ellipse cx=\"20.654\" cy=\"3.167\" rx=\"2.849\" ry=\"2.815\" />\n              <path d=\"M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z\" />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Simple built-in illustration -->\n        <svg\n          v-else-if=\"props.image === BEmptyImage.Simple\"\n          class=\"b-empty__svg b-empty__svg--simple\"\n          viewBox=\"0 0 64 41\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g transform=\"translate(0 1)\" fill=\"none\" fill-rule=\"evenodd\">\n            <ellipse class=\"b-empty__simple-ellipse\" cx=\"32\" cy=\"33\" rx=\"32\" ry=\"7\" />\n            <g class=\"b-empty__simple-group\" fill-rule=\"nonzero\">\n              <path\n                d=\"M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46V12.76z\"\n              />\n              <path\n                class=\"b-empty__simple-inner\"\n                d=\"M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z\"\n              />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Custom URL image -->\n        <img\n          v-else-if=\"isCustomUrl\"\n          :src=\"props.image\"\n          alt=\"\"\n          class=\"b-empty__custom-image\"\n          aria-hidden=\"true\"\n        />\n      </slot>\n    </div>\n\n    <!-- Description -->\n    <div v-if=\"showDescription\" class=\"b-empty__description\">\n      <slot name=\"description\">\n        {{ descriptionText }}\n      </slot>\n    </div>\n\n    <!-- Footer / actions -->\n    <div v-if=\"slots.default\" class=\"b-empty__footer\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-empty {\n  /* Layout */\n  --b-empty-padding: 32px 0;\n  --b-empty-text-align: center;\n\n  /* Image */\n  --b-empty-image-height: 152px;\n  --b-empty-image-height-simple: 35px;\n  --b-empty-image-margin-bottom: 8px;\n  --b-empty-image-opacity: 1;\n\n  /* Default SVG colors */\n  --b-empty-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-path-bg-fill: oklch(95% 0.003 260);\n  --b-empty-path-main-fill: oklch(97% 0.002 260);\n  --b-empty-path-front-stroke: oklch(83% 0.01 260);\n  --b-empty-path-front-fill: oklch(97% 0.002 260);\n  --b-empty-path-panel-fill: oklch(93% 0.005 260);\n  --b-empty-path-dot-fill: oklch(83% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(100% 0 0);\n\n  /* Simple SVG colors */\n  --b-empty-simple-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(83% 0.01 260);\n  --b-empty-simple-group-fill: oklch(97% 0.002 260);\n  --b-empty-simple-inner-fill: oklch(93% 0.005 260);\n\n  /* Description */\n  --b-empty-description-color: oklch(55% 0.01 260);\n  --b-empty-description-font-size: 14px;\n  --b-empty-description-line-height: 1.572;\n  --b-empty-description-margin-top: 8px;\n\n  /* Footer */\n  --b-empty-footer-margin-top: 16px;\n\n  /* Animation */\n  --b-empty-transition-duration: 200ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-empty {\n  --b-empty-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-path-bg-fill: oklch(22% 0.005 260);\n  --b-empty-path-main-fill: oklch(18% 0.003 260);\n  --b-empty-path-front-stroke: oklch(40% 0.01 260);\n  --b-empty-path-front-fill: oklch(20% 0.005 260);\n  --b-empty-path-panel-fill: oklch(28% 0.005 260);\n  --b-empty-path-dot-fill: oklch(40% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(18% 0 0);\n\n  --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n  --b-empty-simple-group-fill: oklch(20% 0.005 260);\n  --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n\n  --b-empty-description-color: oklch(70% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-empty {\n    --b-empty-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-path-bg-fill: oklch(22% 0.005 260);\n    --b-empty-path-main-fill: oklch(18% 0.003 260);\n    --b-empty-path-front-stroke: oklch(40% 0.01 260);\n    --b-empty-path-front-fill: oklch(20% 0.005 260);\n    --b-empty-path-panel-fill: oklch(28% 0.005 260);\n    --b-empty-path-dot-fill: oklch(40% 0.01 260);\n    --b-empty-path-dots-group-fill: oklch(18% 0 0);\n  \n    --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n    --b-empty-simple-group-fill: oklch(20% 0.005 260);\n    --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n  \n    --b-empty-description-color: oklch(70% 0.01 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--b-empty-padding);\n  text-align: var(--b-empty-text-align);\n  box-sizing: border-box;\n}\n\n/* ─────────────────────────────────────────────\n   Image area\n   ───────────────────────────────────────────── */\n.b-empty__image {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--b-empty-image-height);\n  margin-bottom: var(--b-empty-image-margin-bottom);\n  opacity: var(--b-empty-image-opacity);\n}\n\n.b-empty--simple .b-empty__image {\n  height: var(--b-empty-image-height-simple);\n}\n\n.b-empty__svg {\n  width: auto;\n  height: 100%;\n}\n\n.b-empty__custom-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}\n\n/* ─────────────────────────────────────────────\n   Default SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__ellipse {\n  fill: var(--b-empty-ellipse-fill);\n}\n\n.b-empty__path-bg {\n  fill: var(--b-empty-path-bg-fill);\n}\n\n.b-empty__path-main {\n  fill: var(--b-empty-path-main-fill);\n}\n\n.b-empty__path-front {\n  stroke: var(--b-empty-path-front-stroke);\n  fill: var(--b-empty-path-front-fill);\n}\n\n.b-empty__path-panel {\n  fill: var(--b-empty-path-panel-fill);\n}\n\n.b-empty__path-dot {\n  fill: var(--b-empty-path-dot-fill);\n}\n\n.b-empty__path-dots-group {\n  fill: var(--b-empty-path-dots-group-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Simple SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__simple-ellipse {\n  fill: var(--b-empty-simple-ellipse-fill);\n}\n\n.b-empty__simple-group {\n  stroke: var(--b-empty-simple-group-stroke);\n  fill: var(--b-empty-simple-group-fill);\n}\n\n.b-empty__simple-inner {\n  fill: var(--b-empty-simple-inner-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-empty__description {\n  color: var(--b-empty-description-color);\n  font-size: var(--b-empty-description-font-size);\n  line-height: var(--b-empty-description-line-height);\n  margin-top: var(--b-empty-description-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (actions area)\n   ───────────────────────────────────────────── */\n.b-empty__footer {\n  margin-top: var(--b-empty-footer-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-empty {\n    --b-empty-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAkCR,IAAQ,GAOV,EAKE,IAAW,QAAe,EAAM,UAAU,EAAY,OAAO,EAE7D,IAAiB,QACf,EAAM,UAAU,EAAY,WAAW,EAAM,UAAU,EAAY,OAC1E,EAEK,IAAc,QACZ,CAAC,EAAe,SAAS,OAAO,EAAM,SAAU,YAAY,EAAM,MAAM,SAAS,EACxF,EAEK,IAAkB,QAClB,EAAM,cAAoB,KACvB,CAAC,EAAM,gBACd,EAEI,IAAkB,QACf,EAAM,YACb;yBAIA,EA+FM,OAAA;GA9FJ,OAAK,EAAA,CAAC,WAAS,EAAA,mBACc,EAAA,OAAQ,CAAA,CAAA;GACrC,MAAK;GACJ,cAAY,EAAM,eAAW;;GAG9B,EA2EM,OAAA;IA3ED,OAAM;IAAkB,OAAK,EAAE,EAAM,WAAU;OAClD,EAyEO,EAAA,QAAA,SAAA,EAAA,QAAA,CAtEG,EAAM,UAAU,EAAA,EAAW,CAAC,WAAA,GAAA,EADpC,EAsCM,OAtCN,GAsCM,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAA,yuDAAA,EAAA,CAAA,CAAA,CAAA,IAIO,EAAM,UAAU,EAAA,EAAW,CAAC,UAAA,GAAA,EADzC,EAoBM,OApBN,GAoBM,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAA,uoBAAA,EAAA,CAAA,CAAA,CAAA,IAIO,EAAA,SAAA,GAAA,EADb,EAME,OAAA;;IAJC,KAAK,EAAM;IACZ,KAAI;IACJ,OAAM;IACN,eAAY;;GAMP,EAAA,SAAA,GAAA,EAAX,EAIM,OAJN,GAIM,CAHJ,EAEO,EAAA,QAAA,eAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,MAAe,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAKX,EAAM,WAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"design-system88.js","names":[],"sources":["../src/components/BDropdown/BDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\nimport type { BDropdownMenuItem, BDropdownMenuProps } from './types.ts';\nimport { BDropdownPlacement, BDropdownTrigger } from './types.ts';\n\nconst {\n  trigger = BDropdownTrigger.Hover,\n  placement = BDropdownPlacement.BottomLeft,\n  arrow = false,\n  disabled = false,\n  destroyOnHidden = false,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  menu,\n  modelValue = undefined,\n} = defineProps<{\n  /** The trigger mode which executes the dropdown action. */\n  trigger?: `${BDropdownTrigger}`;\n  /** Placement of popup menu. */\n  placement?: `${BDropdownPlacement}`;\n  /** Whether to show the dropdown chevron indicator next to the trigger. */\n  arrow?: boolean;\n  /** Whether the dropdown menu is disabled. */\n  disabled?: boolean;\n  /** Whether to destroy popup on hide. */\n  destroyOnHidden?: boolean;\n  /** Delay in ms before showing on mouseenter (hover trigger only). */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave (hover trigger only). */\n  mouseLeaveDelay?: number;\n  /** Menu configuration: items, selectable, multiple, selectedKeys. */\n  menu?: BDropdownMenuProps;\n  /** Controlled open state - bind with `v-model:open`. */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the dropdown visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model:open support. */\n  (e: 'update:modelValue', value: boolean): void;\n  /** Emitted when a menu item is clicked. */\n  (e: 'menuClick', info: { key: string | number; item: BDropdownMenuItem }): void;\n}>();\n\ndefineSlots<{\n  /** The trigger element. Receives `triggerProps` to bind ARIA attributes. */\n  default?(props: { triggerProps: Record<string, unknown> }): unknown;\n  /** Custom overlay content (replaces default menu rendering). */\n  overlay?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst dropdownId = useId();\nconst menuId = `${dropdownId}-menu`;\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst shouldRender = computed(() => {\n  if (destroyOnHidden) return isOpen.value;\n  return true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  if (disabled) return;\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  popoverRef.value?.showPopover();\n}\n\nfunction doClose() {\n  popoverRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst popoverRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocusedElement: HTMLElement | null = null;\nconst focusedIndex = ref(-1);\n\nconst focusableSelector = '[role=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\nfunction getFocusableItems(): HTMLElement[] {\n  if (!popoverRef.value) return [];\n  return Array.from(popoverRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n}\n\nfunction focusItem(index: number) {\n  const items = getFocusableItems();\n  if (items.length === 0) return;\n  const clamped = Math.max(0, Math.min(index, items.length - 1));\n  focusedIndex.value = clamped;\n  items[clamped]?.focus();\n}\n\nfunction focusFirst() {\n  nextTick(() => focusItem(0));\n}\n\nfunction focusLast() {\n  nextTick(() => {\n    const items = getFocusableItems();\n    focusItem(items.length - 1);\n  });\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    focusFirst();\n  } else {\n    focusedIndex.value = -1;\n    if (previouslyFocusedElement) {\n      nextTick(() => previouslyFocusedElement?.focus());\n    }\n  }\n});\n\n// ─────────────────────────────────────────────\n// Menu item click\n// ─────────────────────────────────────────────\nfunction onItemClick(item: BDropdownMenuItem) {\n  if (item.disabled) return;\n  emit('menuClick', { key: item.key, item });\n  requestClose();\n}\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (disabled) return;\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onContextMenu(event: MouseEvent) {\n  if (disabled) return;\n  event.preventDefault();\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  if (disabled) return;\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent) {\n  if (disabled) return;\n\n  switch (event.key) {\n    case 'Enter':\n    case ' ':\n    case 'ArrowDown':\n      event.preventDefault();\n      if (!isOpen.value) {\n        requestOpen();\n        nextTick(() => focusFirst());\n      } else {\n        focusFirst();\n      }\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      if (!isOpen.value) {\n        requestOpen();\n        nextTick(() => focusLast());\n      } else {\n        focusLast();\n      }\n      break;\n    case 'Escape':\n      if (isOpen.value) {\n        event.preventDefault();\n        requestClose();\n      }\n      break;\n  }\n}\n\nfunction onMenuKeydown(event: KeyboardEvent) {\n  const items = getFocusableItems();\n  const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      focusItem(currentIndex < items.length - 1 ? currentIndex + 1 : 0);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      focusItem(currentIndex > 0 ? currentIndex - 1 : items.length - 1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusItem(0);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusItem(items.length - 1);\n      break;\n    case 'Enter':\n    case ' ':\n      event.preventDefault();\n      if (document.activeElement) {\n        (document.activeElement as HTMLElement).click();\n      }\n      break;\n    case 'Escape':\n      event.preventDefault();\n      requestClose();\n      break;\n    case 'Tab':\n      requestClose();\n      break;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Popover hover (keep open when hovering content)\n// ─────────────────────────────────────────────\nfunction onPopoverMouseEnter() {\n  if (trigger === BDropdownTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onPopoverMouseLeave() {\n  if (trigger === BDropdownTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside handler\n// ─────────────────────────────────────────────\nfunction onDocumentClick(event: MouseEvent) {\n  if (!isOpen.value) return;\n  const target = event.target as Node;\n  if (toggleRef.value?.contains(target)) return;\n  if (popoverRef.value?.contains(target)) return;\n  requestClose();\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.addEventListener('keydown', onTriggerKeydown);\n\n  switch (trigger) {\n    case BDropdownTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BDropdownTrigger.ContextMenu:\n      el.addEventListener('contextmenu', onContextMenu);\n      break;\n    case BDropdownTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onTriggerKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('contextmenu', onContextMenu);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  document.removeEventListener('click', onDocumentClick, true);\n  clearTimers();\n});\n\nwatch(isOpen, (val) => {\n  if (val) {\n    document.addEventListener('click', onDocumentClick, true);\n  } else {\n    document.removeEventListener('click', onDocumentClick, true);\n  }\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      popoverRef.value?.showPopover();\n    } else {\n      popoverRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-dropdown-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BDropdownPlacement.Bottom]: 'bottom-center',\n    [BDropdownPlacement.BottomLeft]: 'bottom-left',\n    [BDropdownPlacement.BottomRight]: 'bottom-right',\n    [BDropdownPlacement.Top]: 'top-center',\n    [BDropdownPlacement.TopLeft]: 'top-left',\n    [BDropdownPlacement.TopRight]: 'top-right',\n  };\n  return map[placement] ?? 'bottom-left';\n});\n\nconst menuItems = computed(() => menu?.items ?? []);\n\nconst triggerProps = computed(() => ({\n  id: dropdownId,\n  'aria-haspopup': 'menu' as const,\n  'aria-expanded': isOpen.value,\n  'aria-disabled': disabled || undefined,\n}));\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div\n    ref=\"toggleRef\"\n    :class=\"['b-dropdown__toggle', { 'b-dropdown__toggle--open': isOpen }]\"\n    :style=\"{ anchorName: anchorName }\"\n  >\n    <slot :trigger-props=\"triggerProps\" />\n    <span v-if=\"arrow\" class=\"b-dropdown__indicator\" aria-hidden=\"true\" />\n  </div>\n\n  <div\n    ref=\"popoverRef\"\n    popover=\"manual\"\n    :class=\"['b-dropdown', placementClass]\"\n    :style=\"{ positionAnchor: anchorName }\"\n    :id=\"menuId\"\n    role=\"menu\"\n    :aria-labelledby=\"dropdownId\"\n    tabindex=\"-1\"\n    @toggle=\"onPopoverToggle\"\n    @keydown=\"onMenuKeydown\"\n    @mouseenter=\"onPopoverMouseEnter\"\n    @mouseleave=\"onPopoverMouseLeave\"\n  >\n    <template v-if=\"shouldRender\">\n      <div class=\"b-dropdown__content\">\n        <slot name=\"overlay\">\n          <template v-for=\"item in menuItems\" :key=\"item.key\">\n            <div v-if=\"item.type === 'divider'\" class=\"b-dropdown__divider\" role=\"separator\" />\n            <div\n              v-else-if=\"item.type === 'group'\"\n              class=\"b-dropdown__group\"\n              role=\"group\"\n              :aria-label=\"item.title\"\n            >\n              <div class=\"b-dropdown__group-title\">{{ item.title }}</div>\n              <div\n                v-for=\"child in item.children\"\n                :key=\"child.key\"\n                :class=\"[\n                  'b-dropdown__item',\n                  { 'b-dropdown__item--disabled': child.disabled },\n                  { 'b-dropdown__item--danger': child.danger },\n                  { 'b-dropdown__item--selected': menu?.selectedKeys?.includes(child.key) },\n                ]\"\n                role=\"menuitem\"\n                :tabindex=\"child.disabled ? -1 : 0\"\n                :aria-disabled=\"child.disabled || undefined\"\n                @click=\"onItemClick(child)\"\n              >\n                <span v-if=\"child.icon\" class=\"b-dropdown__item-icon\" aria-hidden=\"true\">{{\n                  child.icon\n                }}</span>\n                <span class=\"b-dropdown__item-label\">{{ child.label }}</span>\n              </div>\n            </div>\n            <div\n              v-else\n              :class=\"[\n                'b-dropdown__item',\n                { 'b-dropdown__item--disabled': item.disabled },\n                { 'b-dropdown__item--danger': item.danger },\n                { 'b-dropdown__item--selected': menu?.selectedKeys?.includes(item.key) },\n              ]\"\n              role=\"menuitem\"\n              :tabindex=\"item.disabled ? -1 : 0\"\n              :aria-disabled=\"item.disabled || undefined\"\n              @click=\"onItemClick(item)\"\n            >\n              <span v-if=\"item.icon\" class=\"b-dropdown__item-icon\" aria-hidden=\"true\">{{\n                item.icon\n              }}</span>\n              <span class=\"b-dropdown__item-label\">{{ item.label }}</span>\n            </div>\n          </template>\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-dropdown {\n  --b-dropdown-z-index: 1050;\n  --b-dropdown-bg: #fff;\n  --b-dropdown-color: rgba(0, 0, 0, 0.88);\n  --b-dropdown-border-radius: 8px;\n  --b-dropdown-padding-block: 4px;\n  --b-dropdown-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-dropdown-font-size: 14px;\n  --b-dropdown-line-height: 1.5714;\n  --b-dropdown-min-width: 120px;\n  --b-dropdown-max-width: 320px;\n  --b-dropdown-gap: 4px;\n  --b-dropdown-transition-duration: 200ms;\n\n  --b-dropdown-item-padding-x: 12px;\n  --b-dropdown-item-padding-y: 5px;\n  --b-dropdown-item-border-radius: 4px;\n  --b-dropdown-item-color: rgba(0, 0, 0, 0.88);\n  --b-dropdown-item-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-dropdown-item-active-bg: rgba(0, 0, 0, 0.06);\n  --b-dropdown-item-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-dropdown-item-danger-color: #ff4d4f;\n  --b-dropdown-item-danger-hover-bg: #fff2f0;\n  --b-dropdown-item-selected-bg: #e6f4ff;\n  --b-dropdown-item-selected-color: #1677ff;\n  --b-dropdown-item-icon-margin-right: 8px;\n  --b-dropdown-item-icon-size: 14px;\n\n  --b-dropdown-divider-color: rgba(5, 5, 5, 0.06);\n  --b-dropdown-divider-margin: 4px 0;\n\n  --b-dropdown-group-title-color: rgba(0, 0, 0, 0.45);\n  --b-dropdown-group-title-font-size: 12px;\n  --b-dropdown-group-title-padding: 5px 12px;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-dropdown {\n  --b-dropdown-bg: #1f1f1f;\n  --b-dropdown-color: rgba(255, 255, 255, 0.85);\n  --b-dropdown-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-dropdown-item-color: rgba(255, 255, 255, 0.85);\n  --b-dropdown-item-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-dropdown-item-active-bg: rgba(255, 255, 255, 0.12);\n  --b-dropdown-item-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-dropdown-item-danger-color: #ff7875;\n  --b-dropdown-item-danger-hover-bg: rgba(255, 77, 79, 0.12);\n  --b-dropdown-item-selected-bg: rgba(22, 119, 255, 0.15);\n  --b-dropdown-item-selected-color: #4096ff;\n  --b-dropdown-divider-color: rgba(253, 253, 253, 0.12);\n  --b-dropdown-group-title-color: rgba(255, 255, 255, 0.45);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-dropdown {\n    --b-dropdown-bg: #1f1f1f;\n    --b-dropdown-color: rgba(255, 255, 255, 0.85);\n    --b-dropdown-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-dropdown-item-color: rgba(255, 255, 255, 0.85);\n    --b-dropdown-item-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-dropdown-item-active-bg: rgba(255, 255, 255, 0.12);\n    --b-dropdown-item-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-dropdown-item-danger-color: #ff7875;\n    --b-dropdown-item-danger-hover-bg: rgba(255, 77, 79, 0.12);\n    --b-dropdown-item-selected-bg: rgba(22, 119, 255, 0.15);\n    --b-dropdown-item-selected-color: #4096ff;\n    --b-dropdown-divider-color: rgba(253, 253, 253, 0.12);\n    --b-dropdown-group-title-color: rgba(255, 255, 255, 0.45);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-dropdown__toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  cursor: pointer;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Chevron indicator (CSS-only)\n   ───────────────────────────────────────────── */\n.b-dropdown__indicator {\n  display: inline-block;\n  width: 0.625em;\n  height: 0.625em;\n  border-right: 1.5px solid currentColor;\n  border-bottom: 1.5px solid currentColor;\n  transform: rotate(45deg) translateY(-2px);\n  transition: transform 200ms;\n  opacity: 0.65;\n  flex-shrink: 0;\n}\n\n.b-dropdown__toggle--open .b-dropdown__indicator {\n  transform: rotate(-135deg) translateY(-1px);\n}\n\n/* ─────────────────────────────────────────────\n   Dropdown popover\n   ───────────────────────────────────────────── */\n.b-dropdown {\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  z-index: var(--b-dropdown-z-index);\n  min-width: var(--b-dropdown-min-width);\n  max-width: var(--b-dropdown-max-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  transition:\n    display var(--b-dropdown-transition-duration),\n    opacity var(--b-dropdown-transition-duration);\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  /* ── Placement: Bottom ── */\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-dropdown-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-dropdown-gap);\n  }\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-dropdown-gap);\n  }\n\n  /* ── Placement: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-dropdown-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-dropdown-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-dropdown-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Content wrapper\n   ───────────────────────────────────────────── */\n.b-dropdown__content {\n  background: var(--b-dropdown-bg);\n  color: var(--b-dropdown-color);\n  font-size: var(--b-dropdown-font-size);\n  line-height: var(--b-dropdown-line-height);\n  padding: var(--b-dropdown-padding-block) 0;\n  border-radius: var(--b-dropdown-border-radius);\n  box-shadow: var(--b-dropdown-shadow);\n  overflow: hidden auto;\n  max-height: 60vh;\n}\n\n/* ─────────────────────────────────────────────\n   Menu items\n   ───────────────────────────────────────────── */\n.b-dropdown__item {\n  display: flex;\n  align-items: center;\n  padding: var(--b-dropdown-item-padding-y) var(--b-dropdown-item-padding-x);\n  margin: 0 4px;\n  border-radius: var(--b-dropdown-item-border-radius);\n  color: var(--b-dropdown-item-color);\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  transition: background-color 150ms;\n\n  &:hover,\n  &:focus-visible {\n    background: var(--b-dropdown-item-hover-bg);\n  }\n\n  &:active {\n    background: var(--b-dropdown-item-active-bg);\n  }\n\n  &--disabled {\n    color: var(--b-dropdown-item-disabled-color);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  &--danger {\n    color: var(--b-dropdown-item-danger-color);\n\n    &:hover,\n    &:focus-visible {\n      background: var(--b-dropdown-item-danger-hover-bg);\n    }\n  }\n\n  &--selected {\n    background: var(--b-dropdown-item-selected-bg);\n    color: var(--b-dropdown-item-selected-color);\n  }\n}\n\n.b-dropdown__item-icon {\n  margin-right: var(--b-dropdown-item-icon-margin-right);\n  font-size: var(--b-dropdown-item-icon-size);\n  display: inline-flex;\n  align-items: center;\n}\n\n.b-dropdown__item-label {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─────────────────────────────────────────────\n   Divider\n   ───────────────────────────────────────────── */\n.b-dropdown__divider {\n  height: 1px;\n  margin: var(--b-dropdown-divider-margin);\n  background: var(--b-dropdown-divider-color);\n}\n\n/* ─────────────────────────────────────────────\n   Group\n   ───────────────────────────────────────────── */\n.b-dropdown__group-title {\n  padding: var(--b-dropdown-group-title-padding);\n  color: var(--b-dropdown-group-title-color);\n  font-size: var(--b-dropdown-group-title-font-size);\n  font-weight: 500;\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks\n   ───────────────────────────────────────────── */\n@position-try --b-dropdown-bottom {\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin-top: var(--b-dropdown-gap);\n}\n\n@position-try --b-dropdown-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n  margin-bottom: var(--b-dropdown-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-dropdown {\n    transition-duration: 0ms;\n  }\n\n  .b-dropdown__item {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system90.js

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

package/dist/design-system90.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system90.js","names":[],"sources":["../src/components/BEmpty/BEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BEmptyImage } from '@/types.ts';\nimport { computed } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Customize description text. Pass empty string to show no text,\n     * or set hideDescription to true to hide the description entirely.\n     */\n    description?: string;\n    /**\n     * Set to true to hide the description area completely.\n     * @default false\n     */\n    hideDescription?: boolean;\n    /**\n     * Image type or custom image URL string.\n     * Use BEmptyImage.Default for the detailed illustration or\n     * BEmptyImage.Simple for the minimal version.\n     * @default BEmptyImage.Default\n     */\n    image?: `${BEmptyImage}` | string;\n    /**\n     * Inline styles applied to the image element.\n     */\n    imageStyle?: Record<string, string>;\n  }>(),\n  {\n    description: 'No data',\n    hideDescription: false,\n    image: BEmptyImage.Default,\n  },\n);\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Default slot: action content below description (e.g. button). */\n  default?(): unknown;\n  /** Custom description content, overrides the description prop. */\n  description?(): unknown;\n  /** Custom image content, overrides the image prop entirely. */\n  image?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isSimple = computed(() => props.image === BEmptyImage.Simple);\n\nconst isBuiltInImage = computed(\n  () => props.image === BEmptyImage.Default || props.image === BEmptyImage.Simple,\n);\n\nconst isCustomUrl = computed(\n  () => !isBuiltInImage.value && typeof props.image === 'string' && props.image.length > 0,\n);\n\nconst showDescription = computed(() => {\n  if (slots.description) return true;\n  return !props.hideDescription;\n});\n\nconst descriptionText = computed(() => {\n  return props.description;\n});\n</script>\n\n<template>\n  <div\n    class=\"b-empty\"\n    :class=\"{ 'b-empty--simple': isSimple }\"\n    role=\"status\"\n    :aria-label=\"props.description || 'No data'\"\n  >\n    <!-- Image -->\n    <div class=\"b-empty__image\" :style=\"props.imageStyle\">\n      <slot name=\"image\">\n        <!-- Default built-in illustration -->\n        <svg\n          v-if=\"props.image === BEmptyImage.Default\"\n          class=\"b-empty__svg b-empty__svg--default\"\n          viewBox=\"0 0 184 152\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g fill=\"none\" fill-rule=\"evenodd\">\n            <g transform=\"translate(24 31.67)\">\n              <ellipse class=\"b-empty__ellipse\" cx=\"67.797\" cy=\"106.89\" rx=\"67.797\" ry=\"12.668\" />\n              <path\n                class=\"b-empty__path-bg\"\n                d=\"M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z\"\n              />\n              <path\n                class=\"b-empty__path-main\"\n                d=\"M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z\"\n                transform=\"translate(13.56)\"\n              />\n              <path\n                class=\"b-empty__path-front\"\n                d=\"M33.83 0h67.933a4 4 0 014 4v93.344H29.83V4a4 4 0 014-4z\"\n              />\n              <path\n                class=\"b-empty__path-panel\"\n                d=\"M42.678 9.953h50.237a2 2 0 012 2V36.91h-54.237V11.953a2 2 0 012-2zM42.94 49.767h49.713a2.262 2.262 0 110 4.524H42.94a2.262 2.262 0 110-4.524zM42.94 61.53h49.713a2.262 2.262 0 110 4.525H42.94a2.262 2.262 0 010-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 01-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393 0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z\"\n              />\n            </g>\n            <path\n              class=\"b-empty__path-dot\"\n              d=\"M149.121 33.292l-6.83 2.65a1 1 0 01-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z\"\n            />\n            <g class=\"b-empty__path-dots-group\" transform=\"translate(149.65 15.383)\">\n              <ellipse cx=\"20.654\" cy=\"3.167\" rx=\"2.849\" ry=\"2.815\" />\n              <path d=\"M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z\" />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Simple built-in illustration -->\n        <svg\n          v-else-if=\"props.image === BEmptyImage.Simple\"\n          class=\"b-empty__svg b-empty__svg--simple\"\n          viewBox=\"0 0 64 41\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g transform=\"translate(0 1)\" fill=\"none\" fill-rule=\"evenodd\">\n            <ellipse class=\"b-empty__simple-ellipse\" cx=\"32\" cy=\"33\" rx=\"32\" ry=\"7\" />\n            <g class=\"b-empty__simple-group\" fill-rule=\"nonzero\">\n              <path\n                d=\"M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46V12.76z\"\n              />\n              <path\n                class=\"b-empty__simple-inner\"\n                d=\"M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z\"\n              />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Custom URL image -->\n        <img\n          v-else-if=\"isCustomUrl\"\n          :src=\"props.image\"\n          alt=\"\"\n          class=\"b-empty__custom-image\"\n          aria-hidden=\"true\"\n        />\n      </slot>\n    </div>\n\n    <!-- Description -->\n    <div v-if=\"showDescription\" class=\"b-empty__description\">\n      <slot name=\"description\">\n        {{ descriptionText }}\n      </slot>\n    </div>\n\n    <!-- Footer / actions -->\n    <div v-if=\"slots.default\" class=\"b-empty__footer\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-empty {\n  /* Layout */\n  --b-empty-padding: 32px 0;\n  --b-empty-text-align: center;\n\n  /* Image */\n  --b-empty-image-height: 152px;\n  --b-empty-image-height-simple: 35px;\n  --b-empty-image-margin-bottom: 8px;\n  --b-empty-image-opacity: 1;\n\n  /* Default SVG colors */\n  --b-empty-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-path-bg-fill: oklch(95% 0.003 260);\n  --b-empty-path-main-fill: oklch(97% 0.002 260);\n  --b-empty-path-front-stroke: oklch(83% 0.01 260);\n  --b-empty-path-front-fill: oklch(97% 0.002 260);\n  --b-empty-path-panel-fill: oklch(93% 0.005 260);\n  --b-empty-path-dot-fill: oklch(83% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(100% 0 0);\n\n  /* Simple SVG colors */\n  --b-empty-simple-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(83% 0.01 260);\n  --b-empty-simple-group-fill: oklch(97% 0.002 260);\n  --b-empty-simple-inner-fill: oklch(93% 0.005 260);\n\n  /* Description */\n  --b-empty-description-color: oklch(55% 0.01 260);\n  --b-empty-description-font-size: 14px;\n  --b-empty-description-line-height: 1.572;\n  --b-empty-description-margin-top: 8px;\n\n  /* Footer */\n  --b-empty-footer-margin-top: 16px;\n\n  /* Animation */\n  --b-empty-transition-duration: 200ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-empty {\n  --b-empty-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-path-bg-fill: oklch(22% 0.005 260);\n  --b-empty-path-main-fill: oklch(18% 0.003 260);\n  --b-empty-path-front-stroke: oklch(40% 0.01 260);\n  --b-empty-path-front-fill: oklch(20% 0.005 260);\n  --b-empty-path-panel-fill: oklch(28% 0.005 260);\n  --b-empty-path-dot-fill: oklch(40% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(18% 0 0);\n\n  --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n  --b-empty-simple-group-fill: oklch(20% 0.005 260);\n  --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n\n  --b-empty-description-color: oklch(70% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-empty {\n    --b-empty-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-path-bg-fill: oklch(22% 0.005 260);\n    --b-empty-path-main-fill: oklch(18% 0.003 260);\n    --b-empty-path-front-stroke: oklch(40% 0.01 260);\n    --b-empty-path-front-fill: oklch(20% 0.005 260);\n    --b-empty-path-panel-fill: oklch(28% 0.005 260);\n    --b-empty-path-dot-fill: oklch(40% 0.01 260);\n    --b-empty-path-dots-group-fill: oklch(18% 0 0);\n  \n    --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n    --b-empty-simple-group-fill: oklch(20% 0.005 260);\n    --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n  \n    --b-empty-description-color: oklch(70% 0.01 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--b-empty-padding);\n  text-align: var(--b-empty-text-align);\n  box-sizing: border-box;\n}\n\n/* ─────────────────────────────────────────────\n   Image area\n   ───────────────────────────────────────────── */\n.b-empty__image {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--b-empty-image-height);\n  margin-bottom: var(--b-empty-image-margin-bottom);\n  opacity: var(--b-empty-image-opacity);\n}\n\n.b-empty--simple .b-empty__image {\n  height: var(--b-empty-image-height-simple);\n}\n\n.b-empty__svg {\n  width: auto;\n  height: 100%;\n}\n\n.b-empty__custom-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}\n\n/* ─────────────────────────────────────────────\n   Default SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__ellipse {\n  fill: var(--b-empty-ellipse-fill);\n}\n\n.b-empty__path-bg {\n  fill: var(--b-empty-path-bg-fill);\n}\n\n.b-empty__path-main {\n  fill: var(--b-empty-path-main-fill);\n}\n\n.b-empty__path-front {\n  stroke: var(--b-empty-path-front-stroke);\n  fill: var(--b-empty-path-front-fill);\n}\n\n.b-empty__path-panel {\n  fill: var(--b-empty-path-panel-fill);\n}\n\n.b-empty__path-dot {\n  fill: var(--b-empty-path-dot-fill);\n}\n\n.b-empty__path-dots-group {\n  fill: var(--b-empty-path-dots-group-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Simple SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__simple-ellipse {\n  fill: var(--b-empty-simple-ellipse-fill);\n}\n\n.b-empty__simple-group {\n  stroke: var(--b-empty-simple-group-stroke);\n  fill: var(--b-empty-simple-group-fill);\n}\n\n.b-empty__simple-inner {\n  fill: var(--b-empty-simple-inner-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-empty__description {\n  color: var(--b-empty-description-color);\n  font-size: var(--b-empty-description-font-size);\n  line-height: var(--b-empty-description-line-height);\n  margin-top: var(--b-empty-description-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (actions area)\n   ───────────────────────────────────────────── */\n.b-empty__footer {\n  margin-top: var(--b-empty-footer-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-empty {\n    --b-empty-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system90.js","names":[],"sources":["../src/components/BDropdown/BDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\nimport type { BDropdownMenuItem, BDropdownMenuProps } from './types.ts';\nimport { BDropdownPlacement, BDropdownTrigger } from './types.ts';\n\nconst {\n  trigger = BDropdownTrigger.Hover,\n  placement = BDropdownPlacement.BottomLeft,\n  arrow = false,\n  disabled = false,\n  destroyOnHidden = false,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  menu,\n  modelValue = undefined,\n} = defineProps<{\n  /** The trigger mode which executes the dropdown action. */\n  trigger?: `${BDropdownTrigger}`;\n  /** Placement of popup menu. */\n  placement?: `${BDropdownPlacement}`;\n  /** Whether to show the dropdown chevron indicator next to the trigger. */\n  arrow?: boolean;\n  /** Whether the dropdown menu is disabled. */\n  disabled?: boolean;\n  /** Whether to destroy popup on hide. */\n  destroyOnHidden?: boolean;\n  /** Delay in ms before showing on mouseenter (hover trigger only). */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave (hover trigger only). */\n  mouseLeaveDelay?: number;\n  /** Menu configuration: items, selectable, multiple, selectedKeys. */\n  menu?: BDropdownMenuProps;\n  /** Controlled open state - bind with `v-model:open`. */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the dropdown visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model:open support. */\n  (e: 'update:modelValue', value: boolean): void;\n  /** Emitted when a menu item is clicked. */\n  (e: 'menuClick', info: { key: string | number; item: BDropdownMenuItem }): void;\n}>();\n\ndefineSlots<{\n  /** The trigger element. Receives `triggerProps` to bind ARIA attributes. */\n  default?(props: { triggerProps: Record<string, unknown> }): unknown;\n  /** Custom overlay content (replaces default menu rendering). */\n  overlay?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst dropdownId = useId();\nconst menuId = `${dropdownId}-menu`;\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst shouldRender = computed(() => {\n  if (destroyOnHidden) return isOpen.value;\n  return true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  if (disabled) return;\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  popoverRef.value?.showPopover();\n}\n\nfunction doClose() {\n  popoverRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst popoverRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocusedElement: HTMLElement | null = null;\nconst focusedIndex = ref(-1);\n\nconst focusableSelector = '[role=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\nfunction getFocusableItems(): HTMLElement[] {\n  if (!popoverRef.value) return [];\n  return Array.from(popoverRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n}\n\nfunction focusItem(index: number) {\n  const items = getFocusableItems();\n  if (items.length === 0) return;\n  const clamped = Math.max(0, Math.min(index, items.length - 1));\n  focusedIndex.value = clamped;\n  items[clamped]?.focus();\n}\n\nfunction focusFirst() {\n  nextTick(() => focusItem(0));\n}\n\nfunction focusLast() {\n  nextTick(() => {\n    const items = getFocusableItems();\n    focusItem(items.length - 1);\n  });\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    focusFirst();\n  } else {\n    focusedIndex.value = -1;\n    if (previouslyFocusedElement) {\n      nextTick(() => previouslyFocusedElement?.focus());\n    }\n  }\n});\n\n// ─────────────────────────────────────────────\n// Menu item click\n// ─────────────────────────────────────────────\nfunction onItemClick(item: BDropdownMenuItem) {\n  if (item.disabled) return;\n  emit('menuClick', { key: item.key, item });\n  requestClose();\n}\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (disabled) return;\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onContextMenu(event: MouseEvent) {\n  if (disabled) return;\n  event.preventDefault();\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  if (disabled) return;\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent) {\n  if (disabled) return;\n\n  switch (event.key) {\n    case 'Enter':\n    case ' ':\n    case 'ArrowDown':\n      event.preventDefault();\n      if (!isOpen.value) {\n        requestOpen();\n        nextTick(() => focusFirst());\n      } else {\n        focusFirst();\n      }\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      if (!isOpen.value) {\n        requestOpen();\n        nextTick(() => focusLast());\n      } else {\n        focusLast();\n      }\n      break;\n    case 'Escape':\n      if (isOpen.value) {\n        event.preventDefault();\n        requestClose();\n      }\n      break;\n  }\n}\n\nfunction onMenuKeydown(event: KeyboardEvent) {\n  const items = getFocusableItems();\n  const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault();\n      focusItem(currentIndex < items.length - 1 ? currentIndex + 1 : 0);\n      break;\n    case 'ArrowUp':\n      event.preventDefault();\n      focusItem(currentIndex > 0 ? currentIndex - 1 : items.length - 1);\n      break;\n    case 'Home':\n      event.preventDefault();\n      focusItem(0);\n      break;\n    case 'End':\n      event.preventDefault();\n      focusItem(items.length - 1);\n      break;\n    case 'Enter':\n    case ' ':\n      event.preventDefault();\n      if (document.activeElement) {\n        (document.activeElement as HTMLElement).click();\n      }\n      break;\n    case 'Escape':\n      event.preventDefault();\n      requestClose();\n      break;\n    case 'Tab':\n      requestClose();\n      break;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Popover hover (keep open when hovering content)\n// ─────────────────────────────────────────────\nfunction onPopoverMouseEnter() {\n  if (trigger === BDropdownTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onPopoverMouseLeave() {\n  if (trigger === BDropdownTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside handler\n// ─────────────────────────────────────────────\nfunction onDocumentClick(event: MouseEvent) {\n  if (!isOpen.value) return;\n  const target = event.target as Node;\n  if (toggleRef.value?.contains(target)) return;\n  if (popoverRef.value?.contains(target)) return;\n  requestClose();\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.addEventListener('keydown', onTriggerKeydown);\n\n  switch (trigger) {\n    case BDropdownTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BDropdownTrigger.ContextMenu:\n      el.addEventListener('contextmenu', onContextMenu);\n      break;\n    case BDropdownTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onTriggerKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('contextmenu', onContextMenu);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  document.removeEventListener('click', onDocumentClick, true);\n  clearTimers();\n});\n\nwatch(isOpen, (val) => {\n  if (val) {\n    document.addEventListener('click', onDocumentClick, true);\n  } else {\n    document.removeEventListener('click', onDocumentClick, true);\n  }\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      popoverRef.value?.showPopover();\n    } else {\n      popoverRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-dropdown-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BDropdownPlacement.Bottom]: 'bottom-center',\n    [BDropdownPlacement.BottomLeft]: 'bottom-left',\n    [BDropdownPlacement.BottomRight]: 'bottom-right',\n    [BDropdownPlacement.Top]: 'top-center',\n    [BDropdownPlacement.TopLeft]: 'top-left',\n    [BDropdownPlacement.TopRight]: 'top-right',\n  };\n  return map[placement] ?? 'bottom-left';\n});\n\nconst menuItems = computed(() => menu?.items ?? []);\n\nconst triggerProps = computed(() => ({\n  id: dropdownId,\n  'aria-haspopup': 'menu' as const,\n  'aria-expanded': isOpen.value,\n  'aria-disabled': disabled || undefined,\n}));\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div\n    ref=\"toggleRef\"\n    :class=\"['b-dropdown__toggle', { 'b-dropdown__toggle--open': isOpen }]\"\n    :style=\"{ anchorName: anchorName }\"\n  >\n    <slot :trigger-props=\"triggerProps\" />\n    <span v-if=\"arrow\" class=\"b-dropdown__indicator\" aria-hidden=\"true\" />\n  </div>\n\n  <div\n    ref=\"popoverRef\"\n    popover=\"manual\"\n    :class=\"['b-dropdown', placementClass]\"\n    :style=\"{ positionAnchor: anchorName }\"\n    :id=\"menuId\"\n    role=\"menu\"\n    :aria-labelledby=\"dropdownId\"\n    tabindex=\"-1\"\n    @toggle=\"onPopoverToggle\"\n    @keydown=\"onMenuKeydown\"\n    @mouseenter=\"onPopoverMouseEnter\"\n    @mouseleave=\"onPopoverMouseLeave\"\n  >\n    <template v-if=\"shouldRender\">\n      <div class=\"b-dropdown__content\">\n        <slot name=\"overlay\">\n          <template v-for=\"item in menuItems\" :key=\"item.key\">\n            <div v-if=\"item.type === 'divider'\" class=\"b-dropdown__divider\" role=\"separator\" />\n            <div\n              v-else-if=\"item.type === 'group'\"\n              class=\"b-dropdown__group\"\n              role=\"group\"\n              :aria-label=\"item.title\"\n            >\n              <div class=\"b-dropdown__group-title\">{{ item.title }}</div>\n              <div\n                v-for=\"child in item.children\"\n                :key=\"child.key\"\n                :class=\"[\n                  'b-dropdown__item',\n                  { 'b-dropdown__item--disabled': child.disabled },\n                  { 'b-dropdown__item--danger': child.danger },\n                  { 'b-dropdown__item--selected': menu?.selectedKeys?.includes(child.key) },\n                ]\"\n                role=\"menuitem\"\n                :tabindex=\"child.disabled ? -1 : 0\"\n                :aria-disabled=\"child.disabled || undefined\"\n                @click=\"onItemClick(child)\"\n              >\n                <span v-if=\"child.icon\" class=\"b-dropdown__item-icon\" aria-hidden=\"true\">{{\n                  child.icon\n                }}</span>\n                <span class=\"b-dropdown__item-label\">{{ child.label }}</span>\n              </div>\n            </div>\n            <div\n              v-else\n              :class=\"[\n                'b-dropdown__item',\n                { 'b-dropdown__item--disabled': item.disabled },\n                { 'b-dropdown__item--danger': item.danger },\n                { 'b-dropdown__item--selected': menu?.selectedKeys?.includes(item.key) },\n              ]\"\n              role=\"menuitem\"\n              :tabindex=\"item.disabled ? -1 : 0\"\n              :aria-disabled=\"item.disabled || undefined\"\n              @click=\"onItemClick(item)\"\n            >\n              <span v-if=\"item.icon\" class=\"b-dropdown__item-icon\" aria-hidden=\"true\">{{\n                item.icon\n              }}</span>\n              <span class=\"b-dropdown__item-label\">{{ item.label }}</span>\n            </div>\n          </template>\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-dropdown {\n  --b-dropdown-z-index: 1050;\n  --b-dropdown-bg: #fff;\n  --b-dropdown-color: rgba(0, 0, 0, 0.88);\n  --b-dropdown-border-radius: 8px;\n  --b-dropdown-padding-block: 4px;\n  --b-dropdown-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-dropdown-font-size: 14px;\n  --b-dropdown-line-height: 1.5714;\n  --b-dropdown-min-width: 120px;\n  --b-dropdown-max-width: 320px;\n  --b-dropdown-gap: 4px;\n  --b-dropdown-transition-duration: 200ms;\n\n  --b-dropdown-item-padding-x: 12px;\n  --b-dropdown-item-padding-y: 5px;\n  --b-dropdown-item-border-radius: 4px;\n  --b-dropdown-item-color: rgba(0, 0, 0, 0.88);\n  --b-dropdown-item-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-dropdown-item-active-bg: rgba(0, 0, 0, 0.06);\n  --b-dropdown-item-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-dropdown-item-danger-color: #ff4d4f;\n  --b-dropdown-item-danger-hover-bg: #fff2f0;\n  --b-dropdown-item-selected-bg: #e6f4ff;\n  --b-dropdown-item-selected-color: #1677ff;\n  --b-dropdown-item-icon-margin-right: 8px;\n  --b-dropdown-item-icon-size: 14px;\n\n  --b-dropdown-divider-color: rgba(5, 5, 5, 0.06);\n  --b-dropdown-divider-margin: 4px 0;\n\n  --b-dropdown-group-title-color: rgba(0, 0, 0, 0.45);\n  --b-dropdown-group-title-font-size: 12px;\n  --b-dropdown-group-title-padding: 5px 12px;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-dropdown {\n  --b-dropdown-bg: #1f1f1f;\n  --b-dropdown-color: rgba(255, 255, 255, 0.85);\n  --b-dropdown-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-dropdown-item-color: rgba(255, 255, 255, 0.85);\n  --b-dropdown-item-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-dropdown-item-active-bg: rgba(255, 255, 255, 0.12);\n  --b-dropdown-item-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-dropdown-item-danger-color: #ff7875;\n  --b-dropdown-item-danger-hover-bg: rgba(255, 77, 79, 0.12);\n  --b-dropdown-item-selected-bg: rgba(22, 119, 255, 0.15);\n  --b-dropdown-item-selected-color: #4096ff;\n  --b-dropdown-divider-color: rgba(253, 253, 253, 0.12);\n  --b-dropdown-group-title-color: rgba(255, 255, 255, 0.45);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-dropdown {\n    --b-dropdown-bg: #1f1f1f;\n    --b-dropdown-color: rgba(255, 255, 255, 0.85);\n    --b-dropdown-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-dropdown-item-color: rgba(255, 255, 255, 0.85);\n    --b-dropdown-item-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-dropdown-item-active-bg: rgba(255, 255, 255, 0.12);\n    --b-dropdown-item-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-dropdown-item-danger-color: #ff7875;\n    --b-dropdown-item-danger-hover-bg: rgba(255, 77, 79, 0.12);\n    --b-dropdown-item-selected-bg: rgba(22, 119, 255, 0.15);\n    --b-dropdown-item-selected-color: #4096ff;\n    --b-dropdown-divider-color: rgba(253, 253, 253, 0.12);\n    --b-dropdown-group-title-color: rgba(255, 255, 255, 0.45);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-dropdown__toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  cursor: pointer;\n\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Chevron indicator (CSS-only)\n   ───────────────────────────────────────────── */\n.b-dropdown__indicator {\n  display: inline-block;\n  width: 0.625em;\n  height: 0.625em;\n  border-right: 1.5px solid currentColor;\n  border-bottom: 1.5px solid currentColor;\n  transform: rotate(45deg) translateY(-2px);\n  transition: transform 200ms;\n  opacity: 0.65;\n  flex-shrink: 0;\n}\n\n.b-dropdown__toggle--open .b-dropdown__indicator {\n  transform: rotate(-135deg) translateY(-1px);\n}\n\n/* ─────────────────────────────────────────────\n   Dropdown popover\n   ───────────────────────────────────────────── */\n.b-dropdown {\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  z-index: var(--b-dropdown-z-index);\n  min-width: var(--b-dropdown-min-width);\n  max-width: var(--b-dropdown-max-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  transition:\n    display var(--b-dropdown-transition-duration),\n    opacity var(--b-dropdown-transition-duration);\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  /* ── Placement: Bottom ── */\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-dropdown-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-dropdown-gap);\n  }\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-dropdown-gap);\n  }\n\n  /* ── Placement: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-dropdown-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-dropdown-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-dropdown-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Content wrapper\n   ───────────────────────────────────────────── */\n.b-dropdown__content {\n  background: var(--b-dropdown-bg);\n  color: var(--b-dropdown-color);\n  font-size: var(--b-dropdown-font-size);\n  line-height: var(--b-dropdown-line-height);\n  padding: var(--b-dropdown-padding-block) 0;\n  border-radius: var(--b-dropdown-border-radius);\n  box-shadow: var(--b-dropdown-shadow);\n  overflow: hidden auto;\n  max-height: 60vh;\n}\n\n/* ─────────────────────────────────────────────\n   Menu items\n   ───────────────────────────────────────────── */\n.b-dropdown__item {\n  display: flex;\n  align-items: center;\n  padding: var(--b-dropdown-item-padding-y) var(--b-dropdown-item-padding-x);\n  margin: 0 4px;\n  border-radius: var(--b-dropdown-item-border-radius);\n  color: var(--b-dropdown-item-color);\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  transition: background-color 150ms;\n\n  &:hover,\n  &:focus-visible {\n    background: var(--b-dropdown-item-hover-bg);\n  }\n\n  &:active {\n    background: var(--b-dropdown-item-active-bg);\n  }\n\n  &--disabled {\n    color: var(--b-dropdown-item-disabled-color);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  &--danger {\n    color: var(--b-dropdown-item-danger-color);\n\n    &:hover,\n    &:focus-visible {\n      background: var(--b-dropdown-item-danger-hover-bg);\n    }\n  }\n\n  &--selected {\n    background: var(--b-dropdown-item-selected-bg);\n    color: var(--b-dropdown-item-selected-color);\n  }\n}\n\n.b-dropdown__item-icon {\n  margin-right: var(--b-dropdown-item-icon-margin-right);\n  font-size: var(--b-dropdown-item-icon-size);\n  display: inline-flex;\n  align-items: center;\n}\n\n.b-dropdown__item-label {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─────────────────────────────────────────────\n   Divider\n   ───────────────────────────────────────────── */\n.b-dropdown__divider {\n  height: 1px;\n  margin: var(--b-dropdown-divider-margin);\n  background: var(--b-dropdown-divider-color);\n}\n\n/* ─────────────────────────────────────────────\n   Group\n   ───────────────────────────────────────────── */\n.b-dropdown__group-title {\n  padding: var(--b-dropdown-group-title-padding);\n  color: var(--b-dropdown-group-title-color);\n  font-size: var(--b-dropdown-group-title-font-size);\n  font-weight: 500;\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks\n   ───────────────────────────────────────────── */\n@position-try --b-dropdown-bottom {\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin-top: var(--b-dropdown-gap);\n}\n\n@position-try --b-dropdown-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n  margin-bottom: var(--b-dropdown-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-dropdown {\n    transition-duration: 0ms;\n  }\n\n  .b-dropdown__item {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system91.js

@@ -1,14 +1,60 @@
-//#region src/components/BFloatButton/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Circle = "circle", e.Square = "square", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Default = "default", e.Primary = "primary", e;
-}({}), n = /* @__PURE__ */ function(e) {
-	return e.Click = "click", e.Hover = "hover", e;
-}({}), r = /* @__PURE__ */ function(e) {
-	return e.Top = "top", e.Right = "right", e.Bottom = "bottom", e.Left = "left", e;
-}({});
+import { BEmptyImage as e } from "./design-system3.js";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createStaticVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p, useSlots as m } from "vue";
+//#region src/components/BEmpty/BEmpty.vue?vue&type=script&setup=true&lang.ts
+var h = ["aria-label"], g = {
+	key: 0,
+	class: "b-empty__svg b-empty__svg--default",
+	viewBox: "0 0 184 152",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true",
+	focusable: "false"
+}, _ = {
+	key: 1,
+	class: "b-empty__svg b-empty__svg--simple",
+	viewBox: "0 0 64 41",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true",
+	focusable: "false"
+}, v = ["src"], y = {
+	key: 0,
+	class: "b-empty__description"
+}, b = {
+	key: 1,
+	class: "b-empty__footer"
+}, x = /* @__PURE__ */ s({
+	__name: "BEmpty",
+	props: {
+		description: { default: "No data" },
+		hideDescription: {
+			type: Boolean,
+			default: !1
+		},
+		image: { default: e.Default },
+		imageStyle: {}
+	},
+	setup(s) {
+		let x = s, S = m(), C = t(() => x.image === e.Simple), w = t(() => x.image === e.Default || x.image === e.Simple), T = t(() => !w.value && typeof x.image == "string" && x.image.length > 0), E = t(() => S.description ? !0 : !x.hideDescription), D = t(() => x.description);
+		return (t, s) => (u(), r("div", {
+			class: c(["b-empty", { "b-empty--simple": C.value }]),
+			role: "status",
+			"aria-label": x.description || "No data"
+		}, [
+			i("div", {
+				class: "b-empty__image",
+				style: l(x.imageStyle)
+			}, [d(t.$slots, "image", {}, () => [x.image === p(e).Default ? (u(), r("svg", g, [...s[0] ||= [a("<g fill=\"none\" fill-rule=\"evenodd\"><g transform=\"translate(24 31.67)\"><ellipse class=\"b-empty__ellipse\" cx=\"67.797\" cy=\"106.89\" rx=\"67.797\" ry=\"12.668\"></ellipse><path class=\"b-empty__path-bg\" d=\"M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z\"></path><path class=\"b-empty__path-main\" d=\"M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z\" transform=\"translate(13.56)\"></path><path class=\"b-empty__path-front\" d=\"M33.83 0h67.933a4 4 0 014 4v93.344H29.83V4a4 4 0 014-4z\"></path><path class=\"b-empty__path-panel\" d=\"M42.678 9.953h50.237a2 2 0 012 2V36.91h-54.237V11.953a2 2 0 012-2zM42.94 49.767h49.713a2.262 2.262 0 110 4.524H42.94a2.262 2.262 0 110-4.524zM42.94 61.53h49.713a2.262 2.262 0 110 4.525H42.94a2.262 2.262 0 010-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 01-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393 0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z\"></path></g><path class=\"b-empty__path-dot\" d=\"M149.121 33.292l-6.83 2.65a1 1 0 01-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z\"></path><g class=\"b-empty__path-dots-group\" transform=\"translate(149.65 15.383)\"><ellipse cx=\"20.654\" cy=\"3.167\" rx=\"2.849\" ry=\"2.815\"></ellipse><path d=\"M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z\"></path></g></g>", 1)]])) : x.image === p(e).Simple ? (u(), r("svg", _, [...s[1] ||= [a("<g transform=\"translate(0 1)\" fill=\"none\" fill-rule=\"evenodd\"><ellipse class=\"b-empty__simple-ellipse\" cx=\"32\" cy=\"33\" rx=\"32\" ry=\"7\"></ellipse><g class=\"b-empty__simple-group\" fill-rule=\"nonzero\"><path d=\"M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46V12.76z\"></path><path class=\"b-empty__simple-inner\" d=\"M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z\"></path></g></g>", 1)]])) : T.value ? (u(), r("img", {
+				key: 2,
+				src: x.image,
+				alt: "",
+				class: "b-empty__custom-image",
+				"aria-hidden": "true"
+			}, null, 8, v)) : n("", !0)])], 4),
+			E.value ? (u(), r("div", y, [d(t.$slots, "description", {}, () => [o(f(D.value), 1)])])) : n("", !0),
+			S.default ? (u(), r("div", b, [d(t.$slots, "default")])) : n("", !0)
+		], 10, h));
+	}
+});
 //#endregion
-export { r as BFloatButtonGroupPlacement, e as BFloatButtonShape, n as BFloatButtonTrigger, t as BFloatButtonType };
+export { x as default };
 
 //# sourceMappingURL=design-system91.js.map

package/dist/design-system91.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system91.js","names":[],"sources":["../src/components/BFloatButton/types.ts"],"sourcesContent":["export enum BFloatButtonShape {\n  Circle = 'circle',\n  Square = 'square',\n}\n\nexport enum BFloatButtonType {\n  Default = 'default',\n  Primary = 'primary',\n}\n\nexport enum BFloatButtonTrigger {\n  Click = 'click',\n  Hover = 'hover',\n}\n\nexport enum BFloatButtonGroupPlacement {\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left',\n}\n\nexport interface BFloatButtonBadgeProps {\n  /** Badge count number */\n  count?: number;\n  /** Whether to show badge even when count is 0 */\n  showZero?: boolean;\n  /** Max count to display before showing overflow text */\n  overflowCount?: number;\n  /** Show a red dot instead of a count */\n  dot?: boolean;\n  /** Custom badge text color */\n  color?: string;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,SAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,UAAA,WACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,MAAA,OACA,EAAA,QAAA,SACA,EAAA,SAAA,UACA,EAAA,OAAA;KACD"}
+{"version":3,"file":"design-system91.js","names":[],"sources":["../src/components/BEmpty/BEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BEmptyImage } from '@/types.ts';\nimport { computed } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Customize description text. Pass empty string to show no text,\n     * or set hideDescription to true to hide the description entirely.\n     */\n    description?: string;\n    /**\n     * Set to true to hide the description area completely.\n     * @default false\n     */\n    hideDescription?: boolean;\n    /**\n     * Image type or custom image URL string.\n     * Use BEmptyImage.Default for the detailed illustration or\n     * BEmptyImage.Simple for the minimal version.\n     * @default BEmptyImage.Default\n     */\n    image?: `${BEmptyImage}` | string;\n    /**\n     * Inline styles applied to the image element.\n     */\n    imageStyle?: Record<string, string>;\n  }>(),\n  {\n    description: 'No data',\n    hideDescription: false,\n    image: BEmptyImage.Default,\n  },\n);\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Default slot: action content below description (e.g. button). */\n  default?(): unknown;\n  /** Custom description content, overrides the description prop. */\n  description?(): unknown;\n  /** Custom image content, overrides the image prop entirely. */\n  image?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isSimple = computed(() => props.image === BEmptyImage.Simple);\n\nconst isBuiltInImage = computed(\n  () => props.image === BEmptyImage.Default || props.image === BEmptyImage.Simple,\n);\n\nconst isCustomUrl = computed(\n  () => !isBuiltInImage.value && typeof props.image === 'string' && props.image.length > 0,\n);\n\nconst showDescription = computed(() => {\n  if (slots.description) return true;\n  return !props.hideDescription;\n});\n\nconst descriptionText = computed(() => {\n  return props.description;\n});\n</script>\n\n<template>\n  <div\n    class=\"b-empty\"\n    :class=\"{ 'b-empty--simple': isSimple }\"\n    role=\"status\"\n    :aria-label=\"props.description || 'No data'\"\n  >\n    <!-- Image -->\n    <div class=\"b-empty__image\" :style=\"props.imageStyle\">\n      <slot name=\"image\">\n        <!-- Default built-in illustration -->\n        <svg\n          v-if=\"props.image === BEmptyImage.Default\"\n          class=\"b-empty__svg b-empty__svg--default\"\n          viewBox=\"0 0 184 152\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g fill=\"none\" fill-rule=\"evenodd\">\n            <g transform=\"translate(24 31.67)\">\n              <ellipse class=\"b-empty__ellipse\" cx=\"67.797\" cy=\"106.89\" rx=\"67.797\" ry=\"12.668\" />\n              <path\n                class=\"b-empty__path-bg\"\n                d=\"M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z\"\n              />\n              <path\n                class=\"b-empty__path-main\"\n                d=\"M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z\"\n                transform=\"translate(13.56)\"\n              />\n              <path\n                class=\"b-empty__path-front\"\n                d=\"M33.83 0h67.933a4 4 0 014 4v93.344H29.83V4a4 4 0 014-4z\"\n              />\n              <path\n                class=\"b-empty__path-panel\"\n                d=\"M42.678 9.953h50.237a2 2 0 012 2V36.91h-54.237V11.953a2 2 0 012-2zM42.94 49.767h49.713a2.262 2.262 0 110 4.524H42.94a2.262 2.262 0 110-4.524zM42.94 61.53h49.713a2.262 2.262 0 110 4.525H42.94a2.262 2.262 0 010-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 01-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393 0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z\"\n              />\n            </g>\n            <path\n              class=\"b-empty__path-dot\"\n              d=\"M149.121 33.292l-6.83 2.65a1 1 0 01-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z\"\n            />\n            <g class=\"b-empty__path-dots-group\" transform=\"translate(149.65 15.383)\">\n              <ellipse cx=\"20.654\" cy=\"3.167\" rx=\"2.849\" ry=\"2.815\" />\n              <path d=\"M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z\" />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Simple built-in illustration -->\n        <svg\n          v-else-if=\"props.image === BEmptyImage.Simple\"\n          class=\"b-empty__svg b-empty__svg--simple\"\n          viewBox=\"0 0 64 41\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g transform=\"translate(0 1)\" fill=\"none\" fill-rule=\"evenodd\">\n            <ellipse class=\"b-empty__simple-ellipse\" cx=\"32\" cy=\"33\" rx=\"32\" ry=\"7\" />\n            <g class=\"b-empty__simple-group\" fill-rule=\"nonzero\">\n              <path\n                d=\"M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46V12.76z\"\n              />\n              <path\n                class=\"b-empty__simple-inner\"\n                d=\"M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z\"\n              />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Custom URL image -->\n        <img\n          v-else-if=\"isCustomUrl\"\n          :src=\"props.image\"\n          alt=\"\"\n          class=\"b-empty__custom-image\"\n          aria-hidden=\"true\"\n        />\n      </slot>\n    </div>\n\n    <!-- Description -->\n    <div v-if=\"showDescription\" class=\"b-empty__description\">\n      <slot name=\"description\">\n        {{ descriptionText }}\n      </slot>\n    </div>\n\n    <!-- Footer / actions -->\n    <div v-if=\"slots.default\" class=\"b-empty__footer\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-empty {\n  /* Layout */\n  --b-empty-padding: 32px 0;\n  --b-empty-text-align: center;\n\n  /* Image */\n  --b-empty-image-height: 152px;\n  --b-empty-image-height-simple: 35px;\n  --b-empty-image-margin-bottom: 8px;\n  --b-empty-image-opacity: 1;\n\n  /* Default SVG colors */\n  --b-empty-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-path-bg-fill: oklch(95% 0.003 260);\n  --b-empty-path-main-fill: oklch(97% 0.002 260);\n  --b-empty-path-front-stroke: oklch(83% 0.01 260);\n  --b-empty-path-front-fill: oklch(97% 0.002 260);\n  --b-empty-path-panel-fill: oklch(93% 0.005 260);\n  --b-empty-path-dot-fill: oklch(83% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(100% 0 0);\n\n  /* Simple SVG colors */\n  --b-empty-simple-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(83% 0.01 260);\n  --b-empty-simple-group-fill: oklch(97% 0.002 260);\n  --b-empty-simple-inner-fill: oklch(93% 0.005 260);\n\n  /* Description */\n  --b-empty-description-color: oklch(55% 0.01 260);\n  --b-empty-description-font-size: 14px;\n  --b-empty-description-line-height: 1.572;\n  --b-empty-description-margin-top: 8px;\n\n  /* Footer */\n  --b-empty-footer-margin-top: 16px;\n\n  /* Animation */\n  --b-empty-transition-duration: 200ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-empty {\n  --b-empty-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-path-bg-fill: oklch(22% 0.005 260);\n  --b-empty-path-main-fill: oklch(18% 0.003 260);\n  --b-empty-path-front-stroke: oklch(40% 0.01 260);\n  --b-empty-path-front-fill: oklch(20% 0.005 260);\n  --b-empty-path-panel-fill: oklch(28% 0.005 260);\n  --b-empty-path-dot-fill: oklch(40% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(18% 0 0);\n\n  --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n  --b-empty-simple-group-fill: oklch(20% 0.005 260);\n  --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n\n  --b-empty-description-color: oklch(70% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-empty {\n    --b-empty-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-path-bg-fill: oklch(22% 0.005 260);\n    --b-empty-path-main-fill: oklch(18% 0.003 260);\n    --b-empty-path-front-stroke: oklch(40% 0.01 260);\n    --b-empty-path-front-fill: oklch(20% 0.005 260);\n    --b-empty-path-panel-fill: oklch(28% 0.005 260);\n    --b-empty-path-dot-fill: oklch(40% 0.01 260);\n    --b-empty-path-dots-group-fill: oklch(18% 0 0);\n  \n    --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n    --b-empty-simple-group-fill: oklch(20% 0.005 260);\n    --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n  \n    --b-empty-description-color: oklch(70% 0.01 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--b-empty-padding);\n  text-align: var(--b-empty-text-align);\n  box-sizing: border-box;\n}\n\n/* ─────────────────────────────────────────────\n   Image area\n   ───────────────────────────────────────────── */\n.b-empty__image {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--b-empty-image-height);\n  margin-bottom: var(--b-empty-image-margin-bottom);\n  opacity: var(--b-empty-image-opacity);\n}\n\n.b-empty--simple .b-empty__image {\n  height: var(--b-empty-image-height-simple);\n}\n\n.b-empty__svg {\n  width: auto;\n  height: 100%;\n}\n\n.b-empty__custom-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}\n\n/* ─────────────────────────────────────────────\n   Default SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__ellipse {\n  fill: var(--b-empty-ellipse-fill);\n}\n\n.b-empty__path-bg {\n  fill: var(--b-empty-path-bg-fill);\n}\n\n.b-empty__path-main {\n  fill: var(--b-empty-path-main-fill);\n}\n\n.b-empty__path-front {\n  stroke: var(--b-empty-path-front-stroke);\n  fill: var(--b-empty-path-front-fill);\n}\n\n.b-empty__path-panel {\n  fill: var(--b-empty-path-panel-fill);\n}\n\n.b-empty__path-dot {\n  fill: var(--b-empty-path-dot-fill);\n}\n\n.b-empty__path-dots-group {\n  fill: var(--b-empty-path-dots-group-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Simple SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__simple-ellipse {\n  fill: var(--b-empty-simple-ellipse-fill);\n}\n\n.b-empty__simple-group {\n  stroke: var(--b-empty-simple-group-stroke);\n  fill: var(--b-empty-simple-group-fill);\n}\n\n.b-empty__simple-inner {\n  fill: var(--b-empty-simple-inner-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-empty__description {\n  color: var(--b-empty-description-color);\n  font-size: var(--b-empty-description-font-size);\n  line-height: var(--b-empty-description-line-height);\n  margin-top: var(--b-empty-description-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (actions area)\n   ───────────────────────────────────────────── */\n.b-empty__footer {\n  margin-top: var(--b-empty-footer-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-empty {\n    --b-empty-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,IAAM,IAAQ,GAkCR,IAAQ,GAOV,EAKE,IAAW,QAAe,EAAM,UAAU,EAAY,OAAO,EAE7D,IAAiB,QACf,EAAM,UAAU,EAAY,WAAW,EAAM,UAAU,EAAY,OAC1E,EAEK,IAAc,QACZ,CAAC,EAAe,SAAS,OAAO,EAAM,SAAU,YAAY,EAAM,MAAM,SAAS,EACxF,EAEK,IAAkB,QAClB,EAAM,cAAoB,KACvB,CAAC,EAAM,gBACd,EAEI,IAAkB,QACf,EAAM,YACb;yBAIA,EA+FM,OAAA;GA9FJ,OAAK,EAAA,CAAC,WAAS,EAAA,mBACc,EAAA,OAAQ,CAAA,CAAA;GACrC,MAAK;GACJ,cAAY,EAAM,eAAW;;GAG9B,EA2EM,OAAA;IA3ED,OAAM;IAAkB,OAAK,EAAE,EAAM,WAAU;OAClD,EAyEO,EAAA,QAAA,SAAA,EAAA,QAAA,CAtEG,EAAM,UAAU,EAAA,EAAW,CAAC,WAAA,GAAA,EADpC,EAsCM,OAtCN,GAsCM,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAA,yuDAAA,EAAA,CAAA,CAAA,CAAA,IAIO,EAAM,UAAU,EAAA,EAAW,CAAC,UAAA,GAAA,EADzC,EAoBM,OApBN,GAoBM,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAA,uoBAAA,EAAA,CAAA,CAAA,CAAA,IAIO,EAAA,SAAA,GAAA,EADb,EAME,OAAA;;IAJC,KAAK,EAAM;IACZ,KAAI;IACJ,OAAM;IACN,eAAY;;GAMP,EAAA,SAAA,GAAA,EAAX,EAIM,OAJN,GAIM,CAHJ,EAEO,EAAA,QAAA,eAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,MAAe,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAKX,EAAM,WAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/design-system93.js

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

package/dist/design-system93.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system93.js","names":[],"sources":["../src/components/BEmpty/BEmpty.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BEmptyImage } from '@/types.ts';\nimport { computed } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * Customize description text. Pass empty string to show no text,\n     * or set hideDescription to true to hide the description entirely.\n     */\n    description?: string;\n    /**\n     * Set to true to hide the description area completely.\n     * @default false\n     */\n    hideDescription?: boolean;\n    /**\n     * Image type or custom image URL string.\n     * Use BEmptyImage.Default for the detailed illustration or\n     * BEmptyImage.Simple for the minimal version.\n     * @default BEmptyImage.Default\n     */\n    image?: `${BEmptyImage}` | string;\n    /**\n     * Inline styles applied to the image element.\n     */\n    imageStyle?: Record<string, string>;\n  }>(),\n  {\n    description: 'No data',\n    hideDescription: false,\n    image: BEmptyImage.Default,\n  },\n);\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Default slot: action content below description (e.g. button). */\n  default?(): unknown;\n  /** Custom description content, overrides the description prop. */\n  description?(): unknown;\n  /** Custom image content, overrides the image prop entirely. */\n  image?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isSimple = computed(() => props.image === BEmptyImage.Simple);\n\nconst isBuiltInImage = computed(\n  () => props.image === BEmptyImage.Default || props.image === BEmptyImage.Simple,\n);\n\nconst isCustomUrl = computed(\n  () => !isBuiltInImage.value && typeof props.image === 'string' && props.image.length > 0,\n);\n\nconst showDescription = computed(() => {\n  if (slots.description) return true;\n  return !props.hideDescription;\n});\n\nconst descriptionText = computed(() => {\n  return props.description;\n});\n</script>\n\n<template>\n  <div\n    class=\"b-empty\"\n    :class=\"{ 'b-empty--simple': isSimple }\"\n    role=\"status\"\n    :aria-label=\"props.description || 'No data'\"\n  >\n    <!-- Image -->\n    <div class=\"b-empty__image\" :style=\"props.imageStyle\">\n      <slot name=\"image\">\n        <!-- Default built-in illustration -->\n        <svg\n          v-if=\"props.image === BEmptyImage.Default\"\n          class=\"b-empty__svg b-empty__svg--default\"\n          viewBox=\"0 0 184 152\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g fill=\"none\" fill-rule=\"evenodd\">\n            <g transform=\"translate(24 31.67)\">\n              <ellipse class=\"b-empty__ellipse\" cx=\"67.797\" cy=\"106.89\" rx=\"67.797\" ry=\"12.668\" />\n              <path\n                class=\"b-empty__path-bg\"\n                d=\"M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z\"\n              />\n              <path\n                class=\"b-empty__path-main\"\n                d=\"M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z\"\n                transform=\"translate(13.56)\"\n              />\n              <path\n                class=\"b-empty__path-front\"\n                d=\"M33.83 0h67.933a4 4 0 014 4v93.344H29.83V4a4 4 0 014-4z\"\n              />\n              <path\n                class=\"b-empty__path-panel\"\n                d=\"M42.678 9.953h50.237a2 2 0 012 2V36.91h-54.237V11.953a2 2 0 012-2zM42.94 49.767h49.713a2.262 2.262 0 110 4.524H42.94a2.262 2.262 0 110-4.524zM42.94 61.53h49.713a2.262 2.262 0 110 4.525H42.94a2.262 2.262 0 010-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 01-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393 0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z\"\n              />\n            </g>\n            <path\n              class=\"b-empty__path-dot\"\n              d=\"M149.121 33.292l-6.83 2.65a1 1 0 01-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z\"\n            />\n            <g class=\"b-empty__path-dots-group\" transform=\"translate(149.65 15.383)\">\n              <ellipse cx=\"20.654\" cy=\"3.167\" rx=\"2.849\" ry=\"2.815\" />\n              <path d=\"M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z\" />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Simple built-in illustration -->\n        <svg\n          v-else-if=\"props.image === BEmptyImage.Simple\"\n          class=\"b-empty__svg b-empty__svg--simple\"\n          viewBox=\"0 0 64 41\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <g transform=\"translate(0 1)\" fill=\"none\" fill-rule=\"evenodd\">\n            <ellipse class=\"b-empty__simple-ellipse\" cx=\"32\" cy=\"33\" rx=\"32\" ry=\"7\" />\n            <g class=\"b-empty__simple-group\" fill-rule=\"nonzero\">\n              <path\n                d=\"M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46V12.76z\"\n              />\n              <path\n                class=\"b-empty__simple-inner\"\n                d=\"M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z\"\n              />\n            </g>\n          </g>\n        </svg>\n\n        <!-- Custom URL image -->\n        <img\n          v-else-if=\"isCustomUrl\"\n          :src=\"props.image\"\n          alt=\"\"\n          class=\"b-empty__custom-image\"\n          aria-hidden=\"true\"\n        />\n      </slot>\n    </div>\n\n    <!-- Description -->\n    <div v-if=\"showDescription\" class=\"b-empty__description\">\n      <slot name=\"description\">\n        {{ descriptionText }}\n      </slot>\n    </div>\n\n    <!-- Footer / actions -->\n    <div v-if=\"slots.default\" class=\"b-empty__footer\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-empty {\n  /* Layout */\n  --b-empty-padding: 32px 0;\n  --b-empty-text-align: center;\n\n  /* Image */\n  --b-empty-image-height: 152px;\n  --b-empty-image-height-simple: 35px;\n  --b-empty-image-margin-bottom: 8px;\n  --b-empty-image-opacity: 1;\n\n  /* Default SVG colors */\n  --b-empty-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-path-bg-fill: oklch(95% 0.003 260);\n  --b-empty-path-main-fill: oklch(97% 0.002 260);\n  --b-empty-path-front-stroke: oklch(83% 0.01 260);\n  --b-empty-path-front-fill: oklch(97% 0.002 260);\n  --b-empty-path-panel-fill: oklch(93% 0.005 260);\n  --b-empty-path-dot-fill: oklch(83% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(100% 0 0);\n\n  /* Simple SVG colors */\n  --b-empty-simple-ellipse-fill: oklch(93% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(83% 0.01 260);\n  --b-empty-simple-group-fill: oklch(97% 0.002 260);\n  --b-empty-simple-inner-fill: oklch(93% 0.005 260);\n\n  /* Description */\n  --b-empty-description-color: oklch(55% 0.01 260);\n  --b-empty-description-font-size: 14px;\n  --b-empty-description-line-height: 1.572;\n  --b-empty-description-margin-top: 8px;\n\n  /* Footer */\n  --b-empty-footer-margin-top: 16px;\n\n  /* Animation */\n  --b-empty-transition-duration: 200ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-empty {\n  --b-empty-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-path-bg-fill: oklch(22% 0.005 260);\n  --b-empty-path-main-fill: oklch(18% 0.003 260);\n  --b-empty-path-front-stroke: oklch(40% 0.01 260);\n  --b-empty-path-front-fill: oklch(20% 0.005 260);\n  --b-empty-path-panel-fill: oklch(28% 0.005 260);\n  --b-empty-path-dot-fill: oklch(40% 0.01 260);\n  --b-empty-path-dots-group-fill: oklch(18% 0 0);\n\n  --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n  --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n  --b-empty-simple-group-fill: oklch(20% 0.005 260);\n  --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n\n  --b-empty-description-color: oklch(70% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-empty {\n    --b-empty-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-path-bg-fill: oklch(22% 0.005 260);\n    --b-empty-path-main-fill: oklch(18% 0.003 260);\n    --b-empty-path-front-stroke: oklch(40% 0.01 260);\n    --b-empty-path-front-fill: oklch(20% 0.005 260);\n    --b-empty-path-panel-fill: oklch(28% 0.005 260);\n    --b-empty-path-dot-fill: oklch(40% 0.01 260);\n    --b-empty-path-dots-group-fill: oklch(18% 0 0);\n  \n    --b-empty-simple-ellipse-fill: oklch(25% 0.005 260);\n    --b-empty-simple-group-stroke: oklch(40% 0.01 260);\n    --b-empty-simple-group-fill: oklch(20% 0.005 260);\n    --b-empty-simple-inner-fill: oklch(28% 0.005 260);\n  \n    --b-empty-description-color: oklch(70% 0.01 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--b-empty-padding);\n  text-align: var(--b-empty-text-align);\n  box-sizing: border-box;\n}\n\n/* ─────────────────────────────────────────────\n   Image area\n   ───────────────────────────────────────────── */\n.b-empty__image {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--b-empty-image-height);\n  margin-bottom: var(--b-empty-image-margin-bottom);\n  opacity: var(--b-empty-image-opacity);\n}\n\n.b-empty--simple .b-empty__image {\n  height: var(--b-empty-image-height-simple);\n}\n\n.b-empty__svg {\n  width: auto;\n  height: 100%;\n}\n\n.b-empty__custom-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n}\n\n/* ─────────────────────────────────────────────\n   Default SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__ellipse {\n  fill: var(--b-empty-ellipse-fill);\n}\n\n.b-empty__path-bg {\n  fill: var(--b-empty-path-bg-fill);\n}\n\n.b-empty__path-main {\n  fill: var(--b-empty-path-main-fill);\n}\n\n.b-empty__path-front {\n  stroke: var(--b-empty-path-front-stroke);\n  fill: var(--b-empty-path-front-fill);\n}\n\n.b-empty__path-panel {\n  fill: var(--b-empty-path-panel-fill);\n}\n\n.b-empty__path-dot {\n  fill: var(--b-empty-path-dot-fill);\n}\n\n.b-empty__path-dots-group {\n  fill: var(--b-empty-path-dots-group-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Simple SVG illustration colors\n   ───────────────────────────────────────────── */\n.b-empty__simple-ellipse {\n  fill: var(--b-empty-simple-ellipse-fill);\n}\n\n.b-empty__simple-group {\n  stroke: var(--b-empty-simple-group-stroke);\n  fill: var(--b-empty-simple-group-fill);\n}\n\n.b-empty__simple-inner {\n  fill: var(--b-empty-simple-inner-fill);\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-empty__description {\n  color: var(--b-empty-description-color);\n  font-size: var(--b-empty-description-font-size);\n  line-height: var(--b-empty-description-line-height);\n  margin-top: var(--b-empty-description-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (actions area)\n   ───────────────────────────────────────────── */\n.b-empty__footer {\n  margin-top: var(--b-empty-footer-margin-top);\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-empty {\n    --b-empty-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system94.js

@@ -1,8 +1,14 @@
-import e from "./design-system92.js";
-/* empty css                */
-//#region src/components/BFloatButton/BFloatButton.vue
-var t = e;
+//#region src/components/BFloatButton/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Circle = "circle", e.Square = "square", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.Default = "default", e.Primary = "primary", e;
+}({}), n = /* @__PURE__ */ function(e) {
+	return e.Click = "click", e.Hover = "hover", e;
+}({}), r = /* @__PURE__ */ function(e) {
+	return e.Top = "top", e.Right = "right", e.Bottom = "bottom", e.Left = "left", e;
+}({});
 //#endregion
-export { t as default };
+export { r as BFloatButtonGroupPlacement, e as BFloatButtonShape, n as BFloatButtonTrigger, t as BFloatButtonType };
 
 //# sourceMappingURL=design-system94.js.map

package/dist/design-system94.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system94.js","names":[],"sources":["../src/components/BFloatButton/BFloatButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { type BIconName } from '@/components/BIcon/BIconEnum.ts';\nimport { computed } from 'vue';\nimport type { BFloatButtonBadgeProps } from './types.ts';\nimport { BFloatButtonShape, BFloatButtonType } from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  icon,\n  description,\n  tooltip,\n  type = BFloatButtonType.Default,\n  shape = BFloatButtonShape.Circle,\n  href,\n  target = '_blank',\n  htmlType = 'button',\n  badge,\n  disabled = false,\n  ariaLabel,\n} = defineProps<{\n  /**\n   * Icon name for the float button.\n   * @example 'arrow-up', 'plus', 'question'\n   */\n  icon?: `${BIconName}`;\n  /**\n   * Description text shown below the icon (square shape only).\n   */\n  description?: string;\n  /**\n   * Tooltip text shown on hover.\n   */\n  tooltip?: string;\n  /**\n   * Visual type of the button.\n   * @default 'default'\n   */\n  type?: `${BFloatButtonType}`;\n  /**\n   * Shape of the button.\n   * @default 'circle'\n   */\n  shape?: `${BFloatButtonShape}`;\n  /**\n   * When set, renders as an anchor element with this href.\n   */\n  href?: string;\n  /**\n   * Link target attribute (only used with href).\n   * @default '_blank'\n   */\n  target?: string;\n  /**\n   * HTML button type attribute (only used when not href).\n   * @default 'button'\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  /**\n   * Badge configuration to display on the button.\n   */\n  badge?: BFloatButtonBadgeProps;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Accessible label for the button (important when no visible text).\n   */\n  ariaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the button is clicked. */\n  (e: 'click', event: MouseEvent): void;\n}>();\n\ndefineSlots<{\n  /** Custom icon content. */\n  icon?(): unknown;\n  /** Description content (square shape only). */\n  description?(): unknown;\n  /** Tooltip content. */\n  tooltip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed helpers\n// ─────────────────────────────────────────────\nconst isType = (value: `${BFloatButtonType}`) => type === value;\nconst isShape = (value: `${BFloatButtonShape}`) => shape === value;\n\nconst badgeCount = computed(() => {\n  if (!badge) return undefined;\n  if (badge.dot) return undefined;\n  return badge.count;\n});\n\nconst showBadgeDot = computed(() => badge?.dot ?? false);\n\nconst badgeOverflow = computed(() => badge?.overflowCount ?? 99);\n\nconst badgeDisplayCount = computed(() => {\n  const count = badgeCount.value;\n  if (count === undefined) return undefined;\n  if (count === 0 && !badge?.showZero) return undefined;\n  return count > badgeOverflow.value ? `${badgeOverflow.value}+` : String(count);\n});\n\nconst showBadge = computed(() => {\n  return showBadgeDot.value || badgeDisplayCount.value !== undefined;\n});\n\nfunction handleClick(event: MouseEvent) {\n  if (disabled) return;\n  emit('click', event);\n}\n\nconst rootTag = computed(() => (href ? 'a' : 'button'));\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    :href=\"href\"\n    :target=\"href ? target : undefined\"\n    :type=\"!href ? htmlType : undefined\"\n    :disabled=\"!href && disabled ? true : undefined\"\n    :aria-disabled=\"href && disabled ? 'true' : undefined\"\n    :aria-label=\"ariaLabel ?? tooltip\"\n    :title=\"tooltip\"\n    :class=\"[\n      'b-float-button',\n      {\n        'b-float-button--circle': isShape('circle'),\n        'b-float-button--square': isShape('square'),\n        'b-float-button--default': isType('default'),\n        'b-float-button--primary': isType('primary'),\n        'b-float-button--disabled': disabled,\n      },\n    ]\"\n    @click=\"handleClick\"\n  >\n    <!-- Badge -->\n    <span\n      v-if=\"showBadge\"\n      class=\"b-float-button__badge\"\n      :class=\"{\n        'b-float-button__badge--dot': showBadgeDot,\n        'b-float-button__badge--count': !showBadgeDot,\n      }\"\n      :style=\"badge?.color ? { backgroundColor: badge.color } : undefined\"\n      aria-hidden=\"true\"\n    >\n      <template v-if=\"!showBadgeDot\">{{ badgeDisplayCount }}</template>\n    </span>\n\n    <!-- Body -->\n    <span class=\"b-float-button__body\">\n      <!-- Icon -->\n      <span class=\"b-float-button__icon\" aria-hidden=\"true\">\n        <slot name=\"icon\">\n          <BIcon v-if=\"icon\" :icon=\"icon\" size=\"md\" />\n          <!-- Default plus icon when no icon prop or slot is provided -->\n          <svg\n            v-else\n            width=\"1em\"\n            height=\"1em\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\n          </svg>\n        </slot>\n      </span>\n\n      <!-- Description (square shape only) -->\n      <span\n        v-if=\"($slots.description || description) && isShape('square')\"\n        class=\"b-float-button__description\"\n      >\n        <slot name=\"description\">{{ description }}</slot>\n      </span>\n    </span>\n\n    <!-- Tooltip overlay -->\n    <span\n      v-if=\"$slots.tooltip || (tooltip && !ariaLabel)\"\n      class=\"b-float-button__tooltip\"\n      role=\"tooltip\"\n    >\n      <slot name=\"tooltip\">{{ tooltip }}</slot>\n    </span>\n  </component>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   scoped to .b-float-button — never on :root\n   ──────────────────────────────────────────── */\n.b-float-button {\n  /* Size tokens — AntD: floatButtonSize (40px) */\n  --b-float-button-size: 40px;\n  /* Icon size — AntD: floatButtonIconSize (21px) */\n  --b-float-button-icon-size: 1.3125rem;\n  /* Background — AntD: colorBgContainer */\n  --b-float-button-bg: #fff;\n  /* Primary background */\n  --b-float-button-primary-bg: oklch(55% 0.2 264);\n  /* Primary hover background */\n  --b-float-button-primary-bg-hover: oklch(62% 0.2 264);\n  /* Default hover background */\n  --b-float-button-bg-hover: oklch(96% 0 0);\n  /* Text / icon color — AntD: colorText */\n  --b-float-button-color: oklch(20% 0 0);\n  /* Primary text color */\n  --b-float-button-primary-color: #fff;\n  /* Border radius (circle: 50%, square: 8px) */\n  --b-float-button-border-radius-circle: 50%;\n  --b-float-button-border-radius-square: 0.5rem;\n  /* Shadow — AntD: boxShadowSecondary */\n  --b-float-button-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  /* Bottom inset — AntD: floatButtonInsetBlockEnd (48px) */\n  --b-float-button-inset-block-end: 3rem;\n  /* Inline inset — AntD: floatButtonInsetInlineEnd (24px) */\n  --b-float-button-inset-inline-end: 1.5rem;\n  /* z-index — AntD: zIndexPopupBase (1000) */\n  --b-float-button-z-index: 1000;\n  /* Transition */\n  --b-float-button-transition-duration: 200ms;\n  /* Description font size (sm) */\n  --b-float-button-description-font-size: 0.75rem;\n  /* Badge */\n  --b-float-button-badge-bg: oklch(57% 0.22 25);\n  --b-float-button-badge-color: #fff;\n  --b-float-button-badge-font-size: 0.6875rem;\n  /* Tooltip */\n  --b-float-button-tooltip-bg: oklch(20% 0.02 260);\n  --b-float-button-tooltip-color: oklch(96% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-float-button,\n[data-prefers-color='dark'].b-float-button {\n  --b-float-button-bg: oklch(20% 0.02 260);\n  --b-float-button-bg-hover: oklch(28% 0.02 260);\n  --b-float-button-color: oklch(88% 0.01 260);\n  --b-float-button-primary-bg: oklch(50% 0.2 264);\n  --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n  --b-float-button-shadow:\n    0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n    0 9px 28px 8px oklch(0% 0 0 / 25%);\n  --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n  --b-float-button-tooltip-color: oklch(88% 0.01 260);\n  --b-float-button-badge-bg: oklch(55% 0.22 25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'].b-float-button {\n    --b-float-button-bg: oklch(20% 0.02 260);\n    --b-float-button-bg-hover: oklch(28% 0.02 260);\n    --b-float-button-color: oklch(88% 0.01 260);\n    --b-float-button-primary-bg: oklch(50% 0.2 264);\n    --b-float-button-primary-bg-hover: oklch(57% 0.2 264);\n    --b-float-button-shadow:\n      0 6px 16px 0 oklch(0% 0 0 / 30%), 0 3px 6px -4px oklch(0% 0 0 / 40%),\n      0 9px 28px 8px oklch(0% 0 0 / 25%);\n    --b-float-button-tooltip-bg: oklch(30% 0.02 260);\n    --b-float-button-tooltip-color: oklch(88% 0.01 260);\n    --b-float-button-badge-bg: oklch(55% 0.22 25);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base button\n   ───────────────────────────────────────────── */\n.b-float-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--b-float-button-size);\n  height: var(--b-float-button-size);\n  min-height: var(--b-float-button-size);\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  box-shadow: var(--b-float-button-shadow);\n  text-decoration: none;\n  transition:\n    background-color var(--b-float-button-transition-duration) ease,\n    color var(--b-float-button-transition-duration) ease,\n    box-shadow var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n  outline-offset: 2px;\n\n  /* Tooltip hidden by default */\n  &:hover .b-float-button__tooltip {\n    opacity: 1;\n    pointer-events: auto;\n    transform: translateX(-50%) scale(1);\n  }\n}\n\n/* ── Shape: circle ── */\n.b-float-button--circle {\n  border-radius: var(--b-float-button-border-radius-circle);\n}\n\n/* ── Shape: square ── */\n.b-float-button--square {\n  border-radius: var(--b-float-button-border-radius-square);\n  height: auto;\n  min-height: var(--b-float-button-size);\n  padding: 0.5rem;\n}\n\n/* ── Type: default ── */\n.b-float-button--default {\n  background-color: var(--b-float-button-bg);\n  color: var(--b-float-button-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-bg-hover);\n  }\n}\n\n/* ── Type: primary ── */\n.b-float-button--primary {\n  background-color: var(--b-float-button-primary-bg);\n  color: var(--b-float-button-primary-color);\n\n  &:not(.b-float-button--disabled):hover {\n    background-color: var(--b-float-button-primary-bg-hover);\n  }\n}\n\n/* ── Disabled state ── */\n.b-float-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ── Focus visible ring ── */\n.b-float-button:focus-visible {\n  outline: 2px solid var(--b-float-button-primary-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Body (icon + description wrapper)\n   ───────────────────────────────────────────── */\n.b-float-button__body {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem;\n}\n\n/* ─────────────────────────────────────────────\n   Icon\n   ───────────────────────────────────────────── */\n.b-float-button__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--b-float-button-icon-size);\n  line-height: 1;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-float-button__description {\n  font-size: var(--b-float-button-description-font-size);\n  line-height: 1.2;\n  text-align: center;\n  white-space: nowrap;\n}\n\n/* ─────────────────────────────────────────────\n   Tooltip overlay\n   ───────────────────────────────────────────── */\n.b-float-button__tooltip {\n  position: absolute;\n  right: calc(100% + 0.75rem);\n  top: 50%;\n  transform: translateX(-50%) scale(0.95);\n  white-space: nowrap;\n  background: var(--b-float-button-tooltip-bg);\n  color: var(--b-float-button-tooltip-color);\n  font-size: 0.875rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.375rem;\n  pointer-events: none;\n  opacity: 0;\n  transition:\n    opacity var(--b-float-button-transition-duration) ease,\n    transform var(--b-float-button-transition-duration) ease;\n\n  /* Arrow */\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 100%;\n    transform: translateY(-50%);\n    border: 5px solid transparent;\n    border-left-color: var(--b-float-button-tooltip-bg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Badge\n   ───────────────────────────────────────────── */\n.b-float-button__badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  z-index: 1;\n  background: var(--b-float-button-badge-bg);\n  color: var(--b-float-button-badge-color);\n  font-size: var(--b-float-button-badge-font-size);\n  line-height: 1;\n  border-radius: 10px;\n  padding: 2px 5px;\n  min-width: 1.25rem;\n  text-align: center;\n  box-shadow: 0 0 0 2px var(--b-float-button-bg);\n}\n\n.b-float-button__badge--dot {\n  width: 8px;\n  height: 8px;\n  min-width: 0;\n  padding: 0;\n  border-radius: 50%;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-float-button,\n  .b-float-button__tooltip {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system94.js","names":[],"sources":["../src/components/BFloatButton/types.ts"],"sourcesContent":["export enum BFloatButtonShape {\n  Circle = 'circle',\n  Square = 'square',\n}\n\nexport enum BFloatButtonType {\n  Default = 'default',\n  Primary = 'primary',\n}\n\nexport enum BFloatButtonTrigger {\n  Click = 'click',\n  Hover = 'hover',\n}\n\nexport enum BFloatButtonGroupPlacement {\n  Top = 'top',\n  Right = 'right',\n  Bottom = 'bottom',\n  Left = 'left',\n}\n\nexport interface BFloatButtonBadgeProps {\n  /** Badge count number */\n  count?: number;\n  /** Whether to show badge even when count is 0 */\n  showZero?: boolean;\n  /** Max count to display before showing overflow text */\n  overflowCount?: number;\n  /** Show a red dot instead of a count */\n  dot?: boolean;\n  /** Custom badge text color */\n  color?: string;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,SAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,UAAA,WACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,MAAA,OACA,EAAA,QAAA,SACA,EAAA,SAAA,UACA,EAAA,OAAA;KACD"}