@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system76.js

@@ -1,32 +1,161 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createTextVNode as r, defineComponent as i, normalizeStyle as a, openBlock as o, renderSlot as s, toDisplayString as c, useSlots as l } from "vue";
-//#region src/components/BDescriptions/BDescriptionsItem.vue?vue&type=script&setup=true&lang.ts
-var u = { class: "b-descriptions-item" }, d = /* @__PURE__ */ i({
-	__name: "BDescriptionsItem",
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, useSlots as h } from "vue";
+//#region src/components/BDescriptions/BDescriptions.vue?vue&type=script&setup=true&lang.ts
+var g = {
+	key: 0,
+	class: "b-descriptions__header"
+}, _ = {
+	key: 0,
+	class: "b-descriptions__title"
+}, v = {
+	key: 1,
+	class: "b-descriptions__extra"
+}, y = { class: "b-descriptions__body" }, b = {
+	key: 0,
+	class: "b-descriptions__table",
+	role: "presentation"
+}, x = ["colspan"], S = { class: "b-descriptions__row" }, C = ["colspan"], w = { class: "b-descriptions__row" }, T = ["colspan"], E = {
+	key: 1,
+	class: "b-descriptions__table",
+	role: "presentation"
+}, D = ["colspan"], O = { class: "b-descriptions__row" }, k = ["colspan"], A = { class: "b-descriptions__row" }, j = ["colspan"], M = /* @__PURE__ */ s({
+	__name: "BDescriptions",
 	props: {
-		label: {},
-		span: { default: 1 },
+		bordered: {
+			type: Boolean,
+			default: !1
+		},
+		colon: {
+			type: Boolean,
+			default: !0
+		},
+		column: { default: 3 },
+		layout: { default: "horizontal" },
+		size: { default: "default" },
+		title: {},
+		extra: {},
+		items: {},
 		labelStyle: {},
 		contentStyle: {}
 	},
-	setup(i, { expose: d }) {
-		let f = l();
-		return d({
-			label: i.label,
-			span: i.span,
-			labelStyle: i.labelStyle,
-			contentStyle: i.contentStyle,
-			slots: f
-		}), (l, d) => (o(), t("div", u, [i.label || l.$slots.label ? (o(), t("span", {
-			key: 0,
-			class: "b-descriptions-item__label",
-			style: a(i.labelStyle)
-		}, [s(l.$slots, "label", {}, () => [r(c(i.label), 1)])], 4)) : e("", !0), n("span", {
-			class: "b-descriptions-item__content",
-			style: a(i.contentStyle)
-		}, [s(l.$slots, "default")], 4)]));
+	setup(s) {
+		let M = h(), N = t(() => !!(s.title || M.title || s.extra || M.extra)), P = t(() => ["b-descriptions", {
+			"b-descriptions--bordered": s.bordered,
+			"b-descriptions--vertical": s.layout === "vertical",
+			"b-descriptions--horizontal": s.layout === "horizontal",
+			"b-descriptions--middle": s.size === "middle",
+			"b-descriptions--small": s.size === "small",
+			"b-descriptions--colon": s.colon
+		}]), F = t(() => {
+			if (s.items && s.items.length > 0) return s.items.map((e) => ({
+				label: e.label,
+				children: e.children,
+				span: e.span ?? 1,
+				labelStyle: e.labelStyle,
+				contentStyle: e.contentStyle
+			}));
+			let t = M.default?.();
+			if (!t) return [];
+			let n = [];
+			function r(t) {
+				for (let i of t) {
+					if (i.type === e) {
+						Array.isArray(i.children) && r(i.children);
+						continue;
+					}
+					let t = i.props || {}, a = i.children, o = a?.label?.(), s = a?.default?.();
+					n.push({
+						label: t.label,
+						span: t.span ?? 1,
+						labelStyle: t.labelStyle,
+						contentStyle: t.contentStyle,
+						labelSlot: o ? Array.isArray(o) ? o : [o] : void 0,
+						contentSlot: s ? Array.isArray(s) ? s : [s] : void 0
+					});
+				}
+			}
+			return r(t), n;
+		}), I = t(() => {
+			let e = [], t = { items: [] }, n = 0;
+			for (let r = 0; r < F.value.length; r++) {
+				let i = F.value[r], a = r === F.value.length - 1, o = Math.min(i.span, s.column);
+				if (n + o > s.column && t.items.length > 0) {
+					let r = t.items[t.items.length - 1];
+					r.effectiveSpan += s.column - n, e.push(t), t = { items: [] }, n = 0;
+				}
+				a && (o = s.column - n), t.items.push({
+					...i,
+					effectiveSpan: o
+				}), n += o, n >= s.column && (e.push(t), t = { items: [] }, n = 0);
+			}
+			if (t.items.length > 0) {
+				let r = t.items[t.items.length - 1];
+				r.effectiveSpan += s.column - n, e.push(t);
+			}
+			return e;
+		});
+		function L(e) {
+			if (!(!s.labelStyle && !e.labelStyle)) return {
+				...s.labelStyle,
+				...e.labelStyle
+			};
+		}
+		function R(e) {
+			if (!(!s.contentStyle && !e.contentStyle)) return {
+				...s.contentStyle,
+				...e.contentStyle
+			};
+		}
+		return (t, h) => (u(), i("div", { class: c(P.value) }, [N.value ? (u(), i("div", g, [s.title || t.$slots.title ? (u(), i("div", _, [f(t.$slots, "title", {}, () => [o(m(s.title), 1)])])) : r("", !0), s.extra || t.$slots.extra ? (u(), i("div", v, [f(t.$slots, "extra", {}, () => [o(m(s.extra), 1)])])) : r("", !0)])) : r("", !0), a("div", y, [s.bordered ? (u(), i("table", b, [a("tbody", null, [s.layout === "horizontal" ? (u(!0), i(e, { key: 0 }, d(I.value, (t, r) => (u(), i("tr", {
+			key: r,
+			class: "b-descriptions__row"
+		}, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i(e, { key: r }, [a("th", {
+			class: "b-descriptions__item-label b-descriptions__item-label--bordered",
+			style: l(L(t))
+		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 4), a("td", {
+			class: "b-descriptions__item-content b-descriptions__item-content--bordered",
+			colspan: t.effectiveSpan * 2 - 1,
+			style: l(R(t))
+		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 12, x)], 64))), 128))]))), 128)) : (u(!0), i(e, { key: 1 }, d(I.value, (t, r) => (u(), i(e, { key: r }, [a("tr", S, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("th", {
+			key: "label-" + r,
+			class: "b-descriptions__item-label b-descriptions__item-label--bordered",
+			colspan: t.effectiveSpan,
+			style: l(L(t))
+		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 12, C))), 128))]), a("tr", w, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
+			key: "content-" + r,
+			class: "b-descriptions__item-content b-descriptions__item-content--bordered",
+			colspan: t.effectiveSpan,
+			style: l(R(t))
+		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 12, T))), 128))])], 64))), 128))])])) : (u(), i("table", E, [a("tbody", null, [s.layout === "horizontal" ? (u(!0), i(e, { key: 0 }, d(I.value, (t, r) => (u(), i("tr", {
+			key: r,
+			class: "b-descriptions__row"
+		}, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
+			key: r,
+			class: "b-descriptions__item",
+			colspan: t.effectiveSpan
+		}, [a("span", {
+			class: "b-descriptions__item-label",
+			style: l(L(t))
+		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 4), a("span", {
+			class: "b-descriptions__item-content",
+			style: l(R(t))
+		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 4)], 8, D))), 128))]))), 128)) : (u(!0), i(e, { key: 1 }, d(I.value, (t, r) => (u(), i(e, { key: r }, [a("tr", O, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
+			key: "label-" + r,
+			class: "b-descriptions__item",
+			colspan: t.effectiveSpan
+		}, [a("span", {
+			class: "b-descriptions__item-label",
+			style: l(L(t))
+		}, [t.labelSlot && t.labelSlot.length ? (u(), n(p(() => t.labelSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.label), 1)], 64))], 4)], 8, k))), 128))]), a("tr", A, [(u(!0), i(e, null, d(t.items, (t, r) => (u(), i("td", {
+			key: "content-" + r,
+			class: "b-descriptions__item",
+			colspan: t.effectiveSpan
+		}, [a("span", {
+			class: "b-descriptions__item-content",
+			style: l(R(t))
+		}, [t.contentSlot && t.contentSlot.length ? (u(), n(p(() => t.contentSlot), { key: 0 })) : (u(), i(e, { key: 1 }, [o(m(t.children), 1)], 64))], 4)], 8, j))), 128))])], 64))), 128))])]))])], 2));
 	}
 });
 //#endregion
-export { d as default };
+export { M as default };
 
 //# sourceMappingURL=design-system76.js.map

package/dist/design-system76.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system76.js","names":["$slots"],"sources":["../src/components/BDescriptions/BDescriptionsItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CSSProperties } from 'vue';\nimport { useSlots } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  label,\n  span = 1,\n  labelStyle,\n  contentStyle,\n} = defineProps<{\n  /** Label text displayed for this item. Can be overridden by the `label` slot. */\n  label?: string;\n  /** Number of columns this item spans. @default 1 */\n  span?: number;\n  /** Inline style applied to the label cell. */\n  labelStyle?: CSSProperties;\n  /** Inline style applied to the content cell. */\n  contentStyle?: CSSProperties;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Main content of the description item */\n  default?: (props: Record<string, never>) => unknown;\n  /** Custom label content. Overrides the `label` prop */\n  label?: (props: Record<string, never>) => unknown;\n}>();\n\nconst slots = useSlots();\n\n// Expose props for parent to read\ndefineExpose({ label, span, labelStyle, contentStyle, slots });\n</script>\n\n<template>\n  <!--\n    BDescriptionsItem is a data-only component.\n    It does not render its own markup; BDescriptions reads its props/slots\n    and renders them in a table/list structure.\n    This template is used as a fallback if the item is rendered standalone.\n  -->\n  <div class=\"b-descriptions-item\">\n    <span v-if=\"label || $slots.label\" class=\"b-descriptions-item__label\" :style=\"labelStyle\">\n      <slot name=\"label\">{{ label }}</slot>\n    </span>\n    <span class=\"b-descriptions-item__content\" :style=\"contentStyle\">\n      <slot />\n    </span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAiCA,IAAM,IAAQ,GAAU;SAGxB,EAAa;GAAE,OAAI,EAAA;GAAG,MAAG,EAAA;GAAG,YAAS,EAAA;GAAG,cAAW,EAAA;GAAG;GAAO,CAAC,kBAU5D,EAOM,OAPN,GAOM,CANQ,EAAA,SAASA,EAAAA,OAAO,SAAA,GAAA,EAA5B,EAEO,QAAA;;GAF4B,OAAM;GAA8B,OAAK,EAAE,EAAA,WAAU;MACtF,EAAqC,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAE7B,EAEO,QAAA;GAFD,OAAM;GAAgC,OAAK,EAAE,EAAA,aAAY;MAC7D,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"design-system76.js","names":["$slots"],"sources":["../src/components/BDescriptions/BDescriptions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CSSProperties, VNode } from 'vue';\nimport { computed, Fragment, useSlots } from 'vue';\n\nimport type { BDescriptionsItem } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  bordered = false,\n  colon = true,\n  column = 3,\n  layout = 'horizontal',\n  size = 'default',\n  title,\n  extra,\n  items,\n  labelStyle,\n  contentStyle,\n} = defineProps<{\n  /** Whether to show border around the list. @default false */\n  bordered?: boolean;\n  /** Whether to show colon after the label. @default true */\n  colon?: boolean;\n  /** Number of columns per row. @default 3 */\n  column?: number;\n  /** Layout direction of description items. @default 'horizontal' */\n  layout?: 'horizontal' | 'vertical';\n  /** Size of the component. @default 'default' */\n  size?: 'default' | 'middle' | 'small';\n  /** Title of the descriptions block */\n  title?: string;\n  /** Extra content in the top-right corner */\n  extra?: string;\n  /** Description items data (alternative to slot-based usage) */\n  items?: BDescriptionsItem[];\n  /** Default style for all labels */\n  labelStyle?: CSSProperties;\n  /** Default style for all content cells */\n  contentStyle?: CSSProperties;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** BDescriptionsItem children */\n  default?: (props: Record<string, never>) => unknown;\n  /** Title area. Overrides the `title` prop */\n  title?: (props: Record<string, never>) => unknown;\n  /** Extra content area. Overrides the `extra` prop */\n  extra?: (props: Record<string, never>) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst hasHeader = computed(() => {\n  return !!(title || slots.title || extra || slots.extra);\n});\n\nconst rootClasses = computed(() => [\n  'b-descriptions',\n  {\n    'b-descriptions--bordered': bordered,\n    'b-descriptions--vertical': layout === 'vertical',\n    'b-descriptions--horizontal': layout === 'horizontal',\n    'b-descriptions--middle': size === 'middle',\n    'b-descriptions--small': size === 'small',\n    'b-descriptions--colon': colon,\n  },\n]);\n\n/**\n * Collect items from the `items` prop or from slot children (BDescriptionsItem VNodes).\n * Each resolved item has: label, children, span, labelStyle, contentStyle, labelSlot, contentSlot.\n */\ninterface ResolvedItem {\n  label?: string;\n  children?: string;\n  span: number;\n  labelStyle?: CSSProperties;\n  contentStyle?: CSSProperties;\n  /** VNode array for the label slot (from BDescriptionsItem slot usage) */\n  labelSlot?: VNode[];\n  /** VNode array for the content slot (from BDescriptionsItem default slot) */\n  contentSlot?: VNode[];\n}\n\nconst resolvedItems = computed<ResolvedItem[]>(() => {\n  // If items prop is provided, use it directly\n  if (items && items.length > 0) {\n    return items.map((item) => ({\n      label: item.label,\n      children: item.children,\n      span: item.span ?? 1,\n      labelStyle: item.labelStyle,\n      contentStyle: item.contentStyle,\n    }));\n  }\n\n  // Otherwise, extract from default slot VNodes (BDescriptionsItem instances)\n  const defaultSlot = slots.default?.();\n  if (!defaultSlot) return [];\n\n  const result: ResolvedItem[] = [];\n\n  function extractItems(vnodes: VNode[]) {\n    for (const vnode of vnodes) {\n      // Handle fragments (v-for, template wrappers)\n      if (vnode.type === Fragment) {\n        if (Array.isArray(vnode.children)) {\n          extractItems(vnode.children as VNode[]);\n        }\n        continue;\n      }\n\n      const props = (vnode.props || {}) as Record<string, unknown>;\n      const children = vnode.children as Record<\n        string,\n        (...args: unknown[]) => VNode | VNode[]\n      > | null;\n\n      const rawLabel = children?.label?.();\n      const rawContent = children?.default?.();\n\n      result.push({\n        label: props.label as string | undefined,\n        span: (props.span as number) ?? 1,\n        labelStyle: props.labelStyle as CSSProperties | undefined,\n        contentStyle: props.contentStyle as CSSProperties | undefined,\n        labelSlot: rawLabel ? (Array.isArray(rawLabel) ? rawLabel : [rawLabel]) : undefined,\n        contentSlot: rawContent\n          ? Array.isArray(rawContent)\n            ? rawContent\n            : [rawContent]\n          : undefined,\n      });\n    }\n  }\n\n  extractItems(defaultSlot);\n  return result;\n});\n\n/**\n * Organize items into rows based on the column count.\n * The last item in each row gets its span extended to fill the remaining columns.\n */\ninterface RowData {\n  items: Array<ResolvedItem & { effectiveSpan: number }>;\n}\n\nconst rows = computed<RowData[]>(() => {\n  const result: RowData[] = [];\n  let currentRow: RowData = { items: [] };\n  let colsUsed = 0;\n\n  for (let i = 0; i < resolvedItems.value.length; i++) {\n    const item = resolvedItems.value[i];\n    const isLast = i === resolvedItems.value.length - 1;\n    let span = Math.min(item.span, column);\n\n    // If this item would exceed the row, start a new row\n    if (colsUsed + span > column) {\n      if (currentRow.items.length > 0) {\n        // Fill remaining columns of the previous row\n        const lastInRow = currentRow.items[currentRow.items.length - 1];\n        lastInRow.effectiveSpan += column - colsUsed;\n        result.push(currentRow);\n        currentRow = { items: [] };\n        colsUsed = 0;\n      }\n    }\n\n    // If this is the last item, it takes up remaining space in the row\n    if (isLast) {\n      span = column - colsUsed;\n    }\n\n    currentRow.items.push({ ...item, effectiveSpan: span });\n    colsUsed += span;\n\n    if (colsUsed >= column) {\n      result.push(currentRow);\n      currentRow = { items: [] };\n      colsUsed = 0;\n    }\n  }\n\n  // Push any remaining items\n  if (currentRow.items.length > 0) {\n    const lastInRow = currentRow.items[currentRow.items.length - 1];\n    lastInRow.effectiveSpan += column - colsUsed;\n    result.push(currentRow);\n  }\n\n  return result;\n});\n\n/**\n * Merge global label/content styles with per-item styles.\n * Item-level styles override global styles.\n */\nfunction mergedLabelStyle(item: ResolvedItem): CSSProperties | undefined {\n  if (!labelStyle && !item.labelStyle) return undefined;\n  return { ...labelStyle, ...item.labelStyle };\n}\n\nfunction mergedContentStyle(item: ResolvedItem): CSSProperties | undefined {\n  if (!contentStyle && !item.contentStyle) return undefined;\n  return { ...contentStyle, ...item.contentStyle };\n}\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <!-- Header -->\n    <div v-if=\"hasHeader\" class=\"b-descriptions__header\">\n      <div v-if=\"title || $slots.title\" class=\"b-descriptions__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"extra || $slots.extra\" class=\"b-descriptions__extra\">\n        <slot name=\"extra\">{{ extra }}</slot>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"b-descriptions__body\">\n      <!-- Bordered: use a real <table> -->\n      <table v-if=\"bordered\" class=\"b-descriptions__table\" role=\"presentation\">\n        <tbody>\n          <!-- Horizontal layout with border -->\n          <template v-if=\"layout === 'horizontal'\">\n            <tr v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\" class=\"b-descriptions__row\">\n              <template v-for=\"(item, itemIndex) in row.items\" :key=\"itemIndex\">\n                <th\n                  class=\"b-descriptions__item-label b-descriptions__item-label--bordered\"\n                  :style=\"mergedLabelStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </th>\n                <td\n                  class=\"b-descriptions__item-content b-descriptions__item-content--bordered\"\n                  :colspan=\"item.effectiveSpan * 2 - 1\"\n                  :style=\"mergedContentStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </td>\n              </template>\n            </tr>\n          </template>\n\n          <!-- Vertical layout with border -->\n          <template v-else>\n            <template v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\">\n              <tr class=\"b-descriptions__row\">\n                <th\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'label-' + itemIndex\"\n                  class=\"b-descriptions__item-label b-descriptions__item-label--bordered\"\n                  :colspan=\"item.effectiveSpan\"\n                  :style=\"mergedLabelStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </th>\n              </tr>\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'content-' + itemIndex\"\n                  class=\"b-descriptions__item-content b-descriptions__item-content--bordered\"\n                  :colspan=\"item.effectiveSpan\"\n                  :style=\"mergedContentStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </td>\n              </tr>\n            </template>\n          </template>\n        </tbody>\n      </table>\n\n      <!-- Non-bordered: use a description list -->\n      <table v-else class=\"b-descriptions__table\" role=\"presentation\">\n        <tbody>\n          <!-- Horizontal layout (default) -->\n          <template v-if=\"layout === 'horizontal'\">\n            <tr v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\" class=\"b-descriptions__row\">\n              <td\n                v-for=\"(item, itemIndex) in row.items\"\n                :key=\"itemIndex\"\n                class=\"b-descriptions__item\"\n                :colspan=\"item.effectiveSpan\"\n              >\n                <span class=\"b-descriptions__item-label\" :style=\"mergedLabelStyle(item)\">\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </span>\n                <span class=\"b-descriptions__item-content\" :style=\"mergedContentStyle(item)\">\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </span>\n              </td>\n            </tr>\n          </template>\n\n          <!-- Vertical layout -->\n          <template v-else>\n            <template v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\">\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'label-' + itemIndex\"\n                  class=\"b-descriptions__item\"\n                  :colspan=\"item.effectiveSpan\"\n                >\n                  <span class=\"b-descriptions__item-label\" :style=\"mergedLabelStyle(item)\">\n                    <component\n                      v-if=\"item.labelSlot && item.labelSlot.length\"\n                      :is=\"() => item.labelSlot\"\n                    />\n                    <template v-else>{{ item.label }}</template>\n                  </span>\n                </td>\n              </tr>\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'content-' + itemIndex\"\n                  class=\"b-descriptions__item\"\n                  :colspan=\"item.effectiveSpan\"\n                >\n                  <span class=\"b-descriptions__item-content\" :style=\"mergedContentStyle(item)\">\n                    <component\n                      v-if=\"item.contentSlot && item.contentSlot.length\"\n                      :is=\"() => item.contentSlot\"\n                    />\n                    <template v-else>{{ item.children }}</template>\n                  </span>\n                </td>\n              </tr>\n            </template>\n          </template>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BDescriptions - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-descriptions {\n  /* Surface */\n  --b-descriptions-bg: oklch(100% 0 0);\n  --b-descriptions-color: oklch(20% 0.02 260);\n  --b-descriptions-border-color: oklch(88% 0.01 260);\n  --b-descriptions-border-radius: 8px;\n  --b-descriptions-transition-duration: 200ms;\n\n  /* Title */\n  --b-descriptions-title-color: oklch(20% 0.02 260);\n  --b-descriptions-title-font-size: 16px;\n  --b-descriptions-title-font-weight: 600;\n  --b-descriptions-title-margin-bottom: 20px;\n\n  /* Extra */\n  --b-descriptions-extra-color: oklch(45% 0.02 260);\n  --b-descriptions-extra-font-size: 14px;\n\n  /* Label */\n  --b-descriptions-label-color: oklch(40% 0.02 260);\n  --b-descriptions-label-bg: oklch(97% 0.005 260);\n  --b-descriptions-label-font-weight: 400;\n\n  /* Content */\n  --b-descriptions-content-color: oklch(20% 0.02 260);\n\n  /* Item spacing */\n  --b-descriptions-item-padding-bottom: 16px;\n  --b-descriptions-item-padding-end: 16px;\n\n  /* Colon */\n  --b-descriptions-colon-margin-left: 2px;\n  --b-descriptions-colon-margin-right: 8px;\n\n  /* Bordered cell padding */\n  --b-descriptions-cell-padding: 16px 24px;\n  --b-descriptions-cell-padding-middle: 12px 20px;\n  --b-descriptions-cell-padding-small: 8px 16px;\n\n  /* Layout */\n  color: var(--b-descriptions-color);\n  font-size: 14px;\n  line-height: 1.5715;\n  box-sizing: border-box;\n}\n\n/* ── Header ── */\n.b-descriptions__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--b-descriptions-title-margin-bottom);\n  gap: 16px;\n}\n\n.b-descriptions__title {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--b-descriptions-title-color);\n  font-size: var(--b-descriptions-title-font-size);\n  font-weight: var(--b-descriptions-title-font-weight);\n  line-height: 1.5;\n}\n\n.b-descriptions__extra {\n  flex: none;\n  color: var(--b-descriptions-extra-color);\n  font-size: var(--b-descriptions-extra-font-size);\n}\n\n/* ── Body ── */\n.b-descriptions__body {\n  width: 100%;\n  overflow: hidden;\n}\n\n/* ── Table ── */\n.b-descriptions__table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n}\n\n/* ── Bordered table ── */\n.b-descriptions--bordered .b-descriptions__table {\n  border: 1px solid var(--b-descriptions-border-color);\n  border-radius: var(--b-descriptions-border-radius);\n  overflow: hidden;\n}\n\n.b-descriptions--bordered .b-descriptions__row > th,\n.b-descriptions--bordered .b-descriptions__row > td {\n  border-inline-end: 1px solid var(--b-descriptions-border-color);\n  border-bottom: 1px solid var(--b-descriptions-border-color);\n}\n\n.b-descriptions--bordered .b-descriptions__row > th:last-child,\n.b-descriptions--bordered .b-descriptions__row > td:last-child {\n  border-inline-end: none;\n}\n\n.b-descriptions--bordered .b-descriptions__row:last-child > th,\n.b-descriptions--bordered .b-descriptions__row:last-child > td {\n  border-bottom: none;\n}\n\n.b-descriptions--bordered .b-descriptions__item-label--bordered {\n  padding: var(--b-descriptions-cell-padding);\n  background: var(--b-descriptions-label-bg);\n  color: var(--b-descriptions-label-color);\n  font-weight: var(--b-descriptions-label-font-weight);\n  white-space: nowrap;\n}\n\n.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding);\n  color: var(--b-descriptions-content-color);\n}\n\n/* ── Non-bordered items ── */\n.b-descriptions__item {\n  padding-bottom: var(--b-descriptions-item-padding-bottom);\n  vertical-align: top;\n}\n\n.b-descriptions__item .b-descriptions__item-label {\n  color: var(--b-descriptions-label-color);\n  font-weight: var(--b-descriptions-label-font-weight);\n  display: inline-block;\n}\n\n.b-descriptions__item .b-descriptions__item-content {\n  color: var(--b-descriptions-content-color);\n  display: inline-block;\n}\n\n/* ── Colon ── */\n.b-descriptions--colon:not(.b-descriptions--vertical)\n  .b-descriptions__item\n  .b-descriptions__item-label::after {\n  content: ':';\n  position: relative;\n  margin-inline-start: var(--b-descriptions-colon-margin-left);\n  margin-inline-end: var(--b-descriptions-colon-margin-right);\n}\n\n.b-descriptions--colon.b-descriptions--bordered .b-descriptions__item-label--bordered::after {\n  content: none;\n}\n\n/* ── Vertical layout ── */\n.b-descriptions--vertical .b-descriptions__item .b-descriptions__item-label {\n  display: block;\n  padding-bottom: 4px;\n}\n\n.b-descriptions--vertical .b-descriptions__item .b-descriptions__item-content {\n  display: block;\n}\n\n/* ── Size: middle ── */\n.b-descriptions--middle .b-descriptions__item {\n  padding-bottom: 12px;\n}\n\n.b-descriptions--middle.b-descriptions--bordered .b-descriptions__item-label--bordered,\n.b-descriptions--middle.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding-middle);\n}\n\n/* ── Size: small ── */\n.b-descriptions--small .b-descriptions__item {\n  padding-bottom: 8px;\n}\n\n.b-descriptions--small.b-descriptions--bordered .b-descriptions__item-label--bordered,\n.b-descriptions--small.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding-small);\n}\n\n.b-descriptions--small .b-descriptions__title {\n  font-size: 14px;\n}\n\n.b-descriptions--middle .b-descriptions__title {\n  font-size: 15px;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-descriptions {\n  --b-descriptions-bg: oklch(20% 0.02 260);\n  --b-descriptions-color: oklch(88% 0.01 260);\n  --b-descriptions-border-color: oklch(35% 0.02 260);\n  --b-descriptions-title-color: oklch(92% 0.01 260);\n  --b-descriptions-extra-color: oklch(65% 0.01 260);\n  --b-descriptions-label-color: oklch(65% 0.01 260);\n  --b-descriptions-label-bg: oklch(25% 0.02 260);\n  --b-descriptions-content-color: oklch(88% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-descriptions {\n    --b-descriptions-bg: oklch(20% 0.02 260);\n    --b-descriptions-color: oklch(88% 0.01 260);\n    --b-descriptions-border-color: oklch(35% 0.02 260);\n    --b-descriptions-title-color: oklch(92% 0.01 260);\n    --b-descriptions-extra-color: oklch(65% 0.01 260);\n    --b-descriptions-label-color: oklch(65% 0.01 260);\n    --b-descriptions-label-bg: oklch(25% 0.02 260);\n    --b-descriptions-content-color: oklch(88% 0.01 260);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-descriptions {\n    --b-descriptions-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system78.js

@@ -1,52 +1,8 @@
-import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, useSlots as s } from "vue";
-//#region src/components/BDivider/BDivider.vue?vue&type=script&setup=true&lang.ts
-var c = { class: "b-divider__content" }, l = /* @__PURE__ */ r({
-	__name: "BDivider",
-	props: {
-		orientation: { default: "horizontal" },
-		variant: { default: "solid" },
-		dashed: {
-			type: Boolean,
-			default: !1
-		},
-		plain: {
-			type: Boolean,
-			default: !0
-		},
-		size: { default: "large" },
-		titlePlacement: { default: "center" }
-	},
-	setup(r) {
-		let l = s(), u = e(() => r.orientation === "vertical"), d = e(() => r.orientation === "horizontal"), f = e(() => !!l.default), p = e(() => r.dashed && r.variant === "solid" ? "dashed" : r.variant), m = e(() => [
-			"b-divider",
-			`b-divider--${r.orientation}`,
-			`b-divider--${p.value}`,
-			`b-divider--size-${r.size}`,
-			{
-				"b-divider--with-text": f.value && d.value,
-				[`b-divider--text-${r.titlePlacement}`]: f.value && d.value,
-				"b-divider--plain": r.plain
-			}
-		]);
-		return (e, r) => u.value ? (a(), t("span", {
-			key: 0,
-			class: i(m.value),
-			role: "separator",
-			"aria-orientation": "vertical"
-		}, null, 2)) : d.value && !f.value ? (a(), t("div", {
-			key: 1,
-			class: i(m.value),
-			role: "separator",
-			"aria-orientation": "horizontal"
-		}, null, 2)) : (a(), t("div", {
-			key: 2,
-			class: i(m.value),
-			role: "separator",
-			"aria-orientation": "horizontal"
-		}, [n("span", c, [o(e.$slots, "default")])], 2));
-	}
-});
+import e from "./design-system76.js";
+/* empty css                */
+//#region src/components/BDescriptions/BDescriptions.vue
+var t = e;
 //#endregion
-export { l as default };
+export { t as default };
 
 //# sourceMappingURL=design-system78.js.map

package/dist/design-system78.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system78.js","names":[],"sources":["../src/components/BDivider/BDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type {\n  BDividerOrientation,\n  BDividerSize,\n  BDividerTitlePlacement,\n  BDividerVariant,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  orientation = 'horizontal',\n  variant = 'solid',\n  dashed = false,\n  plain = true,\n  size = 'large',\n  titlePlacement = 'center',\n} = defineProps<{\n  /**\n   * Line direction.\n   * - `'horizontal'` - a full-width horizontal rule (default)\n   * - `'vertical'`   - an inline vertical separator\n   * @default 'horizontal'\n   */\n  orientation?: BDividerOrientation;\n  /**\n   * Line style.\n   * - `'solid'`  - continuous line (default)\n   * - `'dashed'` - dashed line\n   * - `'dotted'` - dotted line\n   * @default 'solid'\n   */\n  variant?: BDividerVariant;\n  /**\n   * Shorthand for `variant=\"dashed\"`. Overridden when `variant` is also set.\n   * Kept for AntD API compatibility.\n   * @default false\n   * @deprecated Prefer `variant` prop\n   */\n  dashed?: boolean;\n  /**\n   * Render the text in plain (normal weight) style rather than bold.\n   * Only meaningful for horizontal dividers with content.\n   * @default true\n   */\n  plain?: boolean;\n  /**\n   * Vertical spacing around horizontal dividers (ignored for vertical orientation).\n   * - `'small'`  - tighter margin\n   * - `'medium'` - medium margin\n   * - `'large'`  - standard Ant Design margin (default)\n   * @default 'large'\n   */\n  size?: BDividerSize;\n  /**\n   * Horizontal position of the title text inside a horizontal divider.\n   * - `'start'`  - align text to the leading edge\n   * - `'center'` - centre the text (default)\n   * - `'end'`    - align text to the trailing edge\n   * @default 'center'\n   */\n  titlePlacement?: BDividerTitlePlacement;\n}>();\n\nconst slots = defineSlots<{\n  /** Optional title or content placed inside the divider line. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst isVertical = computed(() => orientation === 'vertical');\nconst isHorizontal = computed(() => orientation === 'horizontal');\n\n/** Whether there is slot content to render. */\nconst hasContent = computed(() => Boolean(slots.default));\n\n/**\n * Resolve the effective line style.\n * `dashed` prop is a legacy alias for `variant=\"dashed\"`.\n */\nconst effectiveVariant = computed<BDividerVariant>(() => {\n  if (dashed && variant === 'solid') return 'dashed';\n  return variant;\n});\n\nconst rootClass = computed(() => [\n  'b-divider',\n  `b-divider--${orientation}`,\n  `b-divider--${effectiveVariant.value}`,\n  `b-divider--size-${size}`,\n  {\n    'b-divider--with-text': hasContent.value && isHorizontal.value,\n    [`b-divider--text-${titlePlacement}`]: hasContent.value && isHorizontal.value,\n    'b-divider--plain': plain,\n  },\n]);\n</script>\n\n<template>\n  <!--\n    Vertical divider: a presentational inline separator.\n    role=\"separator\" with aria-orientation covers both horizontal and vertical.\n  -->\n  <span v-if=\"isVertical\" :class=\"rootClass\" role=\"separator\" aria-orientation=\"vertical\" />\n\n  <!--\n    Horizontal divider WITHOUT content.\n    <div role=\"separator\"> is used instead of <hr> because axe-core evaluates\n    <hr> (which carries implicit role=\"separator\") for text-colour contrast by\n    reading its CSS `color` property. A <div role=\"separator\"> with no text\n    content is exempt from that check (WCAG SC 1.4.3 applies only to text).\n  -->\n  <div\n    v-else-if=\"isHorizontal && !hasContent\"\n    :class=\"rootClass\"\n    role=\"separator\"\n    aria-orientation=\"horizontal\"\n  />\n\n  <!--\n    Horizontal divider WITH content: <div role=\"separator\"> wrapping the text.\n    <hr> cannot contain children, so we fall back to a div.\n  -->\n  <div v-else :class=\"rootClass\" role=\"separator\" aria-orientation=\"horizontal\">\n    <span class=\"b-divider__content\">\n      <slot />\n    </span>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (design tokens)\n   Scoped to .b-divider — never on :root\n   ──────────────────────────────────────────── */\n.b-divider {\n  /* AntD token: textPaddingInline → horizontal padding around inner text */\n  --b-divider-text-padding-inline: 1em;\n\n  /* AntD token: orientationMargin → fraction of width from the near edge for start/end text */\n  --b-divider-orientation-margin: 0.05;\n\n  /* AntD token: verticalMarginInline → horizontal margin on vertical dividers */\n  --b-divider-vertical-margin-inline: 8px;\n\n  /* Colour */\n  --b-divider-color: oklch(88% 0.01 264); /* neutral border */\n  --b-divider-text-color: oklch(32% 0.02 264);\n\n  /* Typography */\n  --b-divider-font-size: 1rem;\n  --b-divider-font-weight-text: 500; /* \"with-text\" non-plain heading weight */\n\n  /* Size (margin-block for horizontal) */\n  --b-divider-margin-block-large: 1.5rem; /* size=large  (AntD default) */\n  --b-divider-margin-block-medium: 0.75rem; /* size=medium */\n  --b-divider-margin-block-small: 0.25rem; /* size=small  */\n\n  /* Line geometry */\n  --b-divider-line-width: 1px;\n}\n\n/* ── Dark mode ───────────────────────────────────────────────────────────\n   Use only the attribute selector, consistent with every other component\n   in this system (BAlert, BCard, etc.). The @media (prefers-color-scheme)\n   query is deliberately omitted: Storybook controls the theme by toggling\n   [data-prefers-color='dark'] on <html>. A media-query override would fire\n   based on the OS/test-runner's colour scheme regardless of the canvas\n   setting, producing light text (#c7cedb) on a white canvas — failing\n   WCAG 1.4.3 contrast in automated a11y checks.\n   ──────────────────────────────────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-divider {\n  --b-divider-color: oklch(35% 0.02 264);\n  --b-divider-text-color: oklch(85% 0.02 264);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-divider {\n    --b-divider-color: oklch(35% 0.02 264);\n    --b-divider-text-color: oklch(85% 0.02 264);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Horizontal — <div role=separator> (no text) or <div role=separator> (with text)\n   ───────────────────────────────────────────── */\n.b-divider--horizontal {\n  display: block;\n  clear: both;\n  width: 100%;\n  margin-block: var(--b-divider-margin-block-large);\n  border: none;\n  border-block-start: var(--b-divider-line-width) var(--b-divider-color);\n  /* default style is overridden by variant classes below */\n  border-block-start-style: solid;\n  box-sizing: border-box;\n}\n\n/* Size variants (horizontal only) */\n.b-divider--horizontal.b-divider--size-small {\n  margin-block: var(--b-divider-margin-block-small);\n}\n.b-divider--horizontal.b-divider--size-medium {\n  margin-block: var(--b-divider-margin-block-medium);\n}\n.b-divider--horizontal.b-divider--size-large {\n  margin-block: var(--b-divider-margin-block-large);\n}\n\n/* ─────────────────────────────────────────────\n   Horizontal WITH text\n   ───────────────────────────────────────────── */\n.b-divider--with-text {\n  display: flex;\n  align-items: center;\n  border-block-start-style: none; /* lines rendered via ::before / ::after */\n  white-space: nowrap;\n  font-size: var(--b-divider-font-size);\n  color: var(--b-divider-text-color);\n  font-weight: var(--b-divider-font-weight-text);\n}\n\n/* Plain text: normal weight */\n.b-divider--with-text.b-divider--plain {\n  font-weight: normal;\n}\n\n/* Lines flanking the text */\n.b-divider--with-text::before,\n.b-divider--with-text::after {\n  content: '';\n  flex: 1;\n  border-block-start: var(--b-divider-line-width) solid var(--b-divider-color);\n}\n\n/* variant overrides for ::before / ::after */\n.b-divider--dashed.b-divider--with-text::before,\n.b-divider--dashed.b-divider--with-text::after {\n  border-block-start-style: dashed;\n}\n.b-divider--dotted.b-divider--with-text::before,\n.b-divider--dotted.b-divider--with-text::after {\n  border-block-start-style: dotted;\n}\n\n/* Text placement — start: push text to left edge */\n.b-divider--text-start::before {\n  /* orientationMargin is a unitless fraction (0.05 = 5% of width) */\n  flex: calc(var(--b-divider-orientation-margin) * 1);\n  min-width: 0;\n}\n.b-divider--text-start::after {\n  flex: 1;\n}\n\n/* Text placement — end: push text to right edge */\n.b-divider--text-end::after {\n  flex: calc(var(--b-divider-orientation-margin) * 1);\n  min-width: 0;\n}\n.b-divider--text-end::before {\n  flex: 1;\n}\n\n/* Text placement — center (default): equal halves */\n.b-divider--text-center::before,\n.b-divider--text-center::after {\n  flex: 1;\n}\n\n.b-divider__content {\n  padding-inline: var(--b-divider-text-padding-inline);\n  /* prevent the text itself from shrinking below its natural width */\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Line-style variants (horizontal no-text)\n   ───────────────────────────────────────────── */\n.b-divider--horizontal:not(.b-divider--with-text).b-divider--dashed {\n  border-block-start-style: dashed;\n}\n.b-divider--horizontal:not(.b-divider--with-text).b-divider--dotted {\n  border-block-start-style: dotted;\n}\n\n/* ─────────────────────────────────────────────\n   Vertical divider\n   ───────────────────────────────────────────── */\n.b-divider--vertical {\n  display: inline-block;\n  /* explicit height is not set — inherits from line-height of surrounding text */\n  height: 0.9em;\n  border-inline-start: var(--b-divider-line-width) solid var(--b-divider-color);\n  border-block-start: none;\n  vertical-align: middle;\n  margin-inline: var(--b-divider-vertical-margin-inline);\n}\n\n.b-divider--vertical.b-divider--dashed {\n  border-inline-start-style: dashed;\n}\n.b-divider--vertical.b-divider--dotted {\n  border-inline-start-style: dotted;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   (dividers have no animations, but guard is here for completeness)\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-divider {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAkEA,IAAM,IAAQ,GAGV,EAKE,IAAa,QAAe,EAAA,gBAAgB,WAAW,EACvD,IAAe,QAAe,EAAA,gBAAgB,aAAa,EAG3D,IAAa,QAAe,EAAQ,EAAM,QAAS,EAMnD,IAAmB,QACnB,EAAA,UAAU,EAAA,YAAY,UAAgB,WACnC,EAAA,QACP,EAEI,IAAY,QAAe;GAC/B;GACA,cAAc,EAAA;GACd,cAAc,EAAiB;GAC/B,mBAAmB,EAAA;GACnB;IACE,wBAAwB,EAAW,SAAS,EAAa;KACxD,mBAAmB,EAAA,mBAAmB,EAAW,SAAS,EAAa;IACxE,oBAAoB,EAAA;IACrB;GACF,CAAC;mBAQY,EAAA,SAAA,GAAA,EAAZ,EAA0F,QAAA;;GAAjE,OAAK,EAAE,EAAA,MAAS;GAAE,MAAK;GAAY,oBAAiB;iBAUhE,EAAA,SAAY,CAAK,EAAA,SAAA,GAAA,EAD9B,EAKE,OAAA;;GAHC,OAAK,EAAE,EAAA,MAAS;GACjB,MAAK;GACL,oBAAiB;uBAOnB,EAIM,OAAA;;GAJO,OAAK,EAAE,EAAA,MAAS;GAAE,MAAK;GAAY,oBAAiB;MAC/D,EAEO,QAFP,GAEO,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"design-system78.js","names":[],"sources":["../src/components/BDescriptions/BDescriptions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CSSProperties, VNode } from 'vue';\nimport { computed, Fragment, useSlots } from 'vue';\n\nimport type { BDescriptionsItem } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  bordered = false,\n  colon = true,\n  column = 3,\n  layout = 'horizontal',\n  size = 'default',\n  title,\n  extra,\n  items,\n  labelStyle,\n  contentStyle,\n} = defineProps<{\n  /** Whether to show border around the list. @default false */\n  bordered?: boolean;\n  /** Whether to show colon after the label. @default true */\n  colon?: boolean;\n  /** Number of columns per row. @default 3 */\n  column?: number;\n  /** Layout direction of description items. @default 'horizontal' */\n  layout?: 'horizontal' | 'vertical';\n  /** Size of the component. @default 'default' */\n  size?: 'default' | 'middle' | 'small';\n  /** Title of the descriptions block */\n  title?: string;\n  /** Extra content in the top-right corner */\n  extra?: string;\n  /** Description items data (alternative to slot-based usage) */\n  items?: BDescriptionsItem[];\n  /** Default style for all labels */\n  labelStyle?: CSSProperties;\n  /** Default style for all content cells */\n  contentStyle?: CSSProperties;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** BDescriptionsItem children */\n  default?: (props: Record<string, never>) => unknown;\n  /** Title area. Overrides the `title` prop */\n  title?: (props: Record<string, never>) => unknown;\n  /** Extra content area. Overrides the `extra` prop */\n  extra?: (props: Record<string, never>) => unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst hasHeader = computed(() => {\n  return !!(title || slots.title || extra || slots.extra);\n});\n\nconst rootClasses = computed(() => [\n  'b-descriptions',\n  {\n    'b-descriptions--bordered': bordered,\n    'b-descriptions--vertical': layout === 'vertical',\n    'b-descriptions--horizontal': layout === 'horizontal',\n    'b-descriptions--middle': size === 'middle',\n    'b-descriptions--small': size === 'small',\n    'b-descriptions--colon': colon,\n  },\n]);\n\n/**\n * Collect items from the `items` prop or from slot children (BDescriptionsItem VNodes).\n * Each resolved item has: label, children, span, labelStyle, contentStyle, labelSlot, contentSlot.\n */\ninterface ResolvedItem {\n  label?: string;\n  children?: string;\n  span: number;\n  labelStyle?: CSSProperties;\n  contentStyle?: CSSProperties;\n  /** VNode array for the label slot (from BDescriptionsItem slot usage) */\n  labelSlot?: VNode[];\n  /** VNode array for the content slot (from BDescriptionsItem default slot) */\n  contentSlot?: VNode[];\n}\n\nconst resolvedItems = computed<ResolvedItem[]>(() => {\n  // If items prop is provided, use it directly\n  if (items && items.length > 0) {\n    return items.map((item) => ({\n      label: item.label,\n      children: item.children,\n      span: item.span ?? 1,\n      labelStyle: item.labelStyle,\n      contentStyle: item.contentStyle,\n    }));\n  }\n\n  // Otherwise, extract from default slot VNodes (BDescriptionsItem instances)\n  const defaultSlot = slots.default?.();\n  if (!defaultSlot) return [];\n\n  const result: ResolvedItem[] = [];\n\n  function extractItems(vnodes: VNode[]) {\n    for (const vnode of vnodes) {\n      // Handle fragments (v-for, template wrappers)\n      if (vnode.type === Fragment) {\n        if (Array.isArray(vnode.children)) {\n          extractItems(vnode.children as VNode[]);\n        }\n        continue;\n      }\n\n      const props = (vnode.props || {}) as Record<string, unknown>;\n      const children = vnode.children as Record<\n        string,\n        (...args: unknown[]) => VNode | VNode[]\n      > | null;\n\n      const rawLabel = children?.label?.();\n      const rawContent = children?.default?.();\n\n      result.push({\n        label: props.label as string | undefined,\n        span: (props.span as number) ?? 1,\n        labelStyle: props.labelStyle as CSSProperties | undefined,\n        contentStyle: props.contentStyle as CSSProperties | undefined,\n        labelSlot: rawLabel ? (Array.isArray(rawLabel) ? rawLabel : [rawLabel]) : undefined,\n        contentSlot: rawContent\n          ? Array.isArray(rawContent)\n            ? rawContent\n            : [rawContent]\n          : undefined,\n      });\n    }\n  }\n\n  extractItems(defaultSlot);\n  return result;\n});\n\n/**\n * Organize items into rows based on the column count.\n * The last item in each row gets its span extended to fill the remaining columns.\n */\ninterface RowData {\n  items: Array<ResolvedItem & { effectiveSpan: number }>;\n}\n\nconst rows = computed<RowData[]>(() => {\n  const result: RowData[] = [];\n  let currentRow: RowData = { items: [] };\n  let colsUsed = 0;\n\n  for (let i = 0; i < resolvedItems.value.length; i++) {\n    const item = resolvedItems.value[i];\n    const isLast = i === resolvedItems.value.length - 1;\n    let span = Math.min(item.span, column);\n\n    // If this item would exceed the row, start a new row\n    if (colsUsed + span > column) {\n      if (currentRow.items.length > 0) {\n        // Fill remaining columns of the previous row\n        const lastInRow = currentRow.items[currentRow.items.length - 1];\n        lastInRow.effectiveSpan += column - colsUsed;\n        result.push(currentRow);\n        currentRow = { items: [] };\n        colsUsed = 0;\n      }\n    }\n\n    // If this is the last item, it takes up remaining space in the row\n    if (isLast) {\n      span = column - colsUsed;\n    }\n\n    currentRow.items.push({ ...item, effectiveSpan: span });\n    colsUsed += span;\n\n    if (colsUsed >= column) {\n      result.push(currentRow);\n      currentRow = { items: [] };\n      colsUsed = 0;\n    }\n  }\n\n  // Push any remaining items\n  if (currentRow.items.length > 0) {\n    const lastInRow = currentRow.items[currentRow.items.length - 1];\n    lastInRow.effectiveSpan += column - colsUsed;\n    result.push(currentRow);\n  }\n\n  return result;\n});\n\n/**\n * Merge global label/content styles with per-item styles.\n * Item-level styles override global styles.\n */\nfunction mergedLabelStyle(item: ResolvedItem): CSSProperties | undefined {\n  if (!labelStyle && !item.labelStyle) return undefined;\n  return { ...labelStyle, ...item.labelStyle };\n}\n\nfunction mergedContentStyle(item: ResolvedItem): CSSProperties | undefined {\n  if (!contentStyle && !item.contentStyle) return undefined;\n  return { ...contentStyle, ...item.contentStyle };\n}\n</script>\n\n<template>\n  <div :class=\"rootClasses\">\n    <!-- Header -->\n    <div v-if=\"hasHeader\" class=\"b-descriptions__header\">\n      <div v-if=\"title || $slots.title\" class=\"b-descriptions__title\">\n        <slot name=\"title\">{{ title }}</slot>\n      </div>\n      <div v-if=\"extra || $slots.extra\" class=\"b-descriptions__extra\">\n        <slot name=\"extra\">{{ extra }}</slot>\n      </div>\n    </div>\n\n    <!-- Body -->\n    <div class=\"b-descriptions__body\">\n      <!-- Bordered: use a real <table> -->\n      <table v-if=\"bordered\" class=\"b-descriptions__table\" role=\"presentation\">\n        <tbody>\n          <!-- Horizontal layout with border -->\n          <template v-if=\"layout === 'horizontal'\">\n            <tr v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\" class=\"b-descriptions__row\">\n              <template v-for=\"(item, itemIndex) in row.items\" :key=\"itemIndex\">\n                <th\n                  class=\"b-descriptions__item-label b-descriptions__item-label--bordered\"\n                  :style=\"mergedLabelStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </th>\n                <td\n                  class=\"b-descriptions__item-content b-descriptions__item-content--bordered\"\n                  :colspan=\"item.effectiveSpan * 2 - 1\"\n                  :style=\"mergedContentStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </td>\n              </template>\n            </tr>\n          </template>\n\n          <!-- Vertical layout with border -->\n          <template v-else>\n            <template v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\">\n              <tr class=\"b-descriptions__row\">\n                <th\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'label-' + itemIndex\"\n                  class=\"b-descriptions__item-label b-descriptions__item-label--bordered\"\n                  :colspan=\"item.effectiveSpan\"\n                  :style=\"mergedLabelStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </th>\n              </tr>\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'content-' + itemIndex\"\n                  class=\"b-descriptions__item-content b-descriptions__item-content--bordered\"\n                  :colspan=\"item.effectiveSpan\"\n                  :style=\"mergedContentStyle(item)\"\n                >\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </td>\n              </tr>\n            </template>\n          </template>\n        </tbody>\n      </table>\n\n      <!-- Non-bordered: use a description list -->\n      <table v-else class=\"b-descriptions__table\" role=\"presentation\">\n        <tbody>\n          <!-- Horizontal layout (default) -->\n          <template v-if=\"layout === 'horizontal'\">\n            <tr v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\" class=\"b-descriptions__row\">\n              <td\n                v-for=\"(item, itemIndex) in row.items\"\n                :key=\"itemIndex\"\n                class=\"b-descriptions__item\"\n                :colspan=\"item.effectiveSpan\"\n              >\n                <span class=\"b-descriptions__item-label\" :style=\"mergedLabelStyle(item)\">\n                  <component\n                    v-if=\"item.labelSlot && item.labelSlot.length\"\n                    :is=\"() => item.labelSlot\"\n                  />\n                  <template v-else>{{ item.label }}</template>\n                </span>\n                <span class=\"b-descriptions__item-content\" :style=\"mergedContentStyle(item)\">\n                  <component\n                    v-if=\"item.contentSlot && item.contentSlot.length\"\n                    :is=\"() => item.contentSlot\"\n                  />\n                  <template v-else>{{ item.children }}</template>\n                </span>\n              </td>\n            </tr>\n          </template>\n\n          <!-- Vertical layout -->\n          <template v-else>\n            <template v-for=\"(row, rowIndex) in rows\" :key=\"rowIndex\">\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'label-' + itemIndex\"\n                  class=\"b-descriptions__item\"\n                  :colspan=\"item.effectiveSpan\"\n                >\n                  <span class=\"b-descriptions__item-label\" :style=\"mergedLabelStyle(item)\">\n                    <component\n                      v-if=\"item.labelSlot && item.labelSlot.length\"\n                      :is=\"() => item.labelSlot\"\n                    />\n                    <template v-else>{{ item.label }}</template>\n                  </span>\n                </td>\n              </tr>\n              <tr class=\"b-descriptions__row\">\n                <td\n                  v-for=\"(item, itemIndex) in row.items\"\n                  :key=\"'content-' + itemIndex\"\n                  class=\"b-descriptions__item\"\n                  :colspan=\"item.effectiveSpan\"\n                >\n                  <span class=\"b-descriptions__item-content\" :style=\"mergedContentStyle(item)\">\n                    <component\n                      v-if=\"item.contentSlot && item.contentSlot.length\"\n                      :is=\"() => item.contentSlot\"\n                    />\n                    <template v-else>{{ item.children }}</template>\n                  </span>\n                </td>\n              </tr>\n            </template>\n          </template>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BDescriptions - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-descriptions {\n  /* Surface */\n  --b-descriptions-bg: oklch(100% 0 0);\n  --b-descriptions-color: oklch(20% 0.02 260);\n  --b-descriptions-border-color: oklch(88% 0.01 260);\n  --b-descriptions-border-radius: 8px;\n  --b-descriptions-transition-duration: 200ms;\n\n  /* Title */\n  --b-descriptions-title-color: oklch(20% 0.02 260);\n  --b-descriptions-title-font-size: 16px;\n  --b-descriptions-title-font-weight: 600;\n  --b-descriptions-title-margin-bottom: 20px;\n\n  /* Extra */\n  --b-descriptions-extra-color: oklch(45% 0.02 260);\n  --b-descriptions-extra-font-size: 14px;\n\n  /* Label */\n  --b-descriptions-label-color: oklch(40% 0.02 260);\n  --b-descriptions-label-bg: oklch(97% 0.005 260);\n  --b-descriptions-label-font-weight: 400;\n\n  /* Content */\n  --b-descriptions-content-color: oklch(20% 0.02 260);\n\n  /* Item spacing */\n  --b-descriptions-item-padding-bottom: 16px;\n  --b-descriptions-item-padding-end: 16px;\n\n  /* Colon */\n  --b-descriptions-colon-margin-left: 2px;\n  --b-descriptions-colon-margin-right: 8px;\n\n  /* Bordered cell padding */\n  --b-descriptions-cell-padding: 16px 24px;\n  --b-descriptions-cell-padding-middle: 12px 20px;\n  --b-descriptions-cell-padding-small: 8px 16px;\n\n  /* Layout */\n  color: var(--b-descriptions-color);\n  font-size: 14px;\n  line-height: 1.5715;\n  box-sizing: border-box;\n}\n\n/* ── Header ── */\n.b-descriptions__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--b-descriptions-title-margin-bottom);\n  gap: 16px;\n}\n\n.b-descriptions__title {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--b-descriptions-title-color);\n  font-size: var(--b-descriptions-title-font-size);\n  font-weight: var(--b-descriptions-title-font-weight);\n  line-height: 1.5;\n}\n\n.b-descriptions__extra {\n  flex: none;\n  color: var(--b-descriptions-extra-color);\n  font-size: var(--b-descriptions-extra-font-size);\n}\n\n/* ── Body ── */\n.b-descriptions__body {\n  width: 100%;\n  overflow: hidden;\n}\n\n/* ── Table ── */\n.b-descriptions__table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n}\n\n/* ── Bordered table ── */\n.b-descriptions--bordered .b-descriptions__table {\n  border: 1px solid var(--b-descriptions-border-color);\n  border-radius: var(--b-descriptions-border-radius);\n  overflow: hidden;\n}\n\n.b-descriptions--bordered .b-descriptions__row > th,\n.b-descriptions--bordered .b-descriptions__row > td {\n  border-inline-end: 1px solid var(--b-descriptions-border-color);\n  border-bottom: 1px solid var(--b-descriptions-border-color);\n}\n\n.b-descriptions--bordered .b-descriptions__row > th:last-child,\n.b-descriptions--bordered .b-descriptions__row > td:last-child {\n  border-inline-end: none;\n}\n\n.b-descriptions--bordered .b-descriptions__row:last-child > th,\n.b-descriptions--bordered .b-descriptions__row:last-child > td {\n  border-bottom: none;\n}\n\n.b-descriptions--bordered .b-descriptions__item-label--bordered {\n  padding: var(--b-descriptions-cell-padding);\n  background: var(--b-descriptions-label-bg);\n  color: var(--b-descriptions-label-color);\n  font-weight: var(--b-descriptions-label-font-weight);\n  white-space: nowrap;\n}\n\n.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding);\n  color: var(--b-descriptions-content-color);\n}\n\n/* ── Non-bordered items ── */\n.b-descriptions__item {\n  padding-bottom: var(--b-descriptions-item-padding-bottom);\n  vertical-align: top;\n}\n\n.b-descriptions__item .b-descriptions__item-label {\n  color: var(--b-descriptions-label-color);\n  font-weight: var(--b-descriptions-label-font-weight);\n  display: inline-block;\n}\n\n.b-descriptions__item .b-descriptions__item-content {\n  color: var(--b-descriptions-content-color);\n  display: inline-block;\n}\n\n/* ── Colon ── */\n.b-descriptions--colon:not(.b-descriptions--vertical)\n  .b-descriptions__item\n  .b-descriptions__item-label::after {\n  content: ':';\n  position: relative;\n  margin-inline-start: var(--b-descriptions-colon-margin-left);\n  margin-inline-end: var(--b-descriptions-colon-margin-right);\n}\n\n.b-descriptions--colon.b-descriptions--bordered .b-descriptions__item-label--bordered::after {\n  content: none;\n}\n\n/* ── Vertical layout ── */\n.b-descriptions--vertical .b-descriptions__item .b-descriptions__item-label {\n  display: block;\n  padding-bottom: 4px;\n}\n\n.b-descriptions--vertical .b-descriptions__item .b-descriptions__item-content {\n  display: block;\n}\n\n/* ── Size: middle ── */\n.b-descriptions--middle .b-descriptions__item {\n  padding-bottom: 12px;\n}\n\n.b-descriptions--middle.b-descriptions--bordered .b-descriptions__item-label--bordered,\n.b-descriptions--middle.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding-middle);\n}\n\n/* ── Size: small ── */\n.b-descriptions--small .b-descriptions__item {\n  padding-bottom: 8px;\n}\n\n.b-descriptions--small.b-descriptions--bordered .b-descriptions__item-label--bordered,\n.b-descriptions--small.b-descriptions--bordered .b-descriptions__item-content--bordered {\n  padding: var(--b-descriptions-cell-padding-small);\n}\n\n.b-descriptions--small .b-descriptions__title {\n  font-size: 14px;\n}\n\n.b-descriptions--middle .b-descriptions__title {\n  font-size: 15px;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-descriptions {\n  --b-descriptions-bg: oklch(20% 0.02 260);\n  --b-descriptions-color: oklch(88% 0.01 260);\n  --b-descriptions-border-color: oklch(35% 0.02 260);\n  --b-descriptions-title-color: oklch(92% 0.01 260);\n  --b-descriptions-extra-color: oklch(65% 0.01 260);\n  --b-descriptions-label-color: oklch(65% 0.01 260);\n  --b-descriptions-label-bg: oklch(25% 0.02 260);\n  --b-descriptions-content-color: oklch(88% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-descriptions {\n    --b-descriptions-bg: oklch(20% 0.02 260);\n    --b-descriptions-color: oklch(88% 0.01 260);\n    --b-descriptions-border-color: oklch(35% 0.02 260);\n    --b-descriptions-title-color: oklch(92% 0.01 260);\n    --b-descriptions-extra-color: oklch(65% 0.01 260);\n    --b-descriptions-label-color: oklch(65% 0.01 260);\n    --b-descriptions-label-bg: oklch(25% 0.02 260);\n    --b-descriptions-content-color: oklch(88% 0.01 260);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-descriptions {\n    --b-descriptions-transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system79.js

@@ -0,0 +1,32 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createTextVNode as r, defineComponent as i, normalizeStyle as a, openBlock as o, renderSlot as s, toDisplayString as c, useSlots as l } from "vue";
+//#region src/components/BDescriptions/BDescriptionsItem.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "b-descriptions-item" }, d = /* @__PURE__ */ i({
+	__name: "BDescriptionsItem",
+	props: {
+		label: {},
+		span: { default: 1 },
+		labelStyle: {},
+		contentStyle: {}
+	},
+	setup(i, { expose: d }) {
+		let f = l();
+		return d({
+			label: i.label,
+			span: i.span,
+			labelStyle: i.labelStyle,
+			contentStyle: i.contentStyle,
+			slots: f
+		}), (l, d) => (o(), t("div", u, [i.label || l.$slots.label ? (o(), t("span", {
+			key: 0,
+			class: "b-descriptions-item__label",
+			style: a(i.labelStyle)
+		}, [s(l.$slots, "label", {}, () => [r(c(i.label), 1)])], 4)) : e("", !0), n("span", {
+			class: "b-descriptions-item__content",
+			style: a(i.contentStyle)
+		}, [s(l.$slots, "default")], 4)]));
+	}
+});
+//#endregion
+export { d as default };
+
+//# sourceMappingURL=design-system79.js.map

package/dist/design-system79.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system79.js","names":["$slots"],"sources":["../src/components/BDescriptions/BDescriptionsItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CSSProperties } from 'vue';\nimport { useSlots } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  label,\n  span = 1,\n  labelStyle,\n  contentStyle,\n} = defineProps<{\n  /** Label text displayed for this item. Can be overridden by the `label` slot. */\n  label?: string;\n  /** Number of columns this item spans. @default 1 */\n  span?: number;\n  /** Inline style applied to the label cell. */\n  labelStyle?: CSSProperties;\n  /** Inline style applied to the content cell. */\n  contentStyle?: CSSProperties;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Main content of the description item */\n  default?: (props: Record<string, never>) => unknown;\n  /** Custom label content. Overrides the `label` prop */\n  label?: (props: Record<string, never>) => unknown;\n}>();\n\nconst slots = useSlots();\n\n// Expose props for parent to read\ndefineExpose({ label, span, labelStyle, contentStyle, slots });\n</script>\n\n<template>\n  <!--\n    BDescriptionsItem is a data-only component.\n    It does not render its own markup; BDescriptions reads its props/slots\n    and renders them in a table/list structure.\n    This template is used as a fallback if the item is rendered standalone.\n  -->\n  <div class=\"b-descriptions-item\">\n    <span v-if=\"label || $slots.label\" class=\"b-descriptions-item__label\" :style=\"labelStyle\">\n      <slot name=\"label\">{{ label }}</slot>\n    </span>\n    <span class=\"b-descriptions-item__content\" :style=\"contentStyle\">\n      <slot />\n    </span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;EAiCA,IAAM,IAAQ,GAAU;SAGxB,EAAa;GAAE,OAAI,EAAA;GAAG,MAAG,EAAA;GAAG,YAAS,EAAA;GAAG,cAAW,EAAA;GAAG;GAAO,CAAC,kBAU5D,EAOM,OAPN,GAOM,CANQ,EAAA,SAASA,EAAAA,OAAO,SAAA,GAAA,EAA5B,EAEO,QAAA;;GAF4B,OAAM;GAA8B,OAAK,EAAE,EAAA,WAAU;MACtF,EAAqC,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAE7B,EAEO,QAAA;GAFD,OAAM;GAAgC,OAAK,EAAE,EAAA,aAAY;MAC7D,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}

package/dist/design-system80.js

@@ -1,6 +1,5 @@
-import e from "./design-system78.js";
-/* empty css                */
-//#region src/components/BDivider/BDivider.vue
+import e from "./design-system79.js";
+//#region src/components/BDescriptions/BDescriptionsItem.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system80.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system80.js","names":[],"sources":["../src/components/BDivider/BDivider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type {\n  BDividerOrientation,\n  BDividerSize,\n  BDividerTitlePlacement,\n  BDividerVariant,\n} from './types.ts';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  orientation = 'horizontal',\n  variant = 'solid',\n  dashed = false,\n  plain = true,\n  size = 'large',\n  titlePlacement = 'center',\n} = defineProps<{\n  /**\n   * Line direction.\n   * - `'horizontal'` - a full-width horizontal rule (default)\n   * - `'vertical'`   - an inline vertical separator\n   * @default 'horizontal'\n   */\n  orientation?: BDividerOrientation;\n  /**\n   * Line style.\n   * - `'solid'`  - continuous line (default)\n   * - `'dashed'` - dashed line\n   * - `'dotted'` - dotted line\n   * @default 'solid'\n   */\n  variant?: BDividerVariant;\n  /**\n   * Shorthand for `variant=\"dashed\"`. Overridden when `variant` is also set.\n   * Kept for AntD API compatibility.\n   * @default false\n   * @deprecated Prefer `variant` prop\n   */\n  dashed?: boolean;\n  /**\n   * Render the text in plain (normal weight) style rather than bold.\n   * Only meaningful for horizontal dividers with content.\n   * @default true\n   */\n  plain?: boolean;\n  /**\n   * Vertical spacing around horizontal dividers (ignored for vertical orientation).\n   * - `'small'`  - tighter margin\n   * - `'medium'` - medium margin\n   * - `'large'`  - standard Ant Design margin (default)\n   * @default 'large'\n   */\n  size?: BDividerSize;\n  /**\n   * Horizontal position of the title text inside a horizontal divider.\n   * - `'start'`  - align text to the leading edge\n   * - `'center'` - centre the text (default)\n   * - `'end'`    - align text to the trailing edge\n   * @default 'center'\n   */\n  titlePlacement?: BDividerTitlePlacement;\n}>();\n\nconst slots = defineSlots<{\n  /** Optional title or content placed inside the divider line. */\n  default?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Computed\n// ─────────────────────────────────────────────\nconst isVertical = computed(() => orientation === 'vertical');\nconst isHorizontal = computed(() => orientation === 'horizontal');\n\n/** Whether there is slot content to render. */\nconst hasContent = computed(() => Boolean(slots.default));\n\n/**\n * Resolve the effective line style.\n * `dashed` prop is a legacy alias for `variant=\"dashed\"`.\n */\nconst effectiveVariant = computed<BDividerVariant>(() => {\n  if (dashed && variant === 'solid') return 'dashed';\n  return variant;\n});\n\nconst rootClass = computed(() => [\n  'b-divider',\n  `b-divider--${orientation}`,\n  `b-divider--${effectiveVariant.value}`,\n  `b-divider--size-${size}`,\n  {\n    'b-divider--with-text': hasContent.value && isHorizontal.value,\n    [`b-divider--text-${titlePlacement}`]: hasContent.value && isHorizontal.value,\n    'b-divider--plain': plain,\n  },\n]);\n</script>\n\n<template>\n  <!--\n    Vertical divider: a presentational inline separator.\n    role=\"separator\" with aria-orientation covers both horizontal and vertical.\n  -->\n  <span v-if=\"isVertical\" :class=\"rootClass\" role=\"separator\" aria-orientation=\"vertical\" />\n\n  <!--\n    Horizontal divider WITHOUT content.\n    <div role=\"separator\"> is used instead of <hr> because axe-core evaluates\n    <hr> (which carries implicit role=\"separator\") for text-colour contrast by\n    reading its CSS `color` property. A <div role=\"separator\"> with no text\n    content is exempt from that check (WCAG SC 1.4.3 applies only to text).\n  -->\n  <div\n    v-else-if=\"isHorizontal && !hasContent\"\n    :class=\"rootClass\"\n    role=\"separator\"\n    aria-orientation=\"horizontal\"\n  />\n\n  <!--\n    Horizontal divider WITH content: <div role=\"separator\"> wrapping the text.\n    <hr> cannot contain children, so we fall back to a div.\n  -->\n  <div v-else :class=\"rootClass\" role=\"separator\" aria-orientation=\"horizontal\">\n    <span class=\"b-divider__content\">\n      <slot />\n    </span>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (design tokens)\n   Scoped to .b-divider — never on :root\n   ──────────────────────────────────────────── */\n.b-divider {\n  /* AntD token: textPaddingInline → horizontal padding around inner text */\n  --b-divider-text-padding-inline: 1em;\n\n  /* AntD token: orientationMargin → fraction of width from the near edge for start/end text */\n  --b-divider-orientation-margin: 0.05;\n\n  /* AntD token: verticalMarginInline → horizontal margin on vertical dividers */\n  --b-divider-vertical-margin-inline: 8px;\n\n  /* Colour */\n  --b-divider-color: oklch(88% 0.01 264); /* neutral border */\n  --b-divider-text-color: oklch(32% 0.02 264);\n\n  /* Typography */\n  --b-divider-font-size: 1rem;\n  --b-divider-font-weight-text: 500; /* \"with-text\" non-plain heading weight */\n\n  /* Size (margin-block for horizontal) */\n  --b-divider-margin-block-large: 1.5rem; /* size=large  (AntD default) */\n  --b-divider-margin-block-medium: 0.75rem; /* size=medium */\n  --b-divider-margin-block-small: 0.25rem; /* size=small  */\n\n  /* Line geometry */\n  --b-divider-line-width: 1px;\n}\n\n/* ── Dark mode ───────────────────────────────────────────────────────────\n   Use only the attribute selector, consistent with every other component\n   in this system (BAlert, BCard, etc.). The @media (prefers-color-scheme)\n   query is deliberately omitted: Storybook controls the theme by toggling\n   [data-prefers-color='dark'] on <html>. A media-query override would fire\n   based on the OS/test-runner's colour scheme regardless of the canvas\n   setting, producing light text (#c7cedb) on a white canvas — failing\n   WCAG 1.4.3 contrast in automated a11y checks.\n   ──────────────────────────────────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-divider {\n  --b-divider-color: oklch(35% 0.02 264);\n  --b-divider-text-color: oklch(85% 0.02 264);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-divider {\n    --b-divider-color: oklch(35% 0.02 264);\n    --b-divider-text-color: oklch(85% 0.02 264);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Horizontal — <div role=separator> (no text) or <div role=separator> (with text)\n   ───────────────────────────────────────────── */\n.b-divider--horizontal {\n  display: block;\n  clear: both;\n  width: 100%;\n  margin-block: var(--b-divider-margin-block-large);\n  border: none;\n  border-block-start: var(--b-divider-line-width) var(--b-divider-color);\n  /* default style is overridden by variant classes below */\n  border-block-start-style: solid;\n  box-sizing: border-box;\n}\n\n/* Size variants (horizontal only) */\n.b-divider--horizontal.b-divider--size-small {\n  margin-block: var(--b-divider-margin-block-small);\n}\n.b-divider--horizontal.b-divider--size-medium {\n  margin-block: var(--b-divider-margin-block-medium);\n}\n.b-divider--horizontal.b-divider--size-large {\n  margin-block: var(--b-divider-margin-block-large);\n}\n\n/* ─────────────────────────────────────────────\n   Horizontal WITH text\n   ───────────────────────────────────────────── */\n.b-divider--with-text {\n  display: flex;\n  align-items: center;\n  border-block-start-style: none; /* lines rendered via ::before / ::after */\n  white-space: nowrap;\n  font-size: var(--b-divider-font-size);\n  color: var(--b-divider-text-color);\n  font-weight: var(--b-divider-font-weight-text);\n}\n\n/* Plain text: normal weight */\n.b-divider--with-text.b-divider--plain {\n  font-weight: normal;\n}\n\n/* Lines flanking the text */\n.b-divider--with-text::before,\n.b-divider--with-text::after {\n  content: '';\n  flex: 1;\n  border-block-start: var(--b-divider-line-width) solid var(--b-divider-color);\n}\n\n/* variant overrides for ::before / ::after */\n.b-divider--dashed.b-divider--with-text::before,\n.b-divider--dashed.b-divider--with-text::after {\n  border-block-start-style: dashed;\n}\n.b-divider--dotted.b-divider--with-text::before,\n.b-divider--dotted.b-divider--with-text::after {\n  border-block-start-style: dotted;\n}\n\n/* Text placement — start: push text to left edge */\n.b-divider--text-start::before {\n  /* orientationMargin is a unitless fraction (0.05 = 5% of width) */\n  flex: calc(var(--b-divider-orientation-margin) * 1);\n  min-width: 0;\n}\n.b-divider--text-start::after {\n  flex: 1;\n}\n\n/* Text placement — end: push text to right edge */\n.b-divider--text-end::after {\n  flex: calc(var(--b-divider-orientation-margin) * 1);\n  min-width: 0;\n}\n.b-divider--text-end::before {\n  flex: 1;\n}\n\n/* Text placement — center (default): equal halves */\n.b-divider--text-center::before,\n.b-divider--text-center::after {\n  flex: 1;\n}\n\n.b-divider__content {\n  padding-inline: var(--b-divider-text-padding-inline);\n  /* prevent the text itself from shrinking below its natural width */\n  flex-shrink: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Line-style variants (horizontal no-text)\n   ───────────────────────────────────────────── */\n.b-divider--horizontal:not(.b-divider--with-text).b-divider--dashed {\n  border-block-start-style: dashed;\n}\n.b-divider--horizontal:not(.b-divider--with-text).b-divider--dotted {\n  border-block-start-style: dotted;\n}\n\n/* ─────────────────────────────────────────────\n   Vertical divider\n   ───────────────────────────────────────────── */\n.b-divider--vertical {\n  display: inline-block;\n  /* explicit height is not set — inherits from line-height of surrounding text */\n  height: 0.9em;\n  border-inline-start: var(--b-divider-line-width) solid var(--b-divider-color);\n  border-block-start: none;\n  vertical-align: middle;\n  margin-inline: var(--b-divider-vertical-margin-inline);\n}\n\n.b-divider--vertical.b-divider--dashed {\n  border-inline-start-style: dashed;\n}\n.b-divider--vertical.b-divider--dotted {\n  border-inline-start-style: dotted;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   (dividers have no animations, but guard is here for completeness)\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-divider {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system80.js","names":[],"sources":["../src/components/BDescriptions/BDescriptionsItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { CSSProperties } from 'vue';\nimport { useSlots } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  label,\n  span = 1,\n  labelStyle,\n  contentStyle,\n} = defineProps<{\n  /** Label text displayed for this item. Can be overridden by the `label` slot. */\n  label?: string;\n  /** Number of columns this item spans. @default 1 */\n  span?: number;\n  /** Inline style applied to the label cell. */\n  labelStyle?: CSSProperties;\n  /** Inline style applied to the content cell. */\n  contentStyle?: CSSProperties;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Main content of the description item */\n  default?: (props: Record<string, never>) => unknown;\n  /** Custom label content. Overrides the `label` prop */\n  label?: (props: Record<string, never>) => unknown;\n}>();\n\nconst slots = useSlots();\n\n// Expose props for parent to read\ndefineExpose({ label, span, labelStyle, contentStyle, slots });\n</script>\n\n<template>\n  <!--\n    BDescriptionsItem is a data-only component.\n    It does not render its own markup; BDescriptions reads its props/slots\n    and renders them in a table/list structure.\n    This template is used as a fallback if the item is rendered standalone.\n  -->\n  <div class=\"b-descriptions-item\">\n    <span v-if=\"label || $slots.label\" class=\"b-descriptions-item__label\" :style=\"labelStyle\">\n      <slot name=\"label\">{{ label }}</slot>\n    </span>\n    <span class=\"b-descriptions-item__content\" :style=\"contentStyle\">\n      <slot />\n    </span>\n  </div>\n</template>\n"],"mappings":""}