diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 1d984620e4..d5efe8d8f1 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,10 +19,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Use Node.js 22.x
+      - name: Use Node.js 24.x
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: 'npm'
 
       - name: Install dependencies
diff --git a/docs/angular/public/images/general/greenCheck.png b/docs/angular/public/images/general/greenCheck.png
new file mode 100644
index 0000000000..6d09366869
Binary files /dev/null and b/docs/angular/public/images/general/greenCheck.png differ
diff --git a/docs/angular/public/images/general/redX.png b/docs/angular/public/images/general/redX.png
new file mode 100644
index 0000000000..ae748161d2
Binary files /dev/null and b/docs/angular/public/images/general/redX.png differ
diff --git a/docs/angular/src/content/en/components/button.mdx b/docs/angular/src/content/en/components/button.mdx
index c58ca2e8a1..87e275e58a 100644
--- a/docs/angular/src/content/en/components/button.mdx
+++ b/docs/angular/src/content/en/components/button.mdx
@@ -1,5 +1,5 @@
----
-title: Angular Button Component – Ignite UI for Angular - MIT license
+---
+title: Angular Button Component - Ignite UI for Angular - MIT license
 description: Enhance standard buttons with built-in text, images and more features using Ignite UI for Angular Button component. Try it now.
 keywords: Angular Button component, Angular Button control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Angular UI Components,
 license: MIT
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # Angular Button Overview
 
-Angular Button directive is used for creating and adding actionable buttons to a web page/application. There are different Angular Button types that are easy to customize and include several built-in features. By default, Angular Material uses native `<button>` and `<a>` elements to deliver an accessible experience.
+Angular Button directive is used for creating and adding actionable buttons to a web page/application. There are different Angular Button types that are easy to customize and include several built-in features. By default, Angular Material uses native `<button>` and `<a>` elements to deliver an accessible experience.
 
 The Ignite UI for Angular Button directive is intended to turn any button, span, div, or anchor element into a fully functional button. You can use the following Angular Button types - Flat Button, Contained Button, Outlined Button, and Floating Action Button. With customizable colors, options to create themes and change the Angular Button Style and enabling users to choose the button size and more.
 
@@ -250,1151 +250,347 @@ When you modify a primary property, all related dependent properties are updated
 
   <div class="theme-table material">
 
-    <h3>Material Theme</h3>
-    <h4>Flat Button</h4>
-    <table class="collapsible-table">
-      <thead>
-        <tr>
-          <th>Primary Property</th>
-          <th>Dependent Property</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody class="group">
-        <tr class="primary">
-          <td><details><summary><strong>$foreground</strong></summary></details></td>
-          <td>$hover-background</td>
-          <td>Background color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-background</td>
-          <td>Background color for focused button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-background</td>
-          <td>Background color for button on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-background</td>
-          <td>Background color for active button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-foreground</td>
-          <td>Foreground color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color-hover</td>
-          <td>Icon color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-foreground</td>
-          <td>Foreground color for focused button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-foreground</td>
-          <td>Foreground color for button on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-foreground</td>
-          <td>Foreground color for active button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-background</td>
-          <td>Background when focus is visible</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-foreground</td>
-          <td>Foreground when focus is visible</td>
-        </tr>
-      </tbody>
-    </table>
-    <h4>Contained Button</h4>
-    <table class="collapsible-table">
-      <thead>
-        <tr>
-          <th>Primary Property</th>
-          <th>Dependent Property</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody class="group">
-        <tr class="primary">
-          <td><details><summary><strong>$background</strong></summary></details></td>
-          <td>$foreground</td>
-          <td>Foreground based on background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color</td>
-          <td>Icon color based on background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-background</td>
-          <td>Hover background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-foreground</td>
-          <td>Foreground on hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color-hover</td>
-          <td>Icon color on hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-background</td>
-          <td>Focus background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-foreground</td>
-          <td>Foreground on focus</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-background</td>
-          <td>Focus + hover background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-foreground</td>
-          <td>Foreground on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-background</td>
-          <td>Active background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-foreground</td>
-          <td>Active foreground color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-background</td>
-          <td>Background when focus is visible</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-foreground</td>
-          <td>Foreground when focus is visible</td>
-        </tr>
-      </tbody>
-    </table>
-    <h4>Outlined Button</h4>
-    <table class="collapsible-table">
-      <thead>
-        <tr>
-          <th>Primary Property</th>
-          <th>Dependent Property</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody class="group">
-        <tr class="primary">
-          <td><details><summary><strong>$foreground</strong></summary></details></td>
-          <td>$hover-background</td>
-          <td>Background color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-background</td>
-          <td>Background color for focused button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-background</td>
-          <td>Background color for button on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-background</td>
-          <td>Background color for active button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-foreground</td>
-          <td>Foreground color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color-hover</td>
-          <td>Icon color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-foreground</td>
-          <td>Foreground color for focused button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-foreground</td>
-          <td>Foreground color for button on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-foreground</td>
-          <td>Foreground color for active button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-background</td>
-          <td>Background when focus is visible</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-foreground</td>
-          <td>Foreground when focus is visible</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$border-color</td>
-          <td>The border color for outlined buttons.</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-border-color</td>
-          <td>The border color for hovered outlined buttons.</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-border-color</td>
-          <td>The border color for focused outlined buttons.</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-border-color</td>
-          <td>The border color for outlined buttons when focus is visible.</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-border-color</td>
-          <td>The border color for active outlined buttons.</td>
-        </tr>
-      </tbody>
-    </table>
-    <h4>FAB Button</h4>
-    <table class="collapsible-table">
-      <thead>
-        <tr>
-          <th>Primary Property</th>
-          <th>Dependent Property</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody class="group">
-        <tr class="primary">
-          <td><details><summary><strong>$background</strong></summary></details></td>
-          <td>$foreground</td>
-          <td>Foreground based on background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color</td>
-          <td>Icon color based on background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-background</td>
-          <td>Hover background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-foreground</td>
-          <td>Foreground on hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color-hover</td>
-          <td>Icon color on hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-background</td>
-          <td>Focus background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-foreground</td>
-          <td>Foreground on focus</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-background</td>
-          <td>Active background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-foreground</td>
-          <td>Active foreground color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-background</td>
-          <td>Focus + hover background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-foreground</td>
-          <td>Foreground on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-background</td>
-          <td>Background when focus is visible</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-foreground</td>
-          <td>Foreground when focus is visible</td>
-        </tr>
-      </tbody>
-    </table>
-  
+### Material Theme
+
+#### Flat Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+
+#### Contained Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-background | Focus background color |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $active-background | Active background color |
+| | $active-foreground | Active foreground color |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+
+#### Outlined Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $border-color | The border color for outlined buttons. |
+| | $hover-border-color | The border color for hovered outlined buttons. |
+| | $focus-border-color | The border color for focused outlined buttons. |
+| | $focus-visible-border-color | The border color for outlined buttons when focus is visible. |
+| | $active-border-color | The border color for active outlined buttons. |
+
+#### FAB Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-background | Focus background color |
+| | $focus-foreground | Foreground on focus |
+| | $active-background | Active background color |
+| | $active-foreground | Active foreground color |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+
 </div>
 
 <div class="theme-table fluent">
 
-<h3>Fluent Theme</h3>
-<h4>Flat Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$foreground</strong></summary></details></td>
-      <td>$hover-background</td>
-      <td>Background color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Background color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Background color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Background color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Foreground color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Border color when focus is visible</td>
-    </tr>
-  </tbody>
-</table>
-<h4>Contained Button</h4>
-<table class="collapsible-table">
-<thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead>
-<tbody class="group">
-<tr class="primary"><td><details><summary><strong>$background</strong></summary></details></td><td>$foreground</td><td>Foreground based on background</td></tr>
-<tr class="dependent"><td></td><td>$icon-color</td><td>Icon color based on background</td></tr>
-<tr class="dependent"><td></td><td>$hover-background</td><td>Hover background color</td></tr>
-<tr class="dependent"><td></td><td>$focus-background</td><td>Focus background color</td></tr>
-<tr class="dependent"><td></td><td>$active-background</td><td>Active background color</td></tr>
-<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground on hover</td></tr>
-<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color on hover</td></tr>
-<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground on focus</td></tr>
-<tr class="dependent"><td></td><td>$active-foreground</td><td>Active foreground color</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Focus + hover background</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground on focus + hover</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-background</td><td>Background when focus is visible</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground when focus is visible</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-border-color</td><td>Border color when focus is visible</td></tr>
-</tbody>
-</table>
-<h4>Outlined Button</h4>
-<table class="collapsible-table">
-<thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead>
-<tbody class="group">
-<tr class="primary"><td><details><summary><strong>$foreground</strong></summary></details></td><td>$hover-background</td><td>Background color for hovered outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-background</td><td>Background color for focused outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Background color for outlined button on focus + hover.</td></tr>
-<tr class="dependent"><td></td><td>$active-background</td><td>Background color for active outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground color for hovered outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color for hovered outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground color for focused outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground color for outlined button on focus + hover.</td></tr>
-<tr class="dependent"><td></td><td>$active-foreground</td><td>Foreground color for active outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground color for outlined button when focus is visible.</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-border-color</td><td>Border color for outlined button when focus is visible.</td></tr>
-<tr class="dependent"><td></td><td>$border-color</td><td>Border color for outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$hover-border-color</td><td>Border color for hovered outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-border-color</td><td>Border color for focused outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$active-border-color</td><td>Border color for active outlined button.</td></tr>
-</tbody>
-</table>
-<h4>FAB Button</h4>
-<table class="collapsible-table">
-<thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead>
-<tbody class="group">
-<tr class="primary"><td><details><summary><strong>$background</strong></summary></details></td><td>$foreground</td><td>Foreground based on background</td></tr>
-<tr class="dependent"><td></td><td>$icon-color</td><td>Icon color based on background</td></tr>
-<tr class="dependent"><td></td><td>$hover-background</td><td>Hover background color</td></tr>
-<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground on hover</td></tr>
-<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color on hover</td></tr>
-<tr class="dependent"><td></td><td>$active-background</td><td>Active background color</td></tr>
-<tr class="dependent"><td></td><td>$active-foreground</td><td>Active foreground color</td></tr>
-<tr class="dependent"><td></td><td>$focus-background</td><td>Focus background color</td></tr>
-<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground on focus</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Focus + hover background</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground on focus + hover</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-background</td><td>Background when focus is visible</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground when focus is visible</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-border-color</td><td>Border color when focus is visible</td></tr>
-</tbody>
-</table>
+### Fluent Theme
+
+#### Flat Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+
+#### Contained Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $focus-background | Focus background color |
+| | $active-background | Active background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-foreground | Foreground on focus |
+| | $active-foreground | Active foreground color |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+
+#### Outlined Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered outlined button. |
+| | $focus-background | Background color for focused outlined button. |
+| | $focus-hover-background | Background color for outlined button on focus + hover. |
+| | $active-background | Background color for active outlined button. |
+| | $hover-foreground | Foreground color for hovered outlined button. |
+| | $icon-color-hover | Icon color for hovered outlined button. |
+| | $focus-foreground | Foreground color for focused outlined button. |
+| | $focus-hover-foreground | Foreground color for outlined button on focus + hover. |
+| | $active-foreground | Foreground color for active outlined button. |
+| | $focus-visible-foreground | Foreground color for outlined button when focus is visible. |
+| | $focus-visible-border-color | Border color for outlined button when focus is visible. |
+| | $border-color | Border color for outlined button. |
+| | $hover-border-color | Border color for hovered outlined button. |
+| | $focus-border-color | Border color for focused outlined button. |
+| | $active-border-color | Border color for active outlined button. |
+
+#### FAB Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $active-background | Active background color |
+| | $active-foreground | Active foreground color |
+| | $focus-background | Focus background color |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+
 </div>
 
 <div class="theme-table bootstrap">
 
-<h3>Bootstrap Theme</h3>
-<h4>Flat Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$foreground</strong></summary></details></td>
-      <td>$hover-foreground</td>
-      <td>Foreground color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Foreground color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Border color when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Foreground color for disabled button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Icon color for disabled button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-  </tbody>
-</table>
-<h4>Contained Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$background</strong></summary></details></td>
-      <td>$foreground</td>
-      <td>Foreground based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color</td>
-      <td>Icon color based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-background</td>
-      <td>Hover background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Focus background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Active background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground on focus</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Focus + hover background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Active foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-background</td>
-      <td>Disabled background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Disabled foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Disabled icon color</td>
-    </tr>
-  </tbody>
-</table>
-<h4>Outlined Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$foreground</strong></summary></details></td>
-      <td>$hover-background</td>
-      <td>Background color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Background color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Background color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Background color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Foreground color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Border color when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Foreground color for disabled button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Icon color for disabled button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-border-color</td>
-      <td>Border color for disabled button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-border-color</td>
-      <td>Hover border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-border-color</td>
-      <td>Focus border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Focus-visible border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-border-color</td>
-      <td>Active border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-  </tbody>
-</table>
-<h4>FAB Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$background</strong></summary></details></td>
-      <td>$foreground</td>
-      <td>Foreground based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color</td>
-      <td>Icon color based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-background</td>
-      <td>Hover background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Focus background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Active background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-background</td>
-      <td>Disabled background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground on focus</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Focus + hover background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Active foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Disabled foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Disabled icon color</td>
-    </tr>
-  </tbody>
-</table>
+### Bootstrap Theme
+
+#### Flat Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+| | $disabled-foreground | Foreground color for disabled button |
+| | $disabled-icon-color | Icon color for disabled button |
+| | $shadow-color | Shadow color |
+
+#### Contained Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $focus-background | Focus background color |
+| | $active-background | Active background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $active-foreground | Active foreground color |
+| | $shadow-color | Shadow color |
+| | $disabled-background | Disabled background color |
+| | $disabled-foreground | Disabled foreground color |
+| | $disabled-icon-color | Disabled icon color |
+
+#### Outlined Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+| | $disabled-foreground | Foreground color for disabled button |
+| | $disabled-icon-color | Icon color for disabled button |
+| | $disabled-border-color | Border color for disabled button |
+| | $hover-border-color | Hover border color |
+| | $focus-border-color | Focus border color |
+| | $active-border-color | Active border color |
+| | $shadow-color | Shadow color |
+
+#### FAB Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $focus-background | Focus background color |
+| | $active-background | Active background color |
+| | $disabled-background | Disabled background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $active-foreground | Active foreground color |
+| | $shadow-color | Shadow color |
+| | $disabled-foreground | Disabled foreground color |
+| | $disabled-icon-color | Disabled icon color |
+
 </div>
 
 <div class="theme-table indigo">
 
-<h3>Indigo Theme</h3>
-<h4>Flat Button</h4>
-<table class="collapsible-table">
-  <thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead>
-  <tbody class="group">
-<tr class="primary"><td><details><summary><strong>$foreground</strong></summary></details></td><td>$hover-background</td><td>Background color for hovered button</td></tr>
-<tr class="dependent"><td></td><td>$focus-background</td><td>Background color for focused button</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Background color for button on focus + hover</td></tr>
-<tr class="dependent"><td></td><td>$active-background</td><td>Background color for active button</td></tr>
-<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground color for hovered button</td></tr>
-<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color for hovered button</td></tr>
-<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground color for focused button</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground color for button on focus + hover</td></tr>
-<tr class="dependent"><td></td><td>$active-foreground</td><td>Foreground color for active button</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground when focus is visible</td></tr>
-<tr class="dependent"><td></td><td>$disabled-foreground</td><td>Disabled foreground color</td></tr>
-<tr class="dependent"><td></td><td>$disabled-icon-color</td><td>Disabled icon color</td></tr>
-<tr class="dependent"><td></td><td>$shadow-color</td><td>Shadow color</td></tr>
-</tbody>
-</table>
-<h4>Contained Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$background</strong></summary></details></td>
-      <td>$foreground</td>
-      <td>Foreground based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color</td>
-      <td>Icon color based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-background</td>
-      <td>Hover background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Focus background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Active background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground on focus</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Focus + hover background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Active foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-background</td>
-      <td>Disabled background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Disabled foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Disabled icon color</td>
-    </tr>
-  </tbody>
-</table>
-<h4>Outlined Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$foreground</strong></summary></details></td>
-      <td>$hover-background</td>
-      <td>Background color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Background color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Background color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Background color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Foreground color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Border color when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$border-color</td>
-      <td>Border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-border-color</td>
-      <td>Hover border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-border-color</td>
-      <td>Focus border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Focus-visible border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-border-color</td>
-      <td>Active border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-  </tbody>
-</table>
-<h4>FAB Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$background</strong></summary></details></td>
-      <td>$foreground</td>
-      <td>Foreground based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color</td>
-      <td>Icon color based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-background</td>
-      <td>Hover background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Focus background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Active background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-background</td>
-      <td>Disabled background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground on focus</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Focus + hover background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Active foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Disabled foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Disabled icon color</td>
-    </tr>
-  </tbody>
-</table>
+### Indigo Theme
+
+#### Flat Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $disabled-foreground | Disabled foreground color |
+| | $disabled-icon-color | Disabled icon color |
+| | $shadow-color | Shadow color |
+
+#### Contained Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $focus-background | Focus background color |
+| | $active-background | Active background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $active-foreground | Active foreground color |
+| | $shadow-color | Shadow color |
+| | $disabled-background | Disabled background color |
+| | $disabled-foreground | Disabled foreground color |
+| | $disabled-icon-color | Disabled icon color |
+
+#### Outlined Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+| | $border-color | Border color |
+| | $hover-border-color | Hover border color |
+| | $focus-border-color | Focus border color |
+| | $active-border-color | Active border color |
+| | $shadow-color | Shadow color |
+
+#### FAB Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $focus-background | Focus background color |
+| | $active-background | Active background color |
+| | $disabled-background | Disabled background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $active-foreground | Active foreground color |
+| | $shadow-color | Shadow color |
+| | $disabled-foreground | Disabled foreground color |
+| | $disabled-icon-color | Disabled icon color |
+
 </div>
+
 </div>
+
 </div>
 
+
 > **Note:** The resulting dependent properties may vary slightly depending on the selected theme (Material, Fluent, Bootstrap, Indigo).
 
 To style the button you can use our type-specific theme functions: [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme), [`outlined-button-theme`]({environment:sassApiUrl}/themes#function-outlined-button-theme), [`contained-button-theme`]({environment:sassApiUrl}/themes#function-contained-button-theme), and [`fab-button-theme`]({environment:sassApiUrl}/themes#function-fab-button-theme).
diff --git a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
index 25005af2bc..1fdfe9c5f5 100644
--- a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
+++ b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
@@ -9,11 +9,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 <style>{`
 .greenCheck {
-  content:url("/images/general/greenCheck.png");
+  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/greenCheck.png");
 }
 
 .redCheck {
-  content:url("/images/general/redX.png");
+  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/redX.png");
 }
 `}</style>
 
diff --git a/docs/angular/src/content/jp/components/button.mdx b/docs/angular/src/content/jp/components/button.mdx
index e6b892017a..b637230f1c 100644
--- a/docs/angular/src/content/jp/components/button.mdx
+++ b/docs/angular/src/content/jp/components/button.mdx
@@ -1,4 +1,4 @@
----
+---
 title: Angular Button コンポーネント – Ignite UI for Angular - MITライセンス
 description: Ignite UI for Angular Button コンポーネントで規格のボタンに定義済みテキスト、画像、およびその他の機能を追加します。今すぐお試しください。
 keywords: Angular Button コンポーネント, Angular Button コントロール, Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, Angular UI コンポーネント
@@ -251,1154 +251,351 @@ protected get sizeStyle() {
 
   <div class="theme-table material">
 
-    <h3>Material Theme</h3>
-    <h4>Flat Button</h4>
-    <table class="collapsible-table">
-      <thead>
-        <tr>
-          <th>Primary Property</th>
-          <th>Dependent Property</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody class="group">
-        <tr class="primary">
-          <td><details><summary><strong>$foreground</strong></summary></details></td>
-          <td>$hover-background</td>
-          <td>Background color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-background</td>
-          <td>Background color for focused button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-background</td>
-          <td>Background color for button on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-background</td>
-          <td>Background color for active button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-foreground</td>
-          <td>Foreground color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color-hover</td>
-          <td>Icon color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-foreground</td>
-          <td>Foreground color for focused button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-foreground</td>
-          <td>Foreground color for button on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-foreground</td>
-          <td>Foreground color for active button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-background</td>
-          <td>Background when focus is visible</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-foreground</td>
-          <td>Foreground when focus is visible</td>
-        </tr>
-      </tbody>
-    </table>
-    <h4>Contained Button</h4>
-    <table class="collapsible-table">
-      <thead>
-        <tr>
-          <th>Primary Property</th>
-          <th>Dependent Property</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody class="group">
-        <tr class="primary">
-          <td><details><summary><strong>$background</strong></summary></details></td>
-          <td>$foreground</td>
-          <td>Foreground based on background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color</td>
-          <td>Icon color based on background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-background</td>
-          <td>Hover background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-foreground</td>
-          <td>Foreground on hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color-hover</td>
-          <td>Icon color on hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-background</td>
-          <td>Focus background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-foreground</td>
-          <td>Foreground on focus</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-background</td>
-          <td>Focus + hover background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-foreground</td>
-          <td>Foreground on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-background</td>
-          <td>Active background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-foreground</td>
-          <td>Active foreground color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-background</td>
-          <td>Background when focus is visible</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-foreground</td>
-          <td>Foreground when focus is visible</td>
-        </tr>
-      </tbody>
-    </table>
-    <h4>Outlined Button</h4>
-    <table class="collapsible-table">
-      <thead>
-        <tr>
-          <th>Primary Property</th>
-          <th>Dependent Property</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody class="group">
-        <tr class="primary">
-          <td><details><summary><strong>$foreground</strong></summary></details></td>
-          <td>$hover-background</td>
-          <td>Background color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-background</td>
-          <td>Background color for focused button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-background</td>
-          <td>Background color for button on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-background</td>
-          <td>Background color for active button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-foreground</td>
-          <td>Foreground color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color-hover</td>
-          <td>Icon color for hovered button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-foreground</td>
-          <td>Foreground color for focused button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-foreground</td>
-          <td>Foreground color for button on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-foreground</td>
-          <td>Foreground color for active button</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-background</td>
-          <td>Background when focus is visible</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-foreground</td>
-          <td>Foreground when focus is visible</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$border-color</td>
-          <td>The border color for outlined buttons.</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-border-color</td>
-          <td>The border color for hovered outlined buttons.</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-border-color</td>
-          <td>The border color for focused outlined buttons.</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-border-color</td>
-          <td>The border color for outlined buttons when focus is visible.</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-border-color</td>
-          <td>The border color for active outlined buttons.</td>
-        </tr>
-      </tbody>
-    </table>
-    <h4>FAB Button</h4>
-    <table class="collapsible-table">
-      <thead>
-        <tr>
-          <th>Primary Property</th>
-          <th>Dependent Property</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody class="group">
-        <tr class="primary">
-          <td><details><summary><strong>$background</strong></summary></details></td>
-          <td>$foreground</td>
-          <td>Foreground based on background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color</td>
-          <td>Icon color based on background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-background</td>
-          <td>Hover background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$hover-foreground</td>
-          <td>Foreground on hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$icon-color-hover</td>
-          <td>Icon color on hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-background</td>
-          <td>Focus background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-foreground</td>
-          <td>Foreground on focus</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-background</td>
-          <td>Active background color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$active-foreground</td>
-          <td>Active foreground color</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-background</td>
-          <td>Focus + hover background</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-hover-foreground</td>
-          <td>Foreground on focus + hover</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-background</td>
-          <td>Background when focus is visible</td>
-        </tr>
-        <tr class="dependent">
-          <td></td>
-          <td>$focus-visible-foreground</td>
-          <td>Foreground when focus is visible</td>
-        </tr>
-      </tbody>
-    </table>
+### Material Theme
+
+#### Flat Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+
+#### Contained Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-background | Focus background color |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $active-background | Active background color |
+| | $active-foreground | Active foreground color |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+
+#### Outlined Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $border-color | The border color for outlined buttons. |
+| | $hover-border-color | The border color for hovered outlined buttons. |
+| | $focus-border-color | The border color for focused outlined buttons. |
+| | $focus-visible-border-color | The border color for outlined buttons when focus is visible. |
+| | $active-border-color | The border color for active outlined buttons. |
+
+#### FAB Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-background | Focus background color |
+| | $focus-foreground | Foreground on focus |
+| | $active-background | Active background color |
+| | $active-foreground | Active foreground color |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
 
 </div>
 
 <div class="theme-table fluent">
 
-<h3>Fluent Theme</h3>
-<h4>Flat Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$foreground</strong></summary></details></td>
-      <td>$hover-background</td>
-      <td>Background color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Background color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Background color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Background color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Foreground color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Border color when focus is visible</td>
-    </tr>
-  </tbody>
-</table>
-<h4>Contained Button</h4>
-<table class="collapsible-table">
-<thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead>
-<tbody class="group">
-<tr class="primary"><td><details><summary><strong>$background</strong></summary></details></td><td>$foreground</td><td>Foreground based on background</td></tr>
-<tr class="dependent"><td></td><td>$icon-color</td><td>Icon color based on background</td></tr>
-<tr class="dependent"><td></td><td>$hover-background</td><td>Hover background color</td></tr>
-<tr class="dependent"><td></td><td>$focus-background</td><td>Focus background color</td></tr>
-<tr class="dependent"><td></td><td>$active-background</td><td>Active background color</td></tr>
-<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground on hover</td></tr>
-<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color on hover</td></tr>
-<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground on focus</td></tr>
-<tr class="dependent"><td></td><td>$active-foreground</td><td>Active foreground color</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Focus + hover background</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground on focus + hover</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-background</td><td>Background when focus is visible</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground when focus is visible</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-border-color</td><td>Border color when focus is visible</td></tr>
-</tbody>
-</table>
-<h4>Outlined Button</h4>
-<table class="collapsible-table">
-<thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead>
-<tbody class="group">
-<tr class="primary"><td><details><summary><strong>$foreground</strong></summary></details></td><td>$hover-background</td><td>Background color for hovered outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-background</td><td>Background color for focused outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Background color for outlined button on focus + hover.</td></tr>
-<tr class="dependent"><td></td><td>$active-background</td><td>Background color for active outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground color for hovered outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color for hovered outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground color for focused outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground color for outlined button on focus + hover.</td></tr>
-<tr class="dependent"><td></td><td>$active-foreground</td><td>Foreground color for active outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground color for outlined button when focus is visible.</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-border-color</td><td>Border color for outlined button when focus is visible.</td></tr>
-<tr class="dependent"><td></td><td>$border-color</td><td>Border color for outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$hover-border-color</td><td>Border color for hovered outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$focus-border-color</td><td>Border color for focused outlined button.</td></tr>
-<tr class="dependent"><td></td><td>$active-border-color</td><td>Border color for active outlined button.</td></tr>
-</tbody>
-</table>
-<h4>FAB Button</h4>
-<table class="collapsible-table">
-<thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead>
-<tbody class="group">
-<tr class="primary"><td><details><summary><strong>$background</strong></summary></details></td><td>$foreground</td><td>Foreground based on background</td></tr>
-<tr class="dependent"><td></td><td>$icon-color</td><td>Icon color based on background</td></tr>
-<tr class="dependent"><td></td><td>$hover-background</td><td>Hover background color</td></tr>
-<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground on hover</td></tr>
-<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color on hover</td></tr>
-<tr class="dependent"><td></td><td>$active-background</td><td>Active background color</td></tr>
-<tr class="dependent"><td></td><td>$active-foreground</td><td>Active foreground color</td></tr>
-<tr class="dependent"><td></td><td>$focus-background</td><td>Focus background color</td></tr>
-<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground on focus</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Focus + hover background</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground on focus + hover</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-background</td><td>Background when focus is visible</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground when focus is visible</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-border-color</td><td>Border color when focus is visible</td></tr>
-</tbody>
-</table>
+### Fluent Theme
+
+#### Flat Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+
+#### Contained Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $focus-background | Focus background color |
+| | $active-background | Active background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-foreground | Foreground on focus |
+| | $active-foreground | Active foreground color |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+
+#### Outlined Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered outlined button. |
+| | $focus-background | Background color for focused outlined button. |
+| | $focus-hover-background | Background color for outlined button on focus + hover. |
+| | $active-background | Background color for active outlined button. |
+| | $hover-foreground | Foreground color for hovered outlined button. |
+| | $icon-color-hover | Icon color for hovered outlined button. |
+| | $focus-foreground | Foreground color for focused outlined button. |
+| | $focus-hover-foreground | Foreground color for outlined button on focus + hover. |
+| | $active-foreground | Foreground color for active outlined button. |
+| | $focus-visible-foreground | Foreground color for outlined button when focus is visible. |
+| | $focus-visible-border-color | Border color for outlined button when focus is visible. |
+| | $border-color | Border color for outlined button. |
+| | $hover-border-color | Border color for hovered outlined button. |
+| | $focus-border-color | Border color for focused outlined button. |
+| | $active-border-color | Border color for active outlined button. |
+
+#### FAB Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $active-background | Active background color |
+| | $active-foreground | Active foreground color |
+| | $focus-background | Focus background color |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+
 </div>
 
 <div class="theme-table bootstrap">
 
-<h3>Bootstrap Theme</h3>
-<h4>Flat Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$foreground</strong></summary></details></td>
-      <td>$hover-foreground</td>
-      <td>Foreground color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Foreground color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Border color when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Foreground color for disabled button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Icon color for disabled button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-  </tbody>
-</table>
-<h4>Contained Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$background</strong></summary></details></td>
-      <td>$foreground</td>
-      <td>Foreground based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color</td>
-      <td>Icon color based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-background</td>
-      <td>Hover background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Focus background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Active background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground on focus</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Focus + hover background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Active foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-background</td>
-      <td>Disabled background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Disabled foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Disabled icon color</td>
-    </tr>
-  </tbody>
-</table>
-<h4>Outlined Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$foreground</strong></summary></details></td>
-      <td>$hover-background</td>
-      <td>Background color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Background color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Background color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Background color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Foreground color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Border color when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Foreground color for disabled button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Icon color for disabled button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-border-color</td>
-      <td>Border color for disabled button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-border-color</td>
-      <td>Hover border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-border-color</td>
-      <td>Focus border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Focus-visible border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-border-color</td>
-      <td>Active border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-  </tbody>
-</table>
-<h4>FAB Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$background</strong></summary></details></td>
-      <td>$foreground</td>
-      <td>Foreground based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color</td>
-      <td>Icon color based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-background</td>
-      <td>Hover background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Focus background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Active background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-background</td>
-      <td>Disabled background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground on focus</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Focus + hover background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Active foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Disabled foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Disabled icon color</td>
-    </tr>
-  </tbody>
-</table>
+### Bootstrap Theme
+
+#### Flat Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+| | $disabled-foreground | Foreground color for disabled button |
+| | $disabled-icon-color | Icon color for disabled button |
+| | $shadow-color | Shadow color |
+
+#### Contained Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $focus-background | Focus background color |
+| | $active-background | Active background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $active-foreground | Active foreground color |
+| | $shadow-color | Shadow color |
+| | $disabled-background | Disabled background color |
+| | $disabled-foreground | Disabled foreground color |
+| | $disabled-icon-color | Disabled icon color |
+
+#### Outlined Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+| | $disabled-foreground | Foreground color for disabled button |
+| | $disabled-icon-color | Icon color for disabled button |
+| | $disabled-border-color | Border color for disabled button |
+| | $hover-border-color | Hover border color |
+| | $focus-border-color | Focus border color |
+| | $active-border-color | Active border color |
+| | $shadow-color | Shadow color |
+
+#### FAB Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $focus-background | Focus background color |
+| | $active-background | Active background color |
+| | $disabled-background | Disabled background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $active-foreground | Active foreground color |
+| | $shadow-color | Shadow color |
+| | $disabled-foreground | Disabled foreground color |
+| | $disabled-icon-color | Disabled icon color |
+
 </div>
+
 ボタンにスタイルを設定する別の方法は、**Sass** とタイプ別テーマ関数を使用することです。[`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme)、[`outlined-button-theme`]({environment:sassApiUrl}/themes#function-outlined-button-theme)、[`contained-button-theme`]({environment:sassApiUrl}/themes#function-contained-button-theme)、および [`fab-button-theme`]({environment:sassApiUrl}/themes#function-fab-button-theme)。
 
 それぞれは、特定のタイプのボタンのみをターゲットにします。
 
 <div class="theme-table indigo">
 
-<h3>Indigo Theme</h3>
-<h4>Flat Button</h4>
-<table class="collapsible-table">
-  <thead><tr><th>Primary Property</th><th>Dependent Property</th><th>Description</th></tr></thead>
-  <tbody class="group">
-<tr class="primary"><td><details><summary><strong>$foreground</strong></summary></details></td><td>$hover-background</td><td>Background color for hovered button</td></tr>
-<tr class="dependent"><td></td><td>$focus-background</td><td>Background color for focused button</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-background</td><td>Background color for button on focus + hover</td></tr>
-<tr class="dependent"><td></td><td>$active-background</td><td>Background color for active button</td></tr>
-<tr class="dependent"><td></td><td>$hover-foreground</td><td>Foreground color for hovered button</td></tr>
-<tr class="dependent"><td></td><td>$icon-color-hover</td><td>Icon color for hovered button</td></tr>
-<tr class="dependent"><td></td><td>$focus-foreground</td><td>Foreground color for focused button</td></tr>
-<tr class="dependent"><td></td><td>$focus-hover-foreground</td><td>Foreground color for button on focus + hover</td></tr>
-<tr class="dependent"><td></td><td>$active-foreground</td><td>Foreground color for active button</td></tr>
-<tr class="dependent"><td></td><td>$focus-visible-foreground</td><td>Foreground when focus is visible</td></tr>
-<tr class="dependent"><td></td><td>$disabled-foreground</td><td>Disabled foreground color</td></tr>
-<tr class="dependent"><td></td><td>$disabled-icon-color</td><td>Disabled icon color</td></tr>
-<tr class="dependent"><td></td><td>$shadow-color</td><td>Shadow color</td></tr>
-</tbody>
-</table>
-<h4>Contained Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$background</strong></summary></details></td>
-      <td>$foreground</td>
-      <td>Foreground based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color</td>
-      <td>Icon color based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-background</td>
-      <td>Hover background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Focus background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Active background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground on focus</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Focus + hover background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Active foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-background</td>
-      <td>Disabled background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Disabled foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Disabled icon color</td>
-    </tr>
-  </tbody>
-</table>
-<h4>Outlined Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$foreground</strong></summary></details></td>
-      <td>$hover-background</td>
-      <td>Background color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Background color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Background color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Background color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color for hovered button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground color for focused button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground color for button on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Foreground color for active button</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Border color when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$border-color</td>
-      <td>Border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-border-color</td>
-      <td>Hover border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-border-color</td>
-      <td>Focus border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-border-color</td>
-      <td>Focus-visible border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-border-color</td>
-      <td>Active border color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-  </tbody>
-</table>
-<h4>FAB Button</h4>
-<table class="collapsible-table">
-  <thead>
-    <tr>
-      <th>Primary Property</th>
-      <th>Dependent Property</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody class="group">
-    <tr class="primary">
-      <td><details><summary><strong>$background</strong></summary></details></td>
-      <td>$foreground</td>
-      <td>Foreground based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color</td>
-      <td>Icon color based on background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-background</td>
-      <td>Hover background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-background</td>
-      <td>Focus background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-background</td>
-      <td>Active background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-background</td>
-      <td>Disabled background color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$hover-foreground</td>
-      <td>Foreground on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$icon-color-hover</td>
-      <td>Icon color on hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-foreground</td>
-      <td>Foreground on focus</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-background</td>
-      <td>Focus + hover background</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-hover-foreground</td>
-      <td>Foreground on focus + hover</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-background</td>
-      <td>Background when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$focus-visible-foreground</td>
-      <td>Foreground when focus is visible</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$active-foreground</td>
-      <td>Active foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$shadow-color</td>
-      <td>Shadow color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-foreground</td>
-      <td>Disabled foreground color</td>
-    </tr>
-    <tr class="dependent">
-      <td></td>
-      <td>$disabled-icon-color</td>
-      <td>Disabled icon color</td>
-    </tr>
-  </tbody>
-</table>
+### Indigo Theme
+
+#### Flat Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $disabled-foreground | Disabled foreground color |
+| | $disabled-icon-color | Disabled icon color |
+| | $shadow-color | Shadow color |
+
+#### Contained Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $focus-background | Focus background color |
+| | $active-background | Active background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $active-foreground | Active foreground color |
+| | $shadow-color | Shadow color |
+| | $disabled-background | Disabled background color |
+| | $disabled-foreground | Disabled foreground color |
+| | $disabled-icon-color | Disabled icon color |
+
+#### Outlined Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$foreground** | $hover-background | Background color for hovered button |
+| | $focus-background | Background color for focused button |
+| | $focus-hover-background | Background color for button on focus + hover |
+| | $active-background | Background color for active button |
+| | $hover-foreground | Foreground color for hovered button |
+| | $icon-color-hover | Icon color for hovered button |
+| | $focus-foreground | Foreground color for focused button |
+| | $focus-hover-foreground | Foreground color for button on focus + hover |
+| | $active-foreground | Foreground color for active button |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $focus-visible-border-color | Border color when focus is visible |
+| | $border-color | Border color |
+| | $hover-border-color | Hover border color |
+| | $focus-border-color | Focus border color |
+| | $active-border-color | Active border color |
+| | $shadow-color | Shadow color |
+
+#### FAB Button
+
+| Primary Property | Dependent Property | Description |
+|:--|:--|:--|
+| **$background** | $foreground | Foreground based on background |
+| | $icon-color | Icon color based on background |
+| | $hover-background | Hover background color |
+| | $focus-background | Focus background color |
+| | $active-background | Active background color |
+| | $disabled-background | Disabled background color |
+| | $hover-foreground | Foreground on hover |
+| | $icon-color-hover | Icon color on hover |
+| | $focus-foreground | Foreground on focus |
+| | $focus-hover-background | Focus + hover background |
+| | $focus-hover-foreground | Foreground on focus + hover |
+| | $focus-visible-background | Background when focus is visible |
+| | $focus-visible-foreground | Foreground when focus is visible |
+| | $active-foreground | Active foreground color |
+| | $shadow-color | Shadow color |
+| | $disabled-foreground | Disabled foreground color |
+| | $disabled-icon-color | Disabled icon color |
+
 </div>
+
 </div>
+
 </div>
 
+
 > **注:** 結果の依存プロパティは、選択したテーマ (Material、Fluent、Bootstrap、Indigo) によって若干異なる場合があります。
 
 ボタンのスタイルを設定するには、タイプ固有のテーマ関数を使用できます: [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme)、[`outlined-button-theme`]({environment:sassApiUrl}/themes#function-outlined-button-theme)、[`contained-button-theme`]({environment:sassApiUrl}/themes#function-contained-button-theme)、および [`fab-button-theme`]({environment:sassApiUrl}/themes#function-fab-button-theme)。
diff --git a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
index 3a3df16252..4745630e2a 100644
--- a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
+++ b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
@@ -10,11 +10,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 <style>{`
 .greenCheck {
-  content:url("../../images/general/greenCheck.png");
+  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/greenCheck.png");
 }
 
 .redCheck {
-  content:url("../../images/general/redX.png");
+  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/redX.png");
 }
 `}</style>
 
diff --git a/docs/xplat/public/images/general/greenCheck.png b/docs/xplat/public/images/general/greenCheck.png
new file mode 100644
index 0000000000..6d09366869
Binary files /dev/null and b/docs/xplat/public/images/general/greenCheck.png differ
diff --git a/docs/xplat/public/images/general/redX.png b/docs/xplat/public/images/general/redX.png
new file mode 100644
index 0000000000..ae748161d2
Binary files /dev/null and b/docs/xplat/public/images/general/redX.png differ
diff --git a/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx
index 9661371e96..6d7c64cfeb 100644
--- a/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx
+++ b/docs/xplat/src/content/en/components/interactivity/accessibility-compliance.mdx
@@ -9,11 +9,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 <style>{`
 .greenCheck {
-  content:url("/images/general/greenCheck.png");
+  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/greenCheck.png");
 }
 
 .redCheck {
-  content:url("/images/general/redX.png");
+  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/redX.png");
 }
 `}</style>
 
diff --git a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx
index 7d76cba09b..1eaadb665a 100644
--- a/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx
+++ b/docs/xplat/src/content/jp/components/interactivity/accessibility-compliance.mdx
@@ -10,11 +10,11 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 <style>{`
 .greenCheck {
-  content:url("../../images/general/greenCheck.png");
+  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/greenCheck.png");
 }
 
 .redCheck {
-  content:url("../../images/general/redX.png");
+  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/redX.png");
 }
 `}</style>
 
diff --git a/package-lock.json b/package-lock.json
index ff162d523c..2aa72c9d54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1213,9 +1213,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1232,9 +1229,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1251,9 +1245,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1270,9 +1261,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1289,9 +1277,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1308,9 +1293,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1327,9 +1309,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1346,9 +1325,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -1365,9 +1341,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1390,9 +1363,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1415,9 +1385,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1440,9 +1407,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1465,9 +1429,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1490,9 +1451,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1515,9 +1473,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1540,9 +1495,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1979,9 +1931,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2002,9 +1951,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2025,9 +1971,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2048,9 +1991,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2071,9 +2011,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2094,9 +2031,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2283,9 +2217,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2299,9 +2230,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2315,9 +2243,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2331,9 +2256,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2347,9 +2269,6 @@
       "cpu": [
         "loong64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2363,9 +2282,6 @@
       "cpu": [
         "loong64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2379,9 +2295,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2395,9 +2308,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2411,9 +2321,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2427,9 +2334,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2443,9 +2347,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2459,9 +2360,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2475,9 +2373,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4947,73 +4842,6 @@
         }
       }
     },
-    "node_modules/igniteui-astro-components/node_modules/@shikijs/core": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.23.0.tgz",
-      "integrity": "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@shikijs/types": "3.23.0",
-        "@shikijs/vscode-textmate": "^10.0.2",
-        "@types/hast": "^3.0.4",
-        "hast-util-to-html": "^9.0.5"
-      }
-    },
-    "node_modules/igniteui-astro-components/node_modules/@shikijs/engine-javascript": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.23.0.tgz",
-      "integrity": "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@shikijs/types": "3.23.0",
-        "@shikijs/vscode-textmate": "^10.0.2",
-        "oniguruma-to-es": "^4.3.4"
-      }
-    },
-    "node_modules/igniteui-astro-components/node_modules/@shikijs/engine-oniguruma": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.23.0.tgz",
-      "integrity": "sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@shikijs/types": "3.23.0",
-        "@shikijs/vscode-textmate": "^10.0.2"
-      }
-    },
-    "node_modules/igniteui-astro-components/node_modules/@shikijs/langs": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.23.0.tgz",
-      "integrity": "sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@shikijs/types": "3.23.0"
-      }
-    },
-    "node_modules/igniteui-astro-components/node_modules/@shikijs/themes": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.23.0.tgz",
-      "integrity": "sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@shikijs/types": "3.23.0"
-      }
-    },
-    "node_modules/igniteui-astro-components/node_modules/@shikijs/types": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.23.0.tgz",
-      "integrity": "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@shikijs/vscode-textmate": "^10.0.2",
-        "@types/hast": "^3.0.4"
-      }
-    },
     "node_modules/igniteui-astro-components/node_modules/igniteui-webcomponents": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.1.3.tgz",
@@ -5054,23 +4882,6 @@
         }
       }
     },
-    "node_modules/igniteui-astro-components/node_modules/shiki": {
-      "version": "3.23.0",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.23.0.tgz",
-      "integrity": "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@shikijs/core": "3.23.0",
-        "@shikijs/engine-javascript": "3.23.0",
-        "@shikijs/engine-oniguruma": "3.23.0",
-        "@shikijs/langs": "3.23.0",
-        "@shikijs/themes": "3.23.0",
-        "@shikijs/types": "3.23.0",
-        "@shikijs/vscode-textmate": "^10.0.2",
-        "@types/hast": "^3.0.4"
-      }
-    },
     "node_modules/igniteui-i18n-core": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.5.tgz",
@@ -5292,7 +5103,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": "glibc",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5310,7 +5120,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": "glibc",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5328,7 +5137,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": "musl",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5346,7 +5154,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": "musl",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5364,7 +5171,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": "musl",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5382,7 +5188,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": "musl",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5400,7 +5205,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": "glibc",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5418,7 +5222,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": "glibc",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8157,7 +7960,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": "glibc",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8174,7 +7976,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": "glibc",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8191,7 +7992,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": "musl",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8208,7 +8008,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": "musl",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8225,7 +8024,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": "musl",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8242,7 +8040,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": "musl",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8259,7 +8056,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": "glibc",
       "license": "MIT",
       "optional": true,
       "os": [
@@ -8276,7 +8072,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": "glibc",
       "license": "MIT",
       "optional": true,
       "os": [
diff --git a/src/integration.ts b/src/integration.ts
index 36073e03c4..bd34a94a7e 100644
--- a/src/integration.ts
+++ b/src/integration.ts
@@ -62,6 +62,8 @@ import type { HeadEntry, PlatformKey, NavLang } from './platform.ts';
 import { remarkEnvVars } from './plugins/remark-env-vars';
 import { remarkMdLinks } from './plugins/remark-md-links';
 import { remarkHtmlTransforms } from './plugins/remark-html-transforms';
+import { rehypeTableWrapper } from 'igniteui-astro-components/plugins/rehype-table-wrapper';
+import { rehypeHeadingAnchors } from 'igniteui-astro-components/plugins/rehype-heading-anchors';
 
 /** Build / deployment mode. Drives env-var `DOCS_BUILD_MODE`. */
 export type DocsMode = 'development' | 'staging' | 'production';
@@ -621,6 +623,8 @@ export function createDocsSite(options: CreateDocsSiteOptions = {} as CreateDocs
                 ...((astroExtra as any).markdown?.remarkPlugins ?? []),
             ],
             rehypePlugins: [
+                rehypeTableWrapper,
+                rehypeHeadingAnchors,
                 ...((astroExtra as any).markdown?.rehypePlugins ?? []),
             ],
         },
diff --git a/src/routes/[...slug].astro b/src/routes/[...slug].astro
index bb3425ab12..68e1ae34c7 100644
--- a/src/routes/[...slug].astro
+++ b/src/routes/[...slug].astro
@@ -24,13 +24,14 @@ type EntryData = {
   description?: string | null;
   keywords?: string | null;
   tableOfContents?: false | { minHeadingLevel?: number; maxHeadingLevel?: number };
+  license?: string;
 };
 
-const { title, description, keywords, tableOfContents } = entry.data as EntryData;
+const { title, description, keywords, tableOfContents, license } = entry.data as EntryData;
 const currentSlug = entry.id.replace(/\.(md|mdx)$/i, '');
 ---
 
-<DocsLayout title={title} description={description} keywords={keywords} currentSlug={currentSlug}>
+<DocsLayout title={title} description={description} keywords={keywords} currentSlug={currentSlug} license={license}>
   <DocsSidebar slot="sidebar" currentSlug={currentSlug} />
   <DocsToc slot="toc" headings={headings} tocConfig={tableOfContents} offsetTarget=".docs-subheader" />
   <div id="_top" class="sl-markdown-content" data-pagefind-body>
diff --git a/src/sidebar.ts b/src/sidebar.ts
index 4c79d86dea..d9b9f41c8e 100644
--- a/src/sidebar.ts
+++ b/src/sidebar.ts
@@ -101,17 +101,15 @@ function convertTocItem(
     if (item.href) {
         if (!docExists(docsDir, item.href, exclude)) return null;
         const entry: SidebarLink = { label: item.name, slug: hrefToSlug(item.href) };
-        // Status badge — only one slot available, priority order:
-        if (item.new)          entry.badges = [{ text: 'New',     variant: 'new'     }];
-        else if (item.preview) entry.badges = [{ text: 'Preview', variant: 'preview' }];
-        else if (item.updated) entry.badges = [{ text: 'Updated', variant: 'updated' }];
-        // Premium is rendered via data-premium attr so it can coexist with a
-        // status badge (CSS ::after pseudo-element adds the star icon).
+        const badges: NonNullable<SidebarLink['badges']> = [];
+        if (item.new)          badges.push({ text: 'New',     variant: 'new'     });
+        else if (item.preview) badges.push({ text: 'Preview', variant: 'preview' });
+        else if (item.updated) badges.push({ text: 'Updated', variant: 'updated' });
         if (item.premium) {
             entry.attrs = { 'data-premium': 'true' };
-            // Only use the badge slot for premium when no status badge is shown.
-            if (!entry.badges) entry.badges = [{ text: 'Premium', variant: 'premium' }];
+            badges.push({ text: 'Premium', variant: 'premium' });
         }
+        if (badges.length) entry.badges = badges;
         return entry;
     }