@xiriframework/xiri-ng 0.2.48 → 0.2.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiriframework/xiri-ng",
-  "version": "0.2.48",
+  "version": "0.2.49",
   "description": "Angular UI component library for the Xiri Framework",
   "license": "Apache-2.0",
   "repository": {

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

@@ -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/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
 // ============================================