From 87b7ac6ea5a34881b3220d56f686fb9f9a1e8180 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Sun, 11 Oct 2026 17:42:57 +0200
Subject: [PATCH] fix: write D9Skeleton's margin classes in full and rebuild
 lines on change (BITS-212)

Tailwind only generates classes it finds written out, so the runtime
`mr-${n}` left six of the eight line widths without CSS in Input. The
lines are now a computed over a clamped, floored count, so -1 or 2.5
no longer throw and a new `lines` value re-renders.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/Skeleton/Skeleton.vue | 19 +++++++++----------
 tests/Skeleton.spec.ts    | 22 ++++++++++++++++++++++
 2 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 tests/Skeleton.spec.ts

diff --git a/src/Skeleton/Skeleton.vue b/src/Skeleton/Skeleton.vue
index 48c9b2e..2b2380c 100644
--- a/src/Skeleton/Skeleton.vue
+++ b/src/Skeleton/Skeleton.vue
@@ -5,7 +5,7 @@
       <div v-if="title" class="w-full h-8 bg-current rounded-lg"></div>
     </div>
 
-    <div v-if="lines > 0" class="mt-6 space-y-2">
+    <div v-if="lineSettings.length > 0" class="mt-6 space-y-2">
       <div
         v-for="(setting, index) in lineSettings"
         class="h-4 bg-current rounded-lg"
@@ -19,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import { withDefaults } from "vue";
+import { computed, withDefaults } from "vue";
 
 interface SkeletonProps {
   avatar?: boolean;
@@ -35,13 +35,12 @@ const props = withDefaults(defineProps<SkeletonProps>(), {
   footer: false,
 });
 
+// Full class names, so Tailwind finds them in the built bundle
+const margins = ["mr-4", "mr-5", "mr-6", "mr-8", "mr-10", "mr-16", "mr-24", "mr-32"];
 
-const lineSettings = new Array(props.lines).fill(undefined).map(() => {
-  const margins = [4, 5, 6, 8, 10, 16, 24, 32];
-  const margin = margins[Math.floor(Math.random() * margins.length)]
-
-  return {
-    margin: `mr-${margin}`,
-  };
-});
+const lineSettings = computed(() =>
+  Array.from({ length: Math.max(0, Math.floor(props.lines)) }, () => ({
+    margin: margins[Math.floor(Math.random() * margins.length)],
+  })),
+);
 </script>
diff --git a/tests/Skeleton.spec.ts b/tests/Skeleton.spec.ts
new file mode 100644
index 0000000..741322d
--- /dev/null
+++ b/tests/Skeleton.spec.ts
@@ -0,0 +1,22 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import { D9Skeleton } from "../src";
+
+describe("D9Skeleton", () => {
+  it.each([
+    [-1, 0],
+    [2.5, 2],
+  ])("renders lines=%s as %s lines without an error", (lines, count) => {
+    const wrapper = mount(D9Skeleton, { props: { lines } });
+
+    expect(wrapper.findAll(".h-4")).toHaveLength(count);
+  });
+
+  it("renders the new number of lines when lines changes after mount", async () => {
+    const wrapper = mount(D9Skeleton, { props: { lines: 3 } });
+
+    await wrapper.setProps({ lines: 5 });
+
+    expect(wrapper.findAll(".h-4")).toHaveLength(5);
+  });
+});