@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system154.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system154.js","names":[],"sources":["../src/components/BPagination/BPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIcon } from '@/components';\nimport { computed, ref, watch } from 'vue';\n\nimport type {\n  BPaginationAlign,\n  BPaginationQuickJumper,\n  BPaginationShowTotal,\n  BPaginationSimple,\n  BPaginationSize,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Current page number (controlled). */\n    current?: number;\n    /** Default initial page number (uncontrolled). @default 1 */\n    defaultCurrent?: number;\n    /** Default number of items per page. @default 10 */\n    defaultPageSize?: number;\n    /** Number of items per page (controlled). */\n    pageSize?: number;\n    /** Available page size options. @default [10, 20, 50, 100] */\n    pageSizeOptions?: number[];\n    /** Total number of data items. @default 0 */\n    total?: number;\n    /** Disable pagination. @default false */\n    disabled?: boolean;\n    /** Hide on single page. @default false */\n    hideOnSinglePage?: boolean;\n    /** Show less page items. @default false */\n    showLessItems?: boolean;\n    /** Show quick jumper input. @default false */\n    showQuickJumper?: BPaginationQuickJumper;\n    /** Show page size changer. Auto-shown when total > totalBoundaryShowSizeChanger. */\n    showSizeChanger?: boolean;\n    /** Show title attribute on page items. @default true */\n    showTitle?: boolean;\n    /** Show total number and range. */\n    showTotal?: BPaginationShowTotal;\n    /** Simple mode. @default false */\n    simple?: BPaginationSimple;\n    /** Size of the pagination. @default 'default' */\n    size?: BPaginationSize;\n    /** Alignment of pagination within container. @default 'start' */\n    align?: BPaginationAlign;\n    /** When total exceeds this value, showSizeChanger defaults to true. @default 50 */\n    totalBoundaryShowSizeChanger?: number;\n    /** Custom aria-label for the nav element. @default 'Pagination' */\n    ariaLabel?: string;\n  }>(),\n  {\n    defaultCurrent: 1,\n    defaultPageSize: 10,\n    pageSizeOptions: () => [10, 20, 50, 100],\n    total: 0,\n    disabled: false,\n    hideOnSinglePage: false,\n    showLessItems: false,\n    showQuickJumper: false,\n    showSizeChanger: undefined,\n    showTitle: true,\n    simple: false,\n    size: 'default',\n    align: 'start',\n    totalBoundaryShowSizeChanger: 50,\n    ariaLabel: 'Pagination',\n  },\n);\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when page number or page size changes. */\n  (e: 'change', page: number, pageSize: number): void;\n  /** Fires when page size changes. */\n  (e: 'showSizeChange', current: number, size: number): void;\n  /** v-model:current binding. */\n  (e: 'update:current', page: number): void;\n  /** v-model:pageSize binding. */\n  (e: 'update:pageSize', size: number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalCurrent = ref(props.current ?? props.defaultCurrent);\nconst internalPageSize = ref(props.pageSize ?? props.defaultPageSize);\n\nconst isCurrentControlled = computed(() => props.current !== undefined);\nconst isPageSizeControlled = computed(() => props.pageSize !== undefined);\n\nwatch(\n  () => props.current,\n  (val) => {\n    if (val !== undefined) internalCurrent.value = val;\n  },\n);\n\nwatch(\n  () => props.pageSize,\n  (val) => {\n    if (val !== undefined) internalPageSize.value = val;\n  },\n);\n\nconst activePage = computed(() =>\n  isCurrentControlled.value ? props.current! : internalCurrent.value,\n);\nconst activePageSize = computed(() =>\n  isPageSizeControlled.value ? props.pageSize! : internalPageSize.value,\n);\n\n// ─────────────────────────────────────────────\n// Derived\n// ─────────────────────────────────────────────\nconst totalPages = computed(() => {\n  if (props.total <= 0 || activePageSize.value <= 0) return 0;\n  return Math.ceil(props.total / activePageSize.value);\n});\n\nconst shouldHide = computed(() => props.hideOnSinglePage && totalPages.value <= 1);\n\nconst computedShowSizeChanger = computed(() => {\n  if (props.showSizeChanger !== undefined) return props.showSizeChanger;\n  return props.total > props.totalBoundaryShowSizeChanger;\n});\n\nconst isSimple = computed(() => !!props.simple);\nconst isSimpleReadOnly = computed(\n  () => typeof props.simple === 'object' && props.simple.readOnly === true,\n);\n\nconst totalRangeText = computed(() => {\n  if (!props.showTotal) return '';\n  const start = (activePage.value - 1) * activePageSize.value + 1;\n  const end = Math.min(activePage.value * activePageSize.value, props.total);\n  return props.showTotal(props.total, [start, end]);\n});\n\n// ─────────────────────────────────────────────\n// Page list computation\n// ─────────────────────────────────────────────\nconst pageList = computed(() => {\n  const tp = totalPages.value;\n  if (tp <= 0) return [];\n\n  const siblingCount = props.showLessItems ? 1 : 2;\n  const cur = activePage.value;\n\n  const items: Array<{ type: 'page' | 'prev-ellipsis' | 'next-ellipsis'; page: number }> = [];\n\n  items.push({ type: 'page', page: 1 });\n\n  if (tp <= (props.showLessItems ? 4 : 6) + 2) {\n    for (let i = 2; i <= tp; i++) {\n      items.push({ type: 'page', page: i });\n    }\n    return items;\n  }\n\n  const left = Math.max(2, cur - siblingCount);\n  const right = Math.min(tp - 1, cur + siblingCount);\n\n  if (left > 2) {\n    items.push({ type: 'prev-ellipsis', page: Math.max(1, cur - (props.showLessItems ? 3 : 5)) });\n  }\n\n  for (let i = left; i <= right; i++) {\n    items.push({ type: 'page', page: i });\n  }\n\n  if (right < tp - 1) {\n    items.push({\n      type: 'next-ellipsis',\n      page: Math.min(tp, cur + (props.showLessItems ? 3 : 5)),\n    });\n  }\n\n  if (tp > 1) {\n    items.push({ type: 'page', page: tp });\n  }\n\n  return items;\n});\n\n// ─────────────────────────────────────────────\n// Actions\n// ─────────────────────────────────────────────\nfunction setPage(page: number) {\n  if (props.disabled) return;\n  const clamped = Math.max(1, Math.min(page, totalPages.value));\n  if (clamped === activePage.value) return;\n\n  if (!isCurrentControlled.value) {\n    internalCurrent.value = clamped;\n  }\n  emit('update:current', clamped);\n  emit('change', clamped, activePageSize.value);\n}\n\nfunction setPageSize(newSize: number) {\n  if (props.disabled) return;\n  if (newSize === activePageSize.value) return;\n\n  const newTotalPages = Math.ceil(props.total / newSize);\n  const newCurrent = Math.min(activePage.value, newTotalPages) || 1;\n\n  if (!isPageSizeControlled.value) {\n    internalPageSize.value = newSize;\n  }\n  if (!isCurrentControlled.value) {\n    internalCurrent.value = newCurrent;\n  }\n\n  emit('update:pageSize', newSize);\n  emit('update:current', newCurrent);\n  emit('showSizeChange', newCurrent, newSize);\n  emit('change', newCurrent, newSize);\n}\n\nfunction goPrev() {\n  setPage(activePage.value - 1);\n}\n\nfunction goNext() {\n  setPage(activePage.value + 1);\n}\n\n// ─────────────────────────────────────────────\n// Quick jumper\n// ─────────────────────────────────────────────\nconst jumperValue = ref('');\n\nfunction handleJumperKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter') {\n    submitJumper();\n  }\n}\n\nfunction submitJumper() {\n  const val = parseInt(jumperValue.value, 10);\n  if (!isNaN(val) && val >= 1 && val <= totalPages.value) {\n    setPage(val);\n  }\n  jumperValue.value = '';\n}\n\n// ─────────────────────────────────────────────\n// Simple mode input\n// ─────────────────────────────────────────────\nconst simpleInputValue = ref(String(activePage.value));\n\nwatch(activePage, (val) => {\n  simpleInputValue.value = String(val);\n});\n\nfunction handleSimpleInputKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter') {\n    const val = parseInt(simpleInputValue.value, 10);\n    if (!isNaN(val)) {\n      setPage(val);\n    } else {\n      simpleInputValue.value = String(activePage.value);\n    }\n  }\n}\n\nfunction handleSimpleInputBlur() {\n  const val = parseInt(simpleInputValue.value, 10);\n  if (!isNaN(val) && val >= 1 && val <= totalPages.value) {\n    setPage(val);\n  } else {\n    simpleInputValue.value = String(activePage.value);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-pagination',\n  {\n    'b-pagination--disabled': props.disabled,\n    'b-pagination--simple': isSimple.value,\n    'b-pagination--small': props.size === 'small',\n    'b-pagination--large': props.size === 'large',\n    'b-pagination--align-start': props.align === 'start',\n    'b-pagination--align-center': props.align === 'center',\n    'b-pagination--align-end': props.align === 'end',\n  },\n]);\n</script>\n\n<template>\n  <nav v-if=\"!shouldHide\" :class=\"rootClasses\" role=\"navigation\" :aria-label=\"props.ariaLabel\">\n    <!-- Total display -->\n    <span v-if=\"props.showTotal\" class=\"b-pagination__total\">\n      {{ totalRangeText }}\n    </span>\n\n    <!-- Simple mode -->\n    <template v-if=\"isSimple\">\n      <!-- Prev -->\n      <button\n        class=\"b-pagination__item b-pagination__prev\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage <= 1\"\n        :aria-disabled=\"props.disabled || activePage <= 1 ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Previous Page' : undefined\"\n        aria-label=\"Previous Page\"\n        @click=\"goPrev\"\n      >\n        <BIcon icon=\"chevron-left\" aria-hidden=\"true\" />\n      </button>\n\n      <!-- Simple input -->\n      <span class=\"b-pagination__simple-pager\">\n        <input\n          v-if=\"!isSimpleReadOnly\"\n          class=\"b-pagination__simple-input\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          :value=\"simpleInputValue\"\n          :disabled=\"props.disabled\"\n          :aria-label=\"`Page ${activePage} of ${totalPages}`\"\n          @input=\"simpleInputValue = ($event.target as HTMLInputElement).value\"\n          @keydown=\"handleSimpleInputKeydown\"\n          @blur=\"handleSimpleInputBlur\"\n        />\n        <span v-else class=\"b-pagination__simple-current\" aria-current=\"page\">\n          {{ activePage }}\n        </span>\n        <span class=\"b-pagination__simple-separator\" aria-hidden=\"true\">/</span>\n        <span class=\"b-pagination__simple-total\">{{ totalPages }}</span>\n      </span>\n\n      <!-- Next -->\n      <button\n        class=\"b-pagination__item b-pagination__next\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage >= totalPages\"\n        :aria-disabled=\"props.disabled || activePage >= totalPages ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Next Page' : undefined\"\n        aria-label=\"Next Page\"\n        @click=\"goNext\"\n      >\n        <BIcon icon=\"chevron-right\" aria-hidden=\"true\" />\n      </button>\n    </template>\n\n    <!-- Normal mode -->\n    <template v-else>\n      <!-- Prev -->\n      <button\n        class=\"b-pagination__item b-pagination__prev\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage <= 1\"\n        :aria-disabled=\"props.disabled || activePage <= 1 ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Previous Page' : undefined\"\n        aria-label=\"Previous Page\"\n        @click=\"goPrev\"\n      >\n        <BIcon icon=\"chevron-left\" aria-hidden=\"true\" />\n      </button>\n\n      <!-- Page items -->\n      <template v-for=\"item in pageList\" :key=\"`${item.type}-${item.page}`\">\n        <!-- Ellipsis -->\n        <button\n          v-if=\"item.type === 'prev-ellipsis' || item.type === 'next-ellipsis'\"\n          class=\"b-pagination__item b-pagination__ellipsis\"\n          type=\"button\"\n          :disabled=\"props.disabled\"\n          :title=\"\n            props.showTitle\n              ? item.type === 'prev-ellipsis'\n                ? 'Previous 5 Pages'\n                : 'Next 5 Pages'\n              : undefined\n          \"\n          :aria-label=\"item.type === 'prev-ellipsis' ? 'Previous 5 Pages' : 'Next 5 Pages'\"\n          @click=\"setPage(item.page)\"\n        >\n          <span aria-hidden=\"true\">•••</span>\n        </button>\n\n        <!-- Page number -->\n        <button\n          v-else\n          class=\"b-pagination__item b-pagination__page\"\n          :class=\"{ 'b-pagination__page--active': item.page === activePage }\"\n          type=\"button\"\n          :disabled=\"props.disabled\"\n          :aria-current=\"item.page === activePage ? 'page' : undefined\"\n          :aria-label=\"`Page ${item.page}`\"\n          :title=\"props.showTitle ? `${item.page}` : undefined\"\n          @click=\"setPage(item.page)\"\n        >\n          {{ item.page }}\n        </button>\n      </template>\n\n      <!-- Next -->\n      <button\n        class=\"b-pagination__item b-pagination__next\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage >= totalPages\"\n        :aria-disabled=\"props.disabled || activePage >= totalPages ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Next Page' : undefined\"\n        aria-label=\"Next Page\"\n        @click=\"goNext\"\n      >\n        <BIcon icon=\"chevron-right\" aria-hidden=\"true\" />\n      </button>\n    </template>\n\n    <!-- Size changer -->\n    <select\n      v-if=\"computedShowSizeChanger && !isSimple\"\n      class=\"b-pagination__size-changer\"\n      :value=\"activePageSize\"\n      :disabled=\"props.disabled\"\n      aria-label=\"Items per page\"\n      @change=\"setPageSize(Number(($event.target as HTMLSelectElement).value))\"\n    >\n      <option v-for=\"opt in pageSizeOptions\" :key=\"opt\" :value=\"opt\">{{ opt }} / page</option>\n    </select>\n\n    <!-- Quick jumper -->\n    <span v-if=\"props.showQuickJumper && !isSimple\" class=\"b-pagination__quick-jumper\">\n      <span>Go to</span>\n      <input\n        class=\"b-pagination__jumper-input\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        :value=\"jumperValue\"\n        :disabled=\"props.disabled\"\n        aria-label=\"Go to page\"\n        @input=\"jumperValue = ($event.target as HTMLInputElement).value\"\n        @keydown=\"handleJumperKeydown\"\n      />\n    </span>\n  </nav>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BPagination - CSS custom properties\n   ───────────────────────────────────────────── */\n.b-pagination {\n  /* Item */\n  --b-pagination-item-bg: #ffffff;\n  --b-pagination-item-bg-hover: rgba(0, 0, 0, 0.04);\n  --b-pagination-item-size: 32px;\n  --b-pagination-item-size-sm: 24px;\n  --b-pagination-item-size-lg: 40px;\n  --b-pagination-item-border-radius: 6px;\n  --b-pagination-item-font-size: 14px;\n\n  /* Active */\n  --b-pagination-item-active-bg: #ffffff;\n  --b-pagination-item-active-color: #0958d9;\n  --b-pagination-item-active-border-color: #0958d9;\n  --b-pagination-item-active-color-hover: #1677ff;\n  --b-pagination-item-active-border-color-hover: #1677ff;\n\n  /* Disabled */\n  --b-pagination-item-active-bg-disabled: rgba(0, 0, 0, 0.15);\n  --b-pagination-item-active-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-pagination-item-color-disabled: rgba(0, 0, 0, 0.25);\n\n  /* Input */\n  --b-pagination-item-input-bg: #ffffff;\n\n  /* Link */\n  --b-pagination-item-link-bg: #ffffff;\n\n  /* Layout */\n  --b-pagination-gap: 8px;\n  --b-pagination-color: rgba(0, 0, 0, 0.88);\n  --b-pagination-font-family: inherit;\n  --b-pagination-mini-options-size-changer-top: 0px;\n\n  /* Focus */\n  --b-pagination-focus-ring: 0 0 0 2px rgba(22, 119, 255, 0.2);\n\n  /* ── Layout ── */\n  display: flex;\n  align-items: center;\n  gap: var(--b-pagination-gap);\n  font-family: var(--b-pagination-font-family);\n  font-size: var(--b-pagination-item-font-size);\n  color: var(--b-pagination-color);\n  flex-wrap: wrap;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* ── Alignment ── */\n.b-pagination--align-start {\n  justify-content: flex-start;\n}\n\n.b-pagination--align-center {\n  justify-content: center;\n}\n\n.b-pagination--align-end {\n  justify-content: flex-end;\n}\n\n/* ── Size variants ── */\n.b-pagination--small {\n  --b-pagination-item-size: var(--b-pagination-item-size-sm);\n  --b-pagination-item-font-size: 12px;\n  --b-pagination-gap: 4px;\n}\n\n.b-pagination--large {\n  --b-pagination-item-size: var(--b-pagination-item-size-lg);\n  --b-pagination-item-font-size: 16px;\n  --b-pagination-gap: 10px;\n}\n\n/* ── Item (shared styles for page, prev, next, ellipsis) ── */\n.b-pagination__item {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--b-pagination-item-size);\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid transparent;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  font-family: inherit;\n  line-height: 1;\n  text-align: center;\n  cursor: pointer;\n  user-select: none;\n  transition:\n    color 200ms,\n    border-color 200ms,\n    background 200ms;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.b-pagination__item:hover:not(:disabled):not(.b-pagination__page--active) {\n  background: var(--b-pagination-item-bg-hover);\n  color: var(--b-pagination-item-active-color);\n}\n\n.b-pagination__item:focus-visible {\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__item:disabled {\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n  background: transparent;\n}\n\n/* ── Active page ── */\n.b-pagination__page--active {\n  background: var(--b-pagination-item-active-bg);\n  color: var(--b-pagination-item-active-color);\n  border-color: var(--b-pagination-item-active-border-color);\n  font-weight: 500;\n  cursor: default;\n}\n\n.b-pagination__page--active:hover:not(:disabled) {\n  color: var(--b-pagination-item-active-color-hover);\n  border-color: var(--b-pagination-item-active-border-color-hover);\n  background: var(--b-pagination-item-active-bg);\n}\n\n.b-pagination__page--active:disabled {\n  background: var(--b-pagination-item-active-bg-disabled);\n  color: var(--b-pagination-item-active-color-disabled);\n  border-color: transparent;\n}\n\n/* ── Ellipsis ── */\n.b-pagination__ellipsis {\n  border-color: transparent;\n  letter-spacing: 1px;\n  color: rgba(0, 0, 0, 0.25);\n}\n\n.b-pagination__ellipsis:hover:not(:disabled) {\n  color: var(--b-pagination-item-active-color);\n  background: transparent;\n}\n\n/* ── Prev/Next arrows ── */\n.b-pagination__prev,\n.b-pagination__next {\n  background: var(--b-pagination-item-link-bg);\n}\n\n/* ── Total ── */\n.b-pagination__total {\n  white-space: nowrap;\n  font-size: var(--b-pagination-item-font-size);\n}\n\n/* ── Simple mode ── */\n.b-pagination--simple .b-pagination__simple-pager {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.b-pagination__simple-input {\n  width: 48px;\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  text-align: center;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 200ms;\n}\n\n.b-pagination__simple-input:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__simple-input:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n.b-pagination__simple-separator {\n  color: rgba(0, 0, 0, 0.25);\n  padding: 0 2px;\n}\n\n.b-pagination__simple-current {\n  font-weight: 500;\n  color: var(--b-pagination-item-active-color);\n}\n\n/* ── Size changer ── */\n.b-pagination__size-changer {\n  height: var(--b-pagination-item-size);\n  padding: 0 8px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n  margin-top: var(--b-pagination-mini-options-size-changer-top);\n  transition: border-color 200ms;\n}\n\n.b-pagination__size-changer:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__size-changer:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n/* ── Quick jumper ── */\n.b-pagination__quick-jumper {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--b-pagination-item-font-size);\n  white-space: nowrap;\n}\n\n.b-pagination__jumper-input {\n  width: 50px;\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  text-align: center;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 200ms;\n}\n\n.b-pagination__jumper-input:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__jumper-input:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n/* ── Disabled state (entire control) ── */\n.b-pagination--disabled {\n  opacity: 0.65;\n  pointer-events: none;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-pagination {\n  --b-pagination-item-bg: #1d1d1d;\n  --b-pagination-item-bg-hover: rgba(255, 255, 255, 0.08);\n  --b-pagination-item-active-bg: #1d1d1d;\n  --b-pagination-item-active-color: #4096ff;\n  --b-pagination-item-active-border-color: #4096ff;\n  --b-pagination-item-active-color-hover: #69b1ff;\n  --b-pagination-item-active-border-color-hover: #69b1ff;\n  --b-pagination-item-active-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-pagination-item-active-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-pagination-item-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-pagination-item-input-bg: #1d1d1d;\n  --b-pagination-item-link-bg: #1d1d1d;\n  --b-pagination-color: rgba(255, 255, 255, 0.88);\n  --b-pagination-focus-ring: 0 0 0 2px rgba(64, 150, 255, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-pagination {\n    --b-pagination-item-bg: #1d1d1d;\n    --b-pagination-item-bg-hover: rgba(255, 255, 255, 0.08);\n    --b-pagination-item-active-bg: #1d1d1d;\n    --b-pagination-item-active-color: #4096ff;\n    --b-pagination-item-active-border-color: #4096ff;\n    --b-pagination-item-active-color-hover: #69b1ff;\n    --b-pagination-item-active-border-color-hover: #69b1ff;\n    --b-pagination-item-active-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-pagination-item-active-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-pagination-item-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-pagination-item-input-bg: #1d1d1d;\n    --b-pagination-item-link-bg: #1d1d1d;\n    --b-pagination-color: rgba(255, 255, 255, 0.88);\n    --b-pagination-focus-ring: 0 0 0 2px rgba(64, 150, 255, 0.25);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-pagination__item,\n  .b-pagination__simple-input,\n  .b-pagination__size-changer,\n  .b-pagination__jumper-input {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"design-system154.js","names":[],"sources":["../src/components/BMenu/BMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, ref, watch } from 'vue';\nimport BMenuDivider from './BMenuDivider.vue';\nimport BMenuItem from './BMenuItem.vue';\nimport BMenuItemGroup from './BMenuItemGroup.vue';\nimport BMenuSubMenu from './BMenuSubMenu.vue';\nimport {\n  BMenuContextKey,\n  isDivider,\n  isItemGroup,\n  isSubMenu,\n  type BMenuClickInfo,\n  type BMenuContext,\n  type BMenuItemUnion,\n  type BMenuMode,\n  type BMenuSelectInfo,\n  type BMenuTheme,\n  type BMenuTriggerAction,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Menu display mode. @default 'inline' */\n    mode?: BMenuMode;\n    /** Color theme. @default 'light' */\n    theme?: BMenuTheme;\n    /** Menu items data array. */\n    items?: BMenuItemUnion[];\n    /** Whether items can be selected. @default true */\n    selectable?: boolean;\n    /** Allow multiple items to be selected. @default false */\n    multiple?: boolean;\n    /** Collapsed state in inline mode. @default false */\n    inlineCollapsed?: boolean;\n    /** Indent (px) per level for inline mode. @default 24 */\n    inlineIndent?: number;\n    /** Initially selected keys (uncontrolled). */\n    defaultSelectedKeys?: string[];\n    /** Currently selected keys (controlled). */\n    selectedKeys?: string[];\n    /** Initially opened submenu keys (uncontrolled). */\n    defaultOpenKeys?: string[];\n    /** Currently opened submenu keys (controlled). */\n    openKeys?: string[];\n    /** Action to trigger submenu open. @default 'hover' */\n    triggerSubMenuAction?: BMenuTriggerAction;\n    /** Delay (ms) before showing submenu. @default 0 */\n    subMenuOpenDelay?: number;\n    /** Delay (ms) before hiding submenu. @default 100 */\n    subMenuCloseDelay?: number;\n  }>(),\n  {\n    mode: 'inline',\n    theme: 'light',\n    items: () => [],\n    selectable: true,\n    multiple: false,\n    inlineCollapsed: false,\n    inlineIndent: 24,\n    defaultSelectedKeys: () => [],\n    selectedKeys: undefined,\n    defaultOpenKeys: () => [],\n    openKeys: undefined,\n    triggerSubMenuAction: 'hover',\n    subMenuOpenDelay: 0,\n    subMenuCloseDelay: 100,\n  },\n);\n\nconst emit = defineEmits<{\n  'update:selectedKeys': [keys: string[]];\n  'update:openKeys': [keys: string[]];\n  click: [info: BMenuClickInfo];\n  select: [info: BMenuSelectInfo];\n  deselect: [info: BMenuSelectInfo];\n  openChange: [keys: string[]];\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Selection state (controlled + uncontrolled)\n// ─────────────────────────────────────────────\nconst isSelectionControlled = computed(() => props.selectedKeys !== undefined);\nconst internalSelectedKeys = ref<string[]>([...props.defaultSelectedKeys]);\n\nconst resolvedSelectedKeys = computed(() =>\n  isSelectionControlled.value ? (props.selectedKeys ?? []) : internalSelectedKeys.value,\n);\n\n// ─────────────────────────────────────────────\n// Open state (controlled + uncontrolled)\n// ─────────────────────────────────────────────\nconst isOpenControlled = computed(() => props.openKeys !== undefined);\nconst internalOpenKeys = ref<string[]>([...props.defaultOpenKeys]);\n\nconst resolvedOpenKeys = computed(() =>\n  isOpenControlled.value ? (props.openKeys ?? []) : internalOpenKeys.value,\n);\n\n// ─────────────────────────────────────────────\n// Key path registry (item key → full path from root)\n// ─────────────────────────────────────────────\nconst keyPathMap = new Map<string, string[]>();\n\nfunction registerKeyPath(key: string, path: string[]) {\n  keyPathMap.set(key, path);\n}\n\n// ─────────────────────────────────────────────\n// Handlers\n// ─────────────────────────────────────────────\nfunction onItemClick(info: BMenuClickInfo) {\n  emit('click', info);\n\n  if (!props.selectable) return;\n\n  const key = info.key;\n  const current = [...resolvedSelectedKeys.value];\n\n  if (props.multiple) {\n    const idx = current.indexOf(key);\n    if (idx >= 0) {\n      current.splice(idx, 1);\n      if (!isSelectionControlled.value) {\n        internalSelectedKeys.value = current;\n      }\n      emit('update:selectedKeys', current);\n      emit('deselect', { ...info, selectedKeys: current });\n    } else {\n      current.push(key);\n      if (!isSelectionControlled.value) {\n        internalSelectedKeys.value = current;\n      }\n      emit('update:selectedKeys', current);\n      emit('select', { ...info, selectedKeys: current });\n    }\n  } else {\n    const newKeys = [key];\n    if (!isSelectionControlled.value) {\n      internalSelectedKeys.value = newKeys;\n    }\n    emit('update:selectedKeys', newKeys);\n    emit('select', { ...info, selectedKeys: newKeys });\n  }\n}\n\nfunction onOpenChange(key: string, open: boolean) {\n  const current = [...resolvedOpenKeys.value];\n  const idx = current.indexOf(key);\n\n  if (open && idx < 0) {\n    if (props.mode === 'inline') {\n      current.push(key);\n    } else {\n      // In vertical/horizontal mode, only one submenu open at a level\n      current.push(key);\n    }\n  } else if (!open && idx >= 0) {\n    current.splice(idx, 1);\n  }\n\n  if (!isOpenControlled.value) {\n    internalOpenKeys.value = current;\n  }\n  emit('update:openKeys', current);\n  emit('openChange', current);\n}\n\n// ─────────────────────────────────────────────\n// Sync controlled props\n// ─────────────────────────────────────────────\nwatch(\n  () => props.selectedKeys,\n  (val) => {\n    if (val !== undefined) {\n      internalSelectedKeys.value = [...val];\n    }\n  },\n);\n\nwatch(\n  () => props.openKeys,\n  (val) => {\n    if (val !== undefined) {\n      internalOpenKeys.value = [...val];\n    }\n  },\n);\n\n// When inline collapsed changes, close all submenus in uncontrolled mode\nwatch(\n  () => props.inlineCollapsed,\n  (collapsed) => {\n    if (collapsed && !isOpenControlled.value) {\n      internalOpenKeys.value = [];\n      emit('update:openKeys', []);\n      emit('openChange', []);\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Context for children\n// ─────────────────────────────────────────────\nconst context: BMenuContext = {\n  mode: computed(() => props.mode),\n  theme: computed(() => props.theme),\n  inlineCollapsed: computed(() => props.inlineCollapsed),\n  inlineIndent: computed(() => props.inlineIndent),\n  selectedKeys: resolvedSelectedKeys,\n  openKeys: resolvedOpenKeys,\n  multiple: computed(() => props.multiple),\n  selectable: computed(() => props.selectable),\n  triggerSubMenuAction: computed(() => props.triggerSubMenuAction),\n  subMenuOpenDelay: computed(() => props.subMenuOpenDelay),\n  subMenuCloseDelay: computed(() => props.subMenuCloseDelay),\n  onItemClick,\n  onOpenChange,\n  registerKeyPath,\n};\n\nprovide(BMenuContextKey, context);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-menu',\n  `b-menu--${props.mode}`,\n  `b-menu--${props.theme}`,\n  {\n    'b-menu--collapsed': props.mode === 'inline' && props.inlineCollapsed,\n  },\n]);\n\nconst ariaRole = computed(() => 'menu');\nconst ariaOrientation = computed(() => (props.mode === 'horizontal' ? 'horizontal' : 'vertical'));\n</script>\n\n<template>\n  <ul\n    :class=\"rootClasses\"\n    :role=\"ariaRole\"\n    :aria-orientation=\"ariaOrientation\"\n    :data-theme=\"props.theme\"\n  >\n    <slot>\n      <template v-for=\"item in props.items\" :key=\"item.key ?? (item as any).type\">\n        <BMenuDivider v-if=\"isDivider(item)\" :dashed=\"item.dashed\" />\n        <BMenuItemGroup\n          v-else-if=\"isItemGroup(item)\"\n          :label=\"item.label\"\n          :children=\"item.children\"\n        />\n        <BMenuSubMenu\n          v-else-if=\"isSubMenu(item)\"\n          :item-key=\"item.key\"\n          :label=\"item.label\"\n          :icon=\"item.icon\"\n          :disabled=\"item.disabled\"\n          :children=\"item.children\"\n          :popup-class-name=\"item.popupClassName\"\n        />\n        <BMenuItem\n          v-else\n          :item-key=\"item.key\"\n          :label=\"item.label\"\n          :icon=\"item.icon\"\n          :disabled=\"item.disabled\"\n          :danger=\"(item as any).danger\"\n          :extra=\"(item as any).extra\"\n          :title=\"(item as any).title\"\n        />\n      </template>\n    </slot>\n  </ul>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BMenu – Root CSS Custom Properties\n   ───────────────────────────────────────────── */\n.b-menu {\n  --b-menu-item-bg: #ffffff;\n  --b-menu-item-color: rgba(0, 0, 0, 0.88);\n  --b-menu-item-hover-bg: rgba(0, 0, 0, 0.06);\n  --b-menu-item-hover-color: rgba(0, 0, 0, 0.88);\n  --b-menu-item-active-bg: #e6f4ff;\n  --b-menu-item-selected-bg: #e6f4ff;\n  --b-menu-item-selected-color: #0958d9;\n  --b-menu-item-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-menu-item-height: 40px;\n  --b-menu-item-border-radius: 8px;\n  --b-menu-item-margin-block: 4px;\n  --b-menu-item-margin-inline: 4px;\n  --b-menu-item-padding-inline: 16px;\n  --b-menu-icon-size: 14px;\n  --b-menu-icon-margin-inline-end: 10px;\n  --b-menu-group-title-color: rgba(0, 0, 0, 0.65);\n  --b-menu-group-title-font-size: 14px;\n  --b-menu-group-title-line-height: 1.5714;\n  --b-menu-danger-item-color: #cf1322;\n  --b-menu-danger-item-hover-color: #cf1322;\n  --b-menu-danger-item-active-bg: #fff2f0;\n  --b-menu-danger-item-selected-bg: #fff2f0;\n  --b-menu-danger-item-selected-color: #cf1322;\n  --b-menu-sub-menu-item-bg: rgba(0, 0, 0, 0.02);\n  --b-menu-sub-menu-item-border-radius: 4px;\n  --b-menu-sub-menu-item-selected-color: #0958d9;\n  --b-menu-popup-bg: #ffffff;\n  --b-menu-popup-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-menu-popup-border-radius: 8px;\n  --b-menu-popup-z-index: 1050;\n  --b-menu-dropdown-width: 160px;\n  --b-menu-collapsed-width: 80px;\n  --b-menu-collapsed-icon-size: 16px;\n  --b-menu-active-bar-height: 2px;\n  --b-menu-active-bar-width: 3px;\n  --b-menu-active-bar-border-width: 1px;\n  --b-menu-horizontal-line-height: 46px;\n  --b-menu-horizontal-item-hover-bg: transparent;\n  --b-menu-horizontal-item-hover-color: #0958d9;\n  --b-menu-horizontal-item-selected-bg: transparent;\n  --b-menu-horizontal-item-selected-color: #0958d9;\n  --b-menu-horizontal-item-border-radius: 0;\n  --b-menu-transition-duration: 200ms;\n}\n\n/* ── Dark theme (via data-theme or dark mode) ── */\n.b-menu--dark,\n[data-prefers-color='dark'] .b-menu {\n  --b-menu-item-bg: #001529;\n  --b-menu-item-color: rgba(255, 255, 255, 0.65);\n  --b-menu-item-hover-bg: transparent;\n  --b-menu-item-hover-color: #fff;\n  --b-menu-item-active-bg: #1677ff;\n  --b-menu-item-selected-bg: #1677ff;\n  --b-menu-item-selected-color: #fff;\n  --b-menu-item-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-menu-group-title-color: rgba(255, 255, 255, 0.65);\n  --b-menu-danger-item-color: #ff4d4f;\n  --b-menu-danger-item-hover-color: #ff7875;\n  --b-menu-danger-item-active-bg: #ff4d4f;\n  --b-menu-danger-item-selected-bg: #ff4d4f;\n  --b-menu-danger-item-selected-color: #fff;\n  --b-menu-sub-menu-item-bg: #000c17;\n  --b-menu-popup-bg: #001529;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-menu {\n    --b-menu-item-bg: #001529;\n    --b-menu-item-color: rgba(255, 255, 255, 0.65);\n    --b-menu-item-hover-bg: transparent;\n    --b-menu-item-hover-color: #fff;\n    --b-menu-item-active-bg: #1677ff;\n    --b-menu-item-selected-bg: #1677ff;\n    --b-menu-item-selected-color: #fff;\n    --b-menu-item-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-menu-group-title-color: rgba(255, 255, 255, 0.65);\n    --b-menu-danger-item-color: #ff4d4f;\n    --b-menu-danger-item-hover-color: #ff7875;\n    --b-menu-danger-item-active-bg: #ff4d4f;\n    --b-menu-danger-item-selected-bg: #ff4d4f;\n    --b-menu-danger-item-selected-color: #fff;\n    --b-menu-sub-menu-item-bg: #000c17;\n    --b-menu-popup-bg: #001529;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-theme='dark'] .b-menu {\n    --b-menu-item-bg: #001529;\n    --b-menu-item-color: rgba(255, 255, 255, 0.65);\n    --b-menu-item-hover-bg: transparent;\n    --b-menu-item-hover-color: #fff;\n    --b-menu-item-active-bg: #1677ff;\n    --b-menu-item-selected-bg: #1677ff;\n    --b-menu-item-selected-color: #fff;\n    --b-menu-item-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-menu-group-title-color: rgba(255, 255, 255, 0.65);\n    --b-menu-danger-item-color: #ff4d4f;\n    --b-menu-danger-item-hover-color: #ff7875;\n    --b-menu-danger-item-active-bg: #ff4d4f;\n    --b-menu-danger-item-selected-bg: #ff4d4f;\n    --b-menu-danger-item-selected-color: #fff;\n    --b-menu-sub-menu-item-bg: #000c17;\n    --b-menu-popup-bg: #001529;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-menu {\n  margin: 0;\n  padding: 4px;\n  list-style: none;\n  background: var(--b-menu-item-bg);\n  color: var(--b-menu-item-color);\n  font-size: 14px;\n  line-height: 1.5714;\n  box-sizing: border-box;\n  outline: none;\n  transition:\n    background var(--b-menu-transition-duration),\n    width var(--b-menu-transition-duration);\n}\n\n/* ── Inline mode ── */\n.b-menu--inline {\n  width: 100%;\n  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);\n}\n\n.b-menu--inline.b-menu--collapsed {\n  width: var(--b-menu-collapsed-width);\n}\n\n/* ── Vertical mode ── */\n.b-menu--vertical {\n  width: 100%;\n  border-inline-end: 1px solid rgba(5, 5, 5, 0.06);\n}\n\n/* ── Horizontal mode ── */\n.b-menu--horizontal {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  border-bottom: 1px solid rgba(5, 5, 5, 0.06);\n  padding: 0 4px;\n  line-height: var(--b-menu-horizontal-line-height);\n}\n\n/* ── Dark theme border override ── */\n.b-menu--dark.b-menu--inline,\n.b-menu--dark.b-menu--vertical {\n  border-inline-end-color: transparent;\n}\n\n.b-menu--dark.b-menu--horizontal {\n  border-bottom-color: transparent;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-menu {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system155.js

@@ -0,0 +1,98 @@
+import { BMessageType as e } from "./design-system3.js";
+import { Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, onUnmounted as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, useId as v, watch as y, withCtx as b } from "vue";
+//#region src/components/BMessage/BMessage.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"id",
+	"role",
+	"aria-live"
+], S = {
+	key: 0,
+	class: "b-message__icon",
+	"aria-hidden": "true"
+}, C = ["d"], w = { class: "b-message__content" }, T = /* @__PURE__ */ u({
+	__name: "BMessage",
+	props: {
+		type: { default: () => e.Info },
+		content: { default: "" },
+		duration: { default: 3 },
+		showIcon: {
+			type: Boolean,
+			default: !0
+		},
+		modelValue: {
+			type: Boolean,
+			default: () => void 0
+		}
+	},
+	emits: [
+		"close",
+		"afterClose",
+		"update:modelValue"
+	],
+	setup(u, { expose: T, emit: E }) {
+		let D = E, O = v(), k = m(!1), A = r(() => u.modelValue === void 0 ? k.value : u.modelValue), j = r(() => u.modelValue !== void 0), M = r(() => u.type === e.Error || u.type === e.Warning ? "alert" : "status"), N = r(() => {
+			switch (u.type) {
+				case e.Success: return "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z";
+				case e.Warning: return "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z";
+				case e.Error: return "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z";
+				case e.Loading: return "M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2z";
+				default: return "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z";
+			}
+		}), P = null;
+		function F() {
+			I(), u.duration > 0 && (P = setTimeout(() => {
+				R();
+			}, u.duration * 1e3));
+		}
+		function I() {
+			P !== null && (clearTimeout(P), P = null);
+		}
+		function L() {
+			j.value ? D("update:modelValue", !0) : k.value = !0;
+		}
+		function R() {
+			D("close"), j.value ? D("update:modelValue", !1) : k.value = !1;
+		}
+		function z() {
+			D("afterClose");
+		}
+		function B() {
+			I();
+		}
+		function V() {
+			F();
+		}
+		return f(() => {
+			I();
+		}), y(A, (e) => {
+			e ? F() : I();
+		}, { immediate: !0 }), T({
+			open: L,
+			close: R
+		}), (e, r) => (p(), i(t, { to: "body" }, [l(n, {
+			name: "b-message-fade",
+			onAfterLeave: z
+		}, {
+			default: b(() => [A.value ? (p(), o("div", {
+				key: 0,
+				id: _(O),
+				class: d(["b-message", [`b-message--${u.type}`, { "b-message--with-icon": u.showIcon }]]),
+				role: M.value,
+				"aria-live": M.value === "alert" ? "assertive" : "polite",
+				"aria-atomic": !0,
+				onMouseenter: B,
+				onMouseleave: V
+			}, [u.showIcon ? (p(), o("span", S, [h(e.$slots, "icon", {}, () => [(p(), o("svg", {
+				class: d(["b-message__icon-svg", { "b-message__icon-svg--spin": u.type === "loading" }]),
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				focusable: "false"
+			}, [s("path", { d: N.value }, null, 8, C)], 2))])])) : a("", !0), s("span", w, [h(e.$slots, "default", {}, () => [c(g(u.content), 1)])])], 42, x)) : a("", !0)]),
+			_: 3
+		})]));
+	}
+});
+//#endregion
+export { T as default };
+
+//# sourceMappingURL=design-system155.js.map

package/dist/design-system155.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system155.js","names":[],"sources":["../src/components/BMessage/BMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BMessageType } from '@/types.ts';\nimport { computed, onUnmounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  type = BMessageType.Info,\n  content = '',\n  duration = 3,\n  showIcon = true,\n  modelValue = undefined,\n} = defineProps<{\n  /**\n   * Message type - controls icon and colour scheme.\n   * @default 'info'\n   */\n  type?: `${BMessageType}`;\n  /** The message content text (also accepts the default slot). */\n  content?: string;\n  /**\n   * Time (in seconds) before auto-close. Set to `0` to disable auto-close.\n   * @default 3\n   */\n  duration?: number;\n  /** Show the built-in status icon. @default true */\n  showIcon?: boolean;\n  /**\n   * Controlled visibility - when provided the component operates in\n   * controlled mode; otherwise it manages its own visibility.\n   * Bind with `v-model`.\n   */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired synchronously when the message starts closing. */\n  (e: 'close'): void;\n  /** Fired after the leave-transition fully completes. */\n  (e: 'afterClose'): void;\n  /** v-model support */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst messageId = useId();\n\n/** Uncontrolled visibility flag - default closed. */\nconst internalVisible = ref(false);\n\n/**\n * Effective visibility:\n *  - controlled  → honour `modelValue`\n *  - uncontrolled → use `internalVisible`\n */\nconst isVisible = computed(() => (modelValue !== undefined ? modelValue : internalVisible.value));\n\nconst isControlled = computed(() => modelValue !== undefined);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\n/** ARIA role: 'alert' for error/warning (assertive), 'status' for others. */\nconst ariaRole = computed<'alert' | 'status'>(() =>\n  type === BMessageType.Error || type === BMessageType.Warning ? 'alert' : 'status',\n);\n\n/** Map type → inline SVG path for the status icon. */\nconst iconPath = computed(() => {\n  switch (type) {\n    case BMessageType.Success:\n      // circle-check\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z';\n    case BMessageType.Warning:\n      // triangle-exclamation\n      return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';\n    case BMessageType.Error:\n      // circle-xmark\n      return 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z';\n    case BMessageType.Loading:\n      // spinner (circle arc)\n      return 'M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2z';\n    default:\n      // circle-info\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';\n  }\n});\n\ndefineSlots<{\n  /** Overrides the `content` prop. */\n  default?(): unknown;\n  /** Overrides the built-in status icon. */\n  icon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Auto-close timer\n// ─────────────────────────────────────────────\nlet timer: ReturnType<typeof setTimeout> | null = null;\n\nfunction startTimer() {\n  clearTimer();\n  if (duration > 0) {\n    timer = setTimeout(() => {\n      close();\n    }, duration * 1000);\n  }\n}\n\nfunction clearTimer() {\n  if (timer !== null) {\n    clearTimeout(timer);\n    timer = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction open() {\n  if (isControlled.value) {\n    emit('update:modelValue', true);\n  } else {\n    internalVisible.value = true;\n  }\n}\n\nfunction close() {\n  emit('close');\n  if (isControlled.value) {\n    emit('update:modelValue', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onAfterLeave() {\n  emit('afterClose');\n}\n\nfunction onMouseEnter() {\n  clearTimer();\n}\n\nfunction onMouseLeave() {\n  startTimer();\n}\n\n// ─────────────────────────────────────────────\n// Lifecycle\n// ─────────────────────────────────────────────\nonUnmounted(() => {\n  clearTimer();\n});\n\n// Start / clear auto-close timer whenever visibility changes\nwatch(\n  isVisible,\n  (visible) => {\n    if (visible) {\n      startTimer();\n    } else {\n      clearTimer();\n    }\n  },\n  { immediate: true },\n);\n\n// Expose open & close for imperative usage\ndefineExpose({ open, close });\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-message-fade\" @after-leave=\"onAfterLeave\">\n      <div\n        v-if=\"isVisible\"\n        :id=\"messageId\"\n        class=\"b-message\"\n        :class=\"[\n          `b-message--${type}`,\n          {\n            'b-message--with-icon': showIcon,\n          },\n        ]\"\n        :role=\"ariaRole\"\n        :aria-live=\"ariaRole === 'alert' ? 'assertive' : 'polite'\"\n        :aria-atomic=\"true\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n      >\n        <!-- Status icon -->\n        <span v-if=\"showIcon\" class=\"b-message__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <svg\n              class=\"b-message__icon-svg\"\n              :class=\"{ 'b-message__icon-svg--spin': type === 'loading' }\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              focusable=\"false\"\n            >\n              <path :d=\"iconPath\" />\n            </svg>\n          </slot>\n        </span>\n\n        <!-- Content -->\n        <span class=\"b-message__content\">\n          <slot>{{ content }}</slot>\n        </span>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-message {\n  /* Layout */\n  --b-message-padding-v: 0.625rem;\n  --b-message-padding-h: 1rem;\n  --b-message-border-radius: 0.5rem;\n  --b-message-icon-size: 1rem;\n  --b-message-gap: 0.5rem;\n  --b-message-font-size: 0.875rem;\n  --b-message-max-width: 32rem;\n\n  /* Colours - info (default) */\n  --b-message-bg: #ffffff;\n  --b-message-border-color: oklch(90% 0.02 240);\n  --b-message-color: oklch(30% 0.02 240);\n  --b-message-icon-color: oklch(62.3% 0.214 259.815);\n  --b-message-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\n  /* Animation */\n  --b-message-transition-duration: 300ms;\n  --b-message-top: 8px;\n}\n\n/* ── Variant colour tokens ── */\n.b-message--success {\n  --b-message-icon-color: oklch(72.3% 0.219 149.579);\n}\n\n.b-message--warning {\n  --b-message-icon-color: oklch(75% 0.183 55.934);\n}\n\n.b-message--error {\n  --b-message-icon-color: oklch(63.7% 0.237 25.331);\n}\n\n.b-message--loading {\n  --b-message-icon-color: oklch(62.3% 0.214 259.815);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-message {\n  --b-message-bg: oklch(22% 0.02 240);\n  --b-message-border-color: oklch(35% 0.03 240);\n  --b-message-color: oklch(88% 0.02 240);\n  --b-message-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-message {\n    --b-message-bg: oklch(22% 0.02 240);\n    --b-message-border-color: oklch(35% 0.03 240);\n    --b-message-color: oklch(88% 0.02 240);\n    --b-message-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-message {\n  position: fixed;\n  top: var(--b-message-top);\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 1010;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-message-gap);\n  padding: var(--b-message-padding-v) var(--b-message-padding-h);\n  border-radius: var(--b-message-border-radius);\n  background-color: var(--b-message-bg);\n  color: var(--b-message-color);\n  font-size: var(--b-message-font-size);\n  line-height: 1.5;\n  box-shadow: var(--b-message-shadow);\n  box-sizing: border-box;\n  max-width: var(--b-message-max-width);\n  word-break: break-word;\n  pointer-events: auto;\n}\n\n/* ── Icon ── */\n.b-message__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  color: var(--b-message-icon-color);\n  line-height: 1;\n}\n\n.b-message__icon-svg {\n  width: var(--b-message-icon-size);\n  height: var(--b-message-icon-size);\n  fill: currentColor;\n  display: block;\n}\n\n/* Loading spinner animation */\n.b-message__icon-svg--spin {\n  animation: b-message-spin 1s linear infinite;\n}\n\n@keyframes b-message-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ── Content ── */\n.b-message__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Transition (slide-down + fade)\n   ───────────────────────────────────────────── */\n.b-message-fade-enter-active,\n.b-message-fade-leave-active {\n  transition:\n    opacity var(--b-message-transition-duration, 300ms) ease,\n    transform var(--b-message-transition-duration, 300ms) ease;\n}\n\n.b-message-fade-enter-from {\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n.b-message-fade-enter-to {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.b-message-fade-leave-from {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.b-message-fade-leave-to {\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n/* Respect prefers-reduced-motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-message-fade-enter-active,\n  .b-message-fade-leave-active {\n    transition: opacity var(--b-message-transition-duration, 300ms) ease;\n  }\n\n  .b-message-fade-enter-from,\n  .b-message-fade-leave-to {\n    transform: translateX(-50%);\n  }\n\n  .b-message__icon-svg--spin {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,IAAM,IAAO,GAYP,IAAY,GAAO,EAGnB,IAAkB,EAAI,GAAM,EAO5B,IAAY,QAAgB,EAAA,eAAe,KAAA,IAAyB,EAAgB,QAA7B,EAAA,WAAoC,EAE3F,IAAe,QAAe,EAAA,eAAe,KAAA,EAAU,EAMvD,IAAW,QACf,EAAA,SAAS,EAAa,SAAS,EAAA,SAAS,EAAa,UAAU,UAAU,SAC1E,EAGK,IAAW,QAAe;AAC9B,WAAQ,EAAA,MAAR;IACE,KAAK,EAAa,QAEhB,QAAO;IACT,KAAK,EAAa,QAEhB,QAAO;IACT,KAAK,EAAa,MAEhB,QAAO;IACT,KAAK,EAAa,QAEhB,QAAO;IACT,QAEE,QAAO;;IAEX,EAYE,IAA8C;EAElD,SAAS,IAAa;AAEpB,GADA,GAAY,EACR,EAAA,WAAW,MACb,IAAQ,iBAAiB;AACvB,OAAO;MACN,EAAA,WAAW,IAAK;;EAIvB,SAAS,IAAa;AACpB,GAAI,MAAU,SACZ,aAAa,EAAM,EACnB,IAAQ;;EAOZ,SAAS,IAAO;AACd,GAAI,EAAa,QACf,EAAK,qBAAqB,GAAK,GAE/B,EAAgB,QAAQ;;EAI5B,SAAS,IAAQ;AAEf,GADA,EAAK,QAAQ,EACT,EAAa,QACf,EAAK,qBAAqB,GAAM,GAEhC,EAAgB,QAAQ;;EAI5B,SAAS,IAAe;AACtB,KAAK,aAAa;;EAGpB,SAAS,IAAe;AACtB,MAAY;;EAGd,SAAS,IAAe;AACtB,MAAY;;SAMd,QAAkB;AAChB,MAAY;IACZ,EAGF,EACE,IACC,MAAY;AACX,GAAI,IACF,GAAY,GAEZ,GAAY;KAGhB,EAAE,WAAW,IAAM,CACpB,EAGD,EAAa;GAAE;GAAM;GAAO,CAAC,kBAI3B,EAuCW,GAAA,EAvCD,IAAG,QAAM,EAAA,CACjB,EAqCa,GAAA;GArCD,MAAK;GAA+B;;oBAoCxC,CAlCE,EAAA,SAAA,GAAA,EADR,EAmCM,OAAA;;IAjCH,IAAI,EAAA,EAAS;IACd,OAAK,EAAA,CAAC,aAAW,CAAA,cACiB,EAAA,QAAA,EAAA,wBAAwD,EAAA,UAAA,CAAA,CAAA,CAAA;IAMzF,MAAM,EAAA;IACN,aAAW,EAAA,UAAQ,UAAA,cAAA;IACnB,eAAa;IACb,cAAY;IACZ,cAAY;OAGD,EAAA,YAAA,GAAA,EAAZ,EAYO,QAZP,GAYO,CAXL,EAUO,EAAA,QAAA,QAAA,EAAA,QAAA,EAAA,GAAA,EATL,EAQM,OAAA;IAPJ,OAAK,EAAA,CAAC,uBAAqB,EAAA,6BACY,EAAA,SAAI,WAAA,CAAA,CAAA;IAC3C,SAAQ;IACR,OAAM;IACN,WAAU;OAEV,EAAsB,QAAA,EAAf,GAAG,EAAA,OAAQ,EAAA,MAAA,GAAA,EAAA,CAAA,EAAA,EAAA,EAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,EAMxB,EAEO,QAFP,GAEO,CADL,EAA0B,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAjB,EAAA,QAAO,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,CAAA,CAAA"}

package/dist/design-system157.js

@@ -1,243 +1,8 @@
-import { BPopconfirmPlacement as e, BPopconfirmTrigger as t } from "./design-system3.js";
-import { useComponentId as n } from "./design-system10.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as ee, onMounted as te, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as ne, useId as re, watch as _ } from "vue";
-//#region src/components/BPopconfirm/BPopconfirm.vue?vue&type=script&setup=true&lang.ts
-var ie = ["aria-describedby", "id"], ae = {
-	key: 0,
-	class: "b-popconfirm__arrow",
-	"aria-hidden": "true"
-}, oe = { class: "b-popconfirm__inner" }, v = { class: "b-popconfirm__message" }, y = {
-	class: "b-popconfirm__icon",
-	"aria-hidden": "true"
-}, b = { class: "b-popconfirm__text" }, se = {
-	class: "b-popconfirm__buttons",
-	role: "group"
-}, x = "a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", S = /* @__PURE__ */ l({
-	__name: "BPopconfirm",
-	props: {
-		title: {},
-		description: {},
-		okText: { default: "Yes" },
-		cancelText: { default: "No" },
-		okType: { default: "primary" },
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		icon: {},
-		showCancel: {
-			type: Boolean,
-			default: !0
-		},
-		trigger: { default: () => t.Click },
-		placement: { default: () => e.TopCenter },
-		arrow: {
-			type: Boolean,
-			default: !0
-		},
-		mouseEnterDelay: { default: 100 },
-		mouseLeaveDelay: { default: 100 },
-		destroyTooltipOnHide: {
-			type: Boolean,
-			default: !1
-		},
-		zIndex: { default: 1060 },
-		modelValue: {
-			type: Boolean,
-			default: () => void 0
-		}
-	},
-	emits: [
-		"confirm",
-		"cancel",
-		"openChange",
-		"update:modelValue"
-	],
-	setup(l, { expose: S, emit: C }) {
-		let w = C, { componentUID: ce } = n(), T = re(), E = `${T}-title`, D = `${T}-desc`, O = m(!1), k = i(() => l.modelValue === void 0 ? O.value : l.modelValue), A = m(!1), le = i(() => l.destroyTooltipOnHide ? k.value : A.value || k.value);
-		_(k, (e) => {
-			e && (A.value = !0);
-		});
-		let j = null, M = null;
-		function N() {
-			j &&= (clearTimeout(j), null), M &&= (clearTimeout(M), null);
-		}
-		function P(e = 0) {
-			l.disabled || (N(), !k.value && (e > 0 ? j = setTimeout(() => I(), e) : I()));
-		}
-		function F(e = 0) {
-			N(), k.value && (e > 0 ? M = setTimeout(() => L(), e) : L());
-		}
-		function I() {
-			B.value?.showPopover();
-		}
-		function L() {
-			B.value?.hidePopover();
-		}
-		function R(e) {
-			l.modelValue === void 0 ? O.value = e : w("update:modelValue", e), w("openChange", e);
-		}
-		let z = ({ newState: e }) => {
-			R(e === "open");
-		}, B = m(null), V = m(null), H = null;
-		function U() {
-			u(() => {
-				if (!B.value) return;
-				let e = B.value.querySelector(x);
-				e ? e.focus() : B.value.focus();
-			});
-		}
-		function ue(e) {
-			if (e.key !== "Tab" || !B.value) return;
-			let t = Array.from(B.value.querySelectorAll(x));
-			if (t.length === 0) {
-				e.preventDefault();
-				return;
-			}
-			let n = t[0], r = t[t.length - 1];
-			e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
-		}
-		_(k, (e) => {
-			e ? (H = document.activeElement, U()) : H && u(() => H?.focus());
-		});
-		function de(e) {
-			w("confirm", e), F();
-		}
-		function fe(e) {
-			w("cancel", e), F();
-		}
-		function W() {
-			l.disabled || (k.value ? F() : P());
-		}
-		function G() {
-			P(l.mouseEnterDelay);
-		}
-		function K() {
-			F(l.mouseLeaveDelay);
-		}
-		function q() {
-			P();
-		}
-		function J() {
-			F();
-		}
-		function Y(e) {
-			e.key === "Escape" && k.value && (e.preventDefault(), F());
-		}
-		function pe(e) {
-			e.key === "Escape" && (e.preventDefault(), F()), ue(e);
-		}
-		function me() {
-			l.trigger === t.Hover && N();
-		}
-		function X() {
-			l.trigger === t.Hover && F(l.mouseLeaveDelay);
-		}
-		function Z() {
-			let e = V.value;
-			if (e) switch (e.addEventListener("keydown", Y), l.trigger) {
-				case t.Click:
-					e.addEventListener("click", W);
-					break;
-				case t.Focus:
-					e.addEventListener("focusin", q), e.addEventListener("focusout", J);
-					break;
-				case t.Hover:
-				default:
-					e.addEventListener("mouseenter", G), e.addEventListener("mouseleave", K), e.addEventListener("focusin", q), e.addEventListener("focusout", J);
-					break;
-			}
-		}
-		function Q() {
-			let e = V.value;
-			e && (e.removeEventListener("keydown", Y), e.removeEventListener("click", W), e.removeEventListener("focusin", q), e.removeEventListener("focusout", J), e.removeEventListener("mouseenter", G), e.removeEventListener("mouseleave", K));
-		}
-		te(() => {
-			Z();
-		}), ee(() => {
-			Q(), N();
-		}), _(() => l.trigger, () => {
-			Q(), Z();
-		}), _(() => l.modelValue, (e) => {
-			e !== void 0 && (e ? B.value?.showPopover() : B.value?.hidePopover());
-		});
-		let $ = i(() => `--b-popconfirm-anchor-${ce.value}`), he = i(() => ({
-			[e.TopLeft]: "top-left",
-			[e.TopCenter]: "top-center",
-			[e.TopRight]: "top-right",
-			[e.RightTop]: "right-top",
-			[e.RightCenter]: "right-center",
-			[e.RightBottom]: "right-bottom",
-			[e.BottomRight]: "bottom-right",
-			[e.BottomCenter]: "bottom-center",
-			[e.BottomLeft]: "bottom-left",
-			[e.LeftBottom]: "left-bottom",
-			[e.LeftCenter]: "left-center",
-			[e.LeftTop]: "left-top"
-		})[l.placement] ?? "top-center"), ge = i(() => ({
-			primary: "b-popconfirm__btn--primary",
-			default: "b-popconfirm__btn--default",
-			dashed: "b-popconfirm__btn--dashed",
-			text: "b-popconfirm__btn--text",
-			link: "b-popconfirm__btn--link"
-		})[l.okType] ?? "b-popconfirm__btn--primary");
-		return S({
-			open: I,
-			close: L
-		}), (e, t) => (p(), o(r, null, [s("div", {
-			ref_key: "toggleRef",
-			ref: V,
-			class: "b-popconfirm__toggle",
-			style: f({ anchorName: $.value })
-		}, [h(e.$slots, "default")], 4), s("div", {
-			ref_key: "popconfirmRef",
-			ref: B,
-			popover: "manual",
-			class: d([
-				"b-popconfirm__content",
-				he.value,
-				{ "b-popconfirm__content--no-arrow": !l.arrow }
-			]),
-			style: f({
-				zIndex: l.zIndex,
-				positionAnchor: $.value
-			}),
-			role: "dialog",
-			"aria-modal": "false",
-			"aria-labelledby": E,
-			"aria-describedby": l.description ? D : void 0,
-			id: ne(T),
-			tabindex: "-1",
-			onToggle: z,
-			onKeydown: pe,
-			onMouseenter: me,
-			onMouseleave: X
-		}, [le.value || !l.destroyTooltipOnHide ? (p(), o(r, { key: 0 }, [l.arrow ? (p(), o("div", ae)) : a("", !0), s("div", oe, [s("div", v, [s("span", y, [h(e.$slots, "icon", {}, () => [t[0] ||= s("svg", {
-			viewBox: "0 0 24 24",
-			fill: "currentColor",
-			width: "16",
-			height: "16",
-			"aria-hidden": "true"
-		}, [s("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })], -1)])]), s("div", b, [s("div", {
-			id: E,
-			class: "b-popconfirm__title"
-		}, [h(e.$slots, "title", {}, () => [c(g(l.title), 1)])]), l.description || e.$slots.description ? (p(), o("div", {
-			key: 0,
-			id: D,
-			class: "b-popconfirm__description"
-		}, [h(e.$slots, "description", {}, () => [c(g(l.description), 1)])])) : a("", !0)])]), s("div", se, [h(e.$slots, "cancelButton", {}, () => [l.showCancel ? (p(), o("button", {
-			key: 0,
-			type: "button",
-			class: "b-popconfirm__btn b-popconfirm__btn--default",
-			onClick: fe
-		}, g(l.cancelText), 1)) : a("", !0)]), h(e.$slots, "okButton", {}, () => [s("button", {
-			type: "button",
-			class: d(["b-popconfirm__btn", ge.value]),
-			onClick: de
-		}, g(l.okText), 3)])])])], 64)) : a("", !0)], 46, ie)], 64));
-	}
-});
+import e from "./design-system155.js";
+/* empty css                 */
+//#region src/components/BMessage/BMessage.vue
+var t = e;
 //#endregion
-export { S as default };
+export { t as default };
 
 //# sourceMappingURL=design-system157.js.map

package/dist/design-system157.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system157.js","names":["$slots"],"sources":["../src/components/BPopconfirm/BPopconfirm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BPopconfirmPlacement, BPopconfirmTrigger } from '@/types.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  title,\n  description,\n  okText = 'Yes',\n  cancelText = 'No',\n  okType = 'primary',\n  disabled = false,\n  icon: _icon,\n  showCancel = true,\n  trigger = BPopconfirmTrigger.Click,\n  placement = BPopconfirmPlacement.TopCenter,\n  arrow = true,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  destroyTooltipOnHide = false,\n  zIndex = 1060,\n  modelValue = undefined,\n} = defineProps<{\n  /** The confirmation question or text shown in the popconfirm. Also accepts the `title` slot. */\n  title?: string;\n  /** Additional description below the title. Also accepts the `description` slot. */\n  description?: string;\n  /** Text of the confirm button. */\n  okText?: string;\n  /** Text of the cancel button. */\n  cancelText?: string;\n  /** Button type of the confirm button: 'primary' | 'default' | 'dashed' | 'text' | 'link'. */\n  okType?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  /** Whether the popconfirm is disabled (clicking trigger does nothing). */\n  disabled?: boolean;\n  /** Custom icon slot name override. When not provided, a default warning icon is used. */\n  icon?: string;\n  /** Whether to show the cancel button. */\n  showCancel?: boolean;\n  /** The event that triggers the popconfirm to open. */\n  trigger?: `${BPopconfirmTrigger}`;\n  /** Placement of the popconfirm relative to the target element. */\n  placement?: `${BPopconfirmPlacement}`;\n  /** Whether the popconfirm has an arrow pointing to the target. */\n  arrow?: boolean;\n  /** Delay in ms before showing on mouseenter. */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave. */\n  mouseLeaveDelay?: number;\n  /** Whether to destroy the popconfirm DOM when hidden. */\n  destroyTooltipOnHide?: boolean;\n  /** z-index of the popconfirm. */\n  zIndex?: number;\n  /** Controlled visibility - bind with `v-model`. */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the confirm button is clicked. Receives a callback to close programmatically. */\n  (e: 'confirm', event: MouseEvent): void;\n  /** Emitted when the cancel button is clicked. Receives a callback to close programmatically. */\n  (e: 'cancel', event: MouseEvent): void;\n  /** Emitted when the popconfirm visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\ndefineSlots<{\n  /** The target element that triggers the popconfirm. */\n  default?(): unknown;\n  /** Overrides the `title` prop with custom content. */\n  title?(): unknown;\n  /** Overrides the `description` prop with custom content. */\n  description?(): unknown;\n  /** Overrides the default warning icon. */\n  icon?(): unknown;\n  /** Overrides the confirm button. */\n  okButton?(): unknown;\n  /** Overrides the cancel button. */\n  cancelButton?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst popconfirmId = useId();\nconst titleId = `${popconfirmId}-title`;\nconst descId = `${popconfirmId}-desc`;\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst hasBeenOpened = ref(false);\nconst shouldRender = computed(() => {\n  if (destroyTooltipOnHide) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = 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  popconfirmRef.value?.showPopover();\n}\n\nfunction doClose() {\n  popconfirmRef.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 popconfirmRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusFirstButton() {\n  nextTick(() => {\n    if (!popconfirmRef.value) return;\n    const first = popconfirmRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popconfirmRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !popconfirmRef.value) return;\n\n  const focusable = Array.from(\n    popconfirmRef.value.querySelectorAll<HTMLElement>(focusableSelector),\n  );\n  if (focusable.length === 0) {\n    event.preventDefault();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (event.shiftKey) {\n    if (document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    focusFirstButton();\n  } else {\n    if (previouslyFocusedElement) {\n      nextTick(() => previouslyFocusedElement?.focus());\n    }\n  }\n});\n\n// ─────────────────────────────────────────────\n// Button handlers\n// ─────────────────────────────────────────────\nfunction onConfirm(event: MouseEvent) {\n  emit('confirm', event);\n  requestClose();\n}\n\nfunction onCancel(event: MouseEvent) {\n  emit('cancel', event);\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 onMouseEnter() {\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onFocusIn() {\n  requestOpen();\n}\n\nfunction onFocusOut() {\n  requestClose();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    requestClose();\n  }\n}\n\nfunction onPopconfirmKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault();\n    requestClose();\n  }\n  trapFocus(event);\n}\n\n// ─────────────────────────────────────────────\n// Popconfirm hover (keep open when hovering content)\n// ─────────────────────────────────────────────\nfunction onPopconfirmMouseEnter() {\n  if (trigger === BPopconfirmTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onPopconfirmMouseLeave() {\n  if (trigger === BPopconfirmTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.addEventListener('keydown', onKeydown);\n\n  switch (trigger) {\n    case BPopconfirmTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BPopconfirmTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BPopconfirmTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('focusin', onFocusIn);\n  el.removeEventListener('focusout', onFocusOut);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  clearTimers();\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\n// Sync controlled v-model → popover state\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      popconfirmRef.value?.showPopover();\n    } else {\n      popconfirmRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-popconfirm-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BPopconfirmPlacement.TopLeft]: 'top-left',\n    [BPopconfirmPlacement.TopCenter]: 'top-center',\n    [BPopconfirmPlacement.TopRight]: 'top-right',\n    [BPopconfirmPlacement.RightTop]: 'right-top',\n    [BPopconfirmPlacement.RightCenter]: 'right-center',\n    [BPopconfirmPlacement.RightBottom]: 'right-bottom',\n    [BPopconfirmPlacement.BottomRight]: 'bottom-right',\n    [BPopconfirmPlacement.BottomCenter]: 'bottom-center',\n    [BPopconfirmPlacement.BottomLeft]: 'bottom-left',\n    [BPopconfirmPlacement.LeftBottom]: 'left-bottom',\n    [BPopconfirmPlacement.LeftCenter]: 'left-center',\n    [BPopconfirmPlacement.LeftTop]: 'left-top',\n  };\n  return map[placement] ?? 'top-center';\n});\n\nconst okButtonClass = computed(() => {\n  const map: Record<string, string> = {\n    primary: 'b-popconfirm__btn--primary',\n    default: 'b-popconfirm__btn--default',\n    dashed: 'b-popconfirm__btn--dashed',\n    text: 'b-popconfirm__btn--text',\n    link: 'b-popconfirm__btn--link',\n  };\n  return map[okType] ?? 'b-popconfirm__btn--primary';\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div ref=\"toggleRef\" class=\"b-popconfirm__toggle\" :style=\"{ anchorName: anchorName }\">\n    <slot />\n  </div>\n\n  <div\n    ref=\"popconfirmRef\"\n    popover=\"manual\"\n    :class=\"[\n      'b-popconfirm__content',\n      placementClass,\n      { 'b-popconfirm__content--no-arrow': !arrow },\n    ]\"\n    :style=\"{ zIndex, positionAnchor: anchorName }\"\n    role=\"dialog\"\n    aria-modal=\"false\"\n    :aria-labelledby=\"titleId\"\n    :aria-describedby=\"description ? descId : undefined\"\n    :id=\"popconfirmId\"\n    tabindex=\"-1\"\n    @toggle=\"onPopoverToggle\"\n    @keydown=\"onPopconfirmKeydown\"\n    @mouseenter=\"onPopconfirmMouseEnter\"\n    @mouseleave=\"onPopconfirmMouseLeave\"\n  >\n    <template v-if=\"shouldRender || !destroyTooltipOnHide\">\n      <div v-if=\"arrow\" class=\"b-popconfirm__arrow\" aria-hidden=\"true\" />\n      <div class=\"b-popconfirm__inner\">\n        <div class=\"b-popconfirm__message\">\n          <span class=\"b-popconfirm__icon\" aria-hidden=\"true\">\n            <slot name=\"icon\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                width=\"16\"\n                height=\"16\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n                />\n              </svg>\n            </slot>\n          </span>\n          <div class=\"b-popconfirm__text\">\n            <div :id=\"titleId\" class=\"b-popconfirm__title\">\n              <slot name=\"title\">{{ title }}</slot>\n            </div>\n            <div\n              v-if=\"description || $slots.description\"\n              :id=\"descId\"\n              class=\"b-popconfirm__description\"\n            >\n              <slot name=\"description\">{{ description }}</slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"b-popconfirm__buttons\" role=\"group\">\n          <slot name=\"cancelButton\">\n            <button\n              v-if=\"showCancel\"\n              type=\"button\"\n              class=\"b-popconfirm__btn b-popconfirm__btn--default\"\n              @click=\"onCancel\"\n            >\n              {{ cancelText }}\n            </button>\n          </slot>\n          <slot name=\"okButton\">\n            <button type=\"button\" :class=\"['b-popconfirm__btn', okButtonClass]\" @click=\"onConfirm\">\n              {{ okText }}\n            </button>\n          </slot>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n:root {\n  --b-popconfirm-bg: #fff;\n  --b-popconfirm-color: oklch(25% 0 0);\n  --b-popconfirm-font-size: 0.875rem;\n  --b-popconfirm-line-height: 1.5;\n  --b-popconfirm-padding-x: 0.75rem;\n  --b-popconfirm-padding-y: 0.75rem;\n  --b-popconfirm-border-radius: 0.5rem;\n  --b-popconfirm-max-width: 320px;\n  --b-popconfirm-arrow-size: 8px;\n  --b-popconfirm-arrow-color: #fff;\n  --b-popconfirm-gap: 8px;\n  --b-popconfirm-transition-duration: 200ms;\n  --b-popconfirm-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-popconfirm-icon-color: oklch(75% 0.15 85);\n  --b-popconfirm-title-font-weight: 600;\n  --b-popconfirm-description-color: oklch(45% 0 0);\n  --b-popconfirm-btn-font-size: 0.8125rem;\n  --b-popconfirm-btn-padding-x: 0.5rem;\n  --b-popconfirm-btn-padding-y: 0.125rem;\n  --b-popconfirm-btn-border-radius: 0.25rem;\n  --b-popconfirm-btn-primary-bg: oklch(55% 0.2 260);\n  --b-popconfirm-btn-primary-color: #fff;\n  --b-popconfirm-btn-default-bg: transparent;\n  --b-popconfirm-btn-default-color: oklch(25% 0 0);\n  --b-popconfirm-btn-default-border: oklch(80% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] {\n  --b-popconfirm-bg: oklch(22% 0 0);\n  --b-popconfirm-color: oklch(90% 0 0);\n  --b-popconfirm-arrow-color: oklch(22% 0 0);\n  --b-popconfirm-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-popconfirm-icon-color: oklch(80% 0.15 85);\n  --b-popconfirm-description-color: oklch(65% 0 0);\n  --b-popconfirm-btn-primary-bg: oklch(55% 0.2 260);\n  --b-popconfirm-btn-default-color: oklch(90% 0 0);\n  --b-popconfirm-btn-default-border: oklch(40% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] {\n    --b-popconfirm-bg: oklch(22% 0 0);\n    --b-popconfirm-color: oklch(90% 0 0);\n    --b-popconfirm-arrow-color: oklch(22% 0 0);\n    --b-popconfirm-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-popconfirm-icon-color: oklch(80% 0.15 85);\n    --b-popconfirm-description-color: oklch(65% 0 0);\n    --b-popconfirm-btn-primary-bg: oklch(55% 0.2 260);\n    --b-popconfirm-btn-default-color: oklch(90% 0 0);\n    --b-popconfirm-btn-default-border: oklch(40% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-popconfirm__toggle {\n  display: inline-block;\n}\n\n/* ─────────────────────────────────────────────\n   Popconfirm content (popover)\n   ───────────────────────────────────────────── */\n.b-popconfirm__content {\n  /* Reset popover defaults */\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  max-width: var(--b-popconfirm-max-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  /* Animation and visibility */\n  transition:\n    display var(--b-popconfirm-transition-duration),\n    opacity var(--b-popconfirm-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: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-popconfirm-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-popconfirm-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-popconfirm-gap);\n  }\n\n  /* ── Placement: Right ── */\n  &.right-top {\n    inset: auto;\n    top: anchor(top);\n    left: anchor(right);\n    margin-left: var(--b-popconfirm-gap);\n  }\n  &.right-center {\n    inset: auto;\n    align-self: anchor-center;\n    left: anchor(right);\n    margin-left: var(--b-popconfirm-gap);\n  }\n  &.right-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    left: anchor(right);\n    margin-left: var(--b-popconfirm-gap);\n  }\n\n  /* ── Placement: Bottom ── */\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-popconfirm-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-popconfirm-gap);\n  }\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-popconfirm-gap);\n  }\n\n  /* ── Placement: Left ── */\n  &.left-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    right: anchor(left);\n    margin-right: var(--b-popconfirm-gap);\n  }\n  &.left-center {\n    inset: auto;\n    align-self: anchor-center;\n    right: anchor(left);\n    margin-right: var(--b-popconfirm-gap);\n  }\n  &.left-top {\n    inset: auto;\n    top: anchor(top);\n    right: anchor(left);\n    margin-right: var(--b-popconfirm-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Inner content\n   ───────────────────────────────────────────── */\n.b-popconfirm__inner {\n  background: var(--b-popconfirm-bg);\n  color: var(--b-popconfirm-color);\n  font-size: var(--b-popconfirm-font-size);\n  line-height: var(--b-popconfirm-line-height);\n  padding: var(--b-popconfirm-padding-y) var(--b-popconfirm-padding-x);\n  border-radius: var(--b-popconfirm-border-radius);\n  box-shadow: var(--b-popconfirm-shadow);\n  word-wrap: break-word;\n}\n\n/* ─────────────────────────────────────────────\n   Message row (icon + text)\n   ───────────────────────────────────────────── */\n.b-popconfirm__message {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.b-popconfirm__icon {\n  flex-shrink: 0;\n  color: var(--b-popconfirm-icon-color);\n  line-height: 1;\n  margin-top: 0.125rem;\n}\n\n.b-popconfirm__text {\n  flex: 1;\n  min-width: 0;\n}\n\n.b-popconfirm__title {\n  font-weight: var(--b-popconfirm-title-font-weight);\n}\n\n.b-popconfirm__description {\n  color: var(--b-popconfirm-description-color);\n  margin-top: 0.25rem;\n  font-size: 0.8125rem;\n}\n\n/* ─────────────────────────────────────────────\n   Buttons\n   ───────────────────────────────────────────── */\n.b-popconfirm__buttons {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n\n.b-popconfirm__btn {\n  cursor: pointer;\n  font-size: var(--b-popconfirm-btn-font-size);\n  line-height: 1.5;\n  padding: var(--b-popconfirm-btn-padding-y) var(--b-popconfirm-btn-padding-x);\n  border-radius: var(--b-popconfirm-btn-border-radius);\n  border: 1px solid transparent;\n  font-family: inherit;\n  transition: opacity 150ms;\n\n  &:hover {\n    opacity: 0.85;\n  }\n\n  &:focus-visible {\n    outline: 2px solid oklch(55% 0.2 260);\n    outline-offset: 1px;\n  }\n}\n\n.b-popconfirm__btn--primary {\n  background: var(--b-popconfirm-btn-primary-bg);\n  color: var(--b-popconfirm-btn-primary-color);\n}\n\n.b-popconfirm__btn--default {\n  background: var(--b-popconfirm-btn-default-bg);\n  color: var(--b-popconfirm-btn-default-color);\n  border-color: var(--b-popconfirm-btn-default-border);\n}\n\n.b-popconfirm__btn--dashed {\n  background: var(--b-popconfirm-btn-default-bg);\n  color: var(--b-popconfirm-btn-default-color);\n  border-color: var(--b-popconfirm-btn-default-border);\n  border-style: dashed;\n}\n\n.b-popconfirm__btn--text {\n  background: transparent;\n  color: var(--b-popconfirm-btn-default-color);\n  border: none;\n}\n\n.b-popconfirm__btn--link {\n  background: transparent;\n  color: var(--b-popconfirm-btn-primary-bg);\n  border: none;\n  text-decoration: underline;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-popconfirm__arrow {\n  position: absolute;\n  width: var(--b-popconfirm-arrow-size);\n  height: var(--b-popconfirm-arrow-size);\n  background: var(--b-popconfirm-arrow-color);\n  transform: rotate(45deg);\n  pointer-events: none;\n}\n\n/* Arrow positioning for top placements */\n.b-popconfirm__content.top-left .b-popconfirm__arrow,\n.b-popconfirm__content.top-center .b-popconfirm__arrow,\n.b-popconfirm__content.top-right .b-popconfirm__arrow {\n  bottom: calc(var(--b-popconfirm-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* Arrow positioning for bottom placements */\n.b-popconfirm__content.bottom-left .b-popconfirm__arrow,\n.b-popconfirm__content.bottom-center .b-popconfirm__arrow,\n.b-popconfirm__content.bottom-right .b-popconfirm__arrow {\n  top: calc(var(--b-popconfirm-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* Arrow positioning for right placements */\n.b-popconfirm__content.right-top .b-popconfirm__arrow,\n.b-popconfirm__content.right-center .b-popconfirm__arrow,\n.b-popconfirm__content.right-bottom .b-popconfirm__arrow {\n  left: calc(var(--b-popconfirm-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* Arrow positioning for left placements */\n.b-popconfirm__content.left-top .b-popconfirm__arrow,\n.b-popconfirm__content.left-center .b-popconfirm__arrow,\n.b-popconfirm__content.left-bottom .b-popconfirm__arrow {\n  right: calc(var(--b-popconfirm-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks (auto-adjust overflow)\n   ───────────────────────────────────────────── */\n@position-try --b-popconfirm-top-center {\n  inset: auto;\n  bottom: anchor(top);\n  justify-self: anchor-center;\n  margin-bottom: var(--b-popconfirm-gap);\n}\n\n@position-try --b-popconfirm-bottom-center {\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--b-popconfirm-gap);\n}\n\n@position-try --b-popconfirm-right-center {\n  inset: auto;\n  align-self: anchor-center;\n  left: anchor(right);\n  margin-left: var(--b-popconfirm-gap);\n}\n\n@position-try --b-popconfirm-left-center {\n  inset: auto;\n  align-self: anchor-center;\n  right: anchor(left);\n  margin-right: var(--b-popconfirm-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-popconfirm__content {\n    transition-duration: 0ms;\n  }\n\n  .b-popconfirm__btn {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"design-system157.js","names":[],"sources":["../src/components/BMessage/BMessage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BMessageType } from '@/types.ts';\nimport { computed, onUnmounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  type = BMessageType.Info,\n  content = '',\n  duration = 3,\n  showIcon = true,\n  modelValue = undefined,\n} = defineProps<{\n  /**\n   * Message type - controls icon and colour scheme.\n   * @default 'info'\n   */\n  type?: `${BMessageType}`;\n  /** The message content text (also accepts the default slot). */\n  content?: string;\n  /**\n   * Time (in seconds) before auto-close. Set to `0` to disable auto-close.\n   * @default 3\n   */\n  duration?: number;\n  /** Show the built-in status icon. @default true */\n  showIcon?: boolean;\n  /**\n   * Controlled visibility - when provided the component operates in\n   * controlled mode; otherwise it manages its own visibility.\n   * Bind with `v-model`.\n   */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired synchronously when the message starts closing. */\n  (e: 'close'): void;\n  /** Fired after the leave-transition fully completes. */\n  (e: 'afterClose'): void;\n  /** v-model support */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst messageId = useId();\n\n/** Uncontrolled visibility flag - default closed. */\nconst internalVisible = ref(false);\n\n/**\n * Effective visibility:\n *  - controlled  → honour `modelValue`\n *  - uncontrolled → use `internalVisible`\n */\nconst isVisible = computed(() => (modelValue !== undefined ? modelValue : internalVisible.value));\n\nconst isControlled = computed(() => modelValue !== undefined);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\n/** ARIA role: 'alert' for error/warning (assertive), 'status' for others. */\nconst ariaRole = computed<'alert' | 'status'>(() =>\n  type === BMessageType.Error || type === BMessageType.Warning ? 'alert' : 'status',\n);\n\n/** Map type → inline SVG path for the status icon. */\nconst iconPath = computed(() => {\n  switch (type) {\n    case BMessageType.Success:\n      // circle-check\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5-4-4 1.41-1.41L10 13.67l6.59-6.59L18 8.5l-8 8z';\n    case BMessageType.Warning:\n      // triangle-exclamation\n      return 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z';\n    case BMessageType.Error:\n      // circle-xmark\n      return 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z';\n    case BMessageType.Loading:\n      // spinner (circle arc)\n      return 'M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2z';\n    default:\n      // circle-info\n      return 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z';\n  }\n});\n\ndefineSlots<{\n  /** Overrides the `content` prop. */\n  default?(): unknown;\n  /** Overrides the built-in status icon. */\n  icon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Auto-close timer\n// ─────────────────────────────────────────────\nlet timer: ReturnType<typeof setTimeout> | null = null;\n\nfunction startTimer() {\n  clearTimer();\n  if (duration > 0) {\n    timer = setTimeout(() => {\n      close();\n    }, duration * 1000);\n  }\n}\n\nfunction clearTimer() {\n  if (timer !== null) {\n    clearTimeout(timer);\n    timer = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Behaviour\n// ─────────────────────────────────────────────\nfunction open() {\n  if (isControlled.value) {\n    emit('update:modelValue', true);\n  } else {\n    internalVisible.value = true;\n  }\n}\n\nfunction close() {\n  emit('close');\n  if (isControlled.value) {\n    emit('update:modelValue', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onAfterLeave() {\n  emit('afterClose');\n}\n\nfunction onMouseEnter() {\n  clearTimer();\n}\n\nfunction onMouseLeave() {\n  startTimer();\n}\n\n// ─────────────────────────────────────────────\n// Lifecycle\n// ─────────────────────────────────────────────\nonUnmounted(() => {\n  clearTimer();\n});\n\n// Start / clear auto-close timer whenever visibility changes\nwatch(\n  isVisible,\n  (visible) => {\n    if (visible) {\n      startTimer();\n    } else {\n      clearTimer();\n    }\n  },\n  { immediate: true },\n);\n\n// Expose open & close for imperative usage\ndefineExpose({ open, close });\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-message-fade\" @after-leave=\"onAfterLeave\">\n      <div\n        v-if=\"isVisible\"\n        :id=\"messageId\"\n        class=\"b-message\"\n        :class=\"[\n          `b-message--${type}`,\n          {\n            'b-message--with-icon': showIcon,\n          },\n        ]\"\n        :role=\"ariaRole\"\n        :aria-live=\"ariaRole === 'alert' ? 'assertive' : 'polite'\"\n        :aria-atomic=\"true\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n      >\n        <!-- Status icon -->\n        <span v-if=\"showIcon\" class=\"b-message__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <svg\n              class=\"b-message__icon-svg\"\n              :class=\"{ 'b-message__icon-svg--spin': type === 'loading' }\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              focusable=\"false\"\n            >\n              <path :d=\"iconPath\" />\n            </svg>\n          </slot>\n        </span>\n\n        <!-- Content -->\n        <span class=\"b-message__content\">\n          <slot>{{ content }}</slot>\n        </span>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-message {\n  /* Layout */\n  --b-message-padding-v: 0.625rem;\n  --b-message-padding-h: 1rem;\n  --b-message-border-radius: 0.5rem;\n  --b-message-icon-size: 1rem;\n  --b-message-gap: 0.5rem;\n  --b-message-font-size: 0.875rem;\n  --b-message-max-width: 32rem;\n\n  /* Colours - info (default) */\n  --b-message-bg: #ffffff;\n  --b-message-border-color: oklch(90% 0.02 240);\n  --b-message-color: oklch(30% 0.02 240);\n  --b-message-icon-color: oklch(62.3% 0.214 259.815);\n  --b-message-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\n  /* Animation */\n  --b-message-transition-duration: 300ms;\n  --b-message-top: 8px;\n}\n\n/* ── Variant colour tokens ── */\n.b-message--success {\n  --b-message-icon-color: oklch(72.3% 0.219 149.579);\n}\n\n.b-message--warning {\n  --b-message-icon-color: oklch(75% 0.183 55.934);\n}\n\n.b-message--error {\n  --b-message-icon-color: oklch(63.7% 0.237 25.331);\n}\n\n.b-message--loading {\n  --b-message-icon-color: oklch(62.3% 0.214 259.815);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-message {\n  --b-message-bg: oklch(22% 0.02 240);\n  --b-message-border-color: oklch(35% 0.03 240);\n  --b-message-color: oklch(88% 0.02 240);\n  --b-message-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-message {\n    --b-message-bg: oklch(22% 0.02 240);\n    --b-message-border-color: oklch(35% 0.03 240);\n    --b-message-color: oklch(88% 0.02 240);\n    --b-message-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-message {\n  position: fixed;\n  top: var(--b-message-top);\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 1010;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-message-gap);\n  padding: var(--b-message-padding-v) var(--b-message-padding-h);\n  border-radius: var(--b-message-border-radius);\n  background-color: var(--b-message-bg);\n  color: var(--b-message-color);\n  font-size: var(--b-message-font-size);\n  line-height: 1.5;\n  box-shadow: var(--b-message-shadow);\n  box-sizing: border-box;\n  max-width: var(--b-message-max-width);\n  word-break: break-word;\n  pointer-events: auto;\n}\n\n/* ── Icon ── */\n.b-message__icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  color: var(--b-message-icon-color);\n  line-height: 1;\n}\n\n.b-message__icon-svg {\n  width: var(--b-message-icon-size);\n  height: var(--b-message-icon-size);\n  fill: currentColor;\n  display: block;\n}\n\n/* Loading spinner animation */\n.b-message__icon-svg--spin {\n  animation: b-message-spin 1s linear infinite;\n}\n\n@keyframes b-message-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ── Content ── */\n.b-message__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Transition (slide-down + fade)\n   ───────────────────────────────────────────── */\n.b-message-fade-enter-active,\n.b-message-fade-leave-active {\n  transition:\n    opacity var(--b-message-transition-duration, 300ms) ease,\n    transform var(--b-message-transition-duration, 300ms) ease;\n}\n\n.b-message-fade-enter-from {\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n.b-message-fade-enter-to {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.b-message-fade-leave-from {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n\n.b-message-fade-leave-to {\n  opacity: 0;\n  transform: translateX(-50%) translateY(-100%);\n}\n\n/* Respect prefers-reduced-motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-message-fade-enter-active,\n  .b-message-fade-leave-active {\n    transition: opacity var(--b-message-transition-duration, 300ms) ease;\n  }\n\n  .b-message-fade-enter-from,\n  .b-message-fade-leave-to {\n    transform: translateX(-50%);\n  }\n\n  .b-message__icon-svg--spin {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system158.js

@@ -0,0 +1,12 @@
+import e from "./design-system14.js";
+import { createElementBlock as t, openBlock as n, renderSlot as r } from "vue";
+//#region src/components/BModal/BModalBody.vue
+var i = {}, a = { class: "b:text-sm b:text-black/80" };
+function o(e, i) {
+	return n(), t("div", a, [r(e.$slots, "default")]);
+}
+var s = /* @__PURE__ */ e(i, [["render", o]]);
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=design-system158.js.map

package/dist/design-system158.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system158.js","names":[],"sources":["../src/components/BModal/BModalBody.vue"],"sourcesContent":["<template>\n  <div class=\"b:text-sm b:text-black/80\">\n    <slot></slot>\n  </div>\n</template>\n"],"mappings":";;;kBACO,OAAM,6BAA2B;;aAAtC,EAEM,OAFN,GAEM,CADJ,EAAa,EAAA,QAAA,UAAA,CAAA,CAAA"}