@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system188.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system188.js","names":[],"sources":["../src/components/BSkeleton/BSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport BSkeletonAvatar from './BSkeletonAvatar.vue';\nimport type {\n  BSkeletonAvatarConfig,\n  BSkeletonParagraphConfig,\n  BSkeletonTitleConfig,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  active = false,\n  avatar = false,\n  loading = true,\n  paragraph = true,\n  round = false,\n  title = true,\n} = defineProps<{\n  /**\n   * Show the animated shimmer effect.\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Show the avatar placeholder. Pass an object to configure its shape/size/active.\n   * @default false\n   */\n  avatar?: boolean | BSkeletonAvatarConfig;\n  /**\n   * When `false`, renders the default slot (real content) instead of placeholders.\n   * @default true\n   */\n  loading?: boolean;\n  /**\n   * Show paragraph placeholder rows. Pass an object to configure rows / row widths.\n   * @default true\n   */\n  paragraph?: boolean | BSkeletonParagraphConfig;\n  /**\n   * Round corners on title and paragraph rows.\n   * @default false\n   */\n  round?: boolean;\n  /**\n   * Show the title bar placeholder. Pass an object to configure its width.\n   * @default true\n   */\n  title?: boolean | BSkeletonTitleConfig;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Real content rendered when `loading` is `false`. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Derived flags / configs\n// ─────────────────────────────────────────────\nconst showAvatar = computed(() => avatar !== false && avatar != null);\nconst showTitle = computed(() => title !== false && title != null);\nconst showParagraph = computed(() => paragraph !== false && paragraph != null);\n\nconst avatarConfig = computed<BSkeletonAvatarConfig>(() =>\n  typeof avatar === 'object' && avatar !== null ? avatar : {},\n);\n\nconst titleConfig = computed<BSkeletonTitleConfig>(() =>\n  typeof title === 'object' && title !== null ? title : {},\n);\n\nconst paragraphConfig = computed<BSkeletonParagraphConfig>(() =>\n  typeof paragraph === 'object' && paragraph !== null ? paragraph : {},\n);\n\nconst titleWidth = computed(() => normalizeWidth(titleConfig.value.width));\n\nconst paragraphRows = computed(() => {\n  const r = paragraphConfig.value.rows;\n  return typeof r === 'number' && r > 0 ? Math.floor(r) : 3;\n});\n\nconst paragraphRowWidths = computed<string[]>(() => {\n  const widths = paragraphConfig.value.width;\n  const rows = paragraphRows.value;\n  const out: string[] = [];\n  for (let i = 0; i < rows; i += 1) {\n    if (Array.isArray(widths)) {\n      const w = widths[i];\n      out.push(normalizeWidth(w) ?? '');\n    } else if (i === rows - 1) {\n      // Apply explicit width to the LAST row only when a single value is given.\n      const w = normalizeWidth(widths);\n      out.push(w ?? '61%');\n    } else {\n      out.push('');\n    }\n  }\n  return out;\n});\n\nfunction normalizeWidth(w: number | string | undefined): string | undefined {\n  if (w == null) return undefined;\n  if (typeof w === 'number') return `${w}px`;\n  return w;\n}\n\nconst rootClasses = computed(() => [\n  'b-skeleton',\n  {\n    'b-skeleton--active': active,\n    'b-skeleton--with-avatar': showAvatar.value,\n    'b-skeleton--round': round,\n  },\n]);\n</script>\n\n<template>\n  <div v-if=\"loading\" :class=\"rootClasses\" role=\"status\" aria-live=\"polite\" aria-label=\"Loading\">\n    <div v-if=\"showAvatar\" class=\"b-skeleton__header\">\n      <BSkeletonAvatar\n        :active=\"active || avatarConfig.active\"\n        :shape=\"avatarConfig.shape\"\n        :size=\"avatarConfig.size\"\n      />\n    </div>\n\n    <div class=\"b-skeleton__content\">\n      <h3\n        v-if=\"showTitle\"\n        class=\"b-skeleton__title\"\n        :style=\"titleWidth ? { width: titleWidth } : undefined\"\n        aria-hidden=\"true\"\n      />\n\n      <ul v-if=\"showParagraph\" class=\"b-skeleton__paragraph\" aria-hidden=\"true\">\n        <li\n          v-for=\"(w, i) in paragraphRowWidths\"\n          :key=\"i\"\n          class=\"b-skeleton__paragraph-row\"\n          :style=\"w ? { width: w } : undefined\"\n        />\n      </ul>\n    </div>\n  </div>\n\n  <template v-else>\n    <slot />\n  </template>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ─────────────────────────────────────────────\n   AntD design-token mapping:\n     gradientFromColor  → --b-skeleton-gradient-from-color\n     gradientToColor    → --b-skeleton-gradient-to-color\n     titleHeight        → --b-skeleton-title-height\n     paragraphLiHeight  → --b-skeleton-paragraph-li-height\n     paragraphMarginTop → --b-skeleton-paragraph-margin-top\n     blockRadius        → --b-skeleton-block-radius\n     borderRadius       → --b-skeleton-border-radius\n     borderRadiusSM     → --b-skeleton-border-radius-sm\n     controlHeight      → --b-skeleton-control-height\n     controlHeightLG    → --b-skeleton-control-height-lg\n     controlHeightSM    → --b-skeleton-control-height-sm\n     ─────────────────────────────────────────── */\n.b-skeleton {\n  --b-skeleton-gradient-from-color: oklch(93% 0 0); /* #f2f2f2 */\n  --b-skeleton-gradient-to-color: oklch(85% 0 0); /* #d9d9d9 */\n  --b-skeleton-title-height: 16px;\n  --b-skeleton-paragraph-li-height: 16px;\n  --b-skeleton-paragraph-margin-top: 28px;\n  --b-skeleton-paragraph-row-gap: 16px;\n  --b-skeleton-block-radius: 4px;\n  --b-skeleton-border-radius: 6px;\n  --b-skeleton-border-radius-sm: 4px;\n  --b-skeleton-control-height: 32px;\n  --b-skeleton-control-height-lg: 40px;\n  --b-skeleton-control-height-sm: 24px;\n  --b-skeleton-avatar-size-default: 32px;\n  --b-skeleton-avatar-size-small: 24px;\n  --b-skeleton-avatar-size-large: 40px;\n  --b-skeleton-image-size: 96px;\n  --b-skeleton-button-min-width: 64px;\n  --b-skeleton-input-min-width: 160px;\n  --b-skeleton-animation-duration: 1.4s;\n  --b-skeleton-content-gap: 16px;\n}\n\n/* Dark mode (explicit + system) */\n[data-prefers-color='dark'] .b-skeleton,\n[data-prefers-color='dark'] .b-skeleton-element {\n  --b-skeleton-gradient-from-color: oklch(28% 0 0);\n  --b-skeleton-gradient-to-color: oklch(35% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton,\n  [data-prefers-color='system'] .b-skeleton-element {\n    --b-skeleton-gradient-from-color: oklch(28% 0 0);\n    --b-skeleton-gradient-to-color: oklch(35% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Layout\n   ───────────────────────────────────────────── */\n.b-skeleton {\n  display: flex;\n  width: 100%;\n  gap: var(--b-skeleton-content-gap);\n  box-sizing: border-box;\n}\n\n.b-skeleton__header {\n  flex-shrink: 0;\n}\n\n.b-skeleton__content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-skeleton__title {\n  width: 38%;\n  height: var(--b-skeleton-title-height);\n  margin: 0;\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton--with-avatar .b-skeleton__title {\n  width: 50%;\n}\n\n.b-skeleton--round .b-skeleton__title {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Paragraph\n   ───────────────────────────────────────────── */\n.b-skeleton__paragraph {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__title + .b-skeleton__paragraph {\n  margin-top: var(--b-skeleton-paragraph-margin-top);\n}\n\n.b-skeleton__paragraph-row {\n  width: 100%;\n  height: var(--b-skeleton-paragraph-li-height);\n  background: var(--b-skeleton-gradient-from-color);\n  border-radius: var(--b-skeleton-block-radius);\n}\n\n.b-skeleton__paragraph-row + .b-skeleton__paragraph-row {\n  margin-top: var(--b-skeleton-paragraph-row-gap);\n}\n\n.b-skeleton--round .b-skeleton__paragraph-row {\n  border-radius: 100px;\n}\n\n/* ─────────────────────────────────────────────\n   Active shimmer animation\n   ───────────────────────────────────────────── */\n.b-skeleton--active .b-skeleton__title,\n.b-skeleton--active .b-skeleton__paragraph-row {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color) 25%,\n    var(--b-skeleton-gradient-to-color) 37%,\n    var(--b-skeleton-gradient-from-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration) ease infinite;\n}\n\n@keyframes b-skeleton-loading {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* Shared active shimmer for sub-components (Avatar, Button, Input, Image, Node) */\n.b-skeleton-element--active {\n  background: linear-gradient(\n    90deg,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 25%,\n    var(--b-skeleton-gradient-to-color, oklch(85% 0 0)) 37%,\n    var(--b-skeleton-gradient-from-color, oklch(93% 0 0)) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-skeleton-loading var(--b-skeleton-animation-duration, 1.4s) ease infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-skeleton--active .b-skeleton__title,\n  .b-skeleton--active .b-skeleton__paragraph-row,\n  .b-skeleton-element--active {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system188.js","names":["$attrs"],"sources":["../src/components/BRate/BRate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, ref, watch } from 'vue';\n\n//#region Props\nconst {\n  allowClear = true,\n  allowHalf = false,\n  count = 5,\n  disabled = false,\n  keyboard = true,\n  size = 'default',\n  tooltips = [],\n  character,\n} = defineProps<{\n  /** Whether to allow clearing the value when clicking the same star again. */\n  allowClear?: boolean;\n  /** Whether to allow half-star selection. */\n  allowHalf?: boolean;\n  /** Total number of stars. */\n  count?: number;\n  /** If true, the component is read-only and cannot be interacted with. */\n  disabled?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Size of the stars. */\n  size?: 'small' | 'default' | 'large';\n  /** Array of tooltip strings displayed on hover for each star. */\n  tooltips?: string[];\n  /** Custom character/icon rendered as each star. Receives `{ index }`. */\n  character?: string;\n}>();\n\n/**\n * The current rating value.\n * Supports v-model for controlled usage.\n */\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  'hover-change': [value: number];\n  change: [value: number];\n  focus: [];\n  blur: [];\n  keydown: [event: KeyboardEvent];\n}>();\n//#endregion\n\n//#region Internal state\nconst { componentUID } = useComponentId();\nconst hoverValue = ref(0);\nconst isFocused = ref(false);\nconst focusedIndex = ref(0);\n\nconst currentValue = computed(() =>\n  hoverValue.value > 0 ? hoverValue.value : model.value,\n);\n\nconst stars = computed(() => {\n  const items: { index: number; value: number }[] = [];\n  for (let i = 1; i <= count; i++) {\n    items.push({ index: i, value: i });\n  }\n  return items;\n});\n//#endregion\n\n//#region Star state\nfunction getStarState(index: number): 'full' | 'half' | 'zero' {\n  const val = currentValue.value;\n  if (index <= Math.floor(val)) return 'full';\n  if (allowHalf && index - 0.5 <= val && index > val) return 'half';\n  return 'zero';\n}\n//#endregion\n\n//#region Handlers\nfunction handleClick(index: number, isHalf: boolean) {\n  if (disabled) return;\n\n  const newValue = isHalf && allowHalf ? index - 0.5 : index;\n\n  if (allowClear && newValue === model.value) {\n    model.value = 0;\n    emit('change', 0);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleMouseMove(index: number, event: MouseEvent) {\n  if (disabled) return;\n\n  const target = event.currentTarget as HTMLElement;\n  const rect = target.getBoundingClientRect();\n  const isLeftHalf = event.clientX - rect.left < rect.width / 2;\n\n  let newHoverValue: number;\n  if (allowHalf && isLeftHalf) {\n    newHoverValue = index - 0.5;\n  } else {\n    newHoverValue = index;\n  }\n\n  if (newHoverValue !== hoverValue.value) {\n    hoverValue.value = newHoverValue;\n    emit('hover-change', newHoverValue);\n  }\n}\n\nfunction handleMouseLeave() {\n  if (disabled) return;\n  hoverValue.value = 0;\n  emit('hover-change', 0);\n}\n\nfunction handleFocus() {\n  isFocused.value = true;\n  focusedIndex.value = Math.ceil(model.value) || 1;\n  emit('focus');\n}\n\nfunction handleBlur() {\n  isFocused.value = false;\n  focusedIndex.value = 0;\n  emit('blur');\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (disabled || !keyboard) return;\n  emit('keydown', event);\n\n  const step = allowHalf ? 0.5 : 1;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp': {\n      event.preventDefault();\n      const next = Math.min(model.value + step, count);\n      model.value = next;\n      focusedIndex.value = Math.ceil(next);\n      emit('change', next);\n      break;\n    }\n    case 'ArrowLeft':\n    case 'ArrowDown': {\n      event.preventDefault();\n      const prev = Math.max(model.value - step, 0);\n      model.value = prev;\n      focusedIndex.value = Math.ceil(prev) || 1;\n      emit('change', prev);\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      event.preventDefault();\n      if (allowClear && focusedIndex.value === Math.ceil(model.value)) {\n        model.value = 0;\n        emit('change', 0);\n      }\n      break;\n    }\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLElement | null>(null);\n\nfunction focus() {\n  rootRef.value?.focus();\n}\n\nfunction blur() {\n  rootRef.value?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n\n//#region Watch hover for tooltip\nwatch(hoverValue, (val) => {\n  if (val === 0) {\n    focusedIndex.value = Math.ceil(model.value) || 0;\n  }\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-rate\"\n    :class=\"[\n      `b-rate--${size}`,\n      {\n        'b-rate--disabled': disabled,\n        'b-rate--focused': isFocused,\n      },\n    ]\"\n    role=\"slider\"\n    :aria-label=\"$attrs['aria-label'] as string || 'Rating'\"\n    :aria-disabled=\"disabled || undefined\"\n    :aria-valuenow=\"model\"\n    :aria-valuemin=\"0\"\n    :aria-valuemax=\"count\"\n    :aria-valuetext=\"`${model} out of ${count} stars`\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @mouseleave=\"handleMouseLeave\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @keydown=\"handleKeyDown\"\n  >\n    <div\n      v-for=\"star in stars\"\n      :key=\"star.index\"\n      class=\"b-rate__star\"\n      :class=\"{\n        'b-rate__star--full': getStarState(star.index) === 'full',\n        'b-rate__star--half': getStarState(star.index) === 'half',\n        'b-rate__star--zero': getStarState(star.index) === 'zero',\n        'b-rate__star--active': hoverValue > 0,\n        'b-rate__star--focused': isFocused && focusedIndex === star.index,\n      }\"\n      :title=\"tooltips[star.index - 1] || undefined\"\n      @mousemove=\"(e) => handleMouseMove(star.index, e)\"\n      @click=\"(e) => handleClick(star.index, allowHalf && (e.offsetX < (e.currentTarget as HTMLElement).offsetWidth / 2))\"\n    >\n      <div class=\"b-rate__star-first\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n      <div class=\"b-rate__star-second\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n    </div>\n\n    <input\n      type=\"hidden\"\n      :name=\"`b-rate-${componentUID}`\"\n      :value=\"model\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.b-rate {\n  --b-rate-star-bg: rgba(0, 0, 0, 0.06);\n  --b-rate-star-color: #fadb14;\n  --b-rate-star-hover-scale: scale(1.1);\n  --b-rate-star-size: 20px;\n\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  outline: none;\n  cursor: pointer;\n  line-height: 1;\n}\n\n.b-rate--small {\n  --b-rate-star-size: 15px;\n  gap: 6px;\n}\n\n.b-rate--large {\n  --b-rate-star-size: 25px;\n  gap: 10px;\n}\n\n.b-rate--disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.b-rate:focus-visible {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 4px;\n  border-radius: 2px;\n}\n\n.b-rate__star {\n  position: relative;\n  display: inline-flex;\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  cursor: pointer;\n  transition: transform 0.15s ease;\n}\n\n.b-rate--disabled .b-rate__star {\n  cursor: not-allowed;\n}\n\n.b-rate__star:not(.b-rate--disabled .b-rate__star):hover {\n  transform: var(--b-rate-star-hover-scale);\n}\n\n.b-rate__star--focused {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.b-rate__star-first,\n.b-rate__star-second {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  user-select: none;\n}\n\n.b-rate__star-first {\n  width: 50%;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.b-rate__star-second {\n  z-index: 0;\n}\n\n/* Zero state: both halves use background color */\n.b-rate__star--zero .b-rate__star-first,\n.b-rate__star--zero .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n/* Full state: both halves use active color */\n.b-rate__star--full .b-rate__star-first,\n.b-rate__star--full .b-rate__star-second {\n  color: var(--b-rate-star-color);\n}\n\n/* Half state: first half active, second half background */\n.b-rate__star--half .b-rate__star-first {\n  color: var(--b-rate-star-color);\n}\n\n.b-rate__star--half .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n.b-rate__icon {\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  flex-shrink: 0;\n  display: block;\n}\n\n.b-rate__character {\n  font-size: var(--b-rate-star-size);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.b-rate__character::before {\n  content: attr(data-character);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-rate {\n  --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n  --b-rate-star-color: #fadb14;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-rate {\n    --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n    --b-rate-star-color: #fadb14;\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-rate__star {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system190.js

@@ -0,0 +1,9 @@
+import e from "./design-system14.js";
+import t from "./design-system188.js";
+/* empty css                 */
+//#region src/components/BRate/BRate.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-60355169"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=design-system190.js.map

package/dist/design-system190.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system190.js","names":[],"sources":["../src/components/BRate/BRate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, ref, watch } from 'vue';\n\n//#region Props\nconst {\n  allowClear = true,\n  allowHalf = false,\n  count = 5,\n  disabled = false,\n  keyboard = true,\n  size = 'default',\n  tooltips = [],\n  character,\n} = defineProps<{\n  /** Whether to allow clearing the value when clicking the same star again. */\n  allowClear?: boolean;\n  /** Whether to allow half-star selection. */\n  allowHalf?: boolean;\n  /** Total number of stars. */\n  count?: number;\n  /** If true, the component is read-only and cannot be interacted with. */\n  disabled?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Size of the stars. */\n  size?: 'small' | 'default' | 'large';\n  /** Array of tooltip strings displayed on hover for each star. */\n  tooltips?: string[];\n  /** Custom character/icon rendered as each star. Receives `{ index }`. */\n  character?: string;\n}>();\n\n/**\n * The current rating value.\n * Supports v-model for controlled usage.\n */\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  'hover-change': [value: number];\n  change: [value: number];\n  focus: [];\n  blur: [];\n  keydown: [event: KeyboardEvent];\n}>();\n//#endregion\n\n//#region Internal state\nconst { componentUID } = useComponentId();\nconst hoverValue = ref(0);\nconst isFocused = ref(false);\nconst focusedIndex = ref(0);\n\nconst currentValue = computed(() =>\n  hoverValue.value > 0 ? hoverValue.value : model.value,\n);\n\nconst stars = computed(() => {\n  const items: { index: number; value: number }[] = [];\n  for (let i = 1; i <= count; i++) {\n    items.push({ index: i, value: i });\n  }\n  return items;\n});\n//#endregion\n\n//#region Star state\nfunction getStarState(index: number): 'full' | 'half' | 'zero' {\n  const val = currentValue.value;\n  if (index <= Math.floor(val)) return 'full';\n  if (allowHalf && index - 0.5 <= val && index > val) return 'half';\n  return 'zero';\n}\n//#endregion\n\n//#region Handlers\nfunction handleClick(index: number, isHalf: boolean) {\n  if (disabled) return;\n\n  const newValue = isHalf && allowHalf ? index - 0.5 : index;\n\n  if (allowClear && newValue === model.value) {\n    model.value = 0;\n    emit('change', 0);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleMouseMove(index: number, event: MouseEvent) {\n  if (disabled) return;\n\n  const target = event.currentTarget as HTMLElement;\n  const rect = target.getBoundingClientRect();\n  const isLeftHalf = event.clientX - rect.left < rect.width / 2;\n\n  let newHoverValue: number;\n  if (allowHalf && isLeftHalf) {\n    newHoverValue = index - 0.5;\n  } else {\n    newHoverValue = index;\n  }\n\n  if (newHoverValue !== hoverValue.value) {\n    hoverValue.value = newHoverValue;\n    emit('hover-change', newHoverValue);\n  }\n}\n\nfunction handleMouseLeave() {\n  if (disabled) return;\n  hoverValue.value = 0;\n  emit('hover-change', 0);\n}\n\nfunction handleFocus() {\n  isFocused.value = true;\n  focusedIndex.value = Math.ceil(model.value) || 1;\n  emit('focus');\n}\n\nfunction handleBlur() {\n  isFocused.value = false;\n  focusedIndex.value = 0;\n  emit('blur');\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (disabled || !keyboard) return;\n  emit('keydown', event);\n\n  const step = allowHalf ? 0.5 : 1;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp': {\n      event.preventDefault();\n      const next = Math.min(model.value + step, count);\n      model.value = next;\n      focusedIndex.value = Math.ceil(next);\n      emit('change', next);\n      break;\n    }\n    case 'ArrowLeft':\n    case 'ArrowDown': {\n      event.preventDefault();\n      const prev = Math.max(model.value - step, 0);\n      model.value = prev;\n      focusedIndex.value = Math.ceil(prev) || 1;\n      emit('change', prev);\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      event.preventDefault();\n      if (allowClear && focusedIndex.value === Math.ceil(model.value)) {\n        model.value = 0;\n        emit('change', 0);\n      }\n      break;\n    }\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLElement | null>(null);\n\nfunction focus() {\n  rootRef.value?.focus();\n}\n\nfunction blur() {\n  rootRef.value?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n\n//#region Watch hover for tooltip\nwatch(hoverValue, (val) => {\n  if (val === 0) {\n    focusedIndex.value = Math.ceil(model.value) || 0;\n  }\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-rate\"\n    :class=\"[\n      `b-rate--${size}`,\n      {\n        'b-rate--disabled': disabled,\n        'b-rate--focused': isFocused,\n      },\n    ]\"\n    role=\"slider\"\n    :aria-label=\"$attrs['aria-label'] as string || 'Rating'\"\n    :aria-disabled=\"disabled || undefined\"\n    :aria-valuenow=\"model\"\n    :aria-valuemin=\"0\"\n    :aria-valuemax=\"count\"\n    :aria-valuetext=\"`${model} out of ${count} stars`\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @mouseleave=\"handleMouseLeave\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @keydown=\"handleKeyDown\"\n  >\n    <div\n      v-for=\"star in stars\"\n      :key=\"star.index\"\n      class=\"b-rate__star\"\n      :class=\"{\n        'b-rate__star--full': getStarState(star.index) === 'full',\n        'b-rate__star--half': getStarState(star.index) === 'half',\n        'b-rate__star--zero': getStarState(star.index) === 'zero',\n        'b-rate__star--active': hoverValue > 0,\n        'b-rate__star--focused': isFocused && focusedIndex === star.index,\n      }\"\n      :title=\"tooltips[star.index - 1] || undefined\"\n      @mousemove=\"(e) => handleMouseMove(star.index, e)\"\n      @click=\"(e) => handleClick(star.index, allowHalf && (e.offsetX < (e.currentTarget as HTMLElement).offsetWidth / 2))\"\n    >\n      <div class=\"b-rate__star-first\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n      <div class=\"b-rate__star-second\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n    </div>\n\n    <input\n      type=\"hidden\"\n      :name=\"`b-rate-${componentUID}`\"\n      :value=\"model\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.b-rate {\n  --b-rate-star-bg: rgba(0, 0, 0, 0.06);\n  --b-rate-star-color: #fadb14;\n  --b-rate-star-hover-scale: scale(1.1);\n  --b-rate-star-size: 20px;\n\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  outline: none;\n  cursor: pointer;\n  line-height: 1;\n}\n\n.b-rate--small {\n  --b-rate-star-size: 15px;\n  gap: 6px;\n}\n\n.b-rate--large {\n  --b-rate-star-size: 25px;\n  gap: 10px;\n}\n\n.b-rate--disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.b-rate:focus-visible {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 4px;\n  border-radius: 2px;\n}\n\n.b-rate__star {\n  position: relative;\n  display: inline-flex;\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  cursor: pointer;\n  transition: transform 0.15s ease;\n}\n\n.b-rate--disabled .b-rate__star {\n  cursor: not-allowed;\n}\n\n.b-rate__star:not(.b-rate--disabled .b-rate__star):hover {\n  transform: var(--b-rate-star-hover-scale);\n}\n\n.b-rate__star--focused {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.b-rate__star-first,\n.b-rate__star-second {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  user-select: none;\n}\n\n.b-rate__star-first {\n  width: 50%;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.b-rate__star-second {\n  z-index: 0;\n}\n\n/* Zero state: both halves use background color */\n.b-rate__star--zero .b-rate__star-first,\n.b-rate__star--zero .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n/* Full state: both halves use active color */\n.b-rate__star--full .b-rate__star-first,\n.b-rate__star--full .b-rate__star-second {\n  color: var(--b-rate-star-color);\n}\n\n/* Half state: first half active, second half background */\n.b-rate__star--half .b-rate__star-first {\n  color: var(--b-rate-star-color);\n}\n\n.b-rate__star--half .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n.b-rate__icon {\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  flex-shrink: 0;\n  display: block;\n}\n\n.b-rate__character {\n  font-size: var(--b-rate-star-size);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.b-rate__character::before {\n  content: attr(data-character);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-rate {\n  --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n  --b-rate-star-color: #fadb14;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-rate {\n    --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n    --b-rate-star-color: #fadb14;\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-rate__star {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system191.js

@@ -1,8 +1,118 @@
-import e from "./design-system189.js";
-/* empty css                 */
-//#region src/components/BSkeleton/BSkeletonButton.vue
-var t = e;
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, nextTick as s, normalizeClass as c, normalizeStyle as l, onMounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, watch as g } from "vue";
+//#region src/components/BSegmented/BSegmented.vue?vue&type=script&setup=true&lang.ts
+var _ = ["aria-disabled"], v = [
+	"aria-label",
+	"aria-checked",
+	"aria-disabled",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+], y = { class: "b-segmented__item-inner" }, b = {
+	key: 0,
+	class: "b-segmented__item-icon",
+	"aria-hidden": "true"
+}, x = { class: "b-segmented__item-label" }, S = /* @__PURE__ */ o({
+	__name: "BSegmented",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		options: { default: () => [] },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "default" },
+		block: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(o, { emit: S }) {
+		let C = S, w = t(() => o.options.map((e) => typeof e == "string" || typeof e == "number" ? {
+			label: String(e),
+			value: e,
+			disabled: !1
+		} : {
+			label: String(e.label ?? e.value),
+			value: e.value,
+			disabled: e.disabled ?? !1,
+			icon: e.icon
+		})), T = t(() => o.modelValue !== void 0), E = f(o.modelValue ?? o.defaultValue ?? w.value[0]?.value);
+		g(() => o.modelValue, (e) => {
+			e !== void 0 && (E.value = e);
+		}), g(w, (e) => {
+			E.value === void 0 && e.length > 0 && (E.value = e[0].value);
+		});
+		let D = t(() => T.value ? o.modelValue : E.value), O = f(null), k = f(null);
+		function A(e) {
+			if (!O.value) return;
+			let t = O.value.querySelectorAll(".b-segmented__item")[e];
+			if (!t) return;
+			let n = O.value.getBoundingClientRect().left, { left: r, width: i } = t.getBoundingClientRect();
+			k.value = {
+				transform: `translateX(${r - n}px)`,
+				width: `${i}px`
+			};
+		}
+		let j = t(() => w.value.findIndex((e) => e.value === D.value));
+		g(j, async (e) => {
+			e < 0 || (await s(), A(e));
+		}, { immediate: !1 }), u(() => {
+			j.value >= 0 && A(j.value);
+		});
+		function M(e) {
+			o.disabled || e.disabled || e.value !== D.value && (T.value || (E.value = e.value), C("update:modelValue", e.value), C("change", e.value));
+		}
+		function N(e, t) {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), M(t)), (e.key === "ArrowRight" || e.key === "ArrowDown") && (e.preventDefault(), P(1)), (e.key === "ArrowLeft" || e.key === "ArrowUp") && (e.preventDefault(), P(-1));
+		}
+		function P(e) {
+			if (!O.value) return;
+			let t = Array.from(O.value.querySelectorAll(".b-segmented__item:not([aria-disabled=\"true\"])")), n = document.activeElement, r = t.indexOf(n);
+			if (r < 0) {
+				t[0]?.focus();
+				return;
+			}
+			t[(r + e + t.length) % t.length]?.focus();
+		}
+		let F = t(() => ["b-segmented", {
+			"b-segmented--disabled": o.disabled,
+			"b-segmented--block": o.block,
+			"b-segmented--small": o.size === "small",
+			"b-segmented--large": o.size === "large"
+		}]);
+		return (t, s) => (d(), r("div", {
+			ref_key: "rootRef",
+			ref: O,
+			class: c(F.value),
+			role: "group",
+			"aria-disabled": o.disabled ? "true" : void 0
+		}, [k.value ? (d(), r("div", {
+			key: 0,
+			class: "b-segmented__thumb",
+			"aria-hidden": "true",
+			style: l({
+				transform: k.value.transform,
+				width: k.value.width
+			})
+		}, null, 4)) : n("", !0), (d(!0), r(e, null, p(w.value, (e) => (d(), r("div", {
+			key: String(e.value),
+			class: c(["b-segmented__item", {
+				"b-segmented__item--selected": e.value === D.value,
+				"b-segmented__item--disabled": e.disabled || o.disabled
+			}]),
+			role: "radio",
+			"aria-label": e.label,
+			"aria-checked": e.value === D.value,
+			"aria-disabled": e.disabled || o.disabled ? "true" : void 0,
+			tabindex: o.disabled || e.disabled ? -1 : e.value === D.value ? 0 : -1,
+			onClick: (t) => M(e),
+			onKeydown: (t) => N(t, e)
+		}, [i("div", y, [e.icon ? (d(), r("span", b, h(e.icon), 1)) : n("", !0), i("span", x, [m(t.$slots, "label", { option: e }, () => [a(h(e.label), 1)])])])], 42, v))), 128))], 10, _));
+	}
+});
 //#endregion
-export { t as default };
+export { S as default };
 
 //# sourceMappingURL=design-system191.js.map

package/dist/design-system191.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system191.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonButtonShape, BSkeletonButtonSize } from './types';\n\nconst {\n  active = false,\n  block = false,\n  shape = 'default',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to full width. @default false */\n  block?: boolean;\n  /** Button shape. @default 'default' */\n  shape?: BSkeletonButtonShape;\n  /** Button size. @default 'default' */\n  size?: BSkeletonButtonSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-button',\n  `b-skeleton-button--${shape}`,\n  `b-skeleton-button--${size}`,\n  {\n    'b-skeleton-button--block': block,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-button {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-button-min-width, 64px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-button--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 48px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 80px;\n}\n\n.b-skeleton-button--round {\n  border-radius: 100px;\n}\n\n.b-skeleton-button--circle {\n  width: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-control-height, 32px);\n  border-radius: 50%;\n}\n.b-skeleton-button--circle.b-skeleton-button--small {\n  width: var(--b-skeleton-control-height-sm, 24px);\n  min-width: var(--b-skeleton-control-height-sm, 24px);\n}\n.b-skeleton-button--circle.b-skeleton-button--large {\n  width: var(--b-skeleton-control-height-lg, 40px);\n  min-width: var(--b-skeleton-control-height-lg, 40px);\n}\n\n.b-skeleton-button--square {\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system191.js","names":[],"sources":["../src/components/BSegmented/BSegmented.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\n\nimport type { BSegmentedOption, BSegmentedRawOption } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  modelValue,\n  defaultValue,\n  options = [],\n  disabled = false,\n  size = 'default',\n  block = false,\n} = defineProps<{\n  /**\n   * Currently selected value (controlled / two-way binding via v-model).\n   * When provided, the component is in controlled mode.\n   */\n  modelValue?: string | number;\n  /**\n   * Initial selected value for uncontrolled mode.\n   * Ignored when `modelValue` is set.\n   * @default first option value\n   */\n  defaultValue?: string | number;\n  /** Segmented options. Accepts strings, numbers, or option objects. */\n  options?: BSegmentedRawOption[];\n  /** Whether the whole control is disabled. @default false */\n  disabled?: boolean;\n  /** Size of the component. @default 'default' */\n  size?: 'small' | 'default' | 'large';\n  /** Whether the segmented fills the full width of its container. @default false */\n  block?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the selected value changes. */\n  (e: 'update:modelValue', value: string | number): void;\n  /** Fires when the selected value changes (mirrors `update:modelValue`). */\n  (e: 'change', value: string | number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Custom label renderer for each option. Receives the resolved option object. */\n  label?: (props: { option: BSegmentedOption }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Normalise options\n// ─────────────────────────────────────────────\nconst normalizedOptions = computed<BSegmentedOption[]>(() =>\n  options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt, disabled: false };\n    }\n    return {\n      label: String(opt.label ?? opt.value),\n      value: opt.value,\n      disabled: opt.disabled ?? false,\n      icon: opt.icon,\n    };\n  }),\n);\n\n// ─────────────────────────────────────────────\n// Internal selection state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => modelValue !== undefined);\n\nconst internalValue = ref<string | number | undefined>(\n  modelValue ?? defaultValue ?? normalizedOptions.value[0]?.value,\n);\n\n// Sync controlled value → internal\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val !== undefined) internalValue.value = val;\n  },\n);\n\n// Sync first option as default when options change and nothing is selected\nwatch(normalizedOptions, (opts) => {\n  if (internalValue.value === undefined && opts.length > 0) {\n    internalValue.value = opts[0].value;\n  }\n});\n\nconst selectedValue = computed(() => (isControlled.value ? modelValue : internalValue.value));\n\n// ─────────────────────────────────────────────\n// Thumb (animated indicator) positioning\n// ─────────────────────────────────────────────\nconst rootRef = ref<HTMLElement | null>(null);\nconst thumbStyle = ref<{ transform: string; width: string } | null>(null);\n\nfunction updateThumb(index: number) {\n  if (!rootRef.value) return;\n  const items = rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item');\n  const target = items[index];\n  if (!target) return;\n\n  const containerLeft = rootRef.value.getBoundingClientRect().left;\n  const { left, width } = target.getBoundingClientRect();\n  thumbStyle.value = {\n    transform: `translateX(${left - containerLeft}px)`,\n    width: `${width}px`,\n  };\n}\n\nconst selectedIndex = computed(() =>\n  normalizedOptions.value.findIndex((o) => o.value === selectedValue.value),\n);\n\nwatch(\n  selectedIndex,\n  async (idx) => {\n    if (idx < 0) return;\n    await nextTick();\n    updateThumb(idx);\n  },\n  { immediate: false },\n);\n\nonMounted(() => {\n  if (selectedIndex.value >= 0) updateThumb(selectedIndex.value);\n});\n\n// ─────────────────────────────────────────────\n// Selection logic\n// ─────────────────────────────────────────────\nfunction select(opt: BSegmentedOption) {\n  if (disabled || opt.disabled) return;\n  if (opt.value === selectedValue.value) return;\n\n  if (!isControlled.value) {\n    internalValue.value = opt.value;\n  }\n  emit('update:modelValue', opt.value);\n  emit('change', opt.value);\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent, opt: BSegmentedOption) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    select(opt);\n  }\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusNext(1);\n  }\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    focusNext(-1);\n  }\n}\n\nfunction focusNext(direction: 1 | -1) {\n  if (!rootRef.value) return;\n  const items = Array.from(\n    rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item:not([aria-disabled=\"true\"])'),\n  );\n  const activeEl = document.activeElement as HTMLElement;\n  const currentIdx = items.indexOf(activeEl);\n  if (currentIdx < 0) {\n    items[0]?.focus();\n    return;\n  }\n  const next = (currentIdx + direction + items.length) % items.length;\n  items[next]?.focus();\n}\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-segmented',\n  {\n    'b-segmented--disabled': disabled,\n    'b-segmented--block': block,\n    'b-segmented--small': size === 'small',\n    'b-segmented--large': size === 'large',\n  },\n]);\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    role=\"group\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n  >\n    <!-- Animated thumb - positioned via JS -->\n    <div\n      v-if=\"thumbStyle\"\n      class=\"b-segmented__thumb\"\n      aria-hidden=\"true\"\n      :style=\"{ transform: thumbStyle.transform, width: thumbStyle.width }\"\n    />\n\n    <!-- Items -->\n    <div\n      v-for=\"opt in normalizedOptions\"\n      :key=\"String(opt.value)\"\n      class=\"b-segmented__item\"\n      :class=\"{\n        'b-segmented__item--selected': opt.value === selectedValue,\n        'b-segmented__item--disabled': opt.disabled || disabled,\n      }\"\n      role=\"radio\"\n      :aria-label=\"opt.label\"\n      :aria-checked=\"opt.value === selectedValue\"\n      :aria-disabled=\"opt.disabled || disabled ? 'true' : undefined\"\n      :tabindex=\"disabled || opt.disabled ? -1 : opt.value === selectedValue ? 0 : -1\"\n      @click=\"select(opt)\"\n      @keydown=\"onKeydown($event, opt)\"\n    >\n      <div class=\"b-segmented__item-inner\">\n        <!-- Icon -->\n        <span v-if=\"opt.icon\" class=\"b-segmented__item-icon\" aria-hidden=\"true\">{{\n          opt.icon\n        }}</span>\n\n        <!-- Label - slot or prop -->\n        <span class=\"b-segmented__item-label\">\n          <slot name=\"label\" :option=\"opt\">{{ opt.label }}</slot>\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BSegmented - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-segmented {\n  /* Surface */\n  --b-segmented-bg: oklch(95% 0.003 260);\n  --b-segmented-border-radius: 8px;\n  --b-segmented-padding: 2px;\n\n  /* Item */\n  --b-segmented-item-color: oklch(40% 0.02 260);\n  --b-segmented-item-hover-color: oklch(20% 0.02 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 50%);\n  --b-segmented-item-padding: 0 11px;\n  --b-segmented-item-border-radius: 6px;\n\n  /* Selected thumb */\n  --b-segmented-thumb-bg: oklch(100% 0 0);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 10%), 0 0 0 1px oklch(0% 0 0 / 6%);\n  --b-segmented-thumb-transition:\n    transform 200ms cubic-bezier(0.34, 0.69, 0.1, 1), width 200ms cubic-bezier(0.34, 0.69, 0.1, 1);\n\n  /* Selected text */\n  --b-segmented-selected-color: oklch(20% 0.02 260);\n  --b-segmented-selected-font-weight: 500;\n\n  /* Disabled */\n  --b-segmented-disabled-opacity: 0.4;\n  --b-segmented-disabled-cursor: not-allowed;\n\n  /* Height variants */\n  --b-segmented-height: 32px;\n\n  /* Focus ring */\n  --b-segmented-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n\n  /* Transition */\n  --b-segmented-transition-duration: 200ms;\n\n  /* ── Layout ── */\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  background: var(--b-segmented-bg);\n  border-radius: var(--b-segmented-border-radius);\n  padding: var(--b-segmented-padding);\n  box-sizing: border-box;\n  user-select: none;\n  height: var(--b-segmented-height);\n  font-size: 14px;\n  line-height: 1;\n}\n\n/* ── Block (full width) ── */\n.b-segmented--block {\n  display: flex;\n  width: 100%;\n}\n\n.b-segmented--block .b-segmented__item {\n  flex: 1;\n}\n\n/* ── Size variants ── */\n.b-segmented--small {\n  --b-segmented-height: 24px;\n  --b-segmented-item-padding: 0 7px;\n  font-size: 12px;\n}\n\n.b-segmented--large {\n  --b-segmented-height: 40px;\n  --b-segmented-item-padding: 0 15px;\n  font-size: 16px;\n}\n\n/* ── Thumb (sliding indicator) ── */\n.b-segmented__thumb {\n  position: absolute;\n  top: var(--b-segmented-padding);\n  left: 0;\n  height: calc(100% - var(--b-segmented-padding) * 2);\n  background: var(--b-segmented-thumb-bg);\n  border-radius: var(--b-segmented-item-border-radius);\n  box-shadow: var(--b-segmented-thumb-shadow);\n  transition: var(--b-segmented-thumb-transition);\n  pointer-events: none;\n  will-change: transform, width;\n}\n\n/* ── Item ── */\n.b-segmented__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--b-segmented-height) - var(--b-segmented-padding) * 2);\n  padding: var(--b-segmented-item-padding);\n  border-radius: var(--b-segmented-item-border-radius);\n  color: var(--b-segmented-item-color);\n  cursor: pointer;\n  transition:\n    color var(--b-segmented-transition-duration),\n    background var(--b-segmented-transition-duration);\n  white-space: nowrap;\n  outline: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n.b-segmented__item:hover:not(.b-segmented__item--selected):not(.b-segmented__item--disabled) {\n  color: var(--b-segmented-item-hover-color);\n  background: var(--b-segmented-item-hover-bg);\n}\n\n.b-segmented__item:focus-visible {\n  box-shadow: var(--b-segmented-focus-ring);\n}\n\n/* ── Selected item ── */\n.b-segmented__item--selected {\n  color: var(--b-segmented-selected-color);\n  font-weight: var(--b-segmented-selected-font-weight);\n}\n\n/* ── Disabled ── */\n.b-segmented--disabled,\n.b-segmented__item--disabled {\n  opacity: var(--b-segmented-disabled-opacity);\n  cursor: var(--b-segmented-disabled-cursor);\n  pointer-events: none;\n}\n\n/* Re-enable pointer events on items when only the item is disabled (not whole control) */\n.b-segmented:not(.b-segmented--disabled) .b-segmented__item--disabled {\n  pointer-events: auto;\n  cursor: var(--b-segmented-disabled-cursor);\n}\n\n/* ── Inner wrapper (icon + label) ── */\n.b-segmented__item-inner {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  line-height: 1;\n}\n\n.b-segmented__item-icon {\n  display: flex;\n  align-items: center;\n  font-size: 1em;\n  flex-shrink: 0;\n}\n\n.b-segmented__item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-segmented {\n  --b-segmented-bg: oklch(22% 0.02 260);\n  --b-segmented-item-color: oklch(72% 0.01 260);\n  --b-segmented-item-hover-color: oklch(92% 0.005 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n  --b-segmented-thumb-bg: oklch(30% 0.02 260);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n  --b-segmented-selected-color: oklch(95% 0.005 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-segmented {\n    --b-segmented-bg: oklch(22% 0.02 260);\n    --b-segmented-item-color: oklch(72% 0.01 260);\n    --b-segmented-item-hover-color: oklch(92% 0.005 260);\n    --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n    --b-segmented-thumb-bg: oklch(30% 0.02 260);\n    --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n    --b-segmented-selected-color: oklch(95% 0.005 260);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-segmented {\n    --b-segmented-thumb-transition: none;\n    --b-segmented-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCA,IAAM,IAAO,GAkBP,IAAoB,QACxB,EAAA,QAAQ,KAAK,MACP,OAAO,KAAQ,YAAY,OAAO,KAAQ,WACrC;GAAE,OAAO,OAAO,EAAI;GAAE,OAAO;GAAK,UAAU;GAAO,GAErD;GACL,OAAO,OAAO,EAAI,SAAS,EAAI,MAAM;GACrC,OAAO,EAAI;GACX,UAAU,EAAI,YAAY;GAC1B,MAAM,EAAI;GACX,CACD,CACH,EAKK,IAAe,QAAe,EAAA,eAAe,KAAA,EAAU,EAEvD,IAAgB,EACpB,EAAA,cAAc,EAAA,gBAAgB,EAAkB,MAAM,IAAI,MAC3D;AAWD,EARA,QACQ,EAAA,aACL,MAAQ;AACP,GAAI,MAAQ,KAAA,MAAW,EAAc,QAAQ;IAEhD,EAGD,EAAM,IAAoB,MAAS;AACjC,GAAI,EAAc,UAAU,KAAA,KAAa,EAAK,SAAS,MACrD,EAAc,QAAQ,EAAK,GAAG;IAEhC;EAEF,IAAM,IAAgB,QAAgB,EAAa,QAAQ,EAAA,aAAa,EAAc,MAAO,EAKvF,IAAU,EAAwB,KAAK,EACvC,IAAa,EAAiD,KAAK;EAEzE,SAAS,EAAY,GAAe;AAClC,OAAI,CAAC,EAAQ,MAAO;GAEpB,IAAM,IADQ,EAAQ,MAAM,iBAA8B,qBAAqB,CAC1D;AACrB,OAAI,CAAC,EAAQ;GAEb,IAAM,IAAgB,EAAQ,MAAM,uBAAuB,CAAC,MACtD,EAAE,SAAM,aAAU,EAAO,uBAAuB;AACtD,KAAW,QAAQ;IACjB,WAAW,cAAc,IAAO,EAAc;IAC9C,OAAO,GAAG,EAAM;IACjB;;EAGH,IAAM,IAAgB,QACpB,EAAkB,MAAM,WAAW,MAAM,EAAE,UAAU,EAAc,MAAM,CAC1E;AAYD,EAVA,EACE,GACA,OAAO,MAAQ;AACT,OAAM,MACV,MAAM,GAAU,EAChB,EAAY,EAAI;KAElB,EAAE,WAAW,IAAO,CACrB,EAED,QAAgB;AACd,GAAI,EAAc,SAAS,KAAG,EAAY,EAAc,MAAM;IAC9D;EAKF,SAAS,EAAO,GAAuB;AACjC,KAAA,YAAY,EAAI,YAChB,EAAI,UAAU,EAAc,UAE3B,EAAa,UAChB,EAAc,QAAQ,EAAI,QAE5B,EAAK,qBAAqB,EAAI,MAAM,EACpC,EAAK,UAAU,EAAI,MAAM;;EAM3B,SAAS,EAAU,GAAsB,GAAuB;AAS9D,IARI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,EAAO,EAAI,IAET,EAAM,QAAQ,gBAAgB,EAAM,QAAQ,iBAC9C,EAAM,gBAAgB,EACtB,EAAU,EAAE,IAEV,EAAM,QAAQ,eAAe,EAAM,QAAQ,eAC7C,EAAM,gBAAgB,EACtB,EAAU,GAAG;;EAIjB,SAAS,EAAU,GAAmB;AACpC,OAAI,CAAC,EAAQ,MAAO;GACpB,IAAM,IAAQ,MAAM,KAClB,EAAQ,MAAM,iBAA8B,mDAAiD,CAC9F,EACK,IAAW,SAAS,eACpB,IAAa,EAAM,QAAQ,EAAS;AAC1C,OAAI,IAAa,GAAG;AAClB,MAAM,IAAI,OAAO;AACjB;;AAGF,MADc,IAAa,IAAY,EAAM,UAAU,EAAM,SAChD,OAAO;;EAMtB,IAAM,IAAc,QAAe,CACjC,eACA;GACE,yBAAyB,EAAA;GACzB,sBAAsB,EAAA;GACtB,sBAAsB,EAAA,SAAS;GAC/B,sBAAsB,EAAA,SAAS;GAChC,CACF,CAAC;yBAIA,EA2CM,OAAA;YA1CA;GAAJ,KAAI;GACH,OAAK,EAAE,EAAA,MAAW;GACnB,MAAK;GACJ,iBAAe,EAAA,WAAQ,SAAY,KAAA;MAI5B,EAAA,SAAA,GAAA,EADR,EAKE,OAAA;;GAHA,OAAM;GACN,eAAY;GACX,OAAK,EAAA;IAAA,WAAe,EAAA,MAAW;IAAS,OAAS,EAAA,MAAW;IAAK,CAAA;oCAIpE,EA2BM,GAAA,MAAA,EA1BU,EAAA,QAAP,YADT,EA2BM,OAAA;GAzBH,KAAK,OAAO,EAAI,MAAK;GACtB,OAAK,EAAA,CAAC,qBAAmB;mCACwB,EAAI,UAAU,EAAA;mCAAsD,EAAI,YAAY,EAAA;;GAIrI,MAAK;GACJ,cAAY,EAAI;GAChB,gBAAc,EAAI,UAAU,EAAA;GAC5B,iBAAe,EAAI,YAAY,EAAA,WAAQ,SAAY,KAAA;GACnD,UAAU,EAAA,YAAY,EAAI,WAAQ,KAAQ,EAAI,UAAU,EAAA,QAAa,IAAA;GACrE,UAAK,MAAE,EAAO,EAAG;GACjB,YAAO,MAAE,EAAU,GAAQ,EAAG;MAE/B,EAUM,OAVN,GAUM,CARQ,EAAI,QAAA,GAAA,EAAhB,EAES,QAFT,GAES,EADP,EAAI,KAAI,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAIV,EAEO,QAFP,GAEO,CADL,EAAuD,EAAA,QAAA,SAAA,EAAnC,QAAQ,GAAG,QAAwB,CAAA,EAAA,EAAnB,EAAI,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA"}

package/dist/design-system193.js

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

package/dist/{design-system176.js.map → design-system193.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system176.js","names":[],"sources":["../src/components/BSegmented/BSegmented.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\n\nimport type { BSegmentedOption, BSegmentedRawOption } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  modelValue,\n  defaultValue,\n  options = [],\n  disabled = false,\n  size = 'default',\n  block = false,\n} = defineProps<{\n  /**\n   * Currently selected value (controlled / two-way binding via v-model).\n   * When provided, the component is in controlled mode.\n   */\n  modelValue?: string | number;\n  /**\n   * Initial selected value for uncontrolled mode.\n   * Ignored when `modelValue` is set.\n   * @default first option value\n   */\n  defaultValue?: string | number;\n  /** Segmented options. Accepts strings, numbers, or option objects. */\n  options?: BSegmentedRawOption[];\n  /** Whether the whole control is disabled. @default false */\n  disabled?: boolean;\n  /** Size of the component. @default 'default' */\n  size?: 'small' | 'default' | 'large';\n  /** Whether the segmented fills the full width of its container. @default false */\n  block?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the selected value changes. */\n  (e: 'update:modelValue', value: string | number): void;\n  /** Fires when the selected value changes (mirrors `update:modelValue`). */\n  (e: 'change', value: string | number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Custom label renderer for each option. Receives the resolved option object. */\n  label?: (props: { option: BSegmentedOption }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Normalise options\n// ─────────────────────────────────────────────\nconst normalizedOptions = computed<BSegmentedOption[]>(() =>\n  options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt, disabled: false };\n    }\n    return {\n      label: String(opt.label ?? opt.value),\n      value: opt.value,\n      disabled: opt.disabled ?? false,\n      icon: opt.icon,\n    };\n  }),\n);\n\n// ─────────────────────────────────────────────\n// Internal selection state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => modelValue !== undefined);\n\nconst internalValue = ref<string | number | undefined>(\n  modelValue ?? defaultValue ?? normalizedOptions.value[0]?.value,\n);\n\n// Sync controlled value → internal\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val !== undefined) internalValue.value = val;\n  },\n);\n\n// Sync first option as default when options change and nothing is selected\nwatch(normalizedOptions, (opts) => {\n  if (internalValue.value === undefined && opts.length > 0) {\n    internalValue.value = opts[0].value;\n  }\n});\n\nconst selectedValue = computed(() => (isControlled.value ? modelValue : internalValue.value));\n\n// ─────────────────────────────────────────────\n// Thumb (animated indicator) positioning\n// ─────────────────────────────────────────────\nconst rootRef = ref<HTMLElement | null>(null);\nconst thumbStyle = ref<{ transform: string; width: string } | null>(null);\n\nfunction updateThumb(index: number) {\n  if (!rootRef.value) return;\n  const items = rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item');\n  const target = items[index];\n  if (!target) return;\n\n  const containerLeft = rootRef.value.getBoundingClientRect().left;\n  const { left, width } = target.getBoundingClientRect();\n  thumbStyle.value = {\n    transform: `translateX(${left - containerLeft}px)`,\n    width: `${width}px`,\n  };\n}\n\nconst selectedIndex = computed(() =>\n  normalizedOptions.value.findIndex((o) => o.value === selectedValue.value),\n);\n\nwatch(\n  selectedIndex,\n  async (idx) => {\n    if (idx < 0) return;\n    await nextTick();\n    updateThumb(idx);\n  },\n  { immediate: false },\n);\n\nonMounted(() => {\n  if (selectedIndex.value >= 0) updateThumb(selectedIndex.value);\n});\n\n// ─────────────────────────────────────────────\n// Selection logic\n// ─────────────────────────────────────────────\nfunction select(opt: BSegmentedOption) {\n  if (disabled || opt.disabled) return;\n  if (opt.value === selectedValue.value) return;\n\n  if (!isControlled.value) {\n    internalValue.value = opt.value;\n  }\n  emit('update:modelValue', opt.value);\n  emit('change', opt.value);\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent, opt: BSegmentedOption) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    select(opt);\n  }\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusNext(1);\n  }\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    focusNext(-1);\n  }\n}\n\nfunction focusNext(direction: 1 | -1) {\n  if (!rootRef.value) return;\n  const items = Array.from(\n    rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item:not([aria-disabled=\"true\"])'),\n  );\n  const activeEl = document.activeElement as HTMLElement;\n  const currentIdx = items.indexOf(activeEl);\n  if (currentIdx < 0) {\n    items[0]?.focus();\n    return;\n  }\n  const next = (currentIdx + direction + items.length) % items.length;\n  items[next]?.focus();\n}\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-segmented',\n  {\n    'b-segmented--disabled': disabled,\n    'b-segmented--block': block,\n    'b-segmented--small': size === 'small',\n    'b-segmented--large': size === 'large',\n  },\n]);\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    role=\"group\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n  >\n    <!-- Animated thumb - positioned via JS -->\n    <div\n      v-if=\"thumbStyle\"\n      class=\"b-segmented__thumb\"\n      aria-hidden=\"true\"\n      :style=\"{ transform: thumbStyle.transform, width: thumbStyle.width }\"\n    />\n\n    <!-- Items -->\n    <div\n      v-for=\"opt in normalizedOptions\"\n      :key=\"String(opt.value)\"\n      class=\"b-segmented__item\"\n      :class=\"{\n        'b-segmented__item--selected': opt.value === selectedValue,\n        'b-segmented__item--disabled': opt.disabled || disabled,\n      }\"\n      role=\"radio\"\n      :aria-label=\"opt.label\"\n      :aria-checked=\"opt.value === selectedValue\"\n      :aria-disabled=\"opt.disabled || disabled ? 'true' : undefined\"\n      :tabindex=\"disabled || opt.disabled ? -1 : opt.value === selectedValue ? 0 : -1\"\n      @click=\"select(opt)\"\n      @keydown=\"onKeydown($event, opt)\"\n    >\n      <div class=\"b-segmented__item-inner\">\n        <!-- Icon -->\n        <span v-if=\"opt.icon\" class=\"b-segmented__item-icon\" aria-hidden=\"true\">{{\n          opt.icon\n        }}</span>\n\n        <!-- Label - slot or prop -->\n        <span class=\"b-segmented__item-label\">\n          <slot name=\"label\" :option=\"opt\">{{ opt.label }}</slot>\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BSegmented - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-segmented {\n  /* Surface */\n  --b-segmented-bg: oklch(95% 0.003 260);\n  --b-segmented-border-radius: 8px;\n  --b-segmented-padding: 2px;\n\n  /* Item */\n  --b-segmented-item-color: oklch(40% 0.02 260);\n  --b-segmented-item-hover-color: oklch(20% 0.02 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 50%);\n  --b-segmented-item-padding: 0 11px;\n  --b-segmented-item-border-radius: 6px;\n\n  /* Selected thumb */\n  --b-segmented-thumb-bg: oklch(100% 0 0);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 10%), 0 0 0 1px oklch(0% 0 0 / 6%);\n  --b-segmented-thumb-transition:\n    transform 200ms cubic-bezier(0.34, 0.69, 0.1, 1), width 200ms cubic-bezier(0.34, 0.69, 0.1, 1);\n\n  /* Selected text */\n  --b-segmented-selected-color: oklch(20% 0.02 260);\n  --b-segmented-selected-font-weight: 500;\n\n  /* Disabled */\n  --b-segmented-disabled-opacity: 0.4;\n  --b-segmented-disabled-cursor: not-allowed;\n\n  /* Height variants */\n  --b-segmented-height: 32px;\n\n  /* Focus ring */\n  --b-segmented-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n\n  /* Transition */\n  --b-segmented-transition-duration: 200ms;\n\n  /* ── Layout ── */\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  background: var(--b-segmented-bg);\n  border-radius: var(--b-segmented-border-radius);\n  padding: var(--b-segmented-padding);\n  box-sizing: border-box;\n  user-select: none;\n  height: var(--b-segmented-height);\n  font-size: 14px;\n  line-height: 1;\n}\n\n/* ── Block (full width) ── */\n.b-segmented--block {\n  display: flex;\n  width: 100%;\n}\n\n.b-segmented--block .b-segmented__item {\n  flex: 1;\n}\n\n/* ── Size variants ── */\n.b-segmented--small {\n  --b-segmented-height: 24px;\n  --b-segmented-item-padding: 0 7px;\n  font-size: 12px;\n}\n\n.b-segmented--large {\n  --b-segmented-height: 40px;\n  --b-segmented-item-padding: 0 15px;\n  font-size: 16px;\n}\n\n/* ── Thumb (sliding indicator) ── */\n.b-segmented__thumb {\n  position: absolute;\n  top: var(--b-segmented-padding);\n  left: 0;\n  height: calc(100% - var(--b-segmented-padding) * 2);\n  background: var(--b-segmented-thumb-bg);\n  border-radius: var(--b-segmented-item-border-radius);\n  box-shadow: var(--b-segmented-thumb-shadow);\n  transition: var(--b-segmented-thumb-transition);\n  pointer-events: none;\n  will-change: transform, width;\n}\n\n/* ── Item ── */\n.b-segmented__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--b-segmented-height) - var(--b-segmented-padding) * 2);\n  padding: var(--b-segmented-item-padding);\n  border-radius: var(--b-segmented-item-border-radius);\n  color: var(--b-segmented-item-color);\n  cursor: pointer;\n  transition:\n    color var(--b-segmented-transition-duration),\n    background var(--b-segmented-transition-duration);\n  white-space: nowrap;\n  outline: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n.b-segmented__item:hover:not(.b-segmented__item--selected):not(.b-segmented__item--disabled) {\n  color: var(--b-segmented-item-hover-color);\n  background: var(--b-segmented-item-hover-bg);\n}\n\n.b-segmented__item:focus-visible {\n  box-shadow: var(--b-segmented-focus-ring);\n}\n\n/* ── Selected item ── */\n.b-segmented__item--selected {\n  color: var(--b-segmented-selected-color);\n  font-weight: var(--b-segmented-selected-font-weight);\n}\n\n/* ── Disabled ── */\n.b-segmented--disabled,\n.b-segmented__item--disabled {\n  opacity: var(--b-segmented-disabled-opacity);\n  cursor: var(--b-segmented-disabled-cursor);\n  pointer-events: none;\n}\n\n/* Re-enable pointer events on items when only the item is disabled (not whole control) */\n.b-segmented:not(.b-segmented--disabled) .b-segmented__item--disabled {\n  pointer-events: auto;\n  cursor: var(--b-segmented-disabled-cursor);\n}\n\n/* ── Inner wrapper (icon + label) ── */\n.b-segmented__item-inner {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  line-height: 1;\n}\n\n.b-segmented__item-icon {\n  display: flex;\n  align-items: center;\n  font-size: 1em;\n  flex-shrink: 0;\n}\n\n.b-segmented__item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-segmented {\n  --b-segmented-bg: oklch(22% 0.02 260);\n  --b-segmented-item-color: oklch(72% 0.01 260);\n  --b-segmented-item-hover-color: oklch(92% 0.005 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n  --b-segmented-thumb-bg: oklch(30% 0.02 260);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n  --b-segmented-selected-color: oklch(95% 0.005 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-segmented {\n    --b-segmented-bg: oklch(22% 0.02 260);\n    --b-segmented-item-color: oklch(72% 0.01 260);\n    --b-segmented-item-hover-color: oklch(92% 0.005 260);\n    --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n    --b-segmented-thumb-bg: oklch(30% 0.02 260);\n    --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n    --b-segmented-selected-color: oklch(95% 0.005 260);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-segmented {\n    --b-segmented-thumb-transition: none;\n    --b-segmented-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"design-system193.js","names":[],"sources":["../src/components/BSegmented/BSegmented.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\n\nimport type { BSegmentedOption, BSegmentedRawOption } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  modelValue,\n  defaultValue,\n  options = [],\n  disabled = false,\n  size = 'default',\n  block = false,\n} = defineProps<{\n  /**\n   * Currently selected value (controlled / two-way binding via v-model).\n   * When provided, the component is in controlled mode.\n   */\n  modelValue?: string | number;\n  /**\n   * Initial selected value for uncontrolled mode.\n   * Ignored when `modelValue` is set.\n   * @default first option value\n   */\n  defaultValue?: string | number;\n  /** Segmented options. Accepts strings, numbers, or option objects. */\n  options?: BSegmentedRawOption[];\n  /** Whether the whole control is disabled. @default false */\n  disabled?: boolean;\n  /** Size of the component. @default 'default' */\n  size?: 'small' | 'default' | 'large';\n  /** Whether the segmented fills the full width of its container. @default false */\n  block?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the selected value changes. */\n  (e: 'update:modelValue', value: string | number): void;\n  /** Fires when the selected value changes (mirrors `update:modelValue`). */\n  (e: 'change', value: string | number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Custom label renderer for each option. Receives the resolved option object. */\n  label?: (props: { option: BSegmentedOption }) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Normalise options\n// ─────────────────────────────────────────────\nconst normalizedOptions = computed<BSegmentedOption[]>(() =>\n  options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt, disabled: false };\n    }\n    return {\n      label: String(opt.label ?? opt.value),\n      value: opt.value,\n      disabled: opt.disabled ?? false,\n      icon: opt.icon,\n    };\n  }),\n);\n\n// ─────────────────────────────────────────────\n// Internal selection state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => modelValue !== undefined);\n\nconst internalValue = ref<string | number | undefined>(\n  modelValue ?? defaultValue ?? normalizedOptions.value[0]?.value,\n);\n\n// Sync controlled value → internal\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val !== undefined) internalValue.value = val;\n  },\n);\n\n// Sync first option as default when options change and nothing is selected\nwatch(normalizedOptions, (opts) => {\n  if (internalValue.value === undefined && opts.length > 0) {\n    internalValue.value = opts[0].value;\n  }\n});\n\nconst selectedValue = computed(() => (isControlled.value ? modelValue : internalValue.value));\n\n// ─────────────────────────────────────────────\n// Thumb (animated indicator) positioning\n// ─────────────────────────────────────────────\nconst rootRef = ref<HTMLElement | null>(null);\nconst thumbStyle = ref<{ transform: string; width: string } | null>(null);\n\nfunction updateThumb(index: number) {\n  if (!rootRef.value) return;\n  const items = rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item');\n  const target = items[index];\n  if (!target) return;\n\n  const containerLeft = rootRef.value.getBoundingClientRect().left;\n  const { left, width } = target.getBoundingClientRect();\n  thumbStyle.value = {\n    transform: `translateX(${left - containerLeft}px)`,\n    width: `${width}px`,\n  };\n}\n\nconst selectedIndex = computed(() =>\n  normalizedOptions.value.findIndex((o) => o.value === selectedValue.value),\n);\n\nwatch(\n  selectedIndex,\n  async (idx) => {\n    if (idx < 0) return;\n    await nextTick();\n    updateThumb(idx);\n  },\n  { immediate: false },\n);\n\nonMounted(() => {\n  if (selectedIndex.value >= 0) updateThumb(selectedIndex.value);\n});\n\n// ─────────────────────────────────────────────\n// Selection logic\n// ─────────────────────────────────────────────\nfunction select(opt: BSegmentedOption) {\n  if (disabled || opt.disabled) return;\n  if (opt.value === selectedValue.value) return;\n\n  if (!isControlled.value) {\n    internalValue.value = opt.value;\n  }\n  emit('update:modelValue', opt.value);\n  emit('change', opt.value);\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent, opt: BSegmentedOption) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    select(opt);\n  }\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusNext(1);\n  }\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    focusNext(-1);\n  }\n}\n\nfunction focusNext(direction: 1 | -1) {\n  if (!rootRef.value) return;\n  const items = Array.from(\n    rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item:not([aria-disabled=\"true\"])'),\n  );\n  const activeEl = document.activeElement as HTMLElement;\n  const currentIdx = items.indexOf(activeEl);\n  if (currentIdx < 0) {\n    items[0]?.focus();\n    return;\n  }\n  const next = (currentIdx + direction + items.length) % items.length;\n  items[next]?.focus();\n}\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-segmented',\n  {\n    'b-segmented--disabled': disabled,\n    'b-segmented--block': block,\n    'b-segmented--small': size === 'small',\n    'b-segmented--large': size === 'large',\n  },\n]);\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    :class=\"rootClasses\"\n    role=\"group\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n  >\n    <!-- Animated thumb - positioned via JS -->\n    <div\n      v-if=\"thumbStyle\"\n      class=\"b-segmented__thumb\"\n      aria-hidden=\"true\"\n      :style=\"{ transform: thumbStyle.transform, width: thumbStyle.width }\"\n    />\n\n    <!-- Items -->\n    <div\n      v-for=\"opt in normalizedOptions\"\n      :key=\"String(opt.value)\"\n      class=\"b-segmented__item\"\n      :class=\"{\n        'b-segmented__item--selected': opt.value === selectedValue,\n        'b-segmented__item--disabled': opt.disabled || disabled,\n      }\"\n      role=\"radio\"\n      :aria-label=\"opt.label\"\n      :aria-checked=\"opt.value === selectedValue\"\n      :aria-disabled=\"opt.disabled || disabled ? 'true' : undefined\"\n      :tabindex=\"disabled || opt.disabled ? -1 : opt.value === selectedValue ? 0 : -1\"\n      @click=\"select(opt)\"\n      @keydown=\"onKeydown($event, opt)\"\n    >\n      <div class=\"b-segmented__item-inner\">\n        <!-- Icon -->\n        <span v-if=\"opt.icon\" class=\"b-segmented__item-icon\" aria-hidden=\"true\">{{\n          opt.icon\n        }}</span>\n\n        <!-- Label - slot or prop -->\n        <span class=\"b-segmented__item-label\">\n          <slot name=\"label\" :option=\"opt\">{{ opt.label }}</slot>\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BSegmented - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-segmented {\n  /* Surface */\n  --b-segmented-bg: oklch(95% 0.003 260);\n  --b-segmented-border-radius: 8px;\n  --b-segmented-padding: 2px;\n\n  /* Item */\n  --b-segmented-item-color: oklch(40% 0.02 260);\n  --b-segmented-item-hover-color: oklch(20% 0.02 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 50%);\n  --b-segmented-item-padding: 0 11px;\n  --b-segmented-item-border-radius: 6px;\n\n  /* Selected thumb */\n  --b-segmented-thumb-bg: oklch(100% 0 0);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 10%), 0 0 0 1px oklch(0% 0 0 / 6%);\n  --b-segmented-thumb-transition:\n    transform 200ms cubic-bezier(0.34, 0.69, 0.1, 1), width 200ms cubic-bezier(0.34, 0.69, 0.1, 1);\n\n  /* Selected text */\n  --b-segmented-selected-color: oklch(20% 0.02 260);\n  --b-segmented-selected-font-weight: 500;\n\n  /* Disabled */\n  --b-segmented-disabled-opacity: 0.4;\n  --b-segmented-disabled-cursor: not-allowed;\n\n  /* Height variants */\n  --b-segmented-height: 32px;\n\n  /* Focus ring */\n  --b-segmented-focus-ring: 0 0 0 2px oklch(54.6% 0.245 262.881 / 20%);\n\n  /* Transition */\n  --b-segmented-transition-duration: 200ms;\n\n  /* ── Layout ── */\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  background: var(--b-segmented-bg);\n  border-radius: var(--b-segmented-border-radius);\n  padding: var(--b-segmented-padding);\n  box-sizing: border-box;\n  user-select: none;\n  height: var(--b-segmented-height);\n  font-size: 14px;\n  line-height: 1;\n}\n\n/* ── Block (full width) ── */\n.b-segmented--block {\n  display: flex;\n  width: 100%;\n}\n\n.b-segmented--block .b-segmented__item {\n  flex: 1;\n}\n\n/* ── Size variants ── */\n.b-segmented--small {\n  --b-segmented-height: 24px;\n  --b-segmented-item-padding: 0 7px;\n  font-size: 12px;\n}\n\n.b-segmented--large {\n  --b-segmented-height: 40px;\n  --b-segmented-item-padding: 0 15px;\n  font-size: 16px;\n}\n\n/* ── Thumb (sliding indicator) ── */\n.b-segmented__thumb {\n  position: absolute;\n  top: var(--b-segmented-padding);\n  left: 0;\n  height: calc(100% - var(--b-segmented-padding) * 2);\n  background: var(--b-segmented-thumb-bg);\n  border-radius: var(--b-segmented-item-border-radius);\n  box-shadow: var(--b-segmented-thumb-shadow);\n  transition: var(--b-segmented-thumb-transition);\n  pointer-events: none;\n  will-change: transform, width;\n}\n\n/* ── Item ── */\n.b-segmented__item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--b-segmented-height) - var(--b-segmented-padding) * 2);\n  padding: var(--b-segmented-item-padding);\n  border-radius: var(--b-segmented-item-border-radius);\n  color: var(--b-segmented-item-color);\n  cursor: pointer;\n  transition:\n    color var(--b-segmented-transition-duration),\n    background var(--b-segmented-transition-duration);\n  white-space: nowrap;\n  outline: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n.b-segmented__item:hover:not(.b-segmented__item--selected):not(.b-segmented__item--disabled) {\n  color: var(--b-segmented-item-hover-color);\n  background: var(--b-segmented-item-hover-bg);\n}\n\n.b-segmented__item:focus-visible {\n  box-shadow: var(--b-segmented-focus-ring);\n}\n\n/* ── Selected item ── */\n.b-segmented__item--selected {\n  color: var(--b-segmented-selected-color);\n  font-weight: var(--b-segmented-selected-font-weight);\n}\n\n/* ── Disabled ── */\n.b-segmented--disabled,\n.b-segmented__item--disabled {\n  opacity: var(--b-segmented-disabled-opacity);\n  cursor: var(--b-segmented-disabled-cursor);\n  pointer-events: none;\n}\n\n/* Re-enable pointer events on items when only the item is disabled (not whole control) */\n.b-segmented:not(.b-segmented--disabled) .b-segmented__item--disabled {\n  pointer-events: auto;\n  cursor: var(--b-segmented-disabled-cursor);\n}\n\n/* ── Inner wrapper (icon + label) ── */\n.b-segmented__item-inner {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  line-height: 1;\n}\n\n.b-segmented__item-icon {\n  display: flex;\n  align-items: center;\n  font-size: 1em;\n  flex-shrink: 0;\n}\n\n.b-segmented__item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-segmented {\n  --b-segmented-bg: oklch(22% 0.02 260);\n  --b-segmented-item-color: oklch(72% 0.01 260);\n  --b-segmented-item-hover-color: oklch(92% 0.005 260);\n  --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n  --b-segmented-thumb-bg: oklch(30% 0.02 260);\n  --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n  --b-segmented-selected-color: oklch(95% 0.005 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-segmented {\n    --b-segmented-bg: oklch(22% 0.02 260);\n    --b-segmented-item-color: oklch(72% 0.01 260);\n    --b-segmented-item-hover-color: oklch(92% 0.005 260);\n    --b-segmented-item-hover-bg: oklch(100% 0 0 / 8%);\n    --b-segmented-thumb-bg: oklch(30% 0.02 260);\n    --b-segmented-thumb-shadow: 0 1px 2px oklch(0% 0 0 / 30%), 0 0 0 1px oklch(0% 0 0 / 20%);\n    --b-segmented-selected-color: oklch(95% 0.005 260);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-segmented {\n    --b-segmented-thumb-transition: none;\n    --b-segmented-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system194.js

@@ -1,8 +1,14 @@
-import e from "./design-system192.js";
-/* empty css                 */
-//#region src/components/BSkeleton/BSkeletonImage.vue
-var t = e;
+//#region src/components/BSelect/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Multiple = "multiple", e.Tags = "tags", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.Outlined = "outlined", e.Filled = "filled", e.Borderless = "borderless", e;
+}({}), n = /* @__PURE__ */ function(e) {
+	return e.Error = "error", e.Warning = "warning", e;
+}({}), r = /* @__PURE__ */ function(e) {
+	return e.BottomLeft = "bottomLeft", e.BottomRight = "bottomRight", e.TopLeft = "topLeft", e.TopRight = "topRight", e;
+}({});
 //#endregion
-export { t as default };
+export { e as BSelectMode, r as BSelectPlacement, n as BSelectStatus, t as BSelectVariant };
 
 //# sourceMappingURL=design-system194.js.map

package/dist/design-system194.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system194.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-image',\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <svg\n      class=\"b-skeleton-image__svg\"\n      viewBox=\"0 0 1098 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style>\n.b-skeleton-image {\n  display: inline-flex;\n  vertical-align: top;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-skeleton-image-size, 96px);\n  height: var(--b-skeleton-image-size, 96px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-image__svg {\n  width: 48px;\n  height: 48px;\n  fill: oklch(75% 0 0);\n}\n\n[data-prefers-color='dark'] .b-skeleton-image__svg {\n  fill: oklch(50% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton-image__svg {\n    fill: oklch(50% 0 0);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system194.js","names":[],"sources":["../src/components/BSelect/types.ts"],"sourcesContent":["export interface BSelectOption {\n  /** Display label for the option. Falls back to `value` if omitted. */\n  label?: string;\n  /** The value submitted when this option is selected. */\n  value: string | number;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n  /** Grouping: nested options under this group label. */\n  options?: BSelectOption[];\n}\n\nexport enum BSelectMode {\n  Multiple = 'multiple',\n  Tags = 'tags',\n}\n\nexport enum BSelectVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n}\n\nexport enum BSelectStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport enum BSelectPlacement {\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n}\n\nexport interface BSelectFieldNames {\n  label?: string;\n  value?: string;\n  options?: string;\n  groupLabel?: string;\n}\n"],"mappings":";AAWA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,OAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,cACA,EAAA,cAAA,eACA,EAAA,UAAA,WACA,EAAA,WAAA;KACD"}