@xiriframework/xiri-ng 0.2.0

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@xiriframework/xiri-ng",
+  "version": "0.2.0",
+  "description": "Angular UI component library for the Xiri Framework",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xiriframework/xiri-ng.git"
+  },
+  "homepage": "https://github.com/xiriframework/xiri-ng",
+  "author": "Michael Friedl",
+  "keywords": [
+    "angular",
+    "ui",
+    "components",
+    "material",
+    "xiri"
+  ],
+  "dependencies": {
+    "tslib": "^2.5.0"
+  },
+  "peerDependencies": {
+    "@angular/animations": "^21",
+    "@angular/compiler": "^21",
+    "@angular/platform-browser": "^21",
+    "@angular/platform-browser-dynamic": "^21",
+    "@angular/router": "^21",
+    "@angular/common": "^21",
+    "@angular/core": "^21",
+    "@angular/material": "^21",
+    "@angular/cdk": "^21",
+    "@angular/forms": "^21",
+    "@angular/material-date-fns-adapter": "^21",
+    "date-fns": "^4.1",
+    "@date-fns/tz": "^1.4",
+    "material-symbols": ">=0.40",
+    "ngx-mat-select-search": "^8.0.4",
+    "rxjs": "^7.8.1"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/xiriframework-xiri-ng.mjs",
+  "typings": "types/xiriframework-xiri-ng.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/xiriframework-xiri-ng.d.ts",
+      "default": "./fesm2022/xiriframework-xiri-ng.mjs"
+    }
+  }
+}

package/styles/_accessibility.scss

@@ -0,0 +1,50 @@
+// ============================================
+// Global Accessibility Styles
+// ============================================
+
+// Focus-visible indicator for keyboard navigation
+// Uses :focus-visible to only show on keyboard focus, not mouse clicks
+*:focus-visible {
+	outline: 2px solid var(--primary, #2892D9);
+	outline-offset: 2px;
+}
+
+// Material buttons already have their own focus indicator via ripple,
+// but we add a visible outline for keyboard-only navigation
+.mat-mdc-button:focus-visible,
+.mat-mdc-raised-button:focus-visible,
+.mat-mdc-unelevated-button:focus-visible,
+.mat-mdc-outlined-button:focus-visible,
+.mat-mdc-icon-button:focus-visible,
+.mat-mdc-fab:focus-visible,
+.mat-mdc-mini-fab:focus-visible {
+	outline: 2px solid var(--primary, #2892D9);
+	outline-offset: 2px;
+}
+
+// Material list items
+.mat-mdc-list-item:focus-visible {
+	outline: 2px solid var(--primary, #2892D9);
+	outline-offset: -2px;
+}
+
+// Material form fields
+.mat-mdc-form-field:focus-within {
+	// Material handles this internally, no override needed
+}
+
+// Skip link for keyboard users
+.xiri-skip-link {
+	position: absolute;
+	top: -40px;
+	left: 0;
+	background: var(--primary, #2892D9);
+	color: var(--on-primary, #FFFFFF);
+	padding: 8px 16px;
+	z-index: 10000;
+	transition: top 0.2s;
+
+	&:focus {
+		top: 0;
+	}
+}

package/styles/_animations.scss

@@ -0,0 +1,68 @@
+// ============================================
+// Micro-Animations System
+// ============================================
+
+@keyframes fadeIn {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+@keyframes fadeInUp {
+	from {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes shimmer {
+	0% { background-position: -200px 0; }
+	100% { background-position: calc(200px + 100%) 0; }
+}
+
+@keyframes scaleIn {
+	from {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes spin {
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+}
+
+// ============================================
+// Animation Utility Classes
+// ============================================
+
+.xiri-fade-in {
+	animation: fadeIn 0.2s ease-out;
+}
+
+.xiri-fade-in-up {
+	animation: fadeInUp 0.25s ease-out;
+}
+
+.xiri-scale-in {
+	animation: scaleIn 0.2s ease-out;
+}
+
+// ============================================
+// Respect reduced motion preferences
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+	*, *::before, *::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+	}
+}

package/styles/colors.scss

@@ -0,0 +1,54 @@
+// Gray scale (Bootstrap-compatible)
+$color-gray-100: #F8F9FA;
+$color-gray-200: #E9ECEF;
+$color-gray-300: #DEE2E6;
+$color-gray-400: #CED4DA;
+$color-gray-500: #ADB5BD;
+$color-gray-600: #6C757D;
+$color-gray-700: #495057;
+$color-gray-800: #343A40;
+$color-gray-900: #212529;
+
+// Semantic colors
+$color-danger:  #E74C3C;
+$color-success: #2ECC71;
+$color-info:    #17A2B8;
+
+// Extended color palette (for icons and buttons)
+$color-emerald:   #2892D9;
+$color-red:       #E74C3C;
+$color-yellow:    #F1C40F;
+$color-green:     #2ECC71;
+$color-blue:      #3498DB;
+$color-purple:    #9B59B6;
+$color-gray:      #95A5A6;
+$color-lightgray: #BDC3C7;
+$color-darkgray:  #7F8C8D;
+$color-orange:    #E67E22;
+
+// Color variants map: (name: (bg-color, text-color))
+$color-variants: (
+	'emerald':   ($color-emerald, white),
+	'red':       ($color-red, white),
+	'yellow':    ($color-yellow, black),
+	'green':     ($color-green, white),
+	'blue':      ($color-blue, white),
+	'purple':    ($color-purple, white),
+	'gray':      ($color-gray, white),
+	'lightgray': ($color-lightgray, black),
+	'darkgray':  ($color-darkgray, white),
+	'orange':    ($color-orange, white),
+	'white':     (white, black),
+	'black':     (black, white),
+);
+
+// Theme color variants (use CSS variables for theme switching)
+$theme-color-variants: (
+	'primary':   (var(--primary), var(--on-primary)),
+	'secondary': (var(--secondary), var(--on-secondary, white)),
+	'tertiary':  (var(--tertiary), var(--on-tertiary, white)),
+	'accent':    (var(--secondary), var(--on-secondary, white)),
+	'warn':      (var(--error), var(--on-error)),
+	'error':     (var(--error), var(--on-error)),
+	'success':   (var(--color-success), var(--on-success, white)),
+);

package/styles/grid.scss

@@ -0,0 +1,97 @@
+@use "sass:map";
+@use "sass:math";
+
+@mixin grid( $breakpoints: ( xs: 0, sm: 576px,
+		                   md: 768px, lg: 992px,
+		                   xl: 1200px, xxl: 1400px ) ) {
+
+	.xcontainer, .xcontainer-fluid {
+		width: 100%;
+	}
+
+	.xrow {
+		display:               grid;
+		grid-template-columns: repeat(12, 1fr);
+		grid-column-gap:       var(--xiri-grid-column-gap, 24px);
+		grid-row-gap:          var(--xiri-grid-row-gap, 20px);
+		width:                 100%;
+
+		&.xsmall {
+			grid-row-gap: 4px;
+		}
+	}
+
+	.xcol {
+		grid-column-end: span 12;
+		max-width:       100%;
+	}
+
+	.xcol-start {
+		grid-column-start: 1;
+	}
+
+	@each $abbr, $size in $breakpoints {
+		@for $i from 1 through 12 {
+			.xcol-#{$abbr}-#{$i} {
+				grid-column-end: span 12;
+				max-width:       100%;
+			}
+		}
+	}
+
+	@for $i from 1 through 12 {
+		.xcol-#{$i} {
+			grid-column-end: span $i;
+		}
+	}
+
+	@each $abbr, $size in $breakpoints {
+		@media (min-width: $size) {
+			// Loop through col classes
+			@for $i from 1 through 12 {
+				.xcol-#{$abbr}-#{$i} {
+					grid-column-end: span $i;
+				}
+				.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;
+				}
+				.xcol-right-#{$abbr}-#{$i} {
+					grid-column-start: calc(12 - $i + 1);
+					grid-column-end:   13;
+				}
+			}
+
+			.x-#{$abbr}-none {
+				display: none !important;
+			}
+		}
+	}
+
+	.x-none, .x-xs-none {
+		display: none !important;
+	}
+
+	@each $abbr, $size in $breakpoints {
+		@media (max-width: $size) {
+			.x-#{$abbr}-none-up {
+				display: none !important;
+			}
+		}
+	}
+
+	.x-valign-center {
+		align-content: center;
+	}
+	.x-valign-bottom {
+		align-content: end;
+	}
+
+	.x-align-center {
+		justify-self: center;
+	}
+	.x-align-right {
+		justify-self: end;
+	}
+
+}

package/styles/material-components.scss

@@ -0,0 +1,211 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'colors' as *;
+
+// ============================================
+// Color Variant Mixins
+// ============================================
+
+// Button color variant - generates all button types for a color
+@mixin button-color-variant($name, $bg-color, $text-color) {
+	.mat-mdc-raised-button.mat-#{$name},
+	.mat-mdc-unelevated-button.mat-#{$name},
+	.mat-mdc-fab.mat-#{$name},
+	.mat-mdc-mini-fab.mat-#{$name} {
+		--mat-button-filled-container-color:     #{$bg-color};
+		--mat-button-filled-label-text-color:    #{$text-color};
+		--mat-button-protected-container-color:  #{$bg-color};
+		--mat-button-protected-label-text-color: #{$text-color};
+		--mat-fab-container-color:               #{$bg-color};
+		--mat-fab-foreground-color:              #{$text-color};
+		--mat-fab-state-layer-color:             #{$text-color};
+		--mat-fab-small-container-color:         #{$bg-color};
+		--mat-fab-small-foreground-color:        #{$text-color};
+		--mat-fab-small-state-layer-color:       #{$text-color};
+	}
+
+	.mat-mdc-outlined-button.mat-#{$name} {
+		--mat-button-outlined-label-text-color: #{$bg-color};
+		--mat-button-outlined-outline-color:    #{$bg-color};
+	}
+
+	.mat-mdc-icon-button.mat-#{$name} {
+		--mat-icon-button-state-layer-color: #{$bg-color};
+		--mat-icon-button-icon-color:        #{$bg-color};
+		color:                               #{$bg-color};
+		--mat-icon-button-background-color:  var(--xiri-icon-button-background-color, #{$color-gray-100});
+		background-color:                    var(--xiri-icon-button-background-color, #{$color-gray-100});
+		border-radius:                       50%;
+		box-shadow:                          var(--mat-app-elevation-shadow-level-2);
+	}
+}
+
+// Icon color variant - generates mat-icon class for a color
+@mixin icon-color-variant($name, $color) {
+	mat-icon.#{$name} {
+		color: #{$color};
+	}
+}
+
+// Badge color variant - generates mat-badge class for a color
+@mixin badge-color-variant($name, $bg-color, $text-color) {
+	.mat-badge-#{$name} {
+		--mat-badge-background-color: #{$bg-color};
+		--mat-badge-text-color:       #{$text-color};
+	}
+}
+
+// Progress bar color variant - M3 compatible (replaces [color] input)
+@mixin progress-color-variant($name, $color) {
+	mat-progress-bar.#{$name} {
+		--mat-progress-bar-active-indicator-color: #{$color};
+	}
+}
+
+// Chip color variant - form chips and display chips
+@mixin chip-color-variant($name, $bg-color, $text-color) {
+	mat-chip-row.chip-#{$name} {
+		--mdc-chip-elevated-container-color:                    #{$bg-color};
+		--mdc-chip-label-text-color:                            #{$text-color};
+		--mdc-chip-with-icon-icon-color:                        #{$text-color};
+		--mdc-chip-with-trailing-icon-trailing-icon-color:      #{$text-color};
+		--mat-chip-trailing-action-state-layer-color:           #{$text-color};
+	}
+
+	.xiri-chip-display.#{$name} {
+		background-color: #{$bg-color};
+		color:            #{$text-color};
+	}
+}
+
+// Infopoint icon color variant
+@mixin infopoint-color-variant($name, $bg-color, $text-color) {
+	xiri-infopoint .icon.#{$name} {
+		background-color: #{$bg-color};
+
+		mat-icon {
+			color: white;
+		}
+	}
+}
+
+// ============================================
+// Special Icon Classes (basic colors only)
+// ============================================
+mat-icon {
+	&.white {
+		--mat-icon-color: white;
+	}
+
+	&.black {
+		--mat-icon-color: black;
+	}
+
+	&.inherit {
+		--mat-icon-color: inherit;
+	}
+}
+
+// ============================================
+// M3 Icon Button Size Variants
+// Default M3 icon button is 40px at density -1
+// ============================================
+.mat-small-icon-button {
+	--mat-icon-button-state-layer-size:  28px;
+	--mat-icon-button-touch-target-size: 28px;
+	--mat-icon-button-icon-size:         18px;
+
+	.mat-icon {
+		font-size:   18px;
+		width:       18px;
+		height:      18px;
+		line-height: 1;
+	}
+}
+
+.mat-medium-icon-button {
+	--mat-icon-button-state-layer-size:  36px;
+	--mat-icon-button-touch-target-size: 36px;
+	--mat-icon-button-icon-size:         22px;
+
+	.mat-icon {
+		font-size:   22px;
+		width:       22px;
+		height:      22px;
+		line-height: 1;
+	}
+}
+
+// ============================================
+// Generate ALL Color Variants
+// Merge theme colors + extended colors into single loop
+// ============================================
+$all-color-variants: map.merge($theme-color-variants, $color-variants);
+
+@each $name, $colors in $all-color-variants {
+	$bg-color:   list.nth($colors, 1);
+	$text-color: list.nth($colors, 2);
+
+	@include button-color-variant($name, $bg-color, $text-color);
+	@include icon-color-variant($name, $bg-color);
+	@include badge-color-variant($name, $bg-color, $text-color);
+	@include progress-color-variant($name, $bg-color);
+	@include infopoint-color-variant($name, $bg-color, $text-color);
+	@include chip-color-variant($name, $bg-color, $text-color);
+
+	.#{$name} {
+		color: #{$bg-color};
+	}
+}
+
+// ============================================
+// Chip Display (in tables / card lists)
+// ============================================
+.xiri-chips-display {
+	display:   flex;
+	flex-wrap: wrap;
+	gap:       4px;
+	padding:   2px 0;
+}
+
+td.right .xiri-chips-display,
+td.align-right .xiri-chips-display {
+	justify-content: flex-end;
+}
+
+.xiri-chip-display {
+	display:          inline-block;
+	padding:          2px 8px;
+	border-radius:    12px;
+	font-size:        12px;
+	line-height:      1.6;
+	background-color: var(--surface-variant, #DEE3EB);
+	color:            var(--on-surface-variant, #42474E);
+}
+
+// ============================================
+// Snackbar Color Variants
+// ============================================
+.xiri-snackbar-success {
+	--mdc-snackbar-container-color: #{$color-success};
+	--mdc-snackbar-supporting-text-color: white;
+	--mat-snack-bar-button-color: white;
+}
+
+.xiri-snackbar-error {
+	--mdc-snackbar-container-color: #{$color-red};
+	--mdc-snackbar-supporting-text-color: white;
+	--mat-snack-bar-button-color: white;
+}
+
+.xiri-snackbar-info {
+	--mdc-snackbar-container-color: #{$color-info};
+	--mdc-snackbar-supporting-text-color: white;
+	--mat-snack-bar-button-color: white;
+}
+
+.xiri-snackbar-warning {
+	--mdc-snackbar-container-color: #{$color-orange};
+	--mdc-snackbar-supporting-text-color: white;
+	--mat-snack-bar-button-color: white;
+}