fix: add new tables

package.json

@@ -19,8 +19,8 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/icons": "^0.0.0-20",
-        "@aw-labs/ui": "^0.0.0-20",
+        "@aw-labs/icons": "^0.0.0-22",
+        "@aw-labs/ui": "^0.0.0-22",
         "echarts": "^5.3.3"
     },
     "devDependencies": {

src/lib/elements/table/body.svelte

@@ -1,3 +1,3 @@
-<tbody class="table-tbody">
+<div class="table-tbody" role="rowgroup">
     <slot />
-</tbody>
+</div>

src/lib/elements/table/cell.svelte

@@ -3,6 +3,10 @@
     export let width: number = null;
 </script>
 
-<td width={width?.toString() ?? ''} class="table-col" class:is-only-desktop={onlyDesktop}>
+<div
+    width={width?.toString() ?? ''}
+    class="table-col"
+    class:is-only-desktop={onlyDesktop}
+    role="cell">
     <slot />
-</td>
+</div>

src/lib/elements/table/cellHead.svelte

@@ -2,14 +2,8 @@
     export let width: number = null;
 </script>
 
-<th width={width?.toString() ?? ''} class="table-thead-col">
-    <span class="text">
+<div style={`width: ${width?.toString() + 'px' ?? ''}`} class="table-thead-col" role="columnheader">
+    <span class="eyebrow-heading-3">
         <slot />
     </span>
-</th>
-
-<style>
-    th {
-        text-transform: uppercase;
-    }
-</style>
+</div>

src/lib/elements/table/cellLink.svelte

@@ -3,6 +3,6 @@
     export let title: string;
 </script>
 
-<td class="table-col is-main" data-title={title}>
+<div class="table-col is-main" data-title={title} role="cell">
     <a role="button" tabindex="0" class="link" {href}><slot /></a>
-</td>
+</div>

src/lib/elements/table/cellText.svelte

@@ -2,6 +2,6 @@
     export let title: string;
 </script>
 
-<td class="table-col is-main" data-title={title}>
+<div class="table-col is-main" data-title={title} role="cell">
     <span class="text"><slot /></span>
-</td>
+</div>

src/lib/elements/table/header.svelte

@@ -1,5 +1,5 @@
-<thead class="table-thead">
-    <tr class="table-row">
+<div class="table-thead" role="rowheader">
+    <div class="table-row" role="row">
         <slot />
-    </tr>
-</thead>
+    </div>
+</div>

src/lib/elements/table/row.svelte

@@ -1,3 +1,3 @@
-<tr class="table-row">
+<div class="table-row" role="row">
     <slot />
-</tr>
+</div>

src/lib/elements/table/rowLink.svelte

@@ -5,17 +5,3 @@
 <a class="table-row" role="row" {href}>
     <slot />
 </a>
-
-<style>
-    a.table-row {
-        display: table-row;
-
-        /** JUST FOR DEMONSTRATION */
-        opacity: 0.75;
-    }
-
-    a.table-row:hover {
-        /** JUST FOR DEMONSTRATION */
-        opacity: 1;
-    }
-</style>

src/lib/elements/table/table.svelte

@@ -1,3 +1,3 @@
-<table class="table is-vertical u-margin-block-start-32 ">
+<div class="table is-vertical u-margin-block-start-32" role="table">
     <slot />
-</table>
+</div>

src/routes/console/[project]/users/index.svelte

@@ -69,9 +69,9 @@
                 {#each $usersList.response.users as user}
                     <TableRowLink href={`${base}/console/${project}/users/user/${user.$id}`}>
                         <TableCellText title="Name">
-                            <div class="u-flex u-gap-12">
+                            <div class="u-flex u-gap-12 u-cross-center">
                                 <Avatar size={40} src={getAvatar(user.name)} name={user.name} />
-                                <span>{user.name ? user.name : 'n/a'}</span>
+                                <span class="text">{user.name ? user.name : 'n/a'}</span>
                             </div>
                         </TableCellText>
                         <TableCellText title="E-Mail">{user.email}</TableCellText>