sdga-ui 1.0.5 → 1.0.7

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

@@ -0,0 +1,142 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { CodeExampleComponent } from '../../shared/code-example/code-example.component';
+
+@Component({
+  selector: 'app-footer',
+  imports: [TranslateModule, CodeExampleComponent],
+  templateUrl: './footer.html',
+  styleUrl: './footer.scss',
+})
+export class Footer {
+  primaryFooterCode = `<footer class="dga-footer on-primary">
+  <div class="container-fluid">
+    <!-- Main Footer Content -->
+    <div class="row dga-list-group-container">
+      <!-- Footer Link Groups (5 columns) -->
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <!-- Social Media & Accessibility -->
+      <div class="col-12 col-lg-auto">
+        <div class="dga-social-container">
+          <!-- Social Media -->
+          <div>
+            <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Social Media</h6>
+            <div class="d-flex gap-2 flex-wrap">
+              <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Twitter">
+                <i class="bi bi-twitter"></i>
+              </button>
+              <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Facebook">
+                <i class="bi bi-facebook"></i>
+              </button>
+            </div>
+          </div>
+
+          <!-- Accessibility Tools -->
+          <div>
+            <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Accessibility Tools</h6>
+            <div class="d-flex gap-2 flex-wrap">
+              <button class="btn btn-outline-secondary btn-icon" aria-label="Vision">
+                <i class="bi bi-eye"></i>
+              </button>
+              <button class="btn btn-outline-secondary btn-icon" aria-label="Audio">
+                <i class="bi bi-volume-up"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Footer -->
+    <div class="dga-footer-bottom">
+      <div class="row g-4 align-items-center">
+        <div class="col-lg-8">
+          <!-- Footer Links Row -->
+          <div class="dga-footer-bottom-links">
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+          </div>
+
+          <!-- Copyright -->
+          <div class="dga-footer-copyright">
+            <p class="fw-semibold small mb-2">All Rights Reserved © 2024</p>
+            <div class="dga-footer-copyright-links">
+              <a href="#" class="link-neutral small">Terms and Conditions</a>
+              <a href="#" class="link-neutral small">Privacy Policy</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Logos -->
+        <div class="col-lg-4">
+          <div class="dga-logo-container">
+            <img src="https://placehold.co/125x42" alt="logo">
+            <img src="https://placehold.co/125x42" alt="logo">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>`;
+
+  secondaryFooterCode = `<footer class="dga-footer on-secondary">
+  <div class="container-fluid">
+    <!-- Main Footer Content -->
+    <div class="row dga-list-group-container">
+      <!-- Footer Link Groups -->
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <!-- Social Media & Accessibility -->
+      <div class="col-12 col-lg-auto">
+        <div class="dga-social-container">
+          <div>
+            <h6 class="border-bottom pb-2 mb-3">Social Media</h6>
+            <div class="d-flex gap-2 flex-wrap">
+              <button type="button" class="btn btn-outline-secondary btn-icon">
+                <i class="bi bi-twitter"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Bottom Footer -->
+    <div class="dga-footer-bottom">
+      <div class="row g-4 align-items-center">
+        <div class="col-lg-8">
+          <div class="dga-footer-bottom-links">
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+          </div>
+          <div class="dga-footer-copyright">
+            <p class="fw-semibold small mb-2">All Rights Reserved © 2024</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>`;
+}

package/demo-angular/src/app/views/header/header.html

@@ -0,0 +1 @@
+<header></header>

package/demo-angular/src/app/views/header/header.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Header } from './header';
+
+describe('Header', () => {
+  let component: Header;
+  let fixture: ComponentFixture<Header>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Header]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Header);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+import { TranslateModule } from "@ngx-translate/core";
+
+@Component({
+  selector: 'app-header',
+  imports: [TranslateModule],
+  templateUrl: './header.html',
+  styleUrl: './header.scss',
+})
+export class Header {
+}

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

@@ -29,10 +29,5 @@
       <h3>{{ 'nav.tables' | translate }}</h3>
       <p>{{ 'home.tables_desc' | translate }}</p>
     </a>
-    
-    <a routerLink="/utilities" class="component-card">
-      <h3>{{ 'nav.utilities' | translate }}</h3>
-      <p>{{ 'home.utilities_desc' | translate }}</p>
-    </a>
   </div>
 </div>

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

@@ -4,137 +4,18 @@
 
   <section class="demo-section mb-5">
     <h2>{{ 'links.section_basic' | translate }}</h2>
-    <div class="d-flex flex-column gap-3">
-      <div>
-        <a href="javascript:void(0);" class="link-primary">{{ 'links.primary_link' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-secondary">{{ 'links.secondary_link' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-success">{{ 'links.success_link' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-danger">{{ 'links.danger_link' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-warning">{{ 'links.warning_link' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-info">{{ 'links.info_link' | translate }}</a>
-      </div>
+    <div class="d-flex flex-column gap-3 component-showcase">
+      <!-- Primary link -->
+      <a href="javascript:void(0);" class="link-primary link-offset-2">{{ 'links.primary_link' | translate }}</a>
+      <!-- Neutral link -->
+      <a href="javascript:void(0);" class="link-neutral link-offset-2">{{ 'links.neutral_link' | translate }}</a>
+      <!-- On-color link displayed on a primary background -->
+      <div class="p-3 on-primary rounded-2" style="width:max-content;">
+        <a href="javascript:void(0);" class="link-neutral link-offset-2">{{ 'links.neutral_link' | translate }}</a>
+      </div>
+      <!-- Disabled link (non-interactive) -->
+      <a href="javascript:void(0);" class="link-primary disabled link-offset-2" aria-disabled="true" tabindex="-1">{{ 'links.disabled_link' | translate }}</a>
     </div>
     <app-code-example [htmlCode]="basicLinksCode"></app-code-example>
   </section>
-
-  <section class="demo-section mb-5">
-    <h2>{{ 'links.section_underline' | translate }}</h2>
-    <div class="d-flex flex-column gap-3">
-      <div>
-        <a href="javascript:void(0);" class="link-underline">{{ 'links.underline_link' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-underline-opacity-0">{{ 'links.no_underline' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-underline-opacity-25">{{ 'links.underline_25' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-underline-opacity-50">{{ 'links.underline_50' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-underline-opacity-75">{{ 'links.underline_75' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-underline-opacity-100">{{ 'links.underline_100' | translate }}</a>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="underlineLinksCode"></app-code-example>
-  </section>
-
-  <section class="demo-section mb-5">
-    <h2>{{ 'links.section_hover' | translate }}</h2>
-    <div class="d-flex flex-column gap-3">
-      <div>
-        <a href="javascript:void(0);" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">{{ 'links.hover_underline' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-secondary link-underline-opacity-100 link-underline-opacity-0-hover">{{ 'links.hover_remove' | translate }}</a>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="hoverLinksCode"></app-code-example>
-  </section>
-
-  <section class="demo-section mb-5">
-    <h2>{{ 'links.section_offset' | translate }}</h2>
-    <div class="d-flex flex-column gap-3">
-      <div>
-        <a href="javascript:void(0);" class="link-offset-1">{{ 'links.offset_1' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-offset-2">{{ 'links.offset_2' | translate }}</a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-offset-3">{{ 'links.offset_3' | translate }}</a>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="offsetLinksCode"></app-code-example>
-    
-    <h3 class="mt-4 mb-3">Combining Offset with Hover Effects</h3>
-    <div class="d-flex flex-column gap-3">
-      <div>
-        <a href="javascript:void(0);" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
-          Link with changing offset on hover
-        </a>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="offsetHoverCode"></app-code-example>
-  </section>
-
-  <section class="demo-section mb-5">
-    <h2>{{ 'links.section_icons' | translate }}</h2>
-    <div class="d-flex flex-column gap-3">
-      <div>
-        <a href="javascript:void(0);" class="link-primary">
-          <i class="hgi hgi-stroke hgi-link-01 me-2"></i>
-          {{ 'links.link_with_icon' | translate }}
-        </a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-secondary">
-          {{ 'links.external_link' | translate }}
-          <i class="hgi hgi-stroke hgi-link-external-01 ms-2"></i>
-        </a>
-      </div>
-      <div>
-        <a href="javascript:void(0);" class="link-success">
-          <i class="hgi hgi-stroke hgi-arrow-right-01 me-2"></i>
-          {{ 'links.arrow_link' | translate }}
-        </a>
-      </div>
-    </div>
-    <app-code-example [htmlCode]="iconLinksCode"></app-code-example>
-  </section>
-
-  <section class="demo-section">
-    <h2>{{ 'links.section_custom' | translate }}</h2>
-    
-    <h3 class="h5 mb-3">Subtle Link</h3>
-    <div class="mb-3">
-      <a href="javascript:void(0);" class="custom-link-subtle">{{ 'links.subtle_link' | translate }}</a>
-    </div>
-    <app-code-example [htmlCode]="subtleLinkCode" [scssCode]="subtleLinkScss"></app-code-example>
-    
-    <h3 class="h5 mb-3 mt-4">Bold Link</h3>
-    <div class="mb-3">
-      <a href="javascript:void(0);" class="custom-link-bold">{{ 'links.bold_link' | translate }}</a>
-    </div>
-    <app-code-example [htmlCode]="boldLinkCode" [scssCode]="boldLinkScss"></app-code-example>
-    
-    <h3 class="h5 mb-3 mt-4">Decorated Link</h3>
-    <div class="mb-3">
-      <a href="javascript:void(0);" class="custom-link-decorated">{{ 'links.decorated_link' | translate }}</a>
-    </div>
-    <app-code-example [htmlCode]="decoratedLinkCode" [scssCode]="decoratedLinkScss"></app-code-example>
-  </section>
 </div>

package/demo-angular/src/app/views/links/links.component.scss

@@ -8,53 +8,4 @@
     padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--dga-border-color);
   }
-
-  a {
-    font-size: 1rem;
-    transition: all 0.2s ease;
-  }
-}
-
-// Custom link styles
-.custom-link-subtle {
-  color: var(--dga-neutral-600);
-  text-decoration: none;
-  
-  &:hover {
-    color: var(--dga-primary);
-    text-decoration: underline;
-  }
-}
-
-.custom-link-bold {
-  color: var(--dga-primary);
-  font-weight: 600;
-  text-decoration: none;
-  
-  &:hover {
-    color: var(--dga-primary-dark);
-    text-decoration: underline;
-  }
-}
-
-.custom-link-decorated {
-  color: var(--dga-secondary);
-  text-decoration: none;
-  position: relative;
-  padding-bottom: 2px;
-  
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 0;
-    height: 2px;
-    background-color: var(--dga-secondary);
-    transition: width 0.3s ease;
-  }
-  
-  &:hover::after {
-    width: 100%;
-  }
-}
+}

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

@@ -10,114 +10,10 @@ import { CodeExampleComponent } from '../../shared/code-example/code-example.com
   styleUrl: './links.component.scss'
 })
 export class LinksComponent {
-  // Basic link colors
-  basicLinksCode = `<a href="#" class="link-primary">Primary link</a>
-<a href="#" class="link-secondary">Secondary link</a>
-<a href="#" class="link-success">Success link</a>
-<a href="#" class="link-danger">Danger link</a>
-<a href="#" class="link-warning">Warning link</a>
-<a href="#" class="link-info">Info link</a>`;
+  // Basic link variants (primary, neutral, on-color, disabled)
+  basicLinksCode = `<a href=\"javascript:void(0);\" class=\"link-primary link-offset-2\">Primary link</a>
+<a href=\"javascript:void(0);\" class=\"link-neutral link-offset-2\">Neutral link</a>
+<div class=\"p-3 bg-primary rounded-2\"><a href=\"javascript:void(0);\" class=\"link-oncolor link-offset-2\">On-color link</a></div>
+<a href=\"javascript:void(0);\" class=\"link-primary disabled link-offset-2\" aria-disabled=\"true\" tabindex=\"-1\">Disabled link</a>`;
 
-  // Underline utilities with opacity variants
-  underlineLinksCode = `<!-- Default underline -->
-<a href="#" class="link-underline">Link with underline</a>
-
-<!-- Opacity variants -->
-<a href="#" class="link-underline-opacity-0">No underline (opacity 0)</a>
-<a href="#" class="link-underline-opacity-25">25% underline opacity</a>
-<a href="#" class="link-underline-opacity-50">50% underline opacity</a>
-<a href="#" class="link-underline-opacity-75">75% underline opacity</a>
-<a href="#" class="link-underline-opacity-100">100% underline opacity</a>`;
-
-  // Hover underline effects
-  hoverLinksCode = `<!-- Show underline on hover -->
-<a href="#" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">
-  Underline appears on hover
-</a>
-
-<!-- Hide underline on hover -->
-<a href="#" class="link-secondary link-underline-opacity-100 link-underline-opacity-0-hover">
-  Underline disappears on hover
-</a>`;
-
-  // Underline offset utilities
-  offsetLinksCode = `<a href="#" class="link-offset-1">Link with offset 1</a>
-<a href="#" class="link-offset-2">Link with offset 2</a>
-<a href="#" class="link-offset-3">Link with offset 3</a>`;
-
-  // Combined offset and hover
-  offsetHoverCode = `<a href="#" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
-  Link with offset that changes on hover
-</a>`;
-
-  // Links with icons
-  iconLinksCode = `<!-- Icon before text -->
-<a href="#" class="link-primary">
-  <i class="hgi hgi-stroke hgi-link-01 me-2"></i>
-  Link with leading icon
-</a>
-
-<!-- Icon after text -->
-<a href="#" class="link-secondary">
-  External link
-  <i class="hgi hgi-stroke hgi-link-external-01 ms-2"></i>
-</a>
-
-<!-- Icon with arrow -->
-<a href="#" class="link-success">
-  <i class="hgi hgi-stroke hgi-arrow-right-01 me-2"></i>
-  Arrow link
-</a>`;
-
-  // Custom link styles - subtle
-  subtleLinkCode = `<a href="#" class="custom-link-subtle">Subtle link style</a>`;
-
-  subtleLinkScss = `.custom-link-subtle {
-  color: var(--dga-neutral-600);
-  text-decoration: none;
-  
-  &:hover {
-    color: var(--dga-primary);
-    text-decoration: underline;
-  }
-}`;
-
-  // Custom link styles - bold
-  boldLinkCode = `<a href="#" class="custom-link-bold">Bold link style</a>`;
-
-  boldLinkScss = `.custom-link-bold {
-  color: var(--dga-primary);
-  font-weight: 600;
-  text-decoration: none;
-  
-  &:hover {
-    color: var(--dga-primary-dark);
-    text-decoration: underline;
-  }
-}`;
-
-  // Custom link styles - decorated
-  decoratedLinkCode = `<a href="#" class="custom-link-decorated">Decorated link with animated underline</a>`;
-
-  decoratedLinkScss = `.custom-link-decorated {
-  color: var(--dga-secondary);
-  text-decoration: none;
-  position: relative;
-  padding-bottom: 2px;
-  
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 0;
-    height: 2px;
-    background-color: var(--dga-secondary);
-    transition: width 0.3s ease;
-  }
-  
-  &:hover::after {
-    width: 100%;
-  }
-}`;
 }

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

@@ -11,7 +11,7 @@
             <div class="toast-container">
                 <div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
                     <div class="toast-icon">
-                        <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+                        <i class="bi bi-check-circle toast-icon"></i>
                     </div>
                     <div class="toast-content">
                         <div class="toast-header">
@@ -39,7 +39,7 @@
         <div class="d-flex flex-wrap gap-3 mb-3">
             <div class="toast show fade toast-danger" role="alert" aria-live="polite" aria-atomic="true">
                 <div class="toast-icon">
-                    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+                    <i class="bi bi-exclamation-circle toast-icon"></i>
                 </div>
                 <div class="toast-content">
                     <div class="toast-header">
@@ -66,7 +66,7 @@
         <div class="d-flex flex-wrap gap-3 mb-3">
             <div class="toast show fade toast-warning" role="alert" aria-live="polite" aria-atomic="true">
                 <div class="toast-icon">
-                    <i class="hgi hgi-stroke hgi-alert-02 toast-icon"></i>
+                    <i class="bi bi-exclamation-triangle toast-icon"></i>
                 </div>
                 <div class="toast-content">
                     <div class="toast-header">
@@ -93,7 +93,7 @@
         <div class="d-flex flex-wrap gap-3 mb-3">
             <div class="toast show fade toast-info" role="alert" aria-live="polite" aria-atomic="true">
                 <div class="toast-icon">
-                    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+                    <i class="bi bi-info-circle toast-icon"></i>
                 </div>
                 <div class="toast-content">
                     <div class="toast-header">
@@ -120,7 +120,7 @@
         <div class="d-flex flex-wrap gap-3 mb-3">
             <div class="toast show fade toast-neutral" role="alert" aria-live="polite" aria-atomic="true">
                 <div class="toast-icon">
-                    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+                    <i class="bi bi-info-circle toast-icon"></i>
                 </div>
                 <div class="toast-content">
                     <div class="toast-header">
@@ -148,7 +148,7 @@
             <div class="toast-container">
                 <div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
                     <div class="toast-icon">
-                        <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+                        <i class="bi bi-check-circle toast-icon"></i>
                     </div>
                     <div class="toast-content">
                         <div class="toast-header">
@@ -176,7 +176,7 @@
         <div class="d-flex flex-wrap gap-3 mb-3">
             <div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
                 <div class="toast-icon">
-                    <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+                    <i class="bi bi-check-circle toast-icon"></i>
                 </div>
                 <div class="toast-content">
                     <div class="toast-header">

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

@@ -21,7 +21,7 @@ export class ToastsComponent {
   // Success Toast with Icon
   successToastCode = `<div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
   <div class="toast-icon">
-    <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+    <i class="bi bi-check-circle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">
@@ -41,7 +41,7 @@ export class ToastsComponent {
   // Danger Toast with Icon
   dangerToastCode = `<div class="toast show fade toast-danger" role="alert" aria-live="polite" aria-atomic="true">
   <div class="toast-icon">
-    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+    <i class="bi bi-exclamation-circle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">
@@ -61,7 +61,7 @@ export class ToastsComponent {
   // Warning Toast with Icon
   warningToastCode = `<div class="toast show fade toast-warning" role="alert" aria-live="polite" aria-atomic="true">
   <div class="toast-icon">
-    <i class="hgi hgi-stroke hgi-alert-02 toast-icon"></i>
+    <i class="bi bi-exclamation-triangle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">
@@ -81,7 +81,7 @@ export class ToastsComponent {
   // Info Toast with Icon
   infoToastCode = `<div class="toast show fade toast-info" role="alert" aria-live="polite" aria-atomic="true">
   <div class="toast-icon">
-    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+    <i class="bi bi-info-circle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">
@@ -101,7 +101,7 @@ export class ToastsComponent {
   // Neutral Toast with Icon
   neutralToastCode = `<div class="toast show fade toast-neutral" role="alert" aria-live="polite" aria-atomic="true">
   <div class="toast-icon">
-    <i class="hgi hgi-stroke hgi-help-circle toast-icon"></i>
+    <i class="bi bi-info-circle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">
@@ -122,7 +122,7 @@ export class ToastsComponent {
   fullToastCode = `<div class="toast-container">
   <div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
     <div class="toast-icon">
-      <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+      <i class="bi bi-check-circle toast-icon"></i>
     </div>
     <div class="toast-content">
       <div class="toast-header">
@@ -143,7 +143,7 @@ export class ToastsComponent {
   // Dismissible Toast
   dismissibleToastCode = `<div class="toast show fade toast-success" role="alert" aria-live="polite" aria-atomic="true">
   <div class="toast-icon">
-    <i class="hgi hgi-stroke hgi-checkmark-circle-02 toast-icon"></i>
+    <i class="bi bi-check-circle toast-icon"></i>
   </div>
   <div class="toast-content">
     <div class="toast-header">