@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system228.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system228.js","names":[],"sources":["../src/components/BTag/BTag.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue';\n\nimport type { BTagColor, BTagPresetColor, BTagSize, BTagVariant } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  color,\n  variant = 'filled',\n  size = 'default',\n  closable = false,\n  closeIcon,\n  visible = undefined,\n  bordered = true,\n  icon,\n} = defineProps<{\n  /**\n   * Preset semantic color name or any CSS color value.\n   * Preset names map to a full color scale (bg, border, text).\n   * Any other string is treated as a raw CSS color and applied to the border.\n   * @example 'success' | 'processing' | 'error' | '#ff0000' | 'rgb(0,0,255)'\n   */\n  color?: BTagColor;\n  /**\n   * Visual style variant.\n   * @default 'filled'\n   */\n  variant?: BTagVariant;\n  /**\n   * Size of the tag.\n   * @default 'default'\n   */\n  size?: BTagSize;\n  /**\n   * Whether the tag can be closed/removed.\n   * @default false\n   */\n  closable?: boolean;\n  /**\n   * Custom icon shown as the close trigger (string emoji / unicode or slot).\n   * If omitted the default × SVG is used.\n   */\n  closeIcon?: string;\n  /**\n   * Controlled visibility - operate the tag in controlled mode via v-model.\n   * When undefined the component manages its own visibility.\n   */\n  visible?: boolean;\n  /**\n   * Whether the tag has a border.\n   * @default true\n   */\n  bordered?: boolean;\n  /**\n   * Leading icon string (emoji / unicode). For accessible icon rendering\n   * prefer the `#icon` slot which lets callers set `role=\"img\"` + `aria-label`.\n   */\n  icon?: string;\n}>();\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires synchronously when the close button is clicked/activated. */\n  (e: 'close', event: MouseEvent | KeyboardEvent): void;\n  /** Fires after the fade-out transition fully completes. */\n  (e: 'afterClose'): void;\n  /** v-model support - emitted with `false` when the tag is closed. */\n  (e: 'update:visible', value: boolean): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Default tag content. */\n  default?(): unknown;\n  /** Leading icon area - receives no scoped props. */\n  icon?(): unknown;\n  /** Overrides the built-in close icon. */\n  closeIcon?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Preset colors\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: BTagPresetColor[] = [\n  'default',\n  'success',\n  'processing',\n  'error',\n  'warning',\n  'magenta',\n  'red',\n  'volcano',\n  'orange',\n  'gold',\n  'lime',\n  'green',\n  'cyan',\n  'blue',\n  'geekblue',\n  'purple',\n];\n\nconst isPreset = computed(() => color === undefined || (PRESET_COLORS as string[]).includes(color));\n\nconst effectiveColor = computed<BTagPresetColor>(() =>\n  isPreset.value ? ((color ?? 'default') as BTagPresetColor) : 'default',\n);\n\n// ─────────────────────────────────────────────\n// Visibility state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => visible !== undefined);\nconst internalVisible = ref(true);\n\n// Sync external → internal when switching to controlled\nwatch(\n  () => visible,\n  (val) => {\n    if (val !== undefined) internalVisible.value = val;\n  },\n);\n\nconst isVisible = computed(() => (isControlled.value ? visible! : internalVisible.value));\n\n// ─────────────────────────────────────────────\n// Close logic\n// ─────────────────────────────────────────────\nfunction handleClose(event: MouseEvent | KeyboardEvent) {\n  emit('close', event);\n  if (isControlled.value) {\n    emit('update:visible', false);\n  } else {\n    internalVisible.value = false;\n  }\n}\n\nfunction onCloseClick(event: MouseEvent) {\n  handleClose(event);\n}\n\nfunction onCloseKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ' || event.key === 'Escape') {\n    event.preventDefault();\n    handleClose(event);\n  }\n}\n\nfunction onAfterLeave() {\n  emit('afterClose');\n}\n\n// ─────────────────────────────────────────────\n// Root class\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-tag',\n  `b-tag--${effectiveColor.value}`,\n  `b-tag--${variant}`,\n  {\n    'b-tag--borderless': !bordered,\n    'b-tag--closable': closable,\n    'b-tag--small': size === 'small',\n    'b-tag--large': size === 'large',\n    'b-tag--custom-color': !isPreset.value,\n  },\n]);\n\n// ─────────────────────────────────────────────\n// Custom color inline style\n// ─────────────────────────────────────────────\nconst customColorStyle = computed(() => {\n  if (isPreset.value) return undefined;\n  // For custom colors: use the color as border + text; tint bg at 10% opacity\n  return {\n    '--b-tag-custom-color': color,\n  } as Record<string, string>;\n});\n</script>\n\n<template>\n  <Transition name=\"b-tag-fade\" @after-leave=\"onAfterLeave\">\n    <span v-if=\"isVisible\" :class=\"rootClasses\" :style=\"customColorStyle\">\n      <!-- Leading icon -->\n      <span\n        v-if=\"$slots.icon || icon\"\n        class=\"b-tag__icon\"\n        :aria-hidden=\"$slots.icon ? undefined : 'true'\"\n      >\n        <slot name=\"icon\">{{ icon }}</slot>\n      </span>\n\n      <!-- Content -->\n      <span class=\"b-tag__content\">\n        <slot />\n      </span>\n\n      <!-- Close button -->\n      <button\n        v-if=\"closable\"\n        type=\"button\"\n        class=\"b-tag__close\"\n        aria-label=\"Remove tag\"\n        tabindex=\"0\"\n        @click.stop=\"onCloseClick\"\n        @keydown=\"onCloseKeydown\"\n      >\n        <slot name=\"closeIcon\">\n          <span\n            v-if=\"closeIcon\"\n            class=\"b-tag__close-label\"\n            aria-hidden=\"true\"\n            :data-icon=\"closeIcon\"\n          />\n          <svg\n            v-else\n            class=\"b-tag__close-icon\"\n            viewBox=\"0 0 12 12\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M9.5 3.205 8.795 2.5 6 5.295 3.205 2.5 2.5 3.205 5.295 6 2.5 8.795 3.205 9.5 6 6.705 8.795 9.5 9.5 8.795 6.705 6z\"\n            />\n          </svg>\n        </slot>\n      </button>\n    </span>\n  </Transition>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BTag - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-tag {\n  /* Layout */\n  --b-tag-height: 22px;\n  --b-tag-padding: 0 7px;\n  --b-tag-border-radius: 4px;\n  --b-tag-font-size: 12px;\n  --b-tag-line-height: 20px;\n  --b-tag-gap: 4px;\n\n  /* Close button */\n  --b-tag-close-size: 12px;\n  --b-tag-close-offset: 3px;\n  --b-tag-close-opacity: 0.45;\n  --b-tag-close-hover-opacity: 1;\n\n  /* Animation */\n  --b-tag-transition-duration: 200ms;\n\n  /* Custom color (set via inline style for non-preset colors) */\n  --b-tag-custom-color: initial;\n\n  /* ── Default color scheme ── */\n  --b-tag-bg: oklch(96% 0.003 260);\n  --b-tag-border-color: oklch(87% 0.007 260);\n  --b-tag-color: oklch(32% 0.02 260);\n\n  /* ── Layout ── */\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-tag-gap);\n  height: var(--b-tag-height);\n  padding: var(--b-tag-padding);\n  border-radius: var(--b-tag-border-radius);\n  border: 1px solid var(--b-tag-border-color);\n  background: var(--b-tag-bg);\n  color: var(--b-tag-color);\n  font-size: var(--b-tag-font-size);\n  line-height: var(--b-tag-line-height);\n  white-space: nowrap;\n  box-sizing: border-box;\n  vertical-align: middle;\n  cursor: default;\n  user-select: none;\n}\n\n/* ── Size variants ── */\n.b-tag--small {\n  --b-tag-height: 18px;\n  --b-tag-padding: 0 5px;\n  --b-tag-font-size: 11px;\n  --b-tag-line-height: 16px;\n  --b-tag-close-size: 10px;\n}\n\n.b-tag--large {\n  --b-tag-height: 28px;\n  --b-tag-padding: 0 10px;\n  --b-tag-font-size: 14px;\n  --b-tag-line-height: 26px;\n  --b-tag-close-size: 14px;\n}\n\n/* ── Borderless ── */\n.b-tag--borderless {\n  border-color: transparent;\n}\n\n/* ── Outlined variant ── */\n.b-tag--outlined {\n  background: transparent;\n}\n\n/* ── Icon ── */\n.b-tag__icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  font-size: var(--b-tag-font-size);\n}\n\n/* ── Content ── */\n.b-tag__content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: var(--b-tag-line-height);\n}\n\n/* ── Close button ── */\n.b-tag__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0;\n  margin-left: var(--b-tag-close-offset);\n  border: none;\n  border-radius: 2px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  opacity: var(--b-tag-close-opacity);\n  line-height: 1;\n  font-size: var(--b-tag-close-size);\n  width: var(--b-tag-close-size);\n  height: var(--b-tag-close-size);\n  transition: opacity var(--b-tag-transition-duration) ease;\n}\n\n.b-tag__close:hover {\n  opacity: var(--b-tag-close-hover-opacity);\n}\n\n.b-tag__close:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  opacity: var(--b-tag-close-hover-opacity);\n}\n\n.b-tag__close-icon {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n  display: block;\n}\n\n.b-tag__close-label::before {\n  content: attr(data-icon);\n}\n\n/* ─────────────────────────────────────────────\n   Preset color schemes\n   ───────────────────────────────────────────── */\n\n/* ── success ── */\n.b-tag--success {\n  --b-tag-bg: oklch(95% 0.05 145);\n  --b-tag-border-color: oklch(78% 0.14 148);\n  --b-tag-color: oklch(40% 0.14 148);\n}\n\n/* ── processing (blue pulse-ready) ── */\n.b-tag--processing {\n  --b-tag-bg: oklch(94% 0.05 260);\n  --b-tag-border-color: oklch(72% 0.17 262);\n  --b-tag-color: oklch(45% 0.18 262);\n}\n\n/* ── error ── */\n.b-tag--error {\n  --b-tag-bg: oklch(96% 0.04 20);\n  --b-tag-border-color: oklch(78% 0.15 22);\n  --b-tag-color: oklch(40% 0.17 22);\n}\n\n/* ── warning ── */\n.b-tag--warning {\n  --b-tag-bg: oklch(97% 0.06 75);\n  --b-tag-border-color: oklch(82% 0.17 58);\n  --b-tag-color: oklch(42% 0.14 55);\n}\n\n/* ── magenta ── */\n.b-tag--magenta {\n  --b-tag-bg: oklch(95% 0.04 345);\n  --b-tag-border-color: oklch(76% 0.18 350);\n  --b-tag-color: oklch(42% 0.2 348);\n}\n\n/* ── red ── */\n.b-tag--red {\n  --b-tag-bg: oklch(96% 0.035 15);\n  --b-tag-border-color: oklch(74% 0.19 18);\n  --b-tag-color: oklch(40% 0.2 18);\n}\n\n/* ── volcano ── */\n.b-tag--volcano {\n  --b-tag-bg: oklch(96% 0.04 38);\n  --b-tag-border-color: oklch(76% 0.17 38);\n  --b-tag-color: oklch(42% 0.18 38);\n}\n\n/* ── orange ── */\n.b-tag--orange {\n  --b-tag-bg: oklch(97% 0.055 65);\n  --b-tag-border-color: oklch(80% 0.18 62);\n  --b-tag-color: oklch(44% 0.16 60);\n}\n\n/* ── gold ── */\n.b-tag--gold {\n  --b-tag-bg: oklch(97% 0.06 80);\n  --b-tag-border-color: oklch(82% 0.18 78);\n  --b-tag-color: oklch(45% 0.14 78);\n}\n\n/* ── lime ── */\n.b-tag--lime {\n  --b-tag-bg: oklch(96% 0.07 128);\n  --b-tag-border-color: oklch(80% 0.18 128);\n  --b-tag-color: oklch(42% 0.15 128);\n}\n\n/* ── green ── */\n.b-tag--green {\n  --b-tag-bg: oklch(95% 0.05 145);\n  --b-tag-border-color: oklch(76% 0.16 147);\n  --b-tag-color: oklch(38% 0.14 147);\n}\n\n/* ── cyan ── */\n.b-tag--cyan {\n  --b-tag-bg: oklch(95% 0.05 200);\n  --b-tag-border-color: oklch(76% 0.14 200);\n  --b-tag-color: oklch(40% 0.12 200);\n}\n\n/* ── blue ── */\n.b-tag--blue {\n  --b-tag-bg: oklch(94% 0.05 255);\n  --b-tag-border-color: oklch(72% 0.17 258);\n  --b-tag-color: oklch(42% 0.18 258);\n}\n\n/* ── geekblue ── */\n.b-tag--geekblue {\n  --b-tag-bg: oklch(94% 0.04 270);\n  --b-tag-border-color: oklch(68% 0.2 272);\n  --b-tag-color: oklch(38% 0.22 272);\n}\n\n/* ── purple ── */\n.b-tag--purple {\n  --b-tag-bg: oklch(95% 0.04 300);\n  --b-tag-border-color: oklch(72% 0.18 300);\n  --b-tag-color: oklch(40% 0.2 300);\n}\n\n/* ─────────────────────────────────────────────\n   Custom (non-preset) color\n   ───────────────────────────────────────────── */\n.b-tag--custom-color {\n  /* 8% tint keeps the background very light; 55% blend with black produces\n     text dark enough to clear WCAG AA 4.5:1 against that near-white bg. */\n  --b-tag-bg: color-mix(in oklch, var(--b-tag-custom-color) 8%, white);\n  --b-tag-border-color: color-mix(in oklch, var(--b-tag-custom-color) 50%, white);\n  --b-tag-color: color-mix(in oklch, var(--b-tag-custom-color) 55%, black);\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-tag {\n  --b-tag-bg: oklch(26% 0.008 260);\n  --b-tag-border-color: oklch(36% 0.012 260);\n  --b-tag-color: oklch(82% 0.01 260);\n}\n\n[data-prefers-color='dark'] .b-tag--success {\n  --b-tag-bg: oklch(20% 0.06 148);\n  --b-tag-border-color: oklch(38% 0.12 148);\n  --b-tag-color: oklch(78% 0.12 148);\n}\n\n[data-prefers-color='dark'] .b-tag--processing {\n  --b-tag-bg: oklch(20% 0.06 260);\n  --b-tag-border-color: oklch(40% 0.14 262);\n  --b-tag-color: oklch(76% 0.15 262);\n}\n\n[data-prefers-color='dark'] .b-tag--error {\n  --b-tag-bg: oklch(20% 0.05 20);\n  --b-tag-border-color: oklch(38% 0.14 22);\n  --b-tag-color: oklch(78% 0.14 22);\n}\n\n[data-prefers-color='dark'] .b-tag--warning {\n  --b-tag-bg: oklch(20% 0.06 58);\n  --b-tag-border-color: oklch(40% 0.15 58);\n  --b-tag-color: oklch(80% 0.14 58);\n}\n\n[data-prefers-color='dark'] .b-tag--magenta {\n  --b-tag-bg: oklch(20% 0.05 348);\n  --b-tag-border-color: oklch(38% 0.16 350);\n  --b-tag-color: oklch(76% 0.16 348);\n}\n\n[data-prefers-color='dark'] .b-tag--red {\n  --b-tag-bg: oklch(20% 0.05 18);\n  --b-tag-border-color: oklch(38% 0.17 18);\n  --b-tag-color: oklch(76% 0.17 18);\n}\n\n[data-prefers-color='dark'] .b-tag--volcano {\n  --b-tag-bg: oklch(20% 0.05 38);\n  --b-tag-border-color: oklch(38% 0.15 38);\n  --b-tag-color: oklch(76% 0.15 38);\n}\n\n[data-prefers-color='dark'] .b-tag--orange {\n  --b-tag-bg: oklch(20% 0.06 62);\n  --b-tag-border-color: oklch(40% 0.16 62);\n  --b-tag-color: oklch(80% 0.16 62);\n}\n\n[data-prefers-color='dark'] .b-tag--gold {\n  --b-tag-bg: oklch(20% 0.06 78);\n  --b-tag-border-color: oklch(40% 0.16 78);\n  --b-tag-color: oklch(80% 0.14 78);\n}\n\n[data-prefers-color='dark'] .b-tag--lime {\n  --b-tag-bg: oklch(20% 0.07 128);\n  --b-tag-border-color: oklch(40% 0.16 128);\n  --b-tag-color: oklch(80% 0.14 128);\n}\n\n[data-prefers-color='dark'] .b-tag--green {\n  --b-tag-bg: oklch(20% 0.06 147);\n  --b-tag-border-color: oklch(38% 0.14 147);\n  --b-tag-color: oklch(76% 0.13 147);\n}\n\n[data-prefers-color='dark'] .b-tag--cyan {\n  --b-tag-bg: oklch(20% 0.05 200);\n  --b-tag-border-color: oklch(38% 0.12 200);\n  --b-tag-color: oklch(76% 0.11 200);\n}\n\n[data-prefers-color='dark'] .b-tag--blue {\n  --b-tag-bg: oklch(20% 0.06 258);\n  --b-tag-border-color: oklch(38% 0.15 258);\n  --b-tag-color: oklch(74% 0.15 258);\n}\n\n[data-prefers-color='dark'] .b-tag--geekblue {\n  --b-tag-bg: oklch(20% 0.05 272);\n  --b-tag-border-color: oklch(36% 0.18 272);\n  --b-tag-color: oklch(72% 0.18 272);\n}\n\n[data-prefers-color='dark'] .b-tag--purple {\n  --b-tag-bg: oklch(20% 0.05 300);\n  --b-tag-border-color: oklch(36% 0.16 300);\n  --b-tag-color: oklch(74% 0.16 300);\n}\n\n[data-prefers-color='dark'] .b-tag--custom-color {\n  --b-tag-bg: color-mix(in oklch, var(--b-tag-custom-color) 15%, oklch(15% 0 0));\n  --b-tag-border-color: color-mix(in oklch, var(--b-tag-custom-color) 50%, oklch(15% 0 0));\n  --b-tag-color: color-mix(in oklch, var(--b-tag-custom-color) 85%, white);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tag {\n    --b-tag-bg: oklch(26% 0.008 260);\n    --b-tag-border-color: oklch(36% 0.012 260);\n    --b-tag-color: oklch(82% 0.01 260);\n  }\n  [data-prefers-color='system'] .b-tag--success {\n    --b-tag-bg: oklch(20% 0.06 148);\n    --b-tag-border-color: oklch(38% 0.12 148);\n    --b-tag-color: oklch(78% 0.12 148);\n  }\n  [data-prefers-color='system'] .b-tag--processing {\n    --b-tag-bg: oklch(20% 0.06 260);\n    --b-tag-border-color: oklch(40% 0.14 262);\n    --b-tag-color: oklch(76% 0.15 262);\n  }\n  [data-prefers-color='system'] .b-tag--error {\n    --b-tag-bg: oklch(20% 0.05 20);\n    --b-tag-border-color: oklch(38% 0.14 22);\n    --b-tag-color: oklch(78% 0.14 22);\n  }\n  [data-prefers-color='system'] .b-tag--warning {\n    --b-tag-bg: oklch(20% 0.06 58);\n    --b-tag-border-color: oklch(40% 0.15 58);\n    --b-tag-color: oklch(80% 0.14 58);\n  }\n  [data-prefers-color='system'] .b-tag--magenta {\n    --b-tag-bg: oklch(20% 0.05 348);\n    --b-tag-border-color: oklch(38% 0.16 350);\n    --b-tag-color: oklch(76% 0.16 348);\n  }\n  [data-prefers-color='system'] .b-tag--red {\n    --b-tag-bg: oklch(20% 0.05 18);\n    --b-tag-border-color: oklch(38% 0.17 18);\n    --b-tag-color: oklch(76% 0.17 18);\n  }\n  [data-prefers-color='system'] .b-tag--volcano {\n    --b-tag-bg: oklch(20% 0.05 38);\n    --b-tag-border-color: oklch(38% 0.15 38);\n    --b-tag-color: oklch(76% 0.15 38);\n  }\n  [data-prefers-color='system'] .b-tag--orange {\n    --b-tag-bg: oklch(20% 0.06 62);\n    --b-tag-border-color: oklch(40% 0.16 62);\n    --b-tag-color: oklch(80% 0.16 62);\n  }\n  [data-prefers-color='system'] .b-tag--gold {\n    --b-tag-bg: oklch(20% 0.06 78);\n    --b-tag-border-color: oklch(40% 0.16 78);\n    --b-tag-color: oklch(80% 0.14 78);\n  }\n  [data-prefers-color='system'] .b-tag--lime {\n    --b-tag-bg: oklch(20% 0.07 128);\n    --b-tag-border-color: oklch(40% 0.16 128);\n    --b-tag-color: oklch(80% 0.14 128);\n  }\n  [data-prefers-color='system'] .b-tag--green {\n    --b-tag-bg: oklch(20% 0.06 147);\n    --b-tag-border-color: oklch(38% 0.14 147);\n    --b-tag-color: oklch(76% 0.13 147);\n  }\n  [data-prefers-color='system'] .b-tag--cyan {\n    --b-tag-bg: oklch(20% 0.05 200);\n    --b-tag-border-color: oklch(38% 0.12 200);\n    --b-tag-color: oklch(76% 0.11 200);\n  }\n  [data-prefers-color='system'] .b-tag--blue {\n    --b-tag-bg: oklch(20% 0.06 258);\n    --b-tag-border-color: oklch(38% 0.15 258);\n    --b-tag-color: oklch(74% 0.15 258);\n  }\n  [data-prefers-color='system'] .b-tag--geekblue {\n    --b-tag-bg: oklch(20% 0.05 272);\n    --b-tag-border-color: oklch(36% 0.18 272);\n    --b-tag-color: oklch(72% 0.18 272);\n  }\n  [data-prefers-color='system'] .b-tag--purple {\n    --b-tag-bg: oklch(20% 0.05 300);\n    --b-tag-border-color: oklch(36% 0.16 300);\n    --b-tag-color: oklch(74% 0.16 300);\n  }\n  [data-prefers-color='system'] .b-tag--custom-color {\n    --b-tag-bg: color-mix(in oklch, var(--b-tag-custom-color) 15%, oklch(15% 0 0));\n    --b-tag-border-color: color-mix(in oklch, var(--b-tag-custom-color) 50%, oklch(15% 0 0));\n    --b-tag-color: color-mix(in oklch, var(--b-tag-custom-color) 85%, white);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Transition (fade)\n   ───────────────────────────────────────────── */\n.b-tag-fade-enter-active,\n.b-tag-fade-leave-active {\n  transition:\n    opacity var(--b-tag-transition-duration) ease,\n    transform var(--b-tag-transition-duration) ease;\n}\n\n.b-tag-fade-enter-from,\n.b-tag-fade-leave-to {\n  opacity: 0;\n  transform: scale(0.85);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tag {\n    --b-tag-transition-duration: 0ms;\n  }\n\n  .b-tag-fade-enter-active,\n  .b-tag-fade-leave-active {\n    transition: opacity var(--b-tag-transition-duration) ease;\n    transform: none !important;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system228.js","names":[],"sources":["../src/components/BTimePicker/BTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\nimport {\n  BTimePickerPlacement,\n  BTimePickerSize,\n  BTimePickerStatus,\n  BTimePickerVariant,\n  type BTimePickerDisabledTime,\n} from './types';\n\nconst {\n  size = BTimePickerSize.Medium,\n  variant = BTimePickerVariant.Outlined,\n  placeholder = 'Select time',\n  disabled = false,\n  inputReadOnly = false,\n  allowClear = true,\n  showNow = true,\n  use12Hours = false,\n  hourStep = 1,\n  minuteStep = 1,\n  secondStep = 1,\n  format,\n  placement: _placement = BTimePickerPlacement.BottomLeft,\n  status,\n  hideDisabledOptions = false,\n  needConfirm = true,\n  changeOnScroll = false,\n  showHour = true,\n  showMinute = true,\n  showSecond = true,\n  defaultOpen = false,\n  defaultValue,\n  open,\n  disabledTime,\n} = defineProps<{\n  /** Size of the input */\n  size?: `${BTimePickerSize}`;\n  /** Visual variant */\n  variant?: `${BTimePickerVariant}`;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Make input read-only (useful for touch devices) */\n  inputReadOnly?: boolean;\n  /** Show clear button */\n  allowClear?: boolean;\n  /** Show \"Now\" button in footer */\n  showNow?: boolean;\n  /** Use 12-hour format with AM/PM */\n  use12Hours?: boolean;\n  /** Hour selection step */\n  hourStep?: number;\n  /** Minute selection step */\n  minuteStep?: number;\n  /** Second selection step */\n  secondStep?: number;\n  /** Time format string (e.g. 'HH:mm:ss', 'hh:mm a') */\n  format?: string;\n  /** Popup placement */\n  placement?: `${BTimePickerPlacement}`;\n  /** Validation status */\n  status?: `${BTimePickerStatus}`;\n  /** Hide disabled time options from columns */\n  hideDisabledOptions?: boolean;\n  /** Require OK button confirmation before applying value */\n  needConfirm?: boolean;\n  /** Update value on scroll instead of click */\n  changeOnScroll?: boolean;\n  /** Show hour column */\n  showHour?: boolean;\n  /** Show minute column */\n  showMinute?: boolean;\n  /** Show second column */\n  showSecond?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Default value (uncontrolled) */\n  defaultValue?: Date;\n  /** Controlled open state */\n  open?: boolean;\n  /** Function returning disabled hours/minutes/seconds */\n  disabledTime?: () => BTimePickerDisabledTime;\n}>();\n\nconst model = defineModel<Date | null>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [time: Date | null, timeString: string];\n  openChange: [open: boolean];\n}>();\n\nconst inputEl = ref<HTMLInputElement | null>(null);\nconst panelEl = ref<HTMLElement | null>(null);\nconst hourColEl = ref<HTMLElement | null>(null);\nconst minuteColEl = ref<HTMLElement | null>(null);\nconst secondColEl = ref<HTMLElement | null>(null);\nconst ampmColEl = ref<HTMLElement | null>(null);\n\ndefineExpose({\n  focus: () => inputEl.value?.focus(),\n  blur: () => inputEl.value?.blur(),\n});\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-time-picker-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// State\n// ─────────────────────────────────────────────\nconst isOpen = ref(defaultOpen);\nconst isPanelOpen = ref(open !== undefined ? !!open : defaultOpen);\nconst internalValue = ref<Date | null>(defaultValue ?? null);\nconst pendingHour = ref<number | null>(null);\nconst pendingMinute = ref<number | null>(null);\nconst pendingSecond = ref<number | null>(null);\nconst pendingAmpm = ref<'AM' | 'PM' | null>(null);\nconst inputText = ref('');\nconst focusedColumn = ref<'hour' | 'minute' | 'second' | 'ampm'>('hour');\n\nconst selectedTime = computed({\n  get: () => model.value ?? internalValue.value,\n  set: (val) => {\n    internalValue.value = val;\n    model.value = val;\n  },\n});\n\n// ─────────────────────────────────────────────\n// Format\n// ─────────────────────────────────────────────\nconst activeFormat = computed(() => {\n  if (format) return format;\n  const parts: string[] = [];\n  if (showHour) parts.push(use12Hours ? 'hh' : 'HH');\n  if (showMinute) parts.push('mm');\n  if (showSecond) parts.push('ss');\n  const base = parts.join(':');\n  return use12Hours ? `${base} A` : base;\n});\n\nfunction pad(n: number): string {\n  return String(n).padStart(2, '0');\n}\n\nfunction formatTime(d: Date | null): string {\n  if (!d) return '';\n  const h = d.getHours();\n  const m = d.getMinutes();\n  const s = d.getSeconds();\n  const ampm = h >= 12 ? 'PM' : 'AM';\n\n  let result = activeFormat.value;\n  if (use12Hours) {\n    const h12 = h % 12 || 12;\n    result = result.replace('hh', pad(h12));\n    result = result.replace('h', String(h12));\n    result = result.replace('A', ampm);\n    result = result.replace('a', ampm.toLowerCase());\n  } else {\n    result = result.replace('HH', pad(h));\n    result = result.replace('H', String(h));\n  }\n  result = result.replace('mm', pad(m));\n  result = result.replace('ss', pad(s));\n  return result;\n}\n\nfunction parseTimeString(str: string): Date | null {\n  if (!str.trim()) return null;\n  const timeRegex12 = /(\\d{1,2}):(\\d{2})(?::(\\d{2}))?\\s*(AM|PM|am|pm)?/;\n  const match = str.match(timeRegex12);\n  if (!match) return null;\n\n  let h = parseInt(match[1], 10);\n  const m = parseInt(match[2], 10);\n  const s = match[3] ? parseInt(match[3], 10) : 0;\n  const period = match[4]?.toUpperCase();\n\n  if (use12Hours && period) {\n    if (period === 'PM' && h < 12) h += 12;\n    if (period === 'AM' && h === 12) h = 0;\n  }\n\n  if (h < 0 || h > 23 || m < 0 || m > 59 || s < 0 || s > 59) return null;\n\n  const d = new Date();\n  d.setHours(h, m, s, 0);\n  return d;\n}\n\n// ─────────────────────────────────────────────\n// Disabled time logic\n// ─────────────────────────────────────────────\nconst disabledHours = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  return dt.disabledHours?.() ?? [];\n});\n\nconst disabledMinutes = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  return dt.disabledMinutes?.(h) ?? [];\n});\n\nconst disabledSeconds = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  const m = pendingMinute.value ?? selectedTime.value?.getMinutes() ?? 0;\n  return dt.disabledSeconds?.(h, m) ?? [];\n});\n\n// ─────────────────────────────────────────────\n// Column data\n// ─────────────────────────────────────────────\nconst hours = computed(() => {\n  const list: number[] = [];\n  if (use12Hours) {\n    for (let i = 1; i <= 12; i += hourStep) list.push(i);\n  } else {\n    for (let i = 0; i < 24; i += hourStep) list.push(i);\n  }\n  if (hideDisabledOptions) {\n    return list.filter((h) => !disabledHours.value.includes(use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h));\n  }\n  return list;\n});\n\nconst minutes = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += minuteStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((m) => !disabledMinutes.value.includes(m));\n  }\n  return list;\n});\n\nconst seconds = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += secondStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((s) => !disabledSeconds.value.includes(s));\n  }\n  return list;\n});\n\nfunction to24Hour(h12: number, period: 'AM' | 'PM'): number {\n  if (period === 'AM') return h12 === 12 ? 0 : h12;\n  return h12 === 12 ? 12 : h12 + 12;\n}\n\nfunction to12Hour(h24: number): { hour: number; period: 'AM' | 'PM' } {\n  const period: 'AM' | 'PM' = h24 >= 12 ? 'PM' : 'AM';\n  const hour = h24 % 12 || 12;\n  return { hour, period };\n}\n\n// ─────────────────────────────────────────────\n// Panel open/close\n// ─────────────────────────────────────────────\nfunction openPanel() {\n  if (disabled) return;\n  isOpen.value = true;\n  isPanelOpen.value = true;\n  emit('openChange', true);\n  panelEl.value?.showPopover?.();\n  syncPendingFromValue();\n  nextTick(() => scrollToSelected());\n}\n\nfunction closePanel() {\n  isOpen.value = false;\n  isPanelOpen.value = false;\n  emit('openChange', false);\n  panelEl.value?.hidePopover?.();\n  inputEl.value?.focus();\n}\n\nfunction togglePanel() {\n  if (isPanelOpen.value) closePanel();\n  else openPanel();\n}\n\nfunction handlePopoverToggle(e: Event) {\n  const toggleEvent = e as ToggleEvent;\n  const nowOpen = toggleEvent.newState === 'open';\n  isOpen.value = nowOpen;\n  isPanelOpen.value = nowOpen;\n  if (!nowOpen) emit('openChange', false);\n}\n\n// ─────────────────────────────────────────────\n// Sync pending state\n// ─────────────────────────────────────────────\nfunction syncPendingFromValue() {\n  const t = selectedTime.value;\n  if (t) {\n    if (use12Hours) {\n      const { hour, period } = to12Hour(t.getHours());\n      pendingHour.value = hour;\n      pendingAmpm.value = period;\n    } else {\n      pendingHour.value = t.getHours();\n    }\n    pendingMinute.value = t.getMinutes();\n    pendingSecond.value = t.getSeconds();\n  } else {\n    pendingHour.value = null;\n    pendingMinute.value = null;\n    pendingSecond.value = null;\n    pendingAmpm.value = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Selection\n// ─────────────────────────────────────────────\nfunction selectHour(h: number) {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  if (disabledHours.value.includes(h24)) return;\n  pendingHour.value = h;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectMinute(m: number) {\n  if (disabledMinutes.value.includes(m)) return;\n  pendingMinute.value = m;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectSecond(s: number) {\n  if (disabledSeconds.value.includes(s)) return;\n  pendingSecond.value = s;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectAmpm(val: 'AM' | 'PM') {\n  pendingAmpm.value = val;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction applyPendingIfComplete() {\n  if (pendingHour.value !== null && pendingMinute.value !== null) {\n    if (showSecond && pendingSecond.value === null) return;\n    if (use12Hours && pendingAmpm.value === null) return;\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction applyPending() {\n  const h = pendingHour.value ?? 0;\n  const m = pendingMinute.value ?? 0;\n  const s = pendingSecond.value ?? 0;\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n\n  const d = new Date();\n  d.setHours(h24, m, s, 0);\n  selectedTime.value = d;\n  inputText.value = formatTime(d);\n  emit('change', d, formatTime(d));\n}\n\nfunction handleOk() {\n  applyPending();\n  closePanel();\n}\n\nfunction handleNow() {\n  const now = new Date();\n  if (use12Hours) {\n    const { hour, period } = to12Hour(now.getHours());\n    pendingHour.value = hour;\n    pendingAmpm.value = period;\n  } else {\n    pendingHour.value = now.getHours();\n  }\n  pendingMinute.value = now.getMinutes();\n  pendingSecond.value = now.getSeconds();\n  nextTick(() => scrollToSelected());\n  if (!needConfirm) {\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction handleClear(e: Event) {\n  e.stopPropagation();\n  selectedTime.value = null;\n  inputText.value = '';\n  pendingHour.value = null;\n  pendingMinute.value = null;\n  pendingSecond.value = null;\n  pendingAmpm.value = null;\n  emit('change', null, '');\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nfunction handleInputChange(e: Event) {\n  const val = (e.target as HTMLInputElement).value;\n  inputText.value = val;\n}\n\nfunction handleInputBlur() {\n  if (!isPanelOpen.value) {\n    const parsed = parseTimeString(inputText.value);\n    if (parsed) {\n      selectedTime.value = parsed;\n      inputText.value = formatTime(parsed);\n      emit('change', parsed, formatTime(parsed));\n    } else if (inputText.value === '') {\n      selectedTime.value = null;\n      emit('change', null, '');\n    } else {\n      inputText.value = formatTime(selectedTime.value);\n    }\n  }\n}\n\nfunction handleInputKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter' || e.key === ' ') {\n    if (!isPanelOpen.value) {\n      e.preventDefault();\n      openPanel();\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      const parsed = parseTimeString(inputText.value);\n      if (parsed) {\n        selectedTime.value = parsed;\n        inputText.value = formatTime(parsed);\n        emit('change', parsed, formatTime(parsed));\n      }\n      closePanel();\n    }\n  } else if (e.key === 'Escape') {\n    if (isPanelOpen.value) {\n      e.preventDefault();\n      closePanel();\n    }\n  }\n}\n\n// ─────────────────────────────────────────────\n// Panel keyboard navigation\n// ─────────────────────────────────────────────\nfunction handlePanelKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    closePanel();\n    return;\n  }\n\n  if (e.key === 'Tab') {\n    const columns: ('hour' | 'minute' | 'second' | 'ampm')[] = [];\n    if (showHour) columns.push('hour');\n    if (showMinute) columns.push('minute');\n    if (showSecond) columns.push('second');\n    if (use12Hours) columns.push('ampm');\n\n    const idx = columns.indexOf(focusedColumn.value);\n    if (e.shiftKey) {\n      if (idx > 0) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx - 1];\n      }\n    } else {\n      if (idx < columns.length - 1) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx + 1];\n      }\n    }\n    return;\n  }\n\n  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n    e.preventDefault();\n    const delta = e.key === 'ArrowUp' ? -1 : 1;\n    adjustFocusedColumn(delta);\n    return;\n  }\n\n  if (e.key === 'Enter') {\n    e.preventDefault();\n    handleOk();\n  }\n}\n\nfunction adjustFocusedColumn(delta: number) {\n  if (focusedColumn.value === 'hour') {\n    const list = hours.value;\n    const current = pendingHour.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectHour(next);\n    scrollColumnTo(hourColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'minute') {\n    const list = minutes.value;\n    const current = pendingMinute.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectMinute(next);\n    scrollColumnTo(minuteColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'second') {\n    const list = seconds.value;\n    const current = pendingSecond.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectSecond(next);\n    scrollColumnTo(secondColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'ampm') {\n    const val = pendingAmpm.value === 'AM' ? 'PM' : 'AM';\n    selectAmpm(val);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Scroll helpers\n// ─────────────────────────────────────────────\nfunction scrollColumnTo(col: HTMLElement | null, idx: number) {\n  if (!col || !col.scrollTo) return;\n  const cellHeight = 28;\n  col.scrollTo({ top: idx * cellHeight, behavior: 'smooth' });\n}\n\nfunction scrollToSelected() {\n  if (pendingHour.value !== null) {\n    const idx = hours.value.indexOf(pendingHour.value);\n    if (idx >= 0) scrollColumnTo(hourColEl.value, idx);\n  }\n  if (pendingMinute.value !== null) {\n    const idx = minutes.value.indexOf(pendingMinute.value);\n    if (idx >= 0) scrollColumnTo(minuteColEl.value, idx);\n  }\n  if (pendingSecond.value !== null && showSecond) {\n    const idx = seconds.value.indexOf(pendingSecond.value);\n    if (idx >= 0) scrollColumnTo(secondColEl.value, idx);\n  }\n  if (pendingAmpm.value && use12Hours) {\n    const idx = pendingAmpm.value === 'AM' ? 0 : 1;\n    scrollColumnTo(ampmColEl.value, idx);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside\n// ─────────────────────────────────────────────\nfunction handleClickOutside(e: MouseEvent) {\n  if (!isPanelOpen.value) return;\n  const target = e.target as Node;\n  if (panelEl.value?.contains(target)) return;\n  if (inputEl.value?.parentElement?.contains(target)) return;\n  closePanel();\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', handleClickOutside);\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('mousedown', handleClickOutside);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  () => open,\n  (val) => {\n    if (val !== undefined) {\n      if (val) openPanel();\n      else closePanel();\n    }\n  },\n);\n\nwatch(selectedTime, (val) => {\n  inputText.value = formatTime(val);\n});\n\n// Init display\ninputText.value = formatTime(selectedTime.value);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-time-picker',\n  `b-time-picker--${size}`,\n  `b-time-picker--${variant}`,\n  {\n    'b-time-picker--disabled': disabled,\n    'b-time-picker--open': isPanelOpen.value,\n    [`b-time-picker--${status}`]: !!status,\n  },\n]);\n\nconst isHourDisabled = (h: number) => {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  return disabledHours.value.includes(h24);\n};\nconst isMinuteDisabled = (m: number) => disabledMinutes.value.includes(m);\nconst isSecondDisabled = (s: number) => disabledSeconds.value.includes(s);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <div\n      class=\"b-time-picker__input-wrap\"\n      :style=\"{ anchorName }\"\n      @click=\"togglePanel\"\n    >\n      <input\n        :id=\"`b-time-picker-input-${componentUID}`\"\n        ref=\"inputEl\"\n        class=\"b-time-picker__input\"\n        type=\"text\"\n        role=\"combobox\"\n        :aria-expanded=\"isPanelOpen\"\n        aria-haspopup=\"dialog\"\n        :aria-controls=\"isPanelOpen ? `b-time-picker-panel-${componentUID}` : undefined\"\n        :aria-describedby=\"status ? `b-time-picker-status-${componentUID}` : undefined\"\n        :aria-label=\"placeholder\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"inputReadOnly\"\n        :value=\"inputText\"\n        autocomplete=\"off\"\n        @input=\"handleInputChange\"\n        @blur=\"handleInputBlur\"\n        @keydown=\"handleInputKeydown\"\n      />\n      <span class=\"b-time-picker__suffix\">\n        <svg\n          v-if=\"!allowClear || !selectedTime\"\n          class=\"b-time-picker__icon\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <polyline points=\"12 6 12 12 16 14\" />\n        </svg>\n        <button\n          v-else\n          class=\"b-time-picker__clear\"\n          type=\"button\"\n          aria-label=\"Clear time\"\n          tabindex=\"-1\"\n          @click=\"handleClear\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\" />\n            <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\" />\n          </svg>\n        </button>\n      </span>\n      <span\n        v-if=\"status\"\n        :id=\"`b-time-picker-status-${componentUID}`\"\n        class=\"b-time-picker__status-text\"\n        aria-live=\"polite\"\n      >\n        {{ status }}\n      </span>\n    </div>\n\n    <div\n      :id=\"`b-time-picker-panel-${componentUID}`\"\n      ref=\"panelEl\"\n      class=\"b-time-picker__panel\"\n      popover\n      role=\"dialog\"\n      :aria-label=\"'Time picker'\"\n      :aria-modal=\"true\"\n      :style=\"{ positionAnchor: anchorName }\"\n      @toggle=\"handlePopoverToggle\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <div class=\"b-time-picker__columns\" role=\"group\" aria-label=\"Time selection columns\">\n        <!-- Hour Column -->\n        <div\n          v-if=\"showHour\"\n          ref=\"hourColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Hours'\"\n          :aria-activedescendant=\"pendingHour !== null ? `b-time-picker-hour-${pendingHour}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"h in hours\"\n            :id=\"`b-time-picker-hour-${h}-${componentUID}`\"\n            :key=\"h\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingHour === h,\n              'b-time-picker__cell--disabled': isHourDisabled(h),\n              'b-time-picker__cell--focused': focusedColumn === 'hour' && pendingHour === h,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingHour === h\"\n            :aria-disabled=\"isHourDisabled(h)\"\n            @click=\"selectHour(h)\"\n          >\n            {{ pad(h) }}\n          </div>\n        </div>\n\n        <!-- Minute Column -->\n        <div\n          v-if=\"showMinute\"\n          ref=\"minuteColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Minutes'\"\n          :aria-activedescendant=\"pendingMinute !== null ? `b-time-picker-minute-${pendingMinute}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"m in minutes\"\n            :id=\"`b-time-picker-minute-${m}-${componentUID}`\"\n            :key=\"m\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingMinute === m,\n              'b-time-picker__cell--disabled': isMinuteDisabled(m),\n              'b-time-picker__cell--focused': focusedColumn === 'minute' && pendingMinute === m,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingMinute === m\"\n            :aria-disabled=\"isMinuteDisabled(m)\"\n            @click=\"selectMinute(m)\"\n          >\n            {{ pad(m) }}\n          </div>\n        </div>\n\n        <!-- Second Column -->\n        <div\n          v-if=\"showSecond\"\n          ref=\"secondColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Seconds'\"\n          :aria-activedescendant=\"pendingSecond !== null ? `b-time-picker-second-${pendingSecond}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"s in seconds\"\n            :id=\"`b-time-picker-second-${s}-${componentUID}`\"\n            :key=\"s\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingSecond === s,\n              'b-time-picker__cell--disabled': isSecondDisabled(s),\n              'b-time-picker__cell--focused': focusedColumn === 'second' && pendingSecond === s,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingSecond === s\"\n            :aria-disabled=\"isSecondDisabled(s)\"\n            @click=\"selectSecond(s)\"\n          >\n            {{ pad(s) }}\n          </div>\n        </div>\n\n        <!-- AM/PM Column -->\n        <div\n          v-if=\"use12Hours\"\n          ref=\"ampmColEl\"\n          class=\"b-time-picker__column b-time-picker__column--ampm\"\n          role=\"listbox\"\n          aria-label=\"AM/PM\"\n        >\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'AM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'AM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'AM'\"\n            @click=\"selectAmpm('AM')\"\n          >\n            AM\n          </div>\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'PM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'PM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'PM'\"\n            @click=\"selectAmpm('PM')\"\n          >\n            PM\n          </div>\n        </div>\n      </div>\n\n      <div v-if=\"needConfirm || showNow\" class=\"b-time-picker__footer\">\n        <button\n          v-if=\"showNow\"\n          class=\"b-time-picker__now-btn\"\n          type=\"button\"\n          @click=\"handleNow\"\n        >\n          Now\n        </button>\n        <button\n          v-if=\"needConfirm\"\n          class=\"b-time-picker__ok-btn\"\n          type=\"button\"\n          @click=\"handleOk\"\n        >\n          OK\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-time-picker {\n  --b-time-picker-input-font-size: 14px;\n  --b-time-picker-input-font-size-lg: 16px;\n  --b-time-picker-input-font-size-sm: 14px;\n  --b-time-picker-padding-block: 4px;\n  --b-time-picker-padding-block-lg: 7px;\n  --b-time-picker-padding-block-sm: 0px;\n  --b-time-picker-padding-inline: 11px;\n  --b-time-picker-padding-inline-lg: 11px;\n  --b-time-picker-padding-inline-sm: 7px;\n  --b-time-picker-border-color: #d9d9d9;\n  --b-time-picker-hover-border-color: #4096ff;\n  --b-time-picker-active-border-color: #1677ff;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-time-picker-bg: #ffffff;\n  --b-time-picker-hover-bg: #ffffff;\n  --b-time-picker-active-bg: #ffffff;\n  --b-time-picker-text-color: rgba(0, 0, 0, 0.88);\n  --b-time-picker-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-icon-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-time-picker-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-panel-bg: #ffffff;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-time-picker-cell-height: 28px;\n  --b-time-picker-cell-width: 56px;\n  --b-time-picker-cell-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-selected-bg: #e6f4ff;\n  --b-time-picker-cell-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-column-height: 224px;\n  --b-time-picker-column-width: 56px;\n  --b-time-picker-footer-bg: #ffffff;\n  --b-time-picker-border-radius: 6px;\n  --b-time-picker-panel-border-radius: 8px;\n  --b-time-picker-transition-duration: 0.2s;\n  --b-time-picker-z-index-popup: 1050;\n\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  max-width: 200px;\n}\n\n/* ──── Input Wrap ──── */\n.b-time-picker__input-wrap {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  background: var(--b-time-picker-bg);\n  border: 1px solid var(--b-time-picker-border-color);\n  border-radius: var(--b-time-picker-border-radius);\n  padding: var(--b-time-picker-padding-block) var(--b-time-picker-padding-inline);\n  cursor: pointer;\n  transition:\n    border-color var(--b-time-picker-transition-duration),\n    box-shadow var(--b-time-picker-transition-duration),\n    background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__input-wrap:hover {\n  border-color: var(--b-time-picker-hover-border-color);\n  background: var(--b-time-picker-hover-bg);\n}\n\n.b-time-picker--open .b-time-picker__input-wrap {\n  border-color: var(--b-time-picker-active-border-color);\n  box-shadow: var(--b-time-picker-active-shadow);\n  background: var(--b-time-picker-active-bg);\n}\n\n/* ──── Size Variants ──── */\n.b-time-picker--sm .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-sm) var(--b-time-picker-padding-inline-sm);\n}\n\n.b-time-picker--sm .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-sm);\n}\n\n.b-time-picker--lg .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-lg) var(--b-time-picker-padding-inline-lg);\n}\n\n.b-time-picker--lg .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-lg);\n}\n\n/* ──── Variant Styles ──── */\n.b-time-picker--filled .b-time-picker__input-wrap {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: transparent;\n}\n\n.b-time-picker--filled .b-time-picker__input-wrap:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.b-time-picker--borderless .b-time-picker__input-wrap {\n  border-color: transparent;\n  background: transparent;\n  box-shadow: none;\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap {\n  border-radius: 0;\n  border: none;\n  border-bottom: 1px solid var(--b-time-picker-border-color);\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap:hover {\n  border-bottom-color: var(--b-time-picker-hover-border-color);\n}\n\n.b-time-picker--underlined.b-time-picker--open .b-time-picker__input-wrap {\n  border-bottom-color: var(--b-time-picker-active-border-color);\n  box-shadow: none;\n}\n\n/* ──── Status ──── */\n.b-time-picker--error .b-time-picker__input-wrap {\n  border-color: #ff4d4f;\n}\n\n.b-time-picker--error.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-error-active-shadow);\n}\n\n.b-time-picker--warning .b-time-picker__input-wrap {\n  border-color: #faad14;\n}\n\n.b-time-picker--warning.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-warning-active-shadow);\n}\n\n/* ──── Disabled ──── */\n.b-time-picker--disabled .b-time-picker__input-wrap {\n  background: var(--b-time-picker-disabled-bg);\n  border-color: var(--b-time-picker-border-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.b-time-picker--disabled .b-time-picker__input {\n  color: var(--b-time-picker-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ──── Input ──── */\n.b-time-picker__input {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: var(--b-time-picker-input-font-size);\n  color: var(--b-time-picker-text-color);\n  line-height: 1.5;\n  padding: 0;\n  min-width: 0;\n}\n\n.b-time-picker__input::placeholder {\n  color: var(--b-time-picker-placeholder-color);\n}\n\n/* ──── Suffix / Icons ──── */\n.b-time-picker__suffix {\n  display: flex;\n  align-items: center;\n  margin-left: 4px;\n  flex-shrink: 0;\n}\n\n.b-time-picker__icon {\n  width: 14px;\n  height: 14px;\n  color: var(--b-time-picker-icon-color);\n}\n\n.b-time-picker__clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--b-time-picker-clear-color);\n  transition: color var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__clear:hover {\n  color: var(--b-time-picker-clear-hover-color);\n}\n\n.b-time-picker__clear svg {\n  width: 14px;\n  height: 14px;\n}\n\n.b-time-picker__status-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n}\n\n/* ──── Panel ──── */\n.b-time-picker__panel {\n  position: absolute;\n  position-anchor: var(--b-time-picker-anchor);\n  inset: unset;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin: 0;\n  margin-top: 4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--b-time-picker-panel-border-radius);\n  background: var(--b-time-picker-panel-bg);\n  box-shadow: var(--b-time-picker-panel-shadow);\n  z-index: var(--b-time-picker-z-index-popup);\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(-4px);\n  transition:\n    opacity var(--b-time-picker-transition-duration) ease,\n    transform var(--b-time-picker-transition-duration) ease;\n}\n\n.b-time-picker__panel:popover-open {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n@starting-style {\n  .b-time-picker__panel:popover-open {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n/* ──── Columns ──── */\n.b-time-picker__columns {\n  display: flex;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.b-time-picker__column {\n  width: var(--b-time-picker-column-width);\n  height: var(--b-time-picker-column-height);\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-right: 1px solid #f0f0f0;\n  scroll-behavior: smooth;\n  scrollbar-width: thin;\n}\n\n.b-time-picker__column:last-child {\n  border-right: none;\n}\n\n/* ──── Cells ──── */\n.b-time-picker__cell {\n  height: var(--b-time-picker-cell-height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--b-time-picker-text-color);\n  transition: background var(--b-time-picker-transition-duration);\n  user-select: none;\n}\n\n.b-time-picker__cell:hover {\n  background: var(--b-time-picker-cell-hover-bg);\n}\n\n.b-time-picker__cell--selected {\n  background: var(--b-time-picker-cell-selected-bg);\n  font-weight: 600;\n}\n\n.b-time-picker__cell--focused {\n  outline: 2px solid var(--b-time-picker-active-border-color);\n  outline-offset: -2px;\n}\n\n.b-time-picker__cell--disabled {\n  color: var(--b-time-picker-cell-disabled-color);\n  background: var(--b-time-picker-cell-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-time-picker__cell--disabled:hover {\n  background: var(--b-time-picker-cell-disabled-bg);\n}\n\n/* ──── Footer ──── */\n.b-time-picker__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 8px;\n  background: var(--b-time-picker-footer-bg);\n}\n\n.b-time-picker__now-btn {\n  border: none;\n  background: none;\n  color: var(--b-time-picker-active-border-color);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__now-btn:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.b-time-picker__ok-btn {\n  border: none;\n  background: var(--b-time-picker-active-border-color);\n  color: #fff;\n  cursor: pointer;\n  font-size: 14px;\n  padding: 2px 12px;\n  border-radius: 4px;\n  font-weight: 500;\n  line-height: 1.5;\n  transition:\n    background var(--b-time-picker-transition-duration),\n    opacity var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__ok-btn:hover {\n  opacity: 0.85;\n}\n\n/* ──── Placement ──── */\n.b-time-picker--bottom-right .b-time-picker__panel {\n  left: unset;\n  right: anchor(right);\n}\n\n.b-time-picker--top-left .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n.b-time-picker--top-right .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  left: unset;\n  right: anchor(right);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n/* ──── Dark Mode ──── */\n[data-prefers-color='dark'] .b-time-picker {\n  --b-time-picker-bg: #141414;\n  --b-time-picker-hover-bg: #141414;\n  --b-time-picker-active-bg: #141414;\n  --b-time-picker-border-color: #424242;\n  --b-time-picker-hover-border-color: #165dff;\n  --b-time-picker-active-border-color: #1668dc;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n  --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n  --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-panel-bg: #1f1f1f;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-cell-selected-bg: #111a2c;\n  --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-footer-bg: #1f1f1f;\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-time-picker {\n    --b-time-picker-bg: #141414;\n    --b-time-picker-hover-bg: #141414;\n    --b-time-picker-active-bg: #141414;\n    --b-time-picker-border-color: #424242;\n    --b-time-picker-hover-border-color: #165dff;\n    --b-time-picker-active-border-color: #1668dc;\n    --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n    --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n    --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-panel-bg: #1f1f1f;\n    --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-cell-selected-bg: #111a2c;\n    --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n    --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-footer-bg: #1f1f1f;\n    --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n    --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n  }\n}\n\n/* ──── Reduced Motion ──── */\n@media (prefers-reduced-motion: reduce) {\n  .b-time-picker,\n  .b-time-picker * {\n    --b-time-picker-transition-duration: 0ms;\n    transition-duration: 0ms !important;\n    animation-duration: 0ms !important;\n  }\n\n  .b-time-picker__column {\n    scroll-behavior: auto;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/{design-system219.js → design-system230.js}

@@ -1,8 +1,8 @@
-import e from "./design-system217.js";
+import e from "./design-system228.js";
 /* empty css                 */
 //#region src/components/BTimePicker/BTimePicker.vue
 var t = e;
 //#endregion
 export { t as default };
 
-//# sourceMappingURL=design-system219.js.map
+//# sourceMappingURL=design-system230.js.map

package/dist/{design-system219.js.map → design-system230.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system219.js","names":[],"sources":["../src/components/BTimePicker/BTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\nimport {\n  BTimePickerPlacement,\n  BTimePickerSize,\n  BTimePickerStatus,\n  BTimePickerVariant,\n  type BTimePickerDisabledTime,\n} from './types';\n\nconst {\n  size = BTimePickerSize.Medium,\n  variant = BTimePickerVariant.Outlined,\n  placeholder = 'Select time',\n  disabled = false,\n  inputReadOnly = false,\n  allowClear = true,\n  showNow = true,\n  use12Hours = false,\n  hourStep = 1,\n  minuteStep = 1,\n  secondStep = 1,\n  format,\n  placement: _placement = BTimePickerPlacement.BottomLeft,\n  status,\n  hideDisabledOptions = false,\n  needConfirm = true,\n  changeOnScroll = false,\n  showHour = true,\n  showMinute = true,\n  showSecond = true,\n  defaultOpen = false,\n  defaultValue,\n  open,\n  disabledTime,\n} = defineProps<{\n  /** Size of the input */\n  size?: `${BTimePickerSize}`;\n  /** Visual variant */\n  variant?: `${BTimePickerVariant}`;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Make input read-only (useful for touch devices) */\n  inputReadOnly?: boolean;\n  /** Show clear button */\n  allowClear?: boolean;\n  /** Show \"Now\" button in footer */\n  showNow?: boolean;\n  /** Use 12-hour format with AM/PM */\n  use12Hours?: boolean;\n  /** Hour selection step */\n  hourStep?: number;\n  /** Minute selection step */\n  minuteStep?: number;\n  /** Second selection step */\n  secondStep?: number;\n  /** Time format string (e.g. 'HH:mm:ss', 'hh:mm a') */\n  format?: string;\n  /** Popup placement */\n  placement?: `${BTimePickerPlacement}`;\n  /** Validation status */\n  status?: `${BTimePickerStatus}`;\n  /** Hide disabled time options from columns */\n  hideDisabledOptions?: boolean;\n  /** Require OK button confirmation before applying value */\n  needConfirm?: boolean;\n  /** Update value on scroll instead of click */\n  changeOnScroll?: boolean;\n  /** Show hour column */\n  showHour?: boolean;\n  /** Show minute column */\n  showMinute?: boolean;\n  /** Show second column */\n  showSecond?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Default value (uncontrolled) */\n  defaultValue?: Date;\n  /** Controlled open state */\n  open?: boolean;\n  /** Function returning disabled hours/minutes/seconds */\n  disabledTime?: () => BTimePickerDisabledTime;\n}>();\n\nconst model = defineModel<Date | null>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [time: Date | null, timeString: string];\n  openChange: [open: boolean];\n}>();\n\nconst inputEl = ref<HTMLInputElement | null>(null);\nconst panelEl = ref<HTMLElement | null>(null);\nconst hourColEl = ref<HTMLElement | null>(null);\nconst minuteColEl = ref<HTMLElement | null>(null);\nconst secondColEl = ref<HTMLElement | null>(null);\nconst ampmColEl = ref<HTMLElement | null>(null);\n\ndefineExpose({\n  focus: () => inputEl.value?.focus(),\n  blur: () => inputEl.value?.blur(),\n});\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-time-picker-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// State\n// ─────────────────────────────────────────────\nconst isOpen = ref(defaultOpen);\nconst isPanelOpen = ref(open !== undefined ? !!open : defaultOpen);\nconst internalValue = ref<Date | null>(defaultValue ?? null);\nconst pendingHour = ref<number | null>(null);\nconst pendingMinute = ref<number | null>(null);\nconst pendingSecond = ref<number | null>(null);\nconst pendingAmpm = ref<'AM' | 'PM' | null>(null);\nconst inputText = ref('');\nconst focusedColumn = ref<'hour' | 'minute' | 'second' | 'ampm'>('hour');\n\nconst selectedTime = computed({\n  get: () => model.value ?? internalValue.value,\n  set: (val) => {\n    internalValue.value = val;\n    model.value = val;\n  },\n});\n\n// ─────────────────────────────────────────────\n// Format\n// ─────────────────────────────────────────────\nconst activeFormat = computed(() => {\n  if (format) return format;\n  const parts: string[] = [];\n  if (showHour) parts.push(use12Hours ? 'hh' : 'HH');\n  if (showMinute) parts.push('mm');\n  if (showSecond) parts.push('ss');\n  const base = parts.join(':');\n  return use12Hours ? `${base} A` : base;\n});\n\nfunction pad(n: number): string {\n  return String(n).padStart(2, '0');\n}\n\nfunction formatTime(d: Date | null): string {\n  if (!d) return '';\n  const h = d.getHours();\n  const m = d.getMinutes();\n  const s = d.getSeconds();\n  const ampm = h >= 12 ? 'PM' : 'AM';\n\n  let result = activeFormat.value;\n  if (use12Hours) {\n    const h12 = h % 12 || 12;\n    result = result.replace('hh', pad(h12));\n    result = result.replace('h', String(h12));\n    result = result.replace('A', ampm);\n    result = result.replace('a', ampm.toLowerCase());\n  } else {\n    result = result.replace('HH', pad(h));\n    result = result.replace('H', String(h));\n  }\n  result = result.replace('mm', pad(m));\n  result = result.replace('ss', pad(s));\n  return result;\n}\n\nfunction parseTimeString(str: string): Date | null {\n  if (!str.trim()) return null;\n  const timeRegex12 = /(\\d{1,2}):(\\d{2})(?::(\\d{2}))?\\s*(AM|PM|am|pm)?/;\n  const match = str.match(timeRegex12);\n  if (!match) return null;\n\n  let h = parseInt(match[1], 10);\n  const m = parseInt(match[2], 10);\n  const s = match[3] ? parseInt(match[3], 10) : 0;\n  const period = match[4]?.toUpperCase();\n\n  if (use12Hours && period) {\n    if (period === 'PM' && h < 12) h += 12;\n    if (period === 'AM' && h === 12) h = 0;\n  }\n\n  if (h < 0 || h > 23 || m < 0 || m > 59 || s < 0 || s > 59) return null;\n\n  const d = new Date();\n  d.setHours(h, m, s, 0);\n  return d;\n}\n\n// ─────────────────────────────────────────────\n// Disabled time logic\n// ─────────────────────────────────────────────\nconst disabledHours = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  return dt.disabledHours?.() ?? [];\n});\n\nconst disabledMinutes = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  return dt.disabledMinutes?.(h) ?? [];\n});\n\nconst disabledSeconds = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  const m = pendingMinute.value ?? selectedTime.value?.getMinutes() ?? 0;\n  return dt.disabledSeconds?.(h, m) ?? [];\n});\n\n// ─────────────────────────────────────────────\n// Column data\n// ─────────────────────────────────────────────\nconst hours = computed(() => {\n  const list: number[] = [];\n  if (use12Hours) {\n    for (let i = 1; i <= 12; i += hourStep) list.push(i);\n  } else {\n    for (let i = 0; i < 24; i += hourStep) list.push(i);\n  }\n  if (hideDisabledOptions) {\n    return list.filter((h) => !disabledHours.value.includes(use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h));\n  }\n  return list;\n});\n\nconst minutes = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += minuteStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((m) => !disabledMinutes.value.includes(m));\n  }\n  return list;\n});\n\nconst seconds = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += secondStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((s) => !disabledSeconds.value.includes(s));\n  }\n  return list;\n});\n\nfunction to24Hour(h12: number, period: 'AM' | 'PM'): number {\n  if (period === 'AM') return h12 === 12 ? 0 : h12;\n  return h12 === 12 ? 12 : h12 + 12;\n}\n\nfunction to12Hour(h24: number): { hour: number; period: 'AM' | 'PM' } {\n  const period: 'AM' | 'PM' = h24 >= 12 ? 'PM' : 'AM';\n  const hour = h24 % 12 || 12;\n  return { hour, period };\n}\n\n// ─────────────────────────────────────────────\n// Panel open/close\n// ─────────────────────────────────────────────\nfunction openPanel() {\n  if (disabled) return;\n  isOpen.value = true;\n  isPanelOpen.value = true;\n  emit('openChange', true);\n  panelEl.value?.showPopover?.();\n  syncPendingFromValue();\n  nextTick(() => scrollToSelected());\n}\n\nfunction closePanel() {\n  isOpen.value = false;\n  isPanelOpen.value = false;\n  emit('openChange', false);\n  panelEl.value?.hidePopover?.();\n  inputEl.value?.focus();\n}\n\nfunction togglePanel() {\n  if (isPanelOpen.value) closePanel();\n  else openPanel();\n}\n\nfunction handlePopoverToggle(e: Event) {\n  const toggleEvent = e as ToggleEvent;\n  const nowOpen = toggleEvent.newState === 'open';\n  isOpen.value = nowOpen;\n  isPanelOpen.value = nowOpen;\n  if (!nowOpen) emit('openChange', false);\n}\n\n// ─────────────────────────────────────────────\n// Sync pending state\n// ─────────────────────────────────────────────\nfunction syncPendingFromValue() {\n  const t = selectedTime.value;\n  if (t) {\n    if (use12Hours) {\n      const { hour, period } = to12Hour(t.getHours());\n      pendingHour.value = hour;\n      pendingAmpm.value = period;\n    } else {\n      pendingHour.value = t.getHours();\n    }\n    pendingMinute.value = t.getMinutes();\n    pendingSecond.value = t.getSeconds();\n  } else {\n    pendingHour.value = null;\n    pendingMinute.value = null;\n    pendingSecond.value = null;\n    pendingAmpm.value = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Selection\n// ─────────────────────────────────────────────\nfunction selectHour(h: number) {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  if (disabledHours.value.includes(h24)) return;\n  pendingHour.value = h;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectMinute(m: number) {\n  if (disabledMinutes.value.includes(m)) return;\n  pendingMinute.value = m;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectSecond(s: number) {\n  if (disabledSeconds.value.includes(s)) return;\n  pendingSecond.value = s;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectAmpm(val: 'AM' | 'PM') {\n  pendingAmpm.value = val;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction applyPendingIfComplete() {\n  if (pendingHour.value !== null && pendingMinute.value !== null) {\n    if (showSecond && pendingSecond.value === null) return;\n    if (use12Hours && pendingAmpm.value === null) return;\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction applyPending() {\n  const h = pendingHour.value ?? 0;\n  const m = pendingMinute.value ?? 0;\n  const s = pendingSecond.value ?? 0;\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n\n  const d = new Date();\n  d.setHours(h24, m, s, 0);\n  selectedTime.value = d;\n  inputText.value = formatTime(d);\n  emit('change', d, formatTime(d));\n}\n\nfunction handleOk() {\n  applyPending();\n  closePanel();\n}\n\nfunction handleNow() {\n  const now = new Date();\n  if (use12Hours) {\n    const { hour, period } = to12Hour(now.getHours());\n    pendingHour.value = hour;\n    pendingAmpm.value = period;\n  } else {\n    pendingHour.value = now.getHours();\n  }\n  pendingMinute.value = now.getMinutes();\n  pendingSecond.value = now.getSeconds();\n  nextTick(() => scrollToSelected());\n  if (!needConfirm) {\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction handleClear(e: Event) {\n  e.stopPropagation();\n  selectedTime.value = null;\n  inputText.value = '';\n  pendingHour.value = null;\n  pendingMinute.value = null;\n  pendingSecond.value = null;\n  pendingAmpm.value = null;\n  emit('change', null, '');\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nfunction handleInputChange(e: Event) {\n  const val = (e.target as HTMLInputElement).value;\n  inputText.value = val;\n}\n\nfunction handleInputBlur() {\n  if (!isPanelOpen.value) {\n    const parsed = parseTimeString(inputText.value);\n    if (parsed) {\n      selectedTime.value = parsed;\n      inputText.value = formatTime(parsed);\n      emit('change', parsed, formatTime(parsed));\n    } else if (inputText.value === '') {\n      selectedTime.value = null;\n      emit('change', null, '');\n    } else {\n      inputText.value = formatTime(selectedTime.value);\n    }\n  }\n}\n\nfunction handleInputKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter' || e.key === ' ') {\n    if (!isPanelOpen.value) {\n      e.preventDefault();\n      openPanel();\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      const parsed = parseTimeString(inputText.value);\n      if (parsed) {\n        selectedTime.value = parsed;\n        inputText.value = formatTime(parsed);\n        emit('change', parsed, formatTime(parsed));\n      }\n      closePanel();\n    }\n  } else if (e.key === 'Escape') {\n    if (isPanelOpen.value) {\n      e.preventDefault();\n      closePanel();\n    }\n  }\n}\n\n// ─────────────────────────────────────────────\n// Panel keyboard navigation\n// ─────────────────────────────────────────────\nfunction handlePanelKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    closePanel();\n    return;\n  }\n\n  if (e.key === 'Tab') {\n    const columns: ('hour' | 'minute' | 'second' | 'ampm')[] = [];\n    if (showHour) columns.push('hour');\n    if (showMinute) columns.push('minute');\n    if (showSecond) columns.push('second');\n    if (use12Hours) columns.push('ampm');\n\n    const idx = columns.indexOf(focusedColumn.value);\n    if (e.shiftKey) {\n      if (idx > 0) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx - 1];\n      }\n    } else {\n      if (idx < columns.length - 1) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx + 1];\n      }\n    }\n    return;\n  }\n\n  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n    e.preventDefault();\n    const delta = e.key === 'ArrowUp' ? -1 : 1;\n    adjustFocusedColumn(delta);\n    return;\n  }\n\n  if (e.key === 'Enter') {\n    e.preventDefault();\n    handleOk();\n  }\n}\n\nfunction adjustFocusedColumn(delta: number) {\n  if (focusedColumn.value === 'hour') {\n    const list = hours.value;\n    const current = pendingHour.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectHour(next);\n    scrollColumnTo(hourColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'minute') {\n    const list = minutes.value;\n    const current = pendingMinute.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectMinute(next);\n    scrollColumnTo(minuteColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'second') {\n    const list = seconds.value;\n    const current = pendingSecond.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectSecond(next);\n    scrollColumnTo(secondColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'ampm') {\n    const val = pendingAmpm.value === 'AM' ? 'PM' : 'AM';\n    selectAmpm(val);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Scroll helpers\n// ─────────────────────────────────────────────\nfunction scrollColumnTo(col: HTMLElement | null, idx: number) {\n  if (!col || !col.scrollTo) return;\n  const cellHeight = 28;\n  col.scrollTo({ top: idx * cellHeight, behavior: 'smooth' });\n}\n\nfunction scrollToSelected() {\n  if (pendingHour.value !== null) {\n    const idx = hours.value.indexOf(pendingHour.value);\n    if (idx >= 0) scrollColumnTo(hourColEl.value, idx);\n  }\n  if (pendingMinute.value !== null) {\n    const idx = minutes.value.indexOf(pendingMinute.value);\n    if (idx >= 0) scrollColumnTo(minuteColEl.value, idx);\n  }\n  if (pendingSecond.value !== null && showSecond) {\n    const idx = seconds.value.indexOf(pendingSecond.value);\n    if (idx >= 0) scrollColumnTo(secondColEl.value, idx);\n  }\n  if (pendingAmpm.value && use12Hours) {\n    const idx = pendingAmpm.value === 'AM' ? 0 : 1;\n    scrollColumnTo(ampmColEl.value, idx);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside\n// ─────────────────────────────────────────────\nfunction handleClickOutside(e: MouseEvent) {\n  if (!isPanelOpen.value) return;\n  const target = e.target as Node;\n  if (panelEl.value?.contains(target)) return;\n  if (inputEl.value?.parentElement?.contains(target)) return;\n  closePanel();\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', handleClickOutside);\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('mousedown', handleClickOutside);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  () => open,\n  (val) => {\n    if (val !== undefined) {\n      if (val) openPanel();\n      else closePanel();\n    }\n  },\n);\n\nwatch(selectedTime, (val) => {\n  inputText.value = formatTime(val);\n});\n\n// Init display\ninputText.value = formatTime(selectedTime.value);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-time-picker',\n  `b-time-picker--${size}`,\n  `b-time-picker--${variant}`,\n  {\n    'b-time-picker--disabled': disabled,\n    'b-time-picker--open': isPanelOpen.value,\n    [`b-time-picker--${status}`]: !!status,\n  },\n]);\n\nconst isHourDisabled = (h: number) => {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  return disabledHours.value.includes(h24);\n};\nconst isMinuteDisabled = (m: number) => disabledMinutes.value.includes(m);\nconst isSecondDisabled = (s: number) => disabledSeconds.value.includes(s);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <div\n      class=\"b-time-picker__input-wrap\"\n      :style=\"{ anchorName }\"\n      @click=\"togglePanel\"\n    >\n      <input\n        :id=\"`b-time-picker-input-${componentUID}`\"\n        ref=\"inputEl\"\n        class=\"b-time-picker__input\"\n        type=\"text\"\n        role=\"combobox\"\n        :aria-expanded=\"isPanelOpen\"\n        aria-haspopup=\"dialog\"\n        :aria-controls=\"isPanelOpen ? `b-time-picker-panel-${componentUID}` : undefined\"\n        :aria-describedby=\"status ? `b-time-picker-status-${componentUID}` : undefined\"\n        :aria-label=\"placeholder\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"inputReadOnly\"\n        :value=\"inputText\"\n        autocomplete=\"off\"\n        @input=\"handleInputChange\"\n        @blur=\"handleInputBlur\"\n        @keydown=\"handleInputKeydown\"\n      />\n      <span class=\"b-time-picker__suffix\">\n        <svg\n          v-if=\"!allowClear || !selectedTime\"\n          class=\"b-time-picker__icon\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <polyline points=\"12 6 12 12 16 14\" />\n        </svg>\n        <button\n          v-else\n          class=\"b-time-picker__clear\"\n          type=\"button\"\n          aria-label=\"Clear time\"\n          tabindex=\"-1\"\n          @click=\"handleClear\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\" />\n            <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\" />\n          </svg>\n        </button>\n      </span>\n      <span\n        v-if=\"status\"\n        :id=\"`b-time-picker-status-${componentUID}`\"\n        class=\"b-time-picker__status-text\"\n        aria-live=\"polite\"\n      >\n        {{ status }}\n      </span>\n    </div>\n\n    <div\n      :id=\"`b-time-picker-panel-${componentUID}`\"\n      ref=\"panelEl\"\n      class=\"b-time-picker__panel\"\n      popover\n      role=\"dialog\"\n      :aria-label=\"'Time picker'\"\n      :aria-modal=\"true\"\n      :style=\"{ positionAnchor: anchorName }\"\n      @toggle=\"handlePopoverToggle\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <div class=\"b-time-picker__columns\" role=\"group\" aria-label=\"Time selection columns\">\n        <!-- Hour Column -->\n        <div\n          v-if=\"showHour\"\n          ref=\"hourColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Hours'\"\n          :aria-activedescendant=\"pendingHour !== null ? `b-time-picker-hour-${pendingHour}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"h in hours\"\n            :id=\"`b-time-picker-hour-${h}-${componentUID}`\"\n            :key=\"h\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingHour === h,\n              'b-time-picker__cell--disabled': isHourDisabled(h),\n              'b-time-picker__cell--focused': focusedColumn === 'hour' && pendingHour === h,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingHour === h\"\n            :aria-disabled=\"isHourDisabled(h)\"\n            @click=\"selectHour(h)\"\n          >\n            {{ pad(h) }}\n          </div>\n        </div>\n\n        <!-- Minute Column -->\n        <div\n          v-if=\"showMinute\"\n          ref=\"minuteColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Minutes'\"\n          :aria-activedescendant=\"pendingMinute !== null ? `b-time-picker-minute-${pendingMinute}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"m in minutes\"\n            :id=\"`b-time-picker-minute-${m}-${componentUID}`\"\n            :key=\"m\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingMinute === m,\n              'b-time-picker__cell--disabled': isMinuteDisabled(m),\n              'b-time-picker__cell--focused': focusedColumn === 'minute' && pendingMinute === m,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingMinute === m\"\n            :aria-disabled=\"isMinuteDisabled(m)\"\n            @click=\"selectMinute(m)\"\n          >\n            {{ pad(m) }}\n          </div>\n        </div>\n\n        <!-- Second Column -->\n        <div\n          v-if=\"showSecond\"\n          ref=\"secondColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Seconds'\"\n          :aria-activedescendant=\"pendingSecond !== null ? `b-time-picker-second-${pendingSecond}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"s in seconds\"\n            :id=\"`b-time-picker-second-${s}-${componentUID}`\"\n            :key=\"s\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingSecond === s,\n              'b-time-picker__cell--disabled': isSecondDisabled(s),\n              'b-time-picker__cell--focused': focusedColumn === 'second' && pendingSecond === s,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingSecond === s\"\n            :aria-disabled=\"isSecondDisabled(s)\"\n            @click=\"selectSecond(s)\"\n          >\n            {{ pad(s) }}\n          </div>\n        </div>\n\n        <!-- AM/PM Column -->\n        <div\n          v-if=\"use12Hours\"\n          ref=\"ampmColEl\"\n          class=\"b-time-picker__column b-time-picker__column--ampm\"\n          role=\"listbox\"\n          aria-label=\"AM/PM\"\n        >\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'AM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'AM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'AM'\"\n            @click=\"selectAmpm('AM')\"\n          >\n            AM\n          </div>\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'PM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'PM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'PM'\"\n            @click=\"selectAmpm('PM')\"\n          >\n            PM\n          </div>\n        </div>\n      </div>\n\n      <div v-if=\"needConfirm || showNow\" class=\"b-time-picker__footer\">\n        <button\n          v-if=\"showNow\"\n          class=\"b-time-picker__now-btn\"\n          type=\"button\"\n          @click=\"handleNow\"\n        >\n          Now\n        </button>\n        <button\n          v-if=\"needConfirm\"\n          class=\"b-time-picker__ok-btn\"\n          type=\"button\"\n          @click=\"handleOk\"\n        >\n          OK\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-time-picker {\n  --b-time-picker-input-font-size: 14px;\n  --b-time-picker-input-font-size-lg: 16px;\n  --b-time-picker-input-font-size-sm: 14px;\n  --b-time-picker-padding-block: 4px;\n  --b-time-picker-padding-block-lg: 7px;\n  --b-time-picker-padding-block-sm: 0px;\n  --b-time-picker-padding-inline: 11px;\n  --b-time-picker-padding-inline-lg: 11px;\n  --b-time-picker-padding-inline-sm: 7px;\n  --b-time-picker-border-color: #d9d9d9;\n  --b-time-picker-hover-border-color: #4096ff;\n  --b-time-picker-active-border-color: #1677ff;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-time-picker-bg: #ffffff;\n  --b-time-picker-hover-bg: #ffffff;\n  --b-time-picker-active-bg: #ffffff;\n  --b-time-picker-text-color: rgba(0, 0, 0, 0.88);\n  --b-time-picker-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-icon-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-time-picker-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-panel-bg: #ffffff;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-time-picker-cell-height: 28px;\n  --b-time-picker-cell-width: 56px;\n  --b-time-picker-cell-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-selected-bg: #e6f4ff;\n  --b-time-picker-cell-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-column-height: 224px;\n  --b-time-picker-column-width: 56px;\n  --b-time-picker-footer-bg: #ffffff;\n  --b-time-picker-border-radius: 6px;\n  --b-time-picker-panel-border-radius: 8px;\n  --b-time-picker-transition-duration: 0.2s;\n  --b-time-picker-z-index-popup: 1050;\n\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  max-width: 200px;\n}\n\n/* ──── Input Wrap ──── */\n.b-time-picker__input-wrap {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  background: var(--b-time-picker-bg);\n  border: 1px solid var(--b-time-picker-border-color);\n  border-radius: var(--b-time-picker-border-radius);\n  padding: var(--b-time-picker-padding-block) var(--b-time-picker-padding-inline);\n  cursor: pointer;\n  transition:\n    border-color var(--b-time-picker-transition-duration),\n    box-shadow var(--b-time-picker-transition-duration),\n    background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__input-wrap:hover {\n  border-color: var(--b-time-picker-hover-border-color);\n  background: var(--b-time-picker-hover-bg);\n}\n\n.b-time-picker--open .b-time-picker__input-wrap {\n  border-color: var(--b-time-picker-active-border-color);\n  box-shadow: var(--b-time-picker-active-shadow);\n  background: var(--b-time-picker-active-bg);\n}\n\n/* ──── Size Variants ──── */\n.b-time-picker--sm .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-sm) var(--b-time-picker-padding-inline-sm);\n}\n\n.b-time-picker--sm .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-sm);\n}\n\n.b-time-picker--lg .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-lg) var(--b-time-picker-padding-inline-lg);\n}\n\n.b-time-picker--lg .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-lg);\n}\n\n/* ──── Variant Styles ──── */\n.b-time-picker--filled .b-time-picker__input-wrap {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: transparent;\n}\n\n.b-time-picker--filled .b-time-picker__input-wrap:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.b-time-picker--borderless .b-time-picker__input-wrap {\n  border-color: transparent;\n  background: transparent;\n  box-shadow: none;\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap {\n  border-radius: 0;\n  border: none;\n  border-bottom: 1px solid var(--b-time-picker-border-color);\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap:hover {\n  border-bottom-color: var(--b-time-picker-hover-border-color);\n}\n\n.b-time-picker--underlined.b-time-picker--open .b-time-picker__input-wrap {\n  border-bottom-color: var(--b-time-picker-active-border-color);\n  box-shadow: none;\n}\n\n/* ──── Status ──── */\n.b-time-picker--error .b-time-picker__input-wrap {\n  border-color: #ff4d4f;\n}\n\n.b-time-picker--error.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-error-active-shadow);\n}\n\n.b-time-picker--warning .b-time-picker__input-wrap {\n  border-color: #faad14;\n}\n\n.b-time-picker--warning.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-warning-active-shadow);\n}\n\n/* ──── Disabled ──── */\n.b-time-picker--disabled .b-time-picker__input-wrap {\n  background: var(--b-time-picker-disabled-bg);\n  border-color: var(--b-time-picker-border-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.b-time-picker--disabled .b-time-picker__input {\n  color: var(--b-time-picker-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ──── Input ──── */\n.b-time-picker__input {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: var(--b-time-picker-input-font-size);\n  color: var(--b-time-picker-text-color);\n  line-height: 1.5;\n  padding: 0;\n  min-width: 0;\n}\n\n.b-time-picker__input::placeholder {\n  color: var(--b-time-picker-placeholder-color);\n}\n\n/* ──── Suffix / Icons ──── */\n.b-time-picker__suffix {\n  display: flex;\n  align-items: center;\n  margin-left: 4px;\n  flex-shrink: 0;\n}\n\n.b-time-picker__icon {\n  width: 14px;\n  height: 14px;\n  color: var(--b-time-picker-icon-color);\n}\n\n.b-time-picker__clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--b-time-picker-clear-color);\n  transition: color var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__clear:hover {\n  color: var(--b-time-picker-clear-hover-color);\n}\n\n.b-time-picker__clear svg {\n  width: 14px;\n  height: 14px;\n}\n\n.b-time-picker__status-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n}\n\n/* ──── Panel ──── */\n.b-time-picker__panel {\n  position: absolute;\n  position-anchor: var(--b-time-picker-anchor);\n  inset: unset;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin: 0;\n  margin-top: 4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--b-time-picker-panel-border-radius);\n  background: var(--b-time-picker-panel-bg);\n  box-shadow: var(--b-time-picker-panel-shadow);\n  z-index: var(--b-time-picker-z-index-popup);\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(-4px);\n  transition:\n    opacity var(--b-time-picker-transition-duration) ease,\n    transform var(--b-time-picker-transition-duration) ease;\n}\n\n.b-time-picker__panel:popover-open {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n@starting-style {\n  .b-time-picker__panel:popover-open {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n/* ──── Columns ──── */\n.b-time-picker__columns {\n  display: flex;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.b-time-picker__column {\n  width: var(--b-time-picker-column-width);\n  height: var(--b-time-picker-column-height);\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-right: 1px solid #f0f0f0;\n  scroll-behavior: smooth;\n  scrollbar-width: thin;\n}\n\n.b-time-picker__column:last-child {\n  border-right: none;\n}\n\n/* ──── Cells ──── */\n.b-time-picker__cell {\n  height: var(--b-time-picker-cell-height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--b-time-picker-text-color);\n  transition: background var(--b-time-picker-transition-duration);\n  user-select: none;\n}\n\n.b-time-picker__cell:hover {\n  background: var(--b-time-picker-cell-hover-bg);\n}\n\n.b-time-picker__cell--selected {\n  background: var(--b-time-picker-cell-selected-bg);\n  font-weight: 600;\n}\n\n.b-time-picker__cell--focused {\n  outline: 2px solid var(--b-time-picker-active-border-color);\n  outline-offset: -2px;\n}\n\n.b-time-picker__cell--disabled {\n  color: var(--b-time-picker-cell-disabled-color);\n  background: var(--b-time-picker-cell-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-time-picker__cell--disabled:hover {\n  background: var(--b-time-picker-cell-disabled-bg);\n}\n\n/* ──── Footer ──── */\n.b-time-picker__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 8px;\n  background: var(--b-time-picker-footer-bg);\n}\n\n.b-time-picker__now-btn {\n  border: none;\n  background: none;\n  color: var(--b-time-picker-active-border-color);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__now-btn:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.b-time-picker__ok-btn {\n  border: none;\n  background: var(--b-time-picker-active-border-color);\n  color: #fff;\n  cursor: pointer;\n  font-size: 14px;\n  padding: 2px 12px;\n  border-radius: 4px;\n  font-weight: 500;\n  line-height: 1.5;\n  transition:\n    background var(--b-time-picker-transition-duration),\n    opacity var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__ok-btn:hover {\n  opacity: 0.85;\n}\n\n/* ──── Placement ──── */\n.b-time-picker--bottom-right .b-time-picker__panel {\n  left: unset;\n  right: anchor(right);\n}\n\n.b-time-picker--top-left .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n.b-time-picker--top-right .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  left: unset;\n  right: anchor(right);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n/* ──── Dark Mode ──── */\n[data-prefers-color='dark'] .b-time-picker {\n  --b-time-picker-bg: #141414;\n  --b-time-picker-hover-bg: #141414;\n  --b-time-picker-active-bg: #141414;\n  --b-time-picker-border-color: #424242;\n  --b-time-picker-hover-border-color: #165dff;\n  --b-time-picker-active-border-color: #1668dc;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n  --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n  --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-panel-bg: #1f1f1f;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-cell-selected-bg: #111a2c;\n  --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-footer-bg: #1f1f1f;\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-time-picker {\n    --b-time-picker-bg: #141414;\n    --b-time-picker-hover-bg: #141414;\n    --b-time-picker-active-bg: #141414;\n    --b-time-picker-border-color: #424242;\n    --b-time-picker-hover-border-color: #165dff;\n    --b-time-picker-active-border-color: #1668dc;\n    --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n    --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n    --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-panel-bg: #1f1f1f;\n    --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-cell-selected-bg: #111a2c;\n    --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n    --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-footer-bg: #1f1f1f;\n    --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n    --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n  }\n}\n\n/* ──── Reduced Motion ──── */\n@media (prefers-reduced-motion: reduce) {\n  .b-time-picker,\n  .b-time-picker * {\n    --b-time-picker-transition-duration: 0ms;\n    transition-duration: 0ms !important;\n    animation-duration: 0ms !important;\n  }\n\n  .b-time-picker__column {\n    scroll-behavior: auto;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system230.js","names":[],"sources":["../src/components/BTimePicker/BTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\n\nimport {\n  BTimePickerPlacement,\n  BTimePickerSize,\n  BTimePickerStatus,\n  BTimePickerVariant,\n  type BTimePickerDisabledTime,\n} from './types';\n\nconst {\n  size = BTimePickerSize.Medium,\n  variant = BTimePickerVariant.Outlined,\n  placeholder = 'Select time',\n  disabled = false,\n  inputReadOnly = false,\n  allowClear = true,\n  showNow = true,\n  use12Hours = false,\n  hourStep = 1,\n  minuteStep = 1,\n  secondStep = 1,\n  format,\n  placement: _placement = BTimePickerPlacement.BottomLeft,\n  status,\n  hideDisabledOptions = false,\n  needConfirm = true,\n  changeOnScroll = false,\n  showHour = true,\n  showMinute = true,\n  showSecond = true,\n  defaultOpen = false,\n  defaultValue,\n  open,\n  disabledTime,\n} = defineProps<{\n  /** Size of the input */\n  size?: `${BTimePickerSize}`;\n  /** Visual variant */\n  variant?: `${BTimePickerVariant}`;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Disable the picker */\n  disabled?: boolean;\n  /** Make input read-only (useful for touch devices) */\n  inputReadOnly?: boolean;\n  /** Show clear button */\n  allowClear?: boolean;\n  /** Show \"Now\" button in footer */\n  showNow?: boolean;\n  /** Use 12-hour format with AM/PM */\n  use12Hours?: boolean;\n  /** Hour selection step */\n  hourStep?: number;\n  /** Minute selection step */\n  minuteStep?: number;\n  /** Second selection step */\n  secondStep?: number;\n  /** Time format string (e.g. 'HH:mm:ss', 'hh:mm a') */\n  format?: string;\n  /** Popup placement */\n  placement?: `${BTimePickerPlacement}`;\n  /** Validation status */\n  status?: `${BTimePickerStatus}`;\n  /** Hide disabled time options from columns */\n  hideDisabledOptions?: boolean;\n  /** Require OK button confirmation before applying value */\n  needConfirm?: boolean;\n  /** Update value on scroll instead of click */\n  changeOnScroll?: boolean;\n  /** Show hour column */\n  showHour?: boolean;\n  /** Show minute column */\n  showMinute?: boolean;\n  /** Show second column */\n  showSecond?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Default value (uncontrolled) */\n  defaultValue?: Date;\n  /** Controlled open state */\n  open?: boolean;\n  /** Function returning disabled hours/minutes/seconds */\n  disabledTime?: () => BTimePickerDisabledTime;\n}>();\n\nconst model = defineModel<Date | null>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [time: Date | null, timeString: string];\n  openChange: [open: boolean];\n}>();\n\nconst inputEl = ref<HTMLInputElement | null>(null);\nconst panelEl = ref<HTMLElement | null>(null);\nconst hourColEl = ref<HTMLElement | null>(null);\nconst minuteColEl = ref<HTMLElement | null>(null);\nconst secondColEl = ref<HTMLElement | null>(null);\nconst ampmColEl = ref<HTMLElement | null>(null);\n\ndefineExpose({\n  focus: () => inputEl.value?.focus(),\n  blur: () => inputEl.value?.blur(),\n});\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-time-picker-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// State\n// ─────────────────────────────────────────────\nconst isOpen = ref(defaultOpen);\nconst isPanelOpen = ref(open !== undefined ? !!open : defaultOpen);\nconst internalValue = ref<Date | null>(defaultValue ?? null);\nconst pendingHour = ref<number | null>(null);\nconst pendingMinute = ref<number | null>(null);\nconst pendingSecond = ref<number | null>(null);\nconst pendingAmpm = ref<'AM' | 'PM' | null>(null);\nconst inputText = ref('');\nconst focusedColumn = ref<'hour' | 'minute' | 'second' | 'ampm'>('hour');\n\nconst selectedTime = computed({\n  get: () => model.value ?? internalValue.value,\n  set: (val) => {\n    internalValue.value = val;\n    model.value = val;\n  },\n});\n\n// ─────────────────────────────────────────────\n// Format\n// ─────────────────────────────────────────────\nconst activeFormat = computed(() => {\n  if (format) return format;\n  const parts: string[] = [];\n  if (showHour) parts.push(use12Hours ? 'hh' : 'HH');\n  if (showMinute) parts.push('mm');\n  if (showSecond) parts.push('ss');\n  const base = parts.join(':');\n  return use12Hours ? `${base} A` : base;\n});\n\nfunction pad(n: number): string {\n  return String(n).padStart(2, '0');\n}\n\nfunction formatTime(d: Date | null): string {\n  if (!d) return '';\n  const h = d.getHours();\n  const m = d.getMinutes();\n  const s = d.getSeconds();\n  const ampm = h >= 12 ? 'PM' : 'AM';\n\n  let result = activeFormat.value;\n  if (use12Hours) {\n    const h12 = h % 12 || 12;\n    result = result.replace('hh', pad(h12));\n    result = result.replace('h', String(h12));\n    result = result.replace('A', ampm);\n    result = result.replace('a', ampm.toLowerCase());\n  } else {\n    result = result.replace('HH', pad(h));\n    result = result.replace('H', String(h));\n  }\n  result = result.replace('mm', pad(m));\n  result = result.replace('ss', pad(s));\n  return result;\n}\n\nfunction parseTimeString(str: string): Date | null {\n  if (!str.trim()) return null;\n  const timeRegex12 = /(\\d{1,2}):(\\d{2})(?::(\\d{2}))?\\s*(AM|PM|am|pm)?/;\n  const match = str.match(timeRegex12);\n  if (!match) return null;\n\n  let h = parseInt(match[1], 10);\n  const m = parseInt(match[2], 10);\n  const s = match[3] ? parseInt(match[3], 10) : 0;\n  const period = match[4]?.toUpperCase();\n\n  if (use12Hours && period) {\n    if (period === 'PM' && h < 12) h += 12;\n    if (period === 'AM' && h === 12) h = 0;\n  }\n\n  if (h < 0 || h > 23 || m < 0 || m > 59 || s < 0 || s > 59) return null;\n\n  const d = new Date();\n  d.setHours(h, m, s, 0);\n  return d;\n}\n\n// ─────────────────────────────────────────────\n// Disabled time logic\n// ─────────────────────────────────────────────\nconst disabledHours = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  return dt.disabledHours?.() ?? [];\n});\n\nconst disabledMinutes = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  return dt.disabledMinutes?.(h) ?? [];\n});\n\nconst disabledSeconds = computed<number[]>(() => {\n  if (!disabledTime) return [];\n  const dt = disabledTime();\n  const h = pendingHour.value ?? selectedTime.value?.getHours() ?? 0;\n  const m = pendingMinute.value ?? selectedTime.value?.getMinutes() ?? 0;\n  return dt.disabledSeconds?.(h, m) ?? [];\n});\n\n// ─────────────────────────────────────────────\n// Column data\n// ─────────────────────────────────────────────\nconst hours = computed(() => {\n  const list: number[] = [];\n  if (use12Hours) {\n    for (let i = 1; i <= 12; i += hourStep) list.push(i);\n  } else {\n    for (let i = 0; i < 24; i += hourStep) list.push(i);\n  }\n  if (hideDisabledOptions) {\n    return list.filter((h) => !disabledHours.value.includes(use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h));\n  }\n  return list;\n});\n\nconst minutes = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += minuteStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((m) => !disabledMinutes.value.includes(m));\n  }\n  return list;\n});\n\nconst seconds = computed(() => {\n  const list: number[] = [];\n  for (let i = 0; i < 60; i += secondStep) list.push(i);\n  if (hideDisabledOptions) {\n    return list.filter((s) => !disabledSeconds.value.includes(s));\n  }\n  return list;\n});\n\nfunction to24Hour(h12: number, period: 'AM' | 'PM'): number {\n  if (period === 'AM') return h12 === 12 ? 0 : h12;\n  return h12 === 12 ? 12 : h12 + 12;\n}\n\nfunction to12Hour(h24: number): { hour: number; period: 'AM' | 'PM' } {\n  const period: 'AM' | 'PM' = h24 >= 12 ? 'PM' : 'AM';\n  const hour = h24 % 12 || 12;\n  return { hour, period };\n}\n\n// ─────────────────────────────────────────────\n// Panel open/close\n// ─────────────────────────────────────────────\nfunction openPanel() {\n  if (disabled) return;\n  isOpen.value = true;\n  isPanelOpen.value = true;\n  emit('openChange', true);\n  panelEl.value?.showPopover?.();\n  syncPendingFromValue();\n  nextTick(() => scrollToSelected());\n}\n\nfunction closePanel() {\n  isOpen.value = false;\n  isPanelOpen.value = false;\n  emit('openChange', false);\n  panelEl.value?.hidePopover?.();\n  inputEl.value?.focus();\n}\n\nfunction togglePanel() {\n  if (isPanelOpen.value) closePanel();\n  else openPanel();\n}\n\nfunction handlePopoverToggle(e: Event) {\n  const toggleEvent = e as ToggleEvent;\n  const nowOpen = toggleEvent.newState === 'open';\n  isOpen.value = nowOpen;\n  isPanelOpen.value = nowOpen;\n  if (!nowOpen) emit('openChange', false);\n}\n\n// ─────────────────────────────────────────────\n// Sync pending state\n// ─────────────────────────────────────────────\nfunction syncPendingFromValue() {\n  const t = selectedTime.value;\n  if (t) {\n    if (use12Hours) {\n      const { hour, period } = to12Hour(t.getHours());\n      pendingHour.value = hour;\n      pendingAmpm.value = period;\n    } else {\n      pendingHour.value = t.getHours();\n    }\n    pendingMinute.value = t.getMinutes();\n    pendingSecond.value = t.getSeconds();\n  } else {\n    pendingHour.value = null;\n    pendingMinute.value = null;\n    pendingSecond.value = null;\n    pendingAmpm.value = null;\n  }\n}\n\n// ─────────────────────────────────────────────\n// Selection\n// ─────────────────────────────────────────────\nfunction selectHour(h: number) {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  if (disabledHours.value.includes(h24)) return;\n  pendingHour.value = h;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectMinute(m: number) {\n  if (disabledMinutes.value.includes(m)) return;\n  pendingMinute.value = m;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectSecond(s: number) {\n  if (disabledSeconds.value.includes(s)) return;\n  pendingSecond.value = s;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction selectAmpm(val: 'AM' | 'PM') {\n  pendingAmpm.value = val;\n  if (!needConfirm && !changeOnScroll) applyPendingIfComplete();\n  else if (changeOnScroll) applyPending();\n}\n\nfunction applyPendingIfComplete() {\n  if (pendingHour.value !== null && pendingMinute.value !== null) {\n    if (showSecond && pendingSecond.value === null) return;\n    if (use12Hours && pendingAmpm.value === null) return;\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction applyPending() {\n  const h = pendingHour.value ?? 0;\n  const m = pendingMinute.value ?? 0;\n  const s = pendingSecond.value ?? 0;\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n\n  const d = new Date();\n  d.setHours(h24, m, s, 0);\n  selectedTime.value = d;\n  inputText.value = formatTime(d);\n  emit('change', d, formatTime(d));\n}\n\nfunction handleOk() {\n  applyPending();\n  closePanel();\n}\n\nfunction handleNow() {\n  const now = new Date();\n  if (use12Hours) {\n    const { hour, period } = to12Hour(now.getHours());\n    pendingHour.value = hour;\n    pendingAmpm.value = period;\n  } else {\n    pendingHour.value = now.getHours();\n  }\n  pendingMinute.value = now.getMinutes();\n  pendingSecond.value = now.getSeconds();\n  nextTick(() => scrollToSelected());\n  if (!needConfirm) {\n    applyPending();\n    closePanel();\n  }\n}\n\nfunction handleClear(e: Event) {\n  e.stopPropagation();\n  selectedTime.value = null;\n  inputText.value = '';\n  pendingHour.value = null;\n  pendingMinute.value = null;\n  pendingSecond.value = null;\n  pendingAmpm.value = null;\n  emit('change', null, '');\n}\n\n// ─────────────────────────────────────────────\n// Input handling\n// ─────────────────────────────────────────────\nfunction handleInputChange(e: Event) {\n  const val = (e.target as HTMLInputElement).value;\n  inputText.value = val;\n}\n\nfunction handleInputBlur() {\n  if (!isPanelOpen.value) {\n    const parsed = parseTimeString(inputText.value);\n    if (parsed) {\n      selectedTime.value = parsed;\n      inputText.value = formatTime(parsed);\n      emit('change', parsed, formatTime(parsed));\n    } else if (inputText.value === '') {\n      selectedTime.value = null;\n      emit('change', null, '');\n    } else {\n      inputText.value = formatTime(selectedTime.value);\n    }\n  }\n}\n\nfunction handleInputKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter' || e.key === ' ') {\n    if (!isPanelOpen.value) {\n      e.preventDefault();\n      openPanel();\n    } else if (e.key === 'Enter') {\n      e.preventDefault();\n      const parsed = parseTimeString(inputText.value);\n      if (parsed) {\n        selectedTime.value = parsed;\n        inputText.value = formatTime(parsed);\n        emit('change', parsed, formatTime(parsed));\n      }\n      closePanel();\n    }\n  } else if (e.key === 'Escape') {\n    if (isPanelOpen.value) {\n      e.preventDefault();\n      closePanel();\n    }\n  }\n}\n\n// ─────────────────────────────────────────────\n// Panel keyboard navigation\n// ─────────────────────────────────────────────\nfunction handlePanelKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    closePanel();\n    return;\n  }\n\n  if (e.key === 'Tab') {\n    const columns: ('hour' | 'minute' | 'second' | 'ampm')[] = [];\n    if (showHour) columns.push('hour');\n    if (showMinute) columns.push('minute');\n    if (showSecond) columns.push('second');\n    if (use12Hours) columns.push('ampm');\n\n    const idx = columns.indexOf(focusedColumn.value);\n    if (e.shiftKey) {\n      if (idx > 0) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx - 1];\n      }\n    } else {\n      if (idx < columns.length - 1) {\n        e.preventDefault();\n        focusedColumn.value = columns[idx + 1];\n      }\n    }\n    return;\n  }\n\n  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n    e.preventDefault();\n    const delta = e.key === 'ArrowUp' ? -1 : 1;\n    adjustFocusedColumn(delta);\n    return;\n  }\n\n  if (e.key === 'Enter') {\n    e.preventDefault();\n    handleOk();\n  }\n}\n\nfunction adjustFocusedColumn(delta: number) {\n  if (focusedColumn.value === 'hour') {\n    const list = hours.value;\n    const current = pendingHour.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectHour(next);\n    scrollColumnTo(hourColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'minute') {\n    const list = minutes.value;\n    const current = pendingMinute.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectMinute(next);\n    scrollColumnTo(minuteColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'second') {\n    const list = seconds.value;\n    const current = pendingSecond.value ?? list[0];\n    const idx = list.indexOf(current);\n    const next = list[Math.max(0, Math.min(list.length - 1, idx + delta))];\n    selectSecond(next);\n    scrollColumnTo(secondColEl.value, list.indexOf(next));\n  } else if (focusedColumn.value === 'ampm') {\n    const val = pendingAmpm.value === 'AM' ? 'PM' : 'AM';\n    selectAmpm(val);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Scroll helpers\n// ─────────────────────────────────────────────\nfunction scrollColumnTo(col: HTMLElement | null, idx: number) {\n  if (!col || !col.scrollTo) return;\n  const cellHeight = 28;\n  col.scrollTo({ top: idx * cellHeight, behavior: 'smooth' });\n}\n\nfunction scrollToSelected() {\n  if (pendingHour.value !== null) {\n    const idx = hours.value.indexOf(pendingHour.value);\n    if (idx >= 0) scrollColumnTo(hourColEl.value, idx);\n  }\n  if (pendingMinute.value !== null) {\n    const idx = minutes.value.indexOf(pendingMinute.value);\n    if (idx >= 0) scrollColumnTo(minuteColEl.value, idx);\n  }\n  if (pendingSecond.value !== null && showSecond) {\n    const idx = seconds.value.indexOf(pendingSecond.value);\n    if (idx >= 0) scrollColumnTo(secondColEl.value, idx);\n  }\n  if (pendingAmpm.value && use12Hours) {\n    const idx = pendingAmpm.value === 'AM' ? 0 : 1;\n    scrollColumnTo(ampmColEl.value, idx);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Click outside\n// ─────────────────────────────────────────────\nfunction handleClickOutside(e: MouseEvent) {\n  if (!isPanelOpen.value) return;\n  const target = e.target as Node;\n  if (panelEl.value?.contains(target)) return;\n  if (inputEl.value?.parentElement?.contains(target)) return;\n  closePanel();\n}\n\nonMounted(() => {\n  document.addEventListener('mousedown', handleClickOutside);\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('mousedown', handleClickOutside);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  () => open,\n  (val) => {\n    if (val !== undefined) {\n      if (val) openPanel();\n      else closePanel();\n    }\n  },\n);\n\nwatch(selectedTime, (val) => {\n  inputText.value = formatTime(val);\n});\n\n// Init display\ninputText.value = formatTime(selectedTime.value);\n\n// ─────────────────────────────────────────────\n// Computed classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-time-picker',\n  `b-time-picker--${size}`,\n  `b-time-picker--${variant}`,\n  {\n    'b-time-picker--disabled': disabled,\n    'b-time-picker--open': isPanelOpen.value,\n    [`b-time-picker--${status}`]: !!status,\n  },\n]);\n\nconst isHourDisabled = (h: number) => {\n  const h24 = use12Hours ? to24Hour(h, pendingAmpm.value ?? 'AM') : h;\n  return disabledHours.value.includes(h24);\n};\nconst isMinuteDisabled = (m: number) => disabledMinutes.value.includes(m);\nconst isSecondDisabled = (s: number) => disabledSeconds.value.includes(s);\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <div\n      class=\"b-time-picker__input-wrap\"\n      :style=\"{ anchorName }\"\n      @click=\"togglePanel\"\n    >\n      <input\n        :id=\"`b-time-picker-input-${componentUID}`\"\n        ref=\"inputEl\"\n        class=\"b-time-picker__input\"\n        type=\"text\"\n        role=\"combobox\"\n        :aria-expanded=\"isPanelOpen\"\n        aria-haspopup=\"dialog\"\n        :aria-controls=\"isPanelOpen ? `b-time-picker-panel-${componentUID}` : undefined\"\n        :aria-describedby=\"status ? `b-time-picker-status-${componentUID}` : undefined\"\n        :aria-label=\"placeholder\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"inputReadOnly\"\n        :value=\"inputText\"\n        autocomplete=\"off\"\n        @input=\"handleInputChange\"\n        @blur=\"handleInputBlur\"\n        @keydown=\"handleInputKeydown\"\n      />\n      <span class=\"b-time-picker__suffix\">\n        <svg\n          v-if=\"!allowClear || !selectedTime\"\n          class=\"b-time-picker__icon\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"10\" />\n          <polyline points=\"12 6 12 12 16 14\" />\n        </svg>\n        <button\n          v-else\n          class=\"b-time-picker__clear\"\n          type=\"button\"\n          aria-label=\"Clear time\"\n          tabindex=\"-1\"\n          @click=\"handleClear\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\" />\n            <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\" />\n          </svg>\n        </button>\n      </span>\n      <span\n        v-if=\"status\"\n        :id=\"`b-time-picker-status-${componentUID}`\"\n        class=\"b-time-picker__status-text\"\n        aria-live=\"polite\"\n      >\n        {{ status }}\n      </span>\n    </div>\n\n    <div\n      :id=\"`b-time-picker-panel-${componentUID}`\"\n      ref=\"panelEl\"\n      class=\"b-time-picker__panel\"\n      popover\n      role=\"dialog\"\n      :aria-label=\"'Time picker'\"\n      :aria-modal=\"true\"\n      :style=\"{ positionAnchor: anchorName }\"\n      @toggle=\"handlePopoverToggle\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <div class=\"b-time-picker__columns\" role=\"group\" aria-label=\"Time selection columns\">\n        <!-- Hour Column -->\n        <div\n          v-if=\"showHour\"\n          ref=\"hourColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Hours'\"\n          :aria-activedescendant=\"pendingHour !== null ? `b-time-picker-hour-${pendingHour}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"h in hours\"\n            :id=\"`b-time-picker-hour-${h}-${componentUID}`\"\n            :key=\"h\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingHour === h,\n              'b-time-picker__cell--disabled': isHourDisabled(h),\n              'b-time-picker__cell--focused': focusedColumn === 'hour' && pendingHour === h,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingHour === h\"\n            :aria-disabled=\"isHourDisabled(h)\"\n            @click=\"selectHour(h)\"\n          >\n            {{ pad(h) }}\n          </div>\n        </div>\n\n        <!-- Minute Column -->\n        <div\n          v-if=\"showMinute\"\n          ref=\"minuteColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Minutes'\"\n          :aria-activedescendant=\"pendingMinute !== null ? `b-time-picker-minute-${pendingMinute}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"m in minutes\"\n            :id=\"`b-time-picker-minute-${m}-${componentUID}`\"\n            :key=\"m\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingMinute === m,\n              'b-time-picker__cell--disabled': isMinuteDisabled(m),\n              'b-time-picker__cell--focused': focusedColumn === 'minute' && pendingMinute === m,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingMinute === m\"\n            :aria-disabled=\"isMinuteDisabled(m)\"\n            @click=\"selectMinute(m)\"\n          >\n            {{ pad(m) }}\n          </div>\n        </div>\n\n        <!-- Second Column -->\n        <div\n          v-if=\"showSecond\"\n          ref=\"secondColEl\"\n          class=\"b-time-picker__column\"\n          role=\"listbox\"\n          :aria-label=\"'Seconds'\"\n          :aria-activedescendant=\"pendingSecond !== null ? `b-time-picker-second-${pendingSecond}-${componentUID}` : undefined\"\n        >\n          <div\n            v-for=\"s in seconds\"\n            :id=\"`b-time-picker-second-${s}-${componentUID}`\"\n            :key=\"s\"\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingSecond === s,\n              'b-time-picker__cell--disabled': isSecondDisabled(s),\n              'b-time-picker__cell--focused': focusedColumn === 'second' && pendingSecond === s,\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingSecond === s\"\n            :aria-disabled=\"isSecondDisabled(s)\"\n            @click=\"selectSecond(s)\"\n          >\n            {{ pad(s) }}\n          </div>\n        </div>\n\n        <!-- AM/PM Column -->\n        <div\n          v-if=\"use12Hours\"\n          ref=\"ampmColEl\"\n          class=\"b-time-picker__column b-time-picker__column--ampm\"\n          role=\"listbox\"\n          aria-label=\"AM/PM\"\n        >\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'AM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'AM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'AM'\"\n            @click=\"selectAmpm('AM')\"\n          >\n            AM\n          </div>\n          <div\n            class=\"b-time-picker__cell\"\n            :class=\"{\n              'b-time-picker__cell--selected': pendingAmpm === 'PM',\n              'b-time-picker__cell--focused': focusedColumn === 'ampm' && pendingAmpm === 'PM',\n            }\"\n            role=\"option\"\n            :aria-selected=\"pendingAmpm === 'PM'\"\n            @click=\"selectAmpm('PM')\"\n          >\n            PM\n          </div>\n        </div>\n      </div>\n\n      <div v-if=\"needConfirm || showNow\" class=\"b-time-picker__footer\">\n        <button\n          v-if=\"showNow\"\n          class=\"b-time-picker__now-btn\"\n          type=\"button\"\n          @click=\"handleNow\"\n        >\n          Now\n        </button>\n        <button\n          v-if=\"needConfirm\"\n          class=\"b-time-picker__ok-btn\"\n          type=\"button\"\n          @click=\"handleOk\"\n        >\n          OK\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.b-time-picker {\n  --b-time-picker-input-font-size: 14px;\n  --b-time-picker-input-font-size-lg: 16px;\n  --b-time-picker-input-font-size-sm: 14px;\n  --b-time-picker-padding-block: 4px;\n  --b-time-picker-padding-block-lg: 7px;\n  --b-time-picker-padding-block-sm: 0px;\n  --b-time-picker-padding-inline: 11px;\n  --b-time-picker-padding-inline-lg: 11px;\n  --b-time-picker-padding-inline-sm: 7px;\n  --b-time-picker-border-color: #d9d9d9;\n  --b-time-picker-hover-border-color: #4096ff;\n  --b-time-picker-active-border-color: #1677ff;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-time-picker-bg: #ffffff;\n  --b-time-picker-hover-bg: #ffffff;\n  --b-time-picker-active-bg: #ffffff;\n  --b-time-picker-text-color: rgba(0, 0, 0, 0.88);\n  --b-time-picker-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-icon-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-time-picker-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-panel-bg: #ffffff;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-time-picker-cell-height: 28px;\n  --b-time-picker-cell-width: 56px;\n  --b-time-picker-cell-hover-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-selected-bg: #e6f4ff;\n  --b-time-picker-cell-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-time-picker-column-height: 224px;\n  --b-time-picker-column-width: 56px;\n  --b-time-picker-footer-bg: #ffffff;\n  --b-time-picker-border-radius: 6px;\n  --b-time-picker-panel-border-radius: 8px;\n  --b-time-picker-transition-duration: 0.2s;\n  --b-time-picker-z-index-popup: 1050;\n\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  max-width: 200px;\n}\n\n/* ──── Input Wrap ──── */\n.b-time-picker__input-wrap {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  background: var(--b-time-picker-bg);\n  border: 1px solid var(--b-time-picker-border-color);\n  border-radius: var(--b-time-picker-border-radius);\n  padding: var(--b-time-picker-padding-block) var(--b-time-picker-padding-inline);\n  cursor: pointer;\n  transition:\n    border-color var(--b-time-picker-transition-duration),\n    box-shadow var(--b-time-picker-transition-duration),\n    background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__input-wrap:hover {\n  border-color: var(--b-time-picker-hover-border-color);\n  background: var(--b-time-picker-hover-bg);\n}\n\n.b-time-picker--open .b-time-picker__input-wrap {\n  border-color: var(--b-time-picker-active-border-color);\n  box-shadow: var(--b-time-picker-active-shadow);\n  background: var(--b-time-picker-active-bg);\n}\n\n/* ──── Size Variants ──── */\n.b-time-picker--sm .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-sm) var(--b-time-picker-padding-inline-sm);\n}\n\n.b-time-picker--sm .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-sm);\n}\n\n.b-time-picker--lg .b-time-picker__input-wrap {\n  padding: var(--b-time-picker-padding-block-lg) var(--b-time-picker-padding-inline-lg);\n}\n\n.b-time-picker--lg .b-time-picker__input {\n  font-size: var(--b-time-picker-input-font-size-lg);\n}\n\n/* ──── Variant Styles ──── */\n.b-time-picker--filled .b-time-picker__input-wrap {\n  background: rgba(0, 0, 0, 0.04);\n  border-color: transparent;\n}\n\n.b-time-picker--filled .b-time-picker__input-wrap:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.b-time-picker--borderless .b-time-picker__input-wrap {\n  border-color: transparent;\n  background: transparent;\n  box-shadow: none;\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap {\n  border-radius: 0;\n  border: none;\n  border-bottom: 1px solid var(--b-time-picker-border-color);\n}\n\n.b-time-picker--underlined .b-time-picker__input-wrap:hover {\n  border-bottom-color: var(--b-time-picker-hover-border-color);\n}\n\n.b-time-picker--underlined.b-time-picker--open .b-time-picker__input-wrap {\n  border-bottom-color: var(--b-time-picker-active-border-color);\n  box-shadow: none;\n}\n\n/* ──── Status ──── */\n.b-time-picker--error .b-time-picker__input-wrap {\n  border-color: #ff4d4f;\n}\n\n.b-time-picker--error.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-error-active-shadow);\n}\n\n.b-time-picker--warning .b-time-picker__input-wrap {\n  border-color: #faad14;\n}\n\n.b-time-picker--warning.b-time-picker--open .b-time-picker__input-wrap {\n  box-shadow: var(--b-time-picker-warning-active-shadow);\n}\n\n/* ──── Disabled ──── */\n.b-time-picker--disabled .b-time-picker__input-wrap {\n  background: var(--b-time-picker-disabled-bg);\n  border-color: var(--b-time-picker-border-color);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.b-time-picker--disabled .b-time-picker__input {\n  color: var(--b-time-picker-disabled-color);\n  cursor: not-allowed;\n}\n\n/* ──── Input ──── */\n.b-time-picker__input {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-size: var(--b-time-picker-input-font-size);\n  color: var(--b-time-picker-text-color);\n  line-height: 1.5;\n  padding: 0;\n  min-width: 0;\n}\n\n.b-time-picker__input::placeholder {\n  color: var(--b-time-picker-placeholder-color);\n}\n\n/* ──── Suffix / Icons ──── */\n.b-time-picker__suffix {\n  display: flex;\n  align-items: center;\n  margin-left: 4px;\n  flex-shrink: 0;\n}\n\n.b-time-picker__icon {\n  width: 14px;\n  height: 14px;\n  color: var(--b-time-picker-icon-color);\n}\n\n.b-time-picker__clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--b-time-picker-clear-color);\n  transition: color var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__clear:hover {\n  color: var(--b-time-picker-clear-hover-color);\n}\n\n.b-time-picker__clear svg {\n  width: 14px;\n  height: 14px;\n}\n\n.b-time-picker__status-text {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n}\n\n/* ──── Panel ──── */\n.b-time-picker__panel {\n  position: absolute;\n  position-anchor: var(--b-time-picker-anchor);\n  inset: unset;\n  top: anchor(bottom);\n  left: anchor(left);\n  margin: 0;\n  margin-top: 4px;\n  padding: 0;\n  border: none;\n  border-radius: var(--b-time-picker-panel-border-radius);\n  background: var(--b-time-picker-panel-bg);\n  box-shadow: var(--b-time-picker-panel-shadow);\n  z-index: var(--b-time-picker-z-index-popup);\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(-4px);\n  transition:\n    opacity var(--b-time-picker-transition-duration) ease,\n    transform var(--b-time-picker-transition-duration) ease;\n}\n\n.b-time-picker__panel:popover-open {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n@starting-style {\n  .b-time-picker__panel:popover-open {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n/* ──── Columns ──── */\n.b-time-picker__columns {\n  display: flex;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.b-time-picker__column {\n  width: var(--b-time-picker-column-width);\n  height: var(--b-time-picker-column-height);\n  overflow-y: auto;\n  overflow-x: hidden;\n  border-right: 1px solid #f0f0f0;\n  scroll-behavior: smooth;\n  scrollbar-width: thin;\n}\n\n.b-time-picker__column:last-child {\n  border-right: none;\n}\n\n/* ──── Cells ──── */\n.b-time-picker__cell {\n  height: var(--b-time-picker-cell-height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--b-time-picker-text-color);\n  transition: background var(--b-time-picker-transition-duration);\n  user-select: none;\n}\n\n.b-time-picker__cell:hover {\n  background: var(--b-time-picker-cell-hover-bg);\n}\n\n.b-time-picker__cell--selected {\n  background: var(--b-time-picker-cell-selected-bg);\n  font-weight: 600;\n}\n\n.b-time-picker__cell--focused {\n  outline: 2px solid var(--b-time-picker-active-border-color);\n  outline-offset: -2px;\n}\n\n.b-time-picker__cell--disabled {\n  color: var(--b-time-picker-cell-disabled-color);\n  background: var(--b-time-picker-cell-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-time-picker__cell--disabled:hover {\n  background: var(--b-time-picker-cell-disabled-bg);\n}\n\n/* ──── Footer ──── */\n.b-time-picker__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 8px;\n  background: var(--b-time-picker-footer-bg);\n}\n\n.b-time-picker__now-btn {\n  border: none;\n  background: none;\n  color: var(--b-time-picker-active-border-color);\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__now-btn:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n.b-time-picker__ok-btn {\n  border: none;\n  background: var(--b-time-picker-active-border-color);\n  color: #fff;\n  cursor: pointer;\n  font-size: 14px;\n  padding: 2px 12px;\n  border-radius: 4px;\n  font-weight: 500;\n  line-height: 1.5;\n  transition:\n    background var(--b-time-picker-transition-duration),\n    opacity var(--b-time-picker-transition-duration);\n}\n\n.b-time-picker__ok-btn:hover {\n  opacity: 0.85;\n}\n\n/* ──── Placement ──── */\n.b-time-picker--bottom-right .b-time-picker__panel {\n  left: unset;\n  right: anchor(right);\n}\n\n.b-time-picker--top-left .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n.b-time-picker--top-right .b-time-picker__panel {\n  top: unset;\n  bottom: anchor(top);\n  left: unset;\n  right: anchor(right);\n  margin-top: 0;\n  margin-bottom: 4px;\n}\n\n/* ──── Dark Mode ──── */\n[data-prefers-color='dark'] .b-time-picker {\n  --b-time-picker-bg: #141414;\n  --b-time-picker-hover-bg: #141414;\n  --b-time-picker-active-bg: #141414;\n  --b-time-picker-border-color: #424242;\n  --b-time-picker-hover-border-color: #165dff;\n  --b-time-picker-active-border-color: #1668dc;\n  --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n  --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n  --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n  --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-panel-bg: #1f1f1f;\n  --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n  --b-time-picker-cell-selected-bg: #111a2c;\n  --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n  --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-time-picker-footer-bg: #1f1f1f;\n  --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n  --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-time-picker {\n    --b-time-picker-bg: #141414;\n    --b-time-picker-hover-bg: #141414;\n    --b-time-picker-active-bg: #141414;\n    --b-time-picker-border-color: #424242;\n    --b-time-picker-hover-border-color: #165dff;\n    --b-time-picker-active-border-color: #1668dc;\n    --b-time-picker-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-time-picker-text-color: rgba(255, 255, 255, 0.85);\n    --b-time-picker-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-icon-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-color: rgba(255, 255, 255, 0.3);\n    --b-time-picker-clear-hover-color: rgba(255, 255, 255, 0.55);\n    --b-time-picker-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-panel-bg: #1f1f1f;\n    --b-time-picker-panel-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-time-picker-cell-hover-bg: rgba(255, 255, 255, 0.08);\n    --b-time-picker-cell-selected-bg: #111a2c;\n    --b-time-picker-cell-disabled-bg: rgba(255, 255, 255, 0.04);\n    --b-time-picker-cell-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-time-picker-footer-bg: #1f1f1f;\n    --b-time-picker-error-active-shadow: 0 0 0 2px rgba(220, 56, 72, 0.15);\n    --b-time-picker-warning-active-shadow: 0 0 0 2px rgba(217, 146, 0, 0.15);\n  }\n}\n\n/* ──── Reduced Motion ──── */\n@media (prefers-reduced-motion: reduce) {\n  .b-time-picker,\n  .b-time-picker * {\n    --b-time-picker-transition-duration: 0ms;\n    transition-duration: 0ms !important;\n    animation-duration: 0ms !important;\n  }\n\n  .b-time-picker__column {\n    scroll-behavior: auto;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system231.js

@@ -1,8 +1,6 @@
-import e from "./design-system229.js";
-/* empty css                 */
-//#region src/components/BTimeline/BTimeline.vue
-var t = e;
+//#region src/components/BTabs/types.ts
+var e = Symbol("BTabsContext");
 //#endregion
-export { t as default };
+export { e as BTabsContextKey };
 
 //# sourceMappingURL=design-system231.js.map

package/dist/design-system231.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system231.js","names":[],"sources":["../src/components/BTimeline/BTimeline.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide } from 'vue';\n\nimport type {\n  BTimelineItem,\n  BTimelineItemColor,\n  BTimelineItemPlacement,\n  BTimelineMode,\n  BTimelineOrientation,\n  BTimelineVariant,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  mode = 'start',\n  variant = 'filled',\n  orientation = 'vertical',\n  pending = false,\n  pendingDot,\n  reverse = false,\n  items,\n} = defineProps<{\n  /**\n   * Controls which side labels appear on.\n   * - `'start'`     - all content on the right of the line (default)\n   * - `'end'`       - all content on the left of the line\n   * - `'alternate'` - content alternates left/right\n   * @default 'start'\n   */\n  mode?: BTimelineMode;\n  /**\n   * Dot style.\n   * - `'filled'`   - solid filled circle (default)\n   * - `'outlined'` - hollow ring with colored border\n   * @default 'filled'\n   */\n  variant?: BTimelineVariant;\n  /**\n   * Layout direction.\n   * - `'vertical'`   - items stacked top-to-bottom (default)\n   * - `'horizontal'` - items laid out left-to-right\n   * @default 'vertical'\n   */\n  orientation?: BTimelineOrientation;\n  /**\n   * Whether to show a pending (ghost) item at the bottom.\n   * Pass `true` for the default spinner, or a string for custom content.\n   * @default false\n   */\n  pending?: boolean | string;\n  /**\n   * Custom dot for the pending item. Overridden by the `#pendingDot` slot.\n   */\n  pendingDot?: string;\n  /**\n   * Whether to reverse the order of items (newest first).\n   * @default false\n   */\n  reverse?: boolean;\n  /**\n   * Data-driven items. When provided, slot-based BTimelineItem children are\n   * ignored. Use this for simple, data-only timelines.\n   */\n  items?: BTimelineItem[];\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /**\n   * Default slot: place `<BTimelineItem>` children here.\n   * Ignored when `items` prop is provided.\n   */\n  default?(): unknown;\n  /** Custom dot for the pending ghost item. */\n  pendingDot?(): unknown;\n}>();\n\n// Provide mode to slot-based BTimelineItem children\nprovide('b-timeline-mode', mode);\nprovide('b-timeline-variant', variant);\n\n// ─────────────────────────────────────────────\n// Pending item helpers\n// ─────────────────────────────────────────────\nconst hasPending = computed(() => !!pending);\nconst pendingContent = computed(() => (pending !== true && pending ? pending : ''));\n\n// ─────────────────────────────────────────────\n// Reversed items (data-driven)\n// ─────────────────────────────────────────────\nconst orderedItems = computed<BTimelineItem[]>(() => {\n  if (!items) return [];\n  return reverse ? [...items].reverse() : items;\n});\n\n// ─────────────────────────────────────────────\n// CSS-var dot color helper\n// ─────────────────────────────────────────────\nconst PRESET_COLORS: BTimelineItemColor[] = ['blue', 'red', 'green', 'gray'];\n\nfunction isPresetColor(color?: BTimelineItemColor): boolean {\n  return !color || PRESET_COLORS.includes(color as string);\n}\n\nfunction dotColorStyle(color?: BTimelineItemColor): Record<string, string> | undefined {\n  if (!color || isPresetColor(color)) return undefined;\n  return { '--b-timeline-item-dot-color': color };\n}\n\nfunction dotColorClass(color?: BTimelineItemColor): string {\n  const c = color ?? 'blue';\n  return isPresetColor(c) ? `b-timeline-item--${c}` : 'b-timeline-item--custom';\n}\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-timeline',\n  `b-timeline--${mode}`,\n  `b-timeline--${variant}`,\n  `b-timeline--${orientation}`,\n  {\n    'b-timeline--pending': hasPending.value,\n    'b-timeline--reverse': reverse,\n  },\n]);\n\n// ─────────────────────────────────────────────\n// Item position helper\n// ─────────────────────────────────────────────\nfunction itemPositionClass(index: number, placement?: BTimelineItemPlacement): string {\n  // Per-item placement overrides the global mode\n  if (placement) {\n    return placement === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n  }\n  if (mode === 'alternate') {\n    return index % 2 === 0 ? 'b-timeline-item--left' : 'b-timeline-item--right';\n  }\n  return mode === 'end' ? 'b-timeline-item--right' : 'b-timeline-item--left';\n}\n</script>\n\n<template>\n  <ol :class=\"rootClasses\" aria-label=\"Timeline\">\n    <!-- ── Data-driven items ── -->\n    <template v-if=\"items && items.length\">\n      <li\n        v-for=\"(item, i) in orderedItems\"\n        :key=\"i\"\n        class=\"b-timeline-item\"\n        :class=\"[\n          dotColorClass(item.color),\n          itemPositionClass(i, item.placement),\n          { 'b-timeline-item--pending': item.loading },\n          item.className,\n        ]\"\n        :style=\"[\n          dotColorStyle(item.color),\n          typeof item.style === 'string' ? item.style : item.style,\n        ]\"\n      >\n        <!-- Label / title (opposing side) - always rendered as structural spacer; CSS hides in start mode -->\n        <span class=\"b-timeline-item__label\">{{ item.title ?? '' }}</span>\n\n        <!-- Line + dot -->\n        <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n        <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n          <template v-if=\"item.icon\">\n            <span class=\"b-timeline-item__dot--custom\" :data-icon=\"item.icon\" aria-hidden=\"true\" />\n          </template>\n          <template v-else-if=\"item.loading\">\n            <span class=\"b-timeline-item__dot--pending-spinner\" />\n          </template>\n          <template v-else>\n            <span class=\"b-timeline-item__dot\" />\n          </template>\n        </div>\n\n        <!-- Content -->\n        <div class=\"b-timeline-item__content\">{{ item.content }}</div>\n      </li>\n    </template>\n\n    <!-- ── Slot-based items (default slot children) ── -->\n    <template v-else>\n      <slot />\n    </template>\n\n    <!-- ── Pending ghost item ── -->\n    <li\n      v-if=\"hasPending\"\n      class=\"b-timeline-item b-timeline-item--pending\"\n      :class=\"[itemPositionClass(items ? orderedItems.length : 0)]\"\n      aria-label=\"Pending\"\n    >\n      <!-- Label spacer (structural; hidden in start mode via CSS) -->\n      <span class=\"b-timeline-item__label\" />\n      <div class=\"b-timeline-item__tail\" aria-hidden=\"true\" />\n      <div class=\"b-timeline-item__dot-wrapper\" aria-hidden=\"true\">\n        <slot name=\"pendingDot\">\n          <span\n            v-if=\"pendingDot\"\n            class=\"b-timeline-item__dot--custom\"\n            :data-icon=\"pendingDot\"\n            aria-hidden=\"true\"\n          />\n          <span v-else class=\"b-timeline-item__dot--pending-spinner\" aria-hidden=\"true\" />\n        </slot>\n      </div>\n      <div class=\"b-timeline-item__content\">{{ pendingContent }}</div>\n    </li>\n  </ol>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BTimeline - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-timeline {\n  /* ── Structural ── */\n  --b-timeline-line-width: 2px;\n  --b-timeline-line-color: oklch(90% 0.005 260);\n  --b-timeline-item-padding-bottom: 20px;\n\n  /* ── Dot ── */\n  --b-timeline-dot-size: 10px;\n  --b-timeline-dot-offset: 0px; /* fine-tune vertical alignment */\n  --b-timeline-dot-border-width: 2px;\n  --b-timeline-custom-dot-font-size: 20px; /* emoji / text custom dots */\n\n  /* ── Blue (default) ── */\n  --b-timeline-color-blue: oklch(54.6% 0.245 262.881);\n  /* ── Green ── */\n  --b-timeline-color-green: oklch(52% 0.17 145);\n  /* ── Red ── */\n  --b-timeline-color-red: oklch(50% 0.2 20);\n  /* ── Gray ── */\n  --b-timeline-color-gray: oklch(68% 0.01 260);\n\n  /* ── Content text ── */\n  --b-timeline-content-color: oklch(32% 0.02 260);\n  --b-timeline-content-font-size: 14px;\n\n  /* ── Label text ── */\n  --b-timeline-label-color: oklch(52% 0.01 260);\n  --b-timeline-label-font-size: 14px;\n\n  /* ── Pending ── */\n  --b-timeline-pending-line-style: dashed;\n  --b-timeline-pending-dot-color: oklch(70% 0.01 260);\n\n  /* ── Spinner ── */\n  --b-timeline-spinner-size: 14px;\n  --b-timeline-spinner-border-color: oklch(54.6% 0.245 262.881 / 20%);\n  --b-timeline-spinner-accent-color: oklch(54.6% 0.245 262.881);\n  --b-timeline-spinner-duration: 700ms;\n\n  /* ── Transition ── */\n  --b-timeline-transition-duration: 200ms;\n\n  /* ── Layout ── */\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--b-timeline-content-font-size);\n  line-height: 1.5;\n  color: var(--b-timeline-content-color);\n}\n\n/* ─────────────────────────────────────────────\n   Item\n   ───────────────────────────────────────────── */\n.b-timeline-item {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  padding-bottom: var(--b-timeline-item-padding-bottom);\n  margin: 0;\n  list-style: none;\n}\n\n/* last item - hide tail, collapse bottom padding */\n.b-timeline-item:last-child {\n  padding-bottom: 0;\n}\n\n.b-timeline-item:last-child .b-timeline-item__tail {\n  display: none;\n}\n\n/* ── Tail (vertical line) ── */\n.b-timeline-item__tail {\n  position: absolute;\n  top: calc(var(--b-timeline-dot-size) + 4px);\n  left: calc(\n    (var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2)\n  ); /* overridden per-mode */\n  height: calc(100% - var(--b-timeline-dot-size) - 4px);\n  width: var(--b-timeline-line-width);\n  background: var(--b-timeline-line-color);\n  transition: background var(--b-timeline-transition-duration);\n}\n\n/* ── Dot wrapper ── */\n.b-timeline-item__dot-wrapper {\n  position: relative;\n  flex-shrink: 0;\n  width: var(--b-timeline-dot-size);\n  height: var(--b-timeline-dot-size);\n  margin-top: var(--b-timeline-dot-offset);\n  z-index: 1;\n  overflow: visible;\n}\n\n/* ── Standard dot ── */\n.b-timeline-item__dot {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background: var(--b-timeline-item-current-color, var(--b-timeline-color-blue));\n  box-sizing: border-box;\n}\n\n/* ── Custom dot (icon / text) ── */\n.b-timeline-item__dot--custom {\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--b-timeline-custom-dot-font-size);\n  line-height: 1;\n  width: var(--b-timeline-custom-dot-font-size);\n  height: var(--b-timeline-custom-dot-font-size);\n  /* shift left/up so the icon stays centred over the dot position */\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--b-timeline-item-current-color, var(--b-timeline-color-blue));\n}\n\n/* Symbol rendered via ::before so no text node exists - avoids axe non-text-char rule */\n.b-timeline-item__dot--custom::before {\n  content: attr(data-icon);\n}\n\n/* ─────────────────────────────────────────────\n   Preset colors - set --b-timeline-item-current-color\n   ───────────────────────────────────────────── */\n.b-timeline-item--blue {\n  --b-timeline-item-current-color: var(--b-timeline-color-blue);\n}\n\n.b-timeline-item--green {\n  --b-timeline-item-current-color: var(--b-timeline-color-green);\n}\n\n.b-timeline-item--red {\n  --b-timeline-item-current-color: var(--b-timeline-color-red);\n}\n\n.b-timeline-item--gray {\n  --b-timeline-item-current-color: var(--b-timeline-color-gray);\n}\n\n/* Custom (non-preset) color: provided via inline var */\n.b-timeline-item--custom {\n  --b-timeline-item-current-color: var(--b-timeline-item-dot-color);\n}\n\n/* ─────────────────────────────────────────────\n   Content & Label\n   ───────────────────────────────────────────── */\n.b-timeline-item__content {\n  flex: 1;\n  padding-left: 12px;\n  color: var(--b-timeline-content-color);\n  font-size: var(--b-timeline-content-font-size);\n  word-break: break-word;\n}\n\n.b-timeline-item__label {\n  display: none; /* hidden in start mode; shown in alternate/end */\n  color: var(--b-timeline-label-color);\n  font-size: var(--b-timeline-label-font-size);\n  text-align: right;\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Mode: start (default) - content right of line\n   Each item: [dot] [content]\n   ───────────────────────────────────────────── */\n.b-timeline--start .b-timeline-item {\n  flex-direction: row;\n}\n\n.b-timeline--start .b-timeline-item__tail {\n  left: calc((var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2));\n}\n\n.b-timeline--start .b-timeline-item__label {\n  display: none;\n}\n\n/* ─────────────────────────────────────────────\n   Mode: end - content left of line\n   Each item: [content] [dot]\n   ───────────────────────────────────────────── */\n.b-timeline--end .b-timeline-item {\n  flex-direction: row-reverse;\n}\n\n.b-timeline--end .b-timeline-item__content {\n  padding-left: 0;\n  padding-right: 12px;\n  text-align: right;\n}\n\n.b-timeline--end .b-timeline-item__tail {\n  right: calc((var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2));\n  left: auto;\n}\n\n.b-timeline--end .b-timeline-item__label {\n  display: none;\n}\n\n/* ─────────────────────────────────────────────\n   Mode: alternate\n   Each row is always: [left-half][dot][right-half]\n   Left items  (even): left-half = label (right-aligned)\n                       right-half = content (left-aligned)\n   Right items (odd):  left-half = content (right-aligned)\n                       right-half = label (left-aligned)\n   We use CSS `order` to swap - never flex-direction:row-reverse,\n   which would flip the padding direction and break the gap.\n   ───────────────────────────────────────────── */\n\n/* Label: always rendered as a structural spacer; hidden in start mode */\n.b-timeline--alternate .b-timeline-item__label {\n  display: block;\n  /* Each half = 50% of the row minus half the dot width.\n     box-sizing:border-box means padding is included in this width,\n     so the dot centre lands exactly at 50% of the row. */\n  flex: 0 0 calc(50% - var(--b-timeline-dot-size) / 2);\n  box-sizing: border-box;\n  font-size: var(--b-timeline-label-font-size);\n  color: var(--b-timeline-label-color);\n  word-break: break-word;\n}\n\n/* Content: same symmetric half-width */\n.b-timeline--alternate .b-timeline-item__content {\n  flex: 0 0 calc(50% - var(--b-timeline-dot-size) / 2);\n  box-sizing: border-box;\n}\n\n/* Tail: always at exactly 50% of the row, regardless of which items have labels */\n.b-timeline--alternate .b-timeline-item__tail {\n  left: calc(50% - var(--b-timeline-line-width) / 2);\n  transform: none;\n}\n\n/* ── Left items (even): label LEFT → dot → content RIGHT ── */\n/* DOM order: label(1) tail(abs) dot(2) content(3) - already correct, no reordering needed */\n.b-timeline--alternate .b-timeline-item--left .b-timeline-item__label {\n  order: 1;\n  text-align: right;\n  padding-right: 12px;\n  padding-left: 0;\n}\n\n.b-timeline--alternate .b-timeline-item--left .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--alternate .b-timeline-item--left .b-timeline-item__content {\n  order: 3;\n  text-align: left;\n  padding-left: 12px;\n  padding-right: 0;\n}\n\n/* ── Right items (odd): content LEFT → dot → label RIGHT ── */\n/* Use `order` to pull content before dot, push label after dot */\n.b-timeline--alternate .b-timeline-item--right .b-timeline-item__content {\n  order: 1;\n  text-align: right;\n  padding-right: 12px;\n  padding-left: 0;\n}\n\n.b-timeline--alternate .b-timeline-item--right .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--alternate .b-timeline-item--right .b-timeline-item__label {\n  order: 3;\n  text-align: left;\n  padding-left: 12px;\n  padding-right: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Variant: outlined - hollow ring dot\n   ───────────────────────────────────────────── */\n.b-timeline--outlined .b-timeline-item__dot {\n  background: transparent;\n  border: var(--b-timeline-dot-border-width) solid\n    var(--b-timeline-item-current-color, var(--b-timeline-color-blue));\n}\n\n/* ─────────────────────────────────────────────\n   Orientation: horizontal\n   Items laid out left-to-right; tail becomes a\n   horizontal bar running to the right.\n   ───────────────────────────────────────────── */\n.b-timeline--horizontal {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  overflow-x: auto;\n}\n\n.b-timeline--horizontal.b-timeline--start .b-timeline-item,\n.b-timeline--horizontal.b-timeline--end .b-timeline-item {\n  flex-direction: column;\n  align-items: center;\n  flex: 1;\n  padding-bottom: 0;\n  padding-right: 0;\n  min-width: 80px;\n}\n\n/* Horizontal tail: runs right from the dot */\n.b-timeline--horizontal .b-timeline-item__tail {\n  top: calc(var(--b-timeline-dot-size) / 2 - var(--b-timeline-line-width) / 2);\n  left: calc(var(--b-timeline-dot-size) + 4px);\n  width: calc(100% - var(--b-timeline-dot-size) - 4px);\n  height: var(--b-timeline-line-width);\n  right: auto;\n  bottom: auto;\n}\n\n/* In horizontal mode the last item still hides its tail */\n.b-timeline--horizontal .b-timeline-item:last-child .b-timeline-item__tail {\n  display: none;\n}\n\n/* Dot: centred horizontally above content */\n.b-timeline--horizontal .b-timeline-item__dot-wrapper {\n  margin-top: 0;\n  flex-shrink: 0;\n}\n\n/* Content sits below the dot row */\n.b-timeline--horizontal .b-timeline-item__content {\n  padding-left: 0;\n  padding-top: 8px;\n  text-align: center;\n  width: 100%;\n}\n\n/* Label sits above the dot row (for start mode) */\n.b-timeline--horizontal.b-timeline--start .b-timeline-item__label {\n  display: block;\n  text-align: center;\n  padding-bottom: 8px;\n  order: 1;\n}\n\n.b-timeline--horizontal.b-timeline--start .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--horizontal.b-timeline--start .b-timeline-item__content {\n  order: 3;\n}\n\n/* For end mode, label goes below content */\n.b-timeline--horizontal.b-timeline--end .b-timeline-item__content {\n  order: 1;\n  padding-top: 8px;\n  padding-right: 0;\n  text-align: center;\n}\n\n.b-timeline--horizontal.b-timeline--end .b-timeline-item__dot-wrapper {\n  order: 2;\n}\n\n.b-timeline--horizontal.b-timeline--end .b-timeline-item__label {\n  display: block;\n  text-align: center;\n  padding-top: 8px;\n  order: 3;\n}\n\n/* ─────────────────────────────────────────────\n   Pending item\n   ───────────────────────────────────────────── */\n.b-timeline-item--pending .b-timeline-item__tail {\n  border-left: var(--b-timeline-line-width) var(--b-timeline-pending-line-style)\n    var(--b-timeline-line-color);\n  background: transparent;\n}\n\n.b-timeline--start .b-timeline-item--pending .b-timeline-item__tail {\n  /* override the absolute left, matches .b-timeline--start logic */\n  left: calc((var(--b-timeline-dot-size) / 2) - (var(--b-timeline-line-width) / 2));\n}\n\n/* Horizontal pending tail */\n.b-timeline--horizontal .b-timeline-item--pending .b-timeline-item__tail {\n  border-left: none;\n  border-top: var(--b-timeline-line-width) var(--b-timeline-pending-line-style)\n    var(--b-timeline-line-color);\n  background: transparent;\n  height: 0;\n}\n\n/* ── Default pending spinner ── */\n.b-timeline-item__dot--pending-spinner {\n  display: block;\n  width: var(--b-timeline-spinner-size);\n  height: var(--b-timeline-spinner-size);\n  margin-left: calc((var(--b-timeline-dot-size) - var(--b-timeline-spinner-size)) / 2);\n  border-radius: 50%;\n  border: var(--b-timeline-dot-border-width) solid var(--b-timeline-spinner-border-color);\n  border-top-color: var(--b-timeline-spinner-accent-color);\n  animation: b-timeline-spin var(--b-timeline-spinner-duration) linear infinite;\n}\n\n@keyframes b-timeline-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-timeline {\n  --b-timeline-line-color: oklch(32% 0.012 260);\n  --b-timeline-content-color: oklch(82% 0.01 260);\n  --b-timeline-label-color: oklch(60% 0.01 260);\n  --b-timeline-color-gray: oklch(50% 0.01 260);\n  --b-timeline-spinner-border-color: oklch(54.6% 0.245 262.881 / 15%);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-timeline {\n    --b-timeline-line-color: oklch(32% 0.012 260);\n    --b-timeline-content-color: oklch(82% 0.01 260);\n    --b-timeline-label-color: oklch(60% 0.01 260);\n    --b-timeline-color-gray: oklch(50% 0.01 260);\n    --b-timeline-spinner-border-color: oklch(54.6% 0.245 262.881 / 15%);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-timeline {\n    --b-timeline-transition-duration: 0ms;\n    --b-timeline-spinner-duration: 0ms;\n  }\n\n  .b-timeline-item__dot--pending-spinner {\n    animation: none;\n    border-top-color: var(--b-timeline-spinner-border-color);\n    opacity: 0.6;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system231.js","names":[],"sources":["../src/components/BTabs/types.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, VNode } from 'vue';\n\nexport type BTabsType = 'line' | 'card' | 'editable-card';\nexport type BTabsPlacement = 'top' | 'bottom' | 'left' | 'right';\nexport type BTabsSize = 'small' | 'middle' | 'large';\n\nexport interface BTabItem {\n  /** Unique identifier for the tab. */\n  key: string;\n  /** Tab header text or VNode. */\n  label?: string | VNode;\n  /** Whether the tab is disabled. @default false */\n  disabled?: boolean;\n  /** Whether the close button is shown (editable-card only). @default true */\n  closable?: boolean;\n  /** Whether to destroy content when tab is hidden. @default false */\n  destroyOnHidden?: boolean;\n  /** Whether to force render content even when not active. @default false */\n  forceRender?: boolean;\n  /** Whether to keep this tab's component state alive when switching away. Overrides global keepAlive. */\n  keepAlive?: boolean;\n}\n\n// ─────────────────────────────────────────────\n// BTabPane registration (provide/inject)\n// ─────────────────────────────────────────────\n\nexport interface BTabPaneRegistration {\n  /** Unique key for this pane. */\n  key: string;\n  /** Tab label (text or VNode). */\n  label?: string | VNode;\n  /** Whether tab is disabled. */\n  disabled?: boolean;\n  /** Whether close button shows in editable-card mode. */\n  closable?: boolean;\n  /** Whether to destroy when hidden. */\n  destroyOnHidden?: boolean;\n  /** Whether to force render even when inactive. */\n  forceRender?: boolean;\n  /** Per-pane keepAlive override. */\n  keepAlive?: boolean;\n  /** Render function for the pane content (from BTabPane's default slot). */\n  renderContent: () => VNode[];\n  /** Optional render function for custom label (from BTabPane's tab slot). */\n  renderLabel?: () => VNode[];\n}\n\n// ─────────────────────────────────────────────\n// Context injected from BTabs to BTabPane children\n// ─────────────────────────────────────────────\n\nexport interface BTabsContext {\n  /** Currently active tab key. */\n  activeKey: ComputedRef<string>;\n  /** Tab type. */\n  type: ComputedRef<BTabsType>;\n  /** Tab size. */\n  size: ComputedRef<BTabsSize>;\n  /** Tab placement. */\n  placement: ComputedRef<BTabsPlacement>;\n  /** Global keepAlive setting. */\n  keepAlive: ComputedRef<boolean>;\n  /** Global destroyOnHidden setting. */\n  destroyOnHidden: ComputedRef<boolean>;\n  /** Register a pane. */\n  register: (pane: BTabPaneRegistration) => void;\n  /** Unregister a pane by key. */\n  unregister: (key: string) => void;\n  /** Update a registered pane's data (when props change reactively). */\n  update: (key: string, pane: BTabPaneRegistration) => void;\n}\n\nexport const BTabsContextKey: InjectionKey<BTabsContext> = Symbol('BTabsContext');\n"],"mappings":";AAyEA,IAAa,IAA8C,OAAO,eAAe"}