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

package/snapshot/services/core/story-docs/komponenten-hero-hero-bild.json

@@ -0,0 +1,37 @@
+{
+  "components": {
+    "komponenten-hero-hero-bild": {
+      "id": "komponenten-hero-hero-bild",
+      "name": "HeroImageComponent",
+      "path": "./src/lib/hero-image/hero-image.stories.ts",
+      "stories": {
+        "komponenten-hero-hero-bild--interaktiv": {
+          "id": "komponenten-hero-hero-bild--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { HeroImageComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [HeroImageComponent],\n  template: `\n    <cds-hero-image\n        [src]=\"src\"\n        [alt]=\"alt\"\n        [eyebrow]=\"eyebrow\"\n        [heading]=\"heading\"\n        [text]=\"text\"\n        [headingLevel]=\"headingLevel\"\n        [eager]=\"eager\"\n        [objectPosition]=\"objectPosition\">\n    </cds-hero-image>`,\n})\nexport class DemoComponent {\n  src = 'data:image/svg+xml,%3Csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'1600\\'%20height=\\'686\\'%3E%3Crect%20width=\\'1600\\'%20height=\\'686\\'%20fill=\\'%23E8EDED\\'/%3E%3Ctext%20x=\\'800\\'%20y=\\'343\\'%20font-family=\\'sans-serif\\'%20font-size=\\'28\\'%20fill=\\'%236E8585\\'%20text-anchor=\\'middle\\'%20dominant-baseline=\\'middle\\'%3EHero-Bild%2021%3A9%3C/text%3E%3C/svg%3E';\n  alt = 'Conciso-Team geht gemeinsam über ein sonniges Industriegelände';\n  eyebrow = 'Seit 2016 · Dortmund';\n  heading = 'Klare Köpfe. Ruhige Energie.';\n  text = 'KI, Software und Organisationsentwicklung aus Dortmund.';\n  headingLevel = 1;\n  eager = true;\n  objectPosition = '';\n}"
+        },
+        "komponenten-hero-hero-bild--ohne-caption": {
+          "id": "komponenten-hero-hero-bild--ohne-caption",
+          "name": "Ohne Caption",
+          "snippet": "import { Component } from '@angular/core';\nimport { HeroImageComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [HeroImageComponent],\n  template: `<cds-hero-image [src]=\"src\" [alt]=\"alt\"></cds-hero-image>`,\n})\nexport class DemoComponent {\n  src = 'data:image/svg+xml,%3Csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'1600\\'%20height=\\'686\\'%3E%3Crect%20width=\\'1600\\'%20height=\\'686\\'%20fill=\\'%23E8EDED\\'/%3E%3Ctext%20x=\\'800\\'%20y=\\'343\\'%20font-family=\\'sans-serif\\'%20font-size=\\'28\\'%20fill=\\'%236E8585\\'%20text-anchor=\\'middle\\'%20dominant-baseline=\\'middle\\'%3EHero-Bild%2021%3A9%3C/text%3E%3C/svg%3E';\n  alt = 'Conciso-Team geht gemeinsam über ein sonniges Industriegelände';\n}"
+        },
+        "komponenten-hero-hero-bild--beitrags-hero": {
+          "id": "komponenten-hero-hero-bild--beitrags-hero",
+          "name": "Beitrags-Hero (h2)",
+          "snippet": "import { Component } from '@angular/core';\nimport { HeroImageComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [HeroImageComponent],\n  template: `\n    <h1\n        style=\"font:var(--ty-headline-md);margin:0 0 var(--s4)\">\n        Warum 60 % der KI-Piloten nie in Produktion gehen\n    </h1>\n    <cds-hero-image\n        src=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='686'%3E%3Crect%20width='1600'%20height='686'%20fill='%23E8EDED'/%3E%3Ctext%20x='800'%20y='343'%20font-family='sans-serif'%20font-size='28'%20fill='%236E8585'%20text-anchor='middle'%20dominant-baseline='middle'%3EHero-Bild%2021%3A9%3C/text%3E%3C/svg%3E\"\n        alt=\"Whiteboard mit handgezeichneter Matrix der Achsen AI Value und AI Readiness\"\n        eyebrow=\"8 min Lesezeit\"\n        heading=\"Readiness statt Begeisterung\"\n        text=\"Was 200 KI-Implementierungen über den Weg in die Produktion zeigen.\"\n        [headingLevel]=\"2\">\n    </cds-hero-image>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-hero-hero-bild--bildausschnitt": {
+          "id": "komponenten-hero-hero-bild--bildausschnitt",
+          "name": "Bildausschnitt",
+          "snippet": "import { Component } from '@angular/core';\nimport { HeroImageComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [HeroImageComponent],\n  template: `\n    <cds-hero-image\n        [src]=\"'data:image/svg+xml,%3Csvg%20xmlns=\\\\'http://www.w3.org/2000/svg\\\\'%20width=\\\\'1600\\\\'%20height=\\\\'686\\\\'%3E%3Crect%20width=\\\\'1600\\\\'%20height=\\\\'686\\\\'%20fill=\\\\'%23E8EDED\\\\'/%3E%3Ctext%20x=\\\\'800\\\\'%20y=\\\\'343\\\\'%20font-family=\\\\'sans-serif\\\\'%20font-size=\\\\'28\\\\'%20fill=\\\\'%236E8585\\\\'%20text-anchor=\\\\'middle\\\\'%20dominant-baseline=\\\\'middle\\\\'%3EHero-Bild%2021%3A9%3C/text%3E%3C/svg%3E'\"\n        [alt]=\"'Conciso-Team geht gemeinsam über ein sonniges Industriegelände'\"\n        [eyebrow]=\"'Seit 2016 · Dortmund'\"\n        [heading]=\"'Klare Köpfe. Ruhige Energie.'\"\n        [text]=\"'KI, Software und Organisationsentwicklung aus Dortmund.'\"\n        [headingLevel]=\"1\"\n        [eager]=\"true\"\n        [objectPosition]=\"''\"\n    />`,\n})\nexport class DemoComponent {}",
+          "warning": "Incomplete snippet: ``\n      <p style=\"font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--tx-muted);margin:var(--s4) var(--s6) var(--s1)\">Ohne objectPosition (Default: center center)</p>\n      <cds-hero-image\n        src=\"${portraitPlaceholder}\"\n        alt=\"Testbild mit drei Banden Kopf, Mitte, Fuß, ohne gesetzten Bildausschnitt\"\n      ></cds-hero-image>\n      <p style=\"font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--tx-muted);margin:var(--s6) var(--s6) var(--s1)\">Mit objectPosition=\"center 10%\"</p>\n      <cds-hero-image\n        src=\"${portraitPlaceholder}\"\n        alt=\"Dasselbe Testbild mit Bildausschnitt auf die obere Bande\"\n        objectPosition=\"center 10%\"\n      ></cds-hero-image>\n    `` could not be resolved statically."
+        },
+        "komponenten-hero-hero-bild--als-sprungziel": {
+          "id": "komponenten-hero-hero-bild--als-sprungziel",
+          "name": "Als Sprungziel",
+          "snippet": "import { Component } from '@angular/core';\nimport { HeroImageComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [HeroImageComponent],\n  template: `\n    <a href=\"#hauptinhalt\">Zum Inhalt springen</a>\n    <cds-hero-image\n        id=\"hauptinhalt\"\n        tabindex=\"-1\"\n        src=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='686'%3E%3Crect%20width='1600'%20height='686'%20fill='%23E8EDED'/%3E%3Ctext%20x='800'%20y='343'%20font-family='sans-serif'%20font-size='28'%20fill='%236E8585'%20text-anchor='middle'%20dominant-baseline='middle'%3EHero-Bild%2021%3A9%3C/text%3E%3C/svg%3E\"\n        alt=\"Conciso-Team geht gemeinsam über ein sonniges Industriegelände\">\n    </cds-hero-image>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-hero-st/303/266rer.json

@@ -0,0 +1,26 @@
+{
+  "components": {
+    "komponenten-hero-störer": {
+      "id": "komponenten-hero-störer",
+      "name": "StoererSetComponent",
+      "path": "./src/lib/stoerer/stoerer.stories.ts",
+      "stories": {
+        "komponenten-hero-störer--interaktiv": {
+          "id": "komponenten-hero-störer--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { StoererSetComponent } from '@conciso/design-system-angular';\nimport { StoererComponent, HeroImageComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [StoererSetComponent, StoererComponent, HeroImageComponent],\n  template: `\n    <cds-stoerer-set [label]=\"label\">\n        <cds-stoerer\n            topic=\"Nächste Veranstaltung\"\n            title=\"Effizienz durch n8n\"\n            href=\"#veranstaltung\"\n            date=\"2026-12-03\"\n            meta=\"Dortmund\">\n            <svg\n                cdsIcon\n                class=\"stoerer-icon\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5\" />\n            </svg>\n        </cds-stoerer>\n        <cds-stoerer\n            topic=\"Neu im Wissen\"\n            title=\"Warum 60 % der KI-Piloten nie in Produktion gehen\"\n            href=\"#wissensbeitrag\"\n            date=\"2026-05-13\"\n            meta=\"8 min Lesezeit\">\n            <svg\n                cdsIcon\n                class=\"stoerer-icon\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z\" />\n            </svg>\n        </cds-stoerer>\n    </cds-stoerer-set>`,\n})\nexport class DemoComponent {\n  label = 'Aktuelles';\n}"
+        },
+        "komponenten-hero-störer--zwei-kacheln-ueber-dem-hero": {
+          "id": "komponenten-hero-störer--zwei-kacheln-ueber-dem-hero",
+          "name": "Zwei Kacheln über dem Hero",
+          "snippet": "import { Component } from '@angular/core';\nimport { StoererSetComponent } from '@conciso/design-system-angular';\nimport { StoererComponent, HeroImageComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [StoererSetComponent, StoererComponent, HeroImageComponent],\n  template: `\n    <div class=\"stoerer-hero\">\n        <cds-hero-image\n            src=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='686'%3E%3Crect%20width='1600'%20height='686'%20fill='%23E8EDED'/%3E%3Ctext%20x='800'%20y='343'%20font-family='sans-serif'%20font-size='28'%20fill='%236E8585'%20text-anchor='middle'%20dominant-baseline='middle'%3EHero-Bild%2021%3A9%3C/text%3E%3C/svg%3E\"\n            alt=\"Conciso-Team geht gemeinsam über ein sonniges Industriegelände\"\n            eyebrow=\"Seit 2016 · Dortmund\"\n            heading=\"KI, Software und Organisation für den Mittelstand.\"\n            text=\"Pragmatisch geplant, kraftvoll umgesetzt.\">\n        </cds-hero-image>\n        <cds-stoerer-set>\n            <cds-stoerer\n                topic=\"Nächste Veranstaltung\"\n                title=\"Effizienz durch n8n\"\n                href=\"#veranstaltung\"\n                date=\"2026-12-03\"\n                meta=\"Dortmund\">\n                <svg\n                    cdsIcon\n                    class=\"stoerer-icon\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\">\n                    <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5\" />\n                </svg>\n            </cds-stoerer>\n            <cds-stoerer\n                topic=\"Neu im Wissen\"\n                title=\"Warum 60 % der KI-Piloten nie in Produktion gehen\"\n                href=\"#wissensbeitrag\"\n                date=\"2026-05-13\"\n                meta=\"8 min Lesezeit\">\n                <svg\n                    cdsIcon\n                    class=\"stoerer-icon\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\">\n                    <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z\" />\n                </svg>\n            </cds-stoerer>\n        </cds-stoerer-set>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-hero-störer--ohne-meta": {
+          "id": "komponenten-hero-störer--ohne-meta",
+          "name": "Ohne Meta",
+          "snippet": "import { Component } from '@angular/core';\nimport { StoererSetComponent } from '@conciso/design-system-angular';\nimport { StoererComponent, HeroImageComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [StoererSetComponent, StoererComponent, HeroImageComponent],\n  template: `\n    <cds-stoerer-set label=\"Aktuelles\">\n        <cds-stoerer\n            topic=\"Neues Seminar\"\n            title=\"Scrum Master Kurs, neue Termine ab Oktober\"\n            href=\"#seminar\">\n            <svg\n                cdsIcon\n                class=\"stoerer-icon\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n                focusable=\"false\">\n                <path\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    d=\"M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z\" />\n            </svg>\n        </cds-stoerer>\n    </cds-stoerer-set>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-inputs-forms-auswahlfeld.json

@@ -0,0 +1,32 @@
+{
+  "components": {
+    "komponenten-inputs-forms-auswahlfeld": {
+      "id": "komponenten-inputs-forms-auswahlfeld",
+      "name": "SelectFieldComponent",
+      "path": "./src/lib/field/select-field.stories.ts",
+      "stories": {
+        "komponenten-inputs-forms-auswahlfeld--interaktiv": {
+          "id": "komponenten-inputs-forms-auswahlfeld--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { SelectFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SelectFieldComponent],\n  template: `\n    <cds-select-field\n        [label]=\"'Bereich'\"\n        [options]=\"['Bitte wählen', 'Corporate', 'AI.Applied', 'Eff. Software']\"\n        [helper]=\"'Worum geht es?'\"\n        [error]=\"''\"\n        [required]=\"false\"\n        [fieldId]=\"'demo-area'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-auswahlfeld--deaktiviert": {
+          "id": "komponenten-inputs-forms-auswahlfeld--deaktiviert",
+          "name": "Deaktiviert",
+          "snippet": "import { Component } from '@angular/core';\nimport { SelectFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SelectFieldComponent],\n  template: `\n    <cds-select-field\n        [label]=\"'Bereich'\"\n        [options]=\"['Bitte wählen', 'Corporate', 'AI.Applied', 'Eff. Software']\"\n        [helper]=\"'Worum geht es?'\"\n        [error]=\"''\"\n        [required]=\"false\"\n        [fieldId]=\"'demo-area-disabled'\"\n        [disabled]=\"true\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-auswahlfeld--leere-optionsliste": {
+          "id": "komponenten-inputs-forms-auswahlfeld--leere-optionsliste",
+          "name": "Leere Optionsliste",
+          "snippet": "import { Component } from '@angular/core';\nimport { SelectFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SelectFieldComponent],\n  template: `\n    <cds-select-field\n        [label]=\"'Bereich'\"\n        [options]=\"[]\"\n        [helper]=\"'Worum geht es?'\"\n        [error]=\"''\"\n        [required]=\"false\"\n        [fieldId]=\"'demo-area-empty'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-auswahlfeld--formularbindung": {
+          "id": "komponenten-inputs-forms-auswahlfeld--formularbindung",
+          "name": "Formularbindung",
+          "snippet": "import { Component } from '@angular/core';\nimport { SelectFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SelectFieldComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s3);max-width:28rem\">\n        <cds-select-field\n            label=\"Bereich\"\n            [options]=\"options\"\n            fieldId=\"form-area\"\n            [formControl]=\"ctrl\">\n        </cds-select-field>\n        <p style=\"font:14px/1.4 system-ui,sans-serif;margin:0\">\n            Wert:\n            <strong>{{ ctrl.value || '—' }}</strong>\n        </p>\n    </div>`,\n})\nexport class DemoComponent {\n  options = ['Bitte wählen', 'Corporate', 'AI.Applied', 'Eff. Software'];\n}",
+          "warning": "Incomplete snippet: `ctrl` could not be provided, since the story declares no such arg."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-inputs-forms-checkbox.json

@@ -0,0 +1,32 @@
+{
+  "components": {
+    "komponenten-inputs-forms-checkbox": {
+      "id": "komponenten-inputs-forms-checkbox",
+      "name": "CheckboxComponent",
+      "path": "./src/lib/checkbox/checkbox.stories.ts",
+      "stories": {
+        "komponenten-inputs-forms-checkbox--interaktiv": {
+          "id": "komponenten-inputs-forms-checkbox--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { CheckboxComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CheckboxComponent],\n  template: `\n    <cds-checkbox\n        [label]=\"'Ich bin einverstanden, dass meine E-Mail-Adresse für den Versand des Newsletters verwendet wird.'\"\n        [linkLabel]=\"'Datenschutzhinweise'\"\n        [linkHref]=\"'#'\"\n        [required]=\"true\"\n        [checked]=\"false\"\n        [disabled]=\"false\"\n        [area]=\"'co'\"\n        (checkedChange)=\"checkedChange($event)\"\n        (disabledChange)=\"disabledChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  checkedChange(event: unknown) {}\n  disabledChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-checkbox--deaktiviert": {
+          "id": "komponenten-inputs-forms-checkbox--deaktiviert",
+          "name": "Deaktiviert",
+          "snippet": "import { Component } from '@angular/core';\nimport { CheckboxComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CheckboxComponent],\n  template: `\n    <cds-checkbox\n        [label]=\"'Ich bin einverstanden, dass meine E-Mail-Adresse für den Versand des Newsletters verwendet wird.'\"\n        [linkLabel]=\"'Datenschutzhinweise'\"\n        [linkHref]=\"'#'\"\n        [required]=\"true\"\n        [checked]=\"false\"\n        [disabled]=\"true\"\n        [area]=\"'co'\"\n        (checkedChange)=\"checkedChange($event)\"\n        (disabledChange)=\"disabledChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  checkedChange(event: unknown) {}\n  disabledChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-checkbox--tastatur": {
+          "id": "komponenten-inputs-forms-checkbox--tastatur",
+          "name": "Tastatur",
+          "snippet": "import { Component } from '@angular/core';\nimport { CheckboxComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CheckboxComponent],\n  template: `\n    <cds-checkbox\n        [label]=\"'Ich bin einverstanden, dass meine E-Mail-Adresse für den Versand des Newsletters verwendet wird.'\"\n        [linkLabel]=\"'Datenschutzhinweise'\"\n        [linkHref]=\"'#'\"\n        [required]=\"true\"\n        [checked]=\"false\"\n        [disabled]=\"false\"\n        [area]=\"'co'\"\n        (checkedChange)=\"checkedChange($event)\"\n        (disabledChange)=\"disabledChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  checkedChange(event: unknown) {}\n  disabledChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-checkbox--lesbarer-zustand": {
+          "id": "komponenten-inputs-forms-checkbox--lesbarer-zustand",
+          "name": "Lesbarer Zustand",
+          "snippet": "import { Component } from '@angular/core';\nimport { CheckboxComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CheckboxComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s3);max-width:34rem\">\n        <cds-checkbox\n            label=\"Ich stimme der Datenverarbeitung zu.\"\n            [required]=\"true\"\n            [(checked)]=\"state.consent\">\n        </cds-checkbox>\n        <cds-checkbox\n            label=\"Newsletter abonnieren (optional).\"\n            [(checked)]=\"state.newsletter\">\n        </cds-checkbox>\n        <p style=\"font:14px/1.4 system-ui,sans-serif;margin:0\">\n            Zustand:\n            <strong>{{ zustand() }}</strong>\n        </p>\n        <button\n            type=\"button\"\n            class=\"btn btn-primary\"\n            [disabled]=\"!state.consent\">\n            Absenden\n        </button>\n    </div>`,\n})\nexport class DemoComponent {\n  checkedChange(event: unknown) {}\n}",
+          "warning": "Incomplete snippet: `state`, `zustand` could not be provided, since the story declares no such arg."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-inputs-forms-radio.json

@@ -0,0 +1,32 @@
+{
+  "components": {
+    "komponenten-inputs-forms-radio": {
+      "id": "komponenten-inputs-forms-radio",
+      "name": "RadioGroupComponent",
+      "path": "./src/lib/radio-group/radio-group.stories.ts",
+      "stories": {
+        "komponenten-inputs-forms-radio--interaktiv": {
+          "id": "komponenten-inputs-forms-radio--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { RadioGroupComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [RadioGroupComponent],\n  template: `\n    <cds-radio-group\n        [legend]=\"'Bevorzugter Kontaktweg'\"\n        [options]=\"['E-Mail', 'Telefon', 'Beides']\"\n        [value]=\"'E-Mail'\"\n        [required]=\"false\"\n        [disabled]=\"false\"\n        [area]=\"'co'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-radio--deaktiviert": {
+          "id": "komponenten-inputs-forms-radio--deaktiviert",
+          "name": "Deaktiviert",
+          "snippet": "import { Component } from '@angular/core';\nimport { RadioGroupComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [RadioGroupComponent],\n  template: `\n    <cds-radio-group\n        [legend]=\"'Bevorzugter Kontaktweg'\"\n        [options]=\"['E-Mail', 'Telefon', 'Beides']\"\n        [value]=\"'E-Mail'\"\n        [required]=\"false\"\n        [disabled]=\"true\"\n        [area]=\"'co'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-radio--tastatur": {
+          "id": "komponenten-inputs-forms-radio--tastatur",
+          "name": "Tastatur",
+          "snippet": "import { Component } from '@angular/core';\nimport { RadioGroupComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [RadioGroupComponent],\n  template: `\n    <cds-radio-group\n        [legend]=\"'Bevorzugter Kontaktweg'\"\n        [options]=\"['E-Mail', 'Telefon', 'Beides']\"\n        [value]=\"'E-Mail'\"\n        [required]=\"false\"\n        [disabled]=\"false\"\n        [area]=\"'co'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-radio--formularbindung": {
+          "id": "komponenten-inputs-forms-radio--formularbindung",
+          "name": "Formularbindung",
+          "snippet": "import { Component } from '@angular/core';\nimport { RadioGroupComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [RadioGroupComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s3);max-width:28rem\">\n        <cds-radio-group\n            legend=\"Bevorzugter Kontaktweg\"\n            [options]=\"options\"\n            [formControl]=\"ctrl\">\n        </cds-radio-group>\n        <p style=\"font:14px/1.4 system-ui,sans-serif;margin:0\">\n            Wert:\n            <strong>{{ ctrl.value || '—' }}</strong>\n        </p>\n    </div>`,\n})\nexport class DemoComponent {\n  options = ['E-Mail', 'Telefon', 'Beides'];\n}",
+          "warning": "Incomplete snippet: `ctrl` could not be provided, since the story declares no such arg."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-inputs-forms-skala.json

@@ -0,0 +1,42 @@
+{
+  "components": {
+    "komponenten-inputs-forms-skala": {
+      "id": "komponenten-inputs-forms-skala",
+      "name": "ScaleComponent",
+      "path": "./src/lib/scale/scale.stories.ts",
+      "stories": {
+        "komponenten-inputs-forms-skala--interaktiv": {
+          "id": "komponenten-inputs-forms-skala--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { ScaleComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ScaleComponent],\n  template: `\n    <cds-scale\n        [label]=\"'Zufriedenheit'\"\n        [labels]=\"['Sehr unzufrieden', 'Unzufrieden', 'Neutral', 'Zufrieden', 'Sehr zufrieden']\"\n        [value]=\"2\"\n        [area]=\"'co'\"\n        [helper]=\"''\"\n        [disabled]=\"false\"\n        [scaleId]=\"'demo-scale'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-skala--deaktiviert": {
+          "id": "komponenten-inputs-forms-skala--deaktiviert",
+          "name": "Deaktiviert",
+          "snippet": "import { Component } from '@angular/core';\nimport { ScaleComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ScaleComponent],\n  template: `\n    <cds-scale\n        [label]=\"'Zufriedenheit'\"\n        [labels]=\"['Sehr unzufrieden', 'Unzufrieden', 'Neutral', 'Zufrieden', 'Sehr zufrieden']\"\n        [value]=\"2\"\n        [area]=\"'co'\"\n        [helper]=\"''\"\n        [disabled]=\"true\"\n        [scaleId]=\"'demo-scale-disabled'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-skala--stufen": {
+          "id": "komponenten-inputs-forms-skala--stufen",
+          "name": "Verschiedene Skalen",
+          "snippet": "import { Component } from '@angular/core';\nimport { ScaleComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ScaleComponent],\n  template: `\n    <div style=\"display:grid;gap:32px;max-width:460px\">\n        <cds-scale\n            scaleId=\"sc-3\"\n            area=\"co\"\n            label=\"Priorität\"\n            [labels]=\"['Niedrig','Mittel','Hoch']\"\n            [value]=\"1\">\n        </cds-scale>\n        <cds-scale\n            scaleId=\"sc-4\"\n            area=\"ki\"\n            label=\"Häufigkeit\"\n            [labels]=\"['nie','selten','oft','immer']\"\n            [value]=\"2\">\n        </cds-scale>\n        <cds-scale\n            scaleId=\"sc-5\"\n            area=\"es\"\n            label=\"Erfahrung\"\n            [labels]=\"['Einsteiger','Fortgeschritten','Erfahren','Experte']\"\n            [value]=\"1\">\n        </cds-scale>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-inputs-forms-skala--label-ueberlappung": {
+          "id": "komponenten-inputs-forms-skala--label-ueberlappung",
+          "name": "Label-Kollision bei schmaler Breite",
+          "snippet": "import { Component } from '@angular/core';\nimport { ScaleComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ScaleComponent],\n  template: `\n    <div style=\"width:432px\">\n        <cds-scale\n            scaleId=\"sc-overlap\"\n            area=\"co\"\n            label=\"Zufriedenheit\"\n            [labels]=\"['Sehr unzufrieden','Unzufrieden','Neutral','Zufrieden','Sehr zufrieden']\"\n            [value]=\"2\"\n            helper=\"Pflichtfeld\">\n        </cds-scale>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-inputs-forms-skala--label-ueberlappung-schmal": {
+          "id": "komponenten-inputs-forms-skala--label-ueberlappung-schmal",
+          "name": "Label-Kollision bei sehr schmaler Breite",
+          "snippet": "import { Component } from '@angular/core';\nimport { ScaleComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ScaleComponent],\n  template: `\n    <div style=\"width:380px\">\n        <cds-scale\n            scaleId=\"sc-overlap-narrow\"\n            area=\"co\"\n            label=\"Zufriedenheit\"\n            [labels]=\"['Sehr unzufrieden','Unzufrieden','Neutral','Zufrieden','Sehr zufrieden']\"\n            [value]=\"2\"\n            helper=\"Pflichtfeld\">\n        </cds-scale>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-inputs-forms-skala--formularbindung": {
+          "id": "komponenten-inputs-forms-skala--formularbindung",
+          "name": "Formularbindung",
+          "snippet": "import { Component } from '@angular/core';\nimport { ScaleComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [ScaleComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s3);max-width:28rem\">\n        <cds-scale\n            label=\"Zufriedenheit\"\n            scaleId=\"form-scale\"\n            [labels]=\"labels\"\n            [formControl]=\"ctrl\">\n        </cds-scale>\n        <p style=\"font:14px/1.4 system-ui,sans-serif;margin:0\">\n            Index:\n            <strong>{{ ctrl.value }}</strong>\n        </p>\n    </div>`,\n})\nexport class DemoComponent {\n  labels = ['Sehr unzufrieden', 'Unzufrieden', 'Neutral', 'Zufrieden', 'Sehr zufrieden'];\n}",
+          "warning": "Incomplete snippet: `ctrl` could not be provided, since the story declares no such arg."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-inputs-forms-slider.json

@@ -0,0 +1,37 @@
+{
+  "components": {
+    "komponenten-inputs-forms-slider": {
+      "id": "komponenten-inputs-forms-slider",
+      "name": "SliderComponent",
+      "path": "./src/lib/slider/slider.stories.ts",
+      "stories": {
+        "komponenten-inputs-forms-slider--interaktiv": {
+          "id": "komponenten-inputs-forms-slider--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { SliderComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SliderComponent],\n  template: `\n    <cds-slider\n        [label]=\"'Budget-Rahmen'\"\n        [area]=\"'co'\"\n        [min]=\"10000\"\n        [max]=\"100000\"\n        [step]=\"5000\"\n        [value]=\"50000\"\n        [unit]=\"' €'\"\n        [tickCount]=\"5\"\n        [minTickSpacing]=\"56\"\n        [helper]=\"'Schritte: 5.000 €'\"\n        [disabled]=\"false\"\n        [sliderId]=\"'demo-slider'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-slider--deaktiviert": {
+          "id": "komponenten-inputs-forms-slider--deaktiviert",
+          "name": "Deaktiviert",
+          "snippet": "import { Component } from '@angular/core';\nimport { SliderComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SliderComponent],\n  template: `\n    <cds-slider\n        [label]=\"'Budget-Rahmen'\"\n        [area]=\"'co'\"\n        [min]=\"10000\"\n        [max]=\"100000\"\n        [step]=\"5000\"\n        [value]=\"50000\"\n        [unit]=\"' €'\"\n        [tickCount]=\"5\"\n        [minTickSpacing]=\"56\"\n        [helper]=\"'Schritte: 5.000 €'\"\n        [disabled]=\"true\"\n        [sliderId]=\"'demo-slider-disabled'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-slider--auto-ticks": {
+          "id": "komponenten-inputs-forms-slider--auto-ticks",
+          "name": "Ticks (auto-reduziert)",
+          "snippet": "import { Component } from '@angular/core';\nimport { SliderComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SliderComponent],\n  template: `\n    <div style=\"display:grid;gap:32px\">\n        <div style=\"max-width:520px\">\n            <cds-slider\n                sliderId=\"s-wide\"\n                label=\"Breit — 7 Ticks\"\n                [tickCount]=\"7\">\n            </cds-slider>\n        </div>\n        <div style=\"max-width:200px\">\n            <cds-slider\n                sliderId=\"s-narrow\"\n                label=\"Schmal — reduziert\"\n                [tickCount]=\"7\">\n            </cds-slider>\n        </div>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-inputs-forms-slider--pro-bereich": {
+          "id": "komponenten-inputs-forms-slider--pro-bereich",
+          "name": "Je Bereich",
+          "snippet": "import { Component } from '@angular/core';\nimport { SliderComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SliderComponent],\n  template: `\n    <div style=\"display:grid;gap:24px;max-width:420px\">\n        <cds-slider area=\"co\" sliderId=\"s-co\" label=\"Corporate\"></cds-slider>\n        <cds-slider area=\"ki\" sliderId=\"s-ki\" label=\"AI.Applied\"></cds-slider>\n        <cds-slider area=\"es\" sliderId=\"s-es\" label=\"Eff. Software\"></cds-slider>\n        <cds-slider area=\"wo\" sliderId=\"s-wo\" label=\"Wirks. Orga\"></cds-slider>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-inputs-forms-slider--formularbindung": {
+          "id": "komponenten-inputs-forms-slider--formularbindung",
+          "name": "Formularbindung",
+          "snippet": "import { Component } from '@angular/core';\nimport { SliderComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SliderComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s3);max-width:28rem\">\n        <cds-slider\n            label=\"Budget-Rahmen\"\n            sliderId=\"form-slider\"\n            [formControl]=\"ctrl\">\n        </cds-slider>\n        <p style=\"font:14px/1.4 system-ui,sans-serif;margin:0\">\n            Wert:\n            <strong>{{ ctrl.value }}</strong>\n        </p>\n    </div>`,\n})\nexport class DemoComponent {}",
+          "warning": "Incomplete snippet: `ctrl` could not be provided, since the story declares no such arg."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-inputs-forms-textbereich.json

@@ -0,0 +1,27 @@
+{
+  "components": {
+    "komponenten-inputs-forms-textbereich": {
+      "id": "komponenten-inputs-forms-textbereich",
+      "name": "TextareaFieldComponent",
+      "path": "./src/lib/field/textarea-field.stories.ts",
+      "stories": {
+        "komponenten-inputs-forms-textbereich--interaktiv": {
+          "id": "komponenten-inputs-forms-textbereich--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { TextareaFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TextareaFieldComponent],\n  template: `\n    <cds-textarea-field\n        [label]=\"'Nachricht'\"\n        [placeholder]=\"'Ihre Nachricht an uns'\"\n        [helper]=\"'Mind. 20 Zeichen.'\"\n        [error]=\"''\"\n        [required]=\"false\"\n        [fieldId]=\"'demo-message'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-textbereich--deaktiviert": {
+          "id": "komponenten-inputs-forms-textbereich--deaktiviert",
+          "name": "Deaktiviert",
+          "snippet": "import { Component } from '@angular/core';\nimport { TextareaFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TextareaFieldComponent],\n  template: `\n    <cds-textarea-field\n        [label]=\"'Nachricht'\"\n        [placeholder]=\"'Ihre Nachricht an uns'\"\n        [helper]=\"'Mind. 20 Zeichen.'\"\n        [error]=\"''\"\n        [required]=\"false\"\n        [fieldId]=\"'demo-message-disabled'\"\n        [disabled]=\"true\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-textbereich--formularbindung": {
+          "id": "komponenten-inputs-forms-textbereich--formularbindung",
+          "name": "Formularbindung",
+          "snippet": "import { Component } from '@angular/core';\nimport { TextareaFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TextareaFieldComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s3);max-width:28rem\">\n        <cds-textarea-field\n            label=\"Nachricht\"\n            placeholder=\"Ihre Nachricht an uns\"\n            fieldId=\"form-message\"\n            [formControl]=\"ctrl\">\n        </cds-textarea-field>\n        <p style=\"font:14px/1.4 system-ui,sans-serif;margin:0\">\n            Zeichen:\n            <strong>{{ ctrl.value?.length || 0 }}</strong>\n        </p>\n    </div>`,\n})\nexport class DemoComponent {}",
+          "warning": "Incomplete snippet: `ctrl` could not be provided, since the story declares no such arg."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-inputs-forms-textfeld.json

@@ -0,0 +1,32 @@
+{
+  "components": {
+    "komponenten-inputs-forms-textfeld": {
+      "id": "komponenten-inputs-forms-textfeld",
+      "name": "TextFieldComponent",
+      "path": "./src/lib/field/text-field.stories.ts",
+      "stories": {
+        "komponenten-inputs-forms-textfeld--interaktiv": {
+          "id": "komponenten-inputs-forms-textfeld--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { TextFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TextFieldComponent],\n  template: `\n    <cds-text-field\n        [label]=\"'E-Mail'\"\n        [type]=\"'email'\"\n        [placeholder]=\"'name@firma.de'\"\n        [helper]=\"'Wir nutzen die Adresse ausschließlich für die Antwort.'\"\n        [error]=\"''\"\n        [required]=\"true\"\n        [fieldId]=\"'demo-email'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-textfeld--fehlerzustand": {
+          "id": "komponenten-inputs-forms-textfeld--fehlerzustand",
+          "name": "Fehlerzustand",
+          "snippet": "import { Component } from '@angular/core';\nimport { TextFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TextFieldComponent],\n  template: `\n    <cds-text-field\n        [label]=\"'E-Mail'\"\n        [type]=\"'email'\"\n        [placeholder]=\"'name@firma.de'\"\n        [helper]=\"'Wir nutzen die Adresse ausschließlich für die Antwort.'\"\n        [error]=\"'Bitte eine gültige E-Mail-Adresse eingeben.'\"\n        [required]=\"true\"\n        [fieldId]=\"'demo-email-error'\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-textfeld--deaktiviert": {
+          "id": "komponenten-inputs-forms-textfeld--deaktiviert",
+          "name": "Deaktiviert",
+          "snippet": "import { Component } from '@angular/core';\nimport { TextFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TextFieldComponent],\n  template: `\n    <cds-text-field\n        [label]=\"'E-Mail'\"\n        [type]=\"'email'\"\n        [placeholder]=\"'name@firma.de'\"\n        [helper]=\"'Wir nutzen die Adresse ausschließlich für die Antwort.'\"\n        [error]=\"''\"\n        [required]=\"true\"\n        [fieldId]=\"'demo-email-disabled'\"\n        [disabled]=\"true\"\n        (disabledChange)=\"disabledChange($event)\"\n        (valueChange)=\"valueChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  disabledChange(event: unknown) {}\n  valueChange(event: unknown) {}\n}"
+        },
+        "komponenten-inputs-forms-textfeld--formularbindung": {
+          "id": "komponenten-inputs-forms-textfeld--formularbindung",
+          "name": "Formularbindung",
+          "snippet": "import { Component } from '@angular/core';\nimport { TextFieldComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TextFieldComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s3);max-width:28rem\">\n        <cds-text-field\n            label=\"E-Mail\"\n            type=\"email\"\n            placeholder=\"name@firma.de\"\n            fieldId=\"demo-email-form\"\n            [formControl]=\"ctrl\">\n        </cds-text-field>\n        <p style=\"font:14px/1.4 system-ui,sans-serif;margin:0\">\n            Wert:\n            <strong>{{ ctrl.value || '—' }}</strong>\n        </p>\n    </div>`,\n})\nexport class DemoComponent {}",
+          "warning": "Incomplete snippet: `ctrl` could not be provided, since the story declares no such arg."
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-navigation-topnav.json

@@ -0,0 +1,26 @@
+{
+  "components": {
+    "komponenten-navigation-topnav": {
+      "id": "komponenten-navigation-topnav",
+      "name": "TopnavComponent",
+      "path": "./src/lib/topnav/topnav.stories.ts",
+      "stories": {
+        "komponenten-navigation-topnav--interaktiv": {
+          "id": "komponenten-navigation-topnav--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { TopnavComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TopnavComponent],\n  template: `\n    <cds-topnav\n        [logo]=\"'conciso.'\"\n        [logoSrc]=\"'./conciso/brand/logo-conciso.svg'\"\n        [logoDarkSrc]=\"'./conciso/brand/logo-conciso-light.svg'\"\n        [logoAlt]=\"'Conciso'\"\n        [ctaLabel]=\"'Kontakt'\"\n        [activeHref]=\"'#kontakt'\"\n        [showSearch]=\"true\"\n        [showCta]=\"true\"\n        [showSystemTheme]=\"true\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-navigation-topnav--minimal": {
+          "id": "komponenten-navigation-topnav--minimal",
+          "name": "Ohne Suche & Kontakt",
+          "snippet": "import { Component } from '@angular/core';\nimport { TopnavComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TopnavComponent],\n  template: `\n    <cds-topnav\n        [logo]=\"'conciso.'\"\n        [logoSrc]=\"'./conciso/brand/logo-conciso.svg'\"\n        [logoDarkSrc]=\"'./conciso/brand/logo-conciso-light.svg'\"\n        [logoAlt]=\"'Conciso'\"\n        [ctaLabel]=\"'Kontakt'\"\n        [activeHref]=\"'#kontakt'\"\n        [showSearch]=\"false\"\n        [showCta]=\"false\"\n        [showSystemTheme]=\"true\"\n    />`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-navigation-topnav--doppelte-labels": {
+          "id": "komponenten-navigation-topnav--doppelte-labels",
+          "name": "Doppelte Labels",
+          "snippet": "import { Component } from '@angular/core';\nimport { TopnavComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TopnavComponent],\n  template: `\n    <cds-topnav\n        [logo]=\"'conciso.'\"\n        [logoSrc]=\"'./conciso/brand/logo-conciso.svg'\"\n        [logoDarkSrc]=\"'./conciso/brand/logo-conciso-light.svg'\"\n        [logoAlt]=\"'Conciso'\"\n        [ctaLabel]=\"'Kontakt'\"\n        [activeHref]=\"'#kontakt'\"\n        [showSearch]=\"true\"\n        [showCta]=\"true\"\n        [showSystemTheme]=\"true\"\n        [links]=\"[{label: 'Leistungen', sub: [{label: 'Übersicht', href: '#l'}, {label: 'Beratung', href: '#b'}]}, {label: 'Wissen', sub: [{label: 'Übersicht', href: '#w'}, {label: 'Übersicht', href: '#w2'}]}, {label: 'Wissen', href: '#wissen'}]\"\n    />`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-sektion-sektion.json

@@ -0,0 +1,41 @@
+{
+  "components": {
+    "komponenten-sektion-sektion": {
+      "id": "komponenten-sektion-sektion",
+      "name": "SectionComponent",
+      "path": "./src/lib/section/section.stories.ts",
+      "stories": {
+        "komponenten-sektion-sektion--interaktiv": {
+          "id": "komponenten-sektion-sektion--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { SectionComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SectionComponent],\n  template: `\n    <section\n        cdsSection\n        [label]=\"label\"\n        [heading]=\"heading\"\n        [sub]=\"sub\"\n        [area]=\"area\">\n        <p\n            style=\"font:var(--ty-body-md);color:var(--tx-secondary);margin:0\">\n            Beliebiger Inhalt unterhalb des Kopfes, hier ein einfacher Absatz als Platzhalter.\n        </p>\n    </section>`,\n})\nexport class DemoComponent {\n  label = 'Was wir tun';\n  heading = 'Drei Bereiche. Ein Maßstab.';\n  sub = 'Sie stärken sich gegenseitig. Wir denken sie zusammen, nicht nebeneinander.';\n  area = 'co';\n}"
+        },
+        "komponenten-sektion-sektion--ohne-kopf": {
+          "id": "komponenten-sektion-sektion--ohne-kopf",
+          "name": "Ohne Kopf",
+          "snippet": "import { Component } from '@angular/core';\nimport { SectionComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SectionComponent],\n  template: `\n    <div cdsSection>\n        <p\n            style=\"font:var(--ty-body-md);color:var(--tx-secondary);margin:0\">\n            Eine Sektion besteht auch ganz ohne Kopf, nur aus ihrem projizierten Inhalt.\n        </p>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-sektion-sektion--benannt-von-aussen": {
+          "id": "komponenten-sektion-sektion--benannt-von-aussen",
+          "name": "Benannt von außen",
+          "snippet": "import { Component } from '@angular/core';\nimport { SectionComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SectionComponent],\n  template: `\n    <h2\n        id=\"story-section-externe-ueberschrift\"\n        style=\"font:var(--ty-headline-md);margin:0 0 var(--s4)\">\n        Externe Überschrift oberhalb der Sektion\n    </h2>\n    <section cdsSection labelledBy=\"story-section-externe-ueberschrift\">\n        <p\n            style=\"font:var(--ty-body-md);color:var(--tx-secondary);margin:0\">\n            Kein eigener Kopf, der zugängliche Name kommt von der Überschrift darüber.\n        </p>\n    </section>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-sektion-sektion--nur-ueberschrift": {
+          "id": "komponenten-sektion-sektion--nur-ueberschrift",
+          "name": "Nur Überschrift",
+          "snippet": "import { Component } from '@angular/core';\nimport { SectionComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SectionComponent],\n  template: `\n    <section cdsSection [heading]=\"heading\">\n        <p\n            style=\"font:var(--ty-body-md);color:var(--tx-secondary);margin:0\">\n            Kicker und Lead bleiben hier leer, nur die Überschrift ist gesetzt.\n        </p>\n    </section>`,\n})\nexport class DemoComponent {\n  heading = 'Drei Bereiche. Ein Maßstab.';\n}"
+        },
+        "komponenten-sektion-sektion--bereichsgefaerbtes-label": {
+          "id": "komponenten-sektion-sektion--bereichsgefaerbtes-label",
+          "name": "Bereichsgefärbtes Label",
+          "snippet": "import { Component } from '@angular/core';\nimport { SectionComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SectionComponent],\n  template: `\n    <div style=\"display:flex;flex-direction:column;gap:var(--s6)\">\n        <section\n            cdsSection\n            label=\"Corporate\"\n            area=\"co\"\n            heading=\"Marke &amp; Haltung\">\n        </section>\n        <section\n            cdsSection\n            label=\"AI.Applied\"\n            area=\"ki\"\n            heading=\"Angewandte KI\">\n        </section>\n        <section\n            cdsSection\n            label=\"Effektive Software\"\n            area=\"es\"\n            heading=\"Schlanke Systeme\">\n        </section>\n        <section\n            cdsSection\n            label=\"Wirksame Organisationen\"\n            area=\"wo\"\n            heading=\"Starke Teams\">\n        </section>\n    </div>`,\n})\nexport class DemoComponent {}"
+        },
+        "komponenten-sektion-sektion--flaeche-am-host": {
+          "id": "komponenten-sektion-sektion--flaeche-am-host",
+          "name": "Fläche am Host",
+          "snippet": "import { Component } from '@angular/core';\nimport { SectionComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [SectionComponent],\n  template: `\n    <section\n        cdsSection\n        heading=\"Getönte Fläche direkt am Host\"\n        style=\"background:var(--n-50);border-radius:var(--r-lg)\">\n        <p\n            style=\"font:var(--ty-body-md);color:var(--tx-secondary);margin:0\">\n            Kein umschließendes Element mehr nötig: style sitzt direkt auf dem Element, das cdsSection trägt.\n        </p>\n    </section>`,\n})\nexport class DemoComponent {}"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-slider-carousel-carousel.json

@@ -0,0 +1,31 @@
+{
+  "components": {
+    "komponenten-slider-carousel-carousel": {
+      "id": "komponenten-slider-carousel-carousel",
+      "name": "CarouselComponent",
+      "path": "./src/lib/carousel/carousel.stories.ts",
+      "stories": {
+        "komponenten-slider-carousel-carousel--interaktiv": {
+          "id": "komponenten-slider-carousel-carousel--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { CarouselComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CarouselComponent],\n  template: `\n    <cds-carousel\n        [active]=\"0\"\n        [hero]=\"false\"\n        [slides]=\"[{title: 'Strategie-Workshop', text: 'Gemeinsam Ziele schärfen und Prioritäten setzen.'}, {title: 'Team-Enablement', text: 'Wissen teilen, Verantwortung verteilen, Wirkung erhöhen.'}, {title: 'Go-Live', text: 'Vom Prototyp zur produktiven Lösung, messbar und stabil.'}]\"\n        (activeChange)=\"activeChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  activeChange(event: unknown) {}\n}"
+        },
+        "komponenten-slider-carousel-carousel--hero": {
+          "id": "komponenten-slider-carousel-carousel--hero",
+          "name": "Hero",
+          "snippet": "import { Component } from '@angular/core';\nimport { CarouselComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CarouselComponent],\n  template: `\n    <cds-carousel\n        [active]=\"0\"\n        [hero]=\"true\"\n        [slides]=\"[{title: 'Strategie-Workshop', text: 'Gemeinsam Ziele schärfen und Prioritäten setzen.'}, {title: 'Team-Enablement', text: 'Wissen teilen, Verantwortung verteilen, Wirkung erhöhen.'}, {title: 'Go-Live', text: 'Vom Prototyp zur produktiven Lösung, messbar und stabil.'}]\"\n        (activeChange)=\"activeChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  activeChange(event: unknown) {}\n}"
+        },
+        "komponenten-slider-carousel-carousel--tastatur-dots": {
+          "id": "komponenten-slider-carousel-carousel--tastatur-dots",
+          "name": "Tastatur (Dots)",
+          "snippet": "import { Component } from '@angular/core';\nimport { CarouselComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CarouselComponent],\n  template: `\n    <cds-carousel\n        [active]=\"0\"\n        [hero]=\"false\"\n        [slides]=\"[{title: 'Strategie-Workshop', text: 'Gemeinsam Ziele schärfen und Prioritäten setzen.'}, {title: 'Team-Enablement', text: 'Wissen teilen, Verantwortung verteilen, Wirkung erhöhen.'}, {title: 'Go-Live', text: 'Vom Prototyp zur produktiven Lösung, messbar und stabil.'}]\"\n        (activeChange)=\"activeChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  activeChange(event: unknown) {}\n}"
+        },
+        "komponenten-slider-carousel-carousel--doppelte-titel": {
+          "id": "komponenten-slider-carousel-carousel--doppelte-titel",
+          "name": "Doppelte Titel",
+          "snippet": "import { Component } from '@angular/core';\nimport { CarouselComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [CarouselComponent],\n  template: `\n    <cds-carousel\n        [active]=\"0\"\n        [hero]=\"false\"\n        [slides]=\"[{title: 'Workshop', text: 'Erster Termin.'}, {title: 'Workshop', text: 'Zweiter Termin.'}]\"\n        (activeChange)=\"activeChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  activeChange(event: unknown) {}\n}"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "components": {
+    "komponenten-slider-carousel-logocarousel": {
+      "id": "komponenten-slider-carousel-logocarousel",
+      "name": "LogoCarouselComponent",
+      "path": "./src/lib/logo-carousel/logo-carousel.stories.ts",
+      "stories": {
+        "komponenten-slider-carousel-logocarousel--interaktiv": {
+          "id": "komponenten-slider-carousel-logocarousel--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { LogoCarouselComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [LogoCarouselComponent],\n  template: `\n    <cds-logo-carousel\n        [interval]=\"6000\"\n        [active]=\"0\"\n        [sets]=\"[[{label: 'NORDWIND'}, {label: 'MERIDIAN'}, {label: 'AVERA'}, {label: 'KONTUR'}, {label: 'STELLA'}], [{label: 'VOLTAIC'}, {label: 'HEXAGON'}, {label: 'LUMEN'}, {label: 'PRAXIS'}, {label: 'ORBIT'}], [{label: 'CASCADE'}, {label: 'VERTEX'}, {label: 'NIMBUS'}, {label: 'FORGE'}, {label: 'ATLAS'}]]\"\n        (activeChange)=\"activeChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  activeChange(event: unknown) {}\n}"
+        },
+        "komponenten-slider-carousel-logocarousel--tastatur-dots": {
+          "id": "komponenten-slider-carousel-logocarousel--tastatur-dots",
+          "name": "Tastatur (Dots)",
+          "snippet": "import { Component } from '@angular/core';\nimport { LogoCarouselComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [LogoCarouselComponent],\n  template: `\n    <cds-logo-carousel\n        [interval]=\"6000\"\n        [active]=\"0\"\n        [sets]=\"[[{label: 'NORDWIND'}, {label: 'MERIDIAN'}, {label: 'AVERA'}, {label: 'KONTUR'}, {label: 'STELLA'}], [{label: 'VOLTAIC'}, {label: 'HEXAGON'}, {label: 'LUMEN'}, {label: 'PRAXIS'}, {label: 'ORBIT'}], [{label: 'CASCADE'}, {label: 'VERTEX'}, {label: 'NIMBUS'}, {label: 'FORGE'}, {label: 'ATLAS'}]]\"\n        (activeChange)=\"activeChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  activeChange(event: unknown) {}\n}"
+        },
+        "komponenten-slider-carousel-logocarousel--mit-bildern": {
+          "id": "komponenten-slider-carousel-logocarousel--mit-bildern",
+          "name": "Mit Bildern",
+          "snippet": "import { Component } from '@angular/core';\nimport { LogoCarouselComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [LogoCarouselComponent],\n  template: `\n    <cds-logo-carousel\n        [interval]=\"6000\"\n        [active]=\"0\"\n        [sets]=\"[[{label: 'Conciso', src: './conciso/brand/logo-conciso.svg'}, {label: 'Conciso', src: './conciso/brand/logo-conciso.svg'}, {label: 'NORDWIND'}, {label: 'Conciso', src: './conciso/brand/logo-conciso.svg'}, {label: 'MERIDIAN'}], [{label: 'AVERA'}, {label: 'Conciso', src: './conciso/brand/logo-conciso.svg'}, {label: 'KONTUR'}, {label: 'Conciso', src: './conciso/brand/logo-conciso.svg'}, {label: 'STELLA'}]]\"\n        (activeChange)=\"activeChange($event)\"\n    />`,\n})\nexport class DemoComponent {\n  activeChange(event: unknown) {}\n}",
+          "description": "Reale Logos sind Bilder (`src`). Kacheln ohne Bild fallen auf den Text-`label`\nals Platzhalter zurück – so bleibt das Set auch bei fehlendem Asset vollständig.\n(Hier das Conciso-Logo als Stellvertreter; echte Anwendungen übergeben Kundenlogos.)"
+        }
+      }
+    }
+  }
+}

package/snapshot/services/core/story-docs/komponenten-tabelle-tabelle.json

@@ -0,0 +1,36 @@
+{
+  "components": {
+    "komponenten-tabelle-tabelle": {
+      "id": "komponenten-tabelle-tabelle",
+      "name": "TableComponent",
+      "path": "./src/lib/table/table.stories.ts",
+      "stories": {
+        "komponenten-tabelle-tabelle--interaktiv": {
+          "id": "komponenten-tabelle-tabelle--interaktiv",
+          "name": "Interaktiv",
+          "snippet": "import { Component } from '@angular/core';\nimport { TableComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TableComponent],\n  template: `\n    <cds-table [caption]=\"caption\" [striped]=\"striped\" [scrollLabel]=\"scrollLabel\">\n        <thead>\n            <tr>\n                <th scope=\"col\">Leistung</th>\n                <th scope=\"col\">Bereich</th>\n                <th scope=\"col\">Format</th>\n                <th scope=\"col\">Zielgruppe</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <th scope=\"row\">KI-Readiness Assessment</th>\n                <td>\n                    <span class=\"badge\" data-area=\"ki\">Angewandte KI</span>\n                </td>\n                <td>Workshop &amp; Analyse</td>\n                <td\n                    style=\"color:var(--tx-secondary)\">\n                    Geschäftsführung, IT-Leitung\n                </td>\n            </tr>\n            <tr>\n                <th scope=\"row\">Organisationsentwicklung</th>\n                <td>\n                    <span\n                        class=\"badge\"\n                        data-area=\"wo\">\n                        Wirksame Organisationen\n                    </span>\n                </td>\n                <td>Begleitprogramm</td>\n                <td style=\"color:var(--tx-secondary)\">Führungskräfte, Teams</td>\n            </tr>\n            <tr>\n                <th scope=\"row\">Software-Architektur Review</th>\n                <td>\n                    <span class=\"badge\" data-area=\"es\">Effektive Software</span>\n                </td>\n                <td>Audit &amp; Bericht</td>\n                <td style=\"color:var(--tx-secondary)\">Entwicklungsteams, CTOs</td>\n            </tr>\n        </tbody>\n    </cds-table>`,\n})\nexport class DemoComponent {\n  caption = 'Beratungsleistungen im Überblick';\n  striped = false;\n  scrollLabel = 'Leistungsübersicht Tabelle';\n}"
+        },
+        "komponenten-tabelle-tabelle--gestreift": {
+          "id": "komponenten-tabelle-tabelle--gestreift",
+          "name": "Gestreift",
+          "snippet": "import { Component } from '@angular/core';\nimport { TableComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TableComponent],\n  template: `\n    <cds-table [caption]=\"caption\" [striped]=\"striped\" [scrollLabel]=\"scrollLabel\">\n        <thead>\n            <tr>\n                <th scope=\"col\">Datum</th>\n                <th scope=\"col\">Veranstaltung</th>\n                <th scope=\"col\">Ort</th>\n                <th scope=\"col\">Status</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <td\n                    style=\"white-space:nowrap;color:var(--tx-secondary)\">\n                    15. Jan 2025\n                </td>\n                <th scope=\"row\">KI im Unternehmensalltag, Einstiegsworkshop</th>\n                <td style=\"color:var(--tx-secondary)\">Frankfurt</td>\n                <td>\n                    <span class=\"badge badge-ok\">Abgeschlossen</span>\n                </td>\n            </tr>\n            <tr>\n                <td\n                    style=\"white-space:nowrap;color:var(--tx-secondary)\">\n                    12. Feb 2025\n                </td>\n                <th scope=\"row\">Führung in der Transformation</th>\n                <td style=\"color:var(--tx-secondary)\">Online</td>\n                <td>\n                    <span class=\"badge badge-ok\">Abgeschlossen</span>\n                </td>\n            </tr>\n            <tr>\n                <td\n                    style=\"white-space:nowrap;color:var(--tx-secondary)\">\n                    24. Jun 2025\n                </td>\n                <th scope=\"row\">Prompt Engineering für Fachteams</th>\n                <td style=\"color:var(--tx-secondary)\">Online</td>\n                <td>\n                    <span class=\"badge badge-neu\">Anmeldung offen</span>\n                </td>\n            </tr>\n        </tbody>\n    </cds-table>`,\n})\nexport class DemoComponent {\n  caption = 'Veranstaltungen & Workshops 2025';\n  striped = true;\n  scrollLabel = '';\n}"
+        },
+        "komponenten-tabelle-tabelle--mit-zahlenspalte": {
+          "id": "komponenten-tabelle-tabelle--mit-zahlenspalte",
+          "name": "Mit Zahlenspalte",
+          "snippet": "import { Component } from '@angular/core';\nimport { TableComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TableComponent],\n  template: `\n    <cds-table [caption]=\"caption\" [striped]=\"striped\" [scrollLabel]=\"scrollLabel\">\n        <thead>\n            <tr>\n                <th scope=\"col\">Leistung</th>\n                <th scope=\"col\">Format</th>\n                <th scope=\"col\" data-num>Dauer (Tage)</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <th scope=\"row\">KI-Readiness Assessment</th>\n                <td>Workshop &amp; Analyse</td>\n                <td data-num>2</td>\n            </tr>\n            <tr>\n                <th scope=\"row\">Agile Transformation</th>\n                <td>Coaching &amp; Training</td>\n                <td data-num>180</td>\n            </tr>\n        </tbody>\n    </cds-table>`,\n})\nexport class DemoComponent {\n  caption = 'Beratungsleistungen im Überblick';\n  striped = false;\n  scrollLabel = 'Leistungsübersicht mit Dauer';\n}"
+        },
+        "komponenten-tabelle-tabelle--mit-fusszeile": {
+          "id": "komponenten-tabelle-tabelle--mit-fusszeile",
+          "name": "Mit Fußzeile",
+          "snippet": "import { Component } from '@angular/core';\nimport { TableComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TableComponent],\n  template: `\n    <cds-table [caption]=\"caption\" [striped]=\"striped\" [scrollLabel]=\"scrollLabel\">\n        <thead>\n            <tr>\n                <th scope=\"col\">Bereich</th>\n                <th scope=\"col\" data-num>Stunden</th>\n            </tr>\n        </thead>\n        <tbody>\n            <tr>\n                <th scope=\"row\">Angewandte KI</th>\n                <td data-num>64</td>\n            </tr>\n            <tr>\n                <th scope=\"row\">Effektive Software</th>\n                <td data-num>112</td>\n            </tr>\n        </tbody>\n        <tfoot>\n            <tr>\n                <th scope=\"row\">Gesamt</th>\n                <td data-num>176</td>\n            </tr>\n        </tfoot>\n    </cds-table>`,\n})\nexport class DemoComponent {\n  caption = 'Projektstunden nach Bereich';\n  striped = false;\n  scrollLabel = 'Projektstunden Tabelle';\n}"
+        },
+        "komponenten-tabelle-tabelle--schmaler-viewport": {
+          "id": "komponenten-tabelle-tabelle--schmaler-viewport",
+          "name": "Schmaler Viewport",
+          "snippet": "import { Component } from '@angular/core';\nimport { TableComponent } from '@conciso/design-system-angular';\n\n@Component({\n  selector: 'app-demo',\n  imports: [TableComponent],\n  template: `\n    <div style=\"max-width:280px\">\n        <cds-table\n            [caption]=\"caption\"\n            [striped]=\"striped\"\n            [scrollLabel]=\"scrollLabel\">\n            <thead>\n                <tr>\n                    <th scope=\"col\">Leistung</th>\n                    <th scope=\"col\">Bereich</th>\n                    <th scope=\"col\">Format</th>\n                    <th scope=\"col\">Zielgruppe</th>\n                    <th scope=\"col\">Dauer</th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr>\n                    <th scope=\"row\">KI-Readiness Assessment</th>\n                    <td>\n                        <span class=\"badge\" data-area=\"ki\">Angewandte KI</span>\n                    </td>\n                    <td>Workshop &amp; Analyse</td>\n                    <td\n                        style=\"color:var(--tx-secondary)\">\n                        Geschäftsführung, IT-Leitung\n                    </td>\n                    <td style=\"color:var(--tx-secondary)\">2 Tage</td>\n                </tr>\n            </tbody>\n        </cds-table>\n    </div>`,\n})\nexport class DemoComponent {\n  caption = 'Beratungsleistungen im Überblick';\n  striped = false;\n  scrollLabel = 'Leistungsübersicht Tabelle';\n}"
+        }
+      }
+    }
+  }
+}