@conciso/design-system-angular 2.4.0 → 2.6.0

package/fesm2022/conciso-design-system-angular.mjs

@@ -726,6 +726,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class AreaBadgeComponent {
     /** Sichtbarer Text der Badge. */
@@ -754,6 +756,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class StatusBadgeComponent {
     /** Sichtbarer Text der Badge. */
@@ -841,6 +845,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class PillComponent {
     /** Sichtbarer Bereichsname. */
@@ -1212,6 +1218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  *
  * 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`).
  */
 class TextareaFieldComponent extends FieldBase {
     placeholder = input('', /* @ts-ignore */
@@ -1296,6 +1304,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  *
  * 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`).
  */
 class SelectFieldComponent extends FieldBase {
     /** Auswahloptionen (erste dient üblicherweise als Platzhalter, z. B. „Bitte wählen“). */
@@ -1391,6 +1401,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  *
  * 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`).
  */
 class CheckboxComponent extends CvaBase {
     /** Einwilligungstext neben der Checkbox. */
@@ -1502,6 +1514,8 @@ let uid$8 = 0;
  *
  * 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`).
  */
 class RadioGroupComponent extends CvaBase {
     /** Gruppen-Label (die Frage) → <legend>. */
@@ -2031,6 +2045,8 @@ let uid$6 = 0;
  * 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`).
  */
 class ComboboxComponent {
     host = inject(ElementRef);
@@ -2536,6 +2552,8 @@ let uid$5 = 0;
  *
  * 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`).
  */
 class SliderComponent extends CvaBase {
     host = inject(ElementRef);
@@ -2828,6 +2846,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class FooterMainComponent {
     /**
@@ -2857,6 +2877,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class FooterBottomComponent {
     copyright = input('© 2026 Conciso GmbH · Dortmund', /* @ts-ignore */
@@ -3259,6 +3281,8 @@ let cdsLogoCarouselUid = 0;
  * 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`).
  */
 class LogoCarouselComponent {
     host = inject(ElementRef);
@@ -3759,6 +3783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * `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`).
  */
 class ThemeSegmentComponent {
     /** true → Hell/Dunkel/System (tri), false → nur Hell/Dunkel (binär). */
@@ -3884,6 +3910,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class ThemeSelectComponent {
     /** true → Hell/Dunkel/System, false → nur Hell/Dunkel. */
@@ -4082,6 +4110,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class StatCardComponent {
     /** Anzeigewert der Kennzahl. */
@@ -4150,6 +4180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class StatStripComponent {
     /** Kennzahlen des Streifens. */
@@ -4502,6 +4534,8 @@ let uid$2 = 0;
  * 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`).
  */
 class ScaleComponent extends CvaBase {
     /** Feld-Label (die Frage), z. B. „Zufriedenheit“. */
@@ -4928,6 +4962,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class TestimonialComponent {
     sanitizer = inject(DomSanitizer);
@@ -5007,6 +5043,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class TeamVoiceComponent {
     sanitizer = inject(DomSanitizer);
@@ -5102,6 +5140,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class DownloadCtaComponent {
     /** Markenbereich → data-area (Top-Akzent, Icon-Tönung, Button-Farbe). */
@@ -5706,6 +5746,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class StoererSetComponent {
     /** Zugänglicher Name des Sets (`<aside aria-label>`); „Aktuelles“ wie im Mockup. */
@@ -5789,6 +5831,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class LinkCardComponent {
     sanitizer = inject(DomSanitizer);
@@ -5935,6 +5979,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * `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`).
  */
 class FeaturedCardComponent {
     /** Titel (`.card-title-hero`). */
@@ -6126,6 +6172,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * `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`).
  */
 class IconCardComponent {
     elementRef = inject(ElementRef);
@@ -6292,6 +6340,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class FeatureComponent {
     /** Titel (`.ep-feature-title`). */
@@ -6553,6 +6603,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class TierComponent {
     /** Beschriftung des Trenners (`.ep-tier-label`), z. B. „In jedem Paket enthalten“. */
@@ -6878,6 +6930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * 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`).
  */
 class CompareComponent {
     /** Text im `<summary>`, z. B. „Alle Funktionen vergleichen“. */