@miragon/slidev-toolkit 1.4.0 → 1.5.1

package/components/Card.vue

@@ -10,14 +10,28 @@
  *   3 Karten: blue, teal, green
  *   4 Karten: blue, blue-mid, green-deep, green
  *   <Card title="Deployment" accent="blue">Body …</Card>
+ *
+ * `icon` (optional): eine Iconify-UnoCSS-Klasse (`i-carbon-idea`, `i-ph-cube`, …).
+ * Wird sie gesetzt, erscheint das Icon über dem Titel und trägt dieselbe
+ * Akzentfarbe; ohne `icon` bleibt die Karte wie bisher rein textuell.
+ * Der volle Klassenname muss so im Slide stehen, damit UnoCSS ihn beim
+ * statischen Scan findet und generiert (Brand-Regel: Iconify `i-*`, kein Emoji).
+ *   <Card title="Deployment" accent="blue" icon="i-carbon-rocket">Body …</Card>
+ *
+ * `align` (optional): richtet Icon, Titel und Body aus — `left` (Standard),
+ * `center` oder `right`. Betrifft nur die horizontale Ausrichtung des Inhalts;
+ * Hintergrund, Akzentlogik und alles andere bleiben unverändert.
+ *   <Card title="Deployment" accent="blue" align="center">Body …</Card>
  */
 const props = withDefaults(
   defineProps<{
     title?: string
     accent?: 'blue' | 'blue-mid' | 'teal' | 'green-deep' | 'green-mid' | 'green'
     padding?: 'compact' | 'standard' | 'generous'
+    icon?: string
+    align?: 'left' | 'center' | 'right'
   }>(),
-  { accent: 'blue', padding: 'standard' },
+  { accent: 'blue', padding: 'standard', align: 'left' },
 )
 
 // Die §6.3-Progressions-Stops. Bewusst lokal: der einzige sanktionierte Hex-Ort.
@@ -32,7 +46,8 @@ const ACCENTS: Record<string, string> = {
 </script>
 
 <template>
-  <div class="mg-card" :class="`mg-card--${props.padding}`">
+  <div class="mg-card" :class="[`mg-card--${props.padding}`, `mg-card--align-${props.align}`]">
+    <span v-if="icon" class="mg-card__icon" :class="icon" :style="{ color: ACCENTS[props.accent] }" aria-hidden="true"></span>
     <h3 v-if="title" class="mg-card__title" :style="{ color: ACCENTS[props.accent] }">{{ title }}</h3>
     <div class="mg-card__body"><slot /></div>
   </div>
@@ -53,6 +68,16 @@ const ACCENTS: Record<string, string> = {
 .mg-card--compact { padding: 1rem; display: flex; flex-direction: column; }
 .mg-card--standard { padding: 1.25rem; }
 .mg-card--generous { padding: 1.5rem; }
+.mg-card--align-center { text-align: center; }
+.mg-card--align-right { text-align: right; }
+.mg-card--align-center .mg-card__icon { margin-left: auto; margin-right: auto; }
+.mg-card--align-right .mg-card__icon { margin-left: auto; }
+
+.mg-card__icon {
+  display: block;
+  font-size: 1.6rem;
+  margin-bottom: 0.6rem;
+}
 .mg-card__title {
   margin: 0;
   font-weight: 700;
@@ -65,6 +90,37 @@ const ACCENTS: Record<string, string> = {
   line-height: 1.55;
   color: #4b5563;
 }
+/* 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.4.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",

package/styles/code.css

@@ -31,3 +31,20 @@
   color: var(--miragon-text-muted);
   font-size: 0.8rem;
 }
+
+/* Inline code (`like this`) — a small on-brand chip in Geist Mono. Without this
+   rule inline code falls back to Slidev/UnoCSS defaults (a lavender pill in a
+   generic mono face). `:not(pre) > code` matches only inline spans, never the
+   <code> inside a Shiki fence (that lives under <pre>), so fences keep their
+   frame above. Applies everywhere the same way, including inside <Card> bodies.
+   NOTE: for inline code to render at all inside a component (<Card>, …), the
+   body must be wrapped in blank lines — see the slides skill. */
+:not(pre) > code {
+  font-family: var(--miragon-font-mono);
+  font-size: 0.85em;
+  color: var(--miragon-blue-dark);
+  background: var(--miragon-blue-light);
+  border: 1px solid #e5e7eb;
+  border-radius: 0.35rem;
+  padding: 0.1em 0.35em;
+}