@miragon/slidev-toolkit 1.5.0 → 1.5.1

package/components/Card.vue

@@ -90,17 +90,37 @@ const ACCENTS: Record<string, string> = {
   line-height: 1.55;
   color: #4b5563;
 }
-/* Wrapping the body in blank lines (required for inline Markdown — `code`, **bold**,
-   links — to render inside the slot; see the slides skill) makes Markdown emit a
-   <p>. Left alone it would inherit Slidev's larger prose paragraph size and default
-   margins, so a block-form card would look different from a tight one. Normalise it:
-   inherit the card body size, no outer margins, even spacing between paragraphs. */
+/* Blank-line-wrapped inline Markdown emits a <p>; normalise it to the card body size (no prose bloat). */
 .mg-card__body :deep(p) {
   margin: 0;
   font-size: inherit;
   line-height: inherit;
 }
 .mg-card__body :deep(p + p) { margin-top: 0.6em; }
+/* Same for bullet lists: normalise to the body size with a small blue square marker (like the content layout). */
+.mg-card__body :deep(ul) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.mg-card__body :deep(li) {
+  position: relative;
+  font-size: inherit;
+  line-height: inherit;
+  padding-left: 1.1rem;
+  margin: 0;
+}
+.mg-card__body :deep(li + li) { margin-top: 0.4em; }
+.mg-card__body :deep(li)::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.55em;
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 0.1rem;
+  background: var(--miragon-blue);
+}
 .mg-card--compact .mg-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
 /* A trailing diagram (<Figure src>) docks at the card bottom, so the image sits at
    the same position in every card of a stretched grid regardless of text length. */

package/components/Step.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 /**
- * Step — eine Zeile in einer <StepList>: fett gesetztes Label + Fließtext.
+ * Step — eine Zeile in einer <StepList>: nummeriertes Badge + fett gesetztes
+ * Label + Fließtext. Die Nummer kommt aus einem CSS-Counter, den die StepList
+ * zurücksetzt und jeder Step erhöht (kein index-Prop nötig).
  * Das Label nutzt die primäre Textfarbe, der Body erbt die Farbe der StepList.
  *   <Step label="Client">ruft … auf</Step>
  */
@@ -8,10 +10,35 @@ defineProps<{ label?: string }>()
 </script>
 
 <template>
-  <div class="step"><strong v-if="label" class="step__label">{{ label }}:</strong> <slot /></div>
+  <div class="step">
+    <span class="step__marker" aria-hidden="true"></span>
+    <span class="step__body"><strong v-if="label" class="step__label">{{ label }}:</strong> <slot /></span>
+  </div>
 </template>
 
 <style scoped>
+.step {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+  counter-increment: miragon-step;
+}
+.step__marker {
+  flex: 0 0 auto;
+  align-self: flex-start;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  background: var(--miragon-blue);
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  text-align: center;
+}
+.step__marker::before {
+  content: counter(miragon-step);
+}
 .step__label {
   font-weight: 700;
   color: var(--miragon-text-primary);

package/components/StepList.vue

@@ -20,9 +20,10 @@
 .step-list {
   display: flex;
   flex-direction: column;
-  gap: 0.65rem;
-  font-size: 0.8rem;
-  line-height: 1.4;
+  gap: 0.95rem;
+  font-size: 1.2rem;
+  line-height: 1.5;
   color: var(--miragon-text-secondary);
+  counter-reset: miragon-step;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/slidev-toolkit",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Miragon Slidev toolkit: the brand theme, the layout archetypes, the reusable components (Card, CardGrid, StepList, Figure, SplitView) and the BrandMeshBackground animation. Single source of design truth, consumed by the reference deck in this repo.",
   "keywords": [
     "slidev-theme",