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

package/snapshot/services/core/docgen/marke-brand-areas-areatabs.json

@@ -0,0 +1,75 @@
+{
+  "components": {
+    "marke-brand-areas-areatabs": {
+      "id": "marke-brand-areas-areatabs",
+      "name": "AreaTabsComponent",
+      "path": "./src/lib/area-tabs/area-tabs.stories.ts",
+      "description": "AreaTabs — Wrapper um `.area-tabs` / `.atab` / `.atab-content` aus\ncss/components.css → „Area Tabs“. Bereichsgefärbte Tab-Leiste: der aktive Tab\nsetzt `--atab-color` (Bereichs-700) für Text + Unterstrich, der Punkt nutzt\nBereichs-500. Umschalten per Klick (aria-selected / sichtbares Panel).\n\nTabs werden deklarativ als `<cds-area-tab>`-Kinder projiziert; jeder Tab trägt\n`area` + `label` und BELIEBIGEN Inhalt (Markup/Komponenten), der ins Panel\ngerendert wird. Der aktive Index ist über `[(active)]` steuerbar.",
+      "jsDocTags": {},
+      "argTypes": {
+        "active": {
+          "name": "active",
+          "description": "Index des aktiven Tabs. Two-Way (`[(active)]`).",
+          "type": {
+            "name": "number"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "number"
+            },
+            "defaultValue": {
+              "summary": 0
+            }
+          }
+        },
+        "ariaLabel": {
+          "name": "ariaLabel",
+          "description": "Zugänglicher Name der Tab-Leiste (WAI-ARIA verlangt aria-label/-labelledby).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": "Bereiche"
+            }
+          }
+        },
+        "activeChange": {
+          "name": "activeChange",
+          "description": "Index des aktiven Tabs. Two-Way (`[(active)]`).",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "activeChange",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "(e: number) => void"
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type AreaTabsComponentInputs = {\n  /**\n   * Index des aktiven Tabs. Two-Way (`[(active)]`).\n   *\n   * @default 0\n   */\n  active?: number; // two-way: [(active)]\n  /**\n   * Zugänglicher Name der Tab-Leiste (WAI-ARIA verlangt aria-label/-labelledby).\n   *\n   * @default Bereiche\n   */\n  ariaLabel?: string;\n}\n```\n\n## Outputs\n\n```\nexport type AreaTabsComponentOutputs = {\n  /** Index des aktiven Tabs. Two-Way (`[(active)]`). */\n  activeChange: (e: number) => void;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "AreaTabsComponent",
+        "selector": "cds-area-tabs",
+        "standalone": true,
+        "inputs": [
+          "active",
+          "ariaLabel"
+        ],
+        "outputs": [
+          "activeChange"
+        ],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/marke-logo-logo.json

@@ -0,0 +1,71 @@
+{
+  "components": {
+    "marke-logo-logo": {
+      "id": "marke-logo-logo",
+      "name": "LogoComponent",
+      "path": "./src/lib/logo/logo.stories.ts",
+      "description": "Logo — einzelne Logo-Kachel (`.logo-tile` aus css/components.css).\n\nRendert bevorzugt ein **Bild** (`src`); ohne Bild fällt es auf den Text-`label`\nals Platzhalter zurück (`.logo-placeholder`). So lässt es sich sowohl im\nLogo-Carousel als auch eigenständig verwenden (Partner-Leiste, „Bekannt aus“-Reihe,\nFooter). Die Host-Klasse `logo-tile` trägt Flex-Zentrierung/Padding aus der portablen CSS.",
+      "jsDocTags": {},
+      "argTypes": {
+        "alt": {
+          "name": "alt",
+          "description": "Alt-Text des Bilds (Fallback: `label`).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "label": {
+          "name": "label",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "src": {
+          "name": "src",
+          "description": "Bildquelle; gesetzt → Bild statt Text-Platzhalter.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type LogoComponentInputs = {\n  /**\n   * Alt-Text des Bilds (Fallback: `label`).\n   *\n   * @default ''\n   */\n  alt?: string;\n  label: string;\n  /** Bildquelle; gesetzt → Bild statt Text-Platzhalter. */\n  src?: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "LogoComponent",
+        "selector": "cds-logo",
+        "standalone": true,
+        "inputs": [
+          "alt",
+          "label",
+          "src"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/seitenmuster-seminar-/302/267-training-fakten-liste.json

@@ -0,0 +1,79 @@
+{
+  "components": {
+    "seitenmuster-seminar-·-training-fakten-liste": {
+      "id": "seitenmuster-seminar-·-training-fakten-liste",
+      "name": "FactsComponent",
+      "path": "./src/lib/facts/facts.stories.ts",
+      "description": "Facts (`cds-facts`) — Wrapper um `.ep-facts` aus css/components.css\n(css/components.css:1261–1272): die Definitionsliste für die harten Eckdaten\neines Angebots (Termin, Dauer, Ort, Preis), einspaltig mit Haarlinie zwischen\nden Paaren oder als `.is-grid` zweispaltig für Kästen, die neben Inhalt stehen.\nBewusst ohne eigenen Rahmen und ohne Fläche, sie zieht in einen vorhandenen\nContainer ein (Angebots-Box, Sticky-Sidebar) — Doku-Sektion\n`docs/index.html:9069` (`gt-seminar-fakten`), Beispielseiten `docs/index.html:\n9076–9082`, `13718–13726`, `16293–16300`.\n\n**Element-Selektor, kein Attribut (ADR-0008-Standardfall).** Ausgezählt: keines\nder 3 `.ep-facts`-Vorkommen in `docs/index.html` sitzt in einem `.layout-grid`\nmit `col-*`, keines wird von einem Grid-/Flex-Elternteil in der Höhe gedehnt\n(der Flex-Fall in Zeile 16290 ist `flex-direction:column`, dort füllen Block-\nElemente die Breite ihres Containers unabhängig von einer zusätzlichen\nWrapper-Ebene — anders als bei `.ep-card`/ADR-0008 Fall 1 geht es dort um Höhe,\ndie durch Block-Layout NICHT automatisch nach unten durchgereicht wird). Das\nTag variiert nicht (immer `<dl>`). Analog zu `cds-faq` (`faq.component.ts`, das\nintern `<details>` in einem `<div class=\"ep-faq\">` rendert) trägt hier die\nINNERE `<dl class=\"ep-facts\">` die CSS-Klasse, nicht der `<cds-facts>`-Host: die\nSemantik einer Definitionsliste hängt am `<dl>`-Tag selbst, ein Custom-Element\nkann dieses Tag nicht annehmen. Da `.ep-facts > div + div` ausschließlich\nNachfahren INNERHALB der eigenen Vorlage anspricht, bricht eine zusätzliche\nHost-Ebene darüber nichts — anders als bei `cds-section` (Fall 2) hängt hier\nkeine von außen gesetzte Fläche oder ein von außen adressierter Nachfahre an\ndieser Tiefe.\n\n**`<dl>`/`<div>`/`<dt>`/`<dd>` exakt wie vom CSS erwartet.** `.ep-facts > div +\ndiv` (css/components.css:1262) setzt Haarlinie und Abstand ab dem ZWEITEN Paar;\nohne das umschließende `<div>` pro Paar griffe der Selektor nicht. Jedes\n`items()`-Element wird deshalb zu genau einem `<div><dt>…</dt><dd>…</dd></div>`.\n\n**`area` färbt `<dt>` über `.t-{area}`, nicht über `data-area`.** Anders als bei\n`cds-feature`/`cds-icon-card` kennt `.ep-facts` selbst kein `[data-area]`; der\nCSS-Kommentar zu dieser Klasse (`css/components.css:1259`) benennt\nstattdessen ausdrücklich „Bereichston der Labels über `.t-XX` im Markup\n(dark-safe), nie als Inline-Farbe“ als sanktionierten Weg. Ausgezählt: alle 3\n`.ep-facts`-Vorkommen in `docs/index.html` setzen `.t-wo` auf JEDEM `<dt>`\nderselben Liste (nie gemischt, nie eine andere Bereichsfarbe) — ein optionaler\n`area`-Input, der `.t-{area}` einheitlich auf alle `<dt>` der Instanz anwendet,\nbildet dieses Muster nach, ohne einen Farbwert zu erfinden (`.t-XX` ist eine\nbestehende, bereits kontrast- und dark-mode-geprüfte Utility, `css/components.css\n:638–642`). Ungesetzt (Default) bleibt `<dt>` ohne zusätzliche Klasse, erbt also\ndie umgebende Textfarbe — das deckt Kontexte ohne Bereichsbindung ab.\n\n**Über die Ticket-API hinaus:** `area` stand nicht in der ursprünglichen\nAPI-Skizze von Ticket 08. Ergänzt, weil ohne ihn KEINES der 3 realen\n`.ep-facts`-Vorkommen originalgetreu nachgebaut werden könnte — anders als bei\n`cds-tier`s `area` (dort deckt die Einschränkung eine tatsächliche CSS-Lücke\nab) fehlt hier keine CSS-Regel, nur ein API-Hook auf eine bereits vollständige\nKlasse. Siehe Ticket-Bericht für die Abwägung.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → `.t-{area}` auf jedem `<dt>` (siehe Klassendoku). Ungesetzt = neutral.",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {}
+          }
+        },
+        "grid": {
+          "name": "grid",
+          "description": "Zweispaltige Rasterung ohne Haarlinien (`.is-grid`) statt der einspaltigen Grundform.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "items": {
+          "name": "items",
+          "description": "Fakten-Paare (`<dt>`/`<dd>`), in Darstellungsreihenfolge.",
+          "type": {
+            "name": "other",
+            "value": "empty-enum",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsFactsItem[]"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type FactsComponentInputs = {\n  /** Markenbereich → `.t-{area}` auf jedem `<dt>` (siehe Klassendoku). Ungesetzt = neutral. */\n  area?: CdsArea;\n  /**\n   * Zweispaltige Rasterung ohne Haarlinien (`.is-grid`) statt der einspaltigen Grundform.\n   *\n   * @default false\n   */\n  grid?: boolean;\n  /** Fakten-Paare (`<dt>`/`<dd>`), in Darstellungsreihenfolge. */\n  items: CdsFactsItem[];\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "FactsComponent",
+        "selector": "cds-facts",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "grid",
+          "items"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/seitenmuster-wissensbeitrag-article-header.json

@@ -0,0 +1,196 @@
+{
+  "components": {
+    "seitenmuster-wissensbeitrag-article-header": {
+      "id": "seitenmuster-wissensbeitrag-article-header",
+      "name": "ArticleHeaderComponent",
+      "path": "./src/lib/article-header/article-header.stories.ts",
+      "description": "ArticleHeader (`cds-article-header`) — Wrapper um `.article-header` aus\ncss/components.css (css/components.css:1486–1490, 1508–1519): der zentrierte Kopf\neines Wissensbeitrags (Breadcrumb, optionale Pill, H1, Lead, Meta-Strip). Elftes\nTicket der Seitenbausteine-Serie. Hauptvorlage ist\n`storybook-angular/src/docs/seitenmuster/wissensbeitrag.mdx`, Abschnitt „Article\nHeader“ — dort steht das für dieses Ticket verbindliche Markup samt Begründung,\nnicht nur das Mockup in `docs/index.html`.\n\n**Breadcrumb sitzt im Header — abweichend von der allgemeinen Navigationsregel,\nbewusst der Ticket-Vorlage folgend.** `docs/index.html:2423` dokumentiert für\nUnterseiten allgemein, wörtlich: „Den Breadcrumb nicht in einen zentrierten\n`.article-header` einbetten, sonst wird er mittig ausgerichtet und bekommt einen\nabweichenden Abstand zur Nav“ (Tabellenzeile „Nicht“ der Breadcrumb-Doku) — und\nausgezählt\nsind es genau die beiden EINZIGEN vollständigen Beispielseiten mit\n`.article-header` (Stellenanzeige `docs/index.html:11035`, Wissensbeitrag · KI\n`docs/index.html:15020`), die dieser Regel folgen: beide setzen den Breadcrumb in\neine EIGENE, linksbündige `.ep-section` VOR dem Header (`docs/index.html:\n11023–11031` bzw. `15010–15015`). Dem stehen 6 ISOLIERTE Doku-Demos gegenüber, die\nden Breadcrumb INNERHALB von `.article-header` zeigen: 5 kleine Referenz-Boxen in\nder Doku-Sektion selbst (`docs/index.html:7850`, `8304`, `8331`, `8361`, `8392` —\nohne Topnav/Hero/Footer, reine Bauteil-Illustrationen) plus das Code-Beispiel in\n`wissensbeitrag.mdx`. Das Ticket benennt genau diese Doku (nicht die\nBeispielseiten) als Hauptvorlage. Diese Komponente folgt der Ticket-Vorgabe\n(Breadcrumb als Input, im Header) und dokumentiert den Widerspruch als eigenen\nBefund\n(`.scratch/angular-seitenbausteine/issues/20-breadcrumb-in-oder-vor-article-header.md`).\nKonsumenten, die der allgemeinen Regel folgen wollen (wie die beiden echten\nBeispielseiten), lassen `breadcrumb` leer und setzen die Leiste selbst davor\n(siehe Story „Ohne Breadcrumb“).\n\n**Letzter Breadcrumb-Eintrag immer ohne Link, mit `aria-current=\"page\"`** — so vom\nTicket als Akzeptanzkriterium gefordert. Die beiden Wissensbeitrag-Inline-Beispiele\n(`docs/index.html:7850–7856`, `wissensbeitrag.mdx`) zeigen dafür nur 2 Einträge,\nBEIDE als `<a>`, ohne `aria-current` — eine zur Kürze vereinfachte Doku-Skizze,\nkein vollständiges Barrierefreiheits-Beispiel. Das volle, korrekte Muster (Trenner\ndekorativ, letzter Eintrag `<span aria-current=\"page\">` ohne Link) steht an\nanderer Stelle exakt so vor (`docs/index.html:2406–2412` allgemeine\nBreadcrumb-Doku, `docs/index.html:11023–11030` Stellenanzeige) und ist zusätzlich\neine explizite Akzeptanzbedingung des Tickets — die Komponente folgt deshalb\ndiesem Muster für den letzten Array-Eintrag, unabhängig von einem dort eventuell\ngesetzten `href`.\n\n**Keine bereichsgefärbte Breadcrumb-Verlinkung (`.t-{area}`).** Die\nInline-Beispiele färben ihren zweiten (dort letzten) Eintrag mit `.t-ki`/`.t-es`/\n`.t-wo`; das Ticket sieht dafür aber kein API-Feld vor (`{label, href?}`, kein\n`area` pro Eintrag), und eine Zuordnung „Bereichsfarbe auf den vorletzten\nEintrag“ wäre geraten, nicht aus der Doku ableitbar — zumal der gefärbte Eintrag\ndort ein Link ist, kein `aria-current`-Element, also nicht deckungsgleich mit dem\noben umgesetzten Muster. Bleibt bewusst außen vor.\n\n**Pill über `cds-pill`, kein direkt komponiertes `<span class=\"pill\">`.** Geprüft\nper `npx storybook tools docs show --id komponenten-chips-badges-pills-pill`:\n`PillComponent`s Host ist `<cds-pill>`, `.pill` sitzt eine Ebene darunter auf\neinem inneren `<span>` (anders als bei `FeaturedCardComponent`, wo genau das wegen\n`.card-featured-body>.pill`-Kindselektoren nicht ginge). `.article-header`/`.pill`\nhaben keinen solchen Kindselektor (css/components.css:1486–1507 geprüft) — die\nzusätzliche Ebene ist hier folgenlos, deshalb bleibt `cds-pill` als echte\nKomponente eingesetzt, keine Klassen-Duplikation nötig.\n\n**Pille rendert nur, wenn `area` UND `pill` gesetzt sind — kein erfundener\nDefault.** `PillComponent.area` ist als `CdsArea` mit einem eigenen Default\n(`'ki'`) typisiert; diese Komponente führt `area` dagegen als `CdsArea | undefined`\n(keine Konfigurations-Vorgabe laut Ticket-API). Ein erster Entwurf reichte\n`area()` per `as CdsArea`-Cast durch, damit ein `undefined`-Binding\n`cds-pill`s eigenen Default überschreiben kann — eine Typ-Lüge, um einen Fall\nabzudecken, der beim Nachzählen gar nicht vorkommt: **alle 9** `.pill`-Vorkommen\nim Article-Header-Kontext (`docs/index.html:7856, 7912–7914, 8310, 8337, 8367,\n8398, 15021`) tragen ein `data-area`, keines ohne Bereich. Die Pille rendert\ndeshalb nur innerhalb von `@if (area(); as pillArea)` (narrowt `CdsArea |\nundefined` sauber auf `CdsArea`, ohne Cast) — ist `pill()` gesetzt, `area()`\naber nicht, bleibt die Pille schlicht weg, statt eine geratene Bereichsfarbe zu\nzeigen. Gepinnt in der Story „Pille ohne Bereich“.\n\n**`pillAriaLabel`, wie bei `FeaturedCardComponent`.** `PillComponent`s eigener\nDefault („Bereich `<label>`“) passt nur, wenn die Pille einen Bereichsnamen trägt\n(Stellenanzeige, `docs/index.html:11036`: „Bereich Effektive Software“). Im\nWissensbeitrag trägt die Pille dagegen die Lesezeit (`wissensbeitrag.mdx`,\nAbschnitt „Pill · Lesezeit“: `aria-label=\"Lesezeit 8 Minuten\"`) — ein Text, den\ndie Komponente nicht zuverlässig aus einem freien `pill`-String wie\n„8 min Lesezeit“ herleiten kann (keine Zahl zu parsen, keine Garantie, dass der\nText überhaupt eine Lesezeit ist). `pillAriaLabel` bleibt deshalb optional, ohne\neigenen Default: ungesetzt geht `undefined` direkt an `cds-pill`s `ariaLabel`\ndurch, das dann auf seinen eigenen Default („Bereich `<pill>`“) zurückfällt —\nkeine Logik-Duplikation nötig, weil hier die echte `PillComponent` verwendet\nwird, keine Klassen-Nachbildung.\n\n**`date`/`dateLabel` getrennt, ANDERS als `cds-stoerer`.** `cds-stoerer`\nformatiert ein reines ISO-Datum selbst nach `de-DE`\n(`stoerer.component.ts:formattedDate`, inkl. manuellem Aufbau der\n`Date`-Komponenten gegen den UTC-Mitternacht-Fallstrick von `new Date(iso)`).\nDiese Komponente tut das NICHT: `date` liefert nur den maschinenlesbaren\n`datetime`-Wert, `dateLabel` die sichtbare Schreibweise — vom Ticket ausdrücklich\nals zwei getrennte Inputs vorgegeben. Begründung der Abweichung: Erstens deckt\nsich das mit jeder realen Instanz (6 von 6 `.article-meta-date`-Vorkommen tragen\neinen redaktionell gesetzten Text wie „13. Mai 2026“, keinen von\n`Intl.DateTimeFormat` erzeugten) — anders als der Störer, dessen Kacheln NUR ein\nISO-Datum ohne separaten Text führen. Zweitens umgeht die Trennung den\nZeitzonen-Fallstrick vollständig, statt ihn zu beheben: ohne eigene Formatierung\nkonstruiert diese Komponente nie ein `Date`-Objekt aus `date()`, die\nUTC-Mitternacht-Falle kann hier gar nicht erst auftreten. Ist `dateLabel` leer,\nzeigt die Komponente `date()` unverändert als sichtbaren Text (bewusst als\nISO-Form, nicht geraten formatiert) — in der Story „Interaktiv“ als Warnfall extra\nbenannt, damit niemand das versehentlich auf eine Produktionsseite bringt.\n\n**Meta-Strip nur, wenn es etwas zu zeigen gibt.** `authorName`/`date` sind laut\nTicket-API Beiwerk (Default `''`); ausgezählt haben alle 6 realen\n`.article-meta`-Vorkommen sowohl Autor als auch Datum, eine Stellenanzeige\n(`docs/index.html:11035`) nutzt `.article-header` dagegen KOMPLETT OHNE\n`.article-meta` (dort ein `<dl>` aus Job-Fakten statt Autor/Datum) — dieser\nabweichenden Verwendung folgt diese Komponente nicht (sie hat in der Ticket-API\nkeinen Platz), sie belegt aber, dass ein leerer Meta-Strip ein realer Fall ist.\n`.article-meta` (und darin `.article-meta-author`/`.article-meta-sep`) rendern\ndeshalb nur, wenn `authorName()` bzw. `date()` tatsächlich etwas liefern; der\nTrenner nur, wenn beide Seiten vorhanden sind.\n\n**Avatar projiziert über `[cdsAvatar]`, PLUS `cds-avatar-stack`.** Die\nTicket-Skizze nennt nur `<ng-content select=\"[cdsAvatar]\">`; ergänzt um den\nTag-Selektor `cds-avatar-stack`, weil `AvatarStackComponent` (siehe dort) ein\nElement-Selektor ist, kein `[cdsAvatar]`-Attribut trägt und sonst nicht in den\nMeta-Strip projiziert werden könnte — nötig für die vom Ticket geforderte Story\n„Mehrere Autor:innen“.\n\n**Host als Block.** `.article-header` sitzt am Host und setzt nur\n`max-width:880px;margin:0 auto`. An einem unbekannten, also `display:inline`\ngerenderten Element greift beides nicht, die Block-Kinder liefen über die\n880 px hinaus. `:host{display:block}` wie bei `cds-hero-image` und\n`cds-footer-main`; Story „Breite begrenzt“ pinnt das.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → `data-area` der Pille; ungesetzt = keine Pille (siehe Klassendoku).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {}
+          }
+        },
+        "authorName": {
+          "name": "authorName",
+          "description": "Name im Meta-Strip (`.article-meta-name`), leer = kein Meta-Strip-Autorblock.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "authorRole": {
+          "name": "authorRole",
+          "description": "Rolle im Meta-Strip (`.article-meta-role`), leer = keine Rollenzeile.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "breadcrumb": {
+          "name": "breadcrumb",
+          "description": "Breadcrumb-Pfad; letzter Eintrag rendert ohne Link mit `aria-current=\"page\"`.",
+          "type": {
+            "name": "other",
+            "value": "empty-enum"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArticleBreadcrumbItem[]"
+            },
+            "defaultValue": {
+              "summary": "[]"
+            }
+          }
+        },
+        "date": {
+          "name": "date",
+          "description": "ISO-Datum (`JJJJ-MM-TT`) → `<time datetime>`, leer = kein Datum.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "dateLabel": {
+          "name": "dateLabel",
+          "description": "Sichtbare Schreibweise des Datums; leer = `date` steht unverändert sichtbar.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "lead": {
+          "name": "lead",
+          "description": "Anreißer unter dem Titel (`.article-lead`), leer = kein Lead.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "pill": {
+          "name": "pill",
+          "description": "Pille über dem Titel (`.pill`, via `cds-pill`), leer = keine Pille.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "pillAriaLabel": {
+          "name": "pillAriaLabel",
+          "description": "`aria-label` der Pille überschreiben, siehe Klassendoku.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "title": {
+          "name": "title",
+          "description": "Titel (`.article-title`, `<h1>`).",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type ArticleHeaderComponentInputs = {\n  /** Markenbereich → `data-area` der Pille; ungesetzt = keine Pille (siehe Klassendoku). */\n  area?: CdsArea;\n  /**\n   * Name im Meta-Strip (`.article-meta-name`), leer = kein Meta-Strip-Autorblock.\n   *\n   * @default ''\n   */\n  authorName?: string;\n  /**\n   * Rolle im Meta-Strip (`.article-meta-role`), leer = keine Rollenzeile.\n   *\n   * @default ''\n   */\n  authorRole?: string;\n  /**\n   * Breadcrumb-Pfad; letzter Eintrag rendert ohne Link mit `aria-current=\"page\"`.\n   *\n   * @default []\n   */\n  breadcrumb?: CdsArticleBreadcrumbItem[];\n  /**\n   * ISO-Datum (`JJJJ-MM-TT`) → `<time datetime>`, leer = kein Datum.\n   *\n   * @default ''\n   */\n  date?: string;\n  /**\n   * Sichtbare Schreibweise des Datums; leer = `date` steht unverändert sichtbar.\n   *\n   * @default ''\n   */\n  dateLabel?: string;\n  /**\n   * Anreißer unter dem Titel (`.article-lead`), leer = kein Lead.\n   *\n   * @default ''\n   */\n  lead?: string;\n  /**\n   * Pille über dem Titel (`.pill`, via `cds-pill`), leer = keine Pille.\n   *\n   * @default ''\n   */\n  pill?: string;\n  /** `aria-label` der Pille überschreiben, siehe Klassendoku. */\n  pillAriaLabel?: string;\n  /** Titel (`.article-title`, `<h1>`). */\n  title: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "ArticleHeaderComponent",
+        "selector": "cds-article-header",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "authorName",
+          "authorRole",
+          "breadcrumb",
+          "date",
+          "dateLabel",
+          "lead",
+          "pill",
+          "pillAriaLabel",
+          "title"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/seitenmuster-wissensbeitrag-author-card.json

@@ -0,0 +1,91 @@
+{
+  "components": {
+    "seitenmuster-wissensbeitrag-author-card": {
+      "id": "seitenmuster-wissensbeitrag-author-card",
+      "name": "AuthorCardComponent",
+      "path": "./src/lib/author-card/author-card.stories.ts",
+      "description": "AuthorCard (`div[cdsAuthorCard]`) — Wrapper um `.author-card` aus css/components.css\n(css/components.css:1602–1606): der Avatar-plus-Bio-Strip am Ende eines\nWissensbeitrags, einzeln oder mehrfach in `cds-author-card-group`. Dreizehntes und\nletztes Ticket der Seitenbausteine-Serie. Ausgezählt: 17 reale Vorkommen in\n`docs/index.html` — 4 einzelstehend (2 Doku-Demos `docs/index.html:8193,8207`, 1\nArtikel-Demo `8424`, 1 reale Beispielseite `15179`) und 13 in fünf Gruppen (siehe\n`AuthorCardGroupComponent`).\n\n**Attributselektor (ADR-0008), gemessen im `is-grid`-Fall statt nur hergeleitet.**\n`.author-card-group.is-grid` (css/components.css:1555) ist `display:grid` ohne\neigenes `align-items` — der CSS-Default `stretch` gleicht die Kartenhöhen einer\nReihe deshalb NUR aus, wenn `.author-card` selbst das Grid-Kind ist. Spike-Story\n(zwei Karten, 600-px-Raster, kurze gegen deutlich längere Bio, seither wieder\ngelöscht) hat beide Varianten nebeneinander gebaut und mit `getBoundingClientRect()`\ngemessen:\n\n| Variante | Grid-Kind (Tag) | `.author-card`-Höhen | Bio-Rect (kurz / lang) |\n|---|---|---|---|\n| Element-Selektor `<cds-author-card-naive>` | `CDS-AUTHOR-CARD-NAIVE`, 204/204 px (gestreckt) | **84 / 204 px** (ungleich) | 24×73 / 144×200 px |\n| Attributselektor `div[cdsAuthorCardSpike]` | `DIV.author-card`, 204/204 px | **204 / 204 px** (gleich) | — |\n\nBeim Element-Selektor wird der UNSICHTBARE `<cds-author-card-naive>`-Host auf 204 px\ngestreckt, die sichtbare `.author-card`-Box eine Ebene darunter bleibt bei ihrer\nInhaltshöhe (84 px) — exakt der Fehler aus ADR-0008 Fall 1. Mit dem Attributselektor\nIST `.author-card` das Grid-Kind, `align-items:stretch` trifft direkt zu.\n\n**Ehrlicher Zusatz, anders als bei `cds-icon-card`: die Baseline-Screenshots beider\nSpike-Varianten waren byte-identisch** (`sha1` gleich). `.author-card` trägt (anders\nals `.ep-card`) weder Hintergrund noch Rahmen noch Schatten — der zusätzliche,\nunsichtbare Leerraum unter der kurzen Bio malt in keiner der beiden Varianten ein\nPixel. Der Fehler ist damit heute rein strukturell (falsches Boxmodell, `getBoundingClientRect()`\nauf `.author-card` lügt), nicht optisch sichtbar. Er wird real, sobald `.author-card`\nkünftig einen Rahmen/Hintergrund/Hover-Zustand bekommt, und er verfälscht schon\nheute jede Messung/Positionierung, die sich auf die tatsächliche Kartenhöhe verlässt\n(u. a. die Story „Als Raster“ unten, die genau das pinnt). Das ADR-0008-Kriterium\nist strukturell formuliert („die Stelle im DOM einnehmen, die es ohne Angular\neinnähme“), nicht optisch — der Attributselektor bleibt deshalb die richtige Wahl,\nobwohl der Effekt heute unsichtbar ist.\n\n**`area` ist bewusst NICHT Teil der API — CSS-Befund, nicht erfundene Konfiguration.**\nAlle 17 realen `.author-card`-Vorkommen tragen `data-area`, und sowohl\n`docs/index.html:8185` als auch `wissensbeitrag.mdx:199` behaupten wörtlich, das\nfärbe „nur den Avatar“. Ausgezählt gibt es aber in `css/components.css` (Light UND\nDark) KEINE einzige `.author-card[data-area=\"…\"]`-Regel — weder direkt noch über\neinen Nachfahren-Selektor auf `.article-avatar`, dessen eigene\n`[data-area]`-Färbung (css/components.css:1523–1526) ein Element-Selektor auf dem\nAvatar selbst ist, unabhängig vom Vorfahren. `data-area` auf `.author-card` ist\ndamit, gegen die Doku-Aussage, komplett wirkungslos — die Bereichsfarbe kommt\nausschließlich vom `area`-Input, den der Konsument direkt an das projizierte\n`[cdsAvatar]` bindet (siehe unten). Ein `area`-Input, der hier nur `data-area` ohne\njede CSS-Wirkung setzt, wäre eine erfundene Konfiguration ohne Gegenwert — Befund\ngemeldet, nicht im Wrapper geflickt (ADR-0001):\n`.scratch/angular-seitenbausteine/issues/24-css-luecke-author-card-data-area.md`.\n\n**Avatar projiziert über `[cdsAvatar]`, wie bei `cds-article-header`.** Der\nKonsument setzt Größe (`size=\"lg\"`, css/components.css:1527) und Bereich\n(`area=\"…\"`) direkt am projizierten `<div cdsAvatar>` — diese Komponente reicht\nnichts durch, exakt die Trennung, die `cds-article-header` bereits etabliert\n(siehe dessen Klassendoku, Abschnitt „Avatar projiziert über `[cdsAvatar]`“).\n\n**Eyebrow als `<h3>`, nur wenn gesetzt** (Beiwerk, Default `''`) — deckungsgleich\nmit allen 4 einzelstehenden realen Vorkommen: 2 tragen `<h3 class=\"author-card-eyebrow\">`\n(`docs/index.html:8196,8427`, „Über den Autor“/„Über die Autorin“, Ticket-Vorgabe:\neine Ebene unter dem `<h2>` des Article-Body), die anderen 2 (Doku-Demos ohne\numgebende Artikelstruktur) haben gar keinen. Innerhalb einer Gruppe trägt laut\n`wissensbeitrag.mdx` („Eyebrow-Konvention“) keine einzelne Karte mehr einen eigenen\nEyebrow — die Gruppen-Überschrift ersetzt sie (siehe `AuthorCardGroupComponent`);\nKonsumenten lassen `eyebrow` dafür einfach leer.\n\n**`roleLabel`, NICHT `role` wie im Ticket-Text — gemessene Abweichung, kein\nFreihand-Entscheid.** Ein erster Entwurf folgte der Ticket-API wörtlich\n(`role`-Input, mit `role=\"…\"` als schlichtem Attribut in den Stories gesetzt, wie\n`name`/`bio`/`eyebrow`). Storybooks eingebauter a11y-Check (`aria-roles`) schlug\ndarauf für JEDE Story mit echtem Rollentext fehl: `role` ist ein globales\nHTML-/ARIA-Attribut, und ein Angular-Input MIT DIESEM NAMEN wird bei einem\nungebundenen `role=\"Senior AI Engineer …\"` zwar als Startwert an den Input\ndurchgereicht, bleibt aber ZUSÄTZLICH als echtes `role`-Attribut im DOM stehen —\naxe meldete wörtlich „Roles must be one of the valid ARIA roles: Senior, AI,\nEngineer, …“, weil der Freitext als ARIA-Rolle interpretiert wird. Exakt dieselbe\nKollision umgehen `BlockquoteComponent`, `TestimonialComponent` und\n`TeamVoiceComponent` bereits mit `roleLabel` statt `role`\n(`grep -rn \"readonly role\" angular-lib/projects/design-system-angular/src/lib/`\nzeigt nur diese drei). Diese Komponente folgt demselben, bereits etablierten\nMuster statt die Kollision ein viertes Mal zu wiederholen — CSS-Klasse bleibt\nunverändert `.author-card-role`, nur der Input-Name weicht vom Ticket-Text ab.",
+      "jsDocTags": {},
+      "argTypes": {
+        "bio": {
+          "name": "bio",
+          "description": "Bio-Text (`.author-card-bio`), leer = kein Bio-Absatz.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "eyebrow": {
+          "name": "eyebrow",
+          "description": "Kicker über dem Namen (`.author-card-eyebrow`, `<h3>`), leer = keine Eyebrow.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "name": {
+          "name": "name",
+          "description": "Name (`.author-card-name`).",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "roleLabel": {
+          "name": "roleLabel",
+          "description": "Rolle/Position (`.author-card-role`), leer = keine Rollenzeile. Heißt bewusst\n`roleLabel`, nicht `role` (Kollision mit dem ARIA-Attribut `role`), siehe\nKlassendoku.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type AuthorCardComponentInputs = {\n  /**\n   * Bio-Text (`.author-card-bio`), leer = kein Bio-Absatz.\n   *\n   * @default ''\n   */\n  bio?: string;\n  /**\n   * Kicker über dem Namen (`.author-card-eyebrow`, `<h3>`), leer = keine Eyebrow.\n   *\n   * @default ''\n   */\n  eyebrow?: string;\n  /** Name (`.author-card-name`). */\n  name: string;\n  /**\n   * Rolle/Position (`.author-card-role`), leer = keine Rollenzeile. Heißt bewusst\n   * `roleLabel`, nicht `role` (Kollision mit dem ARIA-Attribut `role`), siehe\n   * Klassendoku.\n   *\n   * @default ''\n   */\n  roleLabel?: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "AuthorCardComponent",
+        "selector": "div[cdsAuthorCard]",
+        "standalone": true,
+        "inputs": [
+          "bio",
+          "eyebrow",
+          "name",
+          "roleLabel"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/seitenmuster-wissensbeitrag-avatar.json

@@ -0,0 +1,100 @@
+{
+  "components": {
+    "seitenmuster-wissensbeitrag-avatar": {
+      "id": "seitenmuster-wissensbeitrag-avatar",
+      "name": "AvatarComponent",
+      "path": "./src/lib/avatar/avatar.stories.ts",
+      "description": "Avatar (`div[cdsAvatar]`) — Wrapper um `.article-avatar` aus css/components.css\n(css/components.css:1520–1536): der Initialen-/Foto-Kreis im Meta-Strip eines\nWissensbeitrags (`.article-meta-author`), in der Author-Card (`-lg`) und im\nTeam-Tile-Grid (`-xl`). Elftes Ticket der Seitenbausteine-Serie.\n\n**Attributselektor (ADR-0008), gemessen an der Geschwister-Kette.** Ausgezählt in\n`docs/index.html`: 8 der 11 Instanzen der Grundgröße sitzen als direkte, adjazente\nGeschwister in einer von 3 `.article-avatar-stack`-Kacheln (2 Avatare in Zeilen\n8343–8344, je 3 in Zeilen 8373–8375 und 8404–8406) — genau dort greift\n`.article-avatar-stack .article-avatar + .article-avatar`\n(css/components.css:1540–1541), eine Geschwister-Kette (Kriterium `spec.md` 2b).\nEin Element-Selektor `cds-avatar`, der `.article-avatar` auf einem INNEREN Element\nrendert (wie `cds-facts` es mit `<dl>` tut, weil `<dl>` ein Custom Element nicht\nannehmen kann), würde diese Kette brechen: die beiden `.article-avatar`-Knoten\nlägen dann je eine Ebene UNTER ihrem eigenen `<cds-avatar>`-Host und wären keine\nGeschwister mehr — `+` verlangt denselben Elternknoten, egal wie dicht die Hosts\nselbst nebeneinanderstehen. Eine zweite, ebenfalls tragfähige Variante\n(Element-Selektor MIT `host: { class: 'article-avatar' }`, ohne innere\nWrapper-Ebene) hätte dieselbe Geschwister-Kette ebenso erfüllt — verworfen zugunsten\ndes Attributselektors nur wegen des zweiten, unabhängigen Grundes unten, nicht weil\nsie die Kette nicht gelöst hätte.\n\n**Gemessen, nicht nur hergeleitet.** Story „Avatar-Stapel“ (Play-Funktion) rendert\ndrei `div[cdsAvatar]` in einem `cds-avatar-stack` und misst\n`getBoundingClientRect()` der drei `.article-avatar`-Knoten: bei 40 px Kachelbreite\nund `margin-left:-12px` (css/components.css:1541) überlappen der zweite und dritte\nKreis den jeweils vorherigen um 12 px (Differenz der `left`-Koordinaten = 28 px,\nnicht 40 px) — plus Screenshot-Baseline (`visual-snapshots/…avatar-stapel.png`) als\nvisuelle Bestätigung, nicht nur die Zahl.\n\n**Zweiter, unabhängiger Grund: Wiederverwendung als Projektions-Selektor.**\n`cds-article-header` projiziert den Avatar über\n`<ng-content select=\"[cdsAvatar]\">` (siehe dessen Klassendoku) — dasselbe Attribut,\ndas hier den Host selektiert, dient dem Elternteil zugleich als\nContent-Projection-Selektor. Ein Element-Selektor bräuchte dafür eine zusätzliche,\neigens erfundene Marker-Klasse; der Attributselektor liefert die Zielscheibe für\nbeide Zwecke aus einer Hand, ohne dass der Konsument zwei Attribute schreiben muss.\n\n**Initialen werden aus `name` abgeleitet, kein eigener Input** (Ticket-Vorgabe):\nerstes Zeichen des ersten und des letzten durch Whitespace getrennten Worts, groß\n— ein einzelnes Wort liefert dessen erste zwei Zeichen. Zwei Inputs für dieselbe\nInformation (Name UND Initialen) könnten auseinanderlaufen, sobald nur eines\ngepflegt wird.\n\n**`aria-hidden=\"true\"` fest verdrahtet, kein Input.** Ausgezählt: von 53\n`.article-avatar`-Instanzen (11 Grundgröße + 17 `-lg` + 25 `-xl`) tragen 45 das\nAttribut direkt am Element; die restlichen 8 sind genau die Grundgrößen-Avatare\nINNERHALB von `.article-avatar-stack`, wo bereits der Stack-Container selbst\n`aria-hidden=\"true\"` trägt (siehe `AvatarStackComponent`) — dort wäre ein zweites\n`aria-hidden` am Kind redundant, aber unschädlich: verschachteltes `aria-hidden`\nändert nichts am Ergebnis, der Teilbaum ist so oder so für Assistenztechnologie\nunsichtbar. Der Avatar trägt es deshalb immer: 100 % Deckung mit dem Mockup im\nAlleinstand, harmlose Redundanz im Stapel.",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → `data-area` (Füllfarbe der Initialen-Kachel).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {}
+          }
+        },
+        "name": {
+          "name": "name",
+          "description": "Voller Name — Quelle der Initialen und des Bild-`alt`-Texts.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "size": {
+          "name": "size",
+          "description": "Größe (`.article-avatar` = sm, `-lg`, `-xl`).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "sm",
+              "lg",
+              "xl"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsAvatarSize"
+            },
+            "defaultValue": {
+              "summary": "sm"
+            }
+          }
+        },
+        "src": {
+          "name": "src",
+          "description": "Bildquelle; gesetzt → `<img>` ersetzt die Initialen.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type AvatarComponentInputs = {\n  /** Markenbereich → `data-area` (Füllfarbe der Initialen-Kachel). */\n  area?: CdsArea;\n  /** Voller Name — Quelle der Initialen und des Bild-`alt`-Texts. */\n  name: string;\n  /**\n   * Größe (`.article-avatar` = sm, `-lg`, `-xl`).\n   *\n   * @default sm\n   */\n  size?: CdsAvatarSize;\n  /**\n   * Bildquelle; gesetzt → `<img>` ersetzt die Initialen.\n   *\n   * @default ''\n   */\n  src?: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "AvatarComponent",
+        "selector": "div[cdsAvatar]",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "name",
+          "size",
+          "src"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}