@fluid-topics/ftds-table 2.2.2 → 2.2.3

package/build/ftds-table.styles.js

@@ -23,9 +23,6 @@ export const designSystemStyles = css `
         color: ${table.dataRowColor};
         position: relative;
         background-color: ${table.dataRowBackgroundColor};
-        border-bottom: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
-        border-left: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
-        border-right: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
     }
 
     .row:hover.row--has-content {
@@ -41,6 +38,7 @@ export const designSystemStyles = css `
     .row.row--clickable:focus-within {
         background-color: ${table.dataRowClickableFocusBackgroundColor};
         outline: 1px solid ${table.dataRowClickableFocusBorderColor};
+        outline-offset: -1px;
         z-index: 15;
     }
 
@@ -54,7 +52,7 @@ export const designSystemStyles = css `
 
     .header--sticky {
         top: 0;
-        z-index: 2;
+        z-index: 20;
         position: sticky;
     }
 
@@ -65,15 +63,15 @@ export const designSystemStyles = css `
 
     .header-cell--sticky {
         top: 0;
-        z-index: 10;
+        z-index: 30;
         position: sticky;
 
         &:focus-within {
-            z-index: 11;
+            z-index: 31;
         }
 
         &:hover {
-            z-index: 12;
+            z-index: 32;
         }
     }
 
@@ -146,6 +144,21 @@ export const designSystemStyles = css `
         border-right: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
     }
 
+    .row.row--highlighted > .cell,
+    .row.row--clickable:focus-within > .cell {
+        border-bottom-color: ${table.dataRowClickableFocusBorderColor};
+    }
+
+    .row.row--highlighted > .cell:first-of-type,
+    .row.row--clickable:focus-within > .cell:first-of-type {
+        border-left-color: ${table.dataRowClickableFocusBorderColor};
+    }
+
+    .row.row--highlighted > .cell:last-of-type,
+    .row.row--clickable:focus-within > .cell:last-of-type {
+        border-right-color: ${table.dataRowClickableFocusBorderColor};
+    }
+
     .no-content svg {
         margin-bottom: 24px;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ftds-table",
-    "version": "2.2.2",
+    "version": "2.2.3",
     "description": "The design system table component",
     "keywords": [
         "Lit"
@@ -20,15 +20,15 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "3.8.0",
-        "@fluid-topics/ft-assets": "2.2.2",
-        "@fluid-topics/ft-wc-utils": "2.2.2",
-        "@fluid-topics/ftds-button": "2.2.2",
-        "@fluid-topics/ftds-icon": "2.2.2",
-        "@fluid-topics/ftds-typography": "2.2.2",
+        "@fluid-topics/ft-assets": "2.2.3",
+        "@fluid-topics/ft-wc-utils": "2.2.3",
+        "@fluid-topics/ftds-button": "2.2.3",
+        "@fluid-topics/ftds-icon": "2.2.3",
+        "@fluid-topics/ftds-typography": "2.2.3",
         "lit": "3.3.3"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "2.2.2"
+        "@fluid-topics/ft-wc-test-utils": "2.2.3"
     },
-    "gitHead": "b4be5c398b242bdc7d902866c353cf92cc1f72c7"
+    "gitHead": "603c5f149b429fc2fccae0a48bd1696c775c9657"
 }