@conciso/design-system-angular 2.4.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conciso/design-system-angular",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "Angular-Wrapper-Komponenten für das Conciso Design System — dünne Hüllen über der framework-agnostischen CSS-Schicht (@conciso/design-system). Liefert kein eigenes CSS.",
   "license": "MIT",
   "repository": {
@@ -15,7 +15,7 @@
     "@angular/core": "^22.0.0",
     "@angular/forms": "^22.0.0",
     "@angular/platform-browser": "^22.0.0",
-    "@conciso/design-system": "2.4.x"
+    "@conciso/design-system": "2.6.x"
   },
   "dependencies": {
     "@ng-icons/core": "^36.0.0",

package/types/conciso-design-system-angular.d.ts

@@ -217,6 +217,8 @@ declare class ThemeCycleComponent {
  * Ordnet ein Element einer der vier Brand Areas zu (50er-Grund, 800er-Text).
  * Nicht interaktiv. Für Zustände die Status-Badge, für einen redaktionellen
  * Anker im Lesefluss die Pill nutzen; für interaktive Filter den Chip.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Chip (`komponenten-chips-badges-pills-chip--verwendung`).
  */
 declare class AreaBadgeComponent {
     /** Sichtbarer Text der Badge. */
@@ -237,6 +239,8 @@ type CdsBadgeTone = 'ok' | 'warn' | 'err' | 'neu';
  * z. B. „Live“, „Beta“, „Deprecated“, „Draft“. Nicht interaktiv. Für die
  * Zuordnung zu einer Brand Area die Bereichs-Badge, für einen redaktionellen
  * Anker im Lesefluss die Pill nutzen; für interaktive Filter den Chip.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Chip (`komponenten-chips-badges-pills-chip--verwendung`).
  */
 declare class StatusBadgeComponent {
     /** Sichtbarer Text der Badge. */
@@ -281,6 +285,8 @@ declare class ChipComponent {
  * a11y: Der reine Bereichsname klingt im Screenreader-Fluss leicht wie eine
  * Überschrift — daher trägt die Pill ein explizites `aria-label` (Default
  * „Bereich <label>“, überschreibbar), genau wie in der Doku vorgegeben.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Chip (`komponenten-chips-badges-pills-chip--verwendung`).
  */
 declare class PillComponent {
     /** Sichtbarer Bereichsname. */
@@ -416,6 +422,8 @@ declare class TextFieldComponent extends FieldBase {
  *
  * Als `ControlValueAccessor` (siehe FieldBase) direkt an Angular-Formulare
  * anbindbar (`[(ngModel)]`, `formControlName`) bzw. ohne Formular per `[(value)]`.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Textfeld (`komponenten-inputs-forms-textfeld--verwendung`).
  */
 declare class TextareaFieldComponent extends FieldBase {
     readonly placeholder: _angular_core.InputSignal<string>;
@@ -429,6 +437,8 @@ declare class TextareaFieldComponent extends FieldBase {
  *
  * Als `ControlValueAccessor` (siehe FieldBase) direkt an Angular-Formulare
  * anbindbar (`[(ngModel)]`, `formControlName`) bzw. ohne Formular per `[(value)]`.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Textfeld (`komponenten-inputs-forms-textfeld--verwendung`).
  */
 declare class SelectFieldComponent extends FieldBase {
     /** Auswahloptionen (erste dient üblicherweise als Platzhalter, z. B. „Bitte wählen“). */
@@ -447,6 +457,8 @@ declare class SelectFieldComponent extends FieldBase {
  *
  * Als `ControlValueAccessor` direkt an Angular-Formulare anbindbar (`[(ngModel)]`,
  * `formControlName`); ohne Formular geht `[(checked)]` (checkedChange via model()).
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Textfeld (`komponenten-inputs-forms-textfeld--verwendung`).
  */
 declare class CheckboxComponent extends CvaBase<boolean> {
     /** Einwilligungstext neben der Checkbox. */
@@ -487,6 +499,8 @@ declare class CheckboxComponent extends CvaBase<boolean> {
  *
  * Als `ControlValueAccessor` direkt an Angular-Formulare anbindbar (`[(ngModel)]`,
  * `formControlName`); ohne Formular geht `[(value)]` (valueChange via model()).
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Textfeld (`komponenten-inputs-forms-textfeld--verwendung`).
  */
 declare class RadioGroupComponent extends CvaBase<string> {
     /** Gruppen-Label (die Frage) → <legend>. */
@@ -630,6 +644,8 @@ declare class SelectComponent implements ControlValueAccessor {
  * Als `ControlValueAccessor` direkt an Angular-Formulare anbindbar (`[(ngModel)]`,
  * `formControlName`); der Formularwert ist im Multi-Modus `string[]`, sonst `string`.
  * Ohne Formular gehen `[(value)]` / `[(values)]` (valueChange/valuesChange via model()).
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Custom Select (`komponenten-dropdowns-custom-select--verwendung`).
  */
 declare class ComboboxComponent implements ControlValueAccessor {
     private readonly host;
@@ -749,6 +765,8 @@ declare class ComboboxComponent implements ControlValueAccessor {
  *
  * Als `ControlValueAccessor` direkt an Angular-Formulare anbindbar (`[(ngModel)]`,
  * `formControlName`); ohne Formular geht `[(value)]` (valueChange via model()).
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Textfeld (`komponenten-inputs-forms-textfeld--verwendung`).
  */
 declare class SliderComponent extends CvaBase<number> {
     private readonly host;
@@ -830,6 +848,8 @@ interface CdsSocialLink {
  * und Social-Profilen. Die Host-Klasse `footer-btm` trägt Hintergrund/Flex-Layout aus
  * css/components.css. Social-Glyphen sind schlanke Inline-SVGs in Weiß; verifizierte
  * Built-in-Icons (linkedin, youtube) via `platform`, beliebige weitere via `iconPath`.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Footer, Komplett (`komponenten-footer-komplett--verwendung`).
  */
 declare class FooterBottomComponent {
     readonly copyright: _angular_core.InputSignal<string>;
@@ -884,6 +904,8 @@ declare class FooterComponent {
  * Die Host-Klasse `footer-main` trägt Hintergrund/Padding aus css/components.css;
  * `:host{display:block}` macht das Band auch standalone zum Block. Spaltenanzahl/-breiten
  * über `columns` (grid-template-columns); ohne Angabe gilt das 3-Spalten-Default.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Footer, Komplett (`komponenten-footer-komplett--verwendung`).
  */
 declare class FooterMainComponent {
     /**
@@ -1014,6 +1036,8 @@ declare class LogoComponent {
  * Jede Kachel ist ein `cds-logo`: bevorzugt ein Bild (`src`), sonst der Text als
  * Platzhalter/Fallback. Standardmäßig sind reine Text-Platzhalter gesetzt – reale
  * Anwendungen übergeben ihre Kundenlogos als Bilder.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Carousel (`komponenten-slider-carousel-carousel--verwendung`).
  */
 declare class LogoCarouselComponent {
     private readonly host;
@@ -1134,6 +1158,8 @@ declare class CarouselComponent {
  * `aria-label`, ist also auch im Icon-only-Modus benannt. Der Thumb wird per
  * getBoundingClientRect an die aktive Zelle gesetzt (ResizeObserver misst bei
  * Breakpoint-/Font-Änderungen nach).
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Cycle-Button (`komponenten-theme-umschalter-cycle-button--verwendung`).
  */
 declare class ThemeSegmentComponent {
     /** true → Hell/Dunkel/System (tri), false → nur Hell/Dunkel (binär). */
@@ -1165,6 +1191,8 @@ declare class ThemeSegmentComponent {
  * den Einstellungen (Settings), NICHT als persistentes Element auf allen Seiten.
  *
  * `showSystem` schaltet zwischen Hell/Dunkel/System und binär Hell/Dunkel.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Cycle-Button (`komponenten-theme-umschalter-cycle-button--verwendung`).
  */
 declare class ThemeSelectComponent {
     /** true → Hell/Dunkel/System, false → nur Hell/Dunkel. */
@@ -1231,6 +1259,8 @@ declare class CardComponent {
  * Flache, statische Kennzahlen-Karte mit bereichsgefärbtem Top-Akzent (data-area),
  * großem Wert (.card-stat-value), Label (.card-stat-label) und optionalem
  * Trend-Pill (.card-stat-trend.up/.down) inkl. Richtungs-Pfeil — wie docs/index.html.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Card (`komponenten-cards-teaser-card--verwendung`).
  */
 declare class StatCardComponent {
     /** Anzeigewert der Kennzahl. */
@@ -1258,6 +1288,8 @@ interface CdsFlatStat {
  * css/components.css → „Stat-Strip“. Flacher Bandstreifen (auto-fit-Grid auf
  * --n-50-Grund) mit zentrierten Kennzahlen ohne Rahmen/Schatten; Wert je
  * Bereich getönt via [data-area]. Genau wie docs/index.html.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Card (`komponenten-cards-teaser-card--verwendung`).
  */
 declare class StatStripComponent {
     /** Kennzahlen des Streifens. */
@@ -1402,6 +1434,8 @@ declare class FaqComponent {
  * Als `ControlValueAccessor` direkt an Angular-Formulare anbindbar (`[(ngModel)]`,
  * `formControlName`); der Formularwert ist der Stufen-INDEX. Ohne Formular geht
  * `[(value)]` (valueChange via model()).
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Textfeld (`komponenten-inputs-forms-textfeld--verwendung`).
  */
 declare class ScaleComponent extends CvaBase<number> {
     /** Feld-Label (die Frage), z. B. „Zufriedenheit“. */
@@ -1555,6 +1589,8 @@ declare class SnackbarComponent {
  * Statische Zitat-Karte mit bereichsgefärbtem Top-Akzent (data-area), Quote-Icon
  * (.testimonial-icon, fill:currentColor), Zitat (blockquote) und Footer mit Name/Rolle.
  * Nur bestehende Klassen — kein eigenes CSS.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Blockquote (`komponenten-zitate-testimonials-blockquote--verwendung`).
  */
 declare class TestimonialComponent {
     private readonly sanitizer;
@@ -1585,6 +1621,8 @@ declare class TestimonialComponent {
  * Akzent (data-area), Quote-Icon (ui-quote), Zitat und Name/Rolle. Mehrere
  * Komponenten in einen `<div class="team-voices">` legen, damit das alternierende
  * Layout greift (siehe Story).
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Blockquote (`komponenten-zitate-testimonials-blockquote--verwendung`).
  */
 declare class TeamVoiceComponent {
     private readonly sanitizer;
@@ -1623,6 +1661,8 @@ declare class TeamVoiceComponent {
  * Aufmerksamkeitsstarker Download-Block mit bereichsgefärbtem Top-Akzent + Icon
  * (data-area), Eyebrow/Titel/Beschreibung/Meta und zwei Aktionen (primär/sekundär,
  * über die bestehenden `.btn`-Klassen). Konsumiert nur vorhandene Styles.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe CTA-Band (`komponenten-call-to-action-cta-band--verwendung`).
  */
 declare class DownloadCtaComponent {
     /** Markenbereich → data-area (Top-Akzent, Icon-Tönung, Button-Farbe). */
@@ -1928,6 +1968,8 @@ declare class StoererComponent {
  * Konsumenten gezwungen, das projizierte Icon jeder Kachel in ein Datenobjekt
  * umzuziehen; mit dieser Lösung bleibt die deklarative, Content-projizierende API
  * erhalten.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Hero-Bild (`komponenten-hero-hero-bild--verwendung`).
  */
 declare class StoererSetComponent {
     /** Zugänglicher Name des Sets (`<aside aria-label>`); „Aktuelles“ wie im Mockup. */
@@ -1984,6 +2026,8 @@ declare class StoererSetComponent {
  * samt `--pinned`-Fuß höher als ihre Nachbarn. `:host{display:flex}` mit
  * `flex:1` an der Karte gibt die gestreckte Höhe an `a.card` weiter; Story
  * „Im Raster“ pinnt das.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Card (`komponenten-cards-teaser-card--verwendung`).
  */
 declare class LinkCardComponent {
     private readonly sanitizer;
@@ -2074,6 +2118,8 @@ declare class LinkCardComponent {
  * `pill`/`area`. Diese Komponente bildet exakt diese Fläche ab, ohne Inputs zu
  * erfinden, die das Ticket nicht vorsieht — ein Meta-Strip oder ein CTA-Fuß wären
  * eine spätere, eigene Erweiterung.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Card (`komponenten-cards-teaser-card--verwendung`).
  */
 declare class FeaturedCardComponent {
     /** Titel (`.card-title-hero`). */
@@ -2193,6 +2239,8 @@ declare class FeaturedCardComponent {
  * `display:grid` ohne Struktur oder Verhalten (dieselbe Begründung wie beim Verzicht
  * auf einen `layout-grid`-Wrapper, siehe `spec.md`). Konsumenten schreiben
  * `<div class="ep-cards">` von Hand (siehe Story „Im Raster“).
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Card (`komponenten-cards-teaser-card--verwendung`).
  */
 declare class IconCardComponent {
     private readonly elementRef;
@@ -2314,6 +2362,8 @@ declare class IconCardComponent {
  * pro Instanz auf `<ctaLabel>: <Ziel>`. Wirkt nur am `<a>`-Zweig: `aria-label` an
  * einem `<span>` ohne Rolle hat keinen verlässlichen Effekt im
  * Accessibility-Baum, und der `<span>`-Zweig ist ohnehin nicht interaktiv.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Card (`komponenten-cards-teaser-card--verwendung`).
  */
 declare class FeatureComponent {
     /** Titel (`.ep-feature-title`). */
@@ -2469,6 +2519,8 @@ declare class CtaBandComponent {
  * Wert eingeschränkt, den das CSS tatsächlich kennt; der Compiler verhindert damit
  * strukturell, dass jemand `co`/`es`/`wo` setzt und ein wirkungsloses Attribut
  * bekommt, statt es nur im JSDoc zu behaupten.
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Card (`komponenten-cards-teaser-card--verwendung`).
  */
 declare class TierComponent {
     /** Beschriftung des Trenners (`.ep-tier-label`), z. B. „In jedem Paket enthalten“. */
@@ -2737,6 +2789,8 @@ interface CdsCompareRow {
  * nativer Toggle wird deshalb nicht rückgängig gemacht — geprüft in der Story „Interaktiv“
  * (Play-Funktion: Klick öffnet, `toggled` feuert `true`, ein zweiter, vom Toggle unabhängiger
  * Interaktionsschritt lässt die Tabelle weiterhin offen).
+ *
+ * Verwendungsguidance dieser Gruppe: siehe Tabelle (`komponenten-tabelle-tabelle--verwendung`).
  */
 declare class CompareComponent {
     /** Text im `<summary>`, z. B. „Alle Funktionen vergleichen“. */