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

package/snapshot/services/core/docgen/komponenten-navigation-topnav.json

@@ -0,0 +1,186 @@
+{
+  "components": {
+    "komponenten-navigation-topnav": {
+      "id": "komponenten-navigation-topnav",
+      "name": "TopnavComponent",
+      "path": "./src/lib/topnav/topnav.stories.ts",
+      "description": "Topnav — Wrapper um `.ep-topnav` aus css/components.css → „Topnav“.\n\nCustomer-Navigation: Logo, Top-Level-Links mit optionalem Klapp-Submenü\n(.ep-nav-has-sub / .ep-nav-sub, aria-expanded), rechts gebündelte Aktionen\n(Such-Popover .ep-nav-search + Theme-Cycle-Button) und ein CTA-Button.\nDisclosure-Logik in Angular: nur ein Menü offen, Escape und Außenklick schließen.\n\nDer Theme-Umschalter ist fest der Cycle-Button (cds-theme-cycle); ob er auch\n„System“ anbietet, steuert `showSystemTheme` (durchgereicht an dessen showSystem).",
+      "jsDocTags": {},
+      "argTypes": {
+        "activeHref": {
+          "name": "activeHref",
+          "description": "Href des aktuell aktiven Eintrags (Single Source of Truth). Nur der Eintrag\n — Top-Level ODER Sub — mit passendem href erhält aria-current=\"page\". Dadurch\n kann strukturell höchstens EINER aktiv sein (statt mehrerer current-Flags).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "ctaLabel": {
+          "name": "ctaLabel",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": "Kontakt"
+            }
+          }
+        },
+        "links": {
+          "name": "links",
+          "type": {
+            "name": "other",
+            "value": "empty-enum"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsNavItem[]"
+            },
+            "defaultValue": {
+              "summary": "[\n    {\n      label: 'Leistungen',\n      sub: [\n        { label: 'Angewandte KI', href: '#ki' },\n        { label: 'Effektive Software', href: '#software' },\n        { label: 'Wirksame Organisationen', href: '#organisationen' },\n      ],\n    },\n    {\n      label: 'Unternehmen',\n      sub: [\n        { label: 'Über uns', href: '#ueber-uns' },\n        { label: 'Team', href: '#team' },\n        { label: 'Jobs', href: '#jobs' },\n      ],\n    },\n    { label: 'Beiträge', href: '#beitraege' },\n    { label: 'Kontakt', href: '#kontakt' },\n  ]"
+            }
+          }
+        },
+        "logo": {
+          "name": "logo",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": "conciso."
+            }
+          }
+        },
+        "logoAlt": {
+          "name": "logoAlt",
+          "description": "Alt-Text des Logo-Bilds (Fallback: der Text aus `logo`).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "logoDarkSrc": {
+          "name": "logoDarkSrc",
+          "description": "Optionale helle Logo-Variante für den Dark Mode (Doku: logo-conciso-light.svg).\n Gesetzt → Theme-Swap via .logo-themed-* (schaltet über [data-theme] um);\n sonst wird logoSrc in beiden Themes gezeigt.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "logoSrc": {
+          "name": "logoSrc",
+          "description": "Optionales Logo-Bild/-Icon (URL oder Data-URI). Gesetzt → statt des Text-Logos.\n Doku: immer SVG (logo-conciso.svg), Default-Variante für helle Hintergründe.",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "showCta": {
+          "name": "showCta",
+          "description": "Kontakt-/CTA-Button anzeigen.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": true
+            }
+          }
+        },
+        "showSearch": {
+          "name": "showSearch",
+          "description": "Suche (Icon + Popover) rechts anzeigen.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": true
+            }
+          }
+        },
+        "showSystemTheme": {
+          "name": "showSystemTheme",
+          "description": "Bietet der Theme-Cycle-Button im Header auch „System“ an (tri) oder nur Hell/Dunkel?",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": true
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type TopnavComponentInputs = {\n  /**\n   * Href des aktuell aktiven Eintrags (Single Source of Truth). Nur der Eintrag\n   *  — Top-Level ODER Sub — mit passendem href erhält aria-current=\"page\". Dadurch\n   *  kann strukturell höchstens EINER aktiv sein (statt mehrerer current-Flags).\n   */\n  activeHref?: string;\n  /** @default Kontakt */\n  ctaLabel?: string;\n  /**\n   * @default [\n   *     {\n   *       label: 'Leistungen',\n   *       sub: [\n   *         { label: 'Angewandte KI', href: '#ki' },\n   *         { label: 'Effektive Software', href: '#software' },\n   *         { label: 'Wirksame Organisationen', href: '#organisationen' },\n   *       ],\n   *     },\n   *     {\n   *       label: 'Unternehmen',\n   *       sub: [\n   *         { label: 'Über uns', href: '#ueber-uns' },\n   *         { label: 'Team', href: '#team' },\n   *         { label: 'Jobs', href: '#jobs' },\n   *       ],\n   *     },\n   *     { label: 'Beiträge', href: '#beitraege' },\n   *     { label: 'Kontakt', href: '#kontakt' },\n   *   ]\n   */\n  links?: CdsNavItem[];\n  /** @default conciso. */\n  logo?: string;\n  /**\n   * Alt-Text des Logo-Bilds (Fallback: der Text aus `logo`).\n   *\n   * @default ''\n   */\n  logoAlt?: string;\n  /**\n   * Optionale helle Logo-Variante für den Dark Mode (Doku: logo-conciso-light.svg).\n   *  Gesetzt → Theme-Swap via .logo-themed-* (schaltet über [data-theme] um);\n   *  sonst wird logoSrc in beiden Themes gezeigt.\n   */\n  logoDarkSrc?: string;\n  /**\n   * Optionales Logo-Bild/-Icon (URL oder Data-URI). Gesetzt → statt des Text-Logos.\n   *  Doku: immer SVG (logo-conciso.svg), Default-Variante für helle Hintergründe.\n   */\n  logoSrc?: string;\n  /**\n   * Kontakt-/CTA-Button anzeigen.\n   *\n   * @default true\n   */\n  showCta?: boolean;\n  /**\n   * Suche (Icon + Popover) rechts anzeigen.\n   *\n   * @default true\n   */\n  showSearch?: boolean;\n  /**\n   * Bietet der Theme-Cycle-Button im Header auch „System“ an (tri) oder nur Hell/Dunkel?\n   *\n   * @default true\n   */\n  showSystemTheme?: boolean;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "TopnavComponent",
+        "selector": "cds-topnav",
+        "standalone": true,
+        "inputs": [
+          "activeHref",
+          "ctaLabel",
+          "links",
+          "logo",
+          "logoAlt",
+          "logoDarkSrc",
+          "logoSrc",
+          "showCta",
+          "showSearch",
+          "showSystemTheme"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-sektion-sektion.json

@@ -0,0 +1,113 @@
+{
+  "components": {
+    "komponenten-sektion-sektion": {
+      "id": "komponenten-sektion-sektion",
+      "name": "SectionComponent",
+      "path": "./src/lib/section/section.stories.ts",
+      "description": "Section (`[cdsSection]`) — Wrapper um `.ep-section` aus css/components.css\n(css/components.css:1223–1253, mobiler Innenabstand: Zeile 1228) mit dem optionalen\nKopf-Trio `.ep-section-label` (Kicker) / `.ep-section-h2` (Überschrift) /\n`.ep-section-sub` (Lead). Das strukturelle Grundgerüst, in dem auf den\nBeispielseiten praktisch jeder andere Baustein sitzt (133 Vorkommen, 85 davon mit\nKopfzeile).\n\nAlle drei Textteile sind Beiwerk (`input('')`): eine Sektion besteht auch ganz ohne\nKopf, nur aus ihrem projizierten Inhalt (docs/index.html:9378). Der Inhalt selbst\nkommt per `<ng-content>` und ist deshalb kein Input.\n\n**Entscheidung 1 — Attributselektor, der Konsument wählt `<section>` oder `<div>`.**\nErste Fassung war `cds-section` als eigenes Element, das intern selbst entschied:\n`<section aria-labelledby=\"…\">`, wenn ein zugänglicher Name verfügbar war, sonst ein\nnamenloses `<div>`. Das setzte voraus, dass ein `background` auf einem\nUMSCHLIESSENDEN Element sitzen musste (siehe Entscheidung 2) — gemessen im laufenden\nStorybook (siehe `docs/adr/0008-selektortyp-der-wrapper-komponenten.md`, „Fall 2“):\n`getComputedStyle(host).backgroundColor` und `host.getBoundingClientRect()`\nmeldeten beide „passt“, der Screenshot zeigte trotzdem keine gemalte Fläche — ein\nunbekanntes Custom Element ohne eigene Inline-Inhalte, dessen einziges Kind als Block\nherausgebrochen wird, hat keine eigene Box zum Malen.\n\nDie Komponente hängt sich deshalb als Attribut an ein vom Konsumenten geschriebenes\n`<section>` oder `<div>`, analog zu `cds-icon-card`\n(`icon-card/icon-card.component.ts`). Der Konsument entscheidet über das Tag, ob die\nSektion überhaupt eine `<section>`-Landmark werden KANN; die Komponente entscheidet\nnur noch, ob sie `aria-labelledby` setzt (die eigene, gerenderte `.ep-section-h2` hat\nVorrang, sonst — wenn `heading` leer bleibt — die per `labelledBy` übergebene id einer\nÜberschrift außerhalb der Komponente). Schreibt der Konsument `<section cdsSection>`\nohne Namen, bleibt es bei einer `<section>` ohne `aria-labelledby`: HTML-AAM gibt ihr\ndann keine Landmark-Rolle, aber das ist eine Entscheidung des Konsumenten, keine der\nKomponente — sie erzwingt kein Tag mehr.\n\n**Entscheidung 2 — kein `background`-Input, die Fläche darf jetzt aber am Host\nsitzen.** Das Mockup setzt Sektionsflächen inline (`style=\"background:var(--bg-surface)\"`\n/ `--co-50` / …). Das ist der Flächen-Rhythmus zwischen aufeinanderfolgenden\nSektionen einer SEITE (Begründung inkl. Messwerten in docs/index.html:1450, „Warum\nnicht die Sektion senken?“) — eine Entscheidung, die nur die Seite treffen kann, weil\nnur sie ihre Nachbar-Sektionen kennt. Ein Bauteil kennt seinen Kontext nicht\n(CONTRIBUTING.md §7) und bekäme mit einem `background`-Input eine Zuständigkeit, die\nihm nicht zusteht. Der Konsument setzt die Fläche deshalb weiterhin selbst — jetzt\naber direkt auf dem Element, das `cdsSection` trägt (`<section cdsSection\nstyle=\"background:…\">` bzw. `<div cdsSection style=\"…\">`), denn dieses Element IST\n`.ep-section`, kein Host mehr davor. Das umschließende Element aus der ersten Fassung\nist damit nicht mehr nötig (siehe Story „Fläche am Host“).",
+      "jsDocTags": {},
+      "argTypes": {
+        "area": {
+          "name": "area",
+          "description": "Markenbereich → `.t-{area}` auf dem Label (Mockup: `class=\"ep-section-label t-co\"`).",
+          "type": {
+            "name": "enum",
+            "value": [
+              "co",
+              "ki",
+              "es",
+              "wo"
+            ]
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsArea"
+            },
+            "defaultValue": {}
+          }
+        },
+        "heading": {
+          "name": "heading",
+          "description": "Sektions-Überschrift (`.ep-section-h2`, leer = keine Überschrift).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "label": {
+          "name": "label",
+          "description": "Kicker-Text über der Überschrift (`.ep-section-label`, leer = keine Kopfzeile).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "labelledBy": {
+          "name": "labelledBy",
+          "description": "Id einer Überschrift AUSSERHALB der Komponente, die als zugänglicher Name dient,\nwenn `heading` leer bleibt (siehe Entscheidung 1 in der Klassendoku).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "sub": {
+          "name": "sub",
+          "description": "Lead-Text unter der Überschrift (`.ep-section-sub`, leer = kein Lead).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type SectionComponentInputs = {\n  /** Markenbereich → `.t-{area}` auf dem Label (Mockup: `class=\"ep-section-label t-co\"`). */\n  area?: CdsArea;\n  /**\n   * Sektions-Überschrift (`.ep-section-h2`, leer = keine Überschrift).\n   *\n   * @default ''\n   */\n  heading?: string;\n  /**\n   * Kicker-Text über der Überschrift (`.ep-section-label`, leer = keine Kopfzeile).\n   *\n   * @default ''\n   */\n  label?: string;\n  /**\n   * Id einer Überschrift AUSSERHALB der Komponente, die als zugänglicher Name dient,\n   * wenn `heading` leer bleibt (siehe Entscheidung 1 in der Klassendoku).\n   *\n   * @default ''\n   */\n  labelledBy?: string;\n  /**\n   * Lead-Text unter der Überschrift (`.ep-section-sub`, leer = kein Lead).\n   *\n   * @default ''\n   */\n  sub?: string;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "SectionComponent",
+        "selector": "section[cdsSection], div[cdsSection]",
+        "standalone": true,
+        "inputs": [
+          "area",
+          "heading",
+          "label",
+          "labelledBy",
+          "sub"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-slider-carousel-carousel.json

@@ -0,0 +1,92 @@
+{
+  "components": {
+    "komponenten-slider-carousel-carousel": {
+      "id": "komponenten-slider-carousel-carousel",
+      "name": "CarouselComponent",
+      "path": "./src/lib/carousel/carousel.stories.ts",
+      "description": "Carousel — Wrapper um `.img-slider` aus css/components.css → „Bild-Slider“.\n\nCrossfade-Carousel: alle Slides liegen gestapelt im Grid, die aktive trägt\n`.active` (opacity). Inaktive Slides bekommen zusätzlich `[aria-hidden]`, sonst\nläse ein Screenreader Titel und Text jeder Folie vor, obwohl visuell nur eine\nsichtbar ist (identisches Muster wie beim LogoCarousel). Prev/Next-Buttons\n(.img-slider-btn) und Dots (.img-dot) steuern den Index. Optionale Hero-Variante\n(.img-slider-hero). Ohne Bild-URL wird ein neutraler Platzhalter gezeigt. Der\naktive Index ist über `[(active)]` (model) beobacht-/steuerbar.",
+      "jsDocTags": {},
+      "argTypes": {
+        "active": {
+          "name": "active",
+          "description": "Aktiver Slide-Index. Two-Way (`[(active)]`) via model().",
+          "type": {
+            "name": "number"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "number"
+            },
+            "defaultValue": {
+              "summary": 0
+            }
+          }
+        },
+        "hero": {
+          "name": "hero",
+          "description": "Hero-Variante (vollflächig, 21:9, Caption als Overlay) → .img-slider-hero.",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        },
+        "slides": {
+          "name": "slides",
+          "description": "Anzuzeigende Slides (Bild optional, Titel/Text je Slide Pflicht).",
+          "type": {
+            "name": "other",
+            "value": "empty-enum",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsSlide[]"
+            },
+            "defaultValue": {}
+          }
+        },
+        "activeChange": {
+          "name": "activeChange",
+          "description": "Aktiver Slide-Index. Two-Way (`[(active)]`) via model().",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "activeChange",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "(e: number) => void"
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type CarouselComponentInputs = {\n  /**\n   * Aktiver Slide-Index. Two-Way (`[(active)]`) via model().\n   *\n   * @default 0\n   */\n  active?: number; // two-way: [(active)]\n  /**\n   * Hero-Variante (vollflächig, 21:9, Caption als Overlay) → .img-slider-hero.\n   *\n   * @default false\n   */\n  hero?: boolean;\n  /** Anzuzeigende Slides (Bild optional, Titel/Text je Slide Pflicht). */\n  slides: CdsSlide[];\n}\n```\n\n## Outputs\n\n```\nexport type CarouselComponentOutputs = {\n  /** Aktiver Slide-Index. Two-Way (`[(active)]`) via model(). */\n  activeChange: (e: number) => void;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "CarouselComponent",
+        "selector": "cds-carousel",
+        "standalone": true,
+        "inputs": [
+          "active",
+          "hero",
+          "slides"
+        ],
+        "outputs": [
+          "activeChange"
+        ],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-slider-carousel-logocarousel.json

@@ -0,0 +1,92 @@
+{
+  "components": {
+    "komponenten-slider-carousel-logocarousel": {
+      "id": "komponenten-slider-carousel-logocarousel",
+      "name": "LogoCarouselComponent",
+      "path": "./src/lib/logo-carousel/logo-carousel.stories.ts",
+      "description": "LogoCarousel — Wrapper um `.logo-carousel` aus css/components.css → „Logo-Carousel“.\n\nDiskrete Sets von je fünf Logos, die automatisch per Crossfade wechseln\n(`[aria-hidden]` je Slide). Das Autoplay pausiert bei Maus-Hover und Tastatur-Fokus\n(damit Nutzer in Ruhe lesen/bedienen können), zusätzlich dauerhaft über den\nPause-Button (.logo-carousel-pause, sichtbar bei Hover/Fokus bzw. im .paused-Zustand);\nDots wählen ein Set direkt. Autoplay respektiert prefers-reduced-motion.\n\nDer Timer wird zentral über ein `effect` gesteuert: er läuft nur, wenn NICHT\npausiert, NICHT gehovert, NICHT fokussiert und reduzierte Bewegung nicht gewünscht\nist. Eine Änderung des `interval` startet ihn automatisch neu.\n\nJede Kachel ist ein `cds-logo`: bevorzugt ein Bild (`src`), sonst der Text als\nPlatzhalter/Fallback. Standardmäßig sind reine Text-Platzhalter gesetzt – reale\nAnwendungen übergeben ihre Kundenlogos als Bilder.",
+      "jsDocTags": {},
+      "argTypes": {
+        "active": {
+          "name": "active",
+          "description": "Aktives Set. Two-Way (`[(active)]`) via model().",
+          "type": {
+            "name": "number"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "number"
+            },
+            "defaultValue": {
+              "summary": 0
+            }
+          }
+        },
+        "interval": {
+          "name": "interval",
+          "description": "Autoplay-Intervall in **Millisekunden** (Standard 6000 = 6 s).",
+          "type": {
+            "name": "number"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "number"
+            },
+            "defaultValue": {
+              "summary": 6000
+            }
+          }
+        },
+        "sets": {
+          "name": "sets",
+          "description": "Logo-Sets, die im Wechsel angezeigt werden (mind. ein Eintrag je Set).",
+          "type": {
+            "name": "other",
+            "value": "empty-enum",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "CdsLogo[][]"
+            },
+            "defaultValue": {}
+          }
+        },
+        "activeChange": {
+          "name": "activeChange",
+          "description": "Aktives Set. Two-Way (`[(active)]`) via model().",
+          "type": {
+            "name": "other",
+            "value": "void"
+          },
+          "action": "activeChange",
+          "table": {
+            "category": "outputs",
+            "type": {
+              "summary": "(e: number) => void"
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type LogoCarouselComponentInputs = {\n  /**\n   * Aktives Set. Two-Way (`[(active)]`) via model().\n   *\n   * @default 0\n   */\n  active?: number; // two-way: [(active)]\n  /**\n   * Autoplay-Intervall in **Millisekunden** (Standard 6000 = 6 s).\n   *\n   * @default 6000\n   */\n  interval?: number;\n  /** Logo-Sets, die im Wechsel angezeigt werden (mind. ein Eintrag je Set). */\n  sets: CdsLogo[][];\n}\n```\n\n## Outputs\n\n```\nexport type LogoCarouselComponentOutputs = {\n  /** Aktives Set. Two-Way (`[(active)]`) via model(). */\n  activeChange: (e: number) => void;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "LogoCarouselComponent",
+        "selector": "cds-logo-carousel",
+        "standalone": true,
+        "inputs": [
+          "active",
+          "interval",
+          "sets"
+        ],
+        "outputs": [
+          "activeChange"
+        ],
+        "enums": []
+      }
+    }
+  }
+}

package/snapshot/services/core/docgen/komponenten-tabelle-tabelle.json

@@ -0,0 +1,74 @@
+{
+  "components": {
+    "komponenten-tabelle-tabelle": {
+      "id": "komponenten-tabelle-tabelle",
+      "name": "TableComponent",
+      "path": "./src/lib/table/table.stories.ts",
+      "description": "Table (`cds-table`) — Wrapper um `.tbl`/`.tbl-wrap` aus css/components.css\n(css/components.css:1462–1480): die Datentabelle der Doku-Site (`sec-table`,\nNav-Einträge „Standard“ und „Gestreift“). Ausgezählt: außerhalb von `sec-table`\nselbst kommt `.tbl-wrap` nur zweimal vor, beide auf Beitragsseiten\n(`docs/index.html:8622`, `15080`) — keine der 24 Beispielseiten außerhalb von\nWissensbeiträgen setzt aktuell eine Tabelle ein. Neuntes Ticket der\nSeitenbausteine-Serie.\n\n**Kein Daten-Input.** Eine `columns`/`rows`-API würde Zellinhalte auf Strings\nfestlegen; die Beispielseiten setzen darin Badges, Links und `data-num`\n(`docs/index.html:5076–5177`). Der Konsument projiziert `<thead>`/`<tbody>`/\n`<tfoot>` unverändert per `<ng-content>`, die Komponente liefert nur die\nHülle: `.tbl-wrap`, `.tbl`, `<caption>` und die Striped-Klasse.\n\n**`caption` ist Pflicht (`input.required<string>()`), abweichend von der\nTicket-Skizze (dort `caption? = ''`).** Die eigene Doku dieser Komponente\n(`storybook-angular/src/docs/komponenten/tabelle.mdx:137`) nennt `<caption>`\nausdrücklich „Pflicht, Screenreader lesen den Titel vor, bevor die Zellen\nvorgelesen werden“ und wiederholt das in den Dos (`tabelle.mdx:147`:\n„`<caption>` und `scope`-Attribute immer setzen, auch bei einfachen\nTabellen“). Ausgezählt: alle 5 realen `.tbl`-Vorkommen in `docs/index.html`\nhaben eine `<caption>`, ausnahmslos. Ein optionaler Input mit Default `''`\nhätte genau den Fall erlaubt, den die eigene Doku verbietet — nach\nADR-0007 §2 ist `caption` damit Inhalt, nicht Beiwerk: ohne sie ist eine\n`cds-table` eine Tabelle, die die eigenen Barrierefreiheitsregeln bricht,\nalso sinnlos. Ein vergessenes Binding wirft jetzt `NG0950`, statt eine\nunbeschriftete Tabelle still auszuliefern.\n\n**Element-Selektor, `.tbl-wrap`/`.tbl` sitzen im eigenen Template, nicht am\nHost (ADR-0008-Standardfall, analog zu `cds-facts`/`cds-faq`).** Ausgezählt:\nalle 5 `.tbl-wrap`-Vorkommen in `docs/index.html` (Zeilen 5061, 5116, 5236,\n8622, 15080). Keines ist selbst ein direktes Grid-/Flex-Kind — das einzige\nVorkommen in einem `.layout-grid` (Zeile 5236) sitzt eine Ebene tiefer in\neinem `.col-8`, das seinerseits der Grid-Child ist; `.tbl-wrap` ist dort ein\ngewöhnlicher Block-Nachfahre, dessen Breite vom umschließenden `.col-8`\nkommt, nicht von `align-items:stretch` auf einer bestimmten DOM-Tiefe (kein\n`.ep-card`-Fall). Keines trägt eine `col-*`-Klasse selbst, keines variiert\ndas Tag (immer `<div class=\"tbl-wrap\">`). Ein `<cds-table>`-Host ohne eigene\nKlasse und ohne eigenes `background` gerät deshalb nicht in den „Fläche am\nHost“-Fall aus ADR-0008 Fall 2: die Komponente setzt nichts auf dem Host,\ndas eine eigene Box bräuchte, `.tbl-wrap` bleibt ein normaler Block-Nachfahre\nunabhängig vom `display` des `<cds-table>`-Hosts (derselbe Grund, warum\n`cds-facts`/`cds-faq` als Element-Selektor funktionieren).\n\nEine Attributselektor-Variante direkt am `<table>` (`table[cdsTable]`, analog\nzu `cdsSection`) wurde erwogen und verworfen: `<table>` ist als Tag ohnehin\nfix (kein Tag-Wechsel wie bei `cdsIconCard`), aber `.tbl-wrap` bräuchte dann\nein ZWEITES Element, das der Konsument von Hand um die Tabelle schreiben\nmüsste (`<div class=\"tbl-wrap\" tabindex=\"0\" role=\"region\" aria-label=\"…\">\n<table cdsTable>…`) — genau die beiden Aufgaben, die laut Ticket am ehesten\nvergessen werden (fokussierbarer, benannter Scroll-Container), blieben dann\nbeim Konsumenten statt bei der Komponente. Der Element-Selektor hält Wrap und\nTabelle zusammen in einem Template.\n\n**Geprüft im laufenden Storybook (Story „Interaktiv“, Play-Funktion):**\n`<table class=\"tbl\">` liegt direkt unter `<div class=\"tbl-wrap\">`, `<caption>`\nist ihr erstes Kind, danach folgen ohne zusätzlichen Knoten dazwischen genau\ndie projizierten `<thead>`/`<tbody>`-Elemente — `<ng-content>` fügt selbst\nkein DOM-Element ein, es verschiebt nur die vom Konsumenten geschriebenen\nnativen Elemente an ihre Stelle. Damit bleibt die Tabellenstruktur (`<table>`\n→ `<caption>` + `<thead>` + `<tbody>` + optional `<tfoot>`, keine fremde\nEbene dazwischen) exakt so gültig wie im rohen Markup.\n\n**`.tbl-wrap` ist immer fokussierbar UND immer benannt.** Das CSS gibt dem\nScroll-Container einen eigenen `:focus-visible`-Ring\n(css/components.css:1463) — ein scrollbarer Bereich muss per Tastatur\nerreichbar sein (WCAG 2.1.1), `tabindex=\"0\"` steht deshalb fest im Template.\n`role=\"region\"` braucht laut HTML-AAM einen zugänglichen Namen, sonst bekäme\nder Bereich keine Landmark-Rolle — weil `caption` jetzt Pflicht ist, kann\n`accessibleName()` (`scrollLabel() || caption()`) nicht mehr leer werden,\n`role`/`aria-label` sind deshalb unbedingt gesetzt, kein Nullfall mehr zu\nbehandeln. `scrollLabel` bleibt eine optionale Überschreibung (Vorrang vor\n`caption`) für Fälle, in denen der sichtbare Tabellentitel für den\nScroll-Container zu lang oder zu unspezifisch wäre.\n\n**`.tbl-sort` bleibt außen vor.** Die Klasse existiert\n(css/components.css:1477–1482), die Sortierlogik nicht — kein zugehöriges\nJS in `docs/main.js` für die Beispielseiten. Ein Wrapper, der nur den\nButton-Look lieferte, täuschte Funktion vor, die es nicht gibt. Siehe\n`.scratch/angular-seitenbausteine/issues/19-fehlende-sortierlogik-tbl-sort.md`.",
+      "jsDocTags": {},
+      "argTypes": {
+        "caption": {
+          "name": "caption",
+          "description": "Überschrift der Tabelle (`<caption>`, erstes Kind) — Pflicht, siehe Klassendoku.",
+          "type": {
+            "name": "string",
+            "required": true
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {}
+          }
+        },
+        "scrollLabel": {
+          "name": "scrollLabel",
+          "description": "Zugänglicher Name des Scroll-Containers (`aria-label` auf `.tbl-wrap`), hat\nVorrang vor `caption`. Leer = `caption` wird zum Namen (siehe Klassendoku).",
+          "type": {
+            "name": "string"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "string"
+            },
+            "defaultValue": {
+              "summary": ""
+            }
+          }
+        },
+        "striped": {
+          "name": "striped",
+          "description": "Alternierende Zeilenfarbe für Tabellen mit vielen Zeilen (`.tbl--striped`).",
+          "type": {
+            "name": "boolean"
+          },
+          "table": {
+            "category": "inputs",
+            "type": {
+              "summary": "boolean"
+            },
+            "defaultValue": {
+              "summary": false
+            }
+          }
+        }
+      },
+      "apiDescription": "## Inputs\n\n```\nexport type TableComponentInputs = {\n  /** Überschrift der Tabelle (`<caption>`, erstes Kind) — Pflicht, siehe Klassendoku. */\n  caption: string;\n  /**\n   * Zugänglicher Name des Scroll-Containers (`aria-label` auf `.tbl-wrap`), hat\n   * Vorrang vor `caption`. Leer = `caption` wird zum Namen (siehe Klassendoku).\n   *\n   * @default ''\n   */\n  scrollLabel?: string;\n  /**\n   * Alternierende Zeilenfarbe für Tabellen mit vielen Zeilen (`.tbl--striped`).\n   *\n   * @default false\n   */\n  striped?: boolean;\n}\n```",
+      "renderer": "angular",
+      "angularComponentMeta": {
+        "name": "TableComponent",
+        "selector": "cds-table",
+        "standalone": true,
+        "inputs": [
+          "caption",
+          "scrollLabel",
+          "striped"
+        ],
+        "outputs": [],
+        "enums": []
+      }
+    }
+  }
+}