@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system189.js

@@ -1,7 +1,7 @@
 import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i } from "vue";
-//#region src/components/BSkeleton/BSkeletonInput.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/BSkeleton/BSkeletonButton.vue?vue&type=script&setup=true&lang.ts
 var a = /* @__PURE__ */ n({
-	__name: "BSkeletonInput",
+	__name: "BSkeletonButton",
 	props: {
 		active: {
 			type: Boolean,
@@ -11,15 +11,17 @@ var a = /* @__PURE__ */ n({
 			type: Boolean,
 			default: !1
 		},
+		shape: { default: "default" },
 		size: { default: "default" }
 	},
 	setup(n) {
 		let a = e(() => [
 			"b-skeleton-element",
-			"b-skeleton-input",
-			`b-skeleton-input--${n.size}`,
+			"b-skeleton-button",
+			`b-skeleton-button--${n.shape}`,
+			`b-skeleton-button--${n.size}`,
 			{
-				"b-skeleton-input--block": n.block,
+				"b-skeleton-button--block": n.block,
 				"b-skeleton-element--active": n.active
 			}
 		]);

package/dist/design-system189.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system189.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonInput.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nimport { computed } from 'vue';\nimport type { BSkeletonInputSize } from './types';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSkeletonInput',\n  props: {\n    active: { type: Boolean, default: false },\n    block: { type: Boolean, default: false },\n    size: { default: 'default' }\n  },\n  setup(__props: any) {\n\n\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-input',\n  `b-skeleton-input--${__props.size}`,\n  {\n    'b-skeleton-input--block': __props.block,\n    'b-skeleton-element--active': __props.active,\n  },\n]);\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"span\", {\n    class: _normalizeClass(classes.value),\n    role: \"presentation\",\n    \"aria-hidden\": \"true\"\n  }, null, 2))\n}\n}\n\n})"],"mappings":";;AAOA,IAAA,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,QAAQ;GAAE,MAAM;GAAS,SAAS;GAAO;EACzC,OAAO;GAAE,MAAM;GAAS,SAAS;GAAO;EACxC,MAAM,EAAE,SAAS,WAAW;EAC7B;CACD,MAAM,GAAc;EAItB,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,qBAAqB,EAAQ;GAC7B;IACE,2BAA2B,EAAQ;IACnC,8BAA8B,EAAQ;IACvC;GACF,CAAC;AAEF,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,QAAQ;GAChD,OAAO,EAAgB,EAAQ,MAAM;GACrC,MAAM;GACN,eAAe;GAChB,EAAE,MAAM,EAAE;;CAIZ,CAAA"}
+{"version":3,"file":"design-system189.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonButtonShape, BSkeletonButtonSize } from './types';\n\nconst {\n  active = false,\n  block = false,\n  shape = 'default',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to full width. @default false */\n  block?: boolean;\n  /** Button shape. @default 'default' */\n  shape?: BSkeletonButtonShape;\n  /** Button size. @default 'default' */\n  size?: BSkeletonButtonSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-button',\n  `b-skeleton-button--${shape}`,\n  `b-skeleton-button--${size}`,\n  {\n    'b-skeleton-button--block': block,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-button {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-button-min-width, 64px);\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-button--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 48px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 80px;\n}\n\n.b-skeleton-button--round {\n  border-radius: 100px;\n}\n\n.b-skeleton-button--circle {\n  width: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-control-height, 32px);\n  border-radius: 50%;\n}\n.b-skeleton-button--circle.b-skeleton-button--small {\n  width: var(--b-skeleton-control-height-sm, 24px);\n  min-width: var(--b-skeleton-control-height-sm, 24px);\n}\n.b-skeleton-button--circle.b-skeleton-button--large {\n  width: var(--b-skeleton-control-height-lg, 40px);\n  min-width: var(--b-skeleton-control-height-lg, 40px);\n}\n\n.b-skeleton-button--square {\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;EAoBA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,sBAAsB,EAAA;GACtB,sBAAsB,EAAA;GACtB;IACE,4BAA4B,EAAA;IAC5B,8BAA8B,EAAA;IAC/B;GACF,CAAC;yBAIA,EAAgE,QAAA;GAAzD,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY"}

package/dist/design-system19.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system19.js","names":[],"sources":["../src/components/BBadge/BBadge.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useSlots as _useSlots, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode } from \"vue\"\n\nconst _hoisted_1 = [\"id\"]\nconst _hoisted_2 = [\"aria-label\"]\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-badge__status-text\"\n}\nconst _hoisted_4 = [\"id\"]\nconst _hoisted_5 = [\"title\", \"aria-label\"]\nconst _hoisted_6 = [\"title\", \"aria-label\"]\nconst _hoisted_7 = [\"title\", \"aria-label\"]\n\nimport { BBadgeSize, BBadgeStatus } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BBadge',\n  props: {\n    count: { default: () => (undefined) },\n    dot: { type: Boolean, default: false },\n    offset: {},\n    overflowCount: { default: 99 },\n    showZero: { type: Boolean, default: false },\n    size: { default: () => (BBadgeSize.Default) },\n    status: {},\n    color: {},\n    text: {},\n    title: {}\n  },\n  setup(__props: any) {\n\n\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = _useSlots();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst badgeId = useId();\nconst isHidden = ref(false);\nconst prevCount = ref<number | string | undefined>(__props.count);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst PRESET_COLORS = [\n  'pink',\n  'red',\n  'yellow',\n  'orange',\n  'cyan',\n  'green',\n  'blue',\n  'purple',\n  'geekblue',\n  'magenta',\n  'volcano',\n  'gold',\n  'lime',\n] as const;\n\nconst isPresetColor = computed(() =>\n  __props.color ? (PRESET_COLORS as readonly string[]).includes(__props.color) : false,\n);\n\nconst isCustomColor = computed(() => (__props.color ? !isPresetColor.value : false));\n\nconst isStatusMode = computed(() => {\n  // Status mode: explicit status prop, or color-only without count/dot (standalone color dot)\n  if (__props.status) return true;\n  if (__props.color && !hasCount.value && !__props.dot && !slots.count) return true;\n  return false;\n});\n\nconst isStandalone = computed(() => !slots.default);\n\nconst hasCount = computed(() => __props.count !== undefined && __props.count !== null);\n\nconst numericCount = computed(() => {\n  if (typeof __props.count === 'number') return __props.count;\n  if (typeof __props.count === 'string') {\n    const n = Number(__props.count);\n    return Number.isNaN(n) ? undefined : n;\n  }\n  return undefined;\n});\n\nconst displayCount = computed(() => {\n  if (slots.count) return undefined;\n  if (numericCount.value !== undefined) {\n    return numericCount.value > __props.overflowCount ? `${__props.overflowCount}+` : `${numericCount.value}`;\n  }\n  if (typeof __props.count === 'string') return __props.count;\n  return undefined;\n});\n\nconst shouldShowBadge = computed(() => {\n  if (__props.dot) {\n    return hasCount.value ? numericCount.value !== 0 || __props.showZero : true;\n  }\n  if (hasCount.value) {\n    if (numericCount.value === 0) return __props.showZero;\n    return true;\n  }\n  if (slots.count) return true;\n  return false;\n});\n\nconst badgeTitle = computed(() => {\n  if (__props.title !== undefined) return __props.title;\n  if (typeof __props.count === 'number' || typeof __props.count === 'string') return String(__props.count);\n  return undefined;\n});\n\nconst offsetStyle = computed(() => {\n  if (!__props.offset) return undefined;\n  const [right, top] = __props.offset;\n  const r = typeof right === 'number' ? `${right}px` : right;\n  const t = typeof top === 'number' ? `${top}px` : top;\n  return {\n    right: `-${r}`,\n    marginTop: t,\n  };\n});\n\nconst statusColorStyle = computed(() => {\n  if (isCustomColor.value) {\n    return { backgroundColor: __props.color };\n  }\n  return undefined;\n});\n\nconst countColorStyle = computed(() => {\n  if (isCustomColor.value) {\n    return { backgroundColor: __props.color };\n  }\n  return undefined;\n});\n\n// ─────────────────────────────────────────────\n// Animation: track count changes for scroll\n// ─────────────────────────────────────────────\nwatch(\n  () => __props.count,\n  (newVal) => {\n    prevCount.value = newVal;\n  },\n);\n\nwatch(\n  () => {\n    if (__props.dot) return hasCount.value ? numericCount.value !== 0 || __props.showZero : true;\n    if (hasCount.value) {\n      if (numericCount.value === 0) return __props.showZero;\n      return true;\n    }\n    return !!slots.count;\n  },\n  (visible) => {\n    isHidden.value = !visible;\n  },\n);\n\nreturn (_ctx: any,_cache: any) => {\n  return (isStatusMode.value && isStandalone.value)\n    ? (_openBlock(), _createElementBlock(\"span\", {\n        key: 0,\n        id: _unref(badgeId),\n        class: _normalizeClass([\"b-badge b-badge--status\", [\n      __props.status ? `b-badge--status-${__props.status}` : undefined,\n      isPresetColor.value ? `b-badge--color-${__props.color}` : undefined,\n    ]])\n      }, [\n        _createElementVNode(\"span\", {\n          class: _normalizeClass([\"b-badge__status-dot\", [\n        __props.status ? `b-badge__status-dot--${__props.status}` : undefined,\n        isPresetColor.value ? `b-badge__status-dot--${__props.color}` : undefined,\n      ]]),\n          style: _normalizeStyle(statusColorStyle.value),\n          role: \"img\",\n          \"aria-label\": __props.text || __props.status || 'status'\n        }, null, 14, _hoisted_2),\n        (__props.text)\n          ? (_openBlock(), _createElementBlock(\"span\", _hoisted_3, _toDisplayString(__props.text), 1))\n          : _createCommentVNode(\"\", true)\n      ], 10, _hoisted_1))\n    : (_openBlock(), _createElementBlock(\"span\", {\n        key: 1,\n        id: _unref(badgeId),\n        class: _normalizeClass([\"b-badge\", [{ 'b-badge--no-wrapper': isStandalone.value }]])\n      }, [\n        _renderSlot(_ctx.$slots, \"default\"),\n        (__props.dot && shouldShowBadge.value)\n          ? (_openBlock(), _createElementBlock(\"sup\", {\n              key: 0,\n              class: _normalizeClass([\"b-badge__dot\", [\n        isPresetColor.value ? `b-badge__dot--${__props.color}` : undefined,\n        {\n          'b-badge__dot--custom-color': isCustomColor.value,\n          'b-badge--motionless': false,\n        },\n      ]]),\n              style: _normalizeStyle({ ...offsetStyle.value, ...countColorStyle.value }),\n              title: badgeTitle.value,\n              role: \"status\",\n              \"aria-label\": `${badgeTitle.value ?? 'notification indicator'}`\n            }, null, 14, _hoisted_5))\n          : (shouldShowBadge.value && !isStatusMode.value)\n            ? (_openBlock(), _createElementBlock(\"sup\", {\n                key: 1,\n                class: _normalizeClass([\"b-badge__count\", [\n        {\n          'b-badge__count--small': __props.size === 'small',\n          'b-badge__count--custom-color': isCustomColor.value,\n        },\n        isPresetColor.value ? `b-badge__count--${__props.color}` : undefined,\n      ]]),\n                style: _normalizeStyle({ ...offsetStyle.value, ...countColorStyle.value }),\n                title: badgeTitle.value,\n                role: \"status\",\n                \"aria-label\": `${displayCount.value ?? ''} ${__props.text ?? ''}`.trim() || 'notification count'\n              }, [\n                _renderSlot(_ctx.$slots, \"count\", {}, () => [\n                  _createTextVNode(_toDisplayString(displayCount.value), 1)\n                ])\n              ], 14, _hoisted_6))\n            : (isStatusMode.value && !isStandalone.value && shouldShowBadge.value)\n              ? (_openBlock(), _createElementBlock(\"sup\", {\n                  key: 2,\n                  class: _normalizeClass([\"b-badge__dot\", [\n        __props.status ? `b-badge__dot--${__props.status}` : undefined,\n        isPresetColor.value ? `b-badge__dot--${__props.color}` : undefined,\n        { 'b-badge__dot--custom-color': isCustomColor.value },\n      ]]),\n                  style: _normalizeStyle({ ...offsetStyle.value, ...statusColorStyle.value }),\n                  title: badgeTitle.value,\n                  role: \"status\",\n                  \"aria-label\": __props.text || __props.status || 'status'\n                }, null, 14, _hoisted_7))\n              : _createCommentVNode(\"\", true)\n      ], 10, _hoisted_4))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system19.js","names":[],"sources":["../src/components/BBadge/BBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BBadgeSize, BBadgeStatus } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  count = undefined,\n  dot = false,\n  offset,\n  overflowCount = 99,\n  showZero = false,\n  size = BBadgeSize.Default,\n  status,\n  color,\n  text,\n  title,\n} = defineProps<{\n  /**\n   * Number to show in badge.\n   */\n  count?: number | string;\n  /**\n   * Whether to display a red dot instead of count.\n   * @default false\n   */\n  dot?: boolean;\n  /**\n   * Set offset of the badge dot: [left, top].\n   */\n  offset?: [number | string, number | string];\n  /**\n   * Max count to show. Values above display as `{overflowCount}+`.\n   * @default 99\n   */\n  overflowCount?: number;\n  /**\n   * Whether to show badge when count is zero.\n   * @default false\n   */\n  showZero?: boolean;\n  /**\n   * Size of the badge. Only works with count (not dot or status).\n   * @default 'default'\n   */\n  size?: `${BBadgeSize}`;\n  /**\n   * Set Badge as a status dot. One of 'success' | 'processing' | 'default' | 'error' | 'warning'.\n   */\n  status?: `${BBadgeStatus}`;\n  /**\n   * Custom badge color. If set, renders as a colored dot (like status) or colored count badge.\n   */\n  color?: string;\n  /**\n   * Text to display next to a status dot or color dot.\n   */\n  text?: string;\n  /**\n   * Custom hover title for the badge.\n   */\n  title?: string;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Wrapped element (the thing being badged). */\n  default?(): unknown;\n  /** Custom count content (replaces the number). */\n  count?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst badgeId = useId();\nconst isHidden = ref(false);\nconst prevCount = ref<number | string | undefined>(count);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst PRESET_COLORS = [\n  'pink',\n  'red',\n  'yellow',\n  'orange',\n  'cyan',\n  'green',\n  'blue',\n  'purple',\n  'geekblue',\n  'magenta',\n  'volcano',\n  'gold',\n  'lime',\n] as const;\n\nconst isPresetColor = computed(() =>\n  color ? (PRESET_COLORS as readonly string[]).includes(color) : false,\n);\n\nconst isCustomColor = computed(() => (color ? !isPresetColor.value : false));\n\nconst isStatusMode = computed(() => {\n  // Status mode: explicit status prop, or color-only without count/dot (standalone color dot)\n  if (status) return true;\n  if (color && !hasCount.value && !dot && !slots.count) return true;\n  return false;\n});\n\nconst isStandalone = computed(() => !slots.default);\n\nconst hasCount = computed(() => count !== undefined && count !== null);\n\nconst numericCount = computed(() => {\n  if (typeof count === 'number') return count;\n  if (typeof count === 'string') {\n    const n = Number(count);\n    return Number.isNaN(n) ? undefined : n;\n  }\n  return undefined;\n});\n\nconst displayCount = computed(() => {\n  if (slots.count) return undefined;\n  if (numericCount.value !== undefined) {\n    return numericCount.value > overflowCount ? `${overflowCount}+` : `${numericCount.value}`;\n  }\n  if (typeof count === 'string') return count;\n  return undefined;\n});\n\nconst shouldShowBadge = computed(() => {\n  if (dot) {\n    return hasCount.value ? numericCount.value !== 0 || showZero : true;\n  }\n  if (hasCount.value) {\n    if (numericCount.value === 0) return showZero;\n    return true;\n  }\n  if (slots.count) return true;\n  return false;\n});\n\nconst badgeTitle = computed(() => {\n  if (title !== undefined) return title;\n  if (typeof count === 'number' || typeof count === 'string') return String(count);\n  return undefined;\n});\n\nconst offsetStyle = computed(() => {\n  if (!offset) return undefined;\n  const [right, top] = offset;\n  const r = typeof right === 'number' ? `${right}px` : right;\n  const t = typeof top === 'number' ? `${top}px` : top;\n  return {\n    right: `-${r}`,\n    marginTop: t,\n  };\n});\n\nconst statusColorStyle = computed(() => {\n  if (isCustomColor.value) {\n    return { backgroundColor: color };\n  }\n  return undefined;\n});\n\nconst countColorStyle = computed(() => {\n  if (isCustomColor.value) {\n    return { backgroundColor: color };\n  }\n  return undefined;\n});\n\n// ─────────────────────────────────────────────\n// Animation: track count changes for scroll\n// ─────────────────────────────────────────────\nwatch(\n  () => count,\n  (newVal) => {\n    prevCount.value = newVal;\n  },\n);\n\nwatch(\n  () => {\n    if (dot) return hasCount.value ? numericCount.value !== 0 || showZero : true;\n    if (hasCount.value) {\n      if (numericCount.value === 0) return showZero;\n      return true;\n    }\n    return !!slots.count;\n  },\n  (visible) => {\n    isHidden.value = !visible;\n  },\n);\n</script>\n\n<template>\n  <!-- Status/color dot mode (standalone, no children) -->\n  <span\n    v-if=\"isStatusMode && isStandalone\"\n    :id=\"badgeId\"\n    class=\"b-badge b-badge--status\"\n    :class=\"[\n      status ? `b-badge--status-${status}` : undefined,\n      isPresetColor ? `b-badge--color-${color}` : undefined,\n    ]\"\n  >\n    <span\n      class=\"b-badge__status-dot\"\n      :class=\"[\n        status ? `b-badge__status-dot--${status}` : undefined,\n        isPresetColor ? `b-badge__status-dot--${color}` : undefined,\n      ]\"\n      :style=\"statusColorStyle\"\n      role=\"img\"\n      :aria-label=\"text || status || 'status'\"\n    />\n    <span v-if=\"text\" class=\"b-badge__status-text\">{{ text }}</span>\n  </span>\n\n  <!-- Normal wrapper mode -->\n  <span v-else :id=\"badgeId\" class=\"b-badge\" :class=\"[{ 'b-badge--no-wrapper': isStandalone }]\">\n    <slot />\n\n    <!-- Dot indicator -->\n    <sup\n      v-if=\"dot && shouldShowBadge\"\n      class=\"b-badge__dot\"\n      :class=\"[\n        isPresetColor ? `b-badge__dot--${color}` : undefined,\n        {\n          'b-badge__dot--custom-color': isCustomColor,\n          'b-badge--motionless': false,\n        },\n      ]\"\n      :style=\"{ ...offsetStyle, ...countColorStyle }\"\n      :title=\"badgeTitle\"\n      role=\"status\"\n      :aria-label=\"`${badgeTitle ?? 'notification indicator'}`\"\n    />\n\n    <!-- Count badge -->\n    <sup\n      v-else-if=\"shouldShowBadge && !isStatusMode\"\n      class=\"b-badge__count\"\n      :class=\"[\n        {\n          'b-badge__count--small': size === 'small',\n          'b-badge__count--custom-color': isCustomColor,\n        },\n        isPresetColor ? `b-badge__count--${color}` : undefined,\n      ]\"\n      :style=\"{ ...offsetStyle, ...countColorStyle }\"\n      :title=\"badgeTitle\"\n      role=\"status\"\n      :aria-label=\"`${displayCount ?? ''} ${text ?? ''}`.trim() || 'notification count'\"\n    >\n      <slot name=\"count\">\n        {{ displayCount }}\n      </slot>\n    </sup>\n\n    <!-- Status dot overlaying children -->\n    <sup\n      v-else-if=\"isStatusMode && !isStandalone && shouldShowBadge\"\n      class=\"b-badge__dot\"\n      :class=\"[\n        status ? `b-badge__dot--${status}` : undefined,\n        isPresetColor ? `b-badge__dot--${color}` : undefined,\n        { 'b-badge__dot--custom-color': isCustomColor },\n      ]\"\n      :style=\"{ ...offsetStyle, ...statusColorStyle }\"\n      :title=\"badgeTitle\"\n      role=\"status\"\n      :aria-label=\"text || status || 'status'\"\n    />\n  </span>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-badge {\n  /* Count badge */\n  --b-badge-color: oklch(100% 0 0);\n  --b-badge-bg: oklch(57.7% 0.245 27.325);\n  --b-badge-font-size: 12px;\n  --b-badge-font-size-small: 10px;\n  --b-badge-font-weight: 500;\n  --b-badge-height: 20px;\n  --b-badge-height-small: 14px;\n  --b-badge-min-width: 20px;\n  --b-badge-min-width-small: 14px;\n  --b-badge-padding-inline: 6px;\n  --b-badge-padding-inline-small: 4px;\n  --b-badge-border-radius: 10px;\n  --b-badge-shadow: 0 0 0 1px oklch(100% 0 0);\n\n  /* Dot */\n  --b-badge-dot-size: 8px;\n  --b-badge-dot-bg: oklch(57.7% 0.245 27.325);\n\n  /* Status dot */\n  --b-badge-status-dot-size: 8px;\n  --b-badge-status-success: oklch(62.7% 0.194 149.214);\n  --b-badge-status-processing: oklch(54.6% 0.245 262.881);\n  --b-badge-status-default: oklch(70% 0.01 260);\n  --b-badge-status-error: oklch(57.7% 0.245 27.325);\n  --b-badge-status-warning: oklch(72.6% 0.191 68.916);\n\n  /* Text */\n  --b-badge-status-text-color: oklch(27% 0.01 260);\n  --b-badge-status-text-font-size: 14px;\n\n  /* Preset colors */\n  --b-badge-color-pink: oklch(53% 0.2 0);\n  --b-badge-color-red: oklch(57.7% 0.245 27.325);\n  --b-badge-color-yellow: oklch(53% 0.13 90);\n  --b-badge-color-orange: oklch(53% 0.16 55);\n  --b-badge-color-cyan: oklch(50% 0.1 200);\n  --b-badge-color-green: oklch(50% 0.15 149.214);\n  --b-badge-color-blue: oklch(54.6% 0.245 262.881);\n  --b-badge-color-purple: oklch(54% 0.22 290);\n  --b-badge-color-geekblue: oklch(50% 0.22 270);\n  --b-badge-color-magenta: oklch(57% 0.24 350);\n  --b-badge-color-volcano: oklch(53% 0.18 30);\n  --b-badge-color-gold: oklch(53% 0.13 75);\n  --b-badge-color-lime: oklch(50% 0.14 125);\n\n  /* Animation */\n  --b-badge-animation-duration: 300ms;\n\n  /* Z-index */\n  --b-badge-z-index: auto;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-badge {\n  --b-badge-shadow: 0 0 0 1px oklch(20% 0.01 260);\n  --b-badge-status-text-color: oklch(85% 0.01 260);\n  --b-badge-status-default: oklch(50% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-badge {\n    --b-badge-shadow: 0 0 0 1px oklch(20% 0.01 260);\n    --b-badge-status-text-color: oklch(85% 0.01 260);\n    --b-badge-status-default: oklch(50% 0.01 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-badge {\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n  line-height: 1;\n  box-sizing: border-box;\n}\n\n.b-badge--no-wrapper {\n  /* Standalone badges don't need positioning context */\n}\n\n/* ─────────────────────────────────────────────\n   Count badge (number)\n   ───────────────────────────────────────────── */\n.b-badge__count {\n  position: absolute;\n  top: 0;\n  inset-inline-end: 0;\n  transform: translate(50%, -50%);\n  transform-origin: 100% 0%;\n  z-index: var(--b-badge-z-index);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  min-width: var(--b-badge-min-width);\n  height: var(--b-badge-height);\n  padding: 0 var(--b-badge-padding-inline);\n  border-radius: var(--b-badge-border-radius);\n  box-shadow: var(--b-badge-shadow);\n\n  font-size: var(--b-badge-font-size);\n  font-weight: var(--b-badge-font-weight);\n  font-family: inherit;\n  color: var(--b-badge-color);\n  background: var(--b-badge-bg);\n  white-space: nowrap;\n  text-align: center;\n  line-height: var(--b-badge-height);\n  box-sizing: border-box;\n  cursor: default;\n\n  animation: b-badge-zoom-in var(--b-badge-animation-duration) ease both;\n}\n\n.b-badge__count--small {\n  min-width: var(--b-badge-min-width-small);\n  height: var(--b-badge-height-small);\n  padding: 0 var(--b-badge-padding-inline-small);\n  font-size: var(--b-badge-font-size-small);\n  line-height: var(--b-badge-height-small);\n  border-radius: calc(var(--b-badge-height-small) / 2);\n}\n\n/* ─────────────────────────────────────────────\n   Dot indicator\n   ───────────────────────────────────────────── */\n.b-badge__dot {\n  position: absolute;\n  top: 0;\n  inset-inline-end: 0;\n  transform: translate(50%, -50%);\n  transform-origin: 100% 0%;\n  z-index: var(--b-badge-z-index);\n\n  width: var(--b-badge-dot-size);\n  height: var(--b-badge-dot-size);\n  border-radius: 50%;\n  background: var(--b-badge-dot-bg);\n  box-shadow: var(--b-badge-shadow);\n  cursor: default;\n  pointer-events: none;\n\n  animation: b-badge-zoom-in var(--b-badge-animation-duration) ease both;\n}\n\n/* ─────────────────────────────────────────────\n   Status mode (standalone)\n   ───────────────────────────────────────────── */\n.b-badge--status {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  line-height: 1;\n  vertical-align: middle;\n}\n\n.b-badge__status-dot {\n  display: inline-block;\n  width: var(--b-badge-status-dot-size);\n  height: var(--b-badge-status-dot-size);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.b-badge__status-dot--success {\n  background-color: var(--b-badge-status-success);\n}\n\n.b-badge__status-dot--processing {\n  background-color: var(--b-badge-status-processing);\n}\n\n.b-badge__status-dot--default {\n  background-color: var(--b-badge-status-default);\n}\n\n.b-badge__status-dot--error {\n  background-color: var(--b-badge-status-error);\n}\n\n.b-badge__status-dot--warning {\n  background-color: var(--b-badge-status-warning);\n}\n\n/* Processing animation */\n.b-badge__status-dot--processing::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  border: 1px solid var(--b-badge-status-processing);\n  animation: b-badge-processing 1.2s ease-in-out infinite;\n}\n\n.b-badge__status-dot--processing {\n  position: relative;\n}\n\n.b-badge__status-text {\n  color: var(--b-badge-status-text-color);\n  font-size: var(--b-badge-status-text-font-size);\n  line-height: 1;\n}\n\n/* ─────────────────────────────────────────────\n   Preset colors for dots and counts\n   ───────────────────────────────────────────── */\n.b-badge__dot--pink,\n.b-badge__count--pink,\n.b-badge__status-dot--pink {\n  background-color: var(--b-badge-color-pink);\n}\n\n.b-badge__dot--red,\n.b-badge__count--red,\n.b-badge__status-dot--red {\n  background-color: var(--b-badge-color-red);\n}\n\n.b-badge__dot--yellow,\n.b-badge__count--yellow,\n.b-badge__status-dot--yellow {\n  background-color: var(--b-badge-color-yellow);\n}\n\n.b-badge__dot--orange,\n.b-badge__count--orange,\n.b-badge__status-dot--orange {\n  background-color: var(--b-badge-color-orange);\n}\n\n.b-badge__dot--cyan,\n.b-badge__count--cyan,\n.b-badge__status-dot--cyan {\n  background-color: var(--b-badge-color-cyan);\n}\n\n.b-badge__dot--green,\n.b-badge__count--green,\n.b-badge__status-dot--green {\n  background-color: var(--b-badge-color-green);\n}\n\n.b-badge__dot--blue,\n.b-badge__count--blue,\n.b-badge__status-dot--blue {\n  background-color: var(--b-badge-color-blue);\n}\n\n.b-badge__dot--purple,\n.b-badge__count--purple,\n.b-badge__status-dot--purple {\n  background-color: var(--b-badge-color-purple);\n}\n\n.b-badge__dot--geekblue,\n.b-badge__count--geekblue,\n.b-badge__status-dot--geekblue {\n  background-color: var(--b-badge-color-geekblue);\n}\n\n.b-badge__dot--magenta,\n.b-badge__count--magenta,\n.b-badge__status-dot--magenta {\n  background-color: var(--b-badge-color-magenta);\n}\n\n.b-badge__dot--volcano,\n.b-badge__count--volcano,\n.b-badge__status-dot--volcano {\n  background-color: var(--b-badge-color-volcano);\n}\n\n.b-badge__dot--gold,\n.b-badge__count--gold,\n.b-badge__status-dot--gold {\n  background-color: var(--b-badge-color-gold);\n}\n\n.b-badge__dot--lime,\n.b-badge__count--lime,\n.b-badge__status-dot--lime {\n  background-color: var(--b-badge-color-lime);\n}\n\n/* Custom color via style binding */\n.b-badge__dot--custom-color,\n.b-badge__count--custom-color {\n  /* backgroundColor set via inline style */\n}\n\n/* ─────────────────────────────────────────────\n   Animations\n   ───────────────────────────────────────────── */\n@keyframes b-badge-zoom-in {\n  0% {\n    opacity: 0;\n    transform: translate(50%, -50%) scale(0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate(50%, -50%) scale(1);\n  }\n}\n\n@keyframes b-badge-processing {\n  0% {\n    transform: scale(0.8);\n    opacity: 0.5;\n  }\n  100% {\n    transform: scale(2.4);\n    opacity: 0;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-badge__count,\n  .b-badge__dot {\n    animation: none;\n  }\n\n  .b-badge__status-dot--processing::after {\n    animation: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system191.js

@@ -1,6 +1,6 @@
 import e from "./design-system189.js";
 /* empty css                 */
-//#region src/components/BSkeleton/BSkeletonInput.vue
+//#region src/components/BSkeleton/BSkeletonButton.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system191.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system191.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonInputSize } from './types';\n\nconst {\n  active = false,\n  block = false,\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to full width. @default false */\n  block?: boolean;\n  /** Input size. @default 'default' */\n  size?: BSkeletonInputSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-input',\n  `b-skeleton-input--${size}`,\n  {\n    'b-skeleton-input--block': block,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-input {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-input-min-width, 160px);\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-input--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 96px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-input--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 200px;\n}\n\n.b-skeleton-input--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system191.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { BSkeletonButtonShape, BSkeletonButtonSize } from './types';\n\nconst {\n  active = false,\n  block = false,\n  shape = 'default',\n  size = 'default',\n} = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to full width. @default false */\n  block?: boolean;\n  /** Button shape. @default 'default' */\n  shape?: BSkeletonButtonShape;\n  /** Button size. @default 'default' */\n  size?: BSkeletonButtonSize;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-button',\n  `b-skeleton-button--${shape}`,\n  `b-skeleton-button--${size}`,\n  {\n    'b-skeleton-button--block': block,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <span :class=\"classes\" role=\"presentation\" aria-hidden=\"true\" />\n</template>\n\n<style>\n.b-skeleton-button {\n  display: inline-block;\n  vertical-align: top;\n  height: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-button-min-width, 64px);\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-button--small {\n  height: var(--b-skeleton-control-height-sm, 24px);\n  min-width: 48px;\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--large {\n  height: var(--b-skeleton-control-height-lg, 40px);\n  min-width: 80px;\n}\n\n.b-skeleton-button--round {\n  border-radius: 100px;\n}\n\n.b-skeleton-button--circle {\n  width: var(--b-skeleton-control-height, 32px);\n  min-width: var(--b-skeleton-control-height, 32px);\n  border-radius: 50%;\n}\n.b-skeleton-button--circle.b-skeleton-button--small {\n  width: var(--b-skeleton-control-height-sm, 24px);\n  min-width: var(--b-skeleton-control-height-sm, 24px);\n}\n.b-skeleton-button--circle.b-skeleton-button--large {\n  width: var(--b-skeleton-control-height-lg, 40px);\n  min-width: var(--b-skeleton-control-height-lg, 40px);\n}\n\n.b-skeleton-button--square {\n  border-radius: var(--b-skeleton-border-radius-sm, 4px);\n}\n\n.b-skeleton-button--block {\n  display: block;\n  width: 100%;\n}\n</style>\n"],"mappings":""}

package/dist/design-system192.js

@@ -1,31 +1,28 @@
-import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i, renderSlot as a } from "vue";
-//#region src/components/BSkeleton/BSkeletonNode.vue?vue&type=script&setup=true&lang.ts
-var o = /* @__PURE__ */ n({
-	__name: "BSkeletonNode",
-	props: {
-		active: {
-			type: Boolean,
-			default: !1
-		},
-		fullSize: {
-			type: Boolean,
-			default: !1
-		}
-	},
-	setup(n) {
+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-node",
-			{
-				"b-skeleton-node--full-size": n.fullSize,
-				"b-skeleton-element--active": n.active
-			}
+			"b-skeleton-image",
+			{ "b-skeleton-element--active": r.active }
 		]);
-		return (e, n) => (i(), t("div", {
-			class: r(o.value),
+		return (e, r) => (a(), t("div", {
+			class: i(o.value),
 			role: "presentation",
 			"aria-hidden": "true"
-		}, [a(e.$slots, "default")], 2));
+		}, [...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

package/dist/design-system192.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system192.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonNode.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderSlot as _renderSlot, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nimport { computed } from 'vue';\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSkeletonNode',\n  props: {\n    active: { type: Boolean, default: false },\n    fullSize: { type: Boolean, default: false }\n  },\n  setup(__props: any) {\n\n\n\n\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-node',\n  {\n    'b-skeleton-node--full-size': __props.fullSize,\n    'b-skeleton-element--active': __props.active,\n  },\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  }, [\n    _renderSlot(_ctx.$slots, \"default\")\n  ], 2))\n}\n}\n\n})"],"mappings":";;AAMA,IAAA,IAA4B,kBAAiB;CAC3C,QAAQ;CACR,OAAO;EACL,QAAQ;GAAE,MAAM;GAAS,SAAS;GAAO;EACzC,UAAU;GAAE,MAAM;GAAS,SAAS;GAAO;EAC5C;CACD,MAAM,GAAc;EAMtB,IAAM,IAAU,QAAe;GAC7B;GACA;GACA;IACE,8BAA8B,EAAQ;IACtC,8BAA8B,EAAQ;IACvC;GACF,CAAC;AAEF,UAAQ,GAAU,OACR,GAAY,EAAE,EAAoB,OAAO;GAC/C,OAAO,EAAgB,EAAQ,MAAM;GACrC,MAAM;GACN,eAAe;GAChB,EAAE,CACD,EAAY,EAAK,QAAQ,UAAU,CACpC,EAAE,EAAE;;CAIN,CAAA"}
+{"version":3,"file":"design-system192.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":";;;;;;;;;EAQA,IAAM,IAAU,QAAe;GAC7B;GACA;GACA,EAAE,8BAA8B,EAAA,QAAQ;GACzC,CAAC;yBAIA,EAYM,OAAA;GAZA,OAAK,EAAE,EAAA,MAAO;GAAE,MAAK;GAAe,eAAY;mBACpD,EAUM,OAAA;GATJ,OAAM;GACN,SAAQ;GACR,OAAM;GACN,eAAY;GACZ,WAAU;MAEV,EAEE,QAAA,EADA,GAAE,m3BAAi3B,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/design-system194.js

@@ -1,6 +1,6 @@
 import e from "./design-system192.js";
 /* empty css                 */
-//#region src/components/BSkeleton/BSkeletonNode.vue
+//#region src/components/BSkeleton/BSkeletonImage.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system194.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system194.js","names":[],"sources":["../src/components/BSkeleton/BSkeletonNode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst { active = false, fullSize = false } = defineProps<{\n  /** Animated shimmer effect. @default false */\n  active?: boolean;\n  /** Stretch to fill the parent's width and height. @default false */\n  fullSize?: boolean;\n}>();\n\ndefineSlots<{\n  /** Custom content placed inside the placeholder block (e.g., an icon). */\n  default?(): unknown;\n}>();\n\nconst classes = computed(() => [\n  'b-skeleton-element',\n  'b-skeleton-node',\n  {\n    'b-skeleton-node--full-size': fullSize,\n    'b-skeleton-element--active': active,\n  },\n]);\n</script>\n\n<template>\n  <div :class=\"classes\" role=\"presentation\" aria-hidden=\"true\">\n    <slot />\n  </div>\n</template>\n\n<style>\n.b-skeleton-node {\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  color: oklch(75% 0 0);\n}\n\n.b-skeleton-node--full-size {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system194.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":""}

package/dist/design-system195.js

@@ -1,335 +1,36 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, normalizeStyle as c, onBeforeUnmount as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, useAttrs as h, useModel as ee, withModifiers as te } from "vue";
-//#region src/components/BSlider/BSlider.vue?vue&type=script&setup=true&lang.ts
-var ne = [
-	"tabindex",
-	"aria-valuemin",
-	"aria-valuemax",
-	"aria-valuenow",
-	"aria-disabled",
-	"aria-orientation",
-	"aria-label"
-], re = [
-	"tabindex",
-	"aria-valuemin",
-	"aria-valuemax",
-	"aria-valuenow",
-	"aria-disabled",
-	"aria-orientation",
-	"aria-label"
-], g = {
-	key: 0,
-	class: "b-slider__marks"
-}, _ = /* @__PURE__ */ a({
-	inheritAttrs: !1,
-	__name: "BSlider",
-	props: /* @__PURE__ */ o({
-		disabled: {
+import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i } from "vue";
+//#region src/components/BSkeleton/BSkeletonInput.vue?vue&type=script&setup=true&lang.ts
+var a = /* @__PURE__ */ n({
+	__name: "BSkeletonInput",
+	props: {
+		active: {
 			type: Boolean,
 			default: !1
 		},
-		dots: {
+		block: {
 			type: Boolean,
 			default: !1
 		},
-		included: {
-			type: Boolean,
-			default: !0
-		},
-		keyboard: {
-			type: Boolean,
-			default: !0
-		},
-		max: { default: 100 },
-		min: { default: 0 },
-		range: {
-			type: [Boolean, Object],
-			default: !1
-		},
-		reverse: {
-			type: Boolean,
-			default: !1
-		},
-		step: { default: 1 },
-		vertical: {
-			type: Boolean,
-			default: !1
-		},
-		tooltip: { default: () => ({}) },
-		marks: {}
-	}, {
-		modelValue: { default: 0 },
-		modelModifiers: {}
-	}),
-	emits: /* @__PURE__ */ o(["change", "changeComplete"], ["update:modelValue"]),
-	setup(a, { expose: o, emit: _ }) {
-		let v = h(), y = ee(a, "modelValue"), b = _, x = d(null), S = d(null), C = d(null), w = d(!1), T = d(null), E = d({
-			lower: !1,
-			upper: !1
-		}), D = d(null), O = d(0), k = t(() => a.range !== !1), A = t(() => typeof a.range == "object" && a.range.draggableTrack), j = t(() => k.value ? y.value[0] : a.min), M = t(() => k.value ? y.value[1] : y.value);
-		function N(e) {
-			return a.max === a.min ? 0 : (e - a.min) / (a.max - a.min) * 100;
-		}
-		function P(e) {
-			return F(a.min + e / 100 * (a.max - a.min));
-		}
-		function F(e) {
-			if (a.step === null) {
-				if (!a.marks) return I(e);
-				let t = Object.keys(a.marks).map(Number), n = t[0] ?? a.min, r = Math.abs(e - n);
-				for (let i of t) {
-					let t = Math.abs(e - i);
-					t < r && (n = i, r = t);
-				}
-				return I(n);
-			}
-			return I(Math.round((e - a.min) / a.step) * a.step + a.min);
-		}
-		function I(e) {
-			return Math.min(a.max, Math.max(a.min, e));
-		}
-		let L = t(() => N(j.value)), R = t(() => N(M.value)), z = t(() => {
-			let e = k.value ? L.value : 0, t = k.value ? R.value - L.value : R.value;
-			return a.vertical ? a.reverse ? {
-				top: `${100 - e - t}%`,
-				height: `${t}%`
-			} : {
-				bottom: `${100 - e - t}%`,
-				height: `${t}%`
-			} : a.reverse ? {
-				right: `${e}%`,
-				width: `${t}%`
-			} : {
-				left: `${e}%`,
-				width: `${t}%`
-			};
-		}), ie = t(() => {
-			let e = L.value;
-			return a.vertical ? a.reverse ? { top: `${100 - e}%` } : { bottom: `${100 - e}%` } : a.reverse ? { right: `${e}%` } : { left: `${e}%` };
-		}), ae = t(() => {
-			let e = R.value;
-			return a.vertical ? a.reverse ? { top: `${100 - e}%` } : { bottom: `${100 - e}%` } : a.reverse ? { right: `${e}%` } : { left: `${e}%` };
-		}), B = t(() => a.marks ? Object.entries(a.marks).map(([e, t]) => {
-			let n = Number(e);
-			return {
-				value: n,
-				percent: N(n),
-				isActive: a.included && (k.value ? n >= j.value && n <= M.value : n <= M.value),
-				label: typeof t == "string" ? t : t.label,
-				style: typeof t == "object" ? t.style : void 0
-			};
-		}) : []), oe = t(() => {
-			if (!a.dots || a.step === null) return [];
-			let e = [];
-			for (let t = a.min; t <= a.max; t += a.step) {
-				let n = N(t), r = a.included && (k.value ? t >= j.value && t <= M.value : t <= M.value);
-				e.push({
-					value: t,
-					percent: n,
-					isActive: r
-				});
-			}
-			return e;
-		});
-		function V(e) {
-			return a.tooltip.formatter === null ? null : a.tooltip.formatter ? a.tooltip.formatter(e) : String(e);
-		}
-		let H = t(() => V(j.value)), U = t(() => V(M.value)), se = t(() => a.tooltip.formatter === null ? !1 : a.tooltip.open === void 0 ? E.value.lower || C.value === "lower" || C.value === "track" : a.tooltip.open), ce = t(() => a.tooltip.formatter === null ? !1 : a.tooltip.open === void 0 ? E.value.upper || C.value === "upper" || C.value === "track" : a.tooltip.open);
-		function W(e) {
-			if (!x.value) return 0;
-			let t = x.value.getBoundingClientRect(), n, r;
-			if (n = "touches" in e ? a.vertical ? e.touches[0].clientY : e.touches[0].clientX : a.vertical ? e.clientY : e.clientX, a.vertical) {
-				r = t.height;
-				let e = n - t.top;
-				return a.reverse ? e / r * 100 : (r - e) / r * 100;
-			} else {
-				r = t.width;
-				let e = n - t.left;
-				return a.reverse ? (r - e) / r * 100 : e / r * 100;
-			}
-		}
-		function le(e) {
-			if (!k.value) return "upper";
-			let t = Math.abs(e - L.value), n = Math.abs(e - R.value);
-			return t < n ? "lower" : n < t ? "upper" : e < L.value ? "lower" : "upper";
-		}
-		function G(e, t) {
-			if (k.value) {
-				let n = y.value, r;
-				r = e === "lower" ? [Math.min(t, n[1]), n[1]] : [n[0], Math.max(t, n[0])], y.value = r, b("change", r);
-			} else y.value = t, b("change", t);
-		}
-		function ue(e) {
-			if (a.disabled || e.target.closest(".b-slider__handle")) return;
-			let t = W(e), n = P(t), r = le(t);
-			if (A.value && k.value) {
-				let e = L.value, n = R.value;
-				if (t >= e && t <= n) return;
-			}
-			G(r, n), b("changeComplete", (k.value, y.value));
-		}
-		function K(e, t) {
-			a.disabled || (t.preventDefault(), C.value = e, e === "track" && k.value && (D.value = [...y.value], O.value = W(t)), document.addEventListener("mousemove", q), document.addEventListener("mouseup", J), document.addEventListener("touchmove", q), document.addEventListener("touchend", J));
-		}
-		function q(e) {
-			if (!C.value || a.disabled) return;
-			let t = W(e);
-			if (C.value === "track" && D.value) {
-				let e = t - O.value, n = D.value[0], r = D.value[1], i = N(n) + e, o = N(r) + e, s = P(i), c = P(o);
-				s >= a.min && c <= a.max && (y.value = [s, c], b("change", [s, c]));
-				return;
-			}
-			let n = P(t);
-			G(C.value, n);
-		}
-		function J() {
-			C.value && b("changeComplete", (k.value, y.value)), C.value = null, D.value = null, document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", J), document.removeEventListener("touchmove", q), document.removeEventListener("touchend", J);
-		}
-		function Y(e, t) {
-			if (a.disabled || !a.keyboard) return;
-			let n = a.step ?? 1, r = 0;
-			switch (e.key) {
-				case "ArrowRight":
-				case "ArrowUp":
-					r = n;
-					break;
-				case "ArrowLeft":
-				case "ArrowDown":
-					r = -n;
-					break;
-				case "Home":
-					r = a.min - (t === "lower" ? j.value : M.value);
-					break;
-				case "End":
-					r = a.max - (t === "lower" ? j.value : M.value);
-					break;
-				default: return;
+		size: { default: "default" }
+	},
+	setup(n) {
+		let a = e(() => [
+			"b-skeleton-element",
+			"b-skeleton-input",
+			`b-skeleton-input--${n.size}`,
+			{
+				"b-skeleton-input--block": n.block,
+				"b-skeleton-element--active": n.active
 			}
-			e.preventDefault(), G(t, F((t === "lower" ? j.value : M.value) + r)), b("changeComplete", (k.value, y.value));
-		}
-		function X(e) {
-			T.value = e, E.value[e] = !0;
-		}
-		function Z(e) {
-			T.value = null, E.value[e] = !1;
-		}
-		function Q(e) {
-			E.value[e] = !0;
-		}
-		function $(e) {
-			T.value !== e && C.value !== e && (E.value[e] = !1);
-		}
-		function de() {
-			w.value = !0;
-		}
-		function fe() {
-			w.value = !1;
-		}
-		function pe(e) {
-			a.disabled || !A.value || K("track", e);
-		}
-		function me() {
-			(S.value?.querySelector(".b-slider__handle"))?.focus();
-		}
-		function he() {
-			(S.value?.querySelector(".b-slider__handle:focus"))?.blur();
-		}
-		return o({
-			focus: me,
-			blur: he
-		}), l(() => {
-			document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", J), document.removeEventListener("touchmove", q), document.removeEventListener("touchend", J);
-		}), (t, o) => (u(), r("div", {
-			ref_key: "rootRef",
-			ref: S,
-			class: s(["b-slider", [{
-				"b-slider--vertical": a.vertical,
-				"b-slider--disabled": a.disabled,
-				"b-slider--with-marks": !!a.marks,
-				"b-slider--reverse": a.reverse,
-				"b-slider--hovered": w.value
-			}]]),
-			onMouseenter: de,
-			onMouseleave: fe
-		}, [i("div", {
-			ref_key: "railRef",
-			ref: x,
-			class: "b-slider__rail",
-			onMousedown: ue
-		}, [
-			a.included ? (u(), r("div", {
-				key: 0,
-				class: "b-slider__track",
-				style: c(z.value),
-				onMousedown: te(pe, ["stop"])
-			}, null, 36)) : n("", !0),
-			(u(!0), r(e, null, f(oe.value, (e) => (u(), r("span", {
-				key: `dot-${e.value}`,
-				class: s(["b-slider__dot", { "b-slider__dot--active": e.isActive }]),
-				style: c(a.vertical ? a.reverse ? { top: `${100 - e.percent}%` } : { bottom: `${100 - e.percent}%` } : a.reverse ? { right: `${e.percent}%` } : { left: `${e.percent}%` })
-			}, null, 6))), 128)),
-			(u(!0), r(e, null, f(B.value, (e) => (u(), r("span", {
-				key: `mark-dot-${e.value}`,
-				class: s(["b-slider__dot", { "b-slider__dot--active": e.isActive }]),
-				style: c(a.vertical ? a.reverse ? { top: `${100 - e.percent}%` } : { bottom: `${100 - e.percent}%` } : a.reverse ? { right: `${e.percent}%` } : { left: `${e.percent}%` })
-			}, null, 6))), 128)),
-			k.value ? (u(), r("div", {
-				key: 1,
-				class: s(["b-slider__handle", { "b-slider__handle--active": C.value === "lower" || T.value === "lower" }]),
-				style: c(ie.value),
-				role: "slider",
-				tabindex: a.disabled ? -1 : 0,
-				"aria-valuemin": a.min,
-				"aria-valuemax": M.value,
-				"aria-valuenow": j.value,
-				"aria-disabled": a.disabled || void 0,
-				"aria-orientation": a.vertical ? "vertical" : "horizontal",
-				"aria-label": m(v)["aria-label"] ? `${m(v)["aria-label"]} - minimum` : "Minimum",
-				onMousedown: o[0] ||= (e) => K("lower", e),
-				onTouchstart: o[1] ||= (e) => K("lower", e),
-				onKeydown: o[2] ||= (e) => Y(e, "lower"),
-				onFocus: o[3] ||= (e) => X("lower"),
-				onBlur: o[4] ||= (e) => Z("lower"),
-				onMouseenter: o[5] ||= (e) => Q("lower"),
-				onMouseleave: o[6] ||= (e) => $("lower")
-			}, [H.value === null ? n("", !0) : (u(), r("div", {
-				key: 0,
-				class: s(["b-slider__tooltip", { "b-slider__tooltip--visible": se.value }]),
-				role: "tooltip"
-			}, p(H.value), 3))], 46, ne)) : n("", !0),
-			i("div", {
-				class: s(["b-slider__handle", { "b-slider__handle--active": C.value === "upper" || T.value === "upper" }]),
-				style: c(ae.value),
-				role: "slider",
-				tabindex: a.disabled ? -1 : 0,
-				"aria-valuemin": k.value ? j.value : a.min,
-				"aria-valuemax": a.max,
-				"aria-valuenow": M.value,
-				"aria-disabled": a.disabled || void 0,
-				"aria-orientation": a.vertical ? "vertical" : "horizontal",
-				"aria-label": m(v)["aria-label"] || (k.value ? "Maximum" : "Slider"),
-				onMousedown: o[7] ||= (e) => K("upper", e),
-				onTouchstart: o[8] ||= (e) => K("upper", e),
-				onKeydown: o[9] ||= (e) => Y(e, "upper"),
-				onFocus: o[10] ||= (e) => X("upper"),
-				onBlur: o[11] ||= (e) => Z("upper"),
-				onMouseenter: o[12] ||= (e) => Q("upper"),
-				onMouseleave: o[13] ||= (e) => $("upper")
-			}, [U.value === null ? n("", !0) : (u(), r("div", {
-				key: 0,
-				class: s(["b-slider__tooltip", { "b-slider__tooltip--visible": ce.value }]),
-				role: "tooltip"
-			}, p(U.value), 3))], 46, re)
-		], 544), a.marks ? (u(), r("div", g, [(u(!0), r(e, null, f(B.value, (e) => (u(), r("span", {
-			key: `mark-label-${e.value}`,
-			class: s(["b-slider__mark-text", { "b-slider__mark-text--active": e.isActive }]),
-			style: c({
-				...a.vertical ? a.reverse ? { top: `${100 - e.percent}%` } : { bottom: `${100 - e.percent}%` } : a.reverse ? { right: `${e.percent}%` } : { left: `${e.percent}%` },
-				...e.style
-			})
-		}, p(e.label), 7))), 128))])) : n("", !0)], 34));
+		]);
+		return (e, n) => (i(), t("span", {
+			class: r(a.value),
+			role: "presentation",
+			"aria-hidden": "true"
+		}, null, 2));
 	}
 });
 //#endregion
-export { _ as default };
+export { a as default };
 
 //# sourceMappingURL=design-system195.js.map