@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system170.js

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

package/dist/design-system170.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system170.js","names":[],"sources":["../src/components/BSegmented/BSegmented.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, renderSlot as _renderSlot, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from \"vue\"\n\nconst _hoisted_1 = [\"aria-disabled\"]\nconst _hoisted_2 = [\"aria-label\", \"aria-checked\", \"aria-disabled\", \"tabindex\", \"onClick\", \"onKeydown\"]\nconst _hoisted_3 = { class: \"b-segmented__item-inner\" }\nconst _hoisted_4 = {\n  key: 0,\n  class: \"b-segmented__item-icon\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_5 = { class: \"b-segmented__item-label\" }\n\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\n\nimport type { BSegmentedOption, BSegmentedRawOption } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSegmented',\n  props: {\n    modelValue: {},\n    defaultValue: {},\n    options: { default: () => ([]) },\n    disabled: { type: Boolean, default: false },\n    size: { default: 'default' },\n    block: { type: Boolean, default: false }\n  },\n  emits: [\"update:modelValue\", \"change\"],\n  setup(__props: any, { emit: __emit }) {\n\n\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = __emit;\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\n\n\n// ─────────────────────────────────────────────\n// Normalise options\n// ─────────────────────────────────────────────\nconst normalizedOptions = computed<BSegmentedOption[]>(() =>\n  __props.options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt, disabled: false };\n    }\n    return {\n      label: String(opt.label ?? opt.value),\n      value: opt.value,\n      disabled: opt.disabled ?? false,\n      icon: opt.icon,\n    };\n  }),\n);\n\n// ─────────────────────────────────────────────\n// Internal selection state\n// ─────────────────────────────────────────────\nconst isControlled = computed(() => __props.modelValue !== undefined);\n\nconst internalValue = ref<string | number | undefined>(\n  __props.modelValue ?? __props.defaultValue ?? normalizedOptions.value[0]?.value,\n);\n\n// Sync controlled value → internal\nwatch(\n  () => __props.modelValue,\n  (val) => {\n    if (val !== undefined) internalValue.value = val;\n  },\n);\n\n// Sync first option as default when options change and nothing is selected\nwatch(normalizedOptions, (opts) => {\n  if (internalValue.value === undefined && opts.length > 0) {\n    internalValue.value = opts[0].value;\n  }\n});\n\nconst selectedValue = computed(() => (isControlled.value ? __props.modelValue : internalValue.value));\n\n// ─────────────────────────────────────────────\n// Thumb (animated indicator) positioning\n// ─────────────────────────────────────────────\nconst rootRef = ref<HTMLElement | null>(null);\nconst thumbStyle = ref<{ transform: string; width: string } | null>(null);\n\nfunction updateThumb(index: number) {\n  if (!rootRef.value) return;\n  const items = rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item');\n  const target = items[index];\n  if (!target) return;\n\n  const containerLeft = rootRef.value.getBoundingClientRect().left;\n  const { left, width } = target.getBoundingClientRect();\n  thumbStyle.value = {\n    transform: `translateX(${left - containerLeft}px)`,\n    width: `${width}px`,\n  };\n}\n\nconst selectedIndex = computed(() =>\n  normalizedOptions.value.findIndex((o) => o.value === selectedValue.value),\n);\n\nwatch(\n  selectedIndex,\n  async (idx) => {\n    if (idx < 0) return;\n    await nextTick();\n    updateThumb(idx);\n  },\n  { immediate: false },\n);\n\nonMounted(() => {\n  if (selectedIndex.value >= 0) updateThumb(selectedIndex.value);\n});\n\n// ─────────────────────────────────────────────\n// Selection logic\n// ─────────────────────────────────────────────\nfunction select(opt: BSegmentedOption) {\n  if (__props.disabled || opt.disabled) return;\n  if (opt.value === selectedValue.value) return;\n\n  if (!isControlled.value) {\n    internalValue.value = opt.value;\n  }\n  emit('update:modelValue', opt.value);\n  emit('change', opt.value);\n}\n\n// ─────────────────────────────────────────────\n// Keyboard navigation\n// ─────────────────────────────────────────────\nfunction onKeydown(event: KeyboardEvent, opt: BSegmentedOption) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    select(opt);\n  }\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault();\n    focusNext(1);\n  }\n  if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    focusNext(-1);\n  }\n}\n\nfunction focusNext(direction: 1 | -1) {\n  if (!rootRef.value) return;\n  const items = Array.from(\n    rootRef.value.querySelectorAll<HTMLElement>('.b-segmented__item:not([aria-disabled=\"true\"])'),\n  );\n  const activeEl = document.activeElement as HTMLElement;\n  const currentIdx = items.indexOf(activeEl);\n  if (currentIdx < 0) {\n    items[0]?.focus();\n    return;\n  }\n  const next = (currentIdx + direction + items.length) % items.length;\n  items[next]?.focus();\n}\n\n// ─────────────────────────────────────────────\n// Root classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-segmented',\n  {\n    'b-segmented--disabled': __props.disabled,\n    'b-segmented--block': __props.block,\n    'b-segmented--small': __props.size === 'small',\n    'b-segmented--large': __props.size === 'large',\n  },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    ref_key: \"rootRef\",\n    ref: rootRef,\n    class: _normalizeClass(rootClasses.value),\n    role: \"group\",\n    \"aria-disabled\": __props.disabled ? 'true' : undefined\n  }, [\n    (thumbStyle.value)\n      ? (_openBlock(), _createElementBlock(\"div\", {\n          key: 0,\n          class: \"b-segmented__thumb\",\n          \"aria-hidden\": \"true\",\n          style: _normalizeStyle({ transform: thumbStyle.value.transform, width: thumbStyle.value.width })\n        }, null, 4))\n      : _createCommentVNode(\"\", true),\n    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(normalizedOptions.value, (opt) => {\n      return (_openBlock(), _createElementBlock(\"div\", {\n        key: String(opt.value),\n        class: _normalizeClass([\"b-segmented__item\", {\n        'b-segmented__item--selected': opt.value === selectedValue.value,\n        'b-segmented__item--disabled': opt.disabled || __props.disabled,\n      }]),\n        role: \"radio\",\n        \"aria-label\": opt.label,\n        \"aria-checked\": opt.value === selectedValue.value,\n        \"aria-disabled\": opt.disabled || __props.disabled ? 'true' : undefined,\n        tabindex: __props.disabled || opt.disabled ? -1 : opt.value === selectedValue.value ? 0 : -1,\n        onClick: ($event: any) => (select(opt)),\n        onKeydown: ($event: any) => (onKeydown($event, opt))\n      }, [\n        _createElementVNode(\"div\", _hoisted_3, [\n          (opt.icon)\n            ? (_openBlock(), _createElementBlock(\"span\", _hoisted_4, _toDisplayString(opt.icon), 1))\n            : _createCommentVNode(\"\", true),\n          _createElementVNode(\"span\", _hoisted_5, [\n            _renderSlot(_ctx.$slots, \"label\", { option: opt }, () => [\n              _createTextVNode(_toDisplayString(opt.label), 1)\n            ])\n          ])\n        ])\n      ], 42, _hoisted_2))\n    }), 128))\n  ], 10, _hoisted_1))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system170.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,IAAM,IAAQ,EAA4B,GAAA,aAAE,EAEtC,IAAO,GAMP,IAAoB,QACnB,EAAA,UACE,EAAA,QAAQ,KAAK,MACd,OAAO,KAAQ,YAAY,OAAO,KAAQ,WACrC;GAAE,OAAO,OAAO,EAAI;GAAE,OAAO;GAAK,GAEpC,EACP,GANmB,EAAE,CAOvB;EAIF,SAAS,EAAS,GAAsB;AAEtC,GADA,EAAM,QAAQ,GACd,EAAK,UAAU,EAAI;;EAIrB,IAAM,EACJ,UAAU,GACV,MAAM,GACN,MAAM,GACN,YAAY,GACZ,aAAa,MACX,EAPU,EAAS;GAAE,UAAO,EAAA;GAAG,MAAG,EAAA;GAAG,MAAG,EAAA;GAAG,YAAS,EAAA;GAAG,aAAU,EAAA;GAAG,CAAC,CAOxD;AAEjB,IAAQ,GAAmB;GACzB,YAAY,QAAe,EAAM,MAAM;GACvC,UAAU;GACV,MAAM;GACN,MAAM;GACN,YAAY;GACZ,aAAa;GACb;GACD,CAAC;EAIF,IAAM,IAAiB,QAAgB,EAAA,eAAe,WAAW,IAAe,EAAQ;yBAKtF,EAqBM,OAAA;GApBJ,OAAK,EAAA,CAAC,0DAAwD;4CACN,EAAA;eAAwB,EAAA,eAAU;eAAgC,EAAA,eAAU;;GAKpI,MAAK;MAEW,EAAA,MAAkB,SAAM,KAAA,EAAA,GAAA,EACtC,EAQY,GAAA,EAAA,KAAA,GAAA,EAAA,EANI,EAAA,QAAP,YAFT,EAQY,EAPL,EAAA,MAAc,EAAA;GAElB,KAAK,EAAI;GACT,OAAO,EAAI;GACX,UAAU,EAAI;;oBAEA,CAAA,EAAA,EAAZ,EAAI,MAAK,EAAA,EAAA,CAAA,CAAA;;6CAGhB,EAAe,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,GAAA,CAAA,EAAA,EAAA"}

package/dist/design-system172.js

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

package/dist/design-system173.js

@@ -1,14 +1,185 @@
-//#region src/components/BSelect/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Multiple = "multiple", e.Tags = "tags", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Outlined = "outlined", e.Filled = "filled", e.Borderless = "borderless", e;
-}({}), n = /* @__PURE__ */ function(e) {
-	return e.Error = "error", e.Warning = "warning", e;
-}({}), r = /* @__PURE__ */ function(e) {
-	return e.BottomLeft = "bottomLeft", e.BottomRight = "bottomRight", e.TopLeft = "topLeft", e.TopRight = "topRight", e;
-}({});
+import { useComponentId as e } from "./design-system10.js";
+import { Fragment as t, computed as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, renderSlot as d, unref as f, useModel as p, watch as m } from "vue";
+//#region src/components/BRate/BRate.vue?vue&type=script&setup=true&lang.ts
+var h = [
+	"aria-label",
+	"aria-disabled",
+	"aria-valuenow",
+	"aria-valuemax",
+	"aria-valuetext",
+	"tabindex"
+], g = [
+	"title",
+	"onMousemove",
+	"onClick"
+], _ = {
+	class: "b-rate__star-first",
+	"aria-hidden": "true"
+}, v = ["data-character"], y = {
+	key: 1,
+	class: "b-rate__icon",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, b = {
+	class: "b-rate__star-second",
+	"aria-hidden": "true"
+}, x = ["data-character"], S = {
+	key: 1,
+	class: "b-rate__icon",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, C = ["name", "value"], w = /* @__PURE__ */ a({
+	__name: "BRate",
+	props: /* @__PURE__ */ o({
+		allowClear: {
+			type: Boolean,
+			default: !0
+		},
+		allowHalf: {
+			type: Boolean,
+			default: !1
+		},
+		count: { default: 5 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		keyboard: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "default" },
+		tooltips: { default: () => [] },
+		character: {}
+	}, {
+		modelValue: { default: 0 },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ o([
+		"hover-change",
+		"change",
+		"focus",
+		"blur",
+		"keydown"
+	], ["update:modelValue"]),
+	setup(a, { expose: o, emit: w }) {
+		let T = p(a, "modelValue"), E = w, { componentUID: D } = e(), O = l(0), k = l(!1), A = l(0), j = n(() => O.value > 0 ? O.value : T.value), M = n(() => {
+			let e = [];
+			for (let t = 1; t <= a.count; t++) e.push({
+				index: t,
+				value: t
+			});
+			return e;
+		});
+		function N(e) {
+			let t = j.value;
+			return e <= Math.floor(t) ? "full" : a.allowHalf && e - .5 <= t && e > t ? "half" : "zero";
+		}
+		function P(e, t) {
+			if (a.disabled) return;
+			let n = t && a.allowHalf ? e - .5 : e;
+			a.allowClear && n === T.value ? (T.value = 0, E("change", 0)) : (T.value = n, E("change", n));
+		}
+		function F(e, t) {
+			if (a.disabled) return;
+			let n = t.currentTarget.getBoundingClientRect(), r = t.clientX - n.left < n.width / 2, i;
+			i = a.allowHalf && r ? e - .5 : e, i !== O.value && (O.value = i, E("hover-change", i));
+		}
+		function I() {
+			a.disabled || (O.value = 0, E("hover-change", 0));
+		}
+		function L() {
+			k.value = !0, A.value = Math.ceil(T.value) || 1, E("focus");
+		}
+		function R() {
+			k.value = !1, A.value = 0, E("blur");
+		}
+		function z(e) {
+			if (a.disabled || !a.keyboard) return;
+			E("keydown", e);
+			let t = a.allowHalf ? .5 : 1;
+			switch (e.key) {
+				case "ArrowRight":
+				case "ArrowUp": {
+					e.preventDefault();
+					let n = Math.min(T.value + t, a.count);
+					T.value = n, A.value = Math.ceil(n), E("change", n);
+					break;
+				}
+				case "ArrowLeft":
+				case "ArrowDown": {
+					e.preventDefault();
+					let n = Math.max(T.value - t, 0);
+					T.value = n, A.value = Math.ceil(n) || 1, E("change", n);
+					break;
+				}
+				case "Enter":
+				case " ":
+					e.preventDefault(), a.allowClear && A.value === Math.ceil(T.value) && (T.value = 0, E("change", 0));
+					break;
+			}
+		}
+		let B = l(null);
+		function V() {
+			B.value?.focus();
+		}
+		function H() {
+			B.value?.blur();
+		}
+		return o({
+			focus: V,
+			blur: H
+		}), m(O, (e) => {
+			e === 0 && (A.value = Math.ceil(T.value) || 0);
+		}), (e, n) => (c(), r("div", {
+			ref_key: "rootRef",
+			ref: B,
+			class: s(["b-rate", [`b-rate--${a.size}`, {
+				"b-rate--disabled": a.disabled,
+				"b-rate--focused": k.value
+			}]]),
+			role: "slider",
+			"aria-label": e.$attrs["aria-label"] || "Rating",
+			"aria-disabled": a.disabled || void 0,
+			"aria-valuenow": T.value,
+			"aria-valuemin": 0,
+			"aria-valuemax": a.count,
+			"aria-valuetext": `${T.value} out of ${a.count} stars`,
+			tabindex: a.disabled ? -1 : 0,
+			onMouseleave: I,
+			onFocus: L,
+			onBlur: R,
+			onKeydown: z
+		}, [(c(!0), r(t, null, u(M.value, (t) => (c(), r("div", {
+			key: t.index,
+			class: s(["b-rate__star", {
+				"b-rate__star--full": N(t.index) === "full",
+				"b-rate__star--half": N(t.index) === "half",
+				"b-rate__star--zero": N(t.index) === "zero",
+				"b-rate__star--active": O.value > 0,
+				"b-rate__star--focused": k.value && A.value === t.index
+			}]),
+			title: a.tooltips[t.index - 1] || void 0,
+			onMousemove: (e) => F(t.index, e),
+			onClick: (e) => P(t.index, a.allowHalf && e.offsetX < e.currentTarget.offsetWidth / 2)
+		}, [i("div", _, [d(e.$slots, "character", { index: t.index }, () => [a.character ? (c(), r("span", {
+			key: 0,
+			class: "b-rate__character",
+			"data-character": a.character
+		}, null, 8, v)) : (c(), r("svg", y, [...n[0] ||= [i("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }, null, -1)]]))], !0)]), i("div", b, [d(e.$slots, "character", { index: t.index }, () => [a.character ? (c(), r("span", {
+			key: 0,
+			class: "b-rate__character",
+			"data-character": a.character
+		}, null, 8, x)) : (c(), r("svg", S, [...n[1] ||= [i("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }, null, -1)]]))], !0)])], 42, g))), 128)), i("input", {
+			type: "hidden",
+			name: `b-rate-${f(D)}`,
+			value: T.value
+		}, null, 8, C)], 42, h));
+	}
+});
 //#endregion
-export { e as BSelectMode, r as BSelectPlacement, n as BSelectStatus, t as BSelectVariant };
+export { w as default };
 
 //# sourceMappingURL=design-system173.js.map

package/dist/design-system173.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system173.js","names":[],"sources":["../src/components/BSelect/types.ts"],"sourcesContent":["export interface BSelectOption {\n  /** Display label for the option. Falls back to `value` if omitted. */\n  label?: string;\n  /** The value submitted when this option is selected. */\n  value: string | number;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n  /** Grouping: nested options under this group label. */\n  options?: BSelectOption[];\n}\n\nexport enum BSelectMode {\n  Multiple = 'multiple',\n  Tags = 'tags',\n}\n\nexport enum BSelectVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n}\n\nexport enum BSelectStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport enum BSelectPlacement {\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n}\n\nexport interface BSelectFieldNames {\n  label?: string;\n  value?: string;\n  options?: string;\n  groupLabel?: string;\n}\n"],"mappings":";AAWA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,OAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,cACA,EAAA,cAAA,eACA,EAAA,UAAA,WACA,EAAA,WAAA;KACD"}
+{"version":3,"file":"design-system173.js","names":["$attrs"],"sources":["../src/components/BRate/BRate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, ref, watch } from 'vue';\n\n//#region Props\nconst {\n  allowClear = true,\n  allowHalf = false,\n  count = 5,\n  disabled = false,\n  keyboard = true,\n  size = 'default',\n  tooltips = [],\n  character,\n} = defineProps<{\n  /** Whether to allow clearing the value when clicking the same star again. */\n  allowClear?: boolean;\n  /** Whether to allow half-star selection. */\n  allowHalf?: boolean;\n  /** Total number of stars. */\n  count?: number;\n  /** If true, the component is read-only and cannot be interacted with. */\n  disabled?: boolean;\n  /** Whether keyboard navigation is enabled. */\n  keyboard?: boolean;\n  /** Size of the stars. */\n  size?: 'small' | 'default' | 'large';\n  /** Array of tooltip strings displayed on hover for each star. */\n  tooltips?: string[];\n  /** Custom character/icon rendered as each star. Receives `{ index }`. */\n  character?: string;\n}>();\n\n/**\n * The current rating value.\n * Supports v-model for controlled usage.\n */\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  'hover-change': [value: number];\n  change: [value: number];\n  focus: [];\n  blur: [];\n  keydown: [event: KeyboardEvent];\n}>();\n//#endregion\n\n//#region Internal state\nconst { componentUID } = useComponentId();\nconst hoverValue = ref(0);\nconst isFocused = ref(false);\nconst focusedIndex = ref(0);\n\nconst currentValue = computed(() =>\n  hoverValue.value > 0 ? hoverValue.value : model.value,\n);\n\nconst stars = computed(() => {\n  const items: { index: number; value: number }[] = [];\n  for (let i = 1; i <= count; i++) {\n    items.push({ index: i, value: i });\n  }\n  return items;\n});\n//#endregion\n\n//#region Star state\nfunction getStarState(index: number): 'full' | 'half' | 'zero' {\n  const val = currentValue.value;\n  if (index <= Math.floor(val)) return 'full';\n  if (allowHalf && index - 0.5 <= val && index > val) return 'half';\n  return 'zero';\n}\n//#endregion\n\n//#region Handlers\nfunction handleClick(index: number, isHalf: boolean) {\n  if (disabled) return;\n\n  const newValue = isHalf && allowHalf ? index - 0.5 : index;\n\n  if (allowClear && newValue === model.value) {\n    model.value = 0;\n    emit('change', 0);\n  } else {\n    model.value = newValue;\n    emit('change', newValue);\n  }\n}\n\nfunction handleMouseMove(index: number, event: MouseEvent) {\n  if (disabled) return;\n\n  const target = event.currentTarget as HTMLElement;\n  const rect = target.getBoundingClientRect();\n  const isLeftHalf = event.clientX - rect.left < rect.width / 2;\n\n  let newHoverValue: number;\n  if (allowHalf && isLeftHalf) {\n    newHoverValue = index - 0.5;\n  } else {\n    newHoverValue = index;\n  }\n\n  if (newHoverValue !== hoverValue.value) {\n    hoverValue.value = newHoverValue;\n    emit('hover-change', newHoverValue);\n  }\n}\n\nfunction handleMouseLeave() {\n  if (disabled) return;\n  hoverValue.value = 0;\n  emit('hover-change', 0);\n}\n\nfunction handleFocus() {\n  isFocused.value = true;\n  focusedIndex.value = Math.ceil(model.value) || 1;\n  emit('focus');\n}\n\nfunction handleBlur() {\n  isFocused.value = false;\n  focusedIndex.value = 0;\n  emit('blur');\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (disabled || !keyboard) return;\n  emit('keydown', event);\n\n  const step = allowHalf ? 0.5 : 1;\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp': {\n      event.preventDefault();\n      const next = Math.min(model.value + step, count);\n      model.value = next;\n      focusedIndex.value = Math.ceil(next);\n      emit('change', next);\n      break;\n    }\n    case 'ArrowLeft':\n    case 'ArrowDown': {\n      event.preventDefault();\n      const prev = Math.max(model.value - step, 0);\n      model.value = prev;\n      focusedIndex.value = Math.ceil(prev) || 1;\n      emit('change', prev);\n      break;\n    }\n    case 'Enter':\n    case ' ': {\n      event.preventDefault();\n      if (allowClear && focusedIndex.value === Math.ceil(model.value)) {\n        model.value = 0;\n        emit('change', 0);\n      }\n      break;\n    }\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLElement | null>(null);\n\nfunction focus() {\n  rootRef.value?.focus();\n}\n\nfunction blur() {\n  rootRef.value?.blur();\n}\n\ndefineExpose({ focus, blur });\n//#endregion\n\n//#region Watch hover for tooltip\nwatch(hoverValue, (val) => {\n  if (val === 0) {\n    focusedIndex.value = Math.ceil(model.value) || 0;\n  }\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-rate\"\n    :class=\"[\n      `b-rate--${size}`,\n      {\n        'b-rate--disabled': disabled,\n        'b-rate--focused': isFocused,\n      },\n    ]\"\n    role=\"slider\"\n    :aria-label=\"$attrs['aria-label'] as string || 'Rating'\"\n    :aria-disabled=\"disabled || undefined\"\n    :aria-valuenow=\"model\"\n    :aria-valuemin=\"0\"\n    :aria-valuemax=\"count\"\n    :aria-valuetext=\"`${model} out of ${count} stars`\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @mouseleave=\"handleMouseLeave\"\n    @focus=\"handleFocus\"\n    @blur=\"handleBlur\"\n    @keydown=\"handleKeyDown\"\n  >\n    <div\n      v-for=\"star in stars\"\n      :key=\"star.index\"\n      class=\"b-rate__star\"\n      :class=\"{\n        'b-rate__star--full': getStarState(star.index) === 'full',\n        'b-rate__star--half': getStarState(star.index) === 'half',\n        'b-rate__star--zero': getStarState(star.index) === 'zero',\n        'b-rate__star--active': hoverValue > 0,\n        'b-rate__star--focused': isFocused && focusedIndex === star.index,\n      }\"\n      :title=\"tooltips[star.index - 1] || undefined\"\n      @mousemove=\"(e) => handleMouseMove(star.index, e)\"\n      @click=\"(e) => handleClick(star.index, allowHalf && (e.offsetX < (e.currentTarget as HTMLElement).offsetWidth / 2))\"\n    >\n      <div class=\"b-rate__star-first\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n      <div class=\"b-rate__star-second\" aria-hidden=\"true\">\n        <slot name=\"character\" :index=\"star.index\">\n          <span v-if=\"character\" class=\"b-rate__character\" :data-character=\"character\" />\n          <svg\n            v-else\n            class=\"b-rate__icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n            />\n          </svg>\n        </slot>\n      </div>\n    </div>\n\n    <input\n      type=\"hidden\"\n      :name=\"`b-rate-${componentUID}`\"\n      :value=\"model\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.b-rate {\n  --b-rate-star-bg: rgba(0, 0, 0, 0.06);\n  --b-rate-star-color: #fadb14;\n  --b-rate-star-hover-scale: scale(1.1);\n  --b-rate-star-size: 20px;\n\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  outline: none;\n  cursor: pointer;\n  line-height: 1;\n}\n\n.b-rate--small {\n  --b-rate-star-size: 15px;\n  gap: 6px;\n}\n\n.b-rate--large {\n  --b-rate-star-size: 25px;\n  gap: 10px;\n}\n\n.b-rate--disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n.b-rate:focus-visible {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 4px;\n  border-radius: 2px;\n}\n\n.b-rate__star {\n  position: relative;\n  display: inline-flex;\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  cursor: pointer;\n  transition: transform 0.15s ease;\n}\n\n.b-rate--disabled .b-rate__star {\n  cursor: not-allowed;\n}\n\n.b-rate__star:not(.b-rate--disabled .b-rate__star):hover {\n  transform: var(--b-rate-star-hover-scale);\n}\n\n.b-rate__star--focused {\n  outline: 2px solid var(--b-rate-star-color);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n\n.b-rate__star-first,\n.b-rate__star-second {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  user-select: none;\n}\n\n.b-rate__star-first {\n  width: 50%;\n  overflow: hidden;\n  z-index: 1;\n}\n\n.b-rate__star-second {\n  z-index: 0;\n}\n\n/* Zero state: both halves use background color */\n.b-rate__star--zero .b-rate__star-first,\n.b-rate__star--zero .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n/* Full state: both halves use active color */\n.b-rate__star--full .b-rate__star-first,\n.b-rate__star--full .b-rate__star-second {\n  color: var(--b-rate-star-color);\n}\n\n/* Half state: first half active, second half background */\n.b-rate__star--half .b-rate__star-first {\n  color: var(--b-rate-star-color);\n}\n\n.b-rate__star--half .b-rate__star-second {\n  color: var(--b-rate-star-bg);\n}\n\n.b-rate__icon {\n  width: var(--b-rate-star-size);\n  height: var(--b-rate-star-size);\n  flex-shrink: 0;\n  display: block;\n}\n\n.b-rate__character {\n  font-size: var(--b-rate-star-size);\n  line-height: 1;\n  white-space: nowrap;\n}\n\n.b-rate__character::before {\n  content: attr(data-character);\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-rate {\n  --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n  --b-rate-star-color: #fadb14;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-rate {\n    --b-rate-star-bg: rgba(255, 255, 255, 0.12);\n    --b-rate-star-color: #fadb14;\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-rate__star {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCA,IAAM,IAAQ,EAAmB,GAAA,aAAgB,EAE3C,IAAO,GAUP,EAAE,oBAAiB,GAAgB,EACnC,IAAa,EAAI,EAAE,EACnB,IAAY,EAAI,GAAM,EACtB,IAAe,EAAI,EAAE,EAErB,IAAe,QACnB,EAAW,QAAQ,IAAI,EAAW,QAAQ,EAAM,MACjD,EAEK,IAAQ,QAAe;GAC3B,IAAM,IAA4C,EAAE;AACpD,QAAK,IAAI,IAAI,GAAG,KAAK,EAAA,OAAO,IAC1B,GAAM,KAAK;IAAE,OAAO;IAAG,OAAO;IAAG,CAAC;AAEpC,UAAO;IACP;EAIF,SAAS,EAAa,GAAyC;GAC7D,IAAM,IAAM,EAAa;AAGzB,UAFI,KAAS,KAAK,MAAM,EAAI,GAAS,SACjC,EAAA,aAAa,IAAQ,MAAO,KAAO,IAAQ,IAAY,SACpD;;EAKT,SAAS,EAAY,GAAe,GAAiB;AACnD,OAAI,EAAA,SAAU;GAEd,IAAM,IAAW,KAAU,EAAA,YAAY,IAAQ,KAAM;AAErD,GAAI,EAAA,cAAc,MAAa,EAAM,SACnC,EAAM,QAAQ,GACd,EAAK,UAAU,EAAE,KAEjB,EAAM,QAAQ,GACd,EAAK,UAAU,EAAS;;EAI5B,SAAS,EAAgB,GAAe,GAAmB;AACzD,OAAI,EAAA,SAAU;GAGd,IAAM,IADS,EAAM,cACD,uBAAuB,EACrC,IAAa,EAAM,UAAU,EAAK,OAAO,EAAK,QAAQ,GAExD;AAOJ,GANA,AAGE,IAHE,EAAA,aAAa,IACC,IAAQ,KAER,GAGd,MAAkB,EAAW,UAC/B,EAAW,QAAQ,GACnB,EAAK,gBAAgB,EAAc;;EAIvC,SAAS,IAAmB;AACtB,KAAA,aACJ,EAAW,QAAQ,GACnB,EAAK,gBAAgB,EAAE;;EAGzB,SAAS,IAAc;AAGrB,GAFA,EAAU,QAAQ,IAClB,EAAa,QAAQ,KAAK,KAAK,EAAM,MAAM,IAAI,GAC/C,EAAK,QAAQ;;EAGf,SAAS,IAAa;AAGpB,GAFA,EAAU,QAAQ,IAClB,EAAa,QAAQ,GACrB,EAAK,OAAO;;EAGd,SAAS,EAAc,GAAsB;AAC3C,OAAI,EAAA,YAAY,CAAC,EAAA,SAAU;AAC3B,KAAK,WAAW,EAAM;GAEtB,IAAM,IAAO,EAAA,YAAY,KAAM;AAE/B,WAAQ,EAAM,KAAd;IACE,KAAK;IACL,KAAK,WAAW;AACd,OAAM,gBAAgB;KACtB,IAAM,IAAO,KAAK,IAAI,EAAM,QAAQ,GAAM,EAAA,MAAM;AAGhD,KAFA,EAAM,QAAQ,GACd,EAAa,QAAQ,KAAK,KAAK,EAAK,EACpC,EAAK,UAAU,EAAK;AACpB;;IAEF,KAAK;IACL,KAAK,aAAa;AAChB,OAAM,gBAAgB;KACtB,IAAM,IAAO,KAAK,IAAI,EAAM,QAAQ,GAAM,EAAE;AAG5C,KAFA,EAAM,QAAQ,GACd,EAAa,QAAQ,KAAK,KAAK,EAAK,IAAI,GACxC,EAAK,UAAU,EAAK;AACpB;;IAEF,KAAK;IACL,KAAK;AAEH,KADA,EAAM,gBAAgB,EAClB,EAAA,cAAc,EAAa,UAAU,KAAK,KAAK,EAAM,MAAM,KAC7D,EAAM,QAAQ,GACd,EAAK,UAAU,EAAE;AAEnB;;;EAON,IAAM,IAAU,EAAwB,KAAK;EAE7C,SAAS,IAAQ;AACf,KAAQ,OAAO,OAAO;;EAGxB,SAAS,IAAO;AACd,KAAQ,OAAO,MAAM;;SAGvB,EAAa;GAAE;GAAO;GAAM,CAAC,EAI7B,EAAM,IAAa,MAAQ;AACzB,GAAI,MAAQ,MACV,EAAa,QAAQ,KAAK,KAAK,EAAM,MAAM,IAAI;IAEjD,kBAKA,EA6EM,OAAA;YA5EA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,UAAQ,CAAA,WACa,EAAA,QAAA;wBAA4C,EAAA;uBAAqC,EAAA;;GAO5G,MAAK;GACJ,cAAYA,EAAAA,OAAM,iBAAA;GAClB,iBAAe,EAAA,YAAY,KAAA;GAC3B,iBAAe,EAAA;GACf,iBAAe;GACf,iBAAe,EAAA;GACf,kBAAc,GAAK,EAAA,MAAK,UAAW,EAAA,MAAK;GACxC,UAAU,EAAA,WAAQ,KAAA;GAClB,cAAY;GACZ,SAAO;GACP,QAAM;GACN,WAAS;cAEV,EA+CM,GAAA,MAAA,EA9CW,EAAA,QAAR,YADT,EA+CM,OAAA;GA7CH,KAAK,EAAK;GACX,OAAK,EAAA,CAAC,gBAAc;0BACoB,EAAa,EAAK,MAAK,KAAA;0BAA4C,EAAa,EAAK,MAAK,KAAA;0BAA4C,EAAa,EAAK,MAAK,KAAA;4BAA8C,EAAA,QAAU;6BAAuC,EAAA,SAAa,EAAA,UAAiB,EAAK;;GAOtU,OAAO,EAAA,SAAS,EAAK,QAAK,MAAS,KAAA;GACnC,cAAY,MAAM,EAAgB,EAAK,OAAO,EAAC;GAC/C,UAAQ,MAAM,EAAY,EAAK,OAAO,EAAA,aAAc,EAAE,UAAW,EAAE,cAA8B,cAAW,EAAA;MAE7G,EAeM,OAfN,GAeM,CAdJ,EAaO,EAAA,QAAA,aAAA,EAbiB,OAAO,EAAK,OAAA,QAa7B,CAZO,EAAA,aAAA,GAAA,EAAZ,EAA+E,QAAA;;GAAxD,OAAM;GAAqB,kBAAgB,EAAA;0BAClE,EAUM,OAVN,GAUM,CAAA,GAAA,AAAA,EAAA,OAAA,CAHJ,EAEE,QAAA,EADA,GAAE,gGAA8F,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,CAAA,CAAA,EAKxG,EAeM,OAfN,GAeM,CAdJ,EAaO,EAAA,QAAA,aAAA,EAbiB,OAAO,EAAK,OAAA,QAa7B,CAZO,EAAA,aAAA,GAAA,EAAZ,EAA+E,QAAA;;GAAxD,OAAM;GAAqB,kBAAgB,EAAA;0BAClE,EAUM,OAVN,GAUM,CAAA,GAAA,AAAA,EAAA,OAAA,CAHJ,EAEE,QAAA,EADA,GAAE,gGAA8F,EAAA,MAAA,GAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA,WAO1G,EAIE,SAAA;GAHA,MAAK;GACJ,MAAI,UAAY,EAAA,EAAY;GAC5B,OAAO,EAAA"}

package/dist/design-system175.js

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

package/dist/design-system175.js.map

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