@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system169.js

@@ -1,9 +1,170 @@
-import e from "./design-system14.js";
-import t from "./design-system167.js";
-/* empty css                 */
-//#region src/components/BRadio/BRadioButton.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-401aa983"]]);
+import { BCommonSize as e } from "./design-system3.js";
+import { useComponentId as t } from "./design-system10.js";
+import { Fragment as n, computed as r, createElementBlock as i, defineComponent as a, mergeModels as o, nextTick as s, normalizeClass as c, onMounted as l, openBlock as u, ref as d, renderList as f, useModel as p, watch as m } from "vue";
+//#region src/components/BPinInput/BPinInput.vue?vue&type=script&setup=true&lang.ts
+var h = [
+	"id",
+	"aria-label",
+	"aria-disabled"
+], g = [
+	"value",
+	"type",
+	"inputmode",
+	"pattern",
+	"disabled",
+	"autocomplete",
+	"aria-label",
+	"onInput",
+	"onKeydown",
+	"onPaste"
+], _ = /* @__PURE__ */ a({
+	inheritAttrs: !1,
+	__name: "BPinInput",
+	props: /* @__PURE__ */ o({
+		length: { default: 6 },
+		mask: {
+			type: Boolean,
+			default: !1
+		},
+		type: { default: "number" },
+		size: { default: () => e.Medium },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		autoFocus: {
+			type: Boolean,
+			default: !1
+		},
+		id: {},
+		ariaLabel: { default: "PIN entry" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ o(["complete"], ["update:modelValue"]),
+	setup(e, { expose: a, emit: o }) {
+		let _ = o, v = p(e, "modelValue"), { componentUID: y } = t(), b = r(() => e.id ?? `b-pin-input-${y.value}`), x = d([]), S = r(() => {
+			let t = v.value ?? "", n = Array.from({ length: e.length });
+			for (let r = 0; r < e.length; r++) n[r] = t[r] ?? "";
+			return n;
+		}), C = (t) => t ? e.type === "number" ? /[0-9]/.test(t) ? t : "" : e.type === "alphanumeric" ? /[A-Za-z0-9]/.test(t) ? t : "" : t.length === 1 ? t : "" : "", w = (t) => e.type === "number" ? (t.match(/[0-9]/g) ?? []).join("") : e.type === "alphanumeric" ? (t.match(/[A-Za-z0-9]/g) ?? []).join("") : t, T = r(() => e.type === "number" ? "numeric" : "text"), E = r(() => e.type === "number" ? "[0-9]*" : void 0), D = r(() => e.mask ? "password" : "text"), O = (t) => {
+			let n = t.join("");
+			n !== v.value && (v.value = n, n.length === e.length && t.every((e) => e.length === 1) && _("complete", n));
+		}, k = (e) => {
+			let t = x.value[e];
+			t && !t.disabled && (t.focus(), t.select());
+		}, A = (t, n) => {
+			let r = t.target, i = r.value, a = C(i.length > 0 ? i[i.length - 1] : "");
+			r.value = a;
+			let o = [...S.value];
+			o[n] = a, O(o), a && n < e.length - 1 && s(() => k(n + 1));
+		}, j = (t, n) => {
+			let r = t.key;
+			if (r === "Backspace") {
+				if (S.value[n]) {
+					let e = [...S.value];
+					e[n] = "", O(e), t.preventDefault();
+				} else if (n > 0) {
+					t.preventDefault();
+					let e = [...S.value];
+					e[n - 1] = "", O(e), s(() => k(n - 1));
+				}
+				return;
+			}
+			if (r === "ArrowLeft" && n > 0) {
+				t.preventDefault(), k(n - 1);
+				return;
+			}
+			if (r === "ArrowRight" && n < e.length - 1) {
+				t.preventDefault(), k(n + 1);
+				return;
+			}
+			if (r === "Home") {
+				t.preventDefault(), k(0);
+				return;
+			}
+			r === "End" && (t.preventDefault(), k(e.length - 1));
+		}, M = (t, n) => {
+			t.preventDefault();
+			let r = w(t.clipboardData?.getData("text") ?? "");
+			if (!r) return;
+			let i = [...S.value], a = n;
+			for (let t of r) {
+				if (a >= e.length) break;
+				i[a] = t, a += 1;
+			}
+			O(i);
+			let o = Math.min(a, e.length - 1);
+			s(() => k(o));
+		}, N = (e) => {
+			e.target.select();
+		};
+		m(() => v.value, (t) => {
+			let n = w(t ?? "").slice(0, e.length);
+			n !== t && (v.value = n);
+		}, { immediate: !0 });
+		let P = () => {
+			for (let t = 0; t < e.length; t++) {
+				let e = x.value[t];
+				if (e && !e.disabled) {
+					e.focus(), e.select();
+					return;
+				}
+			}
+		};
+		return l(() => {
+			e.autoFocus && s(() => P());
+		}), a({
+			focus: (t) => {
+				if (t === void 0) {
+					P();
+					return;
+				}
+				t < 0 || t >= e.length || k(t);
+			},
+			clear: () => {
+				v.value !== "" && (v.value = ""), s(() => P());
+			},
+			focusFirst: P,
+			focusLast: () => {
+				for (let t = e.length - 1; t >= 0; t--) {
+					let e = x.value[t];
+					if (e && !e.disabled) {
+						e.focus(), e.select();
+						return;
+					}
+				}
+			}
+		}), (t, r) => (u(), i("div", {
+			id: b.value,
+			class: c(["b-pin-input", [`b-pin-input--${e.size}`, { "b-pin-input--disabled": e.disabled }]]),
+			role: "group",
+			"aria-label": e.ariaLabel,
+			"aria-disabled": e.disabled || void 0
+		}, [(u(!0), i(n, null, f(S.value, (t, n) => (u(), i("input", {
+			key: n,
+			ref_for: !0,
+			ref: (e) => {
+				e && (x.value[n] = e);
+			},
+			value: t,
+			type: D.value,
+			inputmode: T.value,
+			pattern: E.value,
+			disabled: e.disabled,
+			autocomplete: n === 0 ? "one-time-code" : "off",
+			maxlength: "1",
+			class: "b-pin-input__cell",
+			"aria-label": e.type === "number" ? `Digit ${n + 1} of ${e.length}` : `Character ${n + 1} of ${e.length}`,
+			onInput: (e) => A(e, n),
+			onKeydown: (e) => j(e, n),
+			onPaste: (e) => M(e, n),
+			onFocus: N
+		}, null, 40, g))), 128))], 10, h));
+	}
+});
 //#endregion
-export { n as default };
+export { _ as default };
 
 //# sourceMappingURL=design-system169.js.map

package/dist/design-system169.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system169.js","names":[],"sources":["../src/components/BRadio/BRadioButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, inject } from 'vue';\nimport { B_RADIO_GROUP_KEY, type BRadioGroupContext } from './types';\n\n//#region Props\nconst {\n  id = '',\n  disabled = false,\n  value = '',\n  name = '',\n} = defineProps<{\n  /** Custom id attribute for the radio button input. */\n  id?: string;\n  /** Whether the radio button is disabled. */\n  disabled?: boolean;\n  /** Value when used inside BRadioGroup. */\n  value?: string | number;\n  /** The name attribute for the input element. */\n  name?: string;\n}>();\n\n/**\n * The checked state of the radio button.\n */\nconst model = defineModel<boolean>({ default: false });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n}>();\n//#endregion\n\n//#region Group integration\nconst group = inject<BRadioGroupContext | null>(B_RADIO_GROUP_KEY, null);\n\nconst isDisabled = computed(() => disabled || group?.disabled.value || false);\nconst inputName = computed(() => name || group?.name.value || '');\nconst groupSize = computed(() => group?.size.value || 'middle');\nconst groupButtonStyle = computed(() => group?.buttonStyle.value || 'outline');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value === value;\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id || `b-radio-button-${componentUID.value}`);\n//#endregion\n\n//#region Handlers\nfunction handleChange(event: Event) {\n  if (isDisabled.value) return;\n\n  if (group) {\n    group.setValue(value);\n  } else {\n    model.value = true;\n  }\n  emit('change', true, event);\n}\n//#endregion\n</script>\n\n<template>\n  <label\n    class=\"b-radio-button b:relative b:inline-flex b:cursor-pointer b:items-center b:justify-center b:leading-none b:select-none\"\n    :class=\"[\n      `b-radio-button--${groupSize}`,\n      `b-radio-button--${groupButtonStyle}`,\n      {\n        'b-radio-button--checked': isChecked,\n        'b-radio-button--disabled b:cursor-not-allowed': isDisabled,\n      },\n    ]\"\n    :for=\"inputId\"\n  >\n    <input\n      :id=\"inputId\"\n      type=\"radio\"\n      class=\"b-radio-button__input\"\n      :checked=\"isChecked\"\n      :disabled=\"isDisabled\"\n      :name=\"inputName\"\n      :value=\"value\"\n      @change=\"handleChange\"\n    />\n    <span class=\"b-radio-button__label\">\n      <slot />\n    </span>\n  </label>\n</template>\n\n<style scoped>\n.b-radio-button {\n  --b-radio-button-bg: #ffffff;\n  --b-radio-button-checked-bg: #ffffff;\n  --b-radio-button-color: rgba(0, 0, 0, 0.88);\n  --b-radio-button-color-primary: #0958d9;\n  --b-radio-button-color-primary-hover: #0958d9;\n  --b-radio-button-color-primary-active: #003eb3;\n  --b-radio-button-color-border: #d9d9d9;\n  --b-radio-button-color-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-radio-button-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-button-solid-checked-bg: #0958d9;\n  --b-radio-button-solid-checked-color: #fff;\n  --b-radio-button-solid-checked-hover-bg: #003eb3;\n  --b-radio-button-solid-checked-active-bg: #002b80;\n  --b-radio-button-padding-inline: 15px;\n  --b-radio-button-border-width: 1px;\n  --b-radio-button-transition-duration: 0.2s;\n\n  border: var(--b-radio-button-border-width) solid var(--b-radio-button-color-border);\n  background-color: var(--b-radio-button-bg);\n  color: var(--b-radio-button-color);\n  padding-inline: var(--b-radio-button-padding-inline);\n  transition:\n    color var(--b-radio-button-transition-duration) ease-in-out,\n    background-color var(--b-radio-button-transition-duration) ease-in-out,\n    border-color var(--b-radio-button-transition-duration) ease-in-out;\n  margin-inline-start: calc(-1 * var(--b-radio-button-border-width));\n}\n\n.b-radio-button:first-child {\n  margin-inline-start: 0;\n  border-start-start-radius: 6px;\n  border-end-start-radius: 6px;\n}\n\n.b-radio-button:last-child {\n  border-start-end-radius: 6px;\n  border-end-end-radius: 6px;\n}\n\n/* Sizes */\n.b-radio-button--large {\n  padding-block: 8px;\n  font-size: 16px;\n  line-height: 1.5;\n}\n\n.b-radio-button--middle {\n  padding-block: 5px;\n  font-size: 14px;\n  line-height: 1.5714;\n}\n\n.b-radio-button--small {\n  padding-block: 1px;\n  font-size: 14px;\n  line-height: 1.5714;\n}\n\n/* Outline style — checked */\n.b-radio-button--outline.b-radio-button--checked {\n  color: var(--b-radio-button-color-primary);\n  border-color: var(--b-radio-button-color-primary);\n  background-color: var(--b-radio-button-checked-bg);\n  z-index: 1;\n}\n\n.b-radio-button--outline:not(.b-radio-button--disabled):hover {\n  color: var(--b-radio-button-color-primary-hover);\n  border-color: var(--b-radio-button-color-primary-hover);\n  z-index: 1;\n}\n\n/* Solid style — checked */\n.b-radio-button--solid.b-radio-button--checked {\n  color: var(--b-radio-button-solid-checked-color);\n  background-color: var(--b-radio-button-solid-checked-bg);\n  border-color: var(--b-radio-button-solid-checked-bg);\n  z-index: 1;\n}\n\n.b-radio-button--solid.b-radio-button--checked:hover {\n  background-color: var(--b-radio-button-solid-checked-hover-bg);\n  border-color: var(--b-radio-button-solid-checked-hover-bg);\n}\n\n.b-radio-button--solid:not(.b-radio-button--checked):not(.b-radio-button--disabled):hover {\n  color: var(--b-radio-button-color-primary-hover);\n  border-color: var(--b-radio-button-color-primary-hover);\n  z-index: 1;\n}\n\n/* Disabled */\n.b-radio-button--disabled {\n  background-color: var(--b-radio-button-color-disabled-bg);\n  color: var(--b-radio-button-color-disabled);\n  border-color: var(--b-radio-button-color-border);\n  opacity: 1;\n}\n\n.b-radio-button--disabled.b-radio-button--checked {\n  background-color: var(--b-radio-button-color-disabled-bg);\n  color: var(--b-radio-button-color-disabled);\n  border-color: var(--b-radio-button-color-border);\n}\n\n/* Hidden input */\n.b-radio-button__input {\n  appearance: none;\n  -webkit-appearance: none;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.b-radio-button--disabled .b-radio-button__input {\n  cursor: not-allowed;\n}\n\n/* Focus-visible ring */\n.b-radio-button__input:focus-visible ~ .b-radio-button__label {\n  outline: 2px solid var(--b-radio-button-color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-radio-button {\n  --b-radio-button-bg: #141414;\n  --b-radio-button-checked-bg: #141414;\n  --b-radio-button-color: rgba(255, 255, 255, 0.85);\n  --b-radio-button-color-primary: #4d94e8;\n  --b-radio-button-color-primary-hover: #4d94e8;\n  --b-radio-button-color-primary-active: #3c89e8;\n  --b-radio-button-color-border: #424242;\n  --b-radio-button-color-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-radio-button-color-disabled: rgba(255, 255, 255, 0.25);\n  --b-radio-button-solid-checked-bg: #1668dc;\n  --b-radio-button-solid-checked-color: #fff;\n  --b-radio-button-solid-checked-hover-bg: #0958d9;\n  --b-radio-button-solid-checked-active-bg: #003eb3;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-radio-button {\n    --b-radio-button-bg: #141414;\n    --b-radio-button-checked-bg: #141414;\n    --b-radio-button-color: rgba(255, 255, 255, 0.85);\n    --b-radio-button-color-primary: #4d94e8;\n    --b-radio-button-color-primary-hover: #4d94e8;\n    --b-radio-button-color-primary-active: #3c89e8;\n    --b-radio-button-color-border: #424242;\n    --b-radio-button-color-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-radio-button-color-disabled: rgba(255, 255, 255, 0.25);\n    --b-radio-button-solid-checked-bg: #1668dc;\n    --b-radio-button-solid-checked-color: #fff;\n    --b-radio-button-solid-checked-hover-bg: #0958d9;\n    --b-radio-button-solid-checked-active-bg: #003eb3;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-radio-button {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system169.js","names":[],"sources":["../src/components/BPinInput/BPinInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\n\ndefineOptions({ inheritAttrs: false });\n\nconst {\n  length = 6,\n  mask = false,\n  type = 'number',\n  size = BCommonSize.Medium,\n  disabled = false,\n  autoFocus = false,\n  id,\n  ariaLabel = 'PIN entry',\n} = defineProps<{\n  /** Number of cells (digits/characters) in the PIN. @default 6 */\n  length?: number;\n  /** Render the value as bullets (uses `type=\"password\"` on each cell). @default false */\n  mask?: boolean;\n  /**\n   * Allowed character class:\n   * - `'number'` — digits 0-9 only (uses `inputmode=\"numeric\"` + `pattern=\"[0-9]*\"`).\n   * - `'text'` — any character.\n   * - `'alphanumeric'` — letters + digits only.\n   * @default 'number'\n   */\n  type?: 'number' | 'text' | 'alphanumeric';\n  /** Size preset applied to each cell. @default 'md' */\n  size?: `${BCommonSize}`;\n  /** Disable every cell. @default false */\n  disabled?: boolean;\n  /** Focus the first non-disabled cell on mount. @default false */\n  autoFocus?: boolean;\n  /** HTML id attribute applied to the wrapping group element. */\n  id?: string;\n  /** Accessible label for the wrapping `role=\"group\"` element. @default 'PIN entry' */\n  ariaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired once every cell is filled. The argument is the joined string. */\n  complete: [value: string];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst groupId = computed(() => id ?? `b-pin-input-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// Cell state\n// ─────────────────────────────────────────────\nconst cellRefs = ref<HTMLInputElement[]>([]);\n\nconst cells = computed<string[]>(() => {\n  const value = model.value ?? '';\n  const out: string[] = Array.from({ length });\n  for (let i = 0; i < length; i++) {\n    out[i] = value[i] ?? '';\n  }\n  return out;\n});\n\n// ─────────────────────────────────────────────\n// Filtering by `type`\n// ─────────────────────────────────────────────\nconst filterChar = (ch: string): string => {\n  if (!ch) return '';\n  if (type === 'number') return /[0-9]/.test(ch) ? ch : '';\n  if (type === 'alphanumeric') return /[A-Za-z0-9]/.test(ch) ? ch : '';\n  return ch.length === 1 ? ch : '';\n};\n\nconst filterString = (raw: string): string => {\n  if (type === 'number') return (raw.match(/[0-9]/g) ?? []).join('');\n  if (type === 'alphanumeric') return (raw.match(/[A-Za-z0-9]/g) ?? []).join('');\n  return raw;\n};\n\nconst inputMode = computed<'numeric' | 'text'>(() => (type === 'number' ? 'numeric' : 'text'));\nconst cellPattern = computed<string | undefined>(() =>\n  type === 'number' ? '[0-9]*' : undefined,\n);\nconst cellType = computed<'text' | 'password'>(() => (mask ? 'password' : 'text'));\n\n// ─────────────────────────────────────────────\n// Helpers — write to the model & emit\n// ─────────────────────────────────────────────\nconst updateModel = (next: string[]) => {\n  // Trim trailing empties to keep the joined string compact, but preserve interior gaps\n  // by replacing them with the empty string (still filled positions render).\n  const joined = next.join('');\n  if (joined === model.value) return;\n  model.value = joined;\n  if (joined.length === length && next.every((c) => c.length === 1)) {\n    emit('complete', joined);\n  }\n};\n\nconst focusCell = (index: number) => {\n  const target = cellRefs.value[index];\n  if (target && !target.disabled) {\n    target.focus();\n    target.select();\n  }\n};\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nconst handleInput = (event: Event, index: number) => {\n  const target = event.target as HTMLInputElement;\n  const raw = target.value;\n\n  // The user may have typed a multi-char string (autofill, IME). Take the LAST character\n  // so the cell always reflects what they just typed.\n  const lastChar = raw.length > 0 ? raw[raw.length - 1] : '';\n  const ch = filterChar(lastChar);\n\n  // Force the DOM value to match our filtered char, even if Vue re-renders.\n  target.value = ch;\n\n  const next = [...cells.value];\n  next[index] = ch;\n  updateModel(next);\n\n  if (ch && index < length - 1) {\n    void nextTick(() => focusCell(index + 1));\n  }\n};\n\nconst handleKeyDown = (event: KeyboardEvent, index: number) => {\n  const key = event.key;\n\n  if (key === 'Backspace') {\n    const current = cells.value[index];\n    if (current) {\n      // Filled cell: clear it in place.\n      const next = [...cells.value];\n      next[index] = '';\n      updateModel(next);\n      // Don't preventDefault — let the browser's own backspace handling complete on the\n      // already-empty input as well; we've already cleared model state.\n      event.preventDefault();\n    } else if (index > 0) {\n      // Empty cell: hop back and clear that one too.\n      event.preventDefault();\n      const next = [...cells.value];\n      next[index - 1] = '';\n      updateModel(next);\n      void nextTick(() => focusCell(index - 1));\n    }\n    return;\n  }\n\n  if (key === 'ArrowLeft' && index > 0) {\n    event.preventDefault();\n    focusCell(index - 1);\n    return;\n  }\n\n  if (key === 'ArrowRight' && index < length - 1) {\n    event.preventDefault();\n    focusCell(index + 1);\n    return;\n  }\n\n  if (key === 'Home') {\n    event.preventDefault();\n    focusCell(0);\n    return;\n  }\n\n  if (key === 'End') {\n    event.preventDefault();\n    focusCell(length - 1);\n  }\n};\n\nconst handlePaste = (event: ClipboardEvent, index: number) => {\n  event.preventDefault();\n  const pasted = event.clipboardData?.getData('text') ?? '';\n  const filtered = filterString(pasted);\n  if (!filtered) return;\n\n  const next = [...cells.value];\n  let writeAt = index;\n  for (const ch of filtered) {\n    if (writeAt >= length) break;\n    next[writeAt] = ch;\n    writeAt += 1;\n  }\n  updateModel(next);\n\n  // Focus the next empty cell, or the last cell if all are filled.\n  const focusIndex = Math.min(writeAt, length - 1);\n  void nextTick(() => focusCell(focusIndex));\n};\n\nconst handleFocus = (event: FocusEvent) => {\n  // Convenience: select the cell content on focus so typing replaces it.\n  (event.target as HTMLInputElement).select();\n};\n\n// ─────────────────────────────────────────────\n// External model changes — sanitize against `type`\n// ─────────────────────────────────────────────\nwatch(\n  () => model.value,\n  (val) => {\n    const filtered = filterString(val ?? '').slice(0, length);\n    if (filtered !== val) {\n      model.value = filtered;\n    }\n  },\n  { immediate: true },\n);\n\n// ─────────────────────────────────────────────\n// autoFocus + exposed API\n// ─────────────────────────────────────────────\nconst focusFirst = () => {\n  for (let i = 0; i < length; i++) {\n    const el = cellRefs.value[i];\n    if (el && !el.disabled) {\n      el.focus();\n      el.select();\n      return;\n    }\n  }\n};\n\nconst focusLast = () => {\n  for (let i = length - 1; i >= 0; i--) {\n    const el = cellRefs.value[i];\n    if (el && !el.disabled) {\n      el.focus();\n      el.select();\n      return;\n    }\n  }\n};\n\nconst focus = (index?: number) => {\n  if (index === undefined) {\n    focusFirst();\n    return;\n  }\n  if (index < 0 || index >= length) return;\n  focusCell(index);\n};\n\nconst clear = () => {\n  if (model.value !== '') model.value = '';\n  void nextTick(() => focusFirst());\n};\n\nonMounted(() => {\n  if (autoFocus) {\n    void nextTick(() => focusFirst());\n  }\n});\n\ndefineExpose({ focus, clear, focusFirst, focusLast });\n</script>\n\n<template>\n  <div\n    :id=\"groupId\"\n    class=\"b-pin-input\"\n    :class=\"[\n      `b-pin-input--${size}`,\n      {\n        'b-pin-input--disabled': disabled,\n      },\n    ]\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :aria-disabled=\"disabled || undefined\"\n  >\n    <input\n      v-for=\"(cellValue, idx) in cells\"\n      :key=\"idx\"\n      :ref=\"\n        (el) => {\n          if (el) cellRefs[idx] = el as HTMLInputElement;\n        }\n      \"\n      :value=\"cellValue\"\n      :type=\"cellType\"\n      :inputmode=\"inputMode\"\n      :pattern=\"cellPattern\"\n      :disabled=\"disabled\"\n      :autocomplete=\"idx === 0 ? 'one-time-code' : 'off'\"\n      maxlength=\"1\"\n      class=\"b-pin-input__cell\"\n      :aria-label=\"\n        type === 'number'\n          ? `Digit ${idx + 1} of ${length}`\n          : `Character ${idx + 1} of ${length}`\n      \"\n      @input=\"handleInput($event, idx)\"\n      @keydown=\"handleKeyDown($event, idx)\"\n      @paste=\"handlePaste($event, idx)\"\n      @focus=\"handleFocus\"\n    />\n  </div>\n</template>\n\n<style>\n.b-pin-input {\n  /* ── Tokens ── */\n  --b-pin-input-cell-size: 2.5rem;\n  --b-pin-input-cell-gap: 0.5rem;\n  --b-pin-input-cell-bg: #ffffff;\n  --b-pin-input-cell-border-color: #d9d9d9;\n  --b-pin-input-cell-border-color-focus: #1677ff;\n  --b-pin-input-cell-radius: 6px;\n  --b-pin-input-cell-font-size: 1.125rem;\n  --b-pin-input-cell-fg: rgba(0, 0, 0, 0.88);\n  --b-pin-input-cell-shadow-focus: 0 0 0 2px rgba(5, 145, 255, 0.15);\n  --b-pin-input-cell-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-pin-input-cell-disabled-fg: rgba(0, 0, 0, 0.25);\n\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--b-pin-input-cell-gap);\n  font-family: inherit;\n}\n\n.b-pin-input--sm {\n  --b-pin-input-cell-size: 2rem;\n  --b-pin-input-cell-font-size: 0.95rem;\n  --b-pin-input-cell-gap: 0.375rem;\n}\n\n.b-pin-input--lg {\n  --b-pin-input-cell-size: 3rem;\n  --b-pin-input-cell-font-size: 1.375rem;\n  --b-pin-input-cell-gap: 0.625rem;\n}\n\n.b-pin-input__cell {\n  width: var(--b-pin-input-cell-size);\n  height: var(--b-pin-input-cell-size);\n  padding: 0;\n  margin: 0;\n  text-align: center;\n  font-size: var(--b-pin-input-cell-font-size);\n  font-family: inherit;\n  font-weight: 500;\n  color: var(--b-pin-input-cell-fg);\n  background: var(--b-pin-input-cell-bg);\n  border: 1px solid var(--b-pin-input-cell-border-color);\n  border-radius: var(--b-pin-input-cell-radius);\n  outline: none;\n  caret-color: var(--b-pin-input-cell-border-color-focus);\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n.b-pin-input__cell::-webkit-outer-spin-button,\n.b-pin-input__cell::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.b-pin-input__cell:hover:not(:disabled) {\n  border-color: var(--b-pin-input-cell-border-color-focus);\n}\n\n.b-pin-input__cell:focus-visible {\n  border-color: var(--b-pin-input-cell-border-color-focus);\n  box-shadow: var(--b-pin-input-cell-shadow-focus);\n}\n\n.b-pin-input--disabled .b-pin-input__cell,\n.b-pin-input__cell:disabled {\n  background: var(--b-pin-input-cell-disabled-bg);\n  color: var(--b-pin-input-cell-disabled-fg);\n  cursor: not-allowed;\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-pin-input {\n  --b-pin-input-cell-bg: #141414;\n  --b-pin-input-cell-border-color: #424242;\n  --b-pin-input-cell-border-color-focus: #1668dc;\n  --b-pin-input-cell-fg: rgba(255, 255, 255, 0.88);\n  --b-pin-input-cell-shadow-focus: 0 0 0 2px rgba(22, 104, 220, 0.18);\n  --b-pin-input-cell-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-pin-input-cell-disabled-fg: rgba(255, 255, 255, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-pin-input {\n    --b-pin-input-cell-bg: #141414;\n    --b-pin-input-cell-border-color: #424242;\n    --b-pin-input-cell-border-color-focus: #1668dc;\n    --b-pin-input-cell-fg: rgba(255, 255, 255, 0.88);\n    --b-pin-input-cell-shadow-focus: 0 0 0 2px rgba(22, 104, 220, 0.18);\n    --b-pin-input-cell-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-pin-input-cell-disabled-fg: rgba(255, 255, 255, 0.25);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-pin-input__cell {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system171.js

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

package/dist/design-system171.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system171.js","names":[],"sources":["../src/components/BPinInput/BPinInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\n\ndefineOptions({ inheritAttrs: false });\n\nconst {\n  length = 6,\n  mask = false,\n  type = 'number',\n  size = BCommonSize.Medium,\n  disabled = false,\n  autoFocus = false,\n  id,\n  ariaLabel = 'PIN entry',\n} = defineProps<{\n  /** Number of cells (digits/characters) in the PIN. @default 6 */\n  length?: number;\n  /** Render the value as bullets (uses `type=\"password\"` on each cell). @default false */\n  mask?: boolean;\n  /**\n   * Allowed character class:\n   * - `'number'` — digits 0-9 only (uses `inputmode=\"numeric\"` + `pattern=\"[0-9]*\"`).\n   * - `'text'` — any character.\n   * - `'alphanumeric'` — letters + digits only.\n   * @default 'number'\n   */\n  type?: 'number' | 'text' | 'alphanumeric';\n  /** Size preset applied to each cell. @default 'md' */\n  size?: `${BCommonSize}`;\n  /** Disable every cell. @default false */\n  disabled?: boolean;\n  /** Focus the first non-disabled cell on mount. @default false */\n  autoFocus?: boolean;\n  /** HTML id attribute applied to the wrapping group element. */\n  id?: string;\n  /** Accessible label for the wrapping `role=\"group\"` element. @default 'PIN entry' */\n  ariaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired once every cell is filled. The argument is the joined string. */\n  complete: [value: string];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst groupId = computed(() => id ?? `b-pin-input-${componentUID.value}`);\n\n// ─────────────────────────────────────────────\n// Cell state\n// ─────────────────────────────────────────────\nconst cellRefs = ref<HTMLInputElement[]>([]);\n\nconst cells = computed<string[]>(() => {\n  const value = model.value ?? '';\n  const out: string[] = Array.from({ length });\n  for (let i = 0; i < length; i++) {\n    out[i] = value[i] ?? '';\n  }\n  return out;\n});\n\n// ─────────────────────────────────────────────\n// Filtering by `type`\n// ─────────────────────────────────────────────\nconst filterChar = (ch: string): string => {\n  if (!ch) return '';\n  if (type === 'number') return /[0-9]/.test(ch) ? ch : '';\n  if (type === 'alphanumeric') return /[A-Za-z0-9]/.test(ch) ? ch : '';\n  return ch.length === 1 ? ch : '';\n};\n\nconst filterString = (raw: string): string => {\n  if (type === 'number') return (raw.match(/[0-9]/g) ?? []).join('');\n  if (type === 'alphanumeric') return (raw.match(/[A-Za-z0-9]/g) ?? []).join('');\n  return raw;\n};\n\nconst inputMode = computed<'numeric' | 'text'>(() => (type === 'number' ? 'numeric' : 'text'));\nconst cellPattern = computed<string | undefined>(() =>\n  type === 'number' ? '[0-9]*' : undefined,\n);\nconst cellType = computed<'text' | 'password'>(() => (mask ? 'password' : 'text'));\n\n// ─────────────────────────────────────────────\n// Helpers — write to the model & emit\n// ─────────────────────────────────────────────\nconst updateModel = (next: string[]) => {\n  // Trim trailing empties to keep the joined string compact, but preserve interior gaps\n  // by replacing them with the empty string (still filled positions render).\n  const joined = next.join('');\n  if (joined === model.value) return;\n  model.value = joined;\n  if (joined.length === length && next.every((c) => c.length === 1)) {\n    emit('complete', joined);\n  }\n};\n\nconst focusCell = (index: number) => {\n  const target = cellRefs.value[index];\n  if (target && !target.disabled) {\n    target.focus();\n    target.select();\n  }\n};\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nconst handleInput = (event: Event, index: number) => {\n  const target = event.target as HTMLInputElement;\n  const raw = target.value;\n\n  // The user may have typed a multi-char string (autofill, IME). Take the LAST character\n  // so the cell always reflects what they just typed.\n  const lastChar = raw.length > 0 ? raw[raw.length - 1] : '';\n  const ch = filterChar(lastChar);\n\n  // Force the DOM value to match our filtered char, even if Vue re-renders.\n  target.value = ch;\n\n  const next = [...cells.value];\n  next[index] = ch;\n  updateModel(next);\n\n  if (ch && index < length - 1) {\n    void nextTick(() => focusCell(index + 1));\n  }\n};\n\nconst handleKeyDown = (event: KeyboardEvent, index: number) => {\n  const key = event.key;\n\n  if (key === 'Backspace') {\n    const current = cells.value[index];\n    if (current) {\n      // Filled cell: clear it in place.\n      const next = [...cells.value];\n      next[index] = '';\n      updateModel(next);\n      // Don't preventDefault — let the browser's own backspace handling complete on the\n      // already-empty input as well; we've already cleared model state.\n      event.preventDefault();\n    } else if (index > 0) {\n      // Empty cell: hop back and clear that one too.\n      event.preventDefault();\n      const next = [...cells.value];\n      next[index - 1] = '';\n      updateModel(next);\n      void nextTick(() => focusCell(index - 1));\n    }\n    return;\n  }\n\n  if (key === 'ArrowLeft' && index > 0) {\n    event.preventDefault();\n    focusCell(index - 1);\n    return;\n  }\n\n  if (key === 'ArrowRight' && index < length - 1) {\n    event.preventDefault();\n    focusCell(index + 1);\n    return;\n  }\n\n  if (key === 'Home') {\n    event.preventDefault();\n    focusCell(0);\n    return;\n  }\n\n  if (key === 'End') {\n    event.preventDefault();\n    focusCell(length - 1);\n  }\n};\n\nconst handlePaste = (event: ClipboardEvent, index: number) => {\n  event.preventDefault();\n  const pasted = event.clipboardData?.getData('text') ?? '';\n  const filtered = filterString(pasted);\n  if (!filtered) return;\n\n  const next = [...cells.value];\n  let writeAt = index;\n  for (const ch of filtered) {\n    if (writeAt >= length) break;\n    next[writeAt] = ch;\n    writeAt += 1;\n  }\n  updateModel(next);\n\n  // Focus the next empty cell, or the last cell if all are filled.\n  const focusIndex = Math.min(writeAt, length - 1);\n  void nextTick(() => focusCell(focusIndex));\n};\n\nconst handleFocus = (event: FocusEvent) => {\n  // Convenience: select the cell content on focus so typing replaces it.\n  (event.target as HTMLInputElement).select();\n};\n\n// ─────────────────────────────────────────────\n// External model changes — sanitize against `type`\n// ─────────────────────────────────────────────\nwatch(\n  () => model.value,\n  (val) => {\n    const filtered = filterString(val ?? '').slice(0, length);\n    if (filtered !== val) {\n      model.value = filtered;\n    }\n  },\n  { immediate: true },\n);\n\n// ─────────────────────────────────────────────\n// autoFocus + exposed API\n// ─────────────────────────────────────────────\nconst focusFirst = () => {\n  for (let i = 0; i < length; i++) {\n    const el = cellRefs.value[i];\n    if (el && !el.disabled) {\n      el.focus();\n      el.select();\n      return;\n    }\n  }\n};\n\nconst focusLast = () => {\n  for (let i = length - 1; i >= 0; i--) {\n    const el = cellRefs.value[i];\n    if (el && !el.disabled) {\n      el.focus();\n      el.select();\n      return;\n    }\n  }\n};\n\nconst focus = (index?: number) => {\n  if (index === undefined) {\n    focusFirst();\n    return;\n  }\n  if (index < 0 || index >= length) return;\n  focusCell(index);\n};\n\nconst clear = () => {\n  if (model.value !== '') model.value = '';\n  void nextTick(() => focusFirst());\n};\n\nonMounted(() => {\n  if (autoFocus) {\n    void nextTick(() => focusFirst());\n  }\n});\n\ndefineExpose({ focus, clear, focusFirst, focusLast });\n</script>\n\n<template>\n  <div\n    :id=\"groupId\"\n    class=\"b-pin-input\"\n    :class=\"[\n      `b-pin-input--${size}`,\n      {\n        'b-pin-input--disabled': disabled,\n      },\n    ]\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :aria-disabled=\"disabled || undefined\"\n  >\n    <input\n      v-for=\"(cellValue, idx) in cells\"\n      :key=\"idx\"\n      :ref=\"\n        (el) => {\n          if (el) cellRefs[idx] = el as HTMLInputElement;\n        }\n      \"\n      :value=\"cellValue\"\n      :type=\"cellType\"\n      :inputmode=\"inputMode\"\n      :pattern=\"cellPattern\"\n      :disabled=\"disabled\"\n      :autocomplete=\"idx === 0 ? 'one-time-code' : 'off'\"\n      maxlength=\"1\"\n      class=\"b-pin-input__cell\"\n      :aria-label=\"\n        type === 'number'\n          ? `Digit ${idx + 1} of ${length}`\n          : `Character ${idx + 1} of ${length}`\n      \"\n      @input=\"handleInput($event, idx)\"\n      @keydown=\"handleKeyDown($event, idx)\"\n      @paste=\"handlePaste($event, idx)\"\n      @focus=\"handleFocus\"\n    />\n  </div>\n</template>\n\n<style>\n.b-pin-input {\n  /* ── Tokens ── */\n  --b-pin-input-cell-size: 2.5rem;\n  --b-pin-input-cell-gap: 0.5rem;\n  --b-pin-input-cell-bg: #ffffff;\n  --b-pin-input-cell-border-color: #d9d9d9;\n  --b-pin-input-cell-border-color-focus: #1677ff;\n  --b-pin-input-cell-radius: 6px;\n  --b-pin-input-cell-font-size: 1.125rem;\n  --b-pin-input-cell-fg: rgba(0, 0, 0, 0.88);\n  --b-pin-input-cell-shadow-focus: 0 0 0 2px rgba(5, 145, 255, 0.15);\n  --b-pin-input-cell-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-pin-input-cell-disabled-fg: rgba(0, 0, 0, 0.25);\n\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: var(--b-pin-input-cell-gap);\n  font-family: inherit;\n}\n\n.b-pin-input--sm {\n  --b-pin-input-cell-size: 2rem;\n  --b-pin-input-cell-font-size: 0.95rem;\n  --b-pin-input-cell-gap: 0.375rem;\n}\n\n.b-pin-input--lg {\n  --b-pin-input-cell-size: 3rem;\n  --b-pin-input-cell-font-size: 1.375rem;\n  --b-pin-input-cell-gap: 0.625rem;\n}\n\n.b-pin-input__cell {\n  width: var(--b-pin-input-cell-size);\n  height: var(--b-pin-input-cell-size);\n  padding: 0;\n  margin: 0;\n  text-align: center;\n  font-size: var(--b-pin-input-cell-font-size);\n  font-family: inherit;\n  font-weight: 500;\n  color: var(--b-pin-input-cell-fg);\n  background: var(--b-pin-input-cell-bg);\n  border: 1px solid var(--b-pin-input-cell-border-color);\n  border-radius: var(--b-pin-input-cell-radius);\n  outline: none;\n  caret-color: var(--b-pin-input-cell-border-color-focus);\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n.b-pin-input__cell::-webkit-outer-spin-button,\n.b-pin-input__cell::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.b-pin-input__cell:hover:not(:disabled) {\n  border-color: var(--b-pin-input-cell-border-color-focus);\n}\n\n.b-pin-input__cell:focus-visible {\n  border-color: var(--b-pin-input-cell-border-color-focus);\n  box-shadow: var(--b-pin-input-cell-shadow-focus);\n}\n\n.b-pin-input--disabled .b-pin-input__cell,\n.b-pin-input__cell:disabled {\n  background: var(--b-pin-input-cell-disabled-bg);\n  color: var(--b-pin-input-cell-disabled-fg);\n  cursor: not-allowed;\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-pin-input {\n  --b-pin-input-cell-bg: #141414;\n  --b-pin-input-cell-border-color: #424242;\n  --b-pin-input-cell-border-color-focus: #1668dc;\n  --b-pin-input-cell-fg: rgba(255, 255, 255, 0.88);\n  --b-pin-input-cell-shadow-focus: 0 0 0 2px rgba(22, 104, 220, 0.18);\n  --b-pin-input-cell-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-pin-input-cell-disabled-fg: rgba(255, 255, 255, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-pin-input {\n    --b-pin-input-cell-bg: #141414;\n    --b-pin-input-cell-border-color: #424242;\n    --b-pin-input-cell-border-color-focus: #1668dc;\n    --b-pin-input-cell-fg: rgba(255, 255, 255, 0.88);\n    --b-pin-input-cell-shadow-focus: 0 0 0 2px rgba(22, 104, 220, 0.18);\n    --b-pin-input-cell-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-pin-input-cell-disabled-fg: rgba(255, 255, 255, 0.25);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-pin-input__cell {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system172.js

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

package/dist/design-system172.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system172.js","names":[],"sources":["../src/components/BRadio/BRadioGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, provide, reactive, toRefs } from 'vue';\nimport BRadio from './BRadio.vue';\nimport BRadioButton from './BRadioButton.vue';\nimport { B_RADIO_GROUP_KEY, type BRadioOption } from './types';\n\n//#region Props\nconst {\n  disabled = false,\n  name = '',\n  options = undefined,\n  optionType = 'default',\n  size = 'middle',\n  buttonStyle = 'outline',\n  block = false,\n} = defineProps<{\n  /** Disable all radios in the group. */\n  disabled?: boolean;\n  /** The name property of all child input elements. */\n  name?: string;\n  /** Shorthand options to render radios from an array. */\n  options?: BRadioOption[] | string[] | number[];\n  /** Style type of radio: default or button. */\n  optionType?: 'default' | 'button';\n  /** Size of radio button (only works with button style). */\n  size?: 'large' | 'middle' | 'small';\n  /** Style of radio button appearance. */\n  buttonStyle?: 'outline' | 'solid';\n  /** Whether to fit the width of the parent container. */\n  block?: boolean;\n}>();\n\n/**\n * Currently selected value.\n */\nconst model = defineModel<string | number>();\n\nconst emit = defineEmits<{\n  change: [value: string | number | undefined, event?: Event];\n}>();\n//#endregion\n\n//#region Normalize options\nconst normalizedOptions = computed<BRadioOption[]>(() => {\n  if (!options) return [];\n  return options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt };\n    }\n    return opt;\n  });\n});\n//#endregion\n\n//#region Group context\nfunction setValue(val: string | number) {\n  model.value = val;\n  emit('change', val);\n}\n\nconst props = reactive({ disabled, name, size, optionType, buttonStyle });\nconst {\n  disabled: disabledRef,\n  name: nameRef,\n  size: sizeRef,\n  optionType: optionTypeRef,\n  buttonStyle: buttonStyleRef,\n} = toRefs(props);\n\nprovide(B_RADIO_GROUP_KEY, {\n  modelValue: computed(() => model.value),\n  disabled: disabledRef,\n  name: nameRef,\n  size: sizeRef,\n  optionType: optionTypeRef,\n  buttonStyle: buttonStyleRef,\n  setValue,\n});\n//#endregion\n\n//#region Computed component\nconst radioComponent = computed(() => (optionType === 'button' ? BRadioButton : BRadio));\n//#endregion\n</script>\n\n<template>\n  <div\n    class=\"b-radio-group b:inline-flex b:flex-wrap b:items-center\"\n    :class=\"{\n      'b-radio-group--block b:flex b:w-full': block,\n      'b:gap-2': optionType !== 'button',\n      'b:gap-0': optionType === 'button',\n    }\"\n    role=\"radiogroup\"\n  >\n    <template v-if=\"normalizedOptions.length > 0\">\n      <component\n        :is=\"radioComponent\"\n        v-for=\"opt in normalizedOptions\"\n        :key=\"opt.value\"\n        :value=\"opt.value\"\n        :disabled=\"opt.disabled\"\n      >\n        {{ opt.label }}\n      </component>\n    </template>\n    <slot v-else />\n  </div>\n</template>\n\n<style scoped>\n.b-radio-group--block > * {\n  flex: 1;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system172.js","names":["$slots"],"sources":["../src/components/BPopconfirm/BPopconfirm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BPopconfirmPlacement, BPopconfirmTrigger } from '@/types.ts';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  title,\n  description,\n  okText = 'Yes',\n  cancelText = 'No',\n  okType = 'primary',\n  disabled = false,\n  icon: _icon,\n  showCancel = true,\n  trigger = BPopconfirmTrigger.Click,\n  placement = BPopconfirmPlacement.TopCenter,\n  arrow = true,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  destroyTooltipOnHide = false,\n  zIndex = 1060,\n  modelValue = undefined,\n} = defineProps<{\n  /** The confirmation question or text shown in the popconfirm. Also accepts the `title` slot. */\n  title?: string;\n  /** Additional description below the title. Also accepts the `description` slot. */\n  description?: string;\n  /** Text of the confirm button. */\n  okText?: string;\n  /** Text of the cancel button. */\n  cancelText?: string;\n  /** Button type of the confirm button: 'primary' | 'default' | 'dashed' | 'text' | 'link'. */\n  okType?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  /** Whether the popconfirm is disabled (clicking trigger does nothing). */\n  disabled?: boolean;\n  /** Custom icon slot name override. When not provided, a default warning icon is used. */\n  icon?: string;\n  /** Whether to show the cancel button. */\n  showCancel?: boolean;\n  /** The event that triggers the popconfirm to open. */\n  trigger?: `${BPopconfirmTrigger}`;\n  /** Placement of the popconfirm relative to the target element. */\n  placement?: `${BPopconfirmPlacement}`;\n  /** Whether the popconfirm has an arrow pointing to the target. */\n  arrow?: boolean;\n  /** Delay in ms before showing on mouseenter. */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave. */\n  mouseLeaveDelay?: number;\n  /** Whether to destroy the popconfirm DOM when hidden. */\n  destroyTooltipOnHide?: boolean;\n  /** z-index of the popconfirm. */\n  zIndex?: number;\n  /** Controlled visibility - bind with `v-model`. */\n  modelValue?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the confirm button is clicked. Receives a callback to close programmatically. */\n  (e: 'confirm', event: MouseEvent): void;\n  /** Emitted when the cancel button is clicked. Receives a callback to close programmatically. */\n  (e: 'cancel', event: MouseEvent): void;\n  /** Emitted when the popconfirm visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\ndefineSlots<{\n  /** The target element that triggers the popconfirm. */\n  default?(): unknown;\n  /** Overrides the `title` prop with custom content. */\n  title?(): unknown;\n  /** Overrides the `description` prop with custom content. */\n  description?(): unknown;\n  /** Overrides the default warning icon. */\n  icon?(): unknown;\n  /** Overrides the confirm button. */\n  okButton?(): unknown;\n  /** Overrides the cancel button. */\n  cancelButton?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst popconfirmId = useId();\nconst titleId = `${popconfirmId}-title`;\nconst descId = `${popconfirmId}-desc`;\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst hasBeenOpened = ref(false);\nconst shouldRender = computed(() => {\n  if (destroyTooltipOnHide) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  if (disabled) return;\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  popconfirmRef.value?.showPopover();\n}\n\nfunction doClose() {\n  popconfirmRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst popconfirmRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nlet previouslyFocusedElement: HTMLElement | null = null;\n\nconst focusableSelector =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction focusFirstButton() {\n  nextTick(() => {\n    if (!popconfirmRef.value) return;\n    const first = popconfirmRef.value.querySelector<HTMLElement>(focusableSelector);\n    if (first) {\n      first.focus();\n    } else {\n      popconfirmRef.value.focus();\n    }\n  });\n}\n\nfunction trapFocus(event: KeyboardEvent) {\n  if (event.key !== 'Tab' || !popconfirmRef.value) return;\n\n  const focusable = Array.from(\n    popconfirmRef.value.querySelectorAll<HTMLElement>(focusableSelector),\n  );\n  if (focusable.length === 0) {\n    event.preventDefault();\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (event.shiftKey) {\n    if (document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n}\n\nwatch(isOpen, (val) => {\n  if (val) {\n    previouslyFocusedElement = document.activeElement as HTMLElement | null;\n    focusFirstButton();\n  } else {\n    if (previouslyFocusedElement) {\n      nextTick(() => previouslyFocusedElement?.focus());\n    }\n  }\n});\n\n// ─────────────────────────────────────────────\n// Button handlers\n// ─────────────────────────────────────────────\nfunction onConfirm(event: MouseEvent) {\n  emit('confirm', event);\n  requestClose();\n}\n\nfunction onCancel(event: MouseEvent) {\n  emit('cancel', event);\n  requestClose();\n}\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (disabled) return;\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onFocusIn() {\n  requestOpen();\n}\n\nfunction onFocusOut() {\n  requestClose();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    requestClose();\n  }\n}\n\nfunction onPopconfirmKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault();\n    requestClose();\n  }\n  trapFocus(event);\n}\n\n// ─────────────────────────────────────────────\n// Popconfirm hover (keep open when hovering content)\n// ─────────────────────────────────────────────\nfunction onPopconfirmMouseEnter() {\n  if (trigger === BPopconfirmTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onPopconfirmMouseLeave() {\n  if (trigger === BPopconfirmTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.addEventListener('keydown', onKeydown);\n\n  switch (trigger) {\n    case BPopconfirmTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BPopconfirmTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BPopconfirmTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('focusin', onFocusIn);\n  el.removeEventListener('focusout', onFocusOut);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  clearTimers();\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\n// Sync controlled v-model → popover state\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      popconfirmRef.value?.showPopover();\n    } else {\n      popconfirmRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-popconfirm-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BPopconfirmPlacement.TopLeft]: 'top-left',\n    [BPopconfirmPlacement.TopCenter]: 'top-center',\n    [BPopconfirmPlacement.TopRight]: 'top-right',\n    [BPopconfirmPlacement.RightTop]: 'right-top',\n    [BPopconfirmPlacement.RightCenter]: 'right-center',\n    [BPopconfirmPlacement.RightBottom]: 'right-bottom',\n    [BPopconfirmPlacement.BottomRight]: 'bottom-right',\n    [BPopconfirmPlacement.BottomCenter]: 'bottom-center',\n    [BPopconfirmPlacement.BottomLeft]: 'bottom-left',\n    [BPopconfirmPlacement.LeftBottom]: 'left-bottom',\n    [BPopconfirmPlacement.LeftCenter]: 'left-center',\n    [BPopconfirmPlacement.LeftTop]: 'left-top',\n  };\n  return map[placement] ?? 'top-center';\n});\n\nconst okButtonClass = computed(() => {\n  const map: Record<string, string> = {\n    primary: 'b-popconfirm__btn--primary',\n    default: 'b-popconfirm__btn--default',\n    dashed: 'b-popconfirm__btn--dashed',\n    text: 'b-popconfirm__btn--text',\n    link: 'b-popconfirm__btn--link',\n  };\n  return map[okType] ?? 'b-popconfirm__btn--primary';\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div ref=\"toggleRef\" class=\"b-popconfirm__toggle\" :style=\"{ anchorName: anchorName }\">\n    <slot />\n  </div>\n\n  <div\n    ref=\"popconfirmRef\"\n    popover=\"manual\"\n    :class=\"[\n      'b-popconfirm__content',\n      placementClass,\n      { 'b-popconfirm__content--no-arrow': !arrow },\n    ]\"\n    :style=\"{ zIndex, positionAnchor: anchorName }\"\n    role=\"dialog\"\n    aria-modal=\"false\"\n    :aria-labelledby=\"titleId\"\n    :aria-describedby=\"description ? descId : undefined\"\n    :id=\"popconfirmId\"\n    tabindex=\"-1\"\n    @toggle=\"onPopoverToggle\"\n    @keydown=\"onPopconfirmKeydown\"\n    @mouseenter=\"onPopconfirmMouseEnter\"\n    @mouseleave=\"onPopconfirmMouseLeave\"\n  >\n    <template v-if=\"shouldRender || !destroyTooltipOnHide\">\n      <div v-if=\"arrow\" class=\"b-popconfirm__arrow\" aria-hidden=\"true\" />\n      <div class=\"b-popconfirm__inner\">\n        <div class=\"b-popconfirm__message\">\n          <span class=\"b-popconfirm__icon\" aria-hidden=\"true\">\n            <slot name=\"icon\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"currentColor\"\n                width=\"16\"\n                height=\"16\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n                />\n              </svg>\n            </slot>\n          </span>\n          <div class=\"b-popconfirm__text\">\n            <div :id=\"titleId\" class=\"b-popconfirm__title\">\n              <slot name=\"title\">{{ title }}</slot>\n            </div>\n            <div\n              v-if=\"description || $slots.description\"\n              :id=\"descId\"\n              class=\"b-popconfirm__description\"\n            >\n              <slot name=\"description\">{{ description }}</slot>\n            </div>\n          </div>\n        </div>\n        <div class=\"b-popconfirm__buttons\" role=\"group\">\n          <slot name=\"cancelButton\">\n            <button\n              v-if=\"showCancel\"\n              type=\"button\"\n              class=\"b-popconfirm__btn b-popconfirm__btn--default\"\n              @click=\"onCancel\"\n            >\n              {{ cancelText }}\n            </button>\n          </slot>\n          <slot name=\"okButton\">\n            <button type=\"button\" :class=\"['b-popconfirm__btn', okButtonClass]\" @click=\"onConfirm\">\n              {{ okText }}\n            </button>\n          </slot>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n:root {\n  --b-popconfirm-bg: #fff;\n  --b-popconfirm-color: oklch(25% 0 0);\n  --b-popconfirm-font-size: 0.875rem;\n  --b-popconfirm-line-height: 1.5;\n  --b-popconfirm-padding-x: 0.75rem;\n  --b-popconfirm-padding-y: 0.75rem;\n  --b-popconfirm-border-radius: 0.5rem;\n  --b-popconfirm-max-width: 320px;\n  --b-popconfirm-arrow-size: 8px;\n  --b-popconfirm-arrow-color: #fff;\n  --b-popconfirm-gap: 8px;\n  --b-popconfirm-transition-duration: 200ms;\n  --b-popconfirm-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-popconfirm-icon-color: oklch(75% 0.15 85);\n  --b-popconfirm-title-font-weight: 600;\n  --b-popconfirm-description-color: oklch(45% 0 0);\n  --b-popconfirm-btn-font-size: 0.8125rem;\n  --b-popconfirm-btn-padding-x: 0.5rem;\n  --b-popconfirm-btn-padding-y: 0.125rem;\n  --b-popconfirm-btn-border-radius: 0.25rem;\n  --b-popconfirm-btn-primary-bg: oklch(55% 0.2 260);\n  --b-popconfirm-btn-primary-color: #fff;\n  --b-popconfirm-btn-default-bg: transparent;\n  --b-popconfirm-btn-default-color: oklch(25% 0 0);\n  --b-popconfirm-btn-default-border: oklch(80% 0 0);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] {\n  --b-popconfirm-bg: oklch(22% 0 0);\n  --b-popconfirm-color: oklch(90% 0 0);\n  --b-popconfirm-arrow-color: oklch(22% 0 0);\n  --b-popconfirm-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-popconfirm-icon-color: oklch(80% 0.15 85);\n  --b-popconfirm-description-color: oklch(65% 0 0);\n  --b-popconfirm-btn-primary-bg: oklch(55% 0.2 260);\n  --b-popconfirm-btn-default-color: oklch(90% 0 0);\n  --b-popconfirm-btn-default-border: oklch(40% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] {\n    --b-popconfirm-bg: oklch(22% 0 0);\n    --b-popconfirm-color: oklch(90% 0 0);\n    --b-popconfirm-arrow-color: oklch(22% 0 0);\n    --b-popconfirm-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-popconfirm-icon-color: oklch(80% 0.15 85);\n    --b-popconfirm-description-color: oklch(65% 0 0);\n    --b-popconfirm-btn-primary-bg: oklch(55% 0.2 260);\n    --b-popconfirm-btn-default-color: oklch(90% 0 0);\n    --b-popconfirm-btn-default-border: oklch(40% 0 0);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-popconfirm__toggle {\n  display: inline-block;\n}\n\n/* ─────────────────────────────────────────────\n   Popconfirm content (popover)\n   ───────────────────────────────────────────── */\n.b-popconfirm__content {\n  /* Reset popover defaults */\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  max-width: var(--b-popconfirm-max-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  /* Animation and visibility */\n  transition:\n    display var(--b-popconfirm-transition-duration),\n    opacity var(--b-popconfirm-transition-duration);\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  /* ── Placement: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-popconfirm-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-popconfirm-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-popconfirm-gap);\n  }\n\n  /* ── Placement: Right ── */\n  &.right-top {\n    inset: auto;\n    top: anchor(top);\n    left: anchor(right);\n    margin-left: var(--b-popconfirm-gap);\n  }\n  &.right-center {\n    inset: auto;\n    align-self: anchor-center;\n    left: anchor(right);\n    margin-left: var(--b-popconfirm-gap);\n  }\n  &.right-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    left: anchor(right);\n    margin-left: var(--b-popconfirm-gap);\n  }\n\n  /* ── Placement: Bottom ── */\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-popconfirm-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-popconfirm-gap);\n  }\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-popconfirm-gap);\n  }\n\n  /* ── Placement: Left ── */\n  &.left-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    right: anchor(left);\n    margin-right: var(--b-popconfirm-gap);\n  }\n  &.left-center {\n    inset: auto;\n    align-self: anchor-center;\n    right: anchor(left);\n    margin-right: var(--b-popconfirm-gap);\n  }\n  &.left-top {\n    inset: auto;\n    top: anchor(top);\n    right: anchor(left);\n    margin-right: var(--b-popconfirm-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Inner content\n   ───────────────────────────────────────────── */\n.b-popconfirm__inner {\n  background: var(--b-popconfirm-bg);\n  color: var(--b-popconfirm-color);\n  font-size: var(--b-popconfirm-font-size);\n  line-height: var(--b-popconfirm-line-height);\n  padding: var(--b-popconfirm-padding-y) var(--b-popconfirm-padding-x);\n  border-radius: var(--b-popconfirm-border-radius);\n  box-shadow: var(--b-popconfirm-shadow);\n  word-wrap: break-word;\n}\n\n/* ─────────────────────────────────────────────\n   Message row (icon + text)\n   ───────────────────────────────────────────── */\n.b-popconfirm__message {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.b-popconfirm__icon {\n  flex-shrink: 0;\n  color: var(--b-popconfirm-icon-color);\n  line-height: 1;\n  margin-top: 0.125rem;\n}\n\n.b-popconfirm__text {\n  flex: 1;\n  min-width: 0;\n}\n\n.b-popconfirm__title {\n  font-weight: var(--b-popconfirm-title-font-weight);\n}\n\n.b-popconfirm__description {\n  color: var(--b-popconfirm-description-color);\n  margin-top: 0.25rem;\n  font-size: 0.8125rem;\n}\n\n/* ─────────────────────────────────────────────\n   Buttons\n   ───────────────────────────────────────────── */\n.b-popconfirm__buttons {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n}\n\n.b-popconfirm__btn {\n  cursor: pointer;\n  font-size: var(--b-popconfirm-btn-font-size);\n  line-height: 1.5;\n  padding: var(--b-popconfirm-btn-padding-y) var(--b-popconfirm-btn-padding-x);\n  border-radius: var(--b-popconfirm-btn-border-radius);\n  border: 1px solid transparent;\n  font-family: inherit;\n  transition: opacity 150ms;\n\n  &:hover {\n    opacity: 0.85;\n  }\n\n  &:focus-visible {\n    outline: 2px solid oklch(55% 0.2 260);\n    outline-offset: 1px;\n  }\n}\n\n.b-popconfirm__btn--primary {\n  background: var(--b-popconfirm-btn-primary-bg);\n  color: var(--b-popconfirm-btn-primary-color);\n}\n\n.b-popconfirm__btn--default {\n  background: var(--b-popconfirm-btn-default-bg);\n  color: var(--b-popconfirm-btn-default-color);\n  border-color: var(--b-popconfirm-btn-default-border);\n}\n\n.b-popconfirm__btn--dashed {\n  background: var(--b-popconfirm-btn-default-bg);\n  color: var(--b-popconfirm-btn-default-color);\n  border-color: var(--b-popconfirm-btn-default-border);\n  border-style: dashed;\n}\n\n.b-popconfirm__btn--text {\n  background: transparent;\n  color: var(--b-popconfirm-btn-default-color);\n  border: none;\n}\n\n.b-popconfirm__btn--link {\n  background: transparent;\n  color: var(--b-popconfirm-btn-primary-bg);\n  border: none;\n  text-decoration: underline;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-popconfirm__arrow {\n  position: absolute;\n  width: var(--b-popconfirm-arrow-size);\n  height: var(--b-popconfirm-arrow-size);\n  background: var(--b-popconfirm-arrow-color);\n  transform: rotate(45deg);\n  pointer-events: none;\n}\n\n/* Arrow positioning for top placements */\n.b-popconfirm__content.top-left .b-popconfirm__arrow,\n.b-popconfirm__content.top-center .b-popconfirm__arrow,\n.b-popconfirm__content.top-right .b-popconfirm__arrow {\n  bottom: calc(var(--b-popconfirm-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* Arrow positioning for bottom placements */\n.b-popconfirm__content.bottom-left .b-popconfirm__arrow,\n.b-popconfirm__content.bottom-center .b-popconfirm__arrow,\n.b-popconfirm__content.bottom-right .b-popconfirm__arrow {\n  top: calc(var(--b-popconfirm-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* Arrow positioning for right placements */\n.b-popconfirm__content.right-top .b-popconfirm__arrow,\n.b-popconfirm__content.right-center .b-popconfirm__arrow,\n.b-popconfirm__content.right-bottom .b-popconfirm__arrow {\n  left: calc(var(--b-popconfirm-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* Arrow positioning for left placements */\n.b-popconfirm__content.left-top .b-popconfirm__arrow,\n.b-popconfirm__content.left-center .b-popconfirm__arrow,\n.b-popconfirm__content.left-bottom .b-popconfirm__arrow {\n  right: calc(var(--b-popconfirm-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-popconfirm-arrow-size) / -2);\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks (auto-adjust overflow)\n   ───────────────────────────────────────────── */\n@position-try --b-popconfirm-top-center {\n  inset: auto;\n  bottom: anchor(top);\n  justify-self: anchor-center;\n  margin-bottom: var(--b-popconfirm-gap);\n}\n\n@position-try --b-popconfirm-bottom-center {\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--b-popconfirm-gap);\n}\n\n@position-try --b-popconfirm-right-center {\n  inset: auto;\n  align-self: anchor-center;\n  left: anchor(right);\n  margin-left: var(--b-popconfirm-gap);\n}\n\n@position-try --b-popconfirm-left-center {\n  inset: auto;\n  align-self: anchor-center;\n  right: anchor(left);\n  margin-right: var(--b-popconfirm-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-popconfirm__content {\n    transition-duration: 0ms;\n  }\n\n  .b-popconfirm__btn {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system174.js

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