@synergy-design-system/mcp 2.14.1 → 3.0.0

package/metadata/static/templates/table.md

@@ -1,1425 +0,0 @@
-## Table With Header
-
-```html
-<table class="syn-table--default">
-  <thead>
-    <tr>
-      <th class="">Name</th>
-      <th class="">Customer</th>
-      <th class="">Location</th>
-      <th class="">Contract Start</th>
-      <th class=""></th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<style>
-  .syn-table--default .buttons-cell {
-    padding-top: var(--syn-spacing-2x-small);
-    padding-bottom: var(--syn-spacing-2x-small);
-    min-width: 76px;
-  }
-</style>
-```
-
----
-
-## Table With Alternating Rows
-
-```html
-<table class="syn-table--alternating">
-  <thead>
-    <tr>
-      <th class="">Name</th>
-      <th class="">Customer</th>
-      <th class="">Location</th>
-      <th class="">Contract Start</th>
-      <th class=""></th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<style>
-  .syn-table--alternating .buttons-cell {
-    padding-top: var(--syn-spacing-2x-small);
-    padding-bottom: var(--syn-spacing-2x-small);
-    min-width: 76px;
-  }
-</style>
-```
-
----
-
-## Table With Borders
-
-```html
-<table class="syn-table--border">
-  <thead>
-    <tr>
-      <th class="">Name</th>
-      <th class="">Customer</th>
-      <th class="">Location</th>
-      <th class="">Contract Start</th>
-      <th class=""></th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-
-    <tr>
-      <td class="">Max Mustermann</td>
-      <td class="">Muster AG</td>
-      <td class="">Hamburg, Düsseldorf, Freiburg</td>
-      <td class="">20.01.2023</td>
-      <td class="buttons-cell">
-        <syn-button variant="text" size="small" title="">
-          <syn-icon name="edit" aria-hidden="true" library="default"></syn-icon>
-        </syn-button>
-        <syn-button variant="text" size="small" title="">
-          <syn-icon
-            name="delete_outline"
-            aria-hidden="true"
-            library="default"
-          ></syn-icon>
-        </syn-button>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<style>
-  .syn-table--border .buttons-cell {
-    padding-top: var(--syn-spacing-2x-small);
-    padding-bottom: var(--syn-spacing-2x-small);
-    min-width: 76px;
-  }
-</style>
-```
-
----
-
-## Table Shadow Left Column
-
-If using a table with borders, sticky row and scrolling mechanism together, the 'border-collapse'
-property should be set to 'separate'. Otherwise the table will have some strange behaviors.
-
-```html
-<div id="horizontal-scrollable-table">
-  <table class="syn-table--default">
-    <thead>
-      <tr>
-        <th
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          Name
-        </th>
-        <th class="">Customer</th>
-        <th class="">Location</th>
-        <th class="">Contract Start</th>
-        <th class=""></th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <tr>
-        <td
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          Max Mustermann
-        </td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td class="buttons-cell">
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          Max Mustermann
-        </td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td class="buttons-cell">
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          Max Mustermann
-        </td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td class="buttons-cell">
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          Max Mustermann
-        </td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td class="buttons-cell">
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          Max Mustermann
-        </td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td class="buttons-cell">
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-<style>
-  #horizontal-scrollable-table {
-    overflow-x: auto;
-    width: 550px;
-  }
-
-  #horizontal-scrollable-table > table {
-    /* Set border-collapse to separate, if using scrolling mechanism together with a table with borders */
-    /* border-collapse: separate; */
-  }
-
-  #horizontal-scrollable-table .shadow-cell {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  #horizontal-scrollable-table td {
-    min-width: 120px;
-  }
-
-  #horizontal-scrollable-table .buttons-cell {
-    padding-top: var(--syn-spacing-2x-small);
-    padding-bottom: var(--syn-spacing-2x-small);
-    min-width: 76px;
-  }
-</style>
-```
-
----
-
-## Table Shadow Right Column
-
-If using a table with borders, sticky row and scrolling mechanism together, the 'border-collapse'
-property should be set to 'separate'. Otherwise the table will have some strange behaviors.
-
-```html
-<div id="horizontal-scrollable-table2">
-  <table class="syn-table--default">
-    <thead>
-      <tr>
-        <th class="">Name</th>
-        <th class="">Customer</th>
-        <th class="">Location</th>
-        <th class="">Contract Start</th>
-        <th
-          class="syn-table-cell--shadow-start shadow-cell syn-table-cell--shadow-active"
-        ></th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <tr>
-        <td class="">Max Mustermann</td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td
-          class="syn-table-cell--shadow-start shadow-cell buttons-cell syn-table-cell--shadow-active"
-        >
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td class="">Max Mustermann</td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td
-          class="syn-table-cell--shadow-start shadow-cell buttons-cell syn-table-cell--shadow-active"
-        >
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td class="">Max Mustermann</td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td
-          class="syn-table-cell--shadow-start shadow-cell buttons-cell syn-table-cell--shadow-active"
-        >
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td class="">Max Mustermann</td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td
-          class="syn-table-cell--shadow-start shadow-cell buttons-cell syn-table-cell--shadow-active"
-        >
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td class="">Max Mustermann</td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td
-          class="syn-table-cell--shadow-start shadow-cell buttons-cell syn-table-cell--shadow-active"
-        >
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-<style>
-  #horizontal-scrollable-table2 {
-    overflow-x: auto;
-    width: 550px;
-  }
-
-  #horizontal-scrollable-table2 > table {
-    /* Set border-collapse to separate, if using scrolling mechanism together with a table with borders */
-    /* border-collapse: separate; */
-  }
-
-  #horizontal-scrollable-table2 .shadow-cell {
-    position: sticky;
-    right: 0;
-    z-index: 1;
-  }
-
-  #horizontal-scrollable-table2 td {
-    min-width: 120px;
-  }
-
-  #horizontal-scrollable-table2 .buttons-cell {
-    padding-top: var(--syn-spacing-2x-small);
-    padding-bottom: var(--syn-spacing-2x-small);
-    min-width: 76px;
-  }
-</style>
-```
-
----
-
-## Table Shadow Top Row
-
-If using a table with borders, sticky row and scrolling mechanism together, the 'border-collapse'
-property should be set to 'separate'. Otherwise the table will have some strange behaviors.
-
-```html
-<div id="vertical-scrollable-table">
-  <table class="syn-table--default">
-    <thead>
-      <tr>
-        <th
-          class="syn-table-cell--shadow-bottom shadow-cell syn-table-cell--shadow-active"
-        >
-          Name
-        </th>
-        <th
-          class="syn-table-cell--shadow-bottom shadow-cell syn-table-cell--shadow-active"
-        >
-          Customer
-        </th>
-        <th
-          class="syn-table-cell--shadow-bottom shadow-cell syn-table-cell--shadow-active"
-        >
-          Location
-        </th>
-        <th
-          class="syn-table-cell--shadow-bottom shadow-cell syn-table-cell--shadow-active"
-        >
-          Contract Start
-        </th>
-        <th
-          class="syn-table-cell--shadow-bottom shadow-cell syn-table-cell--shadow-active"
-        ></th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <tr>
-        <td class="">Max Mustermann</td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td class="buttons-cell">
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td class="">Max Mustermann</td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td class="buttons-cell">
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td class="">Max Mustermann</td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td class="buttons-cell">
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td class="">Max Mustermann</td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td class="buttons-cell">
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td class="">Max Mustermann</td>
-        <td class="">Muster AG</td>
-        <td class="">Hamburg, Düsseldorf, Freiburg</td>
-        <td class="">20.01.2023</td>
-        <td class="buttons-cell">
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-<style>
-  #vertical-scrollable-table {
-    overflow-y: auto;
-    height: 200px;
-    width: fit-content;
-  }
-
-  #vertical-scrollable-table > table {
-    /* Set border-collapse to separate, if using scrolling mechanism together with a table with borders */
-    /* border-collapse: separate; */
-  }
-
-  #vertical-scrollable-table .shadow-cell {
-    position: sticky;
-    z-index: 1;
-    top: 0;
-  }
-
-  #vertical-scrollable-table .buttons-cell {
-    padding-top: var(--syn-spacing-2x-small);
-    padding-bottom: var(--syn-spacing-2x-small);
-    min-width: 76px;
-  }
-</style>
-```
-
----
-
-## Table Product
-
-```html
-<div id="product-table">
-  <table class="syn-table--default">
-    <thead>
-      <tr>
-        <th
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          Product
-        </th>
-        <th>Availability</th>
-        <th>Earliest delivery</th>
-        <th></th>
-        <th>Unit Price</th>
-        <th>Total Price</th>
-        <th></th>
-        <th></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          <div class="product-cell">
-            <img
-              class="product-image"
-              src="https://synergy-design-system.github.io/card-example.jpg"
-              alt="Multiple persons having lunch in SICK Academy"
-            />
-            <div>
-              <div>Product details</div>
-              <div class="product-name">Product Name</div>
-              <div>Part no. XXXXXXX</div>
-            </div>
-          </div>
-        </td>
-        <td>
-          <div class="availability">
-            <syn-icon
-              class="check_icon"
-              name="check_circle_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            available
-          </div>
-        </td>
-        <td>2024-12-12</td>
-        <td>
-          <div class="price">
-            <div>List price:</div>
-            <div>Your net price:</div>
-          </div>
-        </td>
-        <td>
-          <div class="price">
-            <div>106,00 €</div>
-            <div>96,00 €</div>
-          </div>
-        </td>
-        <td>
-          <div class="price">
-            <div>318,00 €</div>
-            <div>288,00 €</div>
-          </div>
-        </td>
-        <td>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-        <td>
-          <syn-button variant="filled" size="small" title="">
-            <syn-icon
-              slot="prefix"
-              name="shopping_cart"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            Add to cart
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              slot="suffix"
-              name="keyboard_arrow_right"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            Request quote
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          <div class="product-cell">
-            <img
-              class="product-image"
-              src="https://synergy-design-system.github.io/card-example.jpg"
-              alt="Multiple persons having lunch in SICK Academy"
-            />
-            <div>
-              <div>Product details</div>
-              <div class="product-name">Product Name</div>
-              <div>Part no. XXXXXXX</div>
-            </div>
-          </div>
-        </td>
-        <td>
-          <div class="availability">
-            <syn-icon
-              class="check_icon"
-              name="check_circle_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            available
-          </div>
-        </td>
-        <td>2024-12-12</td>
-        <td>
-          <div class="price">
-            <div>List price:</div>
-            <div>Your net price:</div>
-          </div>
-        </td>
-        <td>
-          <div class="price">
-            <div>106,00 €</div>
-            <div>96,00 €</div>
-          </div>
-        </td>
-        <td>
-          <div class="price">
-            <div>318,00 €</div>
-            <div>288,00 €</div>
-          </div>
-        </td>
-        <td>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-        <td>
-          <syn-button variant="filled" size="small" title="">
-            <syn-icon
-              slot="prefix"
-              name="shopping_cart"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            Add to cart
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              slot="suffix"
-              name="keyboard_arrow_right"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            Request quote
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          <div class="product-cell">
-            <img
-              class="product-image"
-              src="https://synergy-design-system.github.io/card-example.jpg"
-              alt="Multiple persons having lunch in SICK Academy"
-            />
-            <div>
-              <div>Product details</div>
-              <div class="product-name">Product Name</div>
-              <div>Part no. XXXXXXX</div>
-            </div>
-          </div>
-        </td>
-        <td>
-          <div class="availability">
-            <syn-icon
-              class="check_icon"
-              name="check_circle_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            available
-          </div>
-        </td>
-        <td>2024-12-12</td>
-        <td>
-          <div class="price">
-            <div>List price:</div>
-            <div>Your net price:</div>
-          </div>
-        </td>
-        <td>
-          <div class="price">
-            <div>106,00 €</div>
-            <div>96,00 €</div>
-          </div>
-        </td>
-        <td>
-          <div class="price">
-            <div>318,00 €</div>
-            <div>288,00 €</div>
-          </div>
-        </td>
-        <td>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-        <td>
-          <syn-button variant="filled" size="small" title="">
-            <syn-icon
-              slot="prefix"
-              name="shopping_cart"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            Add to cart
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              slot="suffix"
-              name="keyboard_arrow_right"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            Request quote
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          <div class="product-cell">
-            <img
-              class="product-image"
-              src="https://synergy-design-system.github.io/card-example.jpg"
-              alt="Multiple persons having lunch in SICK Academy"
-            />
-            <div>
-              <div>Product details</div>
-              <div class="product-name">Product Name</div>
-              <div>Part no. XXXXXXX</div>
-            </div>
-          </div>
-        </td>
-        <td>
-          <div class="availability">
-            <syn-icon
-              class="check_icon"
-              name="check_circle_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            available
-          </div>
-        </td>
-        <td>2024-12-12</td>
-        <td>
-          <div class="price">
-            <div>List price:</div>
-            <div>Your net price:</div>
-          </div>
-        </td>
-        <td>
-          <div class="price">
-            <div>106,00 €</div>
-            <div>96,00 €</div>
-          </div>
-        </td>
-        <td>
-          <div class="price">
-            <div>318,00 €</div>
-            <div>288,00 €</div>
-          </div>
-        </td>
-        <td>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-        <td>
-          <syn-button variant="filled" size="small" title="">
-            <syn-icon
-              slot="prefix"
-              name="shopping_cart"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            Add to cart
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              slot="suffix"
-              name="keyboard_arrow_right"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            Request quote
-          </syn-button>
-        </td>
-      </tr>
-
-      <tr>
-        <td
-          class="syn-table-cell--shadow-end shadow-cell syn-table-cell--shadow-active"
-        >
-          <div class="product-cell">
-            <img
-              class="product-image"
-              src="https://synergy-design-system.github.io/card-example.jpg"
-              alt="Multiple persons having lunch in SICK Academy"
-            />
-            <div>
-              <div>Product details</div>
-              <div class="product-name">Product Name</div>
-              <div>Part no. XXXXXXX</div>
-            </div>
-          </div>
-        </td>
-        <td>
-          <div class="availability">
-            <syn-icon
-              class="check_icon"
-              name="check_circle_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            available
-          </div>
-        </td>
-        <td>2024-12-12</td>
-        <td>
-          <div class="price">
-            <div>List price:</div>
-            <div>Your net price:</div>
-          </div>
-        </td>
-        <td>
-          <div class="price">
-            <div>106,00 €</div>
-            <div>96,00 €</div>
-          </div>
-        </td>
-        <td>
-          <div class="price">
-            <div>318,00 €</div>
-            <div>288,00 €</div>
-          </div>
-        </td>
-        <td>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="edit"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              name="delete_outline"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-          </syn-button>
-        </td>
-        <td>
-          <syn-button variant="filled" size="small" title="">
-            <syn-icon
-              slot="prefix"
-              name="shopping_cart"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            Add to cart
-          </syn-button>
-          <syn-button variant="text" size="small" title="">
-            <syn-icon
-              slot="suffix"
-              name="keyboard_arrow_right"
-              aria-hidden="true"
-              library="default"
-            ></syn-icon>
-            Request quote
-          </syn-button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-
-<style>
-  #product-table {
-    overflow-y: auto;
-    width: 900px;
-  }
-
-  #product-table .shadow-cell {
-    position: sticky;
-    z-index: 1;
-    left: 0;
-  }
-
-  #product-table td {
-    min-width: 100px;
-  }
-
-  .product-image {
-    height: var(--syn-spacing-3x-large);
-    width: var(--syn-spacing-3x-large);
-    object-fit: cover;
-  }
-
-  .product-cell {
-    display: flex;
-    flex-direction: row;
-    font: var(--syn-body-x-small-regular);
-    gap: var(--syn-spacing-medium);
-    width: 230px;
-  }
-
-  .product-name {
-    color: var(--syn-color-primary-600);
-    font: var(--syn-body-medium-semibold);
-  }
-
-  .availability {
-    display: flex;
-    align-items: center;
-    gap: var(--syn-spacing-2x-small);
-  }
-
-  .check_icon {
-    font-size: var(--syn-font-size-medium);
-    color: var(--syn-color-success-600);
-  }
-
-  .price {
-    display: flex;
-    flex-direction: column;
-    gap: var(--syn-spacing-2x-small);
-  }
-
-  .price :nth-child(2) {
-    font: var(--syn-body-small-semibold);
-  }
-</style>
-```