@conciso/design-system-angular 2.1.0 → 2.2.0

package/README.md

@@ -11,13 +11,28 @@ nur deren CSS-Klassen zusammen und liefern **kein eigenes CSS**.
 > und importiert ausschließlich von hier
 > ([ADR-0002](../../../docs/adr/0002-topologie-und-quelle-der-wahrheit.md)).
 
-## Installation aus GitHub Packages
+## Installation von npmjs.org
 
-Beide Pakete (`@conciso/design-system-angular` **und** `@conciso/design-system`,
-[Lockstep](../../../CONTEXT.md#lockstep-versionierung)) liegen privat, org-scoped
-in [GitHub Packages](https://npm.pkg.github.com) (siehe
-[ADR-0004](../../../docs/adr/0004-verteilung-und-versionierung.md)) — nicht in der
-öffentlichen npm-Registry. Ein einziger `.npmrc`-Mechanismus deckt beide ab, weil
+Der empfohlene Weg: Beide Pakete (`@conciso/design-system-angular` **und**
+`@conciso/design-system`, [Lockstep](../../../CONTEXT.md#lockstep-versionierung))
+liegen auf der öffentlichen npm-Registry (seit
+[ADR-0011](../../../docs/adr/0011-veroeffentlichung-auf-npmjs.md)). Keine `.npmrc`,
+kein Token nötig:
+
+```bash
+npm install @conciso/design-system-angular @conciso/design-system
+```
+
+Gilt ab dem ersten echten Release nach dem Merge dieser Änderung; bis dahin liegt auf
+npmjs nur eine Bootstrap-Platzhalterversion (siehe ADR-0011).
+
+## Installation aus GitHub Packages (Alternative)
+
+Beide Pakete liegen **zusätzlich** weiterhin privat, org-scoped in
+[GitHub Packages](https://npm.pkg.github.com) (siehe
+[ADR-0004](../../../docs/adr/0004-verteilung-und-versionierung.md)) — z. B. für
+Consumer innerhalb der GitHub-Organisation `conciso`, die ohnehin schon so
+eingerichtet sind. Ein einziger `.npmrc`-Mechanismus deckt beide ab, weil
 beide unter dem `@conciso`-Scope veröffentlicht werden.
 
 **1. `.npmrc`** im Konsumenten-Projekt (oder `~/.npmrc` für den eigenen Rechner)
@@ -163,5 +178,6 @@ Das Artefakt (Angular Package Format, via ng-packagr) landet unter
 
 MIT, siehe [LICENSE](../../../LICENSE) im Repository-Root (im gebauten Paket unter
 `dist/design-system-angular/LICENSE`). Ausnahmen (Brand-Assets, Schriften, Icons)
-siehe [NOTICE](../../../NOTICE). Das betrifft nur die Lizenz — der Bezug über GitHub
-Packages statt der öffentlichen npm-Registry bleibt unverändert (siehe oben).
+siehe [NOTICE](../../../NOTICE). Das betrifft nur die Lizenz — an den beiden
+Bezugswegen (npmjs.org als Standard, GitHub Packages als Alternative, siehe oben)
+ändert sich dadurch nichts.

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';
@@ -138,9 +138,12 @@ class ButtonComponent {
      *  .btn-text; `filled-on-band` → .btn-filled + .btn-on-band (invertiert). */
     variant = input('filled', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    /** Markenbereich → .btn-co / .btn-ki / .btn-es / .btn-wo */
+    /** Markenbereich → .btn-co / .btn-ki / .btn-es / .btn-wo. Wirkungslos bei `tone="err"`. */
     area = input('co', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
+    /** Ton → `err` setzt .btn-err (destruktive Aktion) statt der Bereichsklasse. */
+    tone = input('def', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     /** Größe → .btn-sm / (md = Default) / .btn-lg */
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -157,7 +160,10 @@ class ButtonComponent {
     classes = computed(() => {
         // filled-on-band = invertierter Filled-Button; rendert .btn-filled + .btn-on-band.
         const onBand = this.variant() === 'filled-on-band';
-        const cls = ['btn', `btn-${onBand ? 'filled' : this.variant()}`, `btn-${this.area()}`];
+        // Ton ersetzt den Bereich, statt ihn zu überlagern: so hängt das Ergebnis nicht an der
+        // Reihenfolge der Regeln in components.css und dark-mode.css.
+        const color = this.tone() === 'err' ? 'err' : this.area();
+        const cls = ['btn', `btn-${onBand ? 'filled' : this.variant()}`, `btn-${color}`];
         if (this.size() === 'sm')
             cls.push('btn-sm');
         if (this.size() === 'lg')
@@ -170,7 +176,7 @@ class ButtonComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: ButtonComponent, isStandalone: true, selector: "cds-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "style.display": "full() ? 'block' : null" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: ButtonComponent, isStandalone: true, selector: "cds-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, full: { classPropertyName: "full", publicName: "full", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "style.display": "full() ? 'block' : null" } }, ngImport: i0, template: `
     <button [class]="classes()" [disabled]="disabled()" [attr.type]="type()" (click)="clicked.emit($event)">
       {{ label() }}
     </button>
@@ -191,7 +197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     </button>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], full: [{ type: i0.Input, args: [{ isSignal: true, alias: "full", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
  * Zentrale Icon-Registry des Storybooks — die EINZIGE Import-Fläche für
@@ -203,6 +209,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 +223,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