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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conciso/design-system-angular",
-  "version": "0.0.0-bootstrap.0",
+  "version": "2.1.1",
   "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": "0.0.x"
+    "@conciso/design-system": "2.1.x"
   },
   "dependencies": {
     "@ng-icons/core": "^36.0.0",

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

@@ -1429,11 +1429,63 @@ declare class ScaleComponent extends CvaBase<number> {
     /** @internal */
     protected readonly outputClasses: _angular_core.Signal<string>;
     /**
-     * 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
+     */
+    protected readonly tickColumns: _angular_core.Signal<string>;
+    /**
+     * 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
      */
@@ -1473,7 +1525,9 @@ declare class SnackbarComponent {
     /** @internal */
     protected readonly isError: _angular_core.Signal<boolean>;
     /**
-     * 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
      */