sdga-ui 1.0.6 → 1.0.8

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

@@ -5,19 +5,45 @@
   <section class="demo-section">
     <h2>{{ 'buttons.section_solid' | translate }}</h2>
     <div class="component-showcase">
-      <button type="button" class="btn btn-primary">{{ 'buttons.primary' | translate }}</button>
-      <button type="button" class="btn btn-neutral">{{ 'buttons.neutral' | translate }}</button>
-      <button type="button" class="btn btn-secondary">{{ 'buttons.secondary' | translate }}</button>
-      <button type="button" class="btn btn-danger">{{ 'buttons.danger' | translate }}</button>
+      <button type="button" class="btn btn-primary">Primary</button>
+      <button type="button" class="btn btn-neutral">Neutral</button>
+      <button type="button" class="btn btn-secondary">Secondary</button>
+      <button type="button" class="btn btn-subtle">Subtle</button>
+      <button type="button" class="btn btn-transparent">Transparent</button>
     </div>
     <app-code-example [htmlCode]="solidButtonsCode"></app-code-example>
     
+    <h3 class="mt-5">Destructive Variants</h3>
+    <div class="component-showcase">
+      <button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
+      <button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
+      <button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
+      <button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>
+    </div>
+    <app-code-example [htmlCode]="destructiveButtonsCode"></app-code-example>
+    
+    <h3 class="mt-5">On Primary Context</h3>
+    <div class="on-primary p-4 rounded-2">
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-primary">Primary</button>
+      <button type="button" class="btn btn-neutral">Neutral</button>
+      <button type="button" class="btn btn-secondary">Secondary</button>
+      <button type="button" class="btn btn-outline-secondary">Outline Secondary</button>
+      <button type="button" class="btn btn-subtle">Subtle</button>
+      <button type="button" class="btn btn-transparent">Transparent</button>
+      <button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
+      <button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
+      <button type="button" class="btn btn-destructive-outline-secondary">Destructive Outline</button>
+      <button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
+      <button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>
+    </div>
+    </div>
+    <app-code-example [htmlCode]="onPrimaryButtonsCode" [onColor]="'primary'"></app-code-example>
+    
     <h3 class="mt-5">{{ 'buttons.section_outline' | translate }}</h3>
     <div class="component-showcase">
-      <button type="button" class="btn btn-outline-primary">{{ 'buttons.primary' | translate }}</button>
       <button type="button" class="btn btn-outline-secondary">{{ 'buttons.secondary' | translate }}</button>
-      <button type="button" class="btn btn-outline-neutral">{{ 'buttons.neutral' | translate }}</button>
-      <button type="button" class="btn btn-outline-danger">{{ 'buttons.danger' | translate }}</button>
+      <button type="button" class="btn btn-destructive-outline-secondary">{{ 'buttons.danger' | translate }}</button>
     </div>
     <app-code-example [htmlCode]="outlineButtonsCode"></app-code-example>
     
@@ -46,88 +72,122 @@
       <button type="button" class="btn btn-secondary active">{{ 'buttons.active' | translate }}</button>
       <button type="button" class="btn btn-secondary" disabled>{{ 'buttons.disabled' | translate }}</button>
     </div>
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-subtle">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-subtle active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-subtle" disabled>{{ 'buttons.disabled' | translate }}</button>
+    </div>
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-transparent">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-transparent active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-transparent" disabled>{{ 'buttons.disabled' | translate }}</button>
+    </div>
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-destructive-primary">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-destructive-primary active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-destructive-primary" disabled>{{ 'buttons.disabled' | translate }}</button>
+    </div>
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-destructive-secondary">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-destructive-secondary active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-destructive-secondary" disabled>{{ 'buttons.disabled' | translate }}</button>
+    </div>
+    <div class="component-showcase mb-3">
+      <button type="button" class="btn btn-destructive-subtle">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-destructive-subtle active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-destructive-subtle" disabled>{{ 'buttons.disabled' | translate }}</button>
+    </div>
     <div class="component-showcase">
-      <button type="button" class="btn btn-danger">{{ 'buttons.normal' | translate }}</button>
-      <button type="button" class="btn btn-danger active">{{ 'buttons.active' | translate }}</button>
-      <button type="button" class="btn btn-danger" disabled>{{ 'buttons.disabled' | translate }}</button>
+      <button type="button" class="btn btn-destructive-transparent">{{ 'buttons.normal' | translate }}</button>
+      <button type="button" class="btn btn-destructive-transparent active">{{ 'buttons.active' | translate }}</button>
+      <button type="button" class="btn btn-destructive-transparent" disabled>{{ 'buttons.disabled' | translate }}</button>
     </div>
     <app-code-example [htmlCode]="buttonStatesCode"></app-code-example>
     
     <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-subtle btn-icon">
+        <i class="bi bi-eye"></i>View
+      </button>
+      <button type="button" class="btn btn-transparent btn-icon">
+        <i class="bi bi-link"></i>Link
       </button>
-      <button type="button" class="btn btn-danger btn-icon">
-        <i class="hgi hgi-stroke hgi-delete-02"></i>{{ 'buttons.delete' | translate }}
+      <button type="button" class="btn btn-destructive-primary btn-icon">
+        <i class="bi bi-trash"></i>{{ 'buttons.delete' | translate }}
+      </button>
+      <button type="button" class="btn btn-destructive-secondary btn-icon">
+        <i class="bi bi-x-circle"></i>Cancel
       </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 }}
+      <button type="button" class="btn btn-outline-secondary btn-icon">
+        <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>
+      <button type="button" class="btn btn-destructive-primary btn-icon" aria-label="{{ 'buttons.delete' | translate }}">
+        <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>
+      <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.search' | translate }}">
+        <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>
+      <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="{{ 'buttons.add' | translate }}">
+        <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>
@@ -168,8 +228,8 @@
       </div>
       
       <div class="dropdown">
-        <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_danger' | translate }}
+        <button class="btn btn-subtle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+          Subtle
         </button>
         <ul class="dropdown-menu">
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
@@ -177,13 +237,10 @@
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
         </ul>
       </div>
-    </div>
-    <app-code-example [htmlCode]="dropdownButtonCode"></app-code-example>
-    
-    <div class="component-showcase mb-3">
+      
       <div class="dropdown">
-        <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-          {{ 'buttons.dropdown_outline' | translate }}
+        <button class="btn btn-transparent dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+          Transparent
         </button>
         <ul class="dropdown-menu">
           <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
@@ -192,6 +249,20 @@
         </ul>
       </div>
       
+      <div class="dropdown">
+        <button class="btn btn-destructive-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+          {{ 'buttons.dropdown_danger' | translate }}
+        </button>
+        <ul class="dropdown-menu">
+          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_action' | translate }}</button></li>
+          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_another' | translate }}</button></li>
+          <li><button class="dropdown-item" type="button">{{ 'buttons.dropdown_something' | translate }}</button></li>
+        </ul>
+      </div>
+    </div>
+    <app-code-example [htmlCode]="dropdownButtonCode"></app-code-example>
+    
+    <div class="component-showcase mb-3">
       <div class="dropdown">
         <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
           {{ 'buttons.dropdown_outline' | translate }}
@@ -204,7 +275,7 @@
       </div>
       
       <div class="dropdown">
-        <button class="btn btn-outline-neutral dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <button class="btn btn-destructive-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
           {{ 'buttons.dropdown_outline' | translate }}
         </button>
         <ul class="dropdown-menu">
@@ -253,7 +324,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 +335,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 +346,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.scss

@@ -7,8 +7,5 @@
   gap: 1rem;
   flex-wrap: wrap;
   align-items: center;
-  padding: 1.5rem;
-  background: #f8f9fa;
-  border-radius: 0.5rem;
 }
 

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

@@ -13,12 +13,29 @@ export class ButtonsComponent {
   solidButtonsCode = `<button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-neutral">Neutral</button>
 <button type="button" class="btn btn-secondary">Secondary</button>
-<button type="button" class="btn btn-danger">Danger</button>`;
+<button type="button" class="btn btn-subtle">Subtle</button>
+<button type="button" class="btn btn-transparent">Transparent</button>`;
 
-  outlineButtonsCode = `<button type="button" class="btn btn-outline-primary">Primary</button>
-<button type="button" class="btn btn-outline-secondary">Secondary</button>
-<button type="button" class="btn btn-outline-neutral">Neutral</button>
-<button type="button" class="btn btn-outline-danger">Danger</button>`;
+  destructiveButtonsCode = `<button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
+<button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
+<button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
+<button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>`;
+
+  onPrimaryButtonsCode = `<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-neutral">Neutral</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-outline-secondary">Outline Secondary</button>
+<button type="button" class="btn btn-subtle">Subtle</button>
+<button type="button" class="btn btn-transparent">Transparent</button>
+
+<button type="button" class="btn btn-destructive-primary">Destructive Primary</button>
+<button type="button" class="btn btn-destructive-secondary">Destructive Secondary</button>
+<button type="button" class="btn btn-destructive-outline-secondary">Destructive Outline</button>
+<button type="button" class="btn btn-destructive-subtle">Destructive Subtle</button>
+<button type="button" class="btn btn-destructive-transparent">Destructive Transparent</button>`;
+
+  outlineButtonsCode = `<button type="button" class="btn btn-outline-secondary">Secondary</button>
+<button type="button" class="btn btn-destructive-outline-secondary">Destructive</button>`;
 
   buttonSizesCode = `<button type="button" class="btn btn-primary btn-lg">Large</button>
 <button type="button" class="btn btn-primary">Default</button>
@@ -30,39 +47,48 @@ 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-subtle btn-icon">
+  <i class="bi bi-eye"></i>View
 </button>
-<button type="button" class="btn btn-danger btn-icon">
-  <i class="hgi hgi-stroke hgi-delete-02"></i>Delete
+<button type="button" class="btn btn-transparent btn-icon">
+  <i class="bi bi-link"></i>Link
+</button>
+<button type="button" class="btn btn-destructive-primary btn-icon">
+  <i class="bi bi-trash"></i>Delete
+</button>
+<button type="button" class="btn btn-destructive-secondary btn-icon">
+  <i class="bi bi-x-circle"></i>Cancel
 </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>
+<button type="button" class="btn btn-destructive-primary btn-icon" aria-label="Delete">
+  <i class="bi bi-trash"></i>
 </button>`;
 
   dropdownButtonCode = `<div class="dropdown">
@@ -85,6 +111,50 @@ export class ButtonsComponent {
     <li><button class="dropdown-item" type="button">Another action</button></li>
     <li><button class="dropdown-item" type="button">Something else here</button></li>
   </ul>
+</div>
+
+<div class="dropdown">
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Dropdown Secondary
+  </button>
+  <ul class="dropdown-menu">
+    <li><button class="dropdown-item" type="button">Action</button></li>
+    <li><button class="dropdown-item" type="button">Another action</button></li>
+    <li><button class="dropdown-item" type="button">Something else here</button></li>
+  </ul>
+</div>
+
+<div class="dropdown">
+  <button class="btn btn-subtle dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Subtle
+  </button>
+  <ul class="dropdown-menu">
+    <li><button class="dropdown-item" type="button">Action</button></li>
+    <li><button class="dropdown-item" type="button">Another action</button></li>
+    <li><button class="dropdown-item" type="button">Something else here</button></li>
+  </ul>
+</div>
+
+<div class="dropdown">
+  <button class="btn btn-transparent dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Transparent
+  </button>
+  <ul class="dropdown-menu">
+    <li><button class="dropdown-item" type="button">Action</button></li>
+    <li><button class="dropdown-item" type="button">Another action</button></li>
+    <li><button class="dropdown-item" type="button">Something else here</button></li>
+  </ul>
+</div>
+
+<div class="dropdown">
+  <button class="btn btn-destructive-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    Destructive Primary
+  </button>
+  <ul class="dropdown-menu">
+    <li><button class="dropdown-item" type="button">Action</button></li>
+    <li><button class="dropdown-item" type="button">Another action</button></li>
+    <li><button class="dropdown-item" type="button">Something else here</button></li>
+  </ul>
 </div>`;
 
   dropdownSizesCode = `<div class="dropdown">
@@ -122,7 +192,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 +203,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 +214,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>

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

@@ -11,7 +11,7 @@
       <div class="card" tabindex="0">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
           <p class="card-text">{{ 'cards.card_text' | translate }}</p>
@@ -49,7 +49,7 @@
       <div class="card disabled" tabindex="0">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
             <input class="card-title-checked  form-check-input ripple" disabled type="checkbox" value="" id="check1" aria-label="{{ 'cards.select_card' | translate }}">
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
@@ -88,7 +88,7 @@
       <div class="card" tabindex="0" [class.expanded]="isExpanded(1)">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
             <input class="card-title-checked  form-check-input ripple" type="checkbox" value="" id="check3" aria-label="{{ 'cards.select_card' | translate }}">
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.expandable_title' | translate }}</h6>
@@ -106,7 +106,7 @@
           }
           
           <div class="card-footer">
-            <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" [class.hgi-arrow-up-01]="isExpanded(1)" [class.hgi-arrow-down-01]="!isExpanded(1)" (click)="toggleCard(1)"></i>
+            <i class="bi card-expanded-icon" [class.bi-chevron-up]="isExpanded(1)" [class.bi-chevron-down]="!isExpanded(1)" (click)="toggleCard(1)"></i>
           </div>
         </div>
       </div>
@@ -122,7 +122,7 @@
       <div class="card" tabindex="0" [class.expanded]="isExpanded(2)">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.expandable_title' | translate }}</h6>
           <p class="card-text">{{ 'cards.expandable_text' | translate }}</p>
@@ -143,7 +143,7 @@
           }
           
           <div class="card-footer">
-            <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" [class.hgi-arrow-up-01]="isExpanded(2)" [class.hgi-arrow-down-01]="!isExpanded(2)" (click)="toggleCard(2)"></i>
+            <i class="bi card-expanded-icon" [class.bi-chevron-up]="isExpanded(2)" [class.bi-chevron-down]="!isExpanded(2)" (click)="toggleCard(2)"></i>
           </div>
         </div>
       </div>