@xiriframework/xiri-ng 0.2.48 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiriframework/xiri-ng",
-  "version": "0.2.48",
+  "version": "0.3.0",
   "description": "Angular UI component library for the Xiri Framework",
   "license": "Apache-2.0",
   "repository": {
@@ -32,7 +32,7 @@
     "date-fns": "^4.3",
     "@date-fns/tz": "^1.5",
     "material-symbols": ">=0.44",
-    "ngx-mat-select-search": "^8.0.6",
+    "ngx-mat-select-search": "^9.0.0",
     "rxjs": "^7.8.2",
     "echarts": "^6.1"
   },

package/skills/xiri-ng-expert/SKILL.md

@@ -39,7 +39,7 @@ Alle Services sind `providedIn: 'root'` (automatisch verfügbar nach Provider-Re
 ```typescript
 import {
   XiriDataService, XiriSnackbarService, XiriResponseHandlerService,
-  XiriFormService, XiriDownloadService, XiriDateService, XiriNumberService,
+  XiriFormService, XiriDownloadService, XiriLocaleService,
   XiriLocalStorageService, XiriSessionStorageService, ThemeService,
 } from '@xiriframework/xiri-ng';
 
@@ -98,7 +98,7 @@ components: XiriDynData[] = [
 // card | buttonline | table | cardlink | links | form | query
 // stepper | header | list | spacer | container | infopoint | multiprogress
 // imagetext | tabs | expansion | infotext | html | stat | empty-state
-// timeline | page-header | section | divider | stat-grid | toolbar
+// timeline | page-header | section | divider | stat-grid | multi-stat | toolbar
 // description-list | barchart   (barchart benötigt zusätzlich `mode`)
 ```
 
@@ -292,7 +292,12 @@ stepperSettings = {
 ```html
 <xiri-stat [settings]="{ value: 1234, label: 'Umsatz', prefix: '€', color: 'primary',
                          trend: { value: 12, direction: 'up' } }"/>
-<xiri-stat-grid [settings]="{ stats: [...], columns: 4, title: 'KPIs' }"/>
+<!-- Mehrere zusammengehörige Zahlen → EINE multi-stat statt mehrerer stat nebeneinander
+     oder eines stat-grid. Items horizontal (Standard), responsiv, klickbar (item.link). -->
+<xiri-multi-stat [settings]="{ title: 'Bestellungen', icon: 'shopping_cart',
+    items: [ { value: 12, label: 'Offen', icon: 'inventory', color: 'orange', link: '/Orders?status=open' },
+             { value: 45, label: 'Fertig', color: 'green', trend: { value: 5, direction: 'up' } } ] }"/>
+<xiri-stat-grid [settings]="{ stats: [...], columns: 4, title: 'KPIs' }"/>  <!-- nur für eigenständige KPI-Karten -->
 <xiri-timeline [settings]="{ items: [...], orientation: 'vertical' }"/>
 <xiri-barchart mode="simple"  [settings]="{ title: 'Weekly', yMin: 0, yMax: 12, color: 'purple',
                                             bars: [{ label: 'M', name: 'Monday', value: 3 }, ...] }"/>

package/skills/xiri-ng-expert/references/components.md

@@ -632,6 +632,9 @@ interface XiriStatSettings {
   prefix?: string;
   suffix?: string;
   color?: XiriColor;
+  reference?: string;           // muted Benchmark-/Anker-Zeile neben dem Wert
+  link?: string;                // macht den Wert klickbar (routerLink + Query-Params);
+                                // v. a. pro Zahl in xiri-multi-stat
   compact?: boolean;            // Skipt eigene mat-card-Hülle, kleinere Schrift —
                                 // für Stats die in einer äußeren Card geschachtelt sind
                                 // (Card-in-Card-Look vermeiden).
@@ -643,8 +646,35 @@ interface XiriStatTrend {
 }
 ```
 
+### xiri-multi-stat
+
+**Standard für mehrere zusammengehörige Zahlen.** Nimm **eine** `xiri-multi-stat`
+statt mehrerer `xiri-stat` nebeneinander (eigene xcol-Spalten) oder `xiri-stat-grid`
+(N Karten), wenn die Zahlen inhaltlich zusammengehören: gemeinsamer Header,
+kompakter, responsiv (Items brechen auf schmalen Breiten sauber um, die Trennlinie
+am Reihenanfang wird ausgeblendet).
+
+```typescript
+@input.required settings: XiriMultiStatSettings;
+
+interface XiriMultiStatSettings {
+  items?: XiriStatSettings[];   // je Zahl eine XiriStatSettings (value/label/icon/
+                                // color/prefix/suffix/trend/link — link macht sie klickbar)
+  title?: string;               // Header-Titel
+  icon?: string;                // Header-Icon
+  iconColor?: XiriColor;
+  verticalItems?: boolean;      // Standard horizontal (Icon links neben Wert/Label);
+                                // true = gestapelt (Icon oben)
+  url?: string;                 // AJAX: lädt items per POST (Card-Muster),
+                                // Header bleibt sofort sichtbar
+  reload?: boolean;             // manueller Reload-Button (nur zusammen mit url)
+}
+```
+
 ### xiri-stat-grid
 
+Für mehrere **eigenständige** Stat-Karten. Zusammengehörige Zahlen → `xiri-multi-stat`.
+
 ```typescript
 @input.required settings: XiriStatGridSettings;
 

package/skills/xiri-ng-expert/references/setup.md

@@ -137,31 +137,37 @@ this.data.postFileResponse('/api/export', payload).subscribe(res => {
 });
 ```
 
-## XiriDateService
+## XiriLocaleService
 
-Unix-Timestamp ↔ lokale Datums-Strings mit Timezone + Locale.
+Zentraler i18n-/Kontext-Dienst: aktive Sprache, Locale, Timezone, Datums- und Zahlenformatierung sowie lokalisierte Validierungsmeldungen. Ab v0.3.0 sind die früheren `XiriDateService` und `XiriNumberService` hier aufgegangen.
 
 ```typescript
+// Sprache / Locale
+language: Signal<XiriLanguage>              // 'de' | 'en' | (string & {})
+localeString: Signal<string>                // z.B. 'de-DE', 'en-GB'
+dateFnsLocale: Signal<Locale | undefined>   // aktives date-fns-Locale
+setLanguage(lang: XiriLanguage): void       // unbekannt → console.warn, kein Wechsel
+validationMessagesFor(): XiriValidationMessages
+
+// Beliebige weitere Sprachen registrieren (vor setLanguage / erstem Formular, im App-Init):
+registerLanguage(code: XiriLanguage, def: XiriLanguageDefinition): void
+// XiriLanguageDefinition = { localeString: string; dateFnsLocale?: Locale; validationMessages: XiriValidationMessages }
+
+// Timezone + Datum (war XiriDateService)
 setTimezone(tz: string): void
-setLocale(localeString: string, locale: Locale): void   // date-fns Locale
-
 unixToLocal(stime: number): Date | null
 unixToStringDateTime(stime: number): string   // 'yyyy-MM-dd HH:mm'
-unixToStringDate(stime: number): string       // 'd. LLL.'
+unixToStringDate(stime: number): string       // 'd. LLL.'  (Monatsnamen folgen der Sprache)
 unixToStringDateYear(stime: number): string   // 'd. LLL. yy'
 dateToUnix(date: Date): number
-```
-
-Der Backend-`UiContext` schickt Locale/Timezone als Teil der JSON-Responses → Kalibrierung via `setLocale` / `setTimezone` erfolgt typischerweise in einem Auth-/Startup-Flow.
 
-## XiriNumberService
-
-```typescript
-setLocale(locale: string): void   // Default: 'de-DE'
+// Zahlen (war XiriNumberService) — folgt der aktiven Sprache
 formatNumber(value: number, webformat?: string): string
   // webformat: 'integer' | 'float1' | 'float2' | 'float3' | 'float4'
 ```
 
+Das Backend liefert sichtbare Texte + Zahlen/Datum bereits sprachrichtig; die App ruft beim Login `setLanguage()` / `setTimezone()`. Der Material-Datepicker-Locale wird per `effect` automatisch angeglichen. Für zusätzliche Sprachen liefert der Client date-fns-Locale + Validierungstexte via `registerLanguage()`.
+
 ## XiriLocalStorageService / XiriSessionStorageService
 
 Wrapper mit Timestamp-Metadaten und In-Memory-Fallback (falls localStorage blockiert).

package/skills/xiri-ng-expert/references/theming-i18n.md

@@ -73,33 +73,44 @@ Die Komponenten nutzen `mat.*-theme` Tokens — kein Hart-kodiertes CSS.
 
 ## Locale & Sprache
 
-Backend (`xiri-go`) schickt `UiContext` mit Locale/Timezone pro Response. Frontend propagiert das an `XiriDateService` und `XiriNumberService`:
+Alles läuft über den zentralen `XiriLocaleService` (ab v0.3.0; früher getrennte `XiriDateService`/`XiriNumberService`). Backend (`xiri-go`) liefert sichtbare Texte + Zahlen/Datum bereits sprachrichtig; die App setzt beim Login nur Sprache + Timezone:
 
 ```typescript
 // z.B. in einem auth-response-handler:
-import { de } from 'date-fns/locale';
+this.locale.setLanguage('de');            // 'de' | 'en' eingebaut
+this.locale.setTimezone('Europe/Vienna');
+// Datepicker-Locale + Validierungstexte + Zahlen/Datumsformate folgen automatisch.
+```
+
+### Weitere Sprachen registrieren (Client-erweiterbar)
 
-this.date.setLocale('de-DE', de);
-this.date.setTimezone('Europe/Vienna');
-this.number.setLocale('de-DE');
+```typescript
+import { fr } from 'date-fns/locale/fr';
+
+this.locale.registerLanguage('fr', {
+  localeString: 'fr-FR',
+  dateFnsLocale: fr,                       // optional (Datepicker + Monatsnamen)
+  validationMessages: { required: 'Champ requis', /* … alle 14 Keys */ },
+});
+this.locale.setLanguage('fr');
 ```
 
 ### Date-Format-Helper
 
 ```typescript
-date.unixToStringDateTime(1708800000)   // '2024-02-24 18:00'
-date.unixToStringDate(1708800000)       // '24. Feb.'
-date.unixToStringDateYear(1708800000)   // '24. Feb. 24'
-date.unixToLocal(1708800000)            // Date-Objekt oder null
-date.dateToUnix(new Date())             // number
+locale.unixToStringDateTime(1708800000)   // '2024-02-24 18:00'
+locale.unixToStringDate(1708800000)       // '24. Feb.'  (Monatsnamen folgen der Sprache)
+locale.unixToStringDateYear(1708800000)   // '24. Feb. 24'
+locale.unixToLocal(1708800000)            // Date-Objekt oder null
+locale.dateToUnix(new Date())             // number
 ```
 
 ### Number-Format-Helper
 
 ```typescript
-number.formatNumber(1234.567, 'integer')  // '1.235'
-number.formatNumber(1234.567, 'float2')   // '1.234,57'
-number.formatNumber(1234.567, 'float4')   // '1.234,5670'
+locale.formatNumber(1234.567, 'integer')  // '1.235'   (folgt der aktiven Sprache)
+locale.formatNumber(1234.567, 'float2')   // '1.234,57'
+locale.formatNumber(1234.567, 'float4')   // '1.234,5670'
 ```
 
 ## SafehtmlPipe

package/styles/_accessibility.scss

@@ -2,6 +2,17 @@
 // Global Accessibility Styles
 // ============================================
 
+// Base line-height for body text (WCAG 1.4.12 recommendation).
+// Only body + native headings — Material components set their own
+// line-height (sometimes 1) deliberately, do not override those here.
+body {
+	line-height: 1.5;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1.25;
+}
+
 // Focus-visible indicator for keyboard navigation
 // Uses :focus-visible to only show on keyboard focus, not mouse clicks
 *:focus-visible {
@@ -33,6 +44,19 @@
 	// Material handles this internally, no override needed
 }
 
+// Windows High Contrast Mode / forced-colors basics
+@media (forced-colors: active) {
+	*:focus-visible {
+		outline: 2px solid;
+	}
+
+	// State conveyed only via background-color would otherwise disappear;
+	// keep it legible with an explicit border.
+	.xiri-chip-display {
+		border: 1px solid;
+	}
+}
+
 // Skip link for keyboard users
 .xiri-skip-link {
 	position: absolute;

package/styles/_mixins.scss

@@ -0,0 +1,8 @@
+// ============================================
+// Shared Mixins
+// ============================================
+
+// Fixed-width digits for numeric columns / counters (avoids layout jitter).
+@mixin xiri-tabular-nums {
+	font-variant-numeric: tabular-nums;
+}

package/styles/grid.scss

@@ -21,6 +21,11 @@
 		}
 	}
 
+	.xrow-cq {
+		container-type: inline-size;
+		container-name: xrow;
+	}
+
 	.xcol {
 		grid-column-end: span 12;
 		max-width:       100%;
@@ -68,6 +73,34 @@
 		}
 	}
 
+	// Reset viewport-based spans for .xrow-cq children (specificity 0,2,0 beats the
+	// always-active .xcol-{bp}-{i} media rule above at 0,1,0), so a container narrower
+	// than the viewport breakpoint falls back to the mobile default instead of inheriting
+	// a span meant for a wide viewport. The @container rules below share this same
+	// specificity and come later in source order, so they win once the container matches.
+	.xrow-cq > [class*='xcol-'] {
+		grid-column-end: span 12;
+	}
+
+	@each $abbr, $size in $breakpoints {
+		@container xrow (min-width: #{$size}) {
+			// Container query variants — opt-in via .xrow-cq
+			@for $i from 1 through 12 {
+				.xrow-cq > .xcol-#{$abbr}-#{$i} {
+					grid-column-end: span $i;
+				}
+				.xrow-cq > .xcol-middle-#{$abbr}-#{$i} {
+					grid-column-start: math.ceil(calc((12 - $i )/2)) + 1;
+					grid-column-end:   math.ceil(calc((12 - $i )/2)) + $i + 1;
+				}
+				.xrow-cq > .xcol-right-#{$abbr}-#{$i} {
+					grid-column-start: calc(12 - $i + 1);
+					grid-column-end:   13;
+				}
+			}
+		}
+	}
+
 	.x-none, .x-xs-none {
 		display: none !important;
 	}

package/styles/material-components.scss

@@ -1,6 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'colors' as *;
+@use 'mixins';
 
 // ============================================
 // Color Variant Mixins
@@ -109,7 +110,7 @@ mat-icon {
 // ============================================
 .mat-small-icon-button {
 	--mat-icon-button-state-layer-size:  28px;
-	--mat-icon-button-touch-target-size: 28px;
+	--mat-icon-button-touch-target-size: 44px; // WCAG 2.5.5: Hit-Area ≥ 44px, Icon bleibt klein
 	--mat-icon-button-icon-size:         18px;
 
 	.mat-icon {
@@ -122,7 +123,7 @@ mat-icon {
 
 .mat-medium-icon-button {
 	--mat-icon-button-state-layer-size:  36px;
-	--mat-icon-button-touch-target-size: 36px;
+	--mat-icon-button-touch-target-size: 44px; // WCAG 2.5.5: Hit-Area ≥ 44px, Icon bleibt klein
 	--mat-icon-button-icon-size:         22px;
 
 	.mat-icon {
@@ -174,12 +175,19 @@ td.align-right .xiri-chips-display {
 	display:          inline-block;
 	padding:          2px 8px;
 	border-radius:    12px;
-	font-size:        12px;
+	font-size:        var(--xiri-font-size-helper);
 	line-height:      1.6;
 	background-color: var(--surface-variant, #DEE3EB);
 	color:            var(--on-surface-variant, #42474E);
 }
 
+// ============================================
+// Tabular Numbers Utility
+// ============================================
+.xiri-tabular-nums {
+	@include mixins.xiri-tabular-nums;
+}
+
 // ============================================
 // Tab Body Content Padding
 // ============================================