@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system123.js

@@ -1,12 +1,163 @@
-//#region src/components/BMentions/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Error = "error", e.Warning = "warning", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Outlined = "outlined", e.Filled = "filled", e.Borderless = "borderless", e;
-}({}), n = /* @__PURE__ */ function(e) {
-	return e.Top = "top", e.Bottom = "bottom", e;
-}({});
+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, createElementVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, ref as u, renderList as d, toDisplayString as f, useModel as p, vModelText as m, withDirectives as h, withModifiers as g } from "vue";
+//#region src/components/BInputTags/BInputTags.vue?vue&type=script&setup=true&lang.ts
+var _ = ["aria-label", "aria-disabled"], v = { class: "b-input-tags__tag-label" }, y = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], b = [
+	"id",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"aria-label"
+], x = /* @__PURE__ */ o({
+	inheritAttrs: !1,
+	__name: "BInputTags",
+	props: /* @__PURE__ */ s({
+		placeholder: {},
+		size: { default: () => e.Medium },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		delimiter: { default: () => ["enter", "comma"] },
+		max: {},
+		validate: { type: Function },
+		allowDuplicate: {
+			type: Boolean,
+			default: !1
+		},
+		id: {},
+		inputAriaLabel: { default: "Add tag" }
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ s([
+		"add",
+		"remove",
+		"invalid"
+	], ["update:modelValue"]),
+	setup(e, { expose: o, emit: s }) {
+		let x = s, S = p(e, "modelValue"), { componentUID: C } = t(), w = r(() => e.id ?? `b-input-tags-${C.value}`), T = u(null), E = u(null), D = u(""), O = u(!1), k = r(() => S.value ?? []), A = r(() => typeof e.max == "number" && k.value.length >= e.max), j = r(() => Array.isArray(e.delimiter) ? e.delimiter : typeof e.delimiter == "string" ? [e.delimiter] : []), M = r(() => j.value.includes("enter")), N = r(() => j.value.includes("comma")), P = r(() => j.value.includes("space")), F = r(() => {
+			if (e.delimiter instanceof RegExp) return e.delimiter;
+			let t = [];
+			return N.value && t.push(","), P.value && t.push("\\s"), t.length === 0 ? null : RegExp(`[${t.join("")}]+`);
+		});
+		function I(t) {
+			let n = t.trim();
+			if (!n) return !1;
+			if (A.value) return x("invalid", n, "max-reached"), !1;
+			if (!e.allowDuplicate && k.value.includes(n)) return x("invalid", n, "duplicate"), !1;
+			if (e.validate) {
+				let t = e.validate(n);
+				if (t === !1) return x("invalid", n, "invalid"), !1;
+				if (typeof t == "string") return x("invalid", n, t), !1;
+			}
+			return S.value = [...k.value, n], x("add", n), !0;
+		}
+		function L() {
+			let e = D.value, t = F.value;
+			if (t) {
+				let n = e.split(t), r = !1;
+				for (let e of n) if (I(e) && (r = !0), A.value) break;
+				(r || n.every((e) => !e.trim())) && (D.value = "");
+				return;
+			}
+			I(e) && (D.value = "");
+		}
+		function R(t) {
+			if (e.disabled) return;
+			let n = k.value[t];
+			n !== void 0 && (S.value = k.value.filter((e, n) => n !== t), x("remove", n, t));
+		}
+		function z(t) {
+			if (!e.disabled) {
+				if (t.key === "Enter") {
+					M.value && (t.preventDefault(), L());
+					return;
+				}
+				if (t.key === "," && N.value) {
+					t.preventDefault(), L();
+					return;
+				}
+				if (t.key === " " && P.value) {
+					t.preventDefault(), L();
+					return;
+				}
+				t.key === "Backspace" && D.value === "" && k.value.length > 0 && R(k.value.length - 1);
+			}
+		}
+		function B(t) {
+			D.value = t.target.value, e.delimiter instanceof RegExp && e.delimiter.test(D.value) && L();
+		}
+		function V() {
+			O.value = !1, D.value.trim() !== "" && L();
+		}
+		function H() {
+			O.value = !0;
+		}
+		function U(e) {
+			let t = e.target;
+			(t === E.value || t.classList.contains("b-input-tags__tags")) && (e.preventDefault(), T.value?.focus());
+		}
+		function W() {
+			T.value?.focus();
+		}
+		function G() {
+			S.value = [], D.value = "";
+		}
+		return o({
+			focus: W,
+			clear: G
+		}), (t, r) => (l(), i("div", {
+			ref_key: "wrapperRef",
+			ref: E,
+			class: c(["b-input-tags", [`b-input-tags--${e.size}`, {
+				"b-input-tags--focused": O.value,
+				"b-input-tags--disabled": e.disabled,
+				"b-input-tags--max-reached": A.value
+			}]]),
+			role: "group",
+			"aria-label": e.inputAriaLabel,
+			"aria-disabled": e.disabled || void 0,
+			onMousedown: U
+		}, [(l(!0), i(n, null, d(k.value, (t, n) => (l(), i("span", {
+			key: `${t}-${n}`,
+			class: "b-input-tags__tag"
+		}, [a("span", v, f(t), 1), a("button", {
+			type: "button",
+			class: "b-input-tags__remove",
+			"aria-label": `Remove tag ${t}`,
+			disabled: e.disabled,
+			tabindex: "-1",
+			onMousedown: r[0] ||= g(() => {}, ["prevent"]),
+			onClick: (e) => R(n)
+		}, [...r[2] ||= [a("span", { "aria-hidden": "true" }, "×", -1)]], 40, y)]))), 128)), h(a("input", {
+			id: w.value,
+			ref_key: "inputRef",
+			ref: T,
+			"onUpdate:modelValue": r[1] ||= (e) => D.value = e,
+			type: "text",
+			class: "b-input-tags__input",
+			placeholder: e.placeholder,
+			disabled: e.disabled,
+			readonly: A.value,
+			"aria-label": e.inputAriaLabel,
+			autocomplete: "off",
+			autocapitalize: "off",
+			autocorrect: "off",
+			spellcheck: "false",
+			onInput: B,
+			onKeydown: z,
+			onFocus: H,
+			onBlur: V
+		}, null, 40, b), [[m, D.value]])], 42, _));
+	}
+});
 //#endregion
-export { n as BMentionsPlacement, e as BMentionsStatus, t as BMentionsVariant };
+export { x as default };
 
 //# sourceMappingURL=design-system123.js.map

package/dist/design-system123.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system123.js","names":[],"sources":["../src/components/BMentions/types.ts"],"sourcesContent":["export interface BMentionsOption {\n  /** Display label for the mention suggestion. Falls back to `value` if omitted. */\n  label?: string;\n  /** The value inserted when this option is selected. */\n  value: string;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n}\n\nexport enum BMentionsStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport enum BMentionsVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n}\n\nexport enum BMentionsPlacement {\n  Top = 'top',\n  Bottom = 'bottom',\n}\n"],"mappings":";AASA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,MAAA,OACA,EAAA,SAAA;KACD"}
+{"version":3,"file":"design-system123.js","names":[],"sources":["../src/components/BInputTags/BInputTags.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, ref } from 'vue';\n\ndefineOptions({ inheritAttrs: false });\n\ntype DelimiterToken = 'enter' | 'comma' | 'space';\ntype DelimiterProp = DelimiterToken | RegExp | Array<DelimiterToken>;\n\nconst {\n  size = BCommonSize.Medium,\n  disabled = false,\n  delimiter = ['enter', 'comma'] as Array<DelimiterToken>,\n  max,\n  validate,\n  allowDuplicate = false,\n  placeholder,\n  id,\n  inputAriaLabel = 'Add tag',\n} = defineProps<{\n  /** Placeholder shown in the inner input when empty. */\n  placeholder?: string;\n  /** Visual size preset (sm | md | lg). @default 'md' */\n  size?: `${BCommonSize}`;\n  /** Disables the whole control (input and remove buttons). @default false */\n  disabled?: boolean;\n  /**\n   * Which key(s) commit the input as a tag. May be a single token, an array of\n   * tokens, or a `RegExp` matched against the input value to detect delimiters\n   * inside the value itself (used for paste / typed delimiters).\n   * Tokens: 'enter' | 'comma' | 'space'.\n   * @default ['enter', 'comma']\n   */\n  delimiter?: DelimiterProp;\n  /** Maximum number of tags. When reached the inner input becomes readonly. */\n  max?: number;\n  /**\n   * Optional validator. Return `true` to accept, `false` to reject silently,\n   * or a string to reject and emit it as the `invalid` reason.\n   */\n  validate?: (value: string) => boolean | string;\n  /** Whether duplicate tag values are accepted. @default false */\n  allowDuplicate?: boolean;\n  /** Optional explicit DOM id for the inner input. */\n  id?: string;\n  /** ARIA label for the inner input. @default 'Add tag' */\n  inputAriaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired after a tag is successfully added. */\n  add: [value: string];\n  /** Fired after a tag is removed. */\n  remove: [value: string, index: number];\n  /** Fired when an attempted tag value is rejected. */\n  invalid: [value: string, reason: string];\n}>();\n\nconst model = defineModel<string[]>({ default: () => [] });\n\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id ?? `b-input-tags-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst wrapperRef = ref<HTMLElement | null>(null);\nconst inputValue = ref('');\nconst isFocused = ref(false);\n\nconst tags = computed<string[]>(() => model.value ?? []);\n\nconst isMaxReached = computed(() => typeof max === 'number' && tags.value.length >= max);\n\nconst delimiterTokens = computed<DelimiterToken[]>(() => {\n  if (Array.isArray(delimiter)) return delimiter;\n  if (typeof delimiter === 'string') return [delimiter];\n  return [];\n});\n\nconst enterCommits = computed(() => delimiterTokens.value.includes('enter'));\nconst commaCommits = computed(() => delimiterTokens.value.includes('comma'));\nconst spaceCommits = computed(() => delimiterTokens.value.includes('space'));\n\n/**\n * Returns a regex that, when matched against the raw input value, splits it\n * into committable chunks. Used so that pasting \"a, b, c\" commits three tags.\n */\nconst valueDelimiterRegex = computed<RegExp | null>(() => {\n  if (delimiter instanceof RegExp) return delimiter;\n  const parts: string[] = [];\n  if (commaCommits.value) parts.push(',');\n  if (spaceCommits.value) parts.push('\\\\s');\n  if (parts.length === 0) return null;\n  return new RegExp(`[${parts.join('')}]+`);\n});\n\nfunction tryCommit(rawValue: string): boolean {\n  const value = rawValue.trim();\n  if (!value) return false;\n\n  if (isMaxReached.value) {\n    emit('invalid', value, 'max-reached');\n    return false;\n  }\n\n  if (!allowDuplicate && tags.value.includes(value)) {\n    emit('invalid', value, 'duplicate');\n    return false;\n  }\n\n  if (validate) {\n    const result = validate(value);\n    if (result === false) {\n      emit('invalid', value, 'invalid');\n      return false;\n    }\n    if (typeof result === 'string') {\n      emit('invalid', value, result);\n      return false;\n    }\n  }\n\n  model.value = [...tags.value, value];\n  emit('add', value);\n  return true;\n}\n\nfunction commitFromInput(): void {\n  const raw = inputValue.value;\n  const re = valueDelimiterRegex.value;\n\n  if (re) {\n    const parts = raw.split(re);\n    let anyAdded = false;\n    for (const part of parts) {\n      if (tryCommit(part)) anyAdded = true;\n      if (isMaxReached.value) break;\n    }\n    if (anyAdded || parts.every((p) => !p.trim())) {\n      inputValue.value = '';\n    }\n    return;\n  }\n\n  if (tryCommit(raw)) {\n    inputValue.value = '';\n  }\n}\n\nfunction removeTag(index: number): void {\n  if (disabled) return;\n  const value = tags.value[index];\n  if (value === undefined) return;\n  model.value = tags.value.filter((_, i) => i !== index);\n  emit('remove', value, index);\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n  if (disabled) return;\n\n  if (e.key === 'Enter') {\n    if (enterCommits.value) {\n      e.preventDefault();\n      commitFromInput();\n    }\n    return;\n  }\n\n  if (e.key === ',' && commaCommits.value) {\n    e.preventDefault();\n    commitFromInput();\n    return;\n  }\n\n  if (e.key === ' ' && spaceCommits.value) {\n    e.preventDefault();\n    commitFromInput();\n    return;\n  }\n\n  if (e.key === 'Backspace' && inputValue.value === '' && tags.value.length > 0) {\n    removeTag(tags.value.length - 1);\n  }\n}\n\nfunction handleInput(e: Event): void {\n  const target = e.target as HTMLInputElement;\n  inputValue.value = target.value;\n\n  // If a RegExp delimiter was provided, react as the user types.\n  if (delimiter instanceof RegExp && delimiter.test(inputValue.value)) {\n    commitFromInput();\n  }\n}\n\nfunction handleBlur(): void {\n  isFocused.value = false;\n  if (inputValue.value.trim() !== '') {\n    commitFromInput();\n  }\n}\n\nfunction handleFocus(): void {\n  isFocused.value = true;\n}\n\nfunction handleWrapperMousedown(e: MouseEvent): void {\n  // Click anywhere on the wrapper background focuses the input. We must NOT\n  // hijack clicks on the remove buttons or the input itself.\n  const target = e.target as HTMLElement;\n  if (target === wrapperRef.value || target.classList.contains('b-input-tags__tags')) {\n    e.preventDefault();\n    inputRef.value?.focus();\n  }\n}\n\nfunction focus(): void {\n  inputRef.value?.focus();\n}\n\nfunction clear(): void {\n  model.value = [];\n  inputValue.value = '';\n}\n\ndefineExpose({ focus, clear });\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    class=\"b-input-tags\"\n    :class=\"[\n      `b-input-tags--${size}`,\n      {\n        'b-input-tags--focused': isFocused,\n        'b-input-tags--disabled': disabled,\n        'b-input-tags--max-reached': isMaxReached,\n      },\n    ]\"\n    role=\"group\"\n    :aria-label=\"inputAriaLabel\"\n    :aria-disabled=\"disabled || undefined\"\n    @mousedown=\"handleWrapperMousedown\"\n  >\n    <span\n      v-for=\"(tag, index) in tags\"\n      :key=\"`${tag}-${index}`\"\n      class=\"b-input-tags__tag\"\n    >\n      <span class=\"b-input-tags__tag-label\">{{ tag }}</span>\n      <button\n        type=\"button\"\n        class=\"b-input-tags__remove\"\n        :aria-label=\"`Remove tag ${tag}`\"\n        :disabled=\"disabled\"\n        tabindex=\"-1\"\n        @mousedown.prevent\n        @click=\"removeTag(index)\"\n      >\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </span>\n\n    <input\n      :id=\"inputId\"\n      ref=\"inputRef\"\n      v-model=\"inputValue\"\n      type=\"text\"\n      class=\"b-input-tags__input\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"isMaxReached\"\n      :aria-label=\"inputAriaLabel\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      @input=\"handleInput\"\n      @keydown=\"handleKeydown\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n    />\n  </div>\n</template>\n\n<style>\n.b-input-tags {\n  --b-input-tags-bg: #ffffff;\n  --b-input-tags-border-color: #d9d9d9;\n  --b-input-tags-border-color-focus: #1677ff;\n  --b-input-tags-radius: 6px;\n  --b-input-tags-padding: 2px 4px;\n  --b-input-tags-gap: 4px;\n  --b-input-tags-color: rgba(0, 0, 0, 0.88);\n  --b-input-tags-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-input-tags-shadow-focus: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-input-tags-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-tags-disabled-color: rgba(0, 0, 0, 0.25);\n\n  --b-input-tags-tag-bg: rgba(0, 0, 0, 0.06);\n  --b-input-tags-tag-fg: rgba(0, 0, 0, 0.88);\n  --b-input-tags-tag-radius: 4px;\n  --b-input-tags-tag-padding: 0 6px;\n  --b-input-tags-tag-gap: 4px;\n  --b-input-tags-tag-remove-color: rgba(0, 0, 0, 0.45);\n  --b-input-tags-tag-remove-color-hover: rgba(0, 0, 0, 0.88);\n\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--b-input-tags-gap);\n  width: 100%;\n  min-height: 32px;\n  padding: var(--b-input-tags-padding);\n  background: var(--b-input-tags-bg);\n  border: 1px solid var(--b-input-tags-border-color);\n  border-radius: var(--b-input-tags-radius);\n  color: var(--b-input-tags-color);\n  font-size: 14px;\n  line-height: 1.5714;\n  cursor: text;\n  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;\n}\n\n.b-input-tags--sm {\n  min-height: 24px;\n  font-size: 14px;\n  --b-input-tags-padding: 0 4px;\n}\n\n.b-input-tags--lg {\n  min-height: 40px;\n  font-size: 16px;\n  --b-input-tags-padding: 4px 6px;\n}\n\n.b-input-tags:hover:not(.b-input-tags--disabled) {\n  border-color: var(--b-input-tags-border-color-focus);\n}\n\n.b-input-tags--focused {\n  border-color: var(--b-input-tags-border-color-focus);\n  box-shadow: var(--b-input-tags-shadow-focus);\n}\n\n.b-input-tags--disabled {\n  background: var(--b-input-tags-disabled-bg);\n  color: var(--b-input-tags-disabled-color);\n  cursor: not-allowed;\n}\n\n.b-input-tags--disabled .b-input-tags__input {\n  cursor: not-allowed;\n  color: var(--b-input-tags-disabled-color);\n}\n\n.b-input-tags--max-reached .b-input-tags__input {\n  cursor: not-allowed;\n}\n\n.b-input-tags__tag {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-input-tags-tag-gap);\n  padding: var(--b-input-tags-tag-padding);\n  background: var(--b-input-tags-tag-bg);\n  color: var(--b-input-tags-tag-fg);\n  border-radius: var(--b-input-tags-tag-radius);\n  font-size: 0.92em;\n  line-height: 1.4;\n  max-width: 100%;\n}\n\n.b-input-tags__tag-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.b-input-tags__remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--b-input-tags-tag-remove-color);\n  font-size: 14px;\n  line-height: 1;\n  cursor: pointer;\n  border-radius: 2px;\n  transition: color 0.2s, background 0.2s;\n}\n\n.b-input-tags__remove:hover:not(:disabled) {\n  color: var(--b-input-tags-tag-remove-color-hover);\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.b-input-tags__remove:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.b-input-tags__input {\n  flex: 1 1 60px;\n  min-width: 60px;\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  padding: 2px 4px;\n}\n\n.b-input-tags__input::placeholder {\n  color: var(--b-input-tags-placeholder-color);\n}\n\n[data-prefers-color='dark'] .b-input-tags {\n  --b-input-tags-bg: #141414;\n  --b-input-tags-border-color: #424242;\n  --b-input-tags-border-color-focus: #1668dc;\n  --b-input-tags-color: rgba(255, 255, 255, 0.88);\n  --b-input-tags-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-input-tags-shadow-focus: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-input-tags-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-tags-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-input-tags-tag-bg: rgba(255, 255, 255, 0.08);\n  --b-input-tags-tag-fg: rgba(255, 255, 255, 0.88);\n  --b-input-tags-tag-remove-color: rgba(255, 255, 255, 0.45);\n  --b-input-tags-tag-remove-color-hover: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-input-tags {\n    --b-input-tags-bg: #141414;\n    --b-input-tags-border-color: #424242;\n    --b-input-tags-border-color-focus: #1668dc;\n    --b-input-tags-color: rgba(255, 255, 255, 0.88);\n    --b-input-tags-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-input-tags-shadow-focus: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-input-tags-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-tags-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-input-tags-tag-bg: rgba(255, 255, 255, 0.08);\n    --b-input-tags-tag-fg: rgba(255, 255, 255, 0.88);\n    --b-input-tags-tag-remove-color: rgba(255, 255, 255, 0.45);\n    --b-input-tags-tag-remove-color-hover: rgba(255, 255, 255, 0.88);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-input-tags,\n  .b-input-tags__remove {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system125.js

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

package/dist/design-system125.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system125.js","names":[],"sources":["../src/components/BInputTags/BInputTags.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, ref } from 'vue';\n\ndefineOptions({ inheritAttrs: false });\n\ntype DelimiterToken = 'enter' | 'comma' | 'space';\ntype DelimiterProp = DelimiterToken | RegExp | Array<DelimiterToken>;\n\nconst {\n  size = BCommonSize.Medium,\n  disabled = false,\n  delimiter = ['enter', 'comma'] as Array<DelimiterToken>,\n  max,\n  validate,\n  allowDuplicate = false,\n  placeholder,\n  id,\n  inputAriaLabel = 'Add tag',\n} = defineProps<{\n  /** Placeholder shown in the inner input when empty. */\n  placeholder?: string;\n  /** Visual size preset (sm | md | lg). @default 'md' */\n  size?: `${BCommonSize}`;\n  /** Disables the whole control (input and remove buttons). @default false */\n  disabled?: boolean;\n  /**\n   * Which key(s) commit the input as a tag. May be a single token, an array of\n   * tokens, or a `RegExp` matched against the input value to detect delimiters\n   * inside the value itself (used for paste / typed delimiters).\n   * Tokens: 'enter' | 'comma' | 'space'.\n   * @default ['enter', 'comma']\n   */\n  delimiter?: DelimiterProp;\n  /** Maximum number of tags. When reached the inner input becomes readonly. */\n  max?: number;\n  /**\n   * Optional validator. Return `true` to accept, `false` to reject silently,\n   * or a string to reject and emit it as the `invalid` reason.\n   */\n  validate?: (value: string) => boolean | string;\n  /** Whether duplicate tag values are accepted. @default false */\n  allowDuplicate?: boolean;\n  /** Optional explicit DOM id for the inner input. */\n  id?: string;\n  /** ARIA label for the inner input. @default 'Add tag' */\n  inputAriaLabel?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired after a tag is successfully added. */\n  add: [value: string];\n  /** Fired after a tag is removed. */\n  remove: [value: string, index: number];\n  /** Fired when an attempted tag value is rejected. */\n  invalid: [value: string, reason: string];\n}>();\n\nconst model = defineModel<string[]>({ default: () => [] });\n\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id ?? `b-input-tags-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst wrapperRef = ref<HTMLElement | null>(null);\nconst inputValue = ref('');\nconst isFocused = ref(false);\n\nconst tags = computed<string[]>(() => model.value ?? []);\n\nconst isMaxReached = computed(() => typeof max === 'number' && tags.value.length >= max);\n\nconst delimiterTokens = computed<DelimiterToken[]>(() => {\n  if (Array.isArray(delimiter)) return delimiter;\n  if (typeof delimiter === 'string') return [delimiter];\n  return [];\n});\n\nconst enterCommits = computed(() => delimiterTokens.value.includes('enter'));\nconst commaCommits = computed(() => delimiterTokens.value.includes('comma'));\nconst spaceCommits = computed(() => delimiterTokens.value.includes('space'));\n\n/**\n * Returns a regex that, when matched against the raw input value, splits it\n * into committable chunks. Used so that pasting \"a, b, c\" commits three tags.\n */\nconst valueDelimiterRegex = computed<RegExp | null>(() => {\n  if (delimiter instanceof RegExp) return delimiter;\n  const parts: string[] = [];\n  if (commaCommits.value) parts.push(',');\n  if (spaceCommits.value) parts.push('\\\\s');\n  if (parts.length === 0) return null;\n  return new RegExp(`[${parts.join('')}]+`);\n});\n\nfunction tryCommit(rawValue: string): boolean {\n  const value = rawValue.trim();\n  if (!value) return false;\n\n  if (isMaxReached.value) {\n    emit('invalid', value, 'max-reached');\n    return false;\n  }\n\n  if (!allowDuplicate && tags.value.includes(value)) {\n    emit('invalid', value, 'duplicate');\n    return false;\n  }\n\n  if (validate) {\n    const result = validate(value);\n    if (result === false) {\n      emit('invalid', value, 'invalid');\n      return false;\n    }\n    if (typeof result === 'string') {\n      emit('invalid', value, result);\n      return false;\n    }\n  }\n\n  model.value = [...tags.value, value];\n  emit('add', value);\n  return true;\n}\n\nfunction commitFromInput(): void {\n  const raw = inputValue.value;\n  const re = valueDelimiterRegex.value;\n\n  if (re) {\n    const parts = raw.split(re);\n    let anyAdded = false;\n    for (const part of parts) {\n      if (tryCommit(part)) anyAdded = true;\n      if (isMaxReached.value) break;\n    }\n    if (anyAdded || parts.every((p) => !p.trim())) {\n      inputValue.value = '';\n    }\n    return;\n  }\n\n  if (tryCommit(raw)) {\n    inputValue.value = '';\n  }\n}\n\nfunction removeTag(index: number): void {\n  if (disabled) return;\n  const value = tags.value[index];\n  if (value === undefined) return;\n  model.value = tags.value.filter((_, i) => i !== index);\n  emit('remove', value, index);\n}\n\nfunction handleKeydown(e: KeyboardEvent): void {\n  if (disabled) return;\n\n  if (e.key === 'Enter') {\n    if (enterCommits.value) {\n      e.preventDefault();\n      commitFromInput();\n    }\n    return;\n  }\n\n  if (e.key === ',' && commaCommits.value) {\n    e.preventDefault();\n    commitFromInput();\n    return;\n  }\n\n  if (e.key === ' ' && spaceCommits.value) {\n    e.preventDefault();\n    commitFromInput();\n    return;\n  }\n\n  if (e.key === 'Backspace' && inputValue.value === '' && tags.value.length > 0) {\n    removeTag(tags.value.length - 1);\n  }\n}\n\nfunction handleInput(e: Event): void {\n  const target = e.target as HTMLInputElement;\n  inputValue.value = target.value;\n\n  // If a RegExp delimiter was provided, react as the user types.\n  if (delimiter instanceof RegExp && delimiter.test(inputValue.value)) {\n    commitFromInput();\n  }\n}\n\nfunction handleBlur(): void {\n  isFocused.value = false;\n  if (inputValue.value.trim() !== '') {\n    commitFromInput();\n  }\n}\n\nfunction handleFocus(): void {\n  isFocused.value = true;\n}\n\nfunction handleWrapperMousedown(e: MouseEvent): void {\n  // Click anywhere on the wrapper background focuses the input. We must NOT\n  // hijack clicks on the remove buttons or the input itself.\n  const target = e.target as HTMLElement;\n  if (target === wrapperRef.value || target.classList.contains('b-input-tags__tags')) {\n    e.preventDefault();\n    inputRef.value?.focus();\n  }\n}\n\nfunction focus(): void {\n  inputRef.value?.focus();\n}\n\nfunction clear(): void {\n  model.value = [];\n  inputValue.value = '';\n}\n\ndefineExpose({ focus, clear });\n</script>\n\n<template>\n  <div\n    ref=\"wrapperRef\"\n    class=\"b-input-tags\"\n    :class=\"[\n      `b-input-tags--${size}`,\n      {\n        'b-input-tags--focused': isFocused,\n        'b-input-tags--disabled': disabled,\n        'b-input-tags--max-reached': isMaxReached,\n      },\n    ]\"\n    role=\"group\"\n    :aria-label=\"inputAriaLabel\"\n    :aria-disabled=\"disabled || undefined\"\n    @mousedown=\"handleWrapperMousedown\"\n  >\n    <span\n      v-for=\"(tag, index) in tags\"\n      :key=\"`${tag}-${index}`\"\n      class=\"b-input-tags__tag\"\n    >\n      <span class=\"b-input-tags__tag-label\">{{ tag }}</span>\n      <button\n        type=\"button\"\n        class=\"b-input-tags__remove\"\n        :aria-label=\"`Remove tag ${tag}`\"\n        :disabled=\"disabled\"\n        tabindex=\"-1\"\n        @mousedown.prevent\n        @click=\"removeTag(index)\"\n      >\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    </span>\n\n    <input\n      :id=\"inputId\"\n      ref=\"inputRef\"\n      v-model=\"inputValue\"\n      type=\"text\"\n      class=\"b-input-tags__input\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"isMaxReached\"\n      :aria-label=\"inputAriaLabel\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      @input=\"handleInput\"\n      @keydown=\"handleKeydown\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n    />\n  </div>\n</template>\n\n<style>\n.b-input-tags {\n  --b-input-tags-bg: #ffffff;\n  --b-input-tags-border-color: #d9d9d9;\n  --b-input-tags-border-color-focus: #1677ff;\n  --b-input-tags-radius: 6px;\n  --b-input-tags-padding: 2px 4px;\n  --b-input-tags-gap: 4px;\n  --b-input-tags-color: rgba(0, 0, 0, 0.88);\n  --b-input-tags-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-input-tags-shadow-focus: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-input-tags-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-tags-disabled-color: rgba(0, 0, 0, 0.25);\n\n  --b-input-tags-tag-bg: rgba(0, 0, 0, 0.06);\n  --b-input-tags-tag-fg: rgba(0, 0, 0, 0.88);\n  --b-input-tags-tag-radius: 4px;\n  --b-input-tags-tag-padding: 0 6px;\n  --b-input-tags-tag-gap: 4px;\n  --b-input-tags-tag-remove-color: rgba(0, 0, 0, 0.45);\n  --b-input-tags-tag-remove-color-hover: rgba(0, 0, 0, 0.88);\n\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--b-input-tags-gap);\n  width: 100%;\n  min-height: 32px;\n  padding: var(--b-input-tags-padding);\n  background: var(--b-input-tags-bg);\n  border: 1px solid var(--b-input-tags-border-color);\n  border-radius: var(--b-input-tags-radius);\n  color: var(--b-input-tags-color);\n  font-size: 14px;\n  line-height: 1.5714;\n  cursor: text;\n  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;\n}\n\n.b-input-tags--sm {\n  min-height: 24px;\n  font-size: 14px;\n  --b-input-tags-padding: 0 4px;\n}\n\n.b-input-tags--lg {\n  min-height: 40px;\n  font-size: 16px;\n  --b-input-tags-padding: 4px 6px;\n}\n\n.b-input-tags:hover:not(.b-input-tags--disabled) {\n  border-color: var(--b-input-tags-border-color-focus);\n}\n\n.b-input-tags--focused {\n  border-color: var(--b-input-tags-border-color-focus);\n  box-shadow: var(--b-input-tags-shadow-focus);\n}\n\n.b-input-tags--disabled {\n  background: var(--b-input-tags-disabled-bg);\n  color: var(--b-input-tags-disabled-color);\n  cursor: not-allowed;\n}\n\n.b-input-tags--disabled .b-input-tags__input {\n  cursor: not-allowed;\n  color: var(--b-input-tags-disabled-color);\n}\n\n.b-input-tags--max-reached .b-input-tags__input {\n  cursor: not-allowed;\n}\n\n.b-input-tags__tag {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-input-tags-tag-gap);\n  padding: var(--b-input-tags-tag-padding);\n  background: var(--b-input-tags-tag-bg);\n  color: var(--b-input-tags-tag-fg);\n  border-radius: var(--b-input-tags-tag-radius);\n  font-size: 0.92em;\n  line-height: 1.4;\n  max-width: 100%;\n}\n\n.b-input-tags__tag-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.b-input-tags__remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--b-input-tags-tag-remove-color);\n  font-size: 14px;\n  line-height: 1;\n  cursor: pointer;\n  border-radius: 2px;\n  transition: color 0.2s, background 0.2s;\n}\n\n.b-input-tags__remove:hover:not(:disabled) {\n  color: var(--b-input-tags-tag-remove-color-hover);\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.b-input-tags__remove:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.b-input-tags__input {\n  flex: 1 1 60px;\n  min-width: 60px;\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  padding: 2px 4px;\n}\n\n.b-input-tags__input::placeholder {\n  color: var(--b-input-tags-placeholder-color);\n}\n\n[data-prefers-color='dark'] .b-input-tags {\n  --b-input-tags-bg: #141414;\n  --b-input-tags-border-color: #424242;\n  --b-input-tags-border-color-focus: #1668dc;\n  --b-input-tags-color: rgba(255, 255, 255, 0.88);\n  --b-input-tags-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-input-tags-shadow-focus: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-input-tags-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-tags-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-input-tags-tag-bg: rgba(255, 255, 255, 0.08);\n  --b-input-tags-tag-fg: rgba(255, 255, 255, 0.88);\n  --b-input-tags-tag-remove-color: rgba(255, 255, 255, 0.45);\n  --b-input-tags-tag-remove-color-hover: rgba(255, 255, 255, 0.88);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-input-tags {\n    --b-input-tags-bg: #141414;\n    --b-input-tags-border-color: #424242;\n    --b-input-tags-border-color-focus: #1668dc;\n    --b-input-tags-color: rgba(255, 255, 255, 0.88);\n    --b-input-tags-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-input-tags-shadow-focus: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-input-tags-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-tags-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-input-tags-tag-bg: rgba(255, 255, 255, 0.08);\n    --b-input-tags-tag-fg: rgba(255, 255, 255, 0.88);\n    --b-input-tags-tag-remove-color: rgba(255, 255, 255, 0.45);\n    --b-input-tags-tag-remove-color-hover: rgba(255, 255, 255, 0.88);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-input-tags,\n  .b-input-tags__remove {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system126.js

@@ -1,9 +1,179 @@
-import e from "./design-system14.js";
-import t from "./design-system124.js";
-/* empty css                 */
-//#region src/components/BMentions/BMentions.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-8c92c351"]]);
+import { BCommonColor as e } from "./design-system3.js";
+import t from "./design-system27.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, openBlock as l, renderSlot as u, resolveComponent as d, resolveDynamicComponent as f, useSlots as p, withCtx as m } from "vue";
+//#region src/components/BLink/BLink.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	key: 0,
+	class: "b-link__leading",
+	"aria-hidden": "true"
+}, g = { class: "b-link__label" }, _ = {
+	key: 1,
+	class: "b-link__trailing",
+	"aria-hidden": "true"
+}, v = [
+	"href",
+	"target",
+	"rel"
+], y = {
+	key: 0,
+	class: "b-link__leading",
+	"aria-hidden": "true"
+}, b = { class: "b-link__label" }, x = {
+	key: 1,
+	class: "b-link__trailing",
+	"aria-hidden": "true"
+}, S = ["disabled", "aria-disabled"], C = {
+	key: 0,
+	class: "b-link__leading",
+	"aria-hidden": "true"
+}, w = { class: "b-link__label" }, T = {
+	key: 1,
+	class: "b-link__trailing",
+	"aria-hidden": "true"
+}, E = {
+	key: 0,
+	class: "b-link__leading",
+	"aria-hidden": "true"
+}, D = { class: "b-link__label" }, O = {
+	key: 1,
+	class: "b-link__trailing",
+	"aria-hidden": "true"
+}, k = /* @__PURE__ */ s({
+	inheritAttrs: !1,
+	__name: "BLink",
+	props: {
+		href: {},
+		to: {},
+		target: {},
+		rel: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		external: {
+			type: Boolean,
+			default: !1
+		},
+		underline: { default: "hover" },
+		color: { default: () => e.Primary },
+		as: {},
+		showExternalIcon: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["click"],
+	setup(e, { emit: s }) {
+		let k = p(), A = s, j = n(() => typeof f("RouterLink") != "string"), M = n(() => e.as === "button" ? "button" : e.as === "a" ? e.disabled ? "span" : "a" : e.to !== void 0 && e.to !== null ? j.value ? e.disabled ? "span" : "router-link" : e.disabled ? "span" : "a" : e.href === void 0 ? "button" : e.disabled ? "span" : "a"), N = n(() => {
+			if (!(e.to === void 0 || e.to === null)) {
+				if (typeof e.to == "string") return e.to;
+				if (typeof e.to == "object" && "path" in e.to && typeof e.to.path == "string") return e.to.path;
+				try {
+					return JSON.stringify(e.to);
+				} catch {
+					return;
+				}
+			}
+		}), P = n(() => e.external ? "_blank" : e.target), F = n(() => {
+			let t = /* @__PURE__ */ new Set();
+			return e.rel && e.rel.split(/\s+/).filter(Boolean).forEach((e) => t.add(e)), (e.external || P.value === "_blank") && (t.add("noopener"), t.add("noreferrer")), t.size > 0 ? Array.from(t).join(" ") : void 0;
+		}), I = (t) => {
+			if (e.disabled) {
+				t.preventDefault(), t.stopPropagation();
+				return;
+			}
+			A("click", t);
+		}, L = n(() => !!k.leading), R = n(() => !!k.trailing), z = n(() => e.external && e.showExternalIcon && !R.value), B = n(() => [
+			"b-link",
+			`b-link--${e.color}`,
+			`b-link--underline-${e.underline}`,
+			{
+				"b-link--disabled": e.disabled,
+				"b-link--external": e.external
+			}
+		]);
+		return (n, s) => {
+			let f = d("RouterLink");
+			return M.value === "router-link" ? (l(), r(f, c({
+				key: 0,
+				to: e.to,
+				class: B.value,
+				target: P.value,
+				rel: F.value
+			}, n.$attrs, { onClick: I }), {
+				default: m(() => [
+					L.value ? (l(), a("span", h, [u(n.$slots, "leading")])) : i("", !0),
+					o("span", g, [u(n.$slots, "default")]),
+					R.value ? (l(), a("span", _, [u(n.$slots, "trailing")])) : i("", !0),
+					z.value ? (l(), r(t, {
+						key: 2,
+						class: "b-link__external-icon",
+						icon: "up-right-from-square",
+						size: "xs",
+						"aria-hidden": "true"
+					})) : i("", !0)
+				]),
+				_: 3
+			}, 16, [
+				"to",
+				"class",
+				"target",
+				"rel"
+			])) : M.value === "a" ? (l(), a("a", c({
+				key: 1,
+				class: B.value,
+				href: e.href ?? N.value,
+				target: P.value,
+				rel: F.value
+			}, n.$attrs, { onClick: I }), [
+				L.value ? (l(), a("span", y, [u(n.$slots, "leading")])) : i("", !0),
+				o("span", b, [u(n.$slots, "default")]),
+				R.value ? (l(), a("span", x, [u(n.$slots, "trailing")])) : i("", !0),
+				z.value ? (l(), r(t, {
+					key: 2,
+					class: "b-link__external-icon",
+					icon: "up-right-from-square",
+					size: "xs",
+					"aria-hidden": "true"
+				})) : i("", !0)
+			], 16, v)) : M.value === "button" ? (l(), a("button", c({
+				key: 2,
+				class: B.value,
+				type: "button",
+				disabled: e.disabled,
+				"aria-disabled": e.disabled || void 0
+			}, n.$attrs, { onClick: I }), [
+				L.value ? (l(), a("span", C, [u(n.$slots, "leading")])) : i("", !0),
+				o("span", w, [u(n.$slots, "default")]),
+				R.value ? (l(), a("span", T, [u(n.$slots, "trailing")])) : i("", !0),
+				z.value ? (l(), r(t, {
+					key: 2,
+					class: "b-link__external-icon",
+					icon: "up-right-from-square",
+					size: "xs",
+					"aria-hidden": "true"
+				})) : i("", !0)
+			], 16, S)) : (l(), a("span", c({
+				key: 3,
+				class: B.value,
+				role: "link",
+				"aria-disabled": "true"
+			}, n.$attrs), [
+				L.value ? (l(), a("span", E, [u(n.$slots, "leading")])) : i("", !0),
+				o("span", D, [u(n.$slots, "default")]),
+				R.value ? (l(), a("span", O, [u(n.$slots, "trailing")])) : i("", !0),
+				z.value ? (l(), r(t, {
+					key: 2,
+					class: "b-link__external-icon",
+					icon: "up-right-from-square",
+					size: "xs",
+					"aria-hidden": "true"
+				})) : i("", !0)
+			], 16));
+		};
+	}
+});
 //#endregion
-export { n as default };
+export { k as default };
 
 //# sourceMappingURL=design-system126.js.map

package/dist/design-system126.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system126.js","names":[],"sources":["../src/components/BMentions/BMentions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\n\nimport { BMentionsStatus, BMentionsVariant, type BMentionsOption } from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\nconst {\n  options = [],\n  size = BCommonSize.Medium,\n  variant = BMentionsVariant.Outlined,\n  prefix = '@',\n  split = ' ',\n  autoSize = false,\n  allowClear = false,\n  filterOption = true,\n  notFoundContent = 'Not Found',\n  placeholder,\n  rows = 3,\n} = defineProps<{\n  /** Data source for mention suggestions. */\n  options?: BMentionsOption[];\n  /** Size of the textarea. */\n  size?: `${BCommonSize}`;\n  /** Visual variant. */\n  variant?: `${BMentionsVariant}`;\n  /** Popup positioning relative to cursor. */\n  placement?: 'top' | 'bottom';\n  /** Trigger character(s) for mention lookup. */\n  prefix?: string | string[];\n  /** Delimiter character(s) inserted before/after mention. */\n  split?: string;\n  /** Auto-resize the textarea height. Can be boolean or { minRows, maxRows }. */\n  autoSize?: boolean | { minRows?: number; maxRows?: number };\n  /** Show clear button when there is content. */\n  allowClear?: boolean;\n  /** Filter options by search text. `true` for default filter, function for custom. */\n  filterOption?: boolean | ((search: string, option: BMentionsOption) => boolean);\n  /** Content shown when no results match. Set to `null` to hide dropdown when empty. */\n  notFoundContent?: string | null;\n  /** Whether the textarea is disabled. */\n  disabled?: boolean;\n  /** Whether the textarea is read-only. */\n  readOnly?: boolean;\n  /** Validation status. */\n  status?: `${BMentionsStatus}`;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** Number of visible text lines (when autoSize is false). */\n  rows?: number;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the input value changes. */\n  change: [value: string];\n  /** Fired when an option is selected. */\n  select: [option: BMentionsOption, prefix: string];\n  /** Fired when a prefix character is typed and search begins. */\n  search: [text: string, prefix: string];\n  /** Fired when input gains focus. */\n  focus: [event: FocusEvent];\n  /** Fired when input loses focus. */\n  blur: [event: FocusEvent];\n  /** Fired when the clear button is clicked. */\n  clear: [];\n  /** Fired on textarea resize (when autoSize is active). */\n  resize: [size: { width: number; height: number }];\n  /** Fired during popup scroll. */\n  popupScroll: [event: Event];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-mentions-anchor-${componentUID.value}`);\nconst listboxId = computed(() => `b-mentions-listbox-${componentUID.value}`);\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\nconst menuRef = ref<HTMLElement | null>(null);\nconst isFocused = ref(false);\nconst isOpen = ref(false);\nconst activeIndex = ref(-1);\nconst measuring = ref(false);\nconst measurePrefix = ref('');\nconst measureText = ref('');\nconst measureStart = ref(0);\n\nconst prefixes = computed(() => (Array.isArray(prefix) ? prefix : [prefix]));\n\nconst filteredOptions = computed(() => {\n  const search = measureText.value.toLowerCase();\n  if (!filterOption) return options;\n  if (typeof filterOption === 'function') {\n    return options.filter((opt) => filterOption(search, opt));\n  }\n  if (!search) return options;\n  return options.filter((opt) => {\n    const text = (opt.label ?? opt.value).toLowerCase();\n    return text.includes(search);\n  });\n});\n\nconst showDropdown = computed(() => {\n  if (!measuring.value) return false;\n  if (filteredOptions.value.length === 0 && notFoundContent === null) return false;\n  return isOpen.value;\n});\n\nconst getOptionLabel = (opt: BMentionsOption) => opt.label ?? opt.value;\n\nfunction openMenu() {\n  if (isOpen.value) return;\n  menuRef.value?.showPopover();\n}\n\nfunction closeMenu() {\n  if (!isOpen.value) return;\n  menuRef.value?.hidePopover();\n}\n\nfunction handleToggle({ newState }: ToggleEvent) {\n  const nowOpen = newState === 'open';\n  isOpen.value = nowOpen;\n  if (nowOpen && filteredOptions.value.length > 0) {\n    activeIndex.value = 0;\n  } else if (!nowOpen) {\n    activeIndex.value = -1;\n    measuring.value = false;\n  }\n}\n\nfunction getLastMeasureIndex(\n  text: string,\n  cursorPos: number,\n): { start: number; prefix: string } | null {\n  for (const p of prefixes.value) {\n    const beforeCursor = text.slice(0, cursorPos);\n    const lastPrefixIdx = beforeCursor.lastIndexOf(p);\n    if (lastPrefixIdx < 0) continue;\n    const afterPrefix = beforeCursor.slice(lastPrefixIdx + p.length);\n    if (/\\s/.test(afterPrefix)) continue;\n    if (\n      lastPrefixIdx === 0 ||\n      text[lastPrefixIdx - 1] === split ||\n      /\\s/.test(text[lastPrefixIdx - 1])\n    ) {\n      return { start: lastPrefixIdx, prefix: p };\n    }\n  }\n  return null;\n}\n\nfunction startMeasure(text: string, cursorPos: number) {\n  const measure = getLastMeasureIndex(text, cursorPos);\n  if (measure) {\n    measuring.value = true;\n    measurePrefix.value = measure.prefix;\n    measureStart.value = measure.start;\n    measureText.value = text.slice(measure.start + measure.prefix.length, cursorPos);\n    emit('search', measureText.value, measure.prefix);\n    nextTick(() => openMenu());\n  } else {\n    stopMeasure();\n  }\n}\n\nfunction stopMeasure() {\n  closeMenu();\n  measuring.value = false;\n  measureText.value = '';\n  measurePrefix.value = '';\n  measureStart.value = 0;\n}\n\nfunction selectOption(opt: BMentionsOption) {\n  if (opt.disabled) return;\n\n  const textarea = textareaRef.value;\n  if (!textarea) return;\n\n  const value = model.value ?? '';\n  const cursorPos = textarea.selectionStart;\n  const beforeMention = value.slice(0, measureStart.value);\n  const afterMention = value.slice(cursorPos);\n\n  const mentionValue = `${measurePrefix.value}${opt.value}`;\n  const needsTrailingSplit = afterMention && !afterMention.startsWith(split) && split;\n  const newValue = `${beforeMention}${mentionValue}${needsTrailingSplit ? split : ''}${afterMention}`;\n\n  model.value = newValue;\n  emit('change', newValue);\n  emit('select', opt, measurePrefix.value);\n\n  stopMeasure();\n\n  const newCursorPos =\n    beforeMention.length + mentionValue.length + (needsTrailingSplit ? split.length : 0);\n  nextTick(() => {\n    textarea.focus();\n    textarea.setSelectionRange(newCursorPos, newCursorPos);\n  });\n}\n\nfunction handleInput(e: Event) {\n  const target = e.target as HTMLTextAreaElement;\n  const value = target.value;\n  model.value = value;\n  emit('change', value);\n\n  const cursorPos = target.selectionStart;\n  startMeasure(value, cursorPos);\n  adjustHeight();\n}\n\nfunction handleFocus(e: FocusEvent) {\n  isFocused.value = true;\n  emit('focus', e);\n}\n\nfunction handleBlur(e: FocusEvent) {\n  const related = e.relatedTarget as HTMLElement | null;\n  if (menuRef.value?.contains(related)) return;\n  isFocused.value = false;\n  emit('blur', e);\n  stopMeasure();\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (!showDropdown.value) return;\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      e.preventDefault();\n      const opts = filteredOptions.value;\n      if (opts.length === 0) return;\n      const next = activeIndex.value + 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (next + i) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      const opts = filteredOptions.value;\n      if (opts.length === 0) return;\n      const prev = activeIndex.value - 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (((prev - i) % opts.length) + opts.length) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'Enter': {\n      e.preventDefault();\n      if (activeIndex.value >= 0) {\n        const opt = filteredOptions.value[activeIndex.value];\n        if (opt && !opt.disabled) {\n          selectOption(opt);\n        }\n      }\n      break;\n    }\n    case 'Escape': {\n      e.preventDefault();\n      stopMeasure();\n      break;\n    }\n  }\n}\n\nfunction handleClear() {\n  model.value = '';\n  emit('change', '');\n  emit('clear');\n  stopMeasure();\n  textareaRef.value?.focus();\n}\n\nfunction handlePopupScroll(e: Event) {\n  emit('popupScroll', e);\n}\n\nfunction adjustHeight() {\n  if (!autoSize || !textareaRef.value) return;\n  const textarea = textareaRef.value;\n  textarea.style.height = 'auto';\n\n  const config = typeof autoSize === 'object' ? autoSize : {};\n  const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || 20;\n\n  let newHeight = textarea.scrollHeight;\n  if (config.minRows) {\n    newHeight = Math.max(newHeight, config.minRows * lineHeight);\n  }\n  if (config.maxRows) {\n    newHeight = Math.min(newHeight, config.maxRows * lineHeight);\n  }\n\n  textarea.style.height = `${newHeight}px`;\n  emit('resize', { width: textarea.offsetWidth, height: newHeight });\n}\n\nconst scrollActiveIntoView = () => {\n  nextTick(() => {\n    const active = menuRef.value?.querySelector('[data-active=\"true\"]');\n    active?.scrollIntoView({ block: 'nearest' });\n  });\n};\n\nwatch(activeIndex, scrollActiveIntoView);\n\nwatch(model, (val) => {\n  if (textareaRef.value && textareaRef.value.value !== val) {\n    textareaRef.value.value = val ?? '';\n  }\n});\n\ndefineExpose({\n  focus: () => textareaRef.value?.focus(),\n  blur: () => textareaRef.value?.blur(),\n});\n</script>\n\n<template>\n  <div\n    class=\"b-mentions\"\n    :class=\"[\n      `b-mentions--${size}`,\n      `b-mentions--${variant}`,\n      {\n        'b-mentions--focused': isFocused,\n        'b-mentions--disabled': disabled,\n        'b-mentions--error': status === BMentionsStatus.Error,\n        'b-mentions--warning': status === BMentionsStatus.Warning,\n        'b-mentions--has-clear': allowClear,\n      },\n    ]\"\n    role=\"combobox\"\n    :aria-label=\"placeholder || 'Mentions input'\"\n    :aria-expanded=\"showDropdown\"\n    :aria-haspopup=\"'listbox'\"\n    :aria-controls=\"showDropdown ? listboxId : undefined\"\n  >\n    <textarea\n      ref=\"textareaRef\"\n      v-bind=\"attrs\"\n      :value=\"model\"\n      class=\"b-mentions__textarea\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"readOnly\"\n      :rows=\"autoSize ? undefined : rows\"\n      :aria-label=\"placeholder || 'Mentions input'\"\n      autocomplete=\"off\"\n      :aria-activedescendant=\"activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\"\n      aria-autocomplete=\"list\"\n      @input=\"handleInput\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @keydown=\"handleKeyDown\"\n    />\n\n    <button\n      v-if=\"allowClear && model && !disabled\"\n      type=\"button\"\n      class=\"b-mentions__clear\"\n      aria-label=\"Clear input\"\n      tabindex=\"-1\"\n      @mousedown.prevent=\"handleClear\"\n    ></button>\n\n    <div\n      v-if=\"measuring || isOpen\"\n      ref=\"menuRef\"\n      :id=\"listboxId\"\n      class=\"b-mentions__dropdown\"\n      popover=\"manual\"\n      role=\"listbox\"\n      :aria-label=\"`Mention suggestions for ${measurePrefix}`\"\n      @toggle=\"handleToggle\"\n      @scroll=\"handlePopupScroll\"\n    >\n      <ul v-if=\"filteredOptions.length > 0\" class=\"b-mentions__options\">\n        <li\n          v-for=\"(opt, idx) in filteredOptions\"\n          :key=\"opt.value\"\n          :id=\"`${listboxId}-option-${idx}`\"\n          class=\"b-mentions__option\"\n          :class=\"{\n            'b-mentions__option--active': idx === activeIndex && !opt.disabled,\n            'b-mentions__option--disabled': opt.disabled,\n          }\"\n          :data-active=\"idx === activeIndex\"\n          :aria-selected=\"idx === activeIndex\"\n          :aria-disabled=\"opt.disabled ?? false\"\n          role=\"option\"\n          @mousedown.prevent=\"selectOption(opt)\"\n          @mouseenter=\"activeIndex = idx\"\n        >\n          <slot name=\"option\" :option=\"opt\" :index=\"idx\">\n            {{ getOptionLabel(opt) }}\n          </slot>\n        </li>\n      </ul>\n      <div v-else-if=\"notFoundContent\" class=\"b-mentions__not-found\">\n        <slot name=\"notFoundContent\">\n          {{ notFoundContent }}\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-mentions {\n  --b-mentions-active-bg: #ffffff;\n  --b-mentions-active-border-color: #1677ff;\n  --b-mentions-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-mentions-hover-bg: #ffffff;\n  --b-mentions-hover-border-color: #4096ff;\n  --b-mentions-border-color: #d9d9d9;\n  --b-mentions-bg: #ffffff;\n  --b-mentions-color: rgba(0, 0, 0, 0.88);\n  --b-mentions-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-font-size: 14px;\n  --b-mentions-font-size-lg: 16px;\n  --b-mentions-font-size-sm: 14px;\n  --b-mentions-padding-block: 4px;\n  --b-mentions-padding-block-lg: 7px;\n  --b-mentions-padding-block-sm: 0px;\n  --b-mentions-padding-inline: 11px;\n  --b-mentions-padding-inline-lg: 11px;\n  --b-mentions-padding-inline-sm: 7px;\n  --b-mentions-border-radius: 6px;\n  --b-mentions-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-mentions-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-error-border-color: #ff4d4f;\n  --b-mentions-error-hover-border-color: #ff7875;\n  --b-mentions-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-mentions-warning-border-color: #faad14;\n  --b-mentions-warning-hover-border-color: #ffc53d;\n  --b-mentions-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-mentions-dropdown-bg: #ffffff;\n  --b-mentions-dropdown-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-mentions-dropdown-height: 250px;\n  --b-mentions-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-mentions-option-selected-bg: #e6f4ff;\n  --b-mentions-option-font-size: 14px;\n  --b-mentions-option-padding-x: 12px;\n  --b-mentions-option-padding-y: 5px;\n  --b-mentions-clear-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-mentions-z-index-popup: 1050;\n\n  display: flex;\n  width: 100%;\n}\n\n.b-mentions--has-clear {\n  position: relative;\n}\n\n/* ── Textarea ── */\n.b-mentions__textarea {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  outline: none;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5714;\n  color: var(--b-mentions-color);\n  background-color: var(--b-mentions-bg);\n  border: 1px solid var(--b-mentions-border-color);\n  border-radius: var(--b-mentions-border-radius);\n  transition:\n    border-color 0.2s,\n    box-shadow 0.2s,\n    background-color 0.2s;\n  anchor-name: v-bind('anchorName');\n}\n\n.b-mentions__textarea::placeholder {\n  color: var(--b-mentions-placeholder-color);\n}\n\n/* ── Sizes ── */\n.b-mentions--sm .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block-sm) var(--b-mentions-padding-inline-sm);\n  font-size: var(--b-mentions-font-size-sm);\n}\n\n.b-mentions--md .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block) var(--b-mentions-padding-inline);\n  font-size: var(--b-mentions-font-size);\n}\n\n.b-mentions--lg .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block-lg) var(--b-mentions-padding-inline-lg);\n  font-size: var(--b-mentions-font-size-lg);\n}\n\n/* ── Variants ── */\n.b-mentions--outlined .b-mentions__textarea {\n  border-color: var(--b-mentions-border-color);\n}\n\n.b-mentions--filled .b-mentions__textarea {\n  border-color: transparent;\n  background-color: var(--b-mentions-disabled-bg);\n}\n\n.b-mentions--borderless .b-mentions__textarea {\n  border-color: transparent;\n  background-color: transparent;\n  box-shadow: none;\n}\n\n/* ── States ── */\n.b-mentions--focused:not(.b-mentions--disabled) .b-mentions__textarea {\n  border-color: var(--b-mentions-active-border-color);\n  box-shadow: var(--b-mentions-active-shadow);\n  background-color: var(--b-mentions-active-bg);\n}\n\n.b-mentions:not(.b-mentions--focused):not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-hover-border-color);\n  background-color: var(--b-mentions-hover-bg);\n}\n\n.b-mentions--borderless.b-mentions--focused .b-mentions__textarea {\n  box-shadow: none;\n}\n\n/* ── Disabled ── */\n.b-mentions--disabled .b-mentions__textarea {\n  cursor: not-allowed;\n  background-color: var(--b-mentions-disabled-bg);\n  color: var(--b-mentions-disabled-color);\n}\n\n/* ── Error status ── */\n.b-mentions--error .b-mentions__textarea {\n  border-color: var(--b-mentions-error-border-color);\n}\n\n.b-mentions--error:not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-error-hover-border-color);\n}\n\n.b-mentions--error.b-mentions--focused .b-mentions__textarea {\n  border-color: var(--b-mentions-error-border-color);\n  box-shadow: var(--b-mentions-error-active-shadow);\n}\n\n/* ── Warning status ── */\n.b-mentions--warning .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-border-color);\n}\n\n.b-mentions--warning:not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-hover-border-color);\n}\n\n.b-mentions--warning.b-mentions--focused .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-border-color);\n  box-shadow: var(--b-mentions-warning-active-shadow);\n}\n\n/* ── Clear button ── */\n.b-mentions__clear {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--b-mentions-clear-color);\n  font-size: 10px;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.b-mentions__clear::after {\n  content: '\\2715';\n}\n\n.b-mentions__clear:hover {\n  color: var(--b-mentions-clear-hover-color);\n}\n\n/* ── Dropdown ── */\n.b-mentions__dropdown {\n  margin: 0;\n  padding: 4px;\n  border: none;\n  border-radius: var(--b-mentions-border-radius);\n  background: var(--b-mentions-dropdown-bg);\n  box-shadow: var(--b-mentions-dropdown-shadow);\n  max-height: var(--b-mentions-dropdown-height);\n  overflow-y: auto;\n  z-index: var(--b-mentions-z-index-popup);\n\n  position: absolute;\n  position-anchor: v-bind('anchorName');\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n  width: anchor-size(width);\n  position-try-fallbacks: --b-mentions-top;\n\n  opacity: 0;\n  transition:\n    display 0.2s allow-discrete,\n    opacity 0.2s;\n}\n\n.b-mentions__dropdown:popover-open {\n  opacity: 1;\n\n  @starting-style {\n    opacity: 0;\n  }\n}\n\n@position-try --b-mentions-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n}\n\n/* ── Options list ── */\n.b-mentions__options {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.b-mentions__option {\n  padding: var(--b-mentions-option-padding-y) var(--b-mentions-option-padding-x);\n  font-size: var(--b-mentions-option-font-size);\n  line-height: 1.5714;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.b-mentions__option--active {\n  background: var(--b-mentions-option-active-bg);\n}\n\n.b-mentions__option:hover:not(.b-mentions__option--disabled) {\n  background: var(--b-mentions-option-active-bg);\n}\n\n.b-mentions__option--disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n/* ── Not found ── */\n.b-mentions__not-found {\n  padding: var(--b-mentions-option-padding-y) var(--b-mentions-option-padding-x);\n  font-size: var(--b-mentions-option-font-size);\n  color: var(--b-mentions-disabled-color);\n  text-align: center;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-mentions {\n  --b-mentions-active-bg: #1f1f1f;\n  --b-mentions-active-border-color: #1668dc;\n  --b-mentions-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-mentions-hover-bg: #1f1f1f;\n  --b-mentions-hover-border-color: #3c89e8;\n  --b-mentions-border-color: #424242;\n  --b-mentions-bg: #1f1f1f;\n  --b-mentions-color: rgba(255, 255, 255, 0.88);\n  --b-mentions-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-mentions-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-dropdown-bg: #2a2a2a;\n  --b-mentions-dropdown-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-mentions-option-active-bg: rgba(255, 255, 255, 0.08);\n  --b-mentions-option-selected-bg: #111a2c;\n  --b-mentions-clear-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-clear-hover-color: rgba(255, 255, 255, 0.45);\n  --b-mentions-error-border-color: #d32029;\n  --b-mentions-error-hover-border-color: #e84749;\n  --b-mentions-error-active-shadow: 0 0 0 2px rgba(211, 32, 41, 0.1);\n  --b-mentions-warning-border-color: #d89614;\n  --b-mentions-warning-hover-border-color: #e8b339;\n  --b-mentions-warning-active-shadow: 0 0 0 2px rgba(216, 150, 20, 0.1);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-mentions {\n    --b-mentions-active-bg: #1f1f1f;\n    --b-mentions-active-border-color: #1668dc;\n    --b-mentions-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-mentions-hover-bg: #1f1f1f;\n    --b-mentions-hover-border-color: #3c89e8;\n    --b-mentions-border-color: #424242;\n    --b-mentions-bg: #1f1f1f;\n    --b-mentions-color: rgba(255, 255, 255, 0.88);\n    --b-mentions-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-mentions-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-dropdown-bg: #2a2a2a;\n    --b-mentions-dropdown-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-mentions-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-mentions-option-selected-bg: #111a2c;\n    --b-mentions-clear-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-clear-hover-color: rgba(255, 255, 255, 0.45);\n    --b-mentions-error-border-color: #d32029;\n    --b-mentions-error-hover-border-color: #e84749;\n    --b-mentions-error-active-shadow: 0 0 0 2px rgba(211, 32, 41, 0.1);\n    --b-mentions-warning-border-color: #d89614;\n    --b-mentions-warning-hover-border-color: #e8b339;\n    --b-mentions-warning-active-shadow: 0 0 0 2px rgba(216, 150, 20, 0.1);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-mentions__textarea,\n  .b-mentions__dropdown,\n  .b-mentions__option,\n  .b-mentions__clear {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system126.js","names":["$attrs"],"sources":["../src/components/BLink/BLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { BCommonColor } from '@/types.ts';\nimport { computed, resolveDynamicComponent, useSlots } from 'vue';\nimport type { RouteLocationRaw } from 'vue-router';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  href,\n  to,\n  target,\n  rel,\n  disabled = false,\n  external = false,\n  underline = 'hover',\n  color = BCommonColor.Primary,\n  as,\n  showExternalIcon = true,\n} = defineProps<{\n  /**\n   * URL for an anchor link. When set (and `to` is not), the component\n   * renders as an `<a href=\"...\">`.\n   * @example 'https://example.com'\n   */\n  href?: string;\n  /**\n   * Vue Router target. When set, the component renders as `<RouterLink>`\n   * (gracefully falls back to `<a>` if vue-router is not registered).\n   */\n  to?: RouteLocationRaw;\n  /**\n   * Anchor `target` attribute. Forced to `_blank` when `external` is true.\n   * @example '_blank' | '_self' | '_parent' | '_top'\n   */\n  target?: string;\n  /**\n   * Anchor `rel` attribute. When `external` is true the value is augmented\n   * with `noopener noreferrer`.\n   */\n  rel?: string;\n  /**\n   * Disables interaction. `<a>` and `<RouterLink>` are downgraded to a\n   * `<span aria-disabled=\"true\">` since native anchors do not support `:disabled`.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the link as external — forces `target=\"_blank\"`,\n   * `rel=\"noopener noreferrer\"`, and renders a trailing external-link icon.\n   * @default false\n   */\n  external?: boolean;\n  /**\n   * Underline behaviour.\n   * - `always`  — text-decoration always visible\n   * - `hover`   — only on hover / focus-visible\n   * - `none`    — never\n   * @default 'hover'\n   */\n  underline?: 'always' | 'hover' | 'none';\n  /**\n   * Color family applied to the link text.\n   * @default 'primary'\n   */\n  color?: `${BCommonColor}`;\n  /**\n   * Explicit element override. When set takes the highest priority over\n   * `to` / `href`. `'a'` requires either `href` or generates a no-op\n   * placeholder; `'button'` renders `<button type=\"button\">`.\n   */\n  as?: 'a' | 'button';\n  /**\n   * Whether to render the trailing external-link icon when `external` is true.\n   * @default true\n   */\n  showExternalIcon?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired on click. Suppressed when disabled. */\n  click: [event: MouseEvent];\n}>();\n\n// ─────────────────────────────────────────────\n// Router availability (SSR-safe)\n// ─────────────────────────────────────────────\nconst hasRouterLink = computed(() => {\n  const resolved = resolveDynamicComponent('RouterLink');\n  return typeof resolved !== 'string';\n});\n\n// ─────────────────────────────────────────────\n// Element resolution priority:\n// 1. `as` prop  →  explicit override\n// 2. `to`       →  RouterLink (or <a> fallback if router not registered)\n// 3. `href`     →  <a>\n// 4. otherwise  →  <button type=\"button\">\n// When disabled, <a>/<RouterLink> are downgraded to <span aria-disabled=\"true\">.\n// ─────────────────────────────────────────────\ntype ResolvedTag = 'a' | 'button' | 'span' | 'router-link';\n\nconst resolvedTag = computed<ResolvedTag>(() => {\n  if (as === 'button') return 'button';\n  if (as === 'a') return disabled ? 'span' : 'a';\n  if (to !== undefined && to !== null) {\n    if (!hasRouterLink.value) return disabled ? 'span' : 'a';\n    return disabled ? 'span' : 'router-link';\n  }\n  if (href !== undefined) return disabled ? 'span' : 'a';\n  return 'button';\n});\n\n// Stringify a `to` prop into a usable href when RouterLink is unavailable.\nconst fallbackHref = computed(() => {\n  if (to === undefined || to === null) return undefined;\n  if (typeof to === 'string') return to;\n  if (typeof to === 'object' && 'path' in to && typeof to.path === 'string') return to.path;\n  try {\n    return JSON.stringify(to);\n  } catch {\n    return undefined;\n  }\n});\n\n// ─────────────────────────────────────────────\n// target / rel — `external` forces _blank + noopener noreferrer\n// ─────────────────────────────────────────────\nconst computedTarget = computed(() => {\n  if (external) return '_blank';\n  return target;\n});\n\nconst computedRel = computed(() => {\n  const tokens = new Set<string>();\n  if (rel) rel.split(/\\s+/).filter(Boolean).forEach((t) => tokens.add(t));\n  if (external || computedTarget.value === '_blank') {\n    tokens.add('noopener');\n    tokens.add('noreferrer');\n  }\n  return tokens.size > 0 ? Array.from(tokens).join(' ') : undefined;\n});\n\n// ─────────────────────────────────────────────\n// Click handling — block when disabled\n// ─────────────────────────────────────────────\nconst onClick = (event: MouseEvent) => {\n  if (disabled) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n  emit('click', event);\n};\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst hasLeading = computed(() => !!slots.leading);\nconst hasTrailing = computed(() => !!slots.trailing);\nconst showExternalGlyph = computed(\n  () => external && showExternalIcon && !hasTrailing.value,\n);\n\n// ─────────────────────────────────────────────\n// Class binding (CSS-first)\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-link',\n  `b-link--${color}`,\n  `b-link--underline-${underline}`,\n  {\n    'b-link--disabled': disabled,\n    'b-link--external': external,\n  },\n]);\n</script>\n\n<template>\n  <RouterLink\n    v-if=\"resolvedTag === 'router-link'\"\n    :to=\"to!\"\n    :class=\"rootClasses\"\n    :target=\"computedTarget\"\n    :rel=\"computedRel\"\n    v-bind=\"$attrs\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"hasLeading\" class=\"b-link__leading\" aria-hidden=\"true\">\n      <slot name=\"leading\" />\n    </span>\n    <span class=\"b-link__label\">\n      <slot />\n    </span>\n    <span v-if=\"hasTrailing\" class=\"b-link__trailing\" aria-hidden=\"true\">\n      <slot name=\"trailing\" />\n    </span>\n    <BIcon\n      v-if=\"showExternalGlyph\"\n      class=\"b-link__external-icon\"\n      icon=\"up-right-from-square\"\n      size=\"xs\"\n      aria-hidden=\"true\"\n    />\n  </RouterLink>\n\n  <a\n    v-else-if=\"resolvedTag === 'a'\"\n    :class=\"rootClasses\"\n    :href=\"href ?? fallbackHref\"\n    :target=\"computedTarget\"\n    :rel=\"computedRel\"\n    v-bind=\"$attrs\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"hasLeading\" class=\"b-link__leading\" aria-hidden=\"true\">\n      <slot name=\"leading\" />\n    </span>\n    <span class=\"b-link__label\">\n      <slot />\n    </span>\n    <span v-if=\"hasTrailing\" class=\"b-link__trailing\" aria-hidden=\"true\">\n      <slot name=\"trailing\" />\n    </span>\n    <BIcon\n      v-if=\"showExternalGlyph\"\n      class=\"b-link__external-icon\"\n      icon=\"up-right-from-square\"\n      size=\"xs\"\n      aria-hidden=\"true\"\n    />\n  </a>\n\n  <button\n    v-else-if=\"resolvedTag === 'button'\"\n    :class=\"rootClasses\"\n    type=\"button\"\n    :disabled=\"disabled\"\n    :aria-disabled=\"disabled || undefined\"\n    v-bind=\"$attrs\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"hasLeading\" class=\"b-link__leading\" aria-hidden=\"true\">\n      <slot name=\"leading\" />\n    </span>\n    <span class=\"b-link__label\">\n      <slot />\n    </span>\n    <span v-if=\"hasTrailing\" class=\"b-link__trailing\" aria-hidden=\"true\">\n      <slot name=\"trailing\" />\n    </span>\n    <BIcon\n      v-if=\"showExternalGlyph\"\n      class=\"b-link__external-icon\"\n      icon=\"up-right-from-square\"\n      size=\"xs\"\n      aria-hidden=\"true\"\n    />\n  </button>\n\n  <span\n    v-else\n    :class=\"rootClasses\"\n    role=\"link\"\n    aria-disabled=\"true\"\n    v-bind=\"$attrs\"\n  >\n    <span v-if=\"hasLeading\" class=\"b-link__leading\" aria-hidden=\"true\">\n      <slot name=\"leading\" />\n    </span>\n    <span class=\"b-link__label\">\n      <slot />\n    </span>\n    <span v-if=\"hasTrailing\" class=\"b-link__trailing\" aria-hidden=\"true\">\n      <slot name=\"trailing\" />\n    </span>\n    <BIcon\n      v-if=\"showExternalGlyph\"\n      class=\"b-link__external-icon\"\n      icon=\"up-right-from-square\"\n      size=\"xs\"\n      aria-hidden=\"true\"\n    />\n  </span>\n</template>\n\n<style>\n.b-link {\n  /* ── Component tokens ── */\n  --b-link-color: var(--color-primary, oklch(55% 0.169 237.323));\n  --b-link-color-hover: var(--color-primary-hover, oklch(48% 0.158 241.966));\n  --b-link-color-disabled: oklch(0 0 0 / 0.35);\n  --b-link-underline-color: currentColor;\n  --b-link-underline-offset: 2px;\n  --b-link-underline-thickness: 1px;\n  --b-link-gap: 0.25rem;\n  --b-link-focus-outline-color: currentColor;\n  --b-link-focus-outline-width: 2px;\n  --b-link-focus-outline-offset: 2px;\n  --b-link-transition-duration: 150ms;\n\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-link-gap);\n  color: var(--b-link-color);\n  background: transparent;\n  border: none;\n  padding: 0;\n  font: inherit;\n  line-height: inherit;\n  cursor: pointer;\n  text-decoration: none;\n  text-decoration-color: var(--b-link-underline-color);\n  text-underline-offset: var(--b-link-underline-offset);\n  text-decoration-thickness: var(--b-link-underline-thickness);\n  transition:\n    color var(--b-link-transition-duration) ease,\n    text-decoration-color var(--b-link-transition-duration) ease;\n}\n\n.b-link:hover:not(.b-link--disabled),\n.b-link:focus-visible:not(.b-link--disabled) {\n  color: var(--b-link-color-hover);\n}\n\n.b-link:focus-visible {\n  outline: var(--b-link-focus-outline-width) solid var(--b-link-focus-outline-color);\n  outline-offset: var(--b-link-focus-outline-offset);\n  border-radius: 2px;\n}\n\n/* ── Underline modes (CSS-first) ── */\n.b-link--underline-always {\n  text-decoration: underline;\n}\n\n.b-link--underline-hover:hover:not(.b-link--disabled),\n.b-link--underline-hover:focus-visible:not(.b-link--disabled) {\n  text-decoration: underline;\n}\n\n.b-link--underline-none,\n.b-link--underline-none:hover {\n  text-decoration: none;\n}\n\n/* ── Color families ── */\n.b-link--primary {\n  --b-link-color: var(--color-primary, oklch(55% 0.169 237.323));\n  --b-link-color-hover: var(--color-primary-hover, oklch(48% 0.158 241.966));\n}\n.b-link--secondary {\n  --b-link-color: oklch(0 0 0 / 0.85);\n  --b-link-color-hover: var(--color-secondary-hover, oklch(87.1% 0.006 286.286));\n}\n.b-link--success {\n  --b-link-color: var(--color-success, oklch(50% 0.17 149.579));\n  --b-link-color-hover: var(--color-success-hover, oklch(43% 0.15 149.214));\n}\n.b-link--failure {\n  --b-link-color: var(--color-failure, oklch(55% 0.22 25.331));\n  --b-link-color-hover: var(--color-failure-hover, oklch(49% 0.21 27.325));\n}\n.b-link--warning {\n  --b-link-color: var(--color-warning, oklch(55% 0.16 55.934));\n  --b-link-color-hover: var(--color-warning-hover, oklch(48% 0.15 47.604));\n}\n.b-link--info {\n  --b-link-color: var(--color-info, oklch(55% 0.2 259.815));\n  --b-link-color-hover: var(--color-info-hover, oklch(48% 0.2 262.881));\n}\n\n/* ── Disabled ── */\n.b-link--disabled {\n  color: var(--b-link-color-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n  text-decoration: none;\n}\n\nbutton.b-link:disabled {\n  color: var(--b-link-color-disabled);\n  cursor: not-allowed;\n}\n\n/* ── Sub-elements ── */\n.b-link__leading,\n.b-link__trailing,\n.b-link__external-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-link {\n  --b-link-color-disabled: oklch(100% 0 0 / 0.35);\n}\n[data-prefers-color='dark'] .b-link--secondary {\n  --b-link-color: oklch(100% 0 0 / 0.85);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-link {\n    --b-link-color-disabled: oklch(100% 0 0 / 0.35);\n  }\n  [data-prefers-color='system'] .b-link--secondary {\n    --b-link-color: oklch(100% 0 0 / 0.85);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-link {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system128.js

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

package/dist/design-system128.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system128.js","names":[],"sources":["../src/components/BLink/BLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport { BCommonColor } from '@/types.ts';\nimport { computed, resolveDynamicComponent, useSlots } from 'vue';\nimport type { RouteLocationRaw } from 'vue-router';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  href,\n  to,\n  target,\n  rel,\n  disabled = false,\n  external = false,\n  underline = 'hover',\n  color = BCommonColor.Primary,\n  as,\n  showExternalIcon = true,\n} = defineProps<{\n  /**\n   * URL for an anchor link. When set (and `to` is not), the component\n   * renders as an `<a href=\"...\">`.\n   * @example 'https://example.com'\n   */\n  href?: string;\n  /**\n   * Vue Router target. When set, the component renders as `<RouterLink>`\n   * (gracefully falls back to `<a>` if vue-router is not registered).\n   */\n  to?: RouteLocationRaw;\n  /**\n   * Anchor `target` attribute. Forced to `_blank` when `external` is true.\n   * @example '_blank' | '_self' | '_parent' | '_top'\n   */\n  target?: string;\n  /**\n   * Anchor `rel` attribute. When `external` is true the value is augmented\n   * with `noopener noreferrer`.\n   */\n  rel?: string;\n  /**\n   * Disables interaction. `<a>` and `<RouterLink>` are downgraded to a\n   * `<span aria-disabled=\"true\">` since native anchors do not support `:disabled`.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the link as external — forces `target=\"_blank\"`,\n   * `rel=\"noopener noreferrer\"`, and renders a trailing external-link icon.\n   * @default false\n   */\n  external?: boolean;\n  /**\n   * Underline behaviour.\n   * - `always`  — text-decoration always visible\n   * - `hover`   — only on hover / focus-visible\n   * - `none`    — never\n   * @default 'hover'\n   */\n  underline?: 'always' | 'hover' | 'none';\n  /**\n   * Color family applied to the link text.\n   * @default 'primary'\n   */\n  color?: `${BCommonColor}`;\n  /**\n   * Explicit element override. When set takes the highest priority over\n   * `to` / `href`. `'a'` requires either `href` or generates a no-op\n   * placeholder; `'button'` renders `<button type=\"button\">`.\n   */\n  as?: 'a' | 'button';\n  /**\n   * Whether to render the trailing external-link icon when `external` is true.\n   * @default true\n   */\n  showExternalIcon?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired on click. Suppressed when disabled. */\n  click: [event: MouseEvent];\n}>();\n\n// ─────────────────────────────────────────────\n// Router availability (SSR-safe)\n// ─────────────────────────────────────────────\nconst hasRouterLink = computed(() => {\n  const resolved = resolveDynamicComponent('RouterLink');\n  return typeof resolved !== 'string';\n});\n\n// ─────────────────────────────────────────────\n// Element resolution priority:\n// 1. `as` prop  →  explicit override\n// 2. `to`       →  RouterLink (or <a> fallback if router not registered)\n// 3. `href`     →  <a>\n// 4. otherwise  →  <button type=\"button\">\n// When disabled, <a>/<RouterLink> are downgraded to <span aria-disabled=\"true\">.\n// ─────────────────────────────────────────────\ntype ResolvedTag = 'a' | 'button' | 'span' | 'router-link';\n\nconst resolvedTag = computed<ResolvedTag>(() => {\n  if (as === 'button') return 'button';\n  if (as === 'a') return disabled ? 'span' : 'a';\n  if (to !== undefined && to !== null) {\n    if (!hasRouterLink.value) return disabled ? 'span' : 'a';\n    return disabled ? 'span' : 'router-link';\n  }\n  if (href !== undefined) return disabled ? 'span' : 'a';\n  return 'button';\n});\n\n// Stringify a `to` prop into a usable href when RouterLink is unavailable.\nconst fallbackHref = computed(() => {\n  if (to === undefined || to === null) return undefined;\n  if (typeof to === 'string') return to;\n  if (typeof to === 'object' && 'path' in to && typeof to.path === 'string') return to.path;\n  try {\n    return JSON.stringify(to);\n  } catch {\n    return undefined;\n  }\n});\n\n// ─────────────────────────────────────────────\n// target / rel — `external` forces _blank + noopener noreferrer\n// ─────────────────────────────────────────────\nconst computedTarget = computed(() => {\n  if (external) return '_blank';\n  return target;\n});\n\nconst computedRel = computed(() => {\n  const tokens = new Set<string>();\n  if (rel) rel.split(/\\s+/).filter(Boolean).forEach((t) => tokens.add(t));\n  if (external || computedTarget.value === '_blank') {\n    tokens.add('noopener');\n    tokens.add('noreferrer');\n  }\n  return tokens.size > 0 ? Array.from(tokens).join(' ') : undefined;\n});\n\n// ─────────────────────────────────────────────\n// Click handling — block when disabled\n// ─────────────────────────────────────────────\nconst onClick = (event: MouseEvent) => {\n  if (disabled) {\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n  emit('click', event);\n};\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst hasLeading = computed(() => !!slots.leading);\nconst hasTrailing = computed(() => !!slots.trailing);\nconst showExternalGlyph = computed(\n  () => external && showExternalIcon && !hasTrailing.value,\n);\n\n// ─────────────────────────────────────────────\n// Class binding (CSS-first)\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-link',\n  `b-link--${color}`,\n  `b-link--underline-${underline}`,\n  {\n    'b-link--disabled': disabled,\n    'b-link--external': external,\n  },\n]);\n</script>\n\n<template>\n  <RouterLink\n    v-if=\"resolvedTag === 'router-link'\"\n    :to=\"to!\"\n    :class=\"rootClasses\"\n    :target=\"computedTarget\"\n    :rel=\"computedRel\"\n    v-bind=\"$attrs\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"hasLeading\" class=\"b-link__leading\" aria-hidden=\"true\">\n      <slot name=\"leading\" />\n    </span>\n    <span class=\"b-link__label\">\n      <slot />\n    </span>\n    <span v-if=\"hasTrailing\" class=\"b-link__trailing\" aria-hidden=\"true\">\n      <slot name=\"trailing\" />\n    </span>\n    <BIcon\n      v-if=\"showExternalGlyph\"\n      class=\"b-link__external-icon\"\n      icon=\"up-right-from-square\"\n      size=\"xs\"\n      aria-hidden=\"true\"\n    />\n  </RouterLink>\n\n  <a\n    v-else-if=\"resolvedTag === 'a'\"\n    :class=\"rootClasses\"\n    :href=\"href ?? fallbackHref\"\n    :target=\"computedTarget\"\n    :rel=\"computedRel\"\n    v-bind=\"$attrs\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"hasLeading\" class=\"b-link__leading\" aria-hidden=\"true\">\n      <slot name=\"leading\" />\n    </span>\n    <span class=\"b-link__label\">\n      <slot />\n    </span>\n    <span v-if=\"hasTrailing\" class=\"b-link__trailing\" aria-hidden=\"true\">\n      <slot name=\"trailing\" />\n    </span>\n    <BIcon\n      v-if=\"showExternalGlyph\"\n      class=\"b-link__external-icon\"\n      icon=\"up-right-from-square\"\n      size=\"xs\"\n      aria-hidden=\"true\"\n    />\n  </a>\n\n  <button\n    v-else-if=\"resolvedTag === 'button'\"\n    :class=\"rootClasses\"\n    type=\"button\"\n    :disabled=\"disabled\"\n    :aria-disabled=\"disabled || undefined\"\n    v-bind=\"$attrs\"\n    @click=\"onClick\"\n  >\n    <span v-if=\"hasLeading\" class=\"b-link__leading\" aria-hidden=\"true\">\n      <slot name=\"leading\" />\n    </span>\n    <span class=\"b-link__label\">\n      <slot />\n    </span>\n    <span v-if=\"hasTrailing\" class=\"b-link__trailing\" aria-hidden=\"true\">\n      <slot name=\"trailing\" />\n    </span>\n    <BIcon\n      v-if=\"showExternalGlyph\"\n      class=\"b-link__external-icon\"\n      icon=\"up-right-from-square\"\n      size=\"xs\"\n      aria-hidden=\"true\"\n    />\n  </button>\n\n  <span\n    v-else\n    :class=\"rootClasses\"\n    role=\"link\"\n    aria-disabled=\"true\"\n    v-bind=\"$attrs\"\n  >\n    <span v-if=\"hasLeading\" class=\"b-link__leading\" aria-hidden=\"true\">\n      <slot name=\"leading\" />\n    </span>\n    <span class=\"b-link__label\">\n      <slot />\n    </span>\n    <span v-if=\"hasTrailing\" class=\"b-link__trailing\" aria-hidden=\"true\">\n      <slot name=\"trailing\" />\n    </span>\n    <BIcon\n      v-if=\"showExternalGlyph\"\n      class=\"b-link__external-icon\"\n      icon=\"up-right-from-square\"\n      size=\"xs\"\n      aria-hidden=\"true\"\n    />\n  </span>\n</template>\n\n<style>\n.b-link {\n  /* ── Component tokens ── */\n  --b-link-color: var(--color-primary, oklch(55% 0.169 237.323));\n  --b-link-color-hover: var(--color-primary-hover, oklch(48% 0.158 241.966));\n  --b-link-color-disabled: oklch(0 0 0 / 0.35);\n  --b-link-underline-color: currentColor;\n  --b-link-underline-offset: 2px;\n  --b-link-underline-thickness: 1px;\n  --b-link-gap: 0.25rem;\n  --b-link-focus-outline-color: currentColor;\n  --b-link-focus-outline-width: 2px;\n  --b-link-focus-outline-offset: 2px;\n  --b-link-transition-duration: 150ms;\n\n  display: inline-flex;\n  align-items: center;\n  gap: var(--b-link-gap);\n  color: var(--b-link-color);\n  background: transparent;\n  border: none;\n  padding: 0;\n  font: inherit;\n  line-height: inherit;\n  cursor: pointer;\n  text-decoration: none;\n  text-decoration-color: var(--b-link-underline-color);\n  text-underline-offset: var(--b-link-underline-offset);\n  text-decoration-thickness: var(--b-link-underline-thickness);\n  transition:\n    color var(--b-link-transition-duration) ease,\n    text-decoration-color var(--b-link-transition-duration) ease;\n}\n\n.b-link:hover:not(.b-link--disabled),\n.b-link:focus-visible:not(.b-link--disabled) {\n  color: var(--b-link-color-hover);\n}\n\n.b-link:focus-visible {\n  outline: var(--b-link-focus-outline-width) solid var(--b-link-focus-outline-color);\n  outline-offset: var(--b-link-focus-outline-offset);\n  border-radius: 2px;\n}\n\n/* ── Underline modes (CSS-first) ── */\n.b-link--underline-always {\n  text-decoration: underline;\n}\n\n.b-link--underline-hover:hover:not(.b-link--disabled),\n.b-link--underline-hover:focus-visible:not(.b-link--disabled) {\n  text-decoration: underline;\n}\n\n.b-link--underline-none,\n.b-link--underline-none:hover {\n  text-decoration: none;\n}\n\n/* ── Color families ── */\n.b-link--primary {\n  --b-link-color: var(--color-primary, oklch(55% 0.169 237.323));\n  --b-link-color-hover: var(--color-primary-hover, oklch(48% 0.158 241.966));\n}\n.b-link--secondary {\n  --b-link-color: oklch(0 0 0 / 0.85);\n  --b-link-color-hover: var(--color-secondary-hover, oklch(87.1% 0.006 286.286));\n}\n.b-link--success {\n  --b-link-color: var(--color-success, oklch(50% 0.17 149.579));\n  --b-link-color-hover: var(--color-success-hover, oklch(43% 0.15 149.214));\n}\n.b-link--failure {\n  --b-link-color: var(--color-failure, oklch(55% 0.22 25.331));\n  --b-link-color-hover: var(--color-failure-hover, oklch(49% 0.21 27.325));\n}\n.b-link--warning {\n  --b-link-color: var(--color-warning, oklch(55% 0.16 55.934));\n  --b-link-color-hover: var(--color-warning-hover, oklch(48% 0.15 47.604));\n}\n.b-link--info {\n  --b-link-color: var(--color-info, oklch(55% 0.2 259.815));\n  --b-link-color-hover: var(--color-info-hover, oklch(48% 0.2 262.881));\n}\n\n/* ── Disabled ── */\n.b-link--disabled {\n  color: var(--b-link-color-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n  text-decoration: none;\n}\n\nbutton.b-link:disabled {\n  color: var(--b-link-color-disabled);\n  cursor: not-allowed;\n}\n\n/* ── Sub-elements ── */\n.b-link__leading,\n.b-link__trailing,\n.b-link__external-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-link {\n  --b-link-color-disabled: oklch(100% 0 0 / 0.35);\n}\n[data-prefers-color='dark'] .b-link--secondary {\n  --b-link-color: oklch(100% 0 0 / 0.85);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-link {\n    --b-link-color-disabled: oklch(100% 0 0 / 0.35);\n  }\n  [data-prefers-color='system'] .b-link--secondary {\n    --b-link-color: oklch(100% 0 0 / 0.85);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-link {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}