@7pmlabs/design-system 1.0.8 → 1.0.10

package/dist/design-system186.js

@@ -1,109 +1,31 @@
-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-switch__loading-icon",
-	viewBox: "0 0 16 16",
-	fill: "none",
-	"aria-hidden": "true"
-}, g = {
-	class: "b-switch__inner",
-	"aria-hidden": "true"
-}, _ = {
-	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: !1
-		},
-		disabled: {
-			type: Boolean,
-			default: !1
-		},
-		loading: {
-			type: Boolean,
-			default: !1
-		},
-		size: { default: "default" }
-	}, {
-		modelValue: {
-			type: Boolean,
-			default: void 0
-		},
-		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);
-		});
-		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));
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a } from "vue";
+//#region src/components/BSkeleton/BSkeletonImage.vue?vue&type=script&setup=true&lang.ts
+var o = /* @__PURE__ */ r({
+	__name: "BSkeletonImage",
+	props: { active: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(r) {
+		let o = e(() => [
+			"b-skeleton-element",
+			"b-skeleton-image",
+			{ "b-skeleton-element--active": r.active }
+		]);
+		return (e, r) => (a(), t("div", {
+			class: i(o.value),
+			role: "presentation",
+			"aria-hidden": "true"
+		}, [...r[0] ||= [n("svg", {
+			class: "b-skeleton-image__svg",
+			viewBox: "0 0 1098 1024",
+			xmlns: "http://www.w3.org/2000/svg",
+			"aria-hidden": "true",
+			focusable: "false"
+		}, [n("path", { d: "M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z" })], -1)]], 2));
 	}
 });
 //#endregion
-export { y as default };
+export { o as default };
 
 //# sourceMappingURL=design-system186.js.map

package/dist/design-system186.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system186.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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"}
+{"version":3,"file":"design-system186.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonImage.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nimport { computed } from 'vue';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSkeletonImage',\n  props: {\n    active: { type: Boolean, default: false }\n  },\n  setup(__props: any) {\n\n\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-image',\n  { 'b-skeleton-element--active': __props.active },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    class: _normalizeClass(classes.value),\n    role: \"presentation\",\n    \"aria-hidden\": \"true\"\n  }, [...(_cache[0] || (_cache[0] = [\n    _createElementVNode(\"svg\", {\n      class: \"b-skeleton-image__svg\",\n      viewBox: \"0 0 1098 1024\",\n      xmlns: \"http://www.w3.org/2000/svg\",\n      \"aria-hidden\": \"true\",\n      focusable: \"false\"\n    }, [\n      _createElementVNode(\"path\", { d: \"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\" })\n    ], -1)\n  ]))], 2))\n}\n}\n\n})"],"mappings":";;AAMA,IAAA,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO,EACL,QAAQ;EAAE,MAAM;EAAS,SAAS;EAAO,EAC1C;CACD,MAAM,GAAc;EAItB,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,EAAE,8BAA8B,EAAQ,QAAQ;GACjD,CAAC;AAEF,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,OAAO;GAC/C,OAAO,EAAgB,EAAQ,MAAM;GACrC,MAAM;GACN,eAAe;GAChB,EAAE,CAAC,GAAI,AAAc,EAAO,OAAK,CAChC,EAAoB,OAAO;GACzB,OAAO;GACP,SAAS;GACT,OAAO;GACP,eAAe;GACf,WAAW;GACZ,EAAE,CACD,EAAoB,QAAQ,EAAE,GAAG,m3BAAm3B,CAAC,CACt5B,EAAE,GAAG,CACP,CAAG,EAAE,EAAE;;CAIT,CAAA"}

package/dist/design-system188.js

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

package/dist/design-system188.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system188.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":""}
+{"version":3,"file":"design-system188.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-image',\n  { 'b-skeleton-element--active': active },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <svg\n      class=\"b-skeleton-image__svg\"\n      viewBox=\"0 0 1098 1024\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path\n        d=\"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style>\n.b-skeleton-image {\n  display: inline-flex;\n  vertical-align: top;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-skeleton-image-size, 96px);\n  height: var(--b-skeleton-image-size, 96px);\n  background: var(--b-skeleton-gradient-from-color, oklch(93% 0 0));\n  border-radius: var(--b-skeleton-border-radius, 6px);\n}\n\n.b-skeleton-image__svg {\n  width: 48px;\n  height: 48px;\n  fill: oklch(75% 0 0);\n}\n\n[data-prefers-color='dark'] .b-skeleton-image__svg {\n  fill: oklch(50% 0 0);\n}\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-skeleton-image__svg {\n    fill: oklch(50% 0 0);\n  }\n}\n</style>\n"],"mappings":""}