@conciso/design-system-angular 0.0.0-bootstrap.0 → 2.1.1

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { signal, Injectable, input, output, computed, ChangeDetectionStrategy, Component, inject, ElementRef, model, Directive, forwardRef, DestroyRef, viewChild, linkedSignal, numberAttribute, afterNextRender, TemplateRef, contentChildren, effect, viewChildren, afterRenderEffect } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { provideIcons, NgIcon } from '@ng-icons/core';
-import { icons } from '@conciso/design-system/icons';
+import { uiCaretDown as uiCaretDown$1, uiCheck as uiCheck$1 } from '@conciso/design-system/icons';
 import { heroComputerDesktop, heroMoon, heroSun, heroXMark, heroMagnifyingGlass, heroBars3, heroChevronDown } from '@ng-icons/heroicons/outline';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -203,6 +203,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  *      · `ui-caret-down` — kräftiger Caret (10er-viewBox), kein Heroicon-Pendant.
  *      · `ui-check`      — eigener Haken (12er-viewBox), weicht vom heroCheck (24er) ab.
  *
+ *    Importiert werden ausschließlich die BENANNTEN Exporte der beiden gebrauchten Glyphen
+ *    (`uiCaretDown`, `uiCheck`), nie das aggregierte `icons`-Objekt — ein Property-Zugriff
+ *    darauf (`icons['ui-caret-down']`) ist für Bundler nicht tree-shakable und zöge alle
+ *    alle DS-Icons in jedes Consumer-Bundle (siehe icons/README.md „Verwendung“).
+ *
  * 2. **Heroicons**: für Glyphen, die im DS mit dem Heroicon glyph-identisch sind
  *    (chevron-down, magnifying-glass — gleicher Pfad, das DS setzt nur einen dünneren
  *    Stroke) sowie für die im DS-Set (noch) fehlenden Chrome-Icons (bars-3, x-mark,
@@ -212,13 +217,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * Komponenten importieren ausschließlich aus dieser Datei, nie direkt aus
  * `@ng-icons/heroicons`.
  */
-// @ts-expect-error — @conciso/design-system liefert icons.js als reines generiertes JS ohne
-// eigene Typdeklaration; die Form ist in ds-icons-export.d.ts dokumentiert (ngtsc greift die
-// Ambient-Deklaration dort nicht, anders als tsc, deshalb die explizite Unterdrückung hier).
-// DS-eigene Glyphen aus dem generierten Export (kein Duplizieren des SVG-Markups).
+// DS-eigene Glyphen aus dem generierten, benannten Export (kein Duplizieren des SVG-Markups).
 // Als @ng-icons-Custom-Icons registrierbar: der Wert ist das komplette <svg>-Markup.
-const uiCaretDown = icons['ui-caret-down'].svg;
-const uiCheck = icons['ui-check'].svg;
+const uiCaretDown = uiCaretDown$1.svg;
+const uiCheck = uiCheck$1.svg;
 
 /**
  * Theme-Cycle-Button — ein einzelner Icon-Button (Stil `.ep-nav-icon-btn` aus der
@@ -4286,34 +4288,106 @@ class ScaleComponent extends CvaBase {
     outputClasses = computed(() => `field-slider-output slider-${this.area()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "outputClasses" }] : /* istanbul ignore next */ []));
     /**
-     * Alle Labels + Positions-Style. Mitte-Labels sind auf ihrer Thumb-Position
-     * zentriert; das ERSTE/LETZTE Label wird an der jeweiligen Kante verankert
-     * (linksbündig bei 11px bzw. rechtsbündig bei Breite−11px), damit lange
-     * Kategorie-Labels an den Enden nicht über den Rand hinaus abgeschnitten werden.
-     * (11px = halbe Thumb-Breite, siehe css/components.css.)
+     * Spaltenbreiten für das Tick-Grid, mit `minmax()` statt fixer Breiten: Bei
+     * ausreichend Platz treffen die Spaltenmitten exakt die Thumb-Positionen (wie
+     * bisher); wird es zu schmal, um alle Labels einzeilig zu zeigen, gibt das Grid
+     * Lesbarkeit den Vorrang vor exakter Ausrichtung (Entscheidung: Umbruch statt
+     * Überlappung ODER Abschneiden).
+     *
+     * - Rand-Spalten: `minmax(halber Schritt + 11px, max-content)`. Der Mindestwert ist
+     *   wie zuvor die halbe „Schritt“-Distanz `(100% − 22px) / (n − 1)` zwischen zwei
+     *   benachbarten Thumb-Positionen plus 11px (halbe Thumb-Breite, siehe
+     *   css/components.css) — das kantenbündige Rand-Label beansprucht nur EINE
+     *   Richtung, die Gegenseite (vor der ersten/nach der letzten Thumb-Position) fließt
+     *   seiner Spalte zu. Bei breiten Containern übersteigt dieser Mindestwert die
+     *   natürliche (einzeilige) Breite des Labels — dann klemmt `minmax()` laut Spezifikation
+     *   auf den Mindestwert, die Spalte verhält sich also identisch zu vorher. Erst wenn
+     *   der Container schmaler wird als diese Mindestbreite, wächst die Spalte auf bis
+     *   zu `max-content`, das Label bleibt einzeilig, solange noch Platz da ist.
+     * - Mitte-Spalten: `minmax(min-content, 1fr)` — nie schmäler als das breiteste
+     *   unteilbare Wort, sonst gleichberechtigt (1fr) um den verbleibenden Platz. Bei
+     *   schmalen Breiten kann die Spalte dadurch von ihrem rechnerischen Schritt
+     *   abweichen; die Spaltenmitte (und damit das zentrierte Label) liegt dann
+     *   geringfügig neben der Thumb-Position — akzeptierter Trade-off.
+     *
+     * Bei nur einem Label eine volle Spalte.
+     *
+     * @internal
+     */
+    tickColumns = computed(() => {
+        const n = this.labels().length;
+        if (n <= 1)
+            return '1fr';
+        const gaps = n - 1;
+        const edge = `minmax(calc(11px + (100% - 22px) / ${gaps} / 2), max-content)`;
+        if (n === 2)
+            return `${edge} ${edge}`;
+        const mid = `repeat(${n - 2}, minmax(min-content, 1fr))`;
+        return `${edge} ${mid} ${edge}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tickColumns" }] : /* istanbul ignore next */ []));
+    /**
+     * Alle Labels + Ausrichtung innerhalb ihrer Grid-Spalte (`tickColumns()`). Mitte-
+     * Labels sind in ihrer Spalte zentriert — bei ausreichend Platz liegt die
+     * Spaltenmitte exakt auf der Thumb-Position; bei sehr schmalen Breiten, wenn
+     * `minmax(min-content, 1fr)` eine Spalte über ihren rechnerischen Schritt hinaus
+     * wachsen lässt, kann die Mitte geringfügig davon abweichen (siehe
+     * `tickColumns()`). Das ERSTE/LETZTE Label wird an der jeweiligen Kante verankert
+     * (linksbündig bzw. rechtsbündig, 11px Innenabstand = halbe Thumb-Breite), damit
+     * lange Kategorie-Labels an den Enden nicht über den Rand hinaus abgeschnitten
+     * werden.
+     *
+     * Zusätzlich 4px `padding-inline` an der jeweils INNEREN Seite (Mitte-Labels:
+     * beidseitig — bei zentriertem Text bleibt die Mitte dadurch unverschoben):
+     * Mindestabstand zwischen benachbarten Labels. Ohne das können bei mittleren
+     * Breiten (Spalte klemmt schon auf `minmax()`-Mindestwert, aber Label füllt sie
+     * fast aus) die Text-Ink-Boxes zweier Nachbarn exakt aneinanderstoßen (0px Lücke,
+     * liest sich als ein zusammengeschriebenes Wort), obwohl sie sich nicht
+     * überlappen. `box-sizing:border-box` (s. u.) sorgt dafür, dass `min-content` in
+     * `tickColumns()` das Padding mit einrechnet, statt die Spalte zusätzlich zu
+     * stauchen.
+     *
+     * `hyphens:auto` trennt einzelne Wörter, die trotz der `max-content`/
+     * `min-content`-Untergrenze in `tickColumns()` noch breiter als ihre Spalte sind —
+     * wirkt nur, wenn die einbettende Seite `lang="de"` setzt (Storybooks Vitest-Iframe
+     * tut das nicht; bei Konsumenten ist es nicht garantiert, daher rein additiv).
+     * Bewusst OHNE `overflow-wrap:break-word`: das bricht mitten im Wort ohne
+     * Trennzeichen (z. B. „zufriede“/„n“) und ist schlechter lesbar als ein Wort, das
+     * im Ausnahmefall über seine Spalte hinausragt — Lesbarkeit vor exakter
+     * Breiteneinhaltung. Ohne `white-space:nowrap` umbrechen Labels normal (zeilenweise),
+     * statt sich zu überlagern.
      *
      * @internal
      */
     tickItems = computed(() => {
         const labels = this.labels();
         const n = labels.length;
-        const base = { position: 'absolute', 'white-space': 'nowrap' };
-        // transform/left aus .field-slider-ticks>* (components.css) an den Kanten
-        // explizit neutralisieren — sonst spannt left+right das letzte Label über die
-        // volle Breite und translateX(-50%) schiebt es in die Mitte.
+        // position/transform/white-space aus .field-slider-ticks>* (components.css)
+        // explizit neutralisieren — sonst bleiben die Labels absolut positioniert und
+        // ignorieren die Grid-Spalten, auf denen dieser Ansatz aufbaut.
+        const base = {
+            position: 'static',
+            transform: 'none',
+            'white-space': 'normal',
+            'box-sizing': 'border-box',
+            hyphens: 'auto',
+        };
         return labels.map((label, i) => {
-            if (n <= 1 || i === 0)
-                return { label, style: { ...base, left: '11px', 'text-align': 'left', transform: 'none' } };
+            if (n <= 1)
+                return { label, style: { ...base, 'text-align': 'left', 'padding-left': '11px' } };
+            if (i === 0)
+                // Innere Seite (rechts, Richtung nächstes Label) zusätzlich 4px — Mindestlücke,
+                // s. Kommentar oben.
+                return {
+                    label,
+                    style: { ...base, 'text-align': 'left', 'padding-left': '11px', 'padding-right': '4px' },
+                };
             if (i === n - 1)
                 return {
                     label,
-                    style: { ...base, left: 'auto', right: '11px', 'text-align': 'right', transform: 'none' },
+                    style: { ...base, 'text-align': 'right', 'padding-left': '4px', 'padding-right': '11px' },
                 };
-            const p = i / (n - 1);
-            return {
-                label,
-                style: { ...base, left: `calc(11px + ${p} * (100% - 22px))`, transform: 'translateX(-50%)' },
-            };
+            return { label, style: { ...base, 'text-align': 'center', 'padding-inline': '4px' } };
         });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tickItems" }] : /* istanbul ignore next */ []));
@@ -4351,14 +4425,21 @@ class ScaleComponent extends CvaBase {
         (blur)="markTouched()"
       />
       @if (labels().length) {
-        <!-- Alle Skalen-Labels exakt auf ihre Position ausgerichtet (Thumb 22px, siehe
-             css/components.css), zentriert. KEINE Reduktion — jedes Label ist wählbar.
-             Self-contained positioniert (der --tick-p-Kernmechanismus liegt noch auf
-             dem main-PR; nach Merge kann das vereinfacht werden). -->
+        <!-- Alle Skalen-Labels als CSS-Grid-Spalten (Breiten: tickColumns()), bei
+             ausreichend Platz exakt auf ihre Thumb-Position ausgerichtet (Thumb 22px,
+             siehe css/components.css); bei schmalen Breiten gibt das Grid lieber den
+             Umbruch frei, statt Labels zu überlagern oder abzuschneiden (siehe dort).
+             KEINE Reduktion — jedes Label ist wählbar, PFLICHT-Inhalt (kein Dropping
+             wie bei cds-slider). Statt Absolut-Positionierung Normalfluss: mehrzeilige
+             Labels (lange Kategorien bei schmaler Breite) wachsen den Container in der
+             Höhe und schieben nachfolgenden Inhalt nach unten, statt ihn zu
+             überlagern. Self-contained positioniert (der --tick-p-Kernmechanismus liegt
+             noch auf dem main-PR; nach Merge kann das vereinfacht werden). -->
         <div
           class="field-slider-ticks"
           aria-hidden="true"
-          style="position:relative;display:block;padding:0;height:16px"
+          style="position:relative;display:grid;padding:0;height:auto;align-items:start"
+          [style.grid-template-columns]="tickColumns()"
         >
           @for (t of tickItems(); track $index) {
             <span [style]="t.style">{{ t.label }}</span>
@@ -4400,14 +4481,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         (blur)="markTouched()"
       />
       @if (labels().length) {
-        <!-- Alle Skalen-Labels exakt auf ihre Position ausgerichtet (Thumb 22px, siehe
-             css/components.css), zentriert. KEINE Reduktion — jedes Label ist wählbar.
-             Self-contained positioniert (der --tick-p-Kernmechanismus liegt noch auf
-             dem main-PR; nach Merge kann das vereinfacht werden). -->
+        <!-- Alle Skalen-Labels als CSS-Grid-Spalten (Breiten: tickColumns()), bei
+             ausreichend Platz exakt auf ihre Thumb-Position ausgerichtet (Thumb 22px,
+             siehe css/components.css); bei schmalen Breiten gibt das Grid lieber den
+             Umbruch frei, statt Labels zu überlagern oder abzuschneiden (siehe dort).
+             KEINE Reduktion — jedes Label ist wählbar, PFLICHT-Inhalt (kein Dropping
+             wie bei cds-slider). Statt Absolut-Positionierung Normalfluss: mehrzeilige
+             Labels (lange Kategorien bei schmaler Breite) wachsen den Container in der
+             Höhe und schieben nachfolgenden Inhalt nach unten, statt ihn zu
+             überlagern. Self-contained positioniert (der --tick-p-Kernmechanismus liegt
+             noch auf dem main-PR; nach Merge kann das vereinfacht werden). -->
         <div
           class="field-slider-ticks"
           aria-hidden="true"
-          style="position:relative;display:block;padding:0;height:16px"
+          style="position:relative;display:grid;padding:0;height:auto;align-items:start"
+          [style.grid-template-columns]="tickColumns()"
         >
           @for (t of tickItems(); track $index) {
             <span [style]="t.style">{{ t.label }}</span>
@@ -4450,11 +4538,13 @@ class SnackbarComponent {
     isError = computed(() => this.tone() === 'err', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
     /**
-     * Tonfarbe des Icons (wie im Doku-Markup).
+     * Tonfarbe des Icons (wie im Doku-Markup). CSS-Variablen statt Hex (Befund 04) — als
+     * [style.stroke] gesetzt, nicht als Präsentationsattribut, weil Präsentationsattribute var()
+     * nicht auflösen.
      *
      * @internal
      */
-    iconStroke = computed(() => ({ def: '#80DEDE', ok: '#88f0c4', err: '#f9a8a8' })[this.tone()], /* @ts-ignore */
+    iconStroke = computed(() => ({ def: 'var(--co-200)', ok: 'var(--c-success-strong-icon)', err: 'var(--c-error-strong-icon)' })[this.tone()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "iconStroke" }] : /* istanbul ignore next */ []));
     /**
      * Lucide-artiger Pfad je Ton (Glühbirne / Häkchen-Kreis / Ausrufezeichen-Kreis).
@@ -4479,7 +4569,7 @@ class SnackbarComponent {
         height="24"
         viewBox="0 0 24 24"
         fill="none"
-        [attr.stroke]="iconStroke()"
+        [style.stroke]="iconStroke()"
         stroke-width="1.25"
         aria-hidden="true"
         focusable="false"
@@ -4510,7 +4600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         height="24"
         viewBox="0 0 24 24"
         fill="none"
-        [attr.stroke]="iconStroke()"
+        [style.stroke]="iconStroke()"
         stroke-width="1.25"
         aria-hidden="true"
         focusable="false"