@conciso/design-system-mcp 0.0.0-bootstrap.0

package/snapshot/services/core/docgen/komponenten-cards-teaser-klickbare-karte.json

@@ -0,0 +1,161 @@
+{
+  "components": {
+    "komponenten-cards-teaser-klickbare-karte": {
+      "id": "komponenten-cards-teaser-klickbare-karte",
+      "name": "LinkCardComponent",
+      "path": "./src/lib/link-card/link-card.stories.ts",
+      "description": "LinkCard (cds-link-card) — Wrapper um `a.card.card-elevated` aus css/components.css\n(css/components.css:147–154) samt `.card-cta-link` (css/components.css:1347–1356).\n\nDie Lücke, die `CardComponent` bewusst offen lässt (siehe deren Klassendoku):\n`.card-elevated` wirkt im CSS ausschließlich auf `a.card-elevated` (Riegel aus\n`CONTRIBUTING.md` §4, „Elevation = Interaktivität“) — eine `<article>`/`<div>`-Karte\nbekommt den Schatten auch mit gesetzter Klasse nicht. Diese Komponente rendert\ndeshalb ein echtes `<a>`, die ganze Fläche ist der Link, kein Klick-Handler auf\neinem nicht-interaktiven Element.\n\nStruktur wie `CardComponent`: optionale bereichsgefärbte `.card-media` mit der\nechten Bereichs-Glyphe, `.card-body` mit `.card-eyebrow` / `.card-title` /\n`.card-text`. Neu ist der Fuß `.card-cta-link`, optional unten angeheftet\n(`--pinned`, für gleich hohe Karten im Raster über `.card-body{flex:1}`).\n\n**Entscheidung — Fuß ist ein `<span>`, kein zweites `<a>`.** Die ganze Karte ist\nbereits `a.card-elevated`; ein verschachteltes `<a>` im Fuß wäre ungültiges HTML\n(der Browser schließt es beim Parsen vorzeitig) und würde zwei Klickziele auf\nderselben Fläche erzeugen. `docs/index.html:4707–4716` zeigt exakt dieses Muster:\n`<span class=\"card-cta-link card-cta-link--pinned\">…</span>` innerhalb von\n`a.card.card-elevated`. `.card-cta-link` selbst ist nicht auf `a.` gescoped (anders\nals `.card-elevated`), der Span trägt Farbe und Typografie also unverändert.\n\n**Entscheidung — Pfeil-Suffix wird von der Komponente ergänzt, nicht Teil von\n`ctaLabel`.** Der Pfeil ist reine visuelle Affordanz, kein Inhalt — `docs/index.html`\n(Abschnitt „Klickbare Karte“) kapselt ihn deshalb selbst in ein\n`aria-hidden`-Span. Läge das Zeichen im `ctaLabel`-Text, müsste jeder Aufrufer\nselbst an das `aria-hidden` denken; das wird hier stattdessen einmalig in der\nKomponente erledigt.\n\n**Entscheidung — kein `data-area` auf `.card-cta-link`.** Die Doku hält die\nCTA-Farbe in gemischten Bereichs-Listen bewusst einheitlich Corporate-Petrol\n(`docs/index.html:8762`: „CTA-Farbe einheitlich `--co-700`“), unabhängig vom\n`area` der Karte. Der Fuß bleibt deshalb ohne `data-area`-Bindung.\n\n**Entscheidung — Host als Flex-Container.** Im Raster ist der Host das\nGrid-Kind, das `align-items:stretch` auf Zeilenhöhe zieht, nicht `a.card`. Ohne\neigene Regel blieb die Karte auf Inhaltshöhe, und eine Karte ohne Eyebrow endete\nsamt `--pinned`-Fuß höher als ihre Nachbarn. `:host{display:flex}` mit\n`flex:1` an der Karte gibt die gestreckte Höhe an `a.card` weiter; Story\n„Im Raster“ pinnt das.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → `data-area` (färbt Media-Glyphe + Eyebrow).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {}
+          }
+        },
+        "ctaLabel": {
+          "name": "ctaLabel",
+          "description": "Fuß-Link-Text (`.card-cta-link`, leer = kein Fuß).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "ctaPinned": {
+          "name": "ctaPinned",
+          "description": "Fuß unten an die Kartenunterkante anheften (`.card-cta-link--pinned`, für gleich hohe Karten im Raster).",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "eyebrow": {
+          "name": "eyebrow",
+          "description": "Kicker-Text oberhalb des Titels (`.card-eyebrow`, leer = keine Eyebrow-Zeile).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "href": {
+          "name": "href",
+          "description": "Linkziel; die ganze Kartenfläche ist klickbar.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "showMedia": {
+          "name": "showMedia",
+          "description": "Bereichsgefärbte Medienfläche mit Bereichs-Glyphe anzeigen.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": true
+            }
+          }
+        },
+        "text": {
+          "name": "text",
+          "description": "Anreißer-/Beschreibungstext der Karte.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "title": {
+          "name": "title",
+          "description": "Kartentitel.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type LinkCardComponentInputs = {\n  /** Markenbereich → `data-area` (färbt Media-Glyphe + Eyebrow). */\n  area?: CdsArea;\n  /**\n   * Fuß-Link-Text (`.card-cta-link`, leer = kein Fuß).\n   *\n   * @default ''\n   */\n  ctaLabel?: string;\n  /**\n   * Fuß unten an die Kartenunterkante anheften (`.card-cta-link--pinned`, für gleich hohe Karten im Raster).\n   *\n   * @default false\n   */\n  ctaPinned?: boolean;\n  /**\n   * Kicker-Text oberhalb des Titels (`.card-eyebrow`, leer = keine Eyebrow-Zeile).\n   *\n   * @default ''\n   */\n  eyebrow?: string;\n  /** Linkziel; die ganze Kartenfläche ist klickbar. */\n  href: string;\n  /**\n   * Bereichsgefärbte Medienfläche mit Bereichs-Glyphe anzeigen.\n   *\n   * @default true\n   */\n  showMedia?: boolean;\n  /** Anreißer-/Beschreibungstext der Karte. */\n  text: string;\n  /** Kartentitel. */\n  title: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "LinkCardComponent",
+        "selector": "cds-link-card",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "ctaLabel",
+          "ctaPinned",
+          "eyebrow",
+          "href",
+          "showMedia",
+          "text",
+          "title"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-cards-teaser-statcard.json

@@ -0,0 +1,115 @@
+{
+  "components": {
+    "komponenten-cards-teaser-statcard": {
+      "id": "komponenten-cards-teaser-statcard",
+      "name": "StatCardComponent",
+      "path": "./src/lib/stat-card/stat-card.stories.ts",
+      "description": "StatCard — Wrapper um `.card-stat` aus css/components.css → „Stat Card“.\n\nFlache, statische Kennzahlen-Karte mit bereichsgefärbtem Top-Akzent (data-area),\ngroßem Wert (.card-stat-value), Label (.card-stat-label) und optionalem\nTrend-Pill (.card-stat-trend.up/.down) inkl. Richtungs-Pfeil — wie docs/index.html.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → data-area (Top-Akzent + Wertfarbe).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {
+              "summary": "co"
+            }
+          }
+        },
+        "label": {
+          "name": "label",
+          "description": "Beschriftung der Kennzahl.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "trend": {
+          "name": "trend",
+          "description": "Trendrichtung → .card-stat-trend.up / .down (leer = kein Pill).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "up",
+              "down"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "\"up\" | \"down\""
+            },
+            "defaultValue": {}
+          }
+        },
+        "trendText": {
+          "name": "trendText",
+          "description": "Text neben dem Trend-Pfeil (nur sichtbar, wenn `trend` gesetzt ist).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "value": {
+          "name": "value",
+          "description": "Anzeigewert der Kennzahl.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type StatCardComponentInputs = {\n  /**\n   * Markenbereich → data-area (Top-Akzent + Wertfarbe).\n   *\n   * @default co\n   */\n  area?: CdsArea;\n  /** Beschriftung der Kennzahl. */\n  label: string;\n  /** Trendrichtung → .card-stat-trend.up / .down (leer = kein Pill). */\n  trend?: \"up\" | \"down\";\n  /**\n   * Text neben dem Trend-Pfeil (nur sichtbar, wenn `trend` gesetzt ist).\n   *\n   * @default ''\n   */\n  trendText?: string;\n  /** Anzeigewert der Kennzahl. */\n  value: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "StatCardComponent",
+        "selector": "cds-stat-card",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "label",
+          "trend",
+          "trendText",
+          "value"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-cards-teaser-statstrip.json

@@ -0,0 +1,58 @@
+{
+  "components": {
+    "komponenten-cards-teaser-statstrip": {
+      "id": "komponenten-cards-teaser-statstrip",
+      "name": "StatStripComponent",
+      "path": "./src/lib/stat-strip/stat-strip.stories.ts",
+      "description": "StatStrip — Wrapper um `.card-stat-strip` + `.card-stat-flat` aus\ncss/components.css → „Stat-Strip“. Flacher Bandstreifen (auto-fit-Grid auf\n--n-50-Grund) mit zentrierten Kennzahlen ohne Rahmen/Schatten; Wert je\nBereich getönt via [data-area]. Genau wie docs/index.html.",
+      "jsDocTags": {},
+      "argTypes": {
+        "rounded": {
+          "name": "rounded",
+          "description": "Abgerundete Ecken (--r-lg) wie in der Doku-Verwendung.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": true
+            }
+          }
+        },
+        "stats": {
+          "name": "stats",
+          "description": "Kennzahlen des Streifens.",
+          "type": {
+            "name": "other",
+            "value": "empty-enum",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsFlatStat[]"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type StatStripComponentInputs = {\n  /**\n   * Abgerundete Ecken (--r-lg) wie in der Doku-Verwendung.\n   *\n   * @default true\n   */\n  rounded?: boolean;\n  /** Kennzahlen des Streifens. */\n  stats: CdsFlatStat[];\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "StatStripComponent",
+        "selector": "cds-stat-strip",
+        "standalone": true,
+        "inputs": [
+          "rounded",
+          "stats"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-cards-teaser-tier-trenner.json

@@ -0,0 +1,56 @@
+{
+  "components": {
+    "komponenten-cards-teaser-tier-trenner": {
+      "id": "komponenten-cards-teaser-tier-trenner",
+      "name": "TierComponent",
+      "path": "./src/lib/tier/tier.stories.ts",
+      "description": "Tier (`cds-tier`) — Wrapper um `.ep-tier` aus css/components.css\n(css/components.css:1381–1384): der Stufen-Trenner (Label + Haarlinie), der eine\nOffene Feature-Liste in Pakete gliedert (z. B. „In jedem Paket enthalten“ /\n„Zusätzlich mit Pro“, Doku-Sektion `docs/index.html:4880`, Beispielseiten\n`docs/index.html:11855–11857`, `11883–11885`, `12576–12578`).\n\n**Element-Selektor, kein Attribut (ADR-0008-Standardfall).** Ausgezählt: alle 4\n`.ep-tier`-Vorkommen in `docs/index.html` stehen als eigenständiger `<div>` VOR\neinem `.layout-grid` oder einer Karten-Reihe, nie als deren Kind — keines trägt\neine `col-*`-Spaltenklasse, keines liegt in einem Grid/Flex, das seine Kinder\ndehnt. Das Tag variiert ebenfalls nicht (immer `<div>`). Keines der drei\nADR-0008-Kriterien (Grid-/Flex-Kind, Ziel einer Layout-Klasse, wechselndes Tag)\ntrifft zu, der Element-Selektor bleibt deshalb der Standardfall. `.ep-tier{\ndisplay:flex}` sitzt direkt auf dem Host (`host: { class: 'ep-tier' }`), kein\ninneres Wrapper-Element darunter — anders als bei `cds-section` (ADR-0008 Fall 2)\nist hier nichts von außen auf eine bestimmte DOM-Tiefe angewiesen: kein\nNachfahren-Selektor zielt auf `.ep-tier`, keine Fläche hängt am Host.\n\n**`area` ist auf `'ki'` typisiert, nicht auf `CdsArea`.** `css/components.css:1383`\nkennt nur die eine Regel `.ep-tier-label[data-area=\"ki\"]` (Dark-Override\n`css/dark-mode.css:476`) — für `co`/`es`/`wo` existiert keine einzige\n`[data-area]`-Regel auf `.ep-tier-label`, per Grep über `css/*.css` geprüft.\nAusgezählt in `docs/index.html`: von 4 `.ep-tier-label`-Vorkommen tragen 3\n`data-area=\"ki\"` (4880, 11884, 12577), eines trägt gar kein `data-area` (11856),\nkeines der Werte `co`/`es`/`wo` kommt vor. Ein `area`-Input vom Typ `CdsArea`\nwürde für drei von vier gültigen Werten ein `data-area`-Attribut schreiben, das\nim CSS folgenlos bleibt — die Falle, die genau dann entsteht, wenn eine Eingabe\nmehr verspricht, als die Stilschicht einlöst. Der Typ ist deshalb auf den einen\nWert eingeschränkt, den das CSS tatsächlich kennt; der Compiler verhindert damit\nstrukturell, dass jemand `co`/`es`/`wo` setzt und ein wirkungsloses Attribut\nbekommt, statt es nur im JSDoc zu behaupten.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Einzige vom CSS unterstützte Tönung → `data-area=\"ki\"` auf `.ep-tier-label`.\nUngesetzt (Default) bleibt das Label neutral (`--tx-secondary`), siehe Klassendoku.",
+          "type": {
+            "name": "other",
+            "value": "empty-enum"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "\"ki\""
+            },
+            "defaultValue": {}
+          }
+        },
+        "label": {
+          "name": "label",
+          "description": "Beschriftung des Trenners (`.ep-tier-label`), z. B. „In jedem Paket enthalten“.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type TierComponentInputs = {\n  /**\n   * Einzige vom CSS unterstützte Tönung → `data-area=\"ki\"` auf `.ep-tier-label`.\n   * Ungesetzt (Default) bleibt das Label neutral (`--tx-secondary`), siehe Klassendoku.\n   */\n  area?: \"ki\";\n  /** Beschriftung des Trenners (`.ep-tier-label`), z. B. „In jedem Paket enthalten“. */\n  label: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "TierComponent",
+        "selector": "cds-tier",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "label"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-chips-badges-pills-bereichs-badge.json

@@ -0,0 +1,63 @@
+{
+  "components": {
+    "komponenten-chips-badges-pills-bereichs-badge": {
+      "id": "komponenten-chips-badges-pills-bereichs-badge",
+      "name": "AreaBadgeComponent",
+      "path": "./src/lib/area-badge/area-badge.stories.ts",
+      "description": "Bereichs-Badge — passive Bereichs-Kennzeichnung auf Basis von `.badge` +\n`[data-area]` aus css/components.css.\n\nOrdnet ein Element einer der vier Brand Areas zu (50er-Grund, 800er-Text).\nNicht interaktiv. Für Zustände die Status-Badge, für einen redaktionellen\nAnker im Lesefluss die Pill nutzen; für interaktive Filter den Chip.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Brand Area → data-area (bestimmt die Bereichsfarbe).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {
+              "summary": "co"
+            }
+          }
+        },
+        "label": {
+          "name": "label",
+          "description": "Sichtbarer Text der Badge.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type AreaBadgeComponentInputs = {\n  /**\n   * Brand Area → data-area (bestimmt die Bereichsfarbe).\n   *\n   * @default co\n   */\n  area?: CdsArea;\n  /** Sichtbarer Text der Badge. */\n  label: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "AreaBadgeComponent",
+        "selector": "cds-area-badge",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "label"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-chips-badges-pills-chip.json

@@ -0,0 +1,95 @@
+{
+  "components": {
+    "komponenten-chips-badges-pills-chip": {
+      "id": "komponenten-chips-badges-pills-chip",
+      "name": "ChipComponent",
+      "path": "./src/lib/chip/chip.stories.ts",
+      "description": "Chip — Wrapper um `.chip` aus css/components.css → „Badges & Chips“.\n\nInteraktiver Filter-Chip auf Basis von `aria-pressed` (.chip[aria-pressed],\noptional area-aware über [data-area]). Klick schaltet den Zustand um.\n\nChips sind interaktive Elemente (Filter/Einstellungen), KEINE statischen Tags.\nFür nicht-interaktive Bereichs-Labels die Badge- bzw. Pill-Komponente nutzen.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → data-area (area-aware Outline).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {}
+          }
+        },
+        "label": {
+          "name": "label",
+          "description": "Sichtbarer Text des Chips.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "pressed": {
+          "name": "pressed",
+          "description": "Gedrückt/aktiv → aria-pressed. Two-Way (`[(pressed)]`) + pressedChange via model().",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "pressedChange": {
+          "name": "pressedChange",
+          "description": "Gedrückt/aktiv → aria-pressed. Two-Way (`[(pressed)]`) + pressedChange via model().",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "pressedChange",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "(e: boolean) => void"
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type ChipComponentInputs = {\n  /** Markenbereich → data-area (area-aware Outline). */\n  area?: CdsArea;\n  /** Sichtbarer Text des Chips. */\n  label: string;\n  /**\n   * Gedrückt/aktiv → aria-pressed. Two-Way (`[(pressed)]`) + pressedChange via model().\n   *\n   * @default false\n   */\n  pressed?: boolean; // two-way: [(pressed)]\n}\n```\n\n## Outputs\n\n```\nexport type ChipComponentOutputs = {\n  /** Gedrückt/aktiv → aria-pressed. Two-Way (`[(pressed)]`) + pressedChange via model(). */\n  pressedChange: (e: boolean) => void;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "ChipComponent",
+        "selector": "cds-chip",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "label",
+          "pressed"
+        ],
+        "outputs": [
+          "pressedChange"
+        ],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-chips-badges-pills-pill.json

@@ -0,0 +1,78 @@
+{
+  "components": {
+    "komponenten-chips-badges-pills-pill": {
+      "id": "komponenten-chips-badges-pills-pill",
+      "name": "PillComponent",
+      "path": "./src/lib/pill/pill.stories.ts",
+      "description": "Pill — Wrapper um `.pill` aus css/components.css → „Badges & Chips“ (Pill).\n\nPassive, redaktionelle Bereichs-Markierung, typografisch als Eyebrow (uppercase,\nletter-spacing .09em, label-xs) — sitzt typischerweise oberhalb eines Titels und\nordnet einen Inhalt einer Brand Area zu. Abgrenzung zur Badge: die Pill ist der\nthematische „Was für ein Inhalt ist das?“-Anker im Lesefluss; die Badge die\npunktuelle Status-/Bereichs-Kennzeichnung neben Elementen. Nicht interaktiv.\n\na11y: Der reine Bereichsname klingt im Screenreader-Fluss leicht wie eine\nÜberschrift — daher trägt die Pill ein explizites `aria-label` (Default\n„Bereich <label>“, überschreibbar), genau wie in der Doku vorgegeben.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Brand Area → data-area (Farbton; ohne Angabe greift der Corporate-Default).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {
+              "summary": "ki"
+            }
+          }
+        },
+        "ariaLabel": {
+          "name": "ariaLabel",
+          "description": "aria-label überschreiben; Default „Bereich <label>“.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "label": {
+          "name": "label",
+          "description": "Sichtbarer Bereichsname.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type PillComponentInputs = {\n  /**\n   * Brand Area → data-area (Farbton; ohne Angabe greift der Corporate-Default).\n   *\n   * @default ki\n   */\n  area?: CdsArea;\n  /** aria-label überschreiben; Default „Bereich <label>“. */\n  ariaLabel?: string;\n  /** Sichtbarer Bereichsname. */\n  label: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "PillComponent",
+        "selector": "cds-pill",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "ariaLabel",
+          "label"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}