sdga-ui 1.0.6 → 1.0.7

package/demo-angular/package-lock.json

@@ -8,18 +8,18 @@
       "name": "demo-angular",
       "version": "0.0.0",
       "dependencies": {
-        "@angular/common": "^21.0.0",
-        "@angular/compiler": "^21.0.0",
-        "@angular/core": "^21.0.0",
-        "@angular/forms": "^21.0.0",
-        "@angular/platform-browser": "^21.0.0",
-        "@angular/router": "^21.0.0",
+        "@angular/common": "^21.0.2",
+        "@angular/compiler": "^21.0.2",
+        "@angular/core": "^21.0.2",
+        "@angular/forms": "^21.0.2",
+        "@angular/platform-browser": "^21.0.2",
+        "@angular/router": "^21.0.2",
         "@ngx-translate/core": "^17.0.0",
         "@ngx-translate/http-loader": "^17.0.0",
         "bootstrap": "^5.3.8",
         "highlight.js": "^11.11.1",
         "rxjs": "~7.8.0",
-        "sdga-ui": "file:..",
+        "sdga-ui": "^1.0.6",
         "tslib": "^2.3.0"
       },
       "devDependencies": {
@@ -34,7 +34,7 @@
     },
     "..": {
       "name": "sdga-ui",
-      "version": "1.0.5",
+      "version": "1.0.6",
       "license": "MIT",
       "devDependencies": {
         "autoprefixer": "^10.4.19",
@@ -477,9 +477,9 @@
       }
     },
     "node_modules/@angular/common": {
-      "version": "21.0.1",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.0.1.tgz",
-      "integrity": "sha512-EqdTGpFp7PVdTVztO7TB6+QxdzUbYXKKT2jwG2Gg+PIQZ2A8XrLPRmGXyH/DLlc5IhnoJlLbngmBRCLCO4xWog==",
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.0.2.tgz",
+      "integrity": "sha512-dOi7w0dsUCJ5ZFnXD2eR/8LWy9/XAzXuo9zU6zu7qP4vimjTQRs11IawnuC+jaAQtCFiySshzEPPsuAw9bPkOA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -489,14 +489,14 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "21.0.1",
+        "@angular/core": "21.0.2",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/compiler": {
-      "version": "21.0.1",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.0.1.tgz",
-      "integrity": "sha512-YRzHpThgCaC9b3xzK1Wx859ePeHEPR7ewQklUB5TYbpzVacvnJo38PcSAx/nzOmgX9y4mgyros6LzECmBb8d8w==",
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.0.2.tgz",
+      "integrity": "sha512-Rs69yqT1M+l0DqAAZcGDt2TntKAPyldEViq3GQHbkM1W4f/hoRgBRsE6StxvP6wszW6VVHH3uQQdyeZV8Z4rpw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -507,9 +507,9 @@
       }
     },
     "node_modules/@angular/compiler-cli": {
-      "version": "21.0.1",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.0.1.tgz",
-      "integrity": "sha512-BxGLtL5bxlaaAs/kSN4oyXhMfvzqsj1Gc4Jauz39R4xtgOF5cIvjBtj6dJ9mD3PK0s6zaFi7WYd0YwWkxhjgMA==",
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.0.2.tgz",
+      "integrity": "sha512-+6lyvDV0rY1qbc9+rzFCBZDGCfJU0ah3p+4Tu0YYgKRbpbwvqj/O4cG1mLknEuQ2G61Y/tTKnTa4ng1XNtqVyw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -531,7 +531,7 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "21.0.1",
+        "@angular/compiler": "21.0.2",
         "typescript": ">=5.9 <6.0"
       },
       "peerDependenciesMeta": {
@@ -541,9 +541,9 @@
       }
     },
     "node_modules/@angular/core": {
-      "version": "21.0.1",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.0.1.tgz",
-      "integrity": "sha512-z0G9Bwzgqr0fQVbtMgqwl+SbbiqtJD7I2xT6U5p45LetKHojcfigH29dxi/vqALPwEdgb2nSIx7RqVhoyynraQ==",
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.0.2.tgz",
+      "integrity": "sha512-jj2lYmwMKYY7tmZ7ml8rXJRKwkVMJamFIf6VQuIlSFK79Pmn6AeUhZwDlrAmK7sY9kakEKUmslSg0XLL3bfiyw==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -553,7 +553,7 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "21.0.1",
+        "@angular/compiler": "21.0.2",
         "rxjs": "^6.5.3 || ^7.4.0",
         "zone.js": "~0.15.0 || ~0.16.0"
       },
@@ -567,9 +567,9 @@
       }
     },
     "node_modules/@angular/forms": {
-      "version": "21.0.1",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.0.1.tgz",
-      "integrity": "sha512-BVFPuKjxkzjzKMmpc6KxUKICpVs6J2/KzA4HjtPp/UKvdZPe8dj8vIXuc9pGf8DA4XdkjCwvv8szCgzTWi02LQ==",
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.0.2.tgz",
+      "integrity": "sha512-QZHGKmYlyiQMXyAcuWgQ93kTi9OvoD9tzLX+iQt8O3O8sJT1kEKiANmKR6jKihTG1W3Ckmti804kcbpjCeoGyg==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -578,17 +578,17 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "21.0.1",
-        "@angular/core": "21.0.1",
-        "@angular/platform-browser": "21.0.1",
+        "@angular/common": "21.0.2",
+        "@angular/core": "21.0.2",
+        "@angular/platform-browser": "21.0.2",
         "@standard-schema/spec": "^1.0.0",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/platform-browser": {
-      "version": "21.0.1",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.0.1.tgz",
-      "integrity": "sha512-68StH9HILKUqNhQKz6KKNHzpgk1n88CIusWlmJvnb0l6iWGf3ydq5lTMKAKiZQmSDAVP5unTGfNvIkh59GRyVg==",
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.0.2.tgz",
+      "integrity": "sha512-Qygk215mRK2S1tvD6B5dy3ekMidGmmLktxr5i01YC8synHYcex7HK18JcWuCrFbY6NbCnHsMD3bYi0mwhag+Sg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -598,9 +598,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/animations": "21.0.1",
-        "@angular/common": "21.0.1",
-        "@angular/core": "21.0.1"
+        "@angular/animations": "21.0.2",
+        "@angular/common": "21.0.2",
+        "@angular/core": "21.0.2"
       },
       "peerDependenciesMeta": {
         "@angular/animations": {
@@ -609,9 +609,9 @@
       }
     },
     "node_modules/@angular/router": {
-      "version": "21.0.1",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.0.1.tgz",
-      "integrity": "sha512-EnNbiScESZ0op9XS9qUNncWc1UcSYy90uCbDMVTTChikZt9b+e19OusFMf50zecb96VMMz+BzNY1see7Rmvx4g==",
+      "version": "21.0.2",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.0.2.tgz",
+      "integrity": "sha512-fm02ICYhqY+0xO+Skn7UsMRepgbh6vermKRLf2mVZYZl6bNWvq0WiolB2y34ntOkh3ZsbRbmMNhL8auLMU8mPA==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -620,9 +620,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "21.0.1",
-        "@angular/core": "21.0.1",
-        "@angular/platform-browser": "21.0.1",
+        "@angular/common": "21.0.2",
+        "@angular/core": "21.0.2",
+        "@angular/platform-browser": "21.0.2",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },

package/demo-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "demo-angular",
-  "version": "0.0.0",
+  "version": "1.0.7",
   "scripts": {
     "ng": "ng",
     "start": "npm run use:local && ng serve -o",
@@ -27,18 +27,18 @@
   "private": true,
   "packageManager": "npm@11.6.3",
   "dependencies": {
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/router": "^21.0.0",
+    "@angular/common": "^21.0.2",
+    "@angular/compiler": "^21.0.2",
+    "@angular/core": "^21.0.2",
+    "@angular/forms": "^21.0.2",
+    "@angular/platform-browser": "^21.0.2",
+    "@angular/router": "^21.0.2",
     "@ngx-translate/core": "^17.0.0",
     "@ngx-translate/http-loader": "^17.0.0",
     "bootstrap": "^5.3.8",
     "highlight.js": "^11.11.1",
     "rxjs": "~7.8.0",
-    "sdga-ui": "^1.0.6",
+    "sdga-ui": "^1.0.7",
     "tslib": "^2.3.0"
   },
   "devDependencies": {

package/demo-angular/public/404.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Redirecting...</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="refresh" content="0; url=/dga-ui/">
+    <script>
+      // GitHub Pages SPA fallback
+      // For project pages, the first path segment is the repo name.
+      (function() {
+        var segmentCount = 1; // keep '/dga-ui'
+        var l = window.location;
+        var path = l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/';
+        var rest = l.pathname.split('/').slice(1 + segmentCount).join('/');
+        var query = l.search || '';
+        var hash = l.hash || '';
+        // Persist the intended route for index.html to restore
+        var data = {
+          path: path + rest.replace(/\/?$/, ''),
+          query: query,
+          hash: hash
+        };
+        try {
+          sessionStorage.setItem('ghspa-redirect', JSON.stringify(data));
+        } catch (e) {}
+        // Navigate to the app root so the SPA can boot
+        l.replace(path);
+      })();
+    </script>
+  </head>
+  <body>
+    Redirecting...
+  </body>
+</html>

package/demo-angular/public/i18n/ar.json

@@ -7,6 +7,7 @@
   "nav": {
     "getting_started": "البدء",
     "components": "المكونات",
+    "layout": "التخطيط",
     "home": "الرئيسية",
     "alerts": "التنبيهات",
     "buttons": "الأزرار",
@@ -15,6 +16,9 @@
     "tables": "الجداول",
     "toasts": "الإشعارات",
     "links": "الروابط",
+    "header": "الرأس",
+    "footer": "التذييل",
+    "contexts": "السياقات",
     "utilities": "الأدوات",
     "all_components": "جميع المكونات"
   },
@@ -230,6 +234,49 @@
     "bold_link": "نمط رابط عريض",
     "decorated_link": "رابط مع تسطير متحرك"
   },
+  "header": {
+    "title": "الرأس",
+    "subtitle": "مكون رأس متجاوب مع التنقل والعلامة التجارية",
+    "section_default": "الرأس الافتراضي",
+    "section_variants": "أنواع الرأس"
+  },
+  "footer": {
+    "title": "التذييل",
+    "subtitle": "مكون تذييل متجاوب مع الروابط ووسائل التواصل الاجتماعي",
+    "section_primary": "التذييل الرئيسي (خلفية on-primary)",
+    "section_secondary": "التذييل الثانوي (خلفية on-secondary)",
+    "group_label": "عنوان المجموعة",
+    "footer_link": "رابط التذييل",
+    "social_media": "وسائل التواصل الاجتماعي",
+    "accessibility_tools": "أدوات إمكانية الوصول",
+    "all_rights_reserved": "جميع الحقوق محفوظة للهيئة الرقمية للحكومة © 2024",
+    "terms_conditions": "الشروط والأحكام",
+    "privacy_policy": "سياسة الخصوصية"
+  },
+  "contexts": {
+    "title": "السياقات",
+    "subtitle": "نظام تخصيص حسب السياق لألوان المكونات التكيفية",
+    "section_intro": "مقدمة",
+    "intro_text": "يقوم نظام السياق بتكييف ألوان المكونات تلقائيًا بناءً على خلفية العنصر الأب. قم بلف المكونات في فئات السياق لضمان التباين المناسب وسهولة الوصول.",
+    "section_primary": "السياق الرئيسي (on-primary)",
+    "section_dark": "السياق الداكن (on-dark)",
+    "section_danger": "سياق الخطر (on-danger)",
+    "section_success": "سياق النجاح (on-success)",
+    "section_warning": "سياق التحذير (on-warning)",
+    "section_light": "السياق الفاتح (on-light)",
+    "section_neutral": "السياق المحايد (on-neutral)",
+    "section_info": "سياق المعلومات (on-info)",
+    "section_lavender": "سياق اللافندر (on-lavender)",
+    "section_secondary": "السياق الثانوي (on-secondary)",
+    "demo_heading": "عرض توضيحي للسياق",
+    "demo_text": "يتكيف هذا المحتوى تلقائيًا مع ألوانه بناءً على غلاف السياق.",
+    "button_primary": "زر رئيسي",
+    "button_secondary": "زر ثانوي",
+    "button_outline": "زر محدد",
+    "link_text": "هذا رابط",
+    "link_primary": "رابط رئيسي",
+    "link_neutral": "رابط محايد"
+  },
   "code": {
     "show": "إظهار الكود",
     "hide": "إخفاء الكود",

package/demo-angular/public/i18n/en.json

@@ -7,6 +7,7 @@
   "nav": {
     "getting_started": "Getting Started",
     "components": "Components",
+    "layout": "Layout",
     "home": "Home",
     "alerts": "Alerts",
     "buttons": "Buttons",
@@ -15,6 +16,9 @@
     "tables": "Tables",
     "toasts": "Toasts",
     "links": "Links",
+    "header": "Header",
+    "footer": "Footer",
+    "contexts": "Contexts",
     "utilities": "Utilities",
     "all_components": "All Components"
   },
@@ -230,6 +234,49 @@
     "bold_link": "Bold link style",
     "decorated_link": "Animated underline link"
   },
+  "header": {
+    "title": "Header",
+    "subtitle": "Responsive header component with navigation and branding",
+    "section_default": "Default Header",
+    "section_variants": "Header Variants"
+  },
+  "footer": {
+    "title": "Footer",
+    "subtitle": "Responsive footer component with links and social media",
+    "section_primary": "Primary Footer (on-primary background)",
+    "section_secondary": "Secondary Footer (on-secondary background)",
+    "group_label": "Group Label",
+    "footer_link": "Footer Link",
+    "social_media": "Social Media",
+    "accessibility_tools": "Accessibility Tools",
+    "all_rights_reserved": "All Rights Reserved For Digital Government Authority © 2024",
+    "terms_conditions": "Terms and Conditions",
+    "privacy_policy": "Privacy Policy"
+  },
+  "contexts": {
+    "title": "Contexts",
+    "subtitle": "Context-aware theming system for adaptive component colors",
+    "section_intro": "Introduction",
+    "intro_text": "The context system automatically adapts component colors based on their parent background. Wrap components in context classes to ensure proper contrast and accessibility.",
+    "section_primary": "Primary Context (on-primary)",
+    "section_dark": "Dark Context (on-dark)",
+    "section_danger": "Danger Context (on-danger)",
+    "section_success": "Success Context (on-success)",
+    "section_warning": "Warning Context (on-warning)",
+    "section_light": "Light Context (on-light)",
+    "section_neutral": "Neutral Context (on-neutral)",
+    "section_info": "Info Context (on-info)",
+    "section_lavender": "Lavender Context (on-lavender)",
+    "section_secondary": "Secondary Context (on-secondary)",
+    "demo_heading": "Context Demo",
+    "demo_text": "This content automatically adapts its colors based on the context wrapper.",
+    "button_primary": "Primary Button",
+    "button_secondary": "Secondary Button",
+    "button_outline": "Outline Button",
+    "link_text": "This is a link",
+    "link_primary": "Primary Link",
+    "link_neutral": "Neutral Link"
+  },
   "code": {
     "show": "Show Code",
     "hide": "Hide Code",

package/demo-angular/src/app/app.routes.ts

@@ -14,6 +14,10 @@ export const routes: Routes = [
     path: 'alerts',
     loadComponent: () => import('./views/alerts/alerts.component').then(m => m.AlertsComponent)
   },
+  {
+    path: 'contexts',
+    loadComponent: () => import('./views/contexts/contexts.component').then(m => m.ContextsComponent)
+  },
   {
     path: 'buttons',
     loadComponent: () => import('./views/buttons/buttons.component').then(m => m.ButtonsComponent)
@@ -34,12 +38,16 @@ export const routes: Routes = [
     path: 'toasts',
     loadComponent: () => import('./views/toasts/toasts.component').then(m => m.ToastsComponent)
   },
-  {
-    path: 'bootstrap',
-    loadComponent: () => import('./views/bootstrap/bootstrap.component').then(m => m.BootstrapComponent)
-  },
   {
     path: 'links',
     loadComponent: () => import('./views/links/links.component').then(m => m.LinksComponent)
+  },
+  {
+    path: 'header',
+    loadComponent: () => import('./views/header/header').then(m => m.Header)
+  },
+  {
+    path: 'footer',
+    loadComponent: () => import('./views/footer/footer').then(m => m.Footer)
   }
 ];

package/demo-angular/src/app/app.ts

@@ -40,18 +40,24 @@ export class App {
         { id: 'home', labelKey: 'nav.home', icon: '🏠', route: '/home' }
       ]
     },
+    {
+      groupKey: 'nav.layout',
+      items: [
+        { id: 'header', labelKey: 'nav.header', icon: '📋', route: '/header' },
+        { id: 'footer', labelKey: 'nav.footer', icon: '📄', route: '/footer' }
+      ]
+    },
     {
       groupKey: 'nav.components',
       items: [
         { id: 'alerts', labelKey: 'nav.alerts', icon: '⚠️', route: '/alerts' },
+        { id: 'contexts', labelKey: 'nav.contexts', icon: '🧩', route: '/contexts' },
         { id: 'buttons', labelKey: 'nav.buttons', icon: '🔘', route: '/buttons' },
         { id: 'cards', labelKey: 'nav.cards', icon: '🃏', route: '/cards' },
         { id: 'forms', labelKey: 'nav.forms', icon: '📝', route: '/forms' },
         { id: 'tables', labelKey: 'nav.tables', icon: '📊', route: '/tables' },
         { id: 'toasts', labelKey: 'nav.toasts', icon: '🔔', route: '/toasts' },
         { id: 'links', labelKey: 'nav.links', icon: '🔗', route: '/links' },
-        { id: 'utilities', labelKey: 'nav.utilities', icon: '🛠️', route: '/utilities' },
-        { id: 'bootstrap', labelKey: 'nav.all_components', icon: '🎨', route: '/bootstrap' }
       ]
     }
   ];

package/demo-angular/src/app/views/alerts/alerts.component.html

@@ -8,7 +8,7 @@
     <section>
     <h3 class="h5 mb-3">Standard Alerts</h3>
     <div class="alert alert-success alert-dismissible fade show" role="alert">
-      <i class="hgi hgi-stroke hgi-tick-02 alert-icon"></i>
+      <i class="bi bi-check alert-icon"></i>
       <div>
         <strong class="alert-title">{{ 'alerts.success' | translate }}</strong> {{ 'alerts.success_text' | translate }}
         <div class="alert-footer">
@@ -22,7 +22,7 @@
     <app-code-example [htmlCode]="successAlertCode"></app-code-example>
     
     <div class="alert alert-danger alert-dismissible fade show" role="alert">
-      <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+      <i class="bi bi-exclamation-circle alert-icon"></i>
       <div>
         <strong class="alert-title">{{ 'alerts.danger' | translate }}</strong> {{ 'alerts.danger_text' | translate }}
         <div class="alert-footer">
@@ -36,7 +36,7 @@
     <app-code-example [htmlCode]="dangerAlertCode"></app-code-example>
     
     <div class="alert alert-warning alert-dismissible fade show" role="alert">
-      <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+      <i class="bi bi-exclamation-triangle alert-icon"></i>
       <div>
         <strong class="alert-title">{{ 'alerts.warning' | translate }}</strong> {{ 'alerts.warning_text' | translate }}
         <div class="alert-footer">
@@ -50,7 +50,7 @@
     <app-code-example [htmlCode]="warningAlertCode"></app-code-example>
     
      <div class="alert alert-info alert-dismissible fade show" role="alert">
-      <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+      <i class="bi bi-info-circle alert-icon"></i>
       <div>
         <strong class="alert-title">{{ 'alerts.info' | translate }}</strong> {{ 'alerts.info_text' | translate }}
         <div class="alert-footer">
@@ -64,7 +64,7 @@
     <app-code-example [htmlCode]="infoAlertCode"></app-code-example>
     
     <div class="alert alert-neutral alert-dismissible fade show" role="alert">
-      <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+      <i class="bi bi-info-circle alert-icon"></i>
       <div>
         <strong class="alert-title">{{ 'alerts.neutral' | translate }}</strong> {{ 'alerts.neutral_text' | translate }}
         <div class="alert-footer">
@@ -81,7 +81,7 @@
     <section>
     <h3 class="h5 mb-3">Side-bordered Alerts</h3>
     <div class="alert alert-side alert-success alert-dismissible fade show" role="alert">
-      <i class="hgi hgi-stroke hgi-tick-02 alert-icon"></i>
+      <i class="bi bi-check alert-icon"></i>
       <div>
         <strong class="alert-title">{{ 'alerts.success' | translate }}</strong> {{ 'alerts.success_text' | translate }}
         <div class="alert-footer">
@@ -95,7 +95,7 @@
     <app-code-example [htmlCode]="sideSuccessAlertCode"></app-code-example>
     
     <div class="alert alert-side alert-danger alert-dismissible fade show" role="alert">
-      <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+      <i class="bi bi-exclamation-circle alert-icon"></i>
       <div>
         <strong class="alert-title">{{ 'alerts.danger' | translate }}</strong> {{ 'alerts.danger_text' | translate }}
         <div class="alert-footer">
@@ -109,7 +109,7 @@
     <app-code-example [htmlCode]="sideDangerAlertCode"></app-code-example>
     
     <div class="alert alert-side alert-warning alert-dismissible fade show" role="alert">
-      <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+      <i class="bi bi-exclamation-triangle alert-icon"></i>
       <div>
         <strong class="alert-title">{{ 'alerts.warning' | translate }}</strong> {{ 'alerts.warning_text' | translate }}
         <div class="alert-footer">
@@ -123,7 +123,7 @@
     <app-code-example [htmlCode]="sideWarningAlertCode"></app-code-example>
     
     <div class="alert alert-side alert-info alert-dismissible fade show" role="alert">
-      <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+      <i class="bi bi-info-circle alert-icon"></i>
       <div>
         <strong class="alert-title">{{ 'alerts.info' | translate }}</strong> {{ 'alerts.info_text' | translate }}
         <div class="alert-footer">
@@ -137,7 +137,7 @@
     <app-code-example [htmlCode]="sideInfoAlertCode"></app-code-example>
     
     <div class="alert alert-side alert-neutral alert-dismissible fade show" role="alert">
-      <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+      <i class="bi bi-info-circle alert-icon"></i>
       <div>
         <strong class="alert-title">{{ 'alerts.neutral' | translate }}</strong> {{ 'alerts.neutral_text' | translate }}
         <div class="alert-footer">

package/demo-angular/src/app/views/alerts/alerts.component.ts

@@ -12,7 +12,7 @@ import { CodeExampleComponent } from '../../shared/code-example/code-example.com
 export class AlertsComponent {
   // Standard Dismissible Alerts
   successAlertCode = `<div class="alert alert-success alert-dismissible fade show" role="alert">
-  <i class="hgi hgi-stroke hgi-tick-02 alert-icon"></i>
+  <i class="bi bi-check alert-icon"></i>
   <div>
     <strong class="alert-title">Success!</strong> Your action completed successfully.
     <div class="alert-footer">
@@ -24,7 +24,7 @@ export class AlertsComponent {
 </div>`;
 
   dangerAlertCode = `<div class="alert alert-danger alert-dismissible fade show" role="alert">
-  <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+  <i class="bi bi-exclamation-circle alert-icon"></i>
   <div>
     <strong class="alert-title">Error!</strong> Something went wrong with your request.
     <div class="alert-footer">
@@ -36,7 +36,7 @@ export class AlertsComponent {
 </div>`;
 
   warningAlertCode = `<div class="alert alert-warning alert-dismissible fade show" role="alert">
-  <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+  <i class="bi bi-exclamation-triangle alert-icon"></i>
   <div>
     <strong class="alert-title">Warning!</strong> Please review before proceeding.
     <div class="alert-footer">
@@ -48,7 +48,7 @@ export class AlertsComponent {
 </div>`;
 
   infoAlertCode = `<div class="alert alert-info alert-dismissible fade show" role="alert">
-  <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+  <i class="bi bi-info-circle alert-icon"></i>
   <div>
     <strong class="alert-title">Info</strong> Here's some helpful information.
     <div class="alert-footer">
@@ -60,7 +60,7 @@ export class AlertsComponent {
 </div>`;
 
   neutralAlertCode = `<div class="alert alert-neutral alert-dismissible fade show" role="alert">
-  <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+  <i class="bi bi-info-circle alert-icon"></i>
   <div>
     <strong class="alert-title">Neutral</strong> Standard notification message.
     <div class="alert-footer">
@@ -73,7 +73,7 @@ export class AlertsComponent {
 
   // Side-bordered Alerts
   sideSuccessAlertCode = `<div class="alert alert-side alert-success alert-dismissible fade show" role="alert">
-  <i class="hgi hgi-stroke hgi-tick-02 alert-icon"></i>
+  <i class="bi bi-check alert-icon"></i>
   <div>
     <strong class="alert-title">Success!</strong> Your action completed successfully.
     <div class="alert-footer">
@@ -85,7 +85,7 @@ export class AlertsComponent {
 </div>`;
 
   sideDangerAlertCode = `<div class="alert alert-side alert-danger alert-dismissible fade show" role="alert">
-  <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+  <i class="bi bi-exclamation-circle alert-icon"></i>
   <div>
     <strong class="alert-title">Error!</strong> Something went wrong with your request.
     <div class="alert-footer">
@@ -97,7 +97,7 @@ export class AlertsComponent {
 </div>`;
 
   sideWarningAlertCode = `<div class="alert alert-side alert-warning alert-dismissible fade show" role="alert">
-  <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+  <i class="bi bi-exclamation-triangle alert-icon"></i>
   <div>
     <strong class="alert-title">Warning!</strong> Please review before proceeding.
     <div class="alert-footer">
@@ -109,7 +109,7 @@ export class AlertsComponent {
 </div>`;
 
   sideInfoAlertCode = `<div class="alert alert-side alert-info alert-dismissible fade show" role="alert">
-  <i class="hgi hgi-stroke hgi-alert-02 alert-icon"></i>
+  <i class="bi bi-info-circle alert-icon"></i>
   <div>
     <strong class="alert-title">Info</strong> Here's some helpful information.
     <div class="alert-footer">
@@ -121,7 +121,7 @@ export class AlertsComponent {
 </div>`;
 
   sideNeutralAlertCode = `<div class="alert alert-side alert-neutral alert-dismissible fade show" role="alert">
-  <i class="hgi hgi-stroke hgi-help-circle alert-icon"></i>
+  <i class="bi bi-info-circle alert-icon"></i>
   <div>
     <strong class="alert-title">Neutral</strong> Standard notification message.
     <div class="alert-footer">