@7pmlabs/design-system 1.0.8 → 1.0.10

package/dist/design-system210.js

@@ -1,173 +1,109 @@
-import { BTooltipPlacement as e, BTooltipTrigger as t } from "./design-system3.js";
-import { useComponentId as n } from "./design-system10.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, unref as v, useId as y, watch as b } from "vue";
-//#region src/components/BTooltip/BTooltip.vue?vue&type=script&setup=true&lang.ts
-var x = ["aria-describedby"], S = ["id"], ee = {
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, onMounted as s, openBlock as c, ref as l, renderSlot as u, useModel as d, watch as f } from "vue";
+//#region src/components/BSwitch/BSwitch.vue?vue&type=script&setup=true&lang.ts
+var p = [
+	"aria-checked",
+	"aria-disabled",
+	"disabled",
+	"tabindex"
+], m = {
+	class: "b-switch__handle",
+	"aria-hidden": "true"
+}, h = {
 	key: 0,
-	class: "b-tooltip__arrow",
+	class: "b-switch__loading-icon",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	"aria-hidden": "true"
+}, g = {
+	class: "b-switch__inner",
 	"aria-hidden": "true"
-}, C = /* @__PURE__ */ l({
-	__name: "BTooltip",
-	props: {
-		title: {},
-		trigger: { default: () => t.Hover },
-		placement: { default: () => e.TopCenter },
-		arrow: {
+}, _ = {
+	key: 0,
+	class: "b-switch__inner-checked"
+}, v = {
+	key: 1,
+	class: "b-switch__inner-unchecked"
+}, y = /* @__PURE__ */ i({
+	__name: "BSwitch",
+	props: /* @__PURE__ */ a({
+		defaultChecked: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		color: {},
-		mouseEnterDelay: { default: 100 },
-		mouseLeaveDelay: { default: 100 },
-		destroyTooltipOnHide: {
+		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		zIndex: { default: 1070 },
-		fresh: {
+		loading: {
 			type: Boolean,
 			default: !1
 		},
-		autoAdjustOverflow: { type: Boolean },
+		size: { default: "default" }
+	}, {
 		modelValue: {
 			type: Boolean,
-			default: () => void 0
+			default: void 0
 		},
-		toggleClass: {},
-		tooltipClass: {},
-		tooltipInnerClass: {}
-	},
-	emits: ["openChange", "update:modelValue"],
-	setup(l, { expose: C, emit: w }) {
-		let T = w, { componentUID: E } = n(), D = y(), O = h(!1), k = i(() => l.modelValue === void 0 ? O.value : l.modelValue), A = h(!1), j = i(() => l.fresh || l.destroyTooltipOnHide ? k.value : A.value || k.value);
-		b(k, (e) => {
-			e && (A.value = !0);
-		});
-		let M = null, N = null;
-		function P() {
-			M &&= (clearTimeout(M), null), N &&= (clearTimeout(N), null);
-		}
-		function F(e = 0) {
-			P(), !k.value && (e > 0 ? M = setTimeout(() => L(), e) : L());
-		}
-		function I(e = 0) {
-			P(), k.value && (e > 0 ? N = setTimeout(() => R(), e) : R());
-		}
-		function L() {
-			V.value?.showPopover();
-		}
-		function R() {
-			V.value?.hidePopover();
-		}
-		function z(e) {
-			l.modelValue === void 0 ? O.value = e : T("update:modelValue", e), T("openChange", e);
-		}
-		let B = ({ newState: e }) => {
-			z(e === "open");
-		}, V = h(null), H = h(null);
-		function U() {
-			k.value ? I() : F();
-		}
-		function W() {
-			F(l.mouseEnterDelay);
-		}
-		function G() {
-			I(l.mouseLeaveDelay);
-		}
-		function K() {
-			F();
-		}
-		function q() {
-			I();
-		}
-		function J(e) {
-			e.key === "Escape" && k.value && (e.preventDefault(), I(), H.value?.focus());
-		}
-		function Y() {
-			l.trigger === t.Hover && P();
-		}
-		function X() {
-			l.trigger === t.Hover && I(l.mouseLeaveDelay);
-		}
-		function Z() {
-			let e = H.value;
-			if (e) switch (e.addEventListener("keydown", J), l.trigger) {
-				case t.Click:
-					e.addEventListener("click", U);
-					break;
-				case t.Focus:
-					e.addEventListener("focusin", K), e.addEventListener("focusout", q);
-					break;
-				case t.Hover:
-				default:
-					e.addEventListener("mouseenter", W), e.addEventListener("mouseleave", G), e.addEventListener("focusin", K), e.addEventListener("focusout", q);
-					break;
-			}
-		}
-		function Q() {
-			let e = H.value;
-			e && (e.removeEventListener("keydown", J), e.removeEventListener("click", U), e.removeEventListener("focusin", K), e.removeEventListener("focusout", q), e.removeEventListener("mouseenter", W), e.removeEventListener("mouseleave", G));
-		}
-		p(() => {
-			Z();
-		}), f(() => {
-			Q(), P();
-		}), b(() => l.trigger, () => {
-			Q(), Z();
-		}), b(() => l.modelValue, (e) => {
-			e !== void 0 && (e ? V.value?.showPopover() : V.value?.hidePopover());
-		});
-		let $ = i(() => `--b-tooltip-anchor-${E.value}`), te = i(() => ({
-			[e.TopLeft]: "top-left",
-			[e.TopCenter]: "top-center",
-			[e.TopRight]: "top-right",
-			[e.RightTop]: "right-top",
-			[e.RightCenter]: "right-center",
-			[e.RightBottom]: "right-bottom",
-			[e.BottomRight]: "bottom-right",
-			[e.BottomCenter]: "bottom-center",
-			[e.BottomLeft]: "bottom-left",
-			[e.LeftBottom]: "left-bottom",
-			[e.LeftCenter]: "left-center",
-			[e.LeftTop]: "left-top"
-		})[l.placement] ?? "top-center"), ne = i(() => {
-			if (l.color) return {
-				"--b-tooltip-bg": l.color,
-				"--b-tooltip-arrow-color": l.color
-			};
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ a(["change", "click"], ["update:modelValue"]),
+	setup(i, { expose: a, emit: y }) {
+		let b = d(i, "modelValue"), x = y, S = l(i.defaultChecked), C = e(() => b.value === void 0 ? S.value : b.value);
+		s(() => {
+			b.value === void 0 && (S.value = i.defaultChecked);
+		}), f(() => b.value, (e) => {
+			e !== void 0 && (S.value = e);
 		});
-		return C({
-			open: L,
-			close: R
-		}), (e, t) => (m(), o(r, null, [s("div", {
-			ref_key: "toggleRef",
-			ref: H,
-			class: u(["b-tooltip__toggle", l.toggleClass]),
-			style: d({ anchorName: $.value }),
-			"aria-describedby": k.value ? v(D) : void 0
-		}, [g(e.$slots, "default")], 14, x), s("div", {
-			ref_key: "tooltipRef",
-			ref: V,
-			popover: "manual",
-			class: u([
-				"b-tooltip__content",
-				te.value,
-				{ "b-tooltip__content--no-arrow": !l.arrow },
-				l.tooltipClass
-			]),
-			style: d([{
-				zIndex: l.zIndex,
-				positionAnchor: $.value
-			}, ne.value]),
-			role: "tooltip",
-			id: v(D),
-			onToggle: B,
-			onMouseenter: Y,
-			onMouseleave: X
-		}, [j.value || !l.destroyTooltipOnHide ? (m(), o(r, { key: 0 }, [l.arrow ? (m(), o("div", ee)) : a("", !0), s("div", { class: u(["b-tooltip__inner", l.tooltipInnerClass]) }, [g(e.$slots, "title", {}, () => [c(_(l.title), 1)])], 2)], 64)) : a("", !0)], 46, S)], 64));
+		function w(e) {
+			if (i.disabled || i.loading) return;
+			let t = !C.value;
+			S.value = t, b.value = t, x("change", t, e), e instanceof MouseEvent && x("click", t, e);
+		}
+		function T(e) {
+			w(e);
+		}
+		function E(e) {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), w(e));
+		}
+		let D = l(null);
+		function O() {
+			D.value?.focus();
+		}
+		function k() {
+			D.value?.blur();
+		}
+		return a({
+			focus: O,
+			blur: k
+		}), (e, a) => (c(), n("button", {
+			ref_key: "rootRef",
+			ref: D,
+			type: "button",
+			role: "switch",
+			class: o(["b-switch", [`b-switch--${i.size}`, {
+				"b-switch--checked": C.value,
+				"b-switch--disabled": i.disabled,
+				"b-switch--loading": i.loading
+			}]]),
+			"aria-checked": C.value,
+			"aria-disabled": i.disabled || i.loading || void 0,
+			disabled: i.disabled,
+			tabindex: i.disabled ? -1 : 0,
+			onClick: T,
+			onKeydown: E
+		}, [r("span", m, [i.loading ? (c(), n("svg", h, [...a[0] ||= [r("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6",
+			stroke: "currentColor",
+			"stroke-width": "2",
+			"stroke-linecap": "round",
+			"stroke-dasharray": "28",
+			"stroke-dashoffset": "8"
+		}, null, -1)]])) : t("", !0)]), r("span", g, [C.value ? (c(), n("span", _, [u(e.$slots, "checked", {}, void 0, !0)])) : (c(), n("span", v, [u(e.$slots, "unchecked", {}, void 0, !0)]))])], 42, p));
 	}
 });
 //#endregion
-export { C as default };
+export { y as default };
 
 //# sourceMappingURL=design-system210.js.map

package/dist/design-system210.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system210.js","names":[],"sources":["../src/components/BTooltip/BTooltip.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, Fragment as _Fragment } from \"vue\"\n\nconst _hoisted_1 = [\"aria-describedby\"]\nconst _hoisted_2 = [\"id\"]\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-tooltip__arrow\",\n  \"aria-hidden\": \"true\"\n}\n\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BTooltipPlacement, BTooltipTrigger } from '@/types.ts';\nimport { computed, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BTooltip',\n  props: {\n    title: {},\n    trigger: { default: () => (BTooltipTrigger.Hover) },\n    placement: { default: () => (BTooltipPlacement.TopCenter) },\n    arrow: { type: Boolean, default: true },\n    color: {},\n    mouseEnterDelay: { default: 100 },\n    mouseLeaveDelay: { default: 100 },\n    destroyTooltipOnHide: { type: Boolean, default: false },\n    zIndex: { default: 1070 },\n    fresh: { type: Boolean, default: false },\n    autoAdjustOverflow: { type: Boolean },\n    modelValue: { type: Boolean, default: () => (undefined) },\n    toggleClass: {},\n    tooltipClass: {},\n    tooltipInnerClass: {}\n  },\n  emits: [\"openChange\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst emit = __emit;\n\n\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst tooltipId = useId();\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (__props.modelValue !== undefined ? __props.modelValue : internalOpen.value));\n\nconst hasBeenOpened = ref(false);\nconst shouldRender = computed(() => {\n  if (__props.fresh) return isOpen.value;\n  if (__props.destroyTooltipOnHide) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  tooltipRef.value?.showPopover();\n}\n\nfunction doClose() {\n  tooltipRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (__props.modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst tooltipRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  requestOpen(__props.mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(__props.mouseLeaveDelay);\n}\n\nfunction onFocusIn() {\n  requestOpen();\n}\n\nfunction onFocusOut() {\n  requestClose();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    requestClose();\n    toggleRef.value?.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Tooltip hover (keep tooltip open when hovering it)\n// ─────────────────────────────────────────────\nfunction onTooltipMouseEnter() {\n  if (__props.trigger === BTooltipTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onTooltipMouseLeave() {\n  if (__props.trigger === BTooltipTrigger.Hover) {\n    requestClose(__props.mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  // Keyboard always attached\n  el.addEventListener('keydown', onKeydown);\n\n  switch (__props.trigger) {\n    case BTooltipTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BTooltipTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BTooltipTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('focusin', onFocusIn);\n  el.removeEventListener('focusout', onFocusOut);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  clearTimers();\n});\n\nwatch(\n  () => __props.trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\n// Sync controlled v-model → popover state\nwatch(\n  () => __props.modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      tooltipRef.value?.showPopover();\n    } else {\n      tooltipRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-tooltip-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BTooltipPlacement.TopLeft]: 'top-left',\n    [BTooltipPlacement.TopCenter]: 'top-center',\n    [BTooltipPlacement.TopRight]: 'top-right',\n    [BTooltipPlacement.RightTop]: 'right-top',\n    [BTooltipPlacement.RightCenter]: 'right-center',\n    [BTooltipPlacement.RightBottom]: 'right-bottom',\n    [BTooltipPlacement.BottomRight]: 'bottom-right',\n    [BTooltipPlacement.BottomCenter]: 'bottom-center',\n    [BTooltipPlacement.BottomLeft]: 'bottom-left',\n    [BTooltipPlacement.LeftBottom]: 'left-bottom',\n    [BTooltipPlacement.LeftCenter]: 'left-center',\n    [BTooltipPlacement.LeftTop]: 'left-top',\n  };\n  return map[__props.placement] ?? 'top-center';\n});\n\nconst customColorStyle = computed(() => {\n  if (!__props.color) return undefined;\n  return {\n    '--b-tooltip-bg': __props.color,\n    '--b-tooltip-arrow-color': __props.color,\n  } as Record<string, string>;\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\n__expose({ open: doOpen, close: doClose });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(_Fragment, null, [\n    _createElementVNode(\"div\", {\n      ref_key: \"toggleRef\",\n      ref: toggleRef,\n      class: _normalizeClass(['b-tooltip__toggle', __props.toggleClass]),\n      style: _normalizeStyle({ anchorName: anchorName.value }),\n      \"aria-describedby\": isOpen.value ? _unref(tooltipId) : undefined\n    }, [\n      _renderSlot(_ctx.$slots, \"default\")\n    ], 14, _hoisted_1),\n    _createElementVNode(\"div\", {\n      ref_key: \"tooltipRef\",\n      ref: tooltipRef,\n      popover: \"manual\",\n      class: _normalizeClass([\n      'b-tooltip__content',\n      placementClass.value,\n      { 'b-tooltip__content--no-arrow': !__props.arrow },\n      __props.tooltipClass,\n    ]),\n      style: _normalizeStyle([{ zIndex: __props.zIndex, positionAnchor: anchorName.value }, customColorStyle.value]),\n      role: \"tooltip\",\n      id: _unref(tooltipId),\n      onToggle: onPopoverToggle,\n      onMouseenter: onTooltipMouseEnter,\n      onMouseleave: onTooltipMouseLeave\n    }, [\n      (shouldRender.value || !__props.destroyTooltipOnHide)\n        ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [\n            (__props.arrow)\n              ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3))\n              : _createCommentVNode(\"\", true),\n            _createElementVNode(\"div\", {\n              class: _normalizeClass(['b-tooltip__inner', __props.tooltipInnerClass])\n            }, [\n              _renderSlot(_ctx.$slots, \"title\", {}, () => [\n                _createTextVNode(_toDisplayString(__props.title), 1)\n              ])\n            ], 2)\n          ], 64))\n        : _createCommentVNode(\"\", true)\n    ], 46, _hoisted_2)\n  ], 64))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system210.js","names":[],"sources":["../src/components/BSwitch/BSwitch.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from \"vue\"\n\nconst _hoisted_1 = [\"aria-checked\", \"aria-disabled\", \"disabled\", \"tabindex\"]\nconst _hoisted_2 = {\n  class: \"b-switch__handle\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-switch__loading-icon\",\n  viewBox: \"0 0 16 16\",\n  fill: \"none\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_4 = {\n  class: \"b-switch__inner\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_5 = {\n  key: 0,\n  class: \"b-switch__inner-checked\"\n}\nconst _hoisted_6 = {\n  key: 1,\n  class: \"b-switch__inner-unchecked\"\n}\n\nimport { ref, computed, watch, onMounted } from 'vue';\n\n//#region Props\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSwitch',\n  props: /*@__PURE__*/_mergeModels({\n    defaultChecked: { type: Boolean, default: false },\n    disabled: { type: Boolean, default: false },\n    loading: { type: Boolean, default: false },\n    size: { default: 'default' }\n  }, {\n    \"modelValue\": { type: Boolean, ...{ default: undefined } },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\", \"click\"], [\"update:modelValue\"]),\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\n/**\n * The checked state of the switch.\n * Supports v-model for controlled usage.\n */\nconst model = _useModel<boolean>(__props, \"modelValue\");\n\nconst emit = __emit;\n//#endregion\n\n//#region Internal state\nconst internalChecked = ref(__props.defaultChecked);\n\nconst isChecked = computed(() =>\n  model.value !== undefined ? model.value : internalChecked.value,\n);\n\nonMounted(() => {\n  if (model.value === undefined) {\n    internalChecked.value = __props.defaultChecked;\n  }\n});\n\nwatch(\n  () => model.value,\n  (val) => {\n    if (val !== undefined) {\n      internalChecked.value = val;\n    }\n  },\n);\n//#endregion\n\n//#region Handlers\nfunction toggle(event: MouseEvent | KeyboardEvent) {\n  if (__props.disabled || __props.loading) return;\n\n  const newChecked = !isChecked.value;\n  internalChecked.value = newChecked;\n  model.value = newChecked;\n  emit('change', newChecked, event);\n\n  if (event instanceof MouseEvent) {\n    emit('click', newChecked, event);\n  }\n}\n\nfunction handleClick(event: MouseEvent) {\n  toggle(event);\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle(event);\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLButtonElement | null>(null);\n\nfunction focus() {\n  rootRef.value?.focus();\n}\n\nfunction blur() {\n  rootRef.value?.blur();\n}\n\n__expose({ focus, blur });\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"button\", {\n    ref_key: \"rootRef\",\n    ref: rootRef,\n    type: \"button\",\n    role: \"switch\",\n    class: _normalizeClass([\"b-switch\", [\n      `b-switch--${__props.size}`,\n      {\n        'b-switch--checked': isChecked.value,\n        'b-switch--disabled': __props.disabled,\n        'b-switch--loading': __props.loading,\n      },\n    ]]),\n    \"aria-checked\": isChecked.value,\n    \"aria-disabled\": __props.disabled || __props.loading || undefined,\n    disabled: __props.disabled,\n    tabindex: __props.disabled ? -1 : 0,\n    onClick: handleClick,\n    onKeydown: handleKeyDown\n  }, [\n    _createElementVNode(\"span\", _hoisted_2, [\n      (__props.loading)\n        ? (_openBlock(), _createElementBlock(\"svg\", _hoisted_3, [...(_cache[0] || (_cache[0] = [\n            _createElementVNode(\"circle\", {\n              cx: \"8\",\n              cy: \"8\",\n              r: \"6\",\n              stroke: \"currentColor\",\n              \"stroke-width\": \"2\",\n              \"stroke-linecap\": \"round\",\n              \"stroke-dasharray\": \"28\",\n              \"stroke-dashoffset\": \"8\"\n            }, null, -1)\n          ]))]))\n        : _createCommentVNode(\"\", true)\n    ]),\n    _createElementVNode(\"span\", _hoisted_4, [\n      (isChecked.value)\n        ? (_openBlock(), _createElementBlock(\"span\", _hoisted_5, [\n            _renderSlot(_ctx.$slots, \"checked\", {}, undefined, true)\n          ]))\n        : (_openBlock(), _createElementBlock(\"span\", _hoisted_6, [\n            _renderSlot(_ctx.$slots, \"unchecked\", {}, undefined, true)\n          ]))\n    ])\n  ], 42, _hoisted_1))\n}\n}\n\n})"],"mappings":"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"}

package/dist/design-system212.js

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

package/dist/design-system212.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system212.js","names":[],"sources":["../src/components/BTooltip/BTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BTooltipPlacement, BTooltipTrigger } from '@/types.ts';\nimport { computed, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  title,\n  trigger = BTooltipTrigger.Hover,\n  placement = BTooltipPlacement.TopCenter,\n  arrow = true,\n  color,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  destroyTooltipOnHide = false,\n  zIndex = 1070,\n  fresh = false,\n  modelValue = undefined,\n} = defineProps<{\n  /** The text shown inside the tooltip. Also accepts the `title` slot. */\n  title?: string;\n  /** The event that triggers the tooltip to open. */\n  trigger?: `${BTooltipTrigger}`;\n  /** Placement of the tooltip relative to the target element. */\n  placement?: `${BTooltipPlacement}`;\n  /** Whether the tooltip has an arrow pointing to the target. */\n  arrow?: boolean;\n  /** Custom background color of the tooltip. */\n  color?: string;\n  /** Delay in ms before showing on mouseenter. */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave. */\n  mouseLeaveDelay?: number;\n  /** Whether to destroy the tooltip DOM when hidden. */\n  destroyTooltipOnHide?: boolean;\n  /** z-index of the tooltip. */\n  zIndex?: number;\n  /** Force re-render when tooltip is shown. */\n  fresh?: boolean;\n  /** Whether to auto-adjust placement when tooltip overflows viewport. */\n  autoAdjustOverflow?: boolean;\n  /** Controlled visibility - bind with `v-model`. */\n  modelValue?: boolean;\n  /** Additional classes to apply to the toggle wrapper. */\n  toggleClass?: string;\n  /** Additional classes to apply to the tooltip content container. */\n  tooltipClass?: string;\n  /** Additional classes to apply to the tooltip inner element. */\n  tooltipInnerClass?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the tooltip visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\ndefineSlots<{\n  /** The target element that triggers the tooltip. */\n  default?(): unknown;\n  /** Overrides the `title` prop. */\n  title?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst tooltipId = useId();\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst hasBeenOpened = ref(false);\nconst shouldRender = computed(() => {\n  if (fresh) return isOpen.value;\n  if (destroyTooltipOnHide) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  tooltipRef.value?.showPopover();\n}\n\nfunction doClose() {\n  tooltipRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst tooltipRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onFocusIn() {\n  requestOpen();\n}\n\nfunction onFocusOut() {\n  requestClose();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    requestClose();\n    toggleRef.value?.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Tooltip hover (keep tooltip open when hovering it)\n// ─────────────────────────────────────────────\nfunction onTooltipMouseEnter() {\n  if (trigger === BTooltipTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onTooltipMouseLeave() {\n  if (trigger === BTooltipTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  // Keyboard always attached\n  el.addEventListener('keydown', onKeydown);\n\n  switch (trigger) {\n    case BTooltipTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BTooltipTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BTooltipTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('focusin', onFocusIn);\n  el.removeEventListener('focusout', onFocusOut);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  clearTimers();\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\n// Sync controlled v-model → popover state\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      tooltipRef.value?.showPopover();\n    } else {\n      tooltipRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-tooltip-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BTooltipPlacement.TopLeft]: 'top-left',\n    [BTooltipPlacement.TopCenter]: 'top-center',\n    [BTooltipPlacement.TopRight]: 'top-right',\n    [BTooltipPlacement.RightTop]: 'right-top',\n    [BTooltipPlacement.RightCenter]: 'right-center',\n    [BTooltipPlacement.RightBottom]: 'right-bottom',\n    [BTooltipPlacement.BottomRight]: 'bottom-right',\n    [BTooltipPlacement.BottomCenter]: 'bottom-center',\n    [BTooltipPlacement.BottomLeft]: 'bottom-left',\n    [BTooltipPlacement.LeftBottom]: 'left-bottom',\n    [BTooltipPlacement.LeftCenter]: 'left-center',\n    [BTooltipPlacement.LeftTop]: 'left-top',\n  };\n  return map[placement] ?? 'top-center';\n});\n\nconst customColorStyle = computed(() => {\n  if (!color) return undefined;\n  return {\n    '--b-tooltip-bg': color,\n    '--b-tooltip-arrow-color': color,\n  } as Record<string, string>;\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div\n    ref=\"toggleRef\"\n    :class=\"['b-tooltip__toggle', toggleClass]\"\n    :style=\"{ anchorName: anchorName }\"\n    :aria-describedby=\"isOpen ? tooltipId : undefined\"\n  >\n    <slot />\n  </div>\n\n  <div\n    ref=\"tooltipRef\"\n    popover=\"manual\"\n    :class=\"[\n      'b-tooltip__content',\n      placementClass,\n      { 'b-tooltip__content--no-arrow': !arrow },\n      tooltipClass,\n    ]\"\n    :style=\"[{ zIndex, positionAnchor: anchorName }, customColorStyle]\"\n    role=\"tooltip\"\n    :id=\"tooltipId\"\n    @toggle=\"onPopoverToggle\"\n    @mouseenter=\"onTooltipMouseEnter\"\n    @mouseleave=\"onTooltipMouseLeave\"\n  >\n    <template v-if=\"shouldRender || !destroyTooltipOnHide\">\n      <div v-if=\"arrow\" class=\"b-tooltip__arrow\" aria-hidden=\"true\" />\n      <div :class=\"['b-tooltip__inner', tooltipInnerClass]\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n:root {\n  --b-tooltip-bg: oklch(20% 0 0);\n  --b-tooltip-color: #fff;\n  --b-tooltip-font-size: 0.875rem;\n  --b-tooltip-line-height: 1.5;\n  --b-tooltip-padding-x: 0.5rem;\n  --b-tooltip-padding-y: 0.375rem;\n  --b-tooltip-border-radius: 0.375rem;\n  --b-tooltip-max-width: 250px;\n  --b-tooltip-arrow-size: 8px;\n  --b-tooltip-arrow-color: oklch(20% 0 0);\n  --b-tooltip-gap: 8px;\n  --b-tooltip-transition-duration: 200ms;\n  --b-tooltip-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] {\n  --b-tooltip-bg: oklch(35% 0 0);\n  --b-tooltip-arrow-color: oklch(35% 0 0);\n  --b-tooltip-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] {\n    --b-tooltip-bg: oklch(35% 0 0);\n    --b-tooltip-arrow-color: oklch(35% 0 0);\n    --b-tooltip-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-tooltip__toggle {\n  display: inline-block;\n}\n\n/* ─────────────────────────────────────────────\n   Tooltip content (popover)\n   ───────────────────────────────────────────── */\n.b-tooltip__content {\n  /* Reset popover defaults */\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  max-width: var(--b-tooltip-max-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  /* Animation and visibility */\n  transition:\n    display var(--b-tooltip-transition-duration),\n    opacity var(--b-tooltip-transition-duration);\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  /* ── Placement: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-tooltip-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-tooltip-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-tooltip-gap);\n  }\n\n  /* ── Placement: Right ── */\n  &.right-top {\n    inset: auto;\n    top: anchor(top);\n    left: anchor(right);\n    margin-left: var(--b-tooltip-gap);\n  }\n  &.right-center {\n    inset: auto;\n    align-self: anchor-center;\n    left: anchor(right);\n    margin-left: var(--b-tooltip-gap);\n  }\n  &.right-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    left: anchor(right);\n    margin-left: var(--b-tooltip-gap);\n  }\n\n  /* ── Placement: Bottom ── */\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-tooltip-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-tooltip-gap);\n  }\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-tooltip-gap);\n  }\n\n  /* ── Placement: Left ── */\n  &.left-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n  &.left-center {\n    inset: auto;\n    align-self: anchor-center;\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n  &.left-top {\n    inset: auto;\n    top: anchor(top);\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Inner content\n   ───────────────────────────────────────────── */\n.b-tooltip__inner {\n  background: var(--b-tooltip-bg);\n  color: var(--b-tooltip-color);\n  font-size: var(--b-tooltip-font-size);\n  line-height: var(--b-tooltip-line-height);\n  padding: var(--b-tooltip-padding-y) var(--b-tooltip-padding-x);\n  border-radius: var(--b-tooltip-border-radius);\n  box-shadow: var(--b-tooltip-shadow);\n  word-wrap: break-word;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-tooltip__arrow {\n  position: absolute;\n  width: var(--b-tooltip-arrow-size);\n  height: var(--b-tooltip-arrow-size);\n  background: var(--b-tooltip-arrow-color);\n  transform: rotate(45deg);\n  pointer-events: none;\n}\n\n/* Arrow positioning for top placements */\n.b-tooltip__content.top-left .b-tooltip__arrow,\n.b-tooltip__content.top-center .b-tooltip__arrow,\n.b-tooltip__content.top-right .b-tooltip__arrow {\n  bottom: calc(var(--b-tooltip-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for bottom placements */\n.b-tooltip__content.bottom-left .b-tooltip__arrow,\n.b-tooltip__content.bottom-center .b-tooltip__arrow,\n.b-tooltip__content.bottom-right .b-tooltip__arrow {\n  top: calc(var(--b-tooltip-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for right placements */\n.b-tooltip__content.right-top .b-tooltip__arrow,\n.b-tooltip__content.right-center .b-tooltip__arrow,\n.b-tooltip__content.right-bottom .b-tooltip__arrow {\n  left: calc(var(--b-tooltip-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for left placements */\n.b-tooltip__content.left-top .b-tooltip__arrow,\n.b-tooltip__content.left-center .b-tooltip__arrow,\n.b-tooltip__content.left-bottom .b-tooltip__arrow {\n  right: calc(var(--b-tooltip-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks (auto-adjust overflow)\n   ───────────────────────────────────────────── */\n@position-try --b-tooltip-top-center {\n  inset: auto;\n  bottom: anchor(top);\n  justify-self: anchor-center;\n  margin-bottom: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-bottom-center {\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-right-center {\n  inset: auto;\n  align-self: anchor-center;\n  left: anchor(right);\n  margin-left: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-left-center {\n  inset: auto;\n  align-self: anchor-center;\n  right: anchor(left);\n  margin-right: var(--b-tooltip-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tooltip__content {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system212.js","names":[],"sources":["../src/components/BSwitch/BSwitch.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, watch, onMounted } from 'vue';\n\n//#region Props\nconst {\n  defaultChecked = false,\n  disabled = false,\n  loading = false,\n  size = 'default',\n} = defineProps<{\n  /** Initial checked state for uncontrolled usage. */\n  defaultChecked?: boolean;\n  /** Whether the switch is disabled. */\n  disabled?: boolean;\n  /** Whether to show a loading spinner on the handle. */\n  loading?: boolean;\n  /** Size of the switch. */\n  size?: 'default' | 'small';\n}>();\n\n/**\n * The checked state of the switch.\n * Supports v-model for controlled usage.\n */\nconst model = defineModel<boolean>({ default: undefined });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n  click: [checked: boolean, event: MouseEvent];\n}>();\n//#endregion\n\n//#region Internal state\nconst internalChecked = ref(defaultChecked);\n\nconst isChecked = computed(() =>\n  model.value !== undefined ? model.value : internalChecked.value,\n);\n\nonMounted(() => {\n  if (model.value === undefined) {\n    internalChecked.value = defaultChecked;\n  }\n});\n\nwatch(\n  () => model.value,\n  (val) => {\n    if (val !== undefined) {\n      internalChecked.value = val;\n    }\n  },\n);\n//#endregion\n\n//#region Handlers\nfunction toggle(event: MouseEvent | KeyboardEvent) {\n  if (disabled || loading) return;\n\n  const newChecked = !isChecked.value;\n  internalChecked.value = newChecked;\n  model.value = newChecked;\n  emit('change', newChecked, event);\n\n  if (event instanceof MouseEvent) {\n    emit('click', newChecked, event);\n  }\n}\n\nfunction handleClick(event: MouseEvent) {\n  toggle(event);\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle(event);\n  }\n}\n//#endregion\n\n//#region Expose\nconst rootRef = ref<HTMLButtonElement | 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</script>\n\n<template>\n  <button\n    ref=\"rootRef\"\n    type=\"button\"\n    role=\"switch\"\n    class=\"b-switch\"\n    :class=\"[\n      `b-switch--${size}`,\n      {\n        'b-switch--checked': isChecked,\n        'b-switch--disabled': disabled,\n        'b-switch--loading': loading,\n      },\n    ]\"\n    :aria-checked=\"isChecked\"\n    :aria-disabled=\"disabled || loading || undefined\"\n    :disabled=\"disabled\"\n    :tabindex=\"disabled ? -1 : 0\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeyDown\"\n  >\n    <span class=\"b-switch__handle\" aria-hidden=\"true\">\n      <svg\n        v-if=\"loading\"\n        class=\"b-switch__loading-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"28\"\n          stroke-dashoffset=\"8\"\n        />\n      </svg>\n    </span>\n    <span class=\"b-switch__inner\" aria-hidden=\"true\">\n      <span v-if=\"isChecked\" class=\"b-switch__inner-checked\">\n        <slot name=\"checked\" />\n      </span>\n      <span v-else class=\"b-switch__inner-unchecked\">\n        <slot name=\"unchecked\" />\n      </span>\n    </span>\n  </button>\n</template>\n\n<style scoped>\n.b-switch {\n  --b-switch-handle-bg: #fff;\n  --b-switch-handle-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);\n  --b-switch-handle-size: 18px;\n  --b-switch-track-height: 22px;\n  --b-switch-track-min-width: 44px;\n  --b-switch-track-padding: 2px;\n  --b-switch-inner-max-margin: 24px;\n  --b-switch-inner-min-margin: 9px;\n  --b-switch-track-bg: rgba(0, 0, 0, 0.25);\n  --b-switch-track-bg-checked: #1565d8;\n  --b-switch-track-bg-disabled: rgba(0, 0, 0, 0.04);\n  --b-switch-loading-color: #1565d8;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: var(--b-switch-track-min-width);\n  height: var(--b-switch-track-height);\n  padding: 0;\n  border: 0;\n  border-radius: calc(var(--b-switch-track-height) / 2);\n  background-color: var(--b-switch-track-bg);\n  cursor: pointer;\n  outline: none;\n  transition:\n    background-color 0.2s,\n    opacity 0.2s;\n  vertical-align: middle;\n  user-select: none;\n  line-height: 1;\n}\n\n.b-switch:focus-visible {\n  outline: 2px solid var(--b-switch-track-bg-checked);\n  outline-offset: 2px;\n}\n\n/* Checked state */\n.b-switch--checked {\n  background-color: var(--b-switch-track-bg-checked);\n}\n\n/* Disabled state */\n.b-switch--disabled {\n  cursor: not-allowed;\n  opacity: 0.65;\n}\n\n/* Loading state */\n.b-switch--loading {\n  cursor: default;\n  opacity: 0.85;\n}\n\n/* Handle */\n.b-switch__handle {\n  position: absolute;\n  top: var(--b-switch-track-padding);\n  inset-inline-start: var(--b-switch-track-padding);\n  width: var(--b-switch-handle-size);\n  height: var(--b-switch-handle-size);\n  border-radius: 50%;\n  background-color: var(--b-switch-handle-bg);\n  box-shadow: var(--b-switch-handle-shadow);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: inset-inline-start 0.2s ease-in-out;\n}\n\n.b-switch--checked .b-switch__handle {\n  inset-inline-start: calc(\n    100% - var(--b-switch-handle-size) - var(--b-switch-track-padding)\n  );\n}\n\n/* Loading icon */\n.b-switch__loading-icon {\n  width: calc(var(--b-switch-handle-size) * 0.6);\n  height: calc(var(--b-switch-handle-size) * 0.6);\n  color: var(--b-switch-loading-color);\n  animation: b-switch-spin 1s linear infinite;\n}\n\n.b-switch--checked .b-switch__loading-icon {\n  color: var(--b-switch-track-bg-checked);\n}\n\n@keyframes b-switch-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Inner content */\n.b-switch__inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  font-size: 12px;\n  color: #fff;\n  overflow: hidden;\n  padding: 0;\n}\n\n.b-switch__inner-checked,\n.b-switch__inner-unchecked {\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n}\n\n.b-switch__inner-checked {\n  margin-inline-start: calc(\n    var(--b-switch-track-padding) + var(--b-switch-inner-min-margin)\n  );\n  margin-inline-end: calc(\n    var(--b-switch-handle-size) + var(--b-switch-track-padding) +\n      var(--b-switch-inner-min-margin) - var(--b-switch-inner-max-margin) +\n      var(--b-switch-inner-max-margin)\n  );\n}\n\n.b-switch__inner-unchecked {\n  margin-inline-start: calc(\n    var(--b-switch-handle-size) + var(--b-switch-track-padding) +\n      var(--b-switch-inner-min-margin)\n  );\n  margin-inline-end: calc(\n    var(--b-switch-track-padding) + var(--b-switch-inner-min-margin)\n  );\n}\n\n/* Small size */\n.b-switch--small {\n  --b-switch-handle-size: 12px;\n  --b-switch-track-height: 16px;\n  --b-switch-track-min-width: 28px;\n  --b-switch-inner-max-margin: 18px;\n  --b-switch-inner-min-margin: 6px;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-switch {\n  --b-switch-track-bg: rgba(255, 255, 255, 0.25);\n  --b-switch-track-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-switch-handle-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-switch {\n    --b-switch-track-bg: rgba(255, 255, 255, 0.25);\n    --b-switch-track-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-switch-handle-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-switch__handle {\n    transition: none;\n  }\n\n  .b-switch {\n    transition: none;\n  }\n\n  .b-switch__loading-icon {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":""}