sdga-ui 1.0.5 → 1.0.7

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": "جميع المكونات"
   },
@@ -209,6 +213,9 @@
     "danger_link": "رابط خطر",
     "warning_link": "رابط تحذير",
     "info_link": "رابط معلومات",
+    "neutral_link": "رابط محايد",
+    "oncolor_link": "رابط على لون خلفية",
+    "disabled_link": "رابط معطل",
     "underline_link": "رابط مع تسطير",
     "no_underline": "رابط بدون تسطير",
     "underline_25": "رابط مع شفافية تسطير 25%",
@@ -227,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"
   },
@@ -209,6 +213,9 @@
     "danger_link": "Danger link",
     "warning_link": "Warning link",
     "info_link": "Info link",
+    "neutral_link": "Neutral link",
+    "oncolor_link": "Link on colored background",
+    "disabled_link": "Disabled link",
     "underline_link": "Link with underline",
     "no_underline": "Link without underline",
     "underline_25": "Link with 25% underline opacity",
@@ -227,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">

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

@@ -56,78 +56,78 @@
     <h3 class="mt-5">{{ 'buttons.section_icons' | translate }}</h3>
     <div class="component-showcase mb-3">
       <button type="button" class="btn btn-primary btn-icon">
-        <i class="hgi hgi-stroke hgi-download-04"></i>{{ 'buttons.download' | translate }}
+        <i class="bi bi-download"></i>{{ 'buttons.download' | translate }}
       </button>
       <button type="button" class="btn btn-neutral btn-icon">
-        <i class="hgi hgi-stroke hgi-upload-04"></i>{{ 'buttons.upload' | translate }}
+        <i class="bi bi-upload"></i>{{ 'buttons.upload' | translate }}
       </button>
       <button type="button" class="btn btn-secondary btn-icon">
-        <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>{{ 'buttons.edit' | translate }}
+        <i class="bi bi-pencil"></i>{{ 'buttons.edit' | translate }}
       </button>
       <button type="button" class="btn btn-danger btn-icon">
-        <i class="hgi hgi-stroke hgi-delete-02"></i>{{ 'buttons.delete' | translate }}
+        <i class="bi bi-trash"></i>{{ 'buttons.delete' | translate }}
       </button>
     </div>
     <app-code-example [htmlCode]="buttonIconLeftCode"></app-code-example>
     <div class="component-showcase mb-3">
       <button type="button" class="btn btn-primary btn-icon">
-        {{ 'buttons.save' | translate }}<i class="hgi hgi-stroke hgi-tick-02"></i>
+        {{ 'buttons.save' | translate }}<i class="bi bi-check"></i>
       </button>
       <button type="button" class="btn btn-neutral btn-icon">
-        {{ 'buttons.search' | translate }}<i class="hgi hgi-stroke hgi-search-01"></i>
+        {{ 'buttons.search' | translate }}<i class="bi bi-search"></i>
       </button>
       <button type="button" class="btn btn-secondary btn-icon">
-        {{ 'buttons.settings' | translate }}<i class="hgi hgi-stroke hgi-settings-02"></i>
+        {{ 'buttons.settings' | translate }}<i class="bi bi-gear"></i>
       </button>
     </div>
     <app-code-example [htmlCode]="buttonIconRightCode"></app-code-example>
     <div class="component-showcase mb-3">
       <button type="button" class="btn btn-primary btn-icon btn-sm">
-        <i class="hgi hgi-stroke hgi-plus-sign-circle"></i>{{ 'buttons.add' | translate }}
+        <i class="bi bi-plus-circle"></i>{{ 'buttons.add' | translate }}
       </button>
       <button type="button" class="btn btn-outline-primary btn-icon">
-        <i class="hgi hgi-stroke hgi-arrow-right-01"></i>{{ 'buttons.next' | translate }}
+        <i class="bi bi-arrow-right"></i>{{ 'buttons.next' | translate }}
       </button>
       <button type="button" class="btn btn-outline-secondary btn-icon">
-        <i class="hgi hgi-stroke hgi-arrow-left-01"></i>{{ 'buttons.previous' | translate }}
+        <i class="bi bi-arrow-left"></i>{{ 'buttons.previous' | translate }}
       </button>
     </div>
     
     <h3 class="mt-5">{{ 'buttons.section_icon_only' | translate }}</h3>
     <div class="component-showcase mb-3">
       <button type="button" class="btn btn-primary btn-icon" aria-label="{{ 'buttons.download' | translate }}">
-        <i class="hgi hgi-stroke hgi-download-04"></i>
+        <i class="bi bi-download"></i>
       </button>
       <button type="button" class="btn btn-neutral btn-icon" aria-label="{{ 'buttons.upload' | translate }}">
-        <i class="hgi hgi-stroke hgi-upload-04"></i>
+        <i class="bi bi-upload"></i>
       </button>
       <button type="button" class="btn btn-secondary btn-icon" aria-label="{{ 'buttons.edit' | translate }}">
-        <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>
+        <i class="bi bi-pencil"></i>
       </button>
       <button type="button" class="btn btn-danger btn-icon" aria-label="{{ 'buttons.delete' | translate }}">
-        <i class="hgi hgi-stroke hgi-delete-02"></i>
+        <i class="bi bi-trash"></i>
       </button>
     </div>
     <div class="component-showcase mb-3">
       <button type="button" class="btn btn-outline-primary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
-        <i class="hgi hgi-stroke hgi-search-01"></i>
+        <i class="bi bi-search"></i>
       </button>
       <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.settings' | translate }}">
-        <i class="hgi hgi-stroke hgi-settings-02"></i>
+        <i class="bi bi-gear"></i>
       </button>
       <button type="button" class="btn btn-outline-neutral btn-icon" aria-label="{{ 'buttons.add' | translate }}">
-        <i class="hgi hgi-stroke hgi-plus-sign-circle"></i>
+        <i class="bi bi-plus-circle"></i>
       </button>
     </div>
     <div class="component-showcase">
       <button type="button" class="btn btn-primary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
-        <i class="hgi hgi-stroke hgi-search-01"></i>
+        <i class="bi bi-search"></i>
       </button>
       <button type="button" class="btn btn-neutral btn-icon btn-sm" aria-label="{{ 'buttons.settings' | translate }}">
-        <i class="hgi hgi-stroke hgi-settings-02"></i>
+        <i class="bi bi-gear"></i>
       </button>
       <button type="button" class="btn btn-secondary btn-icon btn-xs" aria-label="{{ 'buttons.add' | translate }}">
-        <i class="hgi hgi-stroke hgi-plus-sign-circle"></i>
+        <i class="bi bi-plus-circle"></i>
       </button>
     </div>
     <app-code-example [htmlCode]="buttonIconOnlyCode"></app-code-example>
@@ -253,7 +253,7 @@
     <div class="component-showcase">
       <div class="dropdown">
         <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="hgi hgi-stroke hgi-settings-02"></i>
+          <i class="bi bi-gear"></i>
         </button>
         <ul class="dropdown-menu">
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
@@ -264,7 +264,7 @@
       
       <div class="dropdown">
         <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="hgi hgi-stroke hgi-settings-02"></i>
+          <i class="bi bi-gear"></i>
         </button>
         <ul class="dropdown-menu">
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
@@ -275,7 +275,7 @@
       
       <div class="dropdown">
         <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          <i class="hgi hgi-stroke hgi-settings-02"></i>
+          <i class="bi bi-gear"></i>
         </button>
         <ul class="dropdown-menu">
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>

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

@@ -30,39 +30,39 @@ export class ButtonsComponent {
 <button type="button" class="btn btn-primary" disabled>Disabled</button>`;
 
   buttonIconLeftCode = `<button type="button" class="btn btn-primary btn-icon">
-  <i class="hgi hgi-stroke hgi-download-04"></i>Download
+  <i class="bi bi-download"></i>Download
 </button>
 <button type="button" class="btn btn-neutral btn-icon">
-  <i class="hgi hgi-stroke hgi-upload-04"></i>Upload
+  <i class="bi bi-upload"></i>Upload
 </button>
 <button type="button" class="btn btn-secondary btn-icon">
-  <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>Edit
+  <i class="bi bi-pencil"></i>Edit
 </button>
 <button type="button" class="btn btn-danger btn-icon">
-  <i class="hgi hgi-stroke hgi-delete-02"></i>Delete
+  <i class="bi bi-trash"></i>Delete
 </button>`;
 
   buttonIconRightCode = `<button type="button" class="btn btn-primary btn-icon">
-  Save<i class="hgi hgi-stroke hgi-tick-02"></i>
+  Save<i class="bi bi-check"></i>
 </button>
 <button type="button" class="btn btn-neutral btn-icon">
-  Search<i class="hgi hgi-stroke hgi-search-01"></i>
+  Search<i class="bi bi-search"></i>
 </button>
 <button type="button" class="btn btn-secondary btn-icon">
-  Settings<i class="hgi hgi-stroke hgi-settings-02"></i>
+  Settings<i class="bi bi-gear"></i>
 </button>`;
 
   buttonIconOnlyCode = `<button type="button" class="btn btn-primary btn-icon" aria-label="Download">
-  <i class="hgi hgi-stroke hgi-download-04"></i>
+  <i class="bi bi-download"></i>
 </button>
 <button type="button" class="btn btn-neutral btn-icon" aria-label="Upload">
-  <i class="hgi hgi-stroke hgi-upload-04"></i>
+  <i class="bi bi-upload"></i>
 </button>
 <button type="button" class="btn btn-secondary btn-icon" aria-label="Edit">
-  <i class="hgi hgi-stroke hgi-pencil-edit-02"></i>
+  <i class="bi bi-pencil"></i>
 </button>
 <button type="button" class="btn btn-danger btn-icon" aria-label="Delete">
-  <i class="hgi hgi-stroke hgi-delete-02"></i>
+  <i class="bi bi-trash"></i>
 </button>`;
 
   dropdownButtonCode = `<div class="dropdown">
@@ -122,7 +122,7 @@ export class ButtonsComponent {
 
   iconDropdownCode = `<div class="dropdown">
   <button class="btn btn-primary dropdown-toggle btn-lg" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="hgi hgi-stroke hgi-settings-02"></i>
+    <i class="bi bi-gear"></i>
   </button>
   <ul class="dropdown-menu">
     <li><button class="dropdown-item" type="button">Action</button></li>
@@ -133,7 +133,7 @@ export class ButtonsComponent {
 
 <div class="dropdown">
   <button class="btn btn-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="hgi hgi-stroke hgi-settings-02"></i>
+    <i class="bi bi-gear"></i>
   </button>
   <ul class="dropdown-menu">
     <li><button class="dropdown-item" type="button">Action</button></li>
@@ -144,7 +144,7 @@ export class ButtonsComponent {
 
 <div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-    <i class="hgi hgi-stroke hgi-settings-02"></i>
+    <i class="bi bi-gear"></i>
   </button>
   <ul class="dropdown-menu">
     <li><button class="dropdown-item" type="button">Action</button></li>