@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system251.js

@@ -1,8 +1,175 @@
-import e from "./design-system249.js";
-/* empty css                 */
-//#region src/components/BTour/BTour.vue
-var t = e;
+import { BCommonSize as e } from "./design-system3.js";
+import { useComponentId as t } from "./design-system10.js";
+import { BInputStatus as n, BInputVariant as r } from "./design-system116.js";
+import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, nextTick as d, normalizeClass as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useModel as y, useSlots as b, watch as x, withModifiers as S } from "vue";
+//#region src/components/BTextarea/BTextarea.vue?vue&type=script&setup=true&lang.ts
+var C = { class: "b-textarea__wrapper" }, w = {
+	key: 0,
+	class: "b-textarea__prefix",
+	"aria-hidden": "true"
+}, T = [
+	"id",
+	"value",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"rows",
+	"maxlength",
+	"aria-invalid",
+	"aria-describedby"
+], E = {
+	key: 1,
+	class: "b-textarea__clear-wrapper"
+}, D = {
+	key: 2,
+	class: "b-textarea__suffix",
+	"aria-hidden": "true"
+}, O = ["id"], k = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "BTextarea",
+	props: /* @__PURE__ */ l({
+		size: { default: () => e.Medium },
+		variant: { default: () => r.Outlined },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readOnly: {
+			type: Boolean,
+			default: !1
+		},
+		status: {},
+		placeholder: {},
+		maxLength: {},
+		id: {},
+		allowClear: {
+			type: Boolean,
+			default: !1
+		},
+		showCount: {
+			type: [Boolean, Function],
+			default: !1
+		},
+		rows: { default: 3 },
+		autosize: {
+			type: [Boolean, Object],
+			default: !1
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ l([
+		"change",
+		"pressEnter",
+		"clear",
+		"focus",
+		"blur"
+	], ["update:modelValue"]),
+	setup(e, { expose: r, emit: c }) {
+		let l = b(), k = c, A = y(e, "modelValue"), { componentUID: j } = t(), M = i(() => e.id ?? `b-textarea-${j.value}`), N = h(null), P = h(!1), F = i(() => !!l.prefix), I = i(() => !!l.suffix), L = i(() => e.autosize === !0), R = i(() => typeof e.autosize == "object" && e.autosize !== null), z = i(() => typeof e.autosize == "object" && e.autosize !== null ? {
+			minRows: e.autosize.minRows,
+			maxRows: e.autosize.maxRows
+		} : null), B = () => {
+			if (!R.value) return;
+			let e = N.value;
+			if (!e) return;
+			let t = z.value;
+			if (!t) return;
+			let n = window.getComputedStyle(e), r = parseFloat(n.lineHeight) || 20, i = parseFloat(n.paddingTop) || 0, a = parseFloat(n.paddingBottom) || 0, o = parseFloat(n.borderTopWidth) || 0, s = parseFloat(n.borderBottomWidth) || 0, c = i + a + o + s, l = r * t.minRows + c, u = r * t.maxRows + c;
+			e.style.height = "auto";
+			let d = Math.min(Math.max(e.scrollHeight, l), u);
+			e.style.height = `${d}px`, e.style.overflowY = e.scrollHeight > u ? "auto" : "hidden";
+		}, V = i(() => (A.value ?? "").length), H = i(() => !!e.showCount), U = i(() => {
+			let t = A.value ?? "", n = V.value;
+			return typeof e.showCount == "function" ? e.showCount({
+				value: t,
+				count: n,
+				maxLength: e.maxLength
+			}) : e.maxLength === void 0 ? `${n}` : `${n} / ${e.maxLength}`;
+		}), W = i(() => e.maxLength === void 0 ? !1 : V.value > e.maxLength), G = i(() => e.allowClear && !!A.value && !e.disabled && !e.readOnly), K = (e) => {
+			let t = e.target.value;
+			A.value = t, k("change", t, e), R.value && d(B);
+		}, q = (e) => {
+			e.key === "Enter" && !e.shiftKey && k("pressEnter", e);
+		}, J = (e) => {
+			P.value = !0, k("focus", e);
+		}, Y = (e) => {
+			P.value = !1, k("blur", e);
+		}, X = () => {
+			A.value = "", k("clear"), k("change", "", new Event("change")), N.value?.focus(), R.value && d(B);
+		};
+		return r({
+			focus: () => {
+				N.value?.focus();
+			},
+			blur: () => {
+				N.value?.blur();
+			},
+			select: () => {
+				N.value?.select();
+			}
+		}), p(() => {
+			R.value && B();
+		}), x(() => A.value, () => {
+			R.value && d(B);
+		}), (t, r) => (m(), o("span", { class: f(["b-textarea", [
+			`b-textarea--${e.size}`,
+			`b-textarea--${e.variant}`,
+			{
+				"b-textarea--focused": P.value,
+				"b-textarea--disabled": e.disabled,
+				"b-textarea--readonly": e.readOnly,
+				"b-textarea--error": e.status === v(n).Error,
+				"b-textarea--warning": e.status === v(n).Warning,
+				"b-textarea--autosize": L.value,
+				"b-textarea--over-count": W.value
+			}
+		]]) }, [s("span", C, [
+			F.value ? (m(), o("span", w, [g(t.$slots, "prefix")])) : a("", !0),
+			s("textarea", u(t.$attrs, {
+				id: M.value,
+				ref_key: "textareaRef",
+				ref: N,
+				value: A.value,
+				placeholder: e.placeholder,
+				disabled: e.disabled,
+				readonly: e.readOnly,
+				rows: e.rows,
+				maxlength: e.maxLength,
+				"aria-invalid": e.status === v(n).Error ? !0 : void 0,
+				"aria-describedby": H.value ? `${M.value}-count` : void 0,
+				class: "b-textarea__textarea",
+				onInput: K,
+				onKeydown: q,
+				onFocus: J,
+				onBlur: Y
+			}), null, 16, T),
+			G.value ? (m(), o("span", E, [s("button", {
+				type: "button",
+				class: "b-textarea__clear",
+				"aria-label": "Clear textarea",
+				tabindex: "-1",
+				onMousedown: S(X, ["prevent"])
+			}, [...r[0] ||= [s("svg", {
+				viewBox: "64 64 896 896",
+				width: "1em",
+				height: "1em",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [s("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" })], -1)]], 32)])) : a("", !0),
+			I.value ? (m(), o("span", D, [g(t.$slots, "suffix")])) : a("", !0),
+			H.value ? (m(), o("span", {
+				key: 3,
+				id: `${M.value}-count`,
+				class: f(["b-textarea__count", { "b-textarea__count--over": W.value }]),
+				"aria-live": "polite",
+				"aria-atomic": "true"
+			}, _(U.value), 11, O)) : a("", !0)
+		])], 2));
+	}
+});
 //#endregion
-export { t as default };
+export { k as default };
 
 //# sourceMappingURL=design-system251.js.map

package/dist/design-system251.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system251.js","names":[],"sources":["../src/components/BTour/BTour.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';\nimport {\n  BTourPlacement,\n  BTourType,\n  type BTourArrowOptions,\n  type BTourButtonProps,\n  type BTourGapOptions,\n  type BTourResolvedStep,\n  type BTourScrollIntoViewOptions,\n  type BTourStep,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  steps = [],\n  open = undefined,\n  current = undefined,\n  defaultCurrent = 0,\n  arrow = true,\n  placement = BTourPlacement.Bottom,\n  type = BTourType.Default,\n  mask = true,\n  gap = { offset: 6, radius: 2 },\n  zIndex = 1070,\n  keyboard = true,\n  scrollIntoViewOptions = true,\n  getPopupContainer: _getPopupContainer = undefined,\n  closeIcon = true,\n  disabledInteraction = false,\n} = defineProps<{\n  /** Array of step definition objects. */\n  steps?: BTourStep[];\n  /**\n   * Controlled open state. Pair with `current` and `onChange`/`onClose`.\n   * Omit to use uncontrolled mode.\n   */\n  open?: boolean;\n  /**\n   * Controlled current step index.\n   * Omit to use uncontrolled mode.\n   */\n  current?: number;\n  /** Initial step index in uncontrolled mode. @default 0 */\n  defaultCurrent?: number;\n  /** Show arrow on the popup. Pass `{ pointAtCenter: true }` to center it. */\n  arrow?: boolean | BTourArrowOptions;\n  /** Default placement for all steps (step-level overrides this). @default 'bottom' */\n  placement?: `${BTourPlacement}`;\n  /** Visual type variant. @default 'default' */\n  type?: `${BTourType}`;\n  /**\n   * Mask overlay. `false` disables, `true` uses defaults,\n   * or object `{ color, style }` for custom styling.\n   */\n  mask?: boolean | { style?: Record<string, string>; color?: string };\n  /** Gap between highlight box and target element. */\n  gap?: BTourGapOptions;\n  /** z-index of the tour popup and mask. @default 1070 */\n  zIndex?: number;\n  /** Enable keyboard navigation (ArrowLeft/Right, Escape). @default true */\n  keyboard?: boolean;\n  /** Scroll target into view. Pass options object or `false` to disable. */\n  scrollIntoViewOptions?: boolean | BTourScrollIntoViewOptions;\n  /** Container element for the tour popup. Defaults to `document.body`. */\n  getPopupContainer?: () => HTMLElement;\n  /** Custom close icon. `false` hides the close button. */\n  closeIcon?: boolean | string;\n  /** Disable pointer interaction on the highlighted region. @default false */\n  disabledInteraction?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the current step changes. */\n  (e: 'change', current: number): void;\n  /** Fired when the tour is closed (X button or Finish). */\n  (e: 'close', current: number): void;\n  /** Fires when open state changes (v-model:open). */\n  (e: 'update:open', value: boolean): void;\n  /** Fires when current step changes (v-model:current). */\n  (e: 'update:current', value: number): void;\n  /** Fired after the tour finishes (last step next). */\n  (e: 'finish'): void;\n}>();\n\ndefineSlots<{\n  /** Custom cover content for the tour step. */\n  cover?(): unknown;\n  /** Override indicator dots/numbers rendering. Receives `{ current, total }`. */\n  indicatorsRender?(props: { current: number; total: number }): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalOpen = ref(false);\nconst internalCurrent = ref(defaultCurrent);\n\nconst isControlledOpen = computed(() => open !== undefined);\nconst isControlledCurrent = computed(() => current !== undefined);\n\nconst isOpen = computed(() => (isControlledOpen.value ? open! : internalOpen.value));\nconst currentStep = computed(() => (isControlledCurrent.value ? current! : internalCurrent.value));\n\n// ─────────────────────────────────────────────\n// Derived step data\n// ─────────────────────────────────────────────\nconst totalSteps = computed(() => steps.length);\n\nconst resolvedSteps = computed<BTourResolvedStep[]>(() =>\n  steps.map((step, index) => {\n    let resolvedTarget: HTMLElement | null = null;\n    if (step.target) {\n      if (typeof step.target === 'string') {\n        resolvedTarget = document.querySelector<HTMLElement>(step.target);\n      } else if (typeof step.target === 'function') {\n        resolvedTarget = step.target();\n      } else {\n        resolvedTarget = step.target;\n      }\n    }\n    return { ...step, resolvedTarget, index };\n  }),\n);\n\nconst activeStep = computed<BTourResolvedStep | undefined>(\n  () => resolvedSteps.value[currentStep.value],\n);\n\n/** Effective placement for the current step (step overrides tour-level). */\nconst effectivePlacement = computed(() => activeStep.value?.placement ?? placement);\n\n/** Effective arrow config for the current step. */\nconst effectiveArrow = computed(() => activeStep.value?.arrow ?? arrow);\n\nconst showArrow = computed(() => effectiveArrow.value !== false);\n\nconst arrowPointAtCenter = computed(\n  () => typeof effectiveArrow.value === 'object' && effectiveArrow.value.pointAtCenter,\n);\n\n/** Effective type for the current step. */\nconst effectiveType = computed(() => activeStep.value?.type ?? type);\n\n/** Effective mask for the current step. */\nconst effectiveMask = computed(() => activeStep.value?.mask ?? mask);\n\nconst showMask = computed(() => effectiveMask.value !== false);\n\nconst maskColor = computed(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.color) {\n    return effectiveMask.value.color;\n  }\n  return undefined;\n});\n\n/** Whether to show the close button. */\nconst showCloseIcon = computed(() => {\n  const stepClose = activeStep.value?.closeIcon;\n  const val = stepClose !== undefined ? stepClose : closeIcon;\n  return val !== false;\n});\n\n// ─────────────────────────────────────────────\n// Highlight box (target element spotlight)\n// ─────────────────────────────────────────────\ninterface HighlightRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n  radius: number;\n}\n\nconst highlightRect = ref<HighlightRect | null>(null);\nconst popupStyle = ref<Record<string, string>>({});\n\nconst gapOffset = computed(() => {\n  const o = gap?.offset ?? 6;\n  return Array.isArray(o) ? o : [o, o];\n});\nconst gapRadius = computed(() => gap?.radius ?? 2);\n\nfunction updateHighlight() {\n  const step = activeStep.value;\n  if (!step || !isOpen.value) {\n    highlightRect.value = null;\n    popupStyle.value = {};\n    return;\n  }\n\n  const target = step.resolvedTarget;\n  if (!target) {\n    // Center the popup when no target\n    highlightRect.value = null;\n    popupStyle.value = {\n      position: 'fixed',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n    };\n    return;\n  }\n\n  const rect = target.getBoundingClientRect();\n  const [offsetV, offsetH] = gapOffset.value;\n  highlightRect.value = {\n    top: rect.top - offsetV,\n    left: rect.left - offsetH,\n    width: rect.width + offsetH * 2,\n    height: rect.height + offsetV * 2,\n    radius: gapRadius.value,\n  };\n\n  // Position the popup relative to the highlight\n  computePopupStyle(rect);\n}\n\nfunction computePopupStyle(rect: DOMRect) {\n  const GAP = 12;\n  const eff = effectivePlacement.value;\n  const style: Record<string, string> = { position: 'fixed' };\n  const [offsetV, offsetH] = gapOffset.value;\n\n  const top = rect.top - offsetV;\n  const bottom = rect.bottom + offsetV;\n  const left = rect.left - offsetH;\n  const right = rect.right + offsetH;\n  const midX = rect.left + rect.width / 2;\n  const midY = rect.top + rect.height / 2;\n\n  switch (eff) {\n    case BTourPlacement.Top:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.TopLeft:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.TopRight:\n      style.bottom = `${window.innerHeight - top + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Bottom:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n      break;\n    case BTourPlacement.BottomLeft:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${left}px`;\n      break;\n    case BTourPlacement.BottomRight:\n      style.top = `${bottom + GAP}px`;\n      style.right = `${window.innerWidth - right}px`;\n      break;\n    case BTourPlacement.Left:\n      style.top = `${midY}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.LeftTop:\n      style.top = `${top}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.LeftBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.right = `${window.innerWidth - left + GAP}px`;\n      break;\n    case BTourPlacement.Right:\n      style.top = `${midY}px`;\n      style.left = `${right + GAP}px`;\n      style.transform = 'translateY(-50%)';\n      break;\n    case BTourPlacement.RightTop:\n      style.top = `${top}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.RightBottom:\n      style.bottom = `${window.innerHeight - bottom}px`;\n      style.left = `${right + GAP}px`;\n      break;\n    case BTourPlacement.Center:\n      style.top = '50%';\n      style.left = '50%';\n      style.transform = 'translate(-50%, -50%)';\n      break;\n    default:\n      style.top = `${bottom + GAP}px`;\n      style.left = `${midX}px`;\n      style.transform = 'translateX(-50%)';\n  }\n\n  popupStyle.value = style;\n}\n\n// ─────────────────────────────────────────────\n// Arrow positioning class\n// ─────────────────────────────────────────────\nconst arrowClass = computed(() => {\n  if (!showArrow.value) return '';\n  const eff = effectivePlacement.value;\n\n  if (\n    [BTourPlacement.Bottom, BTourPlacement.BottomLeft, BTourPlacement.BottomRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--top';\n  }\n  if (\n    [BTourPlacement.Top, BTourPlacement.TopLeft, BTourPlacement.TopRight].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--bottom';\n  }\n  if (\n    [BTourPlacement.Right, BTourPlacement.RightTop, BTourPlacement.RightBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--left';\n  }\n  if (\n    [BTourPlacement.Left, BTourPlacement.LeftTop, BTourPlacement.LeftBottom].includes(\n      eff as BTourPlacement,\n    )\n  ) {\n    return 'b-tour__arrow--right';\n  }\n  return '';\n});\n\n// ─────────────────────────────────────────────\n// Open / close helpers\n// ─────────────────────────────────────────────\nfunction doClose() {\n  emit('close', currentStep.value);\n  if (isControlledOpen.value) {\n    emit('update:open', false);\n  } else {\n    internalOpen.value = false;\n  }\n}\n\nfunction setCurrentStep(step: number) {\n  emit('change', step);\n  if (isControlledCurrent.value) {\n    emit('update:current', step);\n  } else {\n    internalCurrent.value = step;\n  }\n}\n\nfunction goNext() {\n  if (currentStep.value >= totalSteps.value - 1) {\n    emit('finish');\n    doClose();\n    return;\n  }\n  setCurrentStep(currentStep.value + 1);\n}\n\nfunction goPrev() {\n  if (currentStep.value <= 0) return;\n  setCurrentStep(currentStep.value - 1);\n}\n\n// ─────────────────────────────────────────────\n// Scroll target into view\n// ─────────────────────────────────────────────\nfunction scrollIntoView(el: HTMLElement) {\n  const opt = activeStep.value?.scrollIntoViewOptions ?? scrollIntoViewOptions;\n  if (opt === false) return;\n  const options: ScrollIntoViewOptions =\n    typeof opt === 'object'\n      ? (opt as ScrollIntoViewOptions)\n      : { behavior: 'smooth', block: 'center', inline: 'nearest' };\n  el.scrollIntoView(options);\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocused: HTMLElement | null = null;\nconst popupRef = ref<HTMLDivElement | null>(null);\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusFirst() {\n  nextTick(() => {\n    if (!popupRef.value) return;\n    const first = popupRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popupRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(e: KeyboardEvent) {\n  if (e.key !== 'Tab' || !popupRef.value) return;\n  const focusable = Array.from(popupRef.value.querySelectorAll<HTMLElement>(focusableSelector));\n  if (focusable.length === 0) {\n    e.preventDefault();\n    return;\n  }\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n  if (e.shiftKey && document.activeElement === first) {\n    e.preventDefault();\n    last.focus();\n  } else if (!e.shiftKey && document.activeElement === last) {\n    e.preventDefault();\n    first.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(e: KeyboardEvent) {\n  if (!keyboard) return;\n  if (e.key === 'Escape') {\n    e.preventDefault();\n    doClose();\n  } else if (e.key === 'ArrowRight') {\n    e.preventDefault();\n    goNext();\n  } else if (e.key === 'ArrowLeft') {\n    e.preventDefault();\n    goPrev();\n  }\n  trapFocus(e);\n}\n\n// ─────────────────────────────────────────────\n// Resize / scroll → update highlight\n// ─────────────────────────────────────────────\nlet resizeObserver: ResizeObserver | null = null;\nlet targetObserver: ResizeObserver | null = null;\n\nfunction observeTarget(el: HTMLElement | null) {\n  targetObserver?.disconnect();\n  if (!el) return;\n  targetObserver = new ResizeObserver(updateHighlight);\n  targetObserver.observe(el);\n}\n\nfunction onScrollOrResize() {\n  if (isOpen.value) updateHighlight();\n}\n\nonMounted(() => {\n  resizeObserver = new ResizeObserver(onScrollOrResize);\n  resizeObserver.observe(document.documentElement);\n  window.addEventListener('scroll', onScrollOrResize, { passive: true });\n});\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect();\n  targetObserver?.disconnect();\n  window.removeEventListener('scroll', onScrollOrResize);\n});\n\n// ─────────────────────────────────────────────\n// Watchers\n// ─────────────────────────────────────────────\nwatch(\n  [isOpen, currentStep],\n  ([open]) => {\n    if (!open) {\n      highlightRect.value = null;\n      popupStyle.value = {};\n      targetObserver?.disconnect();\n      nextTick(() => previouslyFocused?.focus());\n      return;\n    }\n    const step = resolvedSteps.value[currentStep.value];\n    if (step?.resolvedTarget) {\n      scrollIntoView(step.resolvedTarget);\n      observeTarget(step.resolvedTarget);\n    }\n    nextTick(() => {\n      updateHighlight();\n      if (open) {\n        previouslyFocused = document.activeElement as HTMLElement | null;\n        focusFirst();\n      }\n    });\n  },\n  { immediate: true, flush: 'post' },\n);\n\n// ─────────────────────────────────────────────\n// SVG mask clip-path (spotlight cutout)\n// ─────────────────────────────────────────────\nconst maskId = `b-tour-mask-${Math.random().toString(36).slice(2, 9)}`;\n\nconst svgViewBox = computed(() => {\n  const vw = typeof window !== 'undefined' ? window.innerWidth : 1440;\n  const vh = typeof window !== 'undefined' ? window.innerHeight : 900;\n  return `0 0 ${vw} ${vh}`;\n});\n\nconst maskStyle = computed<Record<string, string>>(() => {\n  if (typeof effectiveMask.value === 'object' && effectiveMask.value.style) {\n    return effectiveMask.value.style;\n  }\n  return {};\n});\n\n// ─────────────────────────────────────────────\n// Cover image helpers\n// ─────────────────────────────────────────────\nconst hasCover = computed(() => Boolean(activeStep.value?.cover));\n\nfunction stripBtnProps(props: BTourButtonProps | undefined) {\n  if (!props) return {};\n  const { onClick: _onClick, children: _children, ...rest } = props;\n  return rest;\n}\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"b-tour-fade\">\n      <div\n        v-if=\"isOpen && totalSteps > 0\"\n        class=\"b-tour\"\n        :class=\"[`b-tour--${effectiveType}`]\"\n        :style=\"{ '--b-tour-z-index': String(zIndex) }\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"activeStep?.title\"\n      >\n        <!-- ── Mask overlay (SVG spotlight) ── -->\n        <svg\n          v-if=\"showMask\"\n          class=\"b-tour__mask\"\n          :style=\"[{ zIndex: zIndex - 1 }, maskStyle]\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          :viewBox=\"svgViewBox\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <defs>\n            <mask :id=\"maskId\">\n              <!-- White = visible (full viewport) -->\n              <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n              <!-- Black = transparent cutout (target spotlight) -->\n              <rect\n                v-if=\"highlightRect\"\n                :x=\"highlightRect.left\"\n                :y=\"highlightRect.top\"\n                :width=\"highlightRect.width\"\n                :height=\"highlightRect.height\"\n                :rx=\"highlightRect.radius\"\n                fill=\"black\"\n              />\n            </mask>\n          </defs>\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width=\"100%\"\n            height=\"100%\"\n            :fill=\"maskColor ?? 'var(--b-tour-mask-bg)'\"\n            :mask=\"`url(#${maskId})`\"\n            :style=\"{ pointerEvents: disabledInteraction ? 'all' : 'none' }\"\n          />\n        </svg>\n\n        <!-- ── Highlight border around target ── -->\n        <div\n          v-if=\"highlightRect\"\n          class=\"b-tour__spotlight\"\n          :style=\"{\n            top: `${highlightRect.top}px`,\n            left: `${highlightRect.left}px`,\n            width: `${highlightRect.width}px`,\n            height: `${highlightRect.height}px`,\n            borderRadius: `${highlightRect.radius}px`,\n            zIndex: zIndex - 1,\n            pointerEvents: disabledInteraction ? 'none' : 'auto',\n          }\"\n          aria-hidden=\"true\"\n        />\n\n        <!-- ── Popup card ── -->\n        <div\n          ref=\"popupRef\"\n          class=\"b-tour__popup\"\n          :class=\"[\n            `b-tour__popup--${effectivePlacement}`,\n            { 'b-tour__popup--no-arrow': !showArrow || !highlightRect },\n          ]\"\n          :style=\"[{ zIndex }, popupStyle]\"\n          tabindex=\"-1\"\n          @keydown=\"onKeydown\"\n        >\n          <!-- Arrow -->\n          <div\n            v-if=\"showArrow && highlightRect && arrowClass\"\n            class=\"b-tour__arrow\"\n            :class=\"[arrowClass, { 'b-tour__arrow--center': arrowPointAtCenter }]\"\n            aria-hidden=\"true\"\n          />\n\n          <!-- Cover media -->\n          <div v-if=\"hasCover\" class=\"b-tour__cover\">\n            <img\n              v-if=\"typeof activeStep?.cover === 'string'\"\n              :src=\"activeStep.cover\"\n              class=\"b-tour__cover-img\"\n              alt=\"\"\n              aria-hidden=\"true\"\n            />\n            <slot v-else name=\"cover\" />\n          </div>\n\n          <!-- Header -->\n          <div class=\"b-tour__header\">\n            <h4 class=\"b-tour__title\">\n              {{ activeStep?.title }}\n            </h4>\n\n            <!-- Close button -->\n            <button\n              v-if=\"showCloseIcon\"\n              type=\"button\"\n              class=\"b-tour__close\"\n              aria-label=\"Close tour\"\n              @click=\"doClose\"\n            >\n              <svg\n                v-if=\"\n                  closeIcon === true ||\n                  activeStep?.closeIcon === true ||\n                  activeStep?.closeIcon === undefined\n                \"\n                class=\"b-tour__close-icon\"\n                viewBox=\"0 0 24 24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path\n                  d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n                />\n              </svg>\n              <span v-else>{{ typeof closeIcon === 'string' ? closeIcon : '✕' }}</span>\n            </button>\n          </div>\n\n          <!-- Description -->\n          <div v-if=\"activeStep?.description\" class=\"b-tour__description\">\n            {{ activeStep.description }}\n          </div>\n\n          <!-- Footer -->\n          <div class=\"b-tour__footer\">\n            <!-- Indicators -->\n            <div class=\"b-tour__indicators\" aria-label=\"Step progress\">\n              <slot name=\"indicatorsRender\" :current=\"currentStep\" :total=\"totalSteps\">\n                <span\n                  v-for=\"(_, i) in steps\"\n                  :key=\"i\"\n                  class=\"b-tour__indicator\"\n                  :class=\"{ 'b-tour__indicator--active': i === currentStep }\"\n                  role=\"presentation\"\n                  :aria-current=\"i === currentStep ? 'step' : undefined\"\n                />\n              </slot>\n            </div>\n\n            <!-- Actions -->\n            <div class=\"b-tour__actions\">\n              <!-- Prev button -->\n              <button\n                v-if=\"currentStep > 0\"\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--prev\"\n                v-bind=\"stripBtnProps(activeStep?.prevButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.prevButtonProps?.onClick?.();\n                    goPrev();\n                  }\n                \"\n              >\n                {{ activeStep?.prevButtonProps?.children ?? 'Previous' }}\n              </button>\n\n              <!-- Next / Finish button -->\n              <button\n                type=\"button\"\n                class=\"b-tour__btn b-tour__btn--next\"\n                v-bind=\"stripBtnProps(activeStep?.nextButtonProps)\"\n                @click=\"\n                  () => {\n                    activeStep?.nextButtonProps?.onClick?.();\n                    goNext();\n                  }\n                \"\n              >\n                {{\n                  activeStep?.nextButtonProps?.children ??\n                  (currentStep >= totalSteps - 1 ? 'Finish' : 'Next')\n                }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   Design tokens - scoped to component root\n   (Never on :root - always on .b-tour)\n   ──────────────────────────────────────────── */\n.b-tour {\n  /* AntD token: zIndexPopup → 1070 */\n  --b-tour-z-index: 1070;\n\n  /* AntD token: closeBtnSize → 22px */\n  --b-tour-close-btn-size: 22px;\n\n  /* AntD token: primaryNextBtnHoverBg → rgb(240,240,240) */\n  --b-tour-primary-next-btn-hover-bg: rgb(240, 240, 240);\n\n  /* AntD token: primaryPrevBtnBg → rgba(255,255,255,0.15) */\n  --b-tour-primary-prev-btn-bg: rgba(255, 255, 255, 0.15);\n\n  /* Extended tokens for full component coverage */\n  --b-tour-popup-bg: #fff;\n  --b-tour-popup-color: oklch(25% 0 0);\n  --b-tour-popup-font-size: 0.875rem;\n  --b-tour-popup-line-height: 1.5;\n  --b-tour-popup-border-radius: 0.5rem;\n  --b-tour-popup-max-width: 320px;\n  --b-tour-popup-min-width: 220px;\n  --b-tour-popup-padding: 1rem;\n  --b-tour-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n\n  --b-tour-title-font-size: 1rem;\n  --b-tour-title-font-weight: 600;\n  --b-tour-title-color: oklch(15% 0 0);\n\n  --b-tour-description-color: oklch(35% 0 0);\n  --b-tour-description-font-size: 0.875rem;\n\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.45);\n\n  --b-tour-arrow-size: 10px;\n  --b-tour-arrow-bg: #fff;\n\n  --b-tour-indicator-size: 6px;\n  --b-tour-indicator-bg: oklch(80% 0 0);\n  --b-tour-indicator-active-bg: oklch(55% 0.169 237.323); /* primary */\n\n  --b-tour-btn-font-size: 0.875rem;\n  --b-tour-btn-border-radius: 0.375rem;\n  --b-tour-btn-padding: 0.25rem 0.75rem;\n\n  --b-tour-next-btn-bg: oklch(55% 0.169 237.323);\n  --b-tour-next-btn-color: #fff;\n  --b-tour-next-btn-hover-bg: oklch(48% 0.158 241.966);\n\n  --b-tour-prev-btn-bg: transparent;\n  --b-tour-prev-btn-color: oklch(35% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(80% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(96% 0 0);\n\n  --b-tour-close-color: oklch(55% 0 0);\n  --b-tour-close-hover-color: oklch(25% 0 0);\n\n  --b-tour-cover-border-radius: 0.5rem 0.5rem 0 0;\n\n  --b-tour-transition-duration: 250ms;\n\n  /* Primary type overrides */\n  --b-tour-primary-popup-bg: oklch(55% 0.169 237.323);\n  --b-tour-primary-title-color: #fff;\n  --b-tour-primary-description-color: rgba(255, 255, 255, 0.85);\n  --b-tour-primary-close-color: rgba(255, 255, 255, 0.75);\n  --b-tour-primary-close-hover-color: #fff;\n  --b-tour-primary-indicator-bg: rgba(255, 255, 255, 0.4);\n  --b-tour-primary-indicator-active-bg: #fff;\n  --b-tour-primary-arrow-bg: oklch(55% 0.169 237.323);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-tour {\n  --b-tour-popup-bg: oklch(22% 0 0);\n  --b-tour-popup-color: oklch(90% 0 0);\n  --b-tour-popup-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-tour-title-color: oklch(95% 0 0);\n  --b-tour-description-color: oklch(72% 0 0);\n  --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n  --b-tour-arrow-bg: oklch(22% 0 0);\n  --b-tour-indicator-bg: oklch(40% 0 0);\n  --b-tour-prev-btn-color: oklch(85% 0 0);\n  --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n  --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n  --b-tour-close-color: oklch(65% 0 0);\n  --b-tour-close-hover-color: oklch(90% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tour {\n    --b-tour-popup-bg: oklch(22% 0 0);\n    --b-tour-popup-color: oklch(90% 0 0);\n    --b-tour-popup-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-tour-title-color: oklch(95% 0 0);\n    --b-tour-description-color: oklch(72% 0 0);\n    --b-tour-mask-bg: rgba(0, 0, 0, 0.65);\n    --b-tour-arrow-bg: oklch(22% 0 0);\n    --b-tour-indicator-bg: oklch(40% 0 0);\n    --b-tour-prev-btn-color: oklch(85% 0 0);\n    --b-tour-prev-btn-border: 1px solid oklch(35% 0 0);\n    --b-tour-prev-btn-hover-bg: oklch(30% 0 0);\n    --b-tour-close-color: oklch(65% 0 0);\n    --b-tour-close-hover-color: oklch(90% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Tour container (fullscreen overlay wrapper)\n   ───────────────────────────────────────────── */\n.b-tour {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: var(--b-tour-z-index);\n}\n\n/* ─────────────────────────────────────────────\n   Mask (SVG spotlight overlay)\n   ───────────────────────────────────────────── */\n.b-tour__mask {\n  position: fixed;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n/* ─────────────────────────────────────────────\n   Spotlight border ring\n   ───────────────────────────────────────────── */\n.b-tour__spotlight {\n  position: fixed;\n  box-shadow: 0 0 0 9999px transparent;\n  box-sizing: border-box;\n  pointer-events: auto;\n}\n\n/* ─────────────────────────────────────────────\n   Popup card\n   ───────────────────────────────────────────── */\n.b-tour__popup {\n  position: fixed;\n  background: var(--b-tour-popup-bg);\n  color: var(--b-tour-popup-color);\n  font-size: var(--b-tour-popup-font-size);\n  line-height: var(--b-tour-popup-line-height);\n  border-radius: var(--b-tour-popup-border-radius);\n  box-shadow: var(--b-tour-popup-shadow);\n  max-width: var(--b-tour-popup-max-width);\n  min-width: var(--b-tour-popup-min-width);\n  width: max-content;\n  box-sizing: border-box;\n  pointer-events: auto;\n  outline: none;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-tour__arrow {\n  position: absolute;\n  width: var(--b-tour-arrow-size);\n  height: var(--b-tour-arrow-size);\n  background: var(--b-tour-arrow-bg);\n  transform: rotate(45deg);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* Arrow positions: which edge of the popup the arrow sits on */\n.b-tour__arrow--top {\n  top: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--bottom {\n  bottom: calc(var(--b-tour-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--left {\n  left: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n.b-tour__arrow--right {\n  right: calc(var(--b-tour-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tour-arrow-size) / -2);\n}\n\n/* Center arrow along axis */\n.b-tour__arrow--center {\n  left: 50%;\n  transform: translateX(-50%) rotate(45deg);\n}\n\n/* ─────────────────────────────────────────────\n   Cover image\n   ───────────────────────────────────────────── */\n.b-tour__cover {\n  border-radius: var(--b-tour-cover-border-radius);\n  overflow: hidden;\n  margin: 0;\n}\n\n.b-tour__cover-img {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* ─────────────────────────────────────────────\n   Header (title + close)\n   ───────────────────────────────────────────── */\n.b-tour__header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 0.5rem;\n  padding: var(--b-tour-popup-padding) var(--b-tour-popup-padding) 0;\n}\n\n.b-tour__title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--b-tour-title-font-size);\n  font-weight: var(--b-tour-title-font-weight);\n  color: var(--b-tour-title-color);\n  line-height: 1.4;\n}\n\n/* ─────────────────────────────────────────────\n   Close button\n   ───────────────────────────────────────────── */\n.b-tour__close {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-tour-close-btn-size);\n  height: var(--b-tour-close-btn-size);\n  padding: 0;\n  margin-top: 0.1em;\n  border: none;\n  border-radius: 0.25rem;\n  background: transparent;\n  color: var(--b-tour-close-color);\n  cursor: pointer;\n  transition: color var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__close:hover {\n  color: var(--b-tour-close-hover-color);\n}\n\n.b-tour__close:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__close-icon {\n  width: 1em;\n  height: 1em;\n  fill: currentColor;\n  display: block;\n}\n\n/* ─────────────────────────────────────────────\n   Description\n   ───────────────────────────────────────────── */\n.b-tour__description {\n  padding: 0.5rem var(--b-tour-popup-padding);\n  font-size: var(--b-tour-description-font-size);\n  color: var(--b-tour-description-color);\n  line-height: var(--b-tour-popup-line-height);\n}\n\n/* ─────────────────────────────────────────────\n   Footer (indicators + actions)\n   ───────────────────────────────────────────── */\n.b-tour__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem var(--b-tour-popup-padding) var(--b-tour-popup-padding);\n  gap: 0.75rem;\n}\n\n/* ── Indicators ── */\n.b-tour__indicators {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n}\n\n.b-tour__indicator {\n  display: inline-block;\n  width: var(--b-tour-indicator-size);\n  height: var(--b-tour-indicator-size);\n  border-radius: 50%;\n  background: var(--b-tour-indicator-bg);\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    width var(--b-tour-transition-duration) ease;\n}\n\n.b-tour__indicator--active {\n  background: var(--b-tour-indicator-active-bg);\n  width: calc(var(--b-tour-indicator-size) * 2.5);\n  border-radius: calc(var(--b-tour-indicator-size) / 2);\n}\n\n/* ── Actions ── */\n.b-tour__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-left: auto;\n}\n\n/* ── Buttons ── */\n.b-tour__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--b-tour-btn-padding);\n  border-radius: var(--b-tour-btn-border-radius);\n  font-size: var(--b-tour-btn-font-size);\n  font-weight: 500;\n  cursor: pointer;\n  transition:\n    background var(--b-tour-transition-duration) ease,\n    color var(--b-tour-transition-duration) ease;\n  white-space: nowrap;\n}\n\n.b-tour__btn:focus-visible {\n  outline: 2px solid var(--b-tour-next-btn-bg);\n  outline-offset: 2px;\n}\n\n.b-tour__btn--prev {\n  background: var(--b-tour-prev-btn-bg);\n  color: var(--b-tour-prev-btn-color);\n  border: var(--b-tour-prev-btn-border);\n}\n\n.b-tour__btn--prev:hover {\n  background: var(--b-tour-prev-btn-hover-bg);\n}\n\n.b-tour__btn--next {\n  background: var(--b-tour-next-btn-bg);\n  color: var(--b-tour-next-btn-color);\n  border: none;\n}\n\n.b-tour__btn--next:hover {\n  background: var(--b-tour-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Primary type variant\n   ───────────────────────────────────────────── */\n.b-tour--primary .b-tour__popup {\n  background: var(--b-tour-primary-popup-bg);\n}\n\n.b-tour--primary .b-tour__title {\n  color: var(--b-tour-primary-title-color);\n}\n\n.b-tour--primary .b-tour__description {\n  color: var(--b-tour-primary-description-color);\n}\n\n.b-tour--primary .b-tour__close {\n  color: var(--b-tour-primary-close-color);\n}\n\n.b-tour--primary .b-tour__close:hover {\n  color: var(--b-tour-primary-close-hover-color);\n}\n\n.b-tour--primary .b-tour__indicator {\n  background: var(--b-tour-primary-indicator-bg);\n}\n\n.b-tour--primary .b-tour__indicator--active {\n  background: var(--b-tour-primary-indicator-active-bg);\n}\n\n.b-tour--primary .b-tour__arrow {\n  background: var(--b-tour-primary-arrow-bg);\n}\n\n.b-tour--primary .b-tour__btn--prev {\n  background: var(--b-tour-primary-prev-btn-bg);\n  color: #fff;\n  border: 1px solid rgba(255, 255, 255, 0.4);\n}\n\n.b-tour--primary .b-tour__btn--prev:hover {\n  background: rgba(255, 255, 255, 0.25);\n}\n\n.b-tour--primary .b-tour__btn--next {\n  background: #fff;\n  color: oklch(55% 0.169 237.323);\n}\n\n.b-tour--primary .b-tour__btn--next:hover {\n  background: var(--b-tour-primary-next-btn-hover-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Transition\n   ───────────────────────────────────────────── */\n.b-tour-fade-enter-active,\n.b-tour-fade-leave-active {\n  transition: opacity var(--b-tour-transition-duration) ease;\n}\n\n.b-tour-fade-enter-from,\n.b-tour-fade-leave-to {\n  opacity: 0;\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tour-fade-enter-active,\n  .b-tour-fade-leave-active {\n    transition-duration: 0ms;\n  }\n\n  .b-tour__indicator,\n  .b-tour__btn,\n  .b-tour__close {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system251.js","names":["$attrs"],"sources":["../src/components/BTextarea/BTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { BInputStatus, BInputVariant } from '@/components/BInput/types.ts';\nimport { computed, nextTick, onMounted, ref, useSlots, watch } from 'vue';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  size = BCommonSize.Medium,\n  variant = BInputVariant.Outlined,\n  disabled = false,\n  readOnly = false,\n  placeholder,\n  maxLength,\n  id,\n  status,\n  allowClear = false,\n  showCount = false,\n  rows = 3,\n  autosize = false,\n} = defineProps<{\n  /** The size of the textarea — `sm` | `md` | `lg`. Default `md`. */\n  size?: `${BCommonSize}`;\n  /** Visual variant — `outlined` | `filled` | `borderless` | `underlined`. Default `outlined`. */\n  variant?: `${BInputVariant}`;\n  /** Whether the textarea is disabled. Default `false`. */\n  disabled?: boolean;\n  /** Whether the textarea is read-only. Default `false`. */\n  readOnly?: boolean;\n  /** Validation status — `error` | `warning`. */\n  status?: `${BInputStatus}`;\n  /** Placeholder text shown when empty. */\n  placeholder?: string;\n  /** Maximum number of characters allowed. */\n  maxLength?: number;\n  /** HTML id attribute. Auto-generated when omitted. */\n  id?: string;\n  /** Show clear button when textarea has value. Default `false`. */\n  allowClear?: boolean;\n  /** Display character count. `boolean` toggles a default formatter, or pass a function for custom output. Default `false`. */\n  showCount?: boolean | ((args: { value: string; count: number; maxLength?: number }) => string);\n  /** Minimum height in rows (CSS `rows` attribute). Default `3`. */\n  rows?: number;\n  /**\n   * Auto-grow the textarea to fit its content.\n   * - `true` uses CSS `field-sizing: content` (no JS).\n   * - `{ minRows, maxRows }` uses a JS-clamped fallback for exact row bounds.\n   * Default `false`.\n   */\n  autosize?: boolean | { minRows: number; maxRows: number };\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the textarea value changes. */\n  change: [value: string, event: Event];\n  /** Fired when Enter key is pressed (without Shift). */\n  pressEnter: [event: KeyboardEvent];\n  /** Fired when the clear button is clicked. */\n  clear: [];\n  /** Fired when the textarea gains focus. */\n  focus: [event: FocusEvent];\n  /** Fired when the textarea loses focus. */\n  blur: [event: FocusEvent];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst textareaId = computed(() => id ?? `b-textarea-${componentUID.value}`);\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\nconst isFocused = ref(false);\n\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\n\n// ── autosize handling ────────────────────────────────────────────────────────\nconst isCssAutosize = computed(() => autosize === true);\nconst isJsAutosize = computed(\n  () => typeof autosize === 'object' && autosize !== null,\n);\nconst autosizeBounds = computed(() => {\n  if (typeof autosize === 'object' && autosize !== null) {\n    return { minRows: autosize.minRows, maxRows: autosize.maxRows };\n  }\n  return null;\n});\n\nconst adjustHeight = () => {\n  if (!isJsAutosize.value) return;\n  const el = textareaRef.value;\n  if (!el) return;\n  const bounds = autosizeBounds.value;\n  if (!bounds) return;\n  const styles = window.getComputedStyle(el);\n  const lineHeight = parseFloat(styles.lineHeight) || 20;\n  const paddingTop = parseFloat(styles.paddingTop) || 0;\n  const paddingBottom = parseFloat(styles.paddingBottom) || 0;\n  const borderTop = parseFloat(styles.borderTopWidth) || 0;\n  const borderBottom = parseFloat(styles.borderBottomWidth) || 0;\n  const verticalSpacing = paddingTop + paddingBottom + borderTop + borderBottom;\n  const minHeight = lineHeight * bounds.minRows + verticalSpacing;\n  const maxHeight = lineHeight * bounds.maxRows + verticalSpacing;\n  el.style.height = 'auto';\n  const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);\n  el.style.height = `${next}px`;\n  el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';\n};\n\n// ── character count ──────────────────────────────────────────────────────────\nconst charCount = computed(() => (model.value ?? '').length);\n\nconst showCountIndicator = computed(() => !!showCount);\n\nconst countText = computed(() => {\n  const val = model.value ?? '';\n  const count = charCount.value;\n  if (typeof showCount === 'function') {\n    return showCount({ value: val, count, maxLength });\n  }\n  if (maxLength !== undefined) {\n    return `${count} / ${maxLength}`;\n  }\n  return `${count}`;\n});\n\nconst isOverCount = computed(() => {\n  if (maxLength === undefined) return false;\n  return charCount.value > maxLength;\n});\n\nconst showClearButton = computed(() => {\n  return allowClear && !!model.value && !disabled && !readOnly;\n});\n\n// ── handlers ─────────────────────────────────────────────────────────────────\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLTextAreaElement;\n  const value = target.value;\n  model.value = value;\n  emit('change', value, e);\n  if (isJsAutosize.value) {\n    void nextTick(adjustHeight);\n  }\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter' && !e.shiftKey) {\n    emit('pressEnter', e);\n  }\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  isFocused.value = true;\n  emit('focus', e);\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  isFocused.value = false;\n  emit('blur', e);\n};\n\nconst handleClear = () => {\n  model.value = '';\n  emit('clear');\n  emit('change', '', new Event('change'));\n  textareaRef.value?.focus();\n  if (isJsAutosize.value) {\n    void nextTick(adjustHeight);\n  }\n};\n\n// ── exposed methods ──────────────────────────────────────────────────────────\nconst focus = () => {\n  textareaRef.value?.focus();\n};\n\nconst blur = () => {\n  textareaRef.value?.blur();\n};\n\nconst select = () => {\n  textareaRef.value?.select();\n};\n\ndefineExpose({ focus, blur, select });\n\n// ── side-effects ─────────────────────────────────────────────────────────────\nonMounted(() => {\n  if (isJsAutosize.value) {\n    adjustHeight();\n  }\n});\n\nwatch(\n  () => model.value,\n  () => {\n    if (isJsAutosize.value) {\n      void nextTick(adjustHeight);\n    }\n  },\n);\n</script>\n\n<template>\n  <span\n    class=\"b-textarea\"\n    :class=\"[\n      `b-textarea--${size}`,\n      `b-textarea--${variant}`,\n      {\n        'b-textarea--focused': isFocused,\n        'b-textarea--disabled': disabled,\n        'b-textarea--readonly': readOnly,\n        'b-textarea--error': status === BInputStatus.Error,\n        'b-textarea--warning': status === BInputStatus.Warning,\n        'b-textarea--autosize': isCssAutosize,\n        'b-textarea--over-count': isOverCount,\n      },\n    ]\"\n  >\n    <span class=\"b-textarea__wrapper\">\n      <span v-if=\"hasPrefix\" class=\"b-textarea__prefix\" aria-hidden=\"true\">\n        <slot name=\"prefix\" />\n      </span>\n\n      <textarea\n        v-bind=\"$attrs\"\n        :id=\"textareaId\"\n        ref=\"textareaRef\"\n        :value=\"model\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        :rows=\"rows\"\n        :maxlength=\"maxLength\"\n        :aria-invalid=\"status === BInputStatus.Error ? true : undefined\"\n        :aria-describedby=\"showCountIndicator ? `${textareaId}-count` : undefined\"\n        class=\"b-textarea__textarea\"\n        @input=\"handleInput\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      />\n\n      <span v-if=\"showClearButton\" class=\"b-textarea__clear-wrapper\">\n        <button\n          type=\"button\"\n          class=\"b-textarea__clear\"\n          aria-label=\"Clear textarea\"\n          tabindex=\"-1\"\n          @mousedown.prevent=\"handleClear\"\n        >\n          <svg\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z\"\n            />\n          </svg>\n        </button>\n      </span>\n\n      <span v-if=\"hasSuffix\" class=\"b-textarea__suffix\" aria-hidden=\"true\">\n        <slot name=\"suffix\" />\n      </span>\n\n      <span\n        v-if=\"showCountIndicator\"\n        :id=\"`${textareaId}-count`\"\n        class=\"b-textarea__count\"\n        :class=\"{ 'b-textarea__count--over': isOverCount }\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        {{ countText }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style>\n.b-textarea {\n  --b-textarea-bg: #ffffff;\n  --b-textarea-fg: rgba(0, 0, 0, 0.88);\n  --b-textarea-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-textarea-border-color: #d9d9d9;\n  --b-textarea-border-color-hover: #4096ff;\n  --b-textarea-border-color-focus: #1677ff;\n  --b-textarea-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-textarea-radius: 6px;\n  --b-textarea-padding-x: 11px;\n  --b-textarea-padding-y: 4px;\n  --b-textarea-padding-x-lg: 11px;\n  --b-textarea-padding-y-lg: 7px;\n  --b-textarea-padding-x-sm: 7px;\n  --b-textarea-padding-y-sm: 0px;\n  --b-textarea-font-size: 14px;\n  --b-textarea-font-size-lg: 16px;\n  --b-textarea-font-size-sm: 14px;\n  --b-textarea-line-height: 1.5714;\n  --b-textarea-min-rows: 3;\n  --b-textarea-max-rows: 8;\n  --b-textarea-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-textarea-disabled-fg: rgba(0, 0, 0, 0.25);\n  --b-textarea-clear-color: rgba(0, 0, 0, 0.25);\n  --b-textarea-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-textarea-count-color: rgba(0, 0, 0, 0.65);\n  --b-textarea-error-border-color: #ff4d4f;\n  --b-textarea-error-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-textarea-warning-border-color: #faad14;\n  --b-textarea-warning-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-textarea-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-textarea-filled-hover-bg: rgba(0, 0, 0, 0.04);\n\n  display: inline-flex;\n  width: 100%;\n  font-size: var(--b-textarea-font-size);\n  color: var(--b-textarea-fg);\n  line-height: var(--b-textarea-line-height);\n}\n\n.b-textarea--lg {\n  font-size: var(--b-textarea-font-size-lg);\n}\n\n.b-textarea--sm {\n  font-size: var(--b-textarea-font-size-sm);\n}\n\n.b-textarea__wrapper {\n  display: inline-flex;\n  align-items: stretch;\n  flex: 1;\n  min-width: 0;\n  position: relative;\n  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;\n}\n\n/* Variants */\n.b-textarea--outlined .b-textarea__wrapper {\n  background: var(--b-textarea-bg);\n  border: 1px solid var(--b-textarea-border-color);\n  border-radius: var(--b-textarea-radius);\n}\n\n.b-textarea--outlined:not(.b-textarea--disabled):hover .b-textarea__wrapper {\n  border-color: var(--b-textarea-border-color-hover);\n}\n\n.b-textarea--outlined.b-textarea--focused .b-textarea__wrapper {\n  border-color: var(--b-textarea-border-color-focus);\n  box-shadow: var(--b-textarea-active-shadow);\n}\n\n.b-textarea--filled .b-textarea__wrapper {\n  background: var(--b-textarea-filled-bg);\n  border: 1px solid transparent;\n  border-radius: var(--b-textarea-radius);\n}\n\n.b-textarea--filled:not(.b-textarea--disabled):hover .b-textarea__wrapper {\n  background: var(--b-textarea-filled-hover-bg);\n}\n\n.b-textarea--filled.b-textarea--focused .b-textarea__wrapper {\n  background: var(--b-textarea-bg);\n  border-color: var(--b-textarea-border-color-focus);\n  box-shadow: var(--b-textarea-active-shadow);\n}\n\n.b-textarea--borderless .b-textarea__wrapper {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--b-textarea-radius);\n}\n\n.b-textarea--underlined .b-textarea__wrapper {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--b-textarea-border-color);\n  border-radius: 0;\n}\n\n.b-textarea--underlined:not(.b-textarea--disabled):hover .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-border-color-hover);\n}\n\n.b-textarea--underlined.b-textarea--focused .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-border-color-focus);\n  box-shadow: 0 1px 0 0 var(--b-textarea-border-color-focus);\n}\n\n/* Status */\n.b-textarea--error.b-textarea--outlined .b-textarea__wrapper,\n.b-textarea--error.b-textarea--filled .b-textarea__wrapper {\n  border-color: var(--b-textarea-error-border-color);\n}\n\n.b-textarea--error.b-textarea--outlined.b-textarea--focused .b-textarea__wrapper,\n.b-textarea--error.b-textarea--filled.b-textarea--focused .b-textarea__wrapper {\n  border-color: var(--b-textarea-error-border-color);\n  box-shadow: var(--b-textarea-error-shadow);\n}\n\n.b-textarea--error.b-textarea--underlined .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-error-border-color);\n}\n\n.b-textarea--error.b-textarea--underlined.b-textarea--focused .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-error-border-color);\n  box-shadow: 0 1px 0 0 var(--b-textarea-error-border-color);\n}\n\n.b-textarea--warning.b-textarea--outlined .b-textarea__wrapper,\n.b-textarea--warning.b-textarea--filled .b-textarea__wrapper {\n  border-color: var(--b-textarea-warning-border-color);\n}\n\n.b-textarea--warning.b-textarea--outlined.b-textarea--focused .b-textarea__wrapper,\n.b-textarea--warning.b-textarea--filled.b-textarea--focused .b-textarea__wrapper {\n  border-color: var(--b-textarea-warning-border-color);\n  box-shadow: var(--b-textarea-warning-shadow);\n}\n\n.b-textarea--warning.b-textarea--underlined .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-warning-border-color);\n}\n\n.b-textarea--warning.b-textarea--underlined.b-textarea--focused .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-warning-border-color);\n  box-shadow: 0 1px 0 0 var(--b-textarea-warning-border-color);\n}\n\n/* Disabled */\n.b-textarea--disabled .b-textarea__wrapper {\n  background: var(--b-textarea-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-textarea--disabled .b-textarea__textarea {\n  color: var(--b-textarea-disabled-fg);\n  cursor: not-allowed;\n}\n\n/* Textarea element */\n.b-textarea__textarea {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n  resize: vertical;\n  /* Calc applied via padding rules below per size; zero default. */\n}\n\n.b-textarea--md .b-textarea__textarea {\n  padding: var(--b-textarea-padding-y) var(--b-textarea-padding-x);\n}\n\n.b-textarea--lg .b-textarea__textarea {\n  padding: var(--b-textarea-padding-y-lg) var(--b-textarea-padding-x-lg);\n}\n\n.b-textarea--sm .b-textarea__textarea {\n  padding: var(--b-textarea-padding-y-sm) var(--b-textarea-padding-x-sm);\n}\n\n.b-textarea__textarea::placeholder {\n  color: var(--b-textarea-placeholder-color);\n}\n\n/* CSS-only autosize: field-sizing: content with min/max-block-size in line-units. */\n.b-textarea--autosize .b-textarea__textarea {\n  field-sizing: content;\n  min-block-size: calc(\n    var(--b-textarea-line-height) * var(--b-textarea-min-rows) * 1em\n  );\n  max-block-size: calc(\n    var(--b-textarea-line-height) * var(--b-textarea-max-rows) * 1em\n  );\n  resize: none;\n}\n\n/* Prefix & Suffix */\n.b-textarea__prefix,\n.b-textarea__suffix {\n  display: inline-flex;\n  align-items: flex-start;\n  padding-top: var(--b-textarea-padding-y);\n  color: var(--b-textarea-fg);\n  flex-shrink: 0;\n}\n\n.b-textarea__prefix {\n  margin-left: var(--b-textarea-padding-x);\n}\n\n.b-textarea__suffix {\n  margin-right: var(--b-textarea-padding-x);\n}\n\n.b-textarea__prefix ~ .b-textarea__textarea {\n  padding-left: 4px;\n}\n\n/* Clear button */\n.b-textarea__clear-wrapper {\n  display: inline-flex;\n  align-items: flex-start;\n  flex-shrink: 0;\n  margin-top: var(--b-textarea-padding-y);\n  margin-right: var(--b-textarea-padding-x);\n}\n\n.b-textarea__clear {\n  display: inline-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-textarea-clear-color);\n  font-size: 14px;\n  line-height: 1;\n  transition: color 0.2s;\n}\n\n.b-textarea__clear:hover {\n  color: var(--b-textarea-clear-hover-color);\n}\n\n/* Count indicator — pinned bottom-right of the wrapper */\n.b-textarea__count {\n  position: absolute;\n  right: 8px;\n  bottom: 4px;\n  color: var(--b-textarea-count-color);\n  font-size: 0.857em;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.b-textarea__count--over {\n  color: var(--b-textarea-error-border-color);\n}\n\n/* Dark mode — data attribute on ancestor */\n[data-prefers-color='dark'] .b-textarea {\n  --b-textarea-bg: #141414;\n  --b-textarea-fg: rgba(255, 255, 255, 0.88);\n  --b-textarea-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-textarea-border-color: #424242;\n  --b-textarea-border-color-hover: #3c89e8;\n  --b-textarea-border-color-focus: #1668dc;\n  --b-textarea-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-textarea-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-textarea-disabled-fg: rgba(255, 255, 255, 0.25);\n  --b-textarea-clear-color: rgba(255, 255, 255, 0.25);\n  --b-textarea-clear-hover-color: rgba(255, 255, 255, 0.45);\n  --b-textarea-count-color: rgba(255, 255, 255, 0.65);\n  --b-textarea-error-border-color: #dc3838;\n  --b-textarea-error-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n  --b-textarea-warning-border-color: #d1a300;\n  --b-textarea-warning-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n  --b-textarea-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-textarea-filled-hover-bg: rgba(255, 255, 255, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-textarea {\n    --b-textarea-bg: #141414;\n    --b-textarea-fg: rgba(255, 255, 255, 0.88);\n    --b-textarea-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-textarea-border-color: #424242;\n    --b-textarea-border-color-hover: #3c89e8;\n    --b-textarea-border-color-focus: #1668dc;\n    --b-textarea-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-textarea-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-textarea-disabled-fg: rgba(255, 255, 255, 0.25);\n    --b-textarea-clear-color: rgba(255, 255, 255, 0.25);\n    --b-textarea-clear-hover-color: rgba(255, 255, 255, 0.45);\n    --b-textarea-count-color: rgba(255, 255, 255, 0.65);\n    --b-textarea-error-border-color: #dc3838;\n    --b-textarea-error-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n    --b-textarea-warning-border-color: #d1a300;\n    --b-textarea-warning-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n    --b-textarea-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-textarea-filled-hover-bg: rgba(255, 255, 255, 0.12);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-textarea__wrapper,\n  .b-textarea__clear {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAAU,EA+ClB,IAAO,GAaP,IAAQ,EAAmB,GAAA,aAAiB,EAE5C,EAAE,oBAAiB,GAAgB,EACnC,IAAa,QAAe,EAAA,MAAM,cAAc,EAAa,QAAQ,EAErE,IAAc,EAAgC,KAAK,EACnD,IAAY,EAAI,GAAM,EAEtB,IAAY,QAAe,CAAC,CAAC,EAAM,OAAO,EAC1C,IAAY,QAAe,CAAC,CAAC,EAAM,OAAO,EAG1C,IAAgB,QAAe,EAAA,aAAa,GAAK,EACjD,IAAe,QACb,OAAO,EAAA,YAAa,YAAY,EAAA,aAAa,KACpD,EACK,IAAiB,QACjB,OAAO,EAAA,YAAa,YAAY,EAAA,aAAa,OACxC;GAAE,SAAS,EAAA,SAAS;GAAS,SAAS,EAAA,SAAS;GAAS,GAE1D,KACP,EAEI,UAAqB;AACzB,OAAI,CAAC,EAAa,MAAO;GACzB,IAAM,IAAK,EAAY;AACvB,OAAI,CAAC,EAAI;GACT,IAAM,IAAS,EAAe;AAC9B,OAAI,CAAC,EAAQ;GACb,IAAM,IAAS,OAAO,iBAAiB,EAAG,EACpC,IAAa,WAAW,EAAO,WAAW,IAAI,IAC9C,IAAa,WAAW,EAAO,WAAW,IAAI,GAC9C,IAAgB,WAAW,EAAO,cAAc,IAAI,GACpD,IAAY,WAAW,EAAO,eAAe,IAAI,GACjD,IAAe,WAAW,EAAO,kBAAkB,IAAI,GACvD,IAAkB,IAAa,IAAgB,IAAY,GAC3D,IAAY,IAAa,EAAO,UAAU,GAC1C,IAAY,IAAa,EAAO,UAAU;AAChD,KAAG,MAAM,SAAS;GAClB,IAAM,IAAO,KAAK,IAAI,KAAK,IAAI,EAAG,cAAc,EAAU,EAAE,EAAU;AAEtE,GADA,EAAG,MAAM,SAAS,GAAG,EAAK,KAC1B,EAAG,MAAM,YAAY,EAAG,eAAe,IAAY,SAAS;KAIxD,IAAY,SAAgB,EAAM,SAAS,IAAI,OAAO,EAEtD,IAAqB,QAAe,CAAC,CAAC,EAAA,UAAU,EAEhD,IAAY,QAAe;GAC/B,IAAM,IAAM,EAAM,SAAS,IACrB,IAAQ,EAAU;AAOxB,UANI,OAAO,EAAA,aAAc,aAChB,EAAA,UAAU;IAAE,OAAO;IAAK;IAAO,WAAQ,EAAA;IAAG,CAAC,GAEhD,EAAA,cAAc,KAAA,IAGX,GAAG,MAFD,GAAG,EAAM,KAAK,EAAA;IAGvB,EAEI,IAAc,QACd,EAAA,cAAc,KAAA,IAAkB,KAC7B,EAAU,QAAQ,EAAA,UACzB,EAEI,IAAkB,QACf,EAAA,cAAc,CAAC,CAAC,EAAM,SAAS,CAAC,EAAA,YAAY,CAAC,EAAA,SACpD,EAGI,KAAe,MAAa;GAEhC,IAAM,IADS,EAAE,OACI;AAGrB,GAFA,EAAM,QAAQ,GACd,EAAK,UAAU,GAAO,EAAE,EACpB,EAAa,SACV,EAAS,EAAa;KAIzB,KAAiB,MAAqB;AAC1C,GAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,YAC1B,EAAK,cAAc,EAAE;KAInB,KAAe,MAAkB;AAErC,GADA,EAAU,QAAQ,IAClB,EAAK,SAAS,EAAE;KAGZ,KAAc,MAAkB;AAEpC,GADA,EAAU,QAAQ,IAClB,EAAK,QAAQ,EAAE;KAGX,UAAoB;AAKxB,GAJA,EAAM,QAAQ,IACd,EAAK,QAAQ,EACb,EAAK,UAAU,IAAI,IAAI,MAAM,SAAS,CAAC,EACvC,EAAY,OAAO,OAAO,EACtB,EAAa,SACV,EAAS,EAAa;;SAiB/B,EAAa;GAAE,aAZK;AAClB,MAAY,OAAO,OAAO;;GAWN,YARH;AACjB,MAAY,OAAO,MAAM;;GAOC,cAJP;AACnB,MAAY,OAAO,QAAQ;;GAGO,CAAC,EAGrC,QAAgB;AACd,GAAI,EAAa,SACf,GAAc;IAEhB,EAEF,QACQ,EAAM,aACN;AACJ,GAAI,EAAa,SACV,EAAS,EAAa;IAGhC,kBAIC,EA6EO,QAAA,EA5EL,OAAK,EAAA,CAAC,cAAY;kBACa,EAAA;kBAA6B,EAAA;;2BAAkD,EAAA;4BAA2C,EAAA;4BAA0C,EAAA;yBAAuC,EAAA,WAAW,EAAA,EAAY,CAAC;2BAAsC,EAAA,WAAW,EAAA,EAAY,CAAC;4BAAyC,EAAA;8BAAiD,EAAA;;UAc1Z,EA4DO,QA5DP,GA4DO;GA3DO,EAAA,SAAA,GAAA,EAAZ,EAEO,QAFP,GAEO,CADL,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAGxB,EAiBE,YAjBF,EACUA,EAgBR,QAhBc;IACb,IAAI,EAAA;aACD;IAAJ,KAAI;IACH,OAAO,EAAA;IACP,aAAa,EAAA;IACb,UAAU,EAAA;IACV,UAAU,EAAA;IACV,MAAM,EAAA;IACN,WAAW,EAAA;IACX,gBAAc,EAAA,WAAW,EAAA,EAAY,CAAC,QAAK,KAAU,KAAA;IACrD,oBAAkB,EAAA,QAAkB,GAAM,EAAA,MAAU,UAAW,KAAA;IAChE,OAAM;IACL,SAAO;IACP,WAAS;IACT,SAAO;IACP,QAAM;;GAGG,EAAA,SAAA,GAAA,EAAZ,EAoBO,QApBP,GAoBO,CAnBL,EAkBS,UAAA;IAjBP,MAAK;IACL,OAAM;IACN,cAAW;IACX,UAAS;IACR,aAAS,EAAU,GAAW,CAAA,UAAA,CAAA;oBAE/B,EAUM,OAAA;IATJ,SAAQ;IACR,OAAM;IACN,QAAO;IACP,MAAK;IACL,eAAY;OAEZ,EAEE,QAAA,EADA,GAAE,2WAAyW,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAMvW,EAAA,SAAA,GAAA,EAAZ,EAEO,QAFP,GAEO,CADL,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAIhB,EAAA,SAAA,GAAA,EADR,EASO,QAAA;;IAPJ,IAAE,GAAK,EAAA,MAAU;IAClB,OAAK,EAAA,CAAC,qBAAmB,EAAA,2BACY,EAAA,OAAW,CAAA,CAAA;IAChD,aAAU;IACV,eAAY;QAET,EAAA,MAAS,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/design-system253.js

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

package/dist/design-system253.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system253.js","names":[],"sources":["../src/components/BTextarea/BTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { BInputStatus, BInputVariant } from '@/components/BInput/types.ts';\nimport { computed, nextTick, onMounted, ref, useSlots, watch } from 'vue';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  size = BCommonSize.Medium,\n  variant = BInputVariant.Outlined,\n  disabled = false,\n  readOnly = false,\n  placeholder,\n  maxLength,\n  id,\n  status,\n  allowClear = false,\n  showCount = false,\n  rows = 3,\n  autosize = false,\n} = defineProps<{\n  /** The size of the textarea — `sm` | `md` | `lg`. Default `md`. */\n  size?: `${BCommonSize}`;\n  /** Visual variant — `outlined` | `filled` | `borderless` | `underlined`. Default `outlined`. */\n  variant?: `${BInputVariant}`;\n  /** Whether the textarea is disabled. Default `false`. */\n  disabled?: boolean;\n  /** Whether the textarea is read-only. Default `false`. */\n  readOnly?: boolean;\n  /** Validation status — `error` | `warning`. */\n  status?: `${BInputStatus}`;\n  /** Placeholder text shown when empty. */\n  placeholder?: string;\n  /** Maximum number of characters allowed. */\n  maxLength?: number;\n  /** HTML id attribute. Auto-generated when omitted. */\n  id?: string;\n  /** Show clear button when textarea has value. Default `false`. */\n  allowClear?: boolean;\n  /** Display character count. `boolean` toggles a default formatter, or pass a function for custom output. Default `false`. */\n  showCount?: boolean | ((args: { value: string; count: number; maxLength?: number }) => string);\n  /** Minimum height in rows (CSS `rows` attribute). Default `3`. */\n  rows?: number;\n  /**\n   * Auto-grow the textarea to fit its content.\n   * - `true` uses CSS `field-sizing: content` (no JS).\n   * - `{ minRows, maxRows }` uses a JS-clamped fallback for exact row bounds.\n   * Default `false`.\n   */\n  autosize?: boolean | { minRows: number; maxRows: number };\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the textarea value changes. */\n  change: [value: string, event: Event];\n  /** Fired when Enter key is pressed (without Shift). */\n  pressEnter: [event: KeyboardEvent];\n  /** Fired when the clear button is clicked. */\n  clear: [];\n  /** Fired when the textarea gains focus. */\n  focus: [event: FocusEvent];\n  /** Fired when the textarea loses focus. */\n  blur: [event: FocusEvent];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst textareaId = computed(() => id ?? `b-textarea-${componentUID.value}`);\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\nconst isFocused = ref(false);\n\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\n\n// ── autosize handling ────────────────────────────────────────────────────────\nconst isCssAutosize = computed(() => autosize === true);\nconst isJsAutosize = computed(\n  () => typeof autosize === 'object' && autosize !== null,\n);\nconst autosizeBounds = computed(() => {\n  if (typeof autosize === 'object' && autosize !== null) {\n    return { minRows: autosize.minRows, maxRows: autosize.maxRows };\n  }\n  return null;\n});\n\nconst adjustHeight = () => {\n  if (!isJsAutosize.value) return;\n  const el = textareaRef.value;\n  if (!el) return;\n  const bounds = autosizeBounds.value;\n  if (!bounds) return;\n  const styles = window.getComputedStyle(el);\n  const lineHeight = parseFloat(styles.lineHeight) || 20;\n  const paddingTop = parseFloat(styles.paddingTop) || 0;\n  const paddingBottom = parseFloat(styles.paddingBottom) || 0;\n  const borderTop = parseFloat(styles.borderTopWidth) || 0;\n  const borderBottom = parseFloat(styles.borderBottomWidth) || 0;\n  const verticalSpacing = paddingTop + paddingBottom + borderTop + borderBottom;\n  const minHeight = lineHeight * bounds.minRows + verticalSpacing;\n  const maxHeight = lineHeight * bounds.maxRows + verticalSpacing;\n  el.style.height = 'auto';\n  const next = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);\n  el.style.height = `${next}px`;\n  el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';\n};\n\n// ── character count ──────────────────────────────────────────────────────────\nconst charCount = computed(() => (model.value ?? '').length);\n\nconst showCountIndicator = computed(() => !!showCount);\n\nconst countText = computed(() => {\n  const val = model.value ?? '';\n  const count = charCount.value;\n  if (typeof showCount === 'function') {\n    return showCount({ value: val, count, maxLength });\n  }\n  if (maxLength !== undefined) {\n    return `${count} / ${maxLength}`;\n  }\n  return `${count}`;\n});\n\nconst isOverCount = computed(() => {\n  if (maxLength === undefined) return false;\n  return charCount.value > maxLength;\n});\n\nconst showClearButton = computed(() => {\n  return allowClear && !!model.value && !disabled && !readOnly;\n});\n\n// ── handlers ─────────────────────────────────────────────────────────────────\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLTextAreaElement;\n  const value = target.value;\n  model.value = value;\n  emit('change', value, e);\n  if (isJsAutosize.value) {\n    void nextTick(adjustHeight);\n  }\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter' && !e.shiftKey) {\n    emit('pressEnter', e);\n  }\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  isFocused.value = true;\n  emit('focus', e);\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  isFocused.value = false;\n  emit('blur', e);\n};\n\nconst handleClear = () => {\n  model.value = '';\n  emit('clear');\n  emit('change', '', new Event('change'));\n  textareaRef.value?.focus();\n  if (isJsAutosize.value) {\n    void nextTick(adjustHeight);\n  }\n};\n\n// ── exposed methods ──────────────────────────────────────────────────────────\nconst focus = () => {\n  textareaRef.value?.focus();\n};\n\nconst blur = () => {\n  textareaRef.value?.blur();\n};\n\nconst select = () => {\n  textareaRef.value?.select();\n};\n\ndefineExpose({ focus, blur, select });\n\n// ── side-effects ─────────────────────────────────────────────────────────────\nonMounted(() => {\n  if (isJsAutosize.value) {\n    adjustHeight();\n  }\n});\n\nwatch(\n  () => model.value,\n  () => {\n    if (isJsAutosize.value) {\n      void nextTick(adjustHeight);\n    }\n  },\n);\n</script>\n\n<template>\n  <span\n    class=\"b-textarea\"\n    :class=\"[\n      `b-textarea--${size}`,\n      `b-textarea--${variant}`,\n      {\n        'b-textarea--focused': isFocused,\n        'b-textarea--disabled': disabled,\n        'b-textarea--readonly': readOnly,\n        'b-textarea--error': status === BInputStatus.Error,\n        'b-textarea--warning': status === BInputStatus.Warning,\n        'b-textarea--autosize': isCssAutosize,\n        'b-textarea--over-count': isOverCount,\n      },\n    ]\"\n  >\n    <span class=\"b-textarea__wrapper\">\n      <span v-if=\"hasPrefix\" class=\"b-textarea__prefix\" aria-hidden=\"true\">\n        <slot name=\"prefix\" />\n      </span>\n\n      <textarea\n        v-bind=\"$attrs\"\n        :id=\"textareaId\"\n        ref=\"textareaRef\"\n        :value=\"model\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        :rows=\"rows\"\n        :maxlength=\"maxLength\"\n        :aria-invalid=\"status === BInputStatus.Error ? true : undefined\"\n        :aria-describedby=\"showCountIndicator ? `${textareaId}-count` : undefined\"\n        class=\"b-textarea__textarea\"\n        @input=\"handleInput\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      />\n\n      <span v-if=\"showClearButton\" class=\"b-textarea__clear-wrapper\">\n        <button\n          type=\"button\"\n          class=\"b-textarea__clear\"\n          aria-label=\"Clear textarea\"\n          tabindex=\"-1\"\n          @mousedown.prevent=\"handleClear\"\n        >\n          <svg\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z\"\n            />\n          </svg>\n        </button>\n      </span>\n\n      <span v-if=\"hasSuffix\" class=\"b-textarea__suffix\" aria-hidden=\"true\">\n        <slot name=\"suffix\" />\n      </span>\n\n      <span\n        v-if=\"showCountIndicator\"\n        :id=\"`${textareaId}-count`\"\n        class=\"b-textarea__count\"\n        :class=\"{ 'b-textarea__count--over': isOverCount }\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        {{ countText }}\n      </span>\n    </span>\n  </span>\n</template>\n\n<style>\n.b-textarea {\n  --b-textarea-bg: #ffffff;\n  --b-textarea-fg: rgba(0, 0, 0, 0.88);\n  --b-textarea-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-textarea-border-color: #d9d9d9;\n  --b-textarea-border-color-hover: #4096ff;\n  --b-textarea-border-color-focus: #1677ff;\n  --b-textarea-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-textarea-radius: 6px;\n  --b-textarea-padding-x: 11px;\n  --b-textarea-padding-y: 4px;\n  --b-textarea-padding-x-lg: 11px;\n  --b-textarea-padding-y-lg: 7px;\n  --b-textarea-padding-x-sm: 7px;\n  --b-textarea-padding-y-sm: 0px;\n  --b-textarea-font-size: 14px;\n  --b-textarea-font-size-lg: 16px;\n  --b-textarea-font-size-sm: 14px;\n  --b-textarea-line-height: 1.5714;\n  --b-textarea-min-rows: 3;\n  --b-textarea-max-rows: 8;\n  --b-textarea-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-textarea-disabled-fg: rgba(0, 0, 0, 0.25);\n  --b-textarea-clear-color: rgba(0, 0, 0, 0.25);\n  --b-textarea-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-textarea-count-color: rgba(0, 0, 0, 0.65);\n  --b-textarea-error-border-color: #ff4d4f;\n  --b-textarea-error-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-textarea-warning-border-color: #faad14;\n  --b-textarea-warning-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-textarea-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-textarea-filled-hover-bg: rgba(0, 0, 0, 0.04);\n\n  display: inline-flex;\n  width: 100%;\n  font-size: var(--b-textarea-font-size);\n  color: var(--b-textarea-fg);\n  line-height: var(--b-textarea-line-height);\n}\n\n.b-textarea--lg {\n  font-size: var(--b-textarea-font-size-lg);\n}\n\n.b-textarea--sm {\n  font-size: var(--b-textarea-font-size-sm);\n}\n\n.b-textarea__wrapper {\n  display: inline-flex;\n  align-items: stretch;\n  flex: 1;\n  min-width: 0;\n  position: relative;\n  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;\n}\n\n/* Variants */\n.b-textarea--outlined .b-textarea__wrapper {\n  background: var(--b-textarea-bg);\n  border: 1px solid var(--b-textarea-border-color);\n  border-radius: var(--b-textarea-radius);\n}\n\n.b-textarea--outlined:not(.b-textarea--disabled):hover .b-textarea__wrapper {\n  border-color: var(--b-textarea-border-color-hover);\n}\n\n.b-textarea--outlined.b-textarea--focused .b-textarea__wrapper {\n  border-color: var(--b-textarea-border-color-focus);\n  box-shadow: var(--b-textarea-active-shadow);\n}\n\n.b-textarea--filled .b-textarea__wrapper {\n  background: var(--b-textarea-filled-bg);\n  border: 1px solid transparent;\n  border-radius: var(--b-textarea-radius);\n}\n\n.b-textarea--filled:not(.b-textarea--disabled):hover .b-textarea__wrapper {\n  background: var(--b-textarea-filled-hover-bg);\n}\n\n.b-textarea--filled.b-textarea--focused .b-textarea__wrapper {\n  background: var(--b-textarea-bg);\n  border-color: var(--b-textarea-border-color-focus);\n  box-shadow: var(--b-textarea-active-shadow);\n}\n\n.b-textarea--borderless .b-textarea__wrapper {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--b-textarea-radius);\n}\n\n.b-textarea--underlined .b-textarea__wrapper {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--b-textarea-border-color);\n  border-radius: 0;\n}\n\n.b-textarea--underlined:not(.b-textarea--disabled):hover .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-border-color-hover);\n}\n\n.b-textarea--underlined.b-textarea--focused .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-border-color-focus);\n  box-shadow: 0 1px 0 0 var(--b-textarea-border-color-focus);\n}\n\n/* Status */\n.b-textarea--error.b-textarea--outlined .b-textarea__wrapper,\n.b-textarea--error.b-textarea--filled .b-textarea__wrapper {\n  border-color: var(--b-textarea-error-border-color);\n}\n\n.b-textarea--error.b-textarea--outlined.b-textarea--focused .b-textarea__wrapper,\n.b-textarea--error.b-textarea--filled.b-textarea--focused .b-textarea__wrapper {\n  border-color: var(--b-textarea-error-border-color);\n  box-shadow: var(--b-textarea-error-shadow);\n}\n\n.b-textarea--error.b-textarea--underlined .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-error-border-color);\n}\n\n.b-textarea--error.b-textarea--underlined.b-textarea--focused .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-error-border-color);\n  box-shadow: 0 1px 0 0 var(--b-textarea-error-border-color);\n}\n\n.b-textarea--warning.b-textarea--outlined .b-textarea__wrapper,\n.b-textarea--warning.b-textarea--filled .b-textarea__wrapper {\n  border-color: var(--b-textarea-warning-border-color);\n}\n\n.b-textarea--warning.b-textarea--outlined.b-textarea--focused .b-textarea__wrapper,\n.b-textarea--warning.b-textarea--filled.b-textarea--focused .b-textarea__wrapper {\n  border-color: var(--b-textarea-warning-border-color);\n  box-shadow: var(--b-textarea-warning-shadow);\n}\n\n.b-textarea--warning.b-textarea--underlined .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-warning-border-color);\n}\n\n.b-textarea--warning.b-textarea--underlined.b-textarea--focused .b-textarea__wrapper {\n  border-bottom-color: var(--b-textarea-warning-border-color);\n  box-shadow: 0 1px 0 0 var(--b-textarea-warning-border-color);\n}\n\n/* Disabled */\n.b-textarea--disabled .b-textarea__wrapper {\n  background: var(--b-textarea-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-textarea--disabled .b-textarea__textarea {\n  color: var(--b-textarea-disabled-fg);\n  cursor: not-allowed;\n}\n\n/* Textarea element */\n.b-textarea__textarea {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n  resize: vertical;\n  /* Calc applied via padding rules below per size; zero default. */\n}\n\n.b-textarea--md .b-textarea__textarea {\n  padding: var(--b-textarea-padding-y) var(--b-textarea-padding-x);\n}\n\n.b-textarea--lg .b-textarea__textarea {\n  padding: var(--b-textarea-padding-y-lg) var(--b-textarea-padding-x-lg);\n}\n\n.b-textarea--sm .b-textarea__textarea {\n  padding: var(--b-textarea-padding-y-sm) var(--b-textarea-padding-x-sm);\n}\n\n.b-textarea__textarea::placeholder {\n  color: var(--b-textarea-placeholder-color);\n}\n\n/* CSS-only autosize: field-sizing: content with min/max-block-size in line-units. */\n.b-textarea--autosize .b-textarea__textarea {\n  field-sizing: content;\n  min-block-size: calc(\n    var(--b-textarea-line-height) * var(--b-textarea-min-rows) * 1em\n  );\n  max-block-size: calc(\n    var(--b-textarea-line-height) * var(--b-textarea-max-rows) * 1em\n  );\n  resize: none;\n}\n\n/* Prefix & Suffix */\n.b-textarea__prefix,\n.b-textarea__suffix {\n  display: inline-flex;\n  align-items: flex-start;\n  padding-top: var(--b-textarea-padding-y);\n  color: var(--b-textarea-fg);\n  flex-shrink: 0;\n}\n\n.b-textarea__prefix {\n  margin-left: var(--b-textarea-padding-x);\n}\n\n.b-textarea__suffix {\n  margin-right: var(--b-textarea-padding-x);\n}\n\n.b-textarea__prefix ~ .b-textarea__textarea {\n  padding-left: 4px;\n}\n\n/* Clear button */\n.b-textarea__clear-wrapper {\n  display: inline-flex;\n  align-items: flex-start;\n  flex-shrink: 0;\n  margin-top: var(--b-textarea-padding-y);\n  margin-right: var(--b-textarea-padding-x);\n}\n\n.b-textarea__clear {\n  display: inline-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-textarea-clear-color);\n  font-size: 14px;\n  line-height: 1;\n  transition: color 0.2s;\n}\n\n.b-textarea__clear:hover {\n  color: var(--b-textarea-clear-hover-color);\n}\n\n/* Count indicator — pinned bottom-right of the wrapper */\n.b-textarea__count {\n  position: absolute;\n  right: 8px;\n  bottom: 4px;\n  color: var(--b-textarea-count-color);\n  font-size: 0.857em;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.b-textarea__count--over {\n  color: var(--b-textarea-error-border-color);\n}\n\n/* Dark mode — data attribute on ancestor */\n[data-prefers-color='dark'] .b-textarea {\n  --b-textarea-bg: #141414;\n  --b-textarea-fg: rgba(255, 255, 255, 0.88);\n  --b-textarea-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-textarea-border-color: #424242;\n  --b-textarea-border-color-hover: #3c89e8;\n  --b-textarea-border-color-focus: #1668dc;\n  --b-textarea-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-textarea-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-textarea-disabled-fg: rgba(255, 255, 255, 0.25);\n  --b-textarea-clear-color: rgba(255, 255, 255, 0.25);\n  --b-textarea-clear-hover-color: rgba(255, 255, 255, 0.45);\n  --b-textarea-count-color: rgba(255, 255, 255, 0.65);\n  --b-textarea-error-border-color: #dc3838;\n  --b-textarea-error-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n  --b-textarea-warning-border-color: #d1a300;\n  --b-textarea-warning-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n  --b-textarea-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-textarea-filled-hover-bg: rgba(255, 255, 255, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-textarea {\n    --b-textarea-bg: #141414;\n    --b-textarea-fg: rgba(255, 255, 255, 0.88);\n    --b-textarea-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-textarea-border-color: #424242;\n    --b-textarea-border-color-hover: #3c89e8;\n    --b-textarea-border-color-focus: #1668dc;\n    --b-textarea-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-textarea-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-textarea-disabled-fg: rgba(255, 255, 255, 0.25);\n    --b-textarea-clear-color: rgba(255, 255, 255, 0.25);\n    --b-textarea-clear-hover-color: rgba(255, 255, 255, 0.45);\n    --b-textarea-count-color: rgba(255, 255, 255, 0.65);\n    --b-textarea-error-border-color: #dc3838;\n    --b-textarea-error-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n    --b-textarea-warning-border-color: #d1a300;\n    --b-textarea-warning-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n    --b-textarea-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-textarea-filled-hover-bg: rgba(255, 255, 255, 0.12);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-textarea__wrapper,\n  .b-textarea__clear {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system254.js

@@ -1,9 +1,14 @@
-import e from "./design-system14.js";
-import t from "./design-system252.js";
-/* empty css                 */
-//#region src/components/BTree/BTree.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-08bb45f2"]]);
+//#region src/components/BTimePicker/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Small = "sm", e.Medium = "md", e.Large = "lg", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.Outlined = "outlined", e.Filled = "filled", e.Borderless = "borderless", e.Underlined = "underlined", e;
+}({}), n = /* @__PURE__ */ function(e) {
+	return e.Error = "error", e.Warning = "warning", e;
+}({}), r = /* @__PURE__ */ function(e) {
+	return e.BottomLeft = "bottom-left", e.BottomRight = "bottom-right", e.TopLeft = "top-left", e.TopRight = "top-right", e;
+}({});
 //#endregion
-export { n as default };
+export { r as BTimePickerPlacement, e as BTimePickerSize, n as BTimePickerStatus, t as BTimePickerVariant };
 
 //# sourceMappingURL=design-system254.js.map

package/dist/design-system254.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system254.js","names":[],"sources":["../src/components/BTree/BTree.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue';\nimport type {\n  BTreeCheckedKeys,\n  BTreeCheckInfo,\n  BTreeDragInfo,\n  BTreeDropInfo,\n  BTreeExpandInfo,\n  BTreeFieldNames,\n  BTreeFlatNode,\n  BTreeNodeData,\n  BTreeNodeKey,\n  BTreeScrollToOptions,\n  BTreeSelectInfo,\n} from './types';\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nconst {\n  treeData = [],\n  fieldNames = {},\n  checkable = false,\n  checkStrictly = false,\n  checkedKeys: checkedKeysProp = undefined,\n  defaultCheckedKeys = [],\n  selectedKeys: selectedKeysProp = undefined,\n  defaultSelectedKeys = [],\n  expandedKeys: expandedKeysProp = undefined,\n  defaultExpandedKeys = [],\n  defaultExpandAll = false,\n  defaultExpandParent = true,\n  autoExpandParent = false,\n  multiple = false,\n  selectable = true,\n  disabled = false,\n  showIcon = false,\n  showLine = false,\n  blockNode = false,\n  draggable = false,\n  loadData = undefined,\n  loadedKeys: loadedKeysProp = undefined,\n  filterTreeNode = undefined,\n  height = undefined,\n  virtual: _virtual = false,\n  directory = false,\n  expandAction = 'click',\n} = defineProps<{\n  /** Tree node data array */\n  treeData?: BTreeNodeData[];\n  /** Custom field name mappings (key/title/children) */\n  fieldNames?: BTreeFieldNames;\n  /** Whether to show checkboxes */\n  checkable?: boolean;\n  /** Check parent/child independently */\n  checkStrictly?: boolean;\n  /** Controlled checked node keys */\n  checkedKeys?: BTreeNodeKey[] | BTreeCheckedKeys;\n  /** Default checked node keys (uncontrolled) */\n  defaultCheckedKeys?: BTreeNodeKey[];\n  /** Controlled selected node keys */\n  selectedKeys?: BTreeNodeKey[];\n  /** Default selected node keys (uncontrolled) */\n  defaultSelectedKeys?: BTreeNodeKey[];\n  /** Controlled expanded node keys */\n  expandedKeys?: BTreeNodeKey[];\n  /** Default expanded node keys (uncontrolled) */\n  defaultExpandedKeys?: BTreeNodeKey[];\n  /** Expand all nodes on mount */\n  defaultExpandAll?: boolean;\n  /** Auto expand parent of defaultExpandedKeys nodes */\n  defaultExpandParent?: boolean;\n  /** Auto expand parent when expandedKeys changes */\n  autoExpandParent?: boolean;\n  /** Allow multiple selection */\n  multiple?: boolean;\n  /** Allow node selection */\n  selectable?: boolean;\n  /** Disable entire tree */\n  disabled?: boolean;\n  /** Show node icons */\n  showIcon?: boolean;\n  /** Show connector lines */\n  showLine?: boolean;\n  /** Node takes full row width */\n  blockNode?: boolean;\n  /** Enable drag-and-drop */\n  draggable?: boolean;\n  /** Async load children */\n  loadData?: (node: BTreeNodeData) => Promise<void>;\n  /** Controlled loaded node keys */\n  loadedKeys?: BTreeNodeKey[];\n  /** Predicate to highlight nodes */\n  filterTreeNode?: (node: BTreeNodeData) => boolean;\n  /** Fixed height for virtual scroll (px) */\n  height?: number;\n  /** Enable virtual scroll (requires height) */\n  virtual?: boolean;\n  /** Enable DirectoryTree mode */\n  directory?: boolean;\n  /** DirectoryTree: expansion trigger (click | doubleClick | false) */\n  expandAction?: 'click' | 'doubleClick' | false;\n}>();\n\n// ─── Emits ────────────────────────────────────────────────────────────────────\n\nconst emit = defineEmits<{\n  /** Fires when check state changes */\n  check: [keys: BTreeNodeKey[] | BTreeCheckedKeys, info: BTreeCheckInfo];\n  /** Fires when expand state changes */\n  expand: [keys: BTreeNodeKey[], info: BTreeExpandInfo];\n  /** Fires when selection changes */\n  select: [keys: BTreeNodeKey[], info: BTreeSelectInfo];\n  /** Fires when async load finishes */\n  load: [keys: BTreeNodeKey[], info: { event: Event; node: BTreeNodeData }];\n  /** Fires on right-click */\n  rightClick: [info: { event: MouseEvent; node: BTreeNodeData }];\n  /** Fires on drag start */\n  dragStart: [info: BTreeDragInfo];\n  /** Fires when dragged over a node */\n  dragEnter: [info: { event: DragEvent; node: BTreeNodeData; expandedKeys: BTreeNodeKey[] }];\n  /** Fires while dragging over a node */\n  dragOver: [info: BTreeDragInfo];\n  /** Fires when leaving a node during drag */\n  dragLeave: [info: BTreeDragInfo];\n  /** Fires when drag ends */\n  dragEnd: [info: BTreeDragInfo];\n  /** Fires on drop */\n  drop: [info: BTreeDropInfo];\n  /** Fires on double-click */\n  dblclick: [event: MouseEvent, node: BTreeNodeData];\n  /** v-model:checkedKeys */\n  'update:checkedKeys': [keys: BTreeNodeKey[] | BTreeCheckedKeys];\n  /** v-model:selectedKeys */\n  'update:selectedKeys': [keys: BTreeNodeKey[]];\n  /** v-model:expandedKeys */\n  'update:expandedKeys': [keys: BTreeNodeKey[]];\n  /** v-model:loadedKeys */\n  'update:loadedKeys': [keys: BTreeNodeKey[]];\n}>();\n\n// ─── Slots ────────────────────────────────────────────────────────────────────\n\ndefineSlots<{\n  /** Default icon for all nodes */\n  icon(props: { node: BTreeNodeData }): unknown;\n  /** Custom switcher icon */\n  switcherIcon(props: { node: BTreeNodeData; expanded: boolean }): unknown;\n  /** Custom title renderer */\n  title(props: { node: BTreeNodeData }): unknown;\n}>();\n\n// ─── Resolved field names ─────────────────────────────────────────────────────\n\nconst fKey = computed(() => fieldNames.key ?? 'key');\nconst fTitle = computed(() => fieldNames.title ?? 'title');\nconst fChildren = computed(() => fieldNames.children ?? 'children');\n\nfunction nodeKey(n: BTreeNodeData): BTreeNodeKey {\n  return n[fKey.value] as BTreeNodeKey;\n}\nfunction nodeTitle(n: BTreeNodeData): string {\n  return (n[fTitle.value] as string) ?? '';\n}\nfunction nodeChildren(n: BTreeNodeData): BTreeNodeData[] | undefined {\n  return n[fChildren.value] as BTreeNodeData[] | undefined;\n}\n\n// ─── Internal state ───────────────────────────────────────────────────────────\n\nconst internalExpanded = ref<Set<BTreeNodeKey>>(new Set());\nconst internalSelected = ref<Set<BTreeNodeKey>>(new Set());\nconst internalChecked = ref<Set<BTreeNodeKey>>(new Set());\nconst internalHalfChecked = ref<Set<BTreeNodeKey>>(new Set());\nconst internalLoaded = ref<Set<BTreeNodeKey>>(new Set());\nconst loadingKeys = ref<Set<BTreeNodeKey>>(new Set());\nconst dragNodeKey = ref<BTreeNodeKey | null>(null);\n\n// Controlled getters\nconst isControlledExpanded = computed(() => expandedKeysProp !== undefined);\nconst isControlledSelected = computed(() => selectedKeysProp !== undefined);\nconst isControlledChecked = computed(() => checkedKeysProp !== undefined);\nconst isControlledLoaded = computed(() => loadedKeysProp !== undefined);\n\nconst activeExpanded = computed<Set<BTreeNodeKey>>(() => {\n  if (isControlledExpanded.value) return new Set(expandedKeysProp);\n  return internalExpanded.value;\n});\n\nconst activeSelected = computed<Set<BTreeNodeKey>>(() => {\n  if (isControlledSelected.value) return new Set(selectedKeysProp);\n  return internalSelected.value;\n});\n\nconst activeChecked = computed<Set<BTreeNodeKey>>(() => {\n  if (isControlledChecked.value) {\n    const raw = checkedKeysProp as\n      | BTreeNodeKey[]\n      | { checked: BTreeNodeKey[]; halfChecked: BTreeNodeKey[] };\n    if (Array.isArray(raw)) return new Set(raw);\n    return new Set(raw.checked);\n  }\n  return internalChecked.value;\n});\n\nconst activeHalfChecked = computed<Set<BTreeNodeKey>>(() => {\n  if (isControlledChecked.value) {\n    const raw = checkedKeysProp as\n      | BTreeNodeKey[]\n      | { checked: BTreeNodeKey[]; halfChecked: BTreeNodeKey[] };\n    if (!Array.isArray(raw) && 'halfChecked' in raw) return new Set(raw.halfChecked);\n  }\n  return internalHalfChecked.value;\n});\n\nconst activeLoaded = computed<Set<BTreeNodeKey>>(() => {\n  if (isControlledLoaded.value) return new Set(loadedKeysProp);\n  return internalLoaded.value;\n});\n\n// ─── Flatten tree ─────────────────────────────────────────────────────────────\n\nfunction flattenTree(nodes: BTreeNodeData[], depth = 0, parentVisible = true): BTreeFlatNode[] {\n  const result: BTreeFlatNode[] = [];\n  for (const node of nodes) {\n    const key = nodeKey(node);\n    const isExpanded = activeExpanded.value.has(key);\n    const visible = parentVisible;\n    result.push({ key, data: node, depth, visible });\n    const children = nodeChildren(node);\n    if (children?.length) {\n      result.push(...flattenTree(children, depth + 1, visible && isExpanded));\n    }\n  }\n  return result;\n}\n\nconst flatNodes = computed(() => flattenTree(treeData));\nconst visibleNodes = computed(() => flatNodes.value.filter((n) => n.visible));\n\n// ─── Mount: apply defaults ────────────────────────────────────────────────────\n\nfunction collectAllKeys(nodes: BTreeNodeData[]): BTreeNodeKey[] {\n  const keys: BTreeNodeKey[] = [];\n  for (const n of nodes) {\n    keys.push(nodeKey(n));\n    const children = nodeChildren(n);\n    if (children?.length) keys.push(...collectAllKeys(children));\n  }\n  return keys;\n}\n\nfunction collectParentKeys(nodes: BTreeNodeData[], targetKeys: Set<BTreeNodeKey>): BTreeNodeKey[] {\n  const parents: BTreeNodeKey[] = [];\n  function walk(nodes: BTreeNodeData[]) {\n    for (const n of nodes) {\n      const children = nodeChildren(n);\n      if (children?.length) {\n        const hasDescendant = children.some(\n          (c) => targetKeys.has(nodeKey(c)) || walk([c]) !== undefined,\n        );\n        if (hasDescendant) parents.push(nodeKey(n));\n        walk(children);\n      }\n    }\n  }\n  walk(nodes);\n  return parents;\n}\n\n// Initialise uncontrolled state once\nif (!isControlledExpanded.value) {\n  if (defaultExpandAll) {\n    internalExpanded.value = new Set(\n      collectAllKeys(treeData).filter((k) => {\n        const flat = flatNodes.value.find((n) => n.key === k);\n        return flat ? !!nodeChildren(flat.data)?.length : false;\n      }),\n    );\n  } else if (defaultExpandedKeys.length) {\n    const init = new Set<BTreeNodeKey>(defaultExpandedKeys);\n    if (defaultExpandParent) {\n      collectParentKeys(treeData, init).forEach((k) => init.add(k));\n    }\n    internalExpanded.value = init;\n  }\n}\nif (!isControlledSelected.value && defaultSelectedKeys.length) {\n  internalSelected.value = new Set(defaultSelectedKeys);\n}\nif (!isControlledChecked.value && defaultCheckedKeys.length) {\n  internalChecked.value = new Set(defaultCheckedKeys);\n  if (!checkStrictly) propagateChecks(internalChecked.value);\n}\n\n// Auto-expand parents when controlled expandedKeys change\nwatch(\n  () => expandedKeysProp,\n  (keys) => {\n    if (!autoExpandParent || !keys) return;\n    const set = new Set(keys);\n    collectParentKeys(treeData, set).forEach((k) => set.add(k));\n    emit('update:expandedKeys', [...set]);\n  },\n);\n\n// ─── Checkbox propagation ─────────────────────────────────────────────────────\n\nfunction propagateChecks(checked: Set<BTreeNodeKey>) {\n  // Bottom-up: compute half-checked from actual checked leaves\n  const half = new Set<BTreeNodeKey>();\n  function walk(nodes: BTreeNodeData[]): { all: boolean; some: boolean } {\n    let allChecked = true;\n    let someChecked = false;\n    for (const n of nodes) {\n      const key = nodeKey(n);\n      const children = nodeChildren(n);\n      if (children?.length) {\n        const sub = walk(children);\n        if (sub.all) {\n          checked.add(key);\n          someChecked = true;\n        } else if (sub.some) {\n          checked.delete(key);\n          half.add(key);\n          allChecked = false;\n          someChecked = true;\n        } else {\n          if (!checked.has(key)) allChecked = false;\n          else someChecked = true;\n        }\n      } else {\n        if (!checked.has(key)) allChecked = false;\n        else someChecked = true;\n      }\n    }\n    return { all: allChecked, some: someChecked };\n  }\n  walk(treeData);\n  internalHalfChecked.value = half;\n}\n\n// ─── Node helpers ─────────────────────────────────────────────────────────────\n\nfunction hasChildren(node: BTreeNodeData): boolean {\n  const ch = nodeChildren(node);\n  return !!ch?.length || (!!loadData && !node.isLeaf);\n}\n\nfunction isExpanded(key: BTreeNodeKey): boolean {\n  return activeExpanded.value.has(key);\n}\nfunction isSelected(key: BTreeNodeKey): boolean {\n  return activeSelected.value.has(key);\n}\nfunction isChecked(key: BTreeNodeKey): boolean {\n  return activeChecked.value.has(key);\n}\nfunction isHalfChecked(key: BTreeNodeKey): boolean {\n  return activeHalfChecked.value.has(key);\n}\nfunction isLoading(key: BTreeNodeKey): boolean {\n  return loadingKeys.value.has(key);\n}\nfunction isLoaded(key: BTreeNodeKey): boolean {\n  return activeLoaded.value.has(key);\n}\nfunction isFiltered(node: BTreeNodeData): boolean {\n  return filterTreeNode ? filterTreeNode(node) : false;\n}\n\n// ─── Expand / collapse ────────────────────────────────────────────────────────\n\nasync function toggleExpand(node: BTreeNodeData, event?: MouseEvent | KeyboardEvent) {\n  const key = nodeKey(node);\n  if (node.disabled || disabled) return;\n\n  const expanding = !isExpanded(key);\n\n  // Async load\n  if (expanding && loadData && !isLoaded(key) && !isLoading(key)) {\n    loadingKeys.value.add(key);\n    try {\n      await loadData(node);\n      if (!isControlledLoaded.value) internalLoaded.value.add(key);\n      emit('update:loadedKeys', [...activeLoaded.value, key]);\n    } finally {\n      loadingKeys.value.delete(key);\n    }\n  }\n\n  let nextSet: Set<BTreeNodeKey>;\n  if (isControlledExpanded.value) {\n    nextSet = new Set(expandedKeysProp);\n  } else {\n    nextSet = new Set(internalExpanded.value);\n  }\n\n  if (expanding) nextSet.add(key);\n  else nextSet.delete(key);\n\n  if (!isControlledExpanded.value) internalExpanded.value = nextSet;\n  emit('update:expandedKeys', [...nextSet]);\n\n  const info: BTreeExpandInfo = { expanded: expanding, node, event };\n  emit('expand', [...nextSet], info);\n}\n\n// ─── Select ───────────────────────────────────────────────────────────────────\n\nfunction handleSelect(node: BTreeNodeData, event: MouseEvent | KeyboardEvent) {\n  if (!selectable || node.selectable === false || node.disabled || disabled) return;\n  const key = nodeKey(node);\n\n  let nextSet: Set<BTreeNodeKey>;\n  if (isControlledSelected.value) {\n    nextSet = new Set(selectedKeysProp);\n  } else {\n    nextSet = new Set(internalSelected.value);\n  }\n\n  if (nextSet.has(key)) {\n    nextSet.delete(key);\n  } else {\n    if (!multiple) nextSet.clear();\n    nextSet.add(key);\n  }\n\n  if (!isControlledSelected.value) internalSelected.value = nextSet;\n  emit('update:selectedKeys', [...nextSet]);\n\n  const info: BTreeSelectInfo = {\n    event,\n    selected: nextSet.has(key),\n    node,\n    selectedNodes: flatNodes.value.filter((n) => nextSet.has(n.key)).map((n) => n.data),\n    nativeEvent: event,\n  };\n  emit('select', [...nextSet], info);\n}\n\n// ─── Check ────────────────────────────────────────────────────────────────────\n\nfunction handleCheck(node: BTreeNodeData, event: MouseEvent | KeyboardEvent) {\n  if (!checkable || node.disableCheckbox || node.disabled || disabled) return;\n  const key = nodeKey(node);\n\n  let nextChecked: Set<BTreeNodeKey>;\n  if (isControlledChecked.value) {\n    const raw = checkedKeysProp as\n      | BTreeNodeKey[]\n      | { checked: BTreeNodeKey[]; halfChecked: BTreeNodeKey[] };\n    nextChecked = new Set(Array.isArray(raw) ? raw : raw.checked);\n  } else {\n    nextChecked = new Set(internalChecked.value);\n  }\n\n  if (nextChecked.has(key)) {\n    nextChecked.delete(key);\n    // Uncheck all descendants\n    if (!checkStrictly) {\n      function uncheckDesc(nodes: BTreeNodeData[]) {\n        for (const n of nodes) {\n          nextChecked.delete(nodeKey(n));\n          const ch = nodeChildren(n);\n          if (ch?.length) uncheckDesc(ch);\n        }\n      }\n      const children = nodeChildren(node);\n      if (children?.length) uncheckDesc(children);\n    }\n  } else {\n    nextChecked.add(key);\n    // Check all descendants\n    if (!checkStrictly) {\n      function checkDesc(nodes: BTreeNodeData[]) {\n        for (const n of nodes) {\n          if (!n.disableCheckbox && !n.disabled) nextChecked.add(nodeKey(n));\n          const ch = nodeChildren(n);\n          if (ch?.length) checkDesc(ch);\n        }\n      }\n      const children = nodeChildren(node);\n      if (children?.length) checkDesc(children);\n    }\n  }\n\n  if (!checkStrictly && !isControlledChecked.value) {\n    propagateChecks(nextChecked);\n  }\n\n  const checkedNodes = flatNodes.value.filter((n) => nextChecked.has(n.key)).map((n) => n.data);\n\n  const info: BTreeCheckInfo = {\n    event,\n    node,\n    checked: nextChecked.has(key),\n    checkedNodes,\n    checkedNodesPositions: checkedNodes.map((n) => ({ node: n, pos: '0' })),\n    halfCheckedKeys: [...activeHalfChecked.value],\n    nativeEvent: event,\n  };\n\n  if (!isControlledChecked.value) internalChecked.value = nextChecked;\n\n  const emitValue: BTreeNodeKey[] | BTreeCheckedKeys = checkStrictly\n    ? { checked: [...nextChecked], halfChecked: [...activeHalfChecked.value] }\n    : [...nextChecked];\n\n  emit('update:checkedKeys', emitValue);\n  emit('check', emitValue, info);\n}\n\n// ─── Drag & Drop ──────────────────────────────────────────────────────────────\n\nfunction handleDragStart(event: DragEvent, node: BTreeNodeData) {\n  if (!draggable) return;\n  dragNodeKey.value = nodeKey(node);\n  event.dataTransfer?.setData('text/plain', String(nodeKey(node)));\n  emit('dragStart', { event, node });\n}\n\nfunction handleDragEnter(event: DragEvent, node: BTreeNodeData) {\n  if (!draggable) return;\n  event.preventDefault();\n  emit('dragEnter', { event, node, expandedKeys: [...activeExpanded.value] });\n}\n\nfunction handleDragOver(event: DragEvent, node: BTreeNodeData) {\n  if (!draggable) return;\n  event.preventDefault();\n  emit('dragOver', { event, node });\n}\n\nfunction handleDragLeave(event: DragEvent, node: BTreeNodeData) {\n  if (!draggable) return;\n  emit('dragLeave', { event, node });\n}\n\nfunction handleDragEnd(event: DragEvent, node: BTreeNodeData) {\n  if (!draggable) return;\n  dragNodeKey.value = null;\n  emit('dragEnd', { event, node });\n}\n\nfunction handleDrop(event: DragEvent, node: BTreeNodeData) {\n  if (!draggable) return;\n  event.preventDefault();\n  const dragFlat = flatNodes.value.find((n) => n.key === dragNodeKey.value);\n  if (!dragFlat) return;\n\n  emit('drop', {\n    event,\n    node,\n    dragNode: dragFlat.data,\n    dragNodesKeys: [dragFlat.key],\n    dropPosition: 0,\n    dropToGap: false,\n  });\n  dragNodeKey.value = null;\n}\n\n// ─── Keyboard navigation ──────────────────────────────────────────────────────\n\nconst treeRef = ref<HTMLElement | null>(null);\n\nconst focusedNodeKey = ref<BTreeNodeKey | null>(visibleNodes.value[0]?.key ?? null);\n\nfunction handleTreeKeydown(event: KeyboardEvent) {\n  const visible = visibleNodes.value;\n  if (!visible.length) return;\n\n  const currentIdx = visible.findIndex((n) => n.key === focusedNodeKey.value);\n  const current = visible[currentIdx];\n\n  switch (event.key) {\n    case 'ArrowDown': {\n      event.preventDefault();\n      const next = visible[currentIdx + 1];\n      if (next) {\n        focusedNodeKey.value = next.key;\n        nextTick(() => focusNode(next.key));\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      event.preventDefault();\n      const prev = visible[currentIdx - 1];\n      if (prev) {\n        focusedNodeKey.value = prev.key;\n        nextTick(() => focusNode(prev.key));\n      }\n      break;\n    }\n    case 'ArrowRight': {\n      event.preventDefault();\n      if (!current) break;\n      if (hasChildren(current.data) && !isExpanded(current.key)) {\n        toggleExpand(current.data, event);\n      } else if (isExpanded(current.key)) {\n        const firstChild = visible[currentIdx + 1];\n        if (firstChild?.depth > current.depth) {\n          focusedNodeKey.value = firstChild.key;\n          nextTick(() => focusNode(firstChild.key));\n        }\n      }\n      break;\n    }\n    case 'ArrowLeft': {\n      event.preventDefault();\n      if (!current) break;\n      if (isExpanded(current.key)) {\n        toggleExpand(current.data, event);\n      } else if (current.depth > 0) {\n        // Move to parent\n        for (let i = currentIdx - 1; i >= 0; i--) {\n          if (visible[i].depth < current.depth) {\n            focusedNodeKey.value = visible[i].key;\n            nextTick(() => focusNode(visible[i].key));\n            break;\n          }\n        }\n      }\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      event.preventDefault();\n      if (!current) break;\n      if (checkable) {\n        handleCheck(current.data, event);\n      } else if (selectable) {\n        handleSelect(current.data, event);\n      }\n      break;\n    }\n    case 'Home': {\n      event.preventDefault();\n      if (visible[0]) {\n        focusedNodeKey.value = visible[0].key;\n        nextTick(() => focusNode(visible[0].key));\n      }\n      break;\n    }\n    case 'End': {\n      event.preventDefault();\n      const last = visible[visible.length - 1];\n      if (last) {\n        focusedNodeKey.value = last.key;\n        nextTick(() => focusNode(last.key));\n      }\n      break;\n    }\n  }\n}\n\nfunction focusNode(key: BTreeNodeKey) {\n  const el = treeRef.value?.querySelector<HTMLElement>(\n    `[data-node-key=\"${String(key).replace(/[\"\\\\]/g, '\\\\$&')}\"]`,\n  );\n  el?.focus();\n}\n\n// ─── Directory-mode: click/dblclick expand ────────────────────────────────────\n\nfunction handleNodeClick(node: BTreeNodeData, event: MouseEvent) {\n  if (directory && expandAction === 'click' && hasChildren(node)) {\n    toggleExpand(node, event);\n  }\n  handleSelect(node, event);\n}\n\nfunction handleNodeDblClick(node: BTreeNodeData, event: MouseEvent) {\n  if (directory && expandAction === 'doubleClick' && hasChildren(node)) {\n    toggleExpand(node, event);\n  }\n  emit('dblclick', event, node);\n}\n\n// ─── Scroll to ────────────────────────────────────────────────────────────────\n\nfunction scrollTo(opts: BTreeScrollToOptions) {\n  nextTick(() => {\n    const el = treeRef.value?.querySelector<HTMLElement>(\n      `[data-node-key=\"${String(opts.key).replace(/[\"\\\\]/g, '\\\\$&')}\"]`,\n    );\n    const alignMap = { top: 'start', bottom: 'end', auto: 'nearest' } as const;\n    el?.scrollIntoView?.({ block: alignMap[opts.align ?? 'auto'] });\n  });\n}\n\ndefineExpose({ scrollTo });\n\n// ─── Right click ─────────────────────────────────────────────────────────────\n\nfunction handleRightClick(event: MouseEvent, node: BTreeNodeData) {\n  event.preventDefault();\n  emit('rightClick', { event, node });\n}\n</script>\n\n<template>\n  <div\n    ref=\"treeRef\"\n    class=\"b-tree\"\n    :class=\"{\n      'b-tree--checkable': checkable,\n      'b-tree--show-line': showLine,\n      'b-tree--block-node': blockNode,\n      'b-tree--directory': directory,\n      'b-tree--disabled': disabled,\n    }\"\n    role=\"tree\"\n    :aria-multiselectable=\"multiple || undefined\"\n    :style=\"height ? { height: `${height}px`, overflowY: 'auto' } : undefined\"\n    @keydown=\"handleTreeKeydown\"\n  >\n    <template v-for=\"flatNode in visibleNodes\" :key=\"flatNode.key\">\n      <div\n        :data-node-key=\"String(flatNode.key)\"\n        class=\"b-tree__node\"\n        :class=\"{\n          'b-tree__node--selected': isSelected(flatNode.key),\n          'b-tree__node--checked': isChecked(flatNode.key),\n          'b-tree__node--half-checked': isHalfChecked(flatNode.key),\n          'b-tree__node--expanded': isExpanded(flatNode.key),\n          'b-tree__node--disabled': flatNode.data.disabled || disabled,\n          'b-tree__node--leaf': !hasChildren(flatNode.data),\n          'b-tree__node--loading': isLoading(flatNode.key),\n          'b-tree__node--dragging': draggable && dragNodeKey === flatNode.key,\n          'b-tree__node--filtered': isFiltered(flatNode.data),\n          'b-tree__node--block': blockNode,\n        }\"\n        role=\"treeitem\"\n        :aria-expanded=\"hasChildren(flatNode.data) ? isExpanded(flatNode.key) : undefined\"\n        :aria-selected=\"selectable ? isSelected(flatNode.key) : undefined\"\n        :aria-checked=\"checkable ? isChecked(flatNode.key) : undefined\"\n        :aria-disabled=\"flatNode.data.disabled || disabled || undefined\"\n        :aria-level=\"flatNode.depth + 1\"\n        :tabindex=\"flatNode.key === focusedNodeKey ? 0 : -1\"\n        :style=\"{ '--b-tree-node-indent': `${flatNode.depth * 24}px` }\"\n        :draggable=\"draggable ? 'true' : undefined\"\n        @click.stop=\"handleNodeClick(flatNode.data, $event)\"\n        @dblclick.stop=\"handleNodeDblClick(flatNode.data, $event)\"\n        @contextmenu.stop=\"handleRightClick($event, flatNode.data)\"\n        @dragstart=\"handleDragStart($event, flatNode.data)\"\n        @dragenter=\"handleDragEnter($event, flatNode.data)\"\n        @dragover=\"handleDragOver($event, flatNode.data)\"\n        @dragleave=\"handleDragLeave($event, flatNode.data)\"\n        @dragend=\"handleDragEnd($event, flatNode.data)\"\n        @drop=\"handleDrop($event, flatNode.data)\"\n      >\n        <!-- Drag handle (visible on row hover when draggable) -->\n        <span v-if=\"draggable\" class=\"b-tree__drag-handle\" aria-hidden=\"true\">\n          <!-- HolderOutlined: 2×3 dot grid -->\n          <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"5\" cy=\"3.5\" r=\"1.25\" />\n            <circle cx=\"5\" cy=\"8\" r=\"1.25\" />\n            <circle cx=\"5\" cy=\"12.5\" r=\"1.25\" />\n            <circle cx=\"11\" cy=\"3.5\" r=\"1.25\" />\n            <circle cx=\"11\" cy=\"8\" r=\"1.25\" />\n            <circle cx=\"11\" cy=\"12.5\" r=\"1.25\" />\n          </svg>\n        </span>\n\n        <!-- Indent spacer -->\n        <span class=\"b-tree__indent\" aria-hidden=\"true\" />\n\n        <!-- Switcher (expand/collapse) -->\n        <span\n          v-if=\"hasChildren(flatNode.data)\"\n          class=\"b-tree__switcher\"\n          :class=\"{\n            'b-tree__switcher--expanded': isExpanded(flatNode.key),\n            'b-tree__switcher--loading': isLoading(flatNode.key),\n          }\"\n          aria-hidden=\"true\"\n          @click.stop=\"toggleExpand(flatNode.data, $event)\"\n        >\n          <slot\n            v-if=\"!isLoading(flatNode.key)\"\n            name=\"switcherIcon\"\n            :node=\"flatNode.data\"\n            :expanded=\"isExpanded(flatNode.key)\"\n          >\n            <!-- Default chevron SVG -->\n            <svg\n              class=\"b-tree__switcher-icon\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              aria-hidden=\"true\"\n            >\n              <path\n                d=\"M9 18L15 12L9 6\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </slot>\n          <!-- Loading spinner -->\n          <svg\n            v-if=\"isLoading(flatNode.key)\"\n            class=\"b-tree__switcher-icon b-tree__switcher-icon--spin\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"9\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-dasharray=\"42\"\n              stroke-dashoffset=\"14\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </span>\n        <!-- Leaf placeholder -->\n        <span\n          v-else-if=\"showLine\"\n          class=\"b-tree__switcher b-tree__switcher--leaf\"\n          aria-hidden=\"true\"\n        />\n\n        <!-- Checkbox -->\n        <span\n          v-if=\"checkable && flatNode.data.checkable !== false\"\n          class=\"b-tree__checkbox\"\n          :class=\"{\n            'b-tree__checkbox--checked': isChecked(flatNode.key),\n            'b-tree__checkbox--indeterminate': isHalfChecked(flatNode.key),\n            'b-tree__checkbox--disabled':\n              flatNode.data.disableCheckbox || flatNode.data.disabled || disabled,\n          }\"\n          role=\"checkbox\"\n          :aria-label=\"nodeTitle(flatNode.data)\"\n          :aria-checked=\"isHalfChecked(flatNode.key) ? 'mixed' : isChecked(flatNode.key)\"\n          :aria-disabled=\"\n            flatNode.data.disableCheckbox || flatNode.data.disabled || disabled || undefined\n          \"\n          tabindex=\"-1\"\n          @click.stop=\"handleCheck(flatNode.data, $event)\"\n          @keydown.enter.prevent=\"handleCheck(flatNode.data, $event)\"\n          @keydown.space.prevent=\"handleCheck(flatNode.data, $event)\"\n        >\n          <span class=\"b-tree__checkbox-inner\" aria-hidden=\"true\" />\n        </span>\n\n        <!-- Icon -->\n        <span\n          v-if=\"showIcon || flatNode.data.icon || $slots.icon\"\n          class=\"b-tree__icon\"\n          aria-hidden=\"true\"\n        >\n          <slot name=\"icon\" :node=\"flatNode.data\">\n            <span v-if=\"flatNode.data.icon\">{{ flatNode.data.icon }}</span>\n          </slot>\n        </span>\n\n        <!-- Title -->\n        <span\n          class=\"b-tree__title\"\n          :class=\"{ 'b-tree__title--filtered': isFiltered(flatNode.data) }\"\n        >\n          <slot name=\"title\" :node=\"flatNode.data\">\n            {{ nodeTitle(flatNode.data) }}\n          </slot>\n        </span>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style scoped>\n/* ─── Root ──────────────────────────────────────────────────────────────────── */\n.b-tree {\n  /* Layout */\n  --b-tree-indent-size: 24px;\n  --b-tree-node-height: 24px;\n  --b-tree-switcher-size: 24px;\n  --b-tree-checkbox-size: 16px;\n  --b-tree-icon-size: 14px;\n  --b-tree-gap: 4px;\n  --b-tree-border-radius: 6px;\n  --b-tree-font-size: 14px;\n\n  /* Colors – light mode */\n  --b-tree-node-hover-bg: oklch(95% 0.003 264);\n  --b-tree-node-hover-color: oklch(20% 0.014 264);\n  --b-tree-node-selected-bg: oklch(94% 0.08 254);\n  --b-tree-node-selected-color: oklch(20% 0.014 264);\n  --b-tree-node-disabled-color: oklch(70% 0.005 264);\n  --b-tree-switcher-color: oklch(55% 0.008 264);\n  --b-tree-checkbox-border: oklch(75% 0.008 264);\n  --b-tree-checkbox-bg: oklch(100% 0 0);\n  --b-tree-checkbox-checked-bg: oklch(55% 0.22 260);\n  --b-tree-checkbox-checked-border: oklch(55% 0.22 260);\n  --b-tree-checkbox-indeterminate-bg: oklch(55% 0.22 260);\n  --b-tree-line-color: oklch(88% 0.006 264);\n  --b-tree-title-color: oklch(20% 0.014 264);\n  --b-tree-title-filtered-color: oklch(55% 0.22 260);\n  --b-tree-directory-selected-bg: oklch(55% 0.22 260);\n  --b-tree-directory-selected-color: oklch(100% 0 0);\n\n  /* Motion */\n  --b-tree-transition-duration: 200ms;\n  --b-tree-spin-duration: 700ms;\n\n  display: block;\n  font-size: var(--b-tree-font-size);\n  line-height: var(--b-tree-node-height);\n  color: var(--b-tree-title-color);\n  outline: none;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-tree {\n  --b-tree-node-hover-bg: oklch(28% 0.012 264);\n  --b-tree-node-hover-color: oklch(92% 0.006 264);\n  --b-tree-node-selected-bg: oklch(30% 0.06 254);\n  --b-tree-node-selected-color: oklch(92% 0.006 264);\n  --b-tree-node-disabled-color: oklch(45% 0.005 264);\n  --b-tree-switcher-color: oklch(65% 0.008 264);\n  --b-tree-checkbox-border: oklch(45% 0.008 264);\n  --b-tree-checkbox-bg: oklch(22% 0.012 264);\n  --b-tree-checkbox-checked-bg: oklch(55% 0.22 260);\n  --b-tree-checkbox-checked-border: oklch(55% 0.22 260);\n  --b-tree-checkbox-indeterminate-bg: oklch(55% 0.22 260);\n  --b-tree-line-color: oklch(35% 0.008 264);\n  --b-tree-title-color: oklch(92% 0.006 264);\n  --b-tree-title-filtered-color: oklch(65% 0.22 260);\n  --b-tree-directory-selected-bg: oklch(45% 0.22 260);\n  --b-tree-directory-selected-color: oklch(100% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-tree {\n    --b-tree-node-hover-bg: oklch(28% 0.012 264);\n    --b-tree-node-hover-color: oklch(92% 0.006 264);\n    --b-tree-node-selected-bg: oklch(30% 0.06 254);\n    --b-tree-node-selected-color: oklch(92% 0.006 264);\n    --b-tree-node-disabled-color: oklch(45% 0.005 264);\n    --b-tree-switcher-color: oklch(65% 0.008 264);\n    --b-tree-checkbox-border: oklch(45% 0.008 264);\n    --b-tree-checkbox-bg: oklch(22% 0.012 264);\n    --b-tree-checkbox-checked-bg: oklch(55% 0.22 260);\n    --b-tree-checkbox-checked-border: oklch(55% 0.22 260);\n    --b-tree-checkbox-indeterminate-bg: oklch(55% 0.22 260);\n    --b-tree-line-color: oklch(35% 0.008 264);\n    --b-tree-title-color: oklch(92% 0.006 264);\n    --b-tree-title-filtered-color: oklch(65% 0.22 260);\n    --b-tree-directory-selected-bg: oklch(45% 0.22 260);\n    --b-tree-directory-selected-color: oklch(100% 0 0);\n  }\n}\n\n/* ─── Node ───────────────────────────────────────────────────────────────────── */\n.b-tree__node {\n  display: flex;\n  align-items: center;\n  gap: var(--b-tree-gap);\n  height: var(--b-tree-node-height);\n  padding-inline-start: var(--b-tree-node-indent);\n  border-radius: var(--b-tree-border-radius);\n  cursor: pointer;\n  outline: none;\n  transition:\n    background-color var(--b-tree-transition-duration) ease,\n    color var(--b-tree-transition-duration) ease;\n  user-select: none;\n  position: relative;\n}\n\n.b-tree__node:hover {\n  background-color: var(--b-tree-node-hover-bg);\n  color: var(--b-tree-node-hover-color);\n}\n\n.b-tree__node:focus-visible {\n  outline: 2px solid var(--b-tree-checkbox-checked-bg);\n  outline-offset: -1px;\n}\n\n.b-tree__node--selected {\n  background-color: var(--b-tree-node-selected-bg);\n  color: var(--b-tree-node-selected-color);\n  font-weight: 500;\n}\n\n.b-tree__node--selected:hover {\n  background-color: var(--b-tree-node-selected-bg);\n}\n\n.b-tree__node--disabled {\n  cursor: not-allowed;\n  color: var(--b-tree-node-disabled-color);\n}\n\n.b-tree__node--disabled:hover {\n  background-color: transparent;\n}\n\n.b-tree__node--block {\n  padding-inline-end: 8px;\n}\n\n/* ─── Directory mode selected ───────────────────────────────────────────────── */\n.b-tree--directory .b-tree__node--selected {\n  background-color: var(--b-tree-directory-selected-bg);\n  color: var(--b-tree-directory-selected-color);\n}\n\n.b-tree--directory .b-tree__node--selected:hover {\n  background-color: var(--b-tree-directory-selected-bg);\n}\n\n/* ─── Indent ─────────────────────────────────────────────────────────────────── */\n.b-tree__indent {\n  display: inline-block;\n  flex-shrink: 0;\n}\n\n/* ─── Switcher ───────────────────────────────────────────────────────────────── */\n.b-tree__switcher {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--b-tree-switcher-size);\n  height: var(--b-tree-switcher-size);\n  color: var(--b-tree-switcher-color);\n  transition: color var(--b-tree-transition-duration) ease;\n}\n\n.b-tree__switcher:hover {\n  color: var(--b-tree-checkbox-checked-bg);\n}\n\n.b-tree__switcher--leaf {\n  pointer-events: none;\n}\n\n.b-tree__switcher-icon {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  transition: transform var(--b-tree-transition-duration) ease;\n}\n\n.b-tree__switcher--expanded .b-tree__switcher-icon:not(.b-tree__switcher-icon--spin) {\n  transform: rotate(90deg);\n}\n\n/* Loading spinner */\n@keyframes b-tree-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.b-tree__switcher-icon--spin {\n  animation: b-tree-spin var(--b-tree-spin-duration) linear infinite;\n}\n\n/* ─── Show lines ─────────────────────────────────────────────────────────────── */\n.b-tree--show-line .b-tree__node:not(:last-child)::before {\n  content: '';\n  position: absolute;\n  inset-inline-start: calc(var(--b-tree-node-indent) + var(--b-tree-switcher-size) / 2);\n  top: var(--b-tree-node-height);\n  width: 1px;\n  height: var(--b-tree-node-height);\n  background-color: var(--b-tree-line-color);\n  pointer-events: none;\n}\n\n/* ─── Checkbox ───────────────────────────────────────────────────────────────── */\n.b-tree__checkbox {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  cursor: pointer;\n  line-height: 1;\n}\n\n.b-tree__checkbox--disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.b-tree__checkbox-inner {\n  display: inline-block;\n  width: var(--b-tree-checkbox-size);\n  height: var(--b-tree-checkbox-size);\n  border: 1.5px solid var(--b-tree-checkbox-border);\n  border-radius: 3px;\n  background-color: var(--b-tree-checkbox-bg);\n  position: relative;\n  transition:\n    border-color var(--b-tree-transition-duration) ease,\n    background-color var(--b-tree-transition-duration) ease;\n}\n\n/* Checked tick */\n.b-tree__checkbox--checked .b-tree__checkbox-inner {\n  border-color: var(--b-tree-checkbox-checked-border);\n  background-color: var(--b-tree-checkbox-checked-bg);\n}\n\n.b-tree__checkbox--checked .b-tree__checkbox-inner::after {\n  content: '';\n  position: absolute;\n  inset-inline-start: 4px;\n  top: 1px;\n  width: 5px;\n  height: 8px;\n  border: 2px solid #fff;\n  border-top: none;\n  border-inline-start: none;\n  transform: rotate(45deg);\n}\n\n/* Indeterminate dash */\n.b-tree__checkbox--indeterminate .b-tree__checkbox-inner {\n  border-color: var(--b-tree-checkbox-indeterminate-bg);\n  background-color: var(--b-tree-checkbox-indeterminate-bg);\n}\n\n.b-tree__checkbox--indeterminate .b-tree__checkbox-inner::after {\n  content: '';\n  position: absolute;\n  inset-inline-start: 2px;\n  top: 50%;\n  width: calc(100% - 4px);\n  height: 2px;\n  background-color: #fff;\n  transform: translateY(-50%);\n}\n\n/* ─── Icon ───────────────────────────────────────────────────────────────────── */\n.b-tree__icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  font-size: var(--b-tree-icon-size);\n}\n\n/* ─── Title ──────────────────────────────────────────────────────────────────── */\n.b-tree__title {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: inherit;\n}\n\n.b-tree__title--filtered {\n  color: var(--b-tree-title-filtered-color);\n  font-weight: 500;\n}\n\n/* ─── Drag handle ─────────────────────────────────────────────────────────── */\n.b-tree__drag-handle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 12px;\n  height: var(--b-tree-node-height);\n  color: var(--b-tree-switcher-color);\n  cursor: grab;\n}\n\n.b-tree__drag-handle svg {\n  width: 12px;\n  height: 12px;\n  display: block;\n}\n\n.b-tree__drag-handle:active {\n  cursor: grabbing;\n}\n\n/* ─── Dragging node ──────────────────────────────────────────────────────────── */\n.b-tree__node--dragging {\n  opacity: 0.5;\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tree {\n    --b-tree-transition-duration: 0ms;\n    --b-tree-spin-duration: 0ms;\n  }\n\n  .b-tree__switcher-icon {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system254.js","names":[],"sources":["../src/components/BTimePicker/types.ts"],"sourcesContent":["export enum BTimePickerSize {\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n}\n\nexport enum BTimePickerVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n  Underlined = 'underlined',\n}\n\nexport enum BTimePickerStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport enum BTimePickerPlacement {\n  BottomLeft = 'bottom-left',\n  BottomRight = 'bottom-right',\n  TopLeft = 'top-left',\n  TopRight = 'top-right',\n}\n\nexport interface BTimePickerDisabledTime {\n  disabledHours?: () => number[];\n  disabledMinutes?: (hour: number) => number[];\n  disabledSeconds?: (hour: number, minute: number) => number[];\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,MACA,EAAA,SAAA,MACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA,cACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,eACA,EAAA,cAAA,gBACA,EAAA,UAAA,YACA,EAAA,WAAA;KACD"}