From 4de75e0f305b2cb4a026073440f2bac7c34df817 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 25 Jun 2024 17:39:03 +0200
Subject: Focus indicator style

---
 src/.old/objects/_table.scss | 167 -------------------------------------------
 src/.old/scopes/_tables.scss | 114 -----------------------------
 src/_base.scss               |   1 +
 src/_config.scss             |  89 +++++++++--------------
 src/_declare-vars.scss       |  19 ++++-
 src/_objects.scss            |   2 +-
 src/_scopes.scss             |   2 +-
 src/objects/_badge.scss      |  48 +++++++------
 src/objects/_button.scss     |  47 +++++++-----
 src/objects/_checkbox.scss   |  74 +++++++++----------
 src/objects/_radio.scss      |  62 ++++++++--------
 src/objects/_switch.scss     |  67 +++++++----------
 src/objects/_table.scss      | 167 +++++++++++++++++++++++++++++++++++++++++++
 src/objects/_text-field.scss |   8 +--
 src/scopes/_links.scss       |  33 +++++----
 src/scopes/_tables.scss      | 115 +++++++++++++++++++++++++++++
 16 files changed, 502 insertions(+), 513 deletions(-)
 delete mode 100644 src/.old/objects/_table.scss
 delete mode 100644 src/.old/scopes/_tables.scss
 create mode 100644 src/objects/_table.scss
 create mode 100644 src/scopes/_tables.scss

(limited to 'src')

diff --git a/src/.old/objects/_table.scss b/src/.old/objects/_table.scss
deleted file mode 100644
index 34512cb..0000000
--- a/src/.old/objects/_table.scss
+++ /dev/null
@@ -1,167 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
-
-@include iro.props-namespace('table') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x:    fn.global-dim(--size --175),
-            --pad-y:    fn.global-dim(--size --125),
-            --rounding: 3px,
-            --50: (
-                --pad-y: fn.global-dim(--size --75),
-            )
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border:  fn.global-color(--obj),
-            --heading: fn.global-color(--fg-hi),
-            --hover:   fn.global-color(--obj-hi),
-            --press:   fn.global-color(--obj),
-            --box: (
-                --bg:    fn.global-color(--bg-hi2),
-                --hover: fn.global-color(--bg),
-                --press: fn.global-color(--obj-hi),
-            )
-        )
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        border-spacing:  0;
-        border-collapse: separate;
-
-        @include iro.bem-modifier('fixed') {
-            table-layout: fixed;
-        }
-
-        @include iro.bem-elem('head-cell') {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --50),
-                --weight:      500,
-                --transform:   uppercase,
-                --spacing:     .5px
-            ));
-
-            padding:    fn.dim(--pad-y) fn.dim(--pad-x);
-            color:      fn.color(--heading);
-            text-align: left;
-        }
-
-        @include iro.bem-elem('cell') {
-            padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-            border-width:     1px 0 0;
-            border-style:     solid;
-            border-color:     fn.color(--border);
-
-            @include iro.bem-modifier('divider') {
-                border-right-width: 1px;
-            }
-        }
-
-        @include iro.bem-elem('row') {
-            &:last-child {
-                @include iro.bem-elem('cell') {
-                    border-bottom-width: 1px;
-                }
-            }
-        }
-
-        @include iro.bem-modifier('flush') {
-            @include iro.bem-elem('head-cell', 'cell') {
-                &:first-child {
-                    padding-left: 0;
-                }
-
-                &:last-child {
-                    padding-right: 0;
-                }
-            }
-        }
-
-        @include iro.bem-modifier('box') {
-            @include iro.bem-elem('cell') {
-                background-color: fn.color(--box --bg);
-            
-                &:first-child {
-                    border-left-width: 1px;
-                }
-            
-                &:last-child {
-                    border-right-width: 1px;
-                }
-            }
-    
-            @include iro.bem-elem('row') {
-                &:first-child {
-                    @include iro.bem-elem('cell') {
-                        &:first-child {
-                            border-top-left-radius: fn.dim(--rounding);
-                        }
-            
-                        &:last-child {
-                            border-top-right-radius: fn.dim(--rounding);
-                        }
-                    }
-                }
-    
-                &:last-child {
-                    @include iro.bem-elem('cell') {
-                        &:first-child {
-                            border-bottom-left-radius: fn.dim(--rounding);
-                        }
-            
-                        &:last-child {
-                            border-bottom-right-radius: fn.dim(--rounding);
-                        }
-                    }
-                }
-            }
-        }
-
-        @include iro.bem-modifier('interactive') {
-            @include iro.bem-elem('row') {
-                @include iro.bem-elem('cell') {
-                    cursor: pointer;
-                }
-
-                &:hover {
-                    @include iro.bem-elem('cell') {
-                        background-color: fn.color(--hover);
-                    }
-                }
-    
-                &:active {
-                    @include iro.bem-elem('cell') {
-                        background-color: fn.color(--press);
-                    }
-                }
-            }
-
-            @include iro.bem-modifier('box') {
-                @include iro.bem-elem('row') {
-                    &:hover {
-                        @include iro.bem-elem('cell') {
-                            background-color: fn.color(--box --hover);
-                        }
-                    }
-        
-                    &:active {
-                        @include iro.bem-elem('cell') {
-                            background-color: fn.color(--box --press);
-                        }
-                    }
-                }
-            }
-        }
-
-        @include iro.bem-modifier('50') {
-            @include iro.bem-elem('head-cell', 'cell') {
-                padding-top:    fn.dim(--50 --pad-y);
-                padding-bottom: fn.dim(--50 --pad-y);
-            }
-        }
-    }
-}
diff --git a/src/.old/scopes/_tables.scss b/src/.old/scopes/_tables.scss
deleted file mode 100644
index f78e81b..0000000
--- a/src/.old/scopes/_tables.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
-
-@include iro.props-namespace('tables') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x:      fn.global-dim(--size --175),
-            --pad-y:      fn.global-dim(--size --125),
-            --rounding:   3px,
-            --margin-top: fn.global-dim(--paragraph --margin-top),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --border:  fn.global-color(--obj),
-            --heading: fn.global-color(--fg-hi),
-            --box: (
-                --bg: fn.global-color(--bg-hi2),
-            )
-        )
-    ), 'colors');
-
-    @include iro.bem-scope(iro.props-namespace()) {
-        table {
-            margin-top:      fn.dim(--margin-top);
-            border-spacing:  0;
-            border-collapse: separate;
-        }
-
-        th {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --50),
-                --weight:      500,
-                --transform:   uppercase,
-                --spacing:     .5px
-            ));
-
-            padding:    fn.dim(--pad-y) fn.dim(--pad-x);
-            color:      fn.color(--heading);
-            text-align: left;
-        }
-
-        td {
-            padding:          fn.dim(--pad-y) fn.dim(--pad-x);
-            border-width:     1px 0 0;
-            border-style:     solid;
-            border-color:     fn.color(--border);
-        }
-
-        tr {
-            &:last-child {
-                td {
-                    border-bottom-width: 1px;
-                }
-            }
-        }
-
-        @include iro.bem-modifier('flush') {
-            th,
-            td {
-                &:first-child {
-                    padding-left: 0;
-                }
-
-                &:last-child {
-                    padding-right: 0;
-                }
-            }
-        }
-
-        @include iro.bem-modifier('box') {
-            td {
-                background-color: fn.color(--box --bg);
-            
-                &:first-child {
-                    border-left-width: 1px;
-                }
-            
-                &:last-child {
-                    border-right-width: 1px;
-                }
-            }
-    
-            tr {
-                &:first-child {
-                    td {
-                        &:first-child {
-                            border-top-left-radius: fn.dim(--rounding);
-                        }
-            
-                        &:last-child {
-                            border-top-right-radius: fn.dim(--rounding);
-                        }
-                    }
-                }
-    
-                &:last-child {
-                    td {
-                        &:first-child {
-                            border-bottom-left-radius: fn.dim(--rounding);
-                        }
-            
-                        &:last-child {
-                            border-bottom-right-radius: fn.dim(--rounding);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/_base.scss b/src/_base.scss
index f55e94b..ce1198d 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -6,6 +6,7 @@
 
 html {
     scrollbar-color: fn.color(--text-disabled) transparent;
+    accent-color:    fn.color(--accent --600);
 }
 
 html,
diff --git a/src/_config.scss b/src/_config.scss
index fd338a9..da97476 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -117,34 +117,6 @@ $theme-light: (
         --green:  oklch(56% 0.16 150.48) --colors --muted,
         --yellow: oklch(56% 0.16 84.08)  --colors --muted,
     ),
-
-    --semantic: (
-        --accent:          --blue,
-        --accent-static:   --blue-static,
-        --positive:        --green,
-        --positive-static: --green-static,
-        --negative:        --red,
-        --negative-static: --red-static,
-        --warning:         --yellow,
-        --warning-static:  --yellow-static,
-
-        --focus:           --yellow,
-        --focus-static:    --yellow-static,
-
-        --bg-l2:           --base --50,
-        --bg-l1:           --base --100,
-        --bg-base:         --base --200,
- 
-        --border-mute:     --base --200,
-        --border:          --base --300,
-        --border-strong:   --base --400,
- 
-        --text-disabled:   --base --500,
-        --text-mute-more:  --base --600,
-        --text-mute:       --base --700,
-        --text:            --base --800,
-        --heading:         --base --900,
-    ),
 ) !default;
 
 $theme-dark: (
@@ -195,33 +167,42 @@ $theme-dark: (
         --green:  oklch(56% 0.16 150.48) --colors --muted,
         --yellow: oklch(56% 0.16 84.08)  --colors --muted,
     ),
+) !default;
 
-    --semantic: (
-        --accent:          --blue,
-        --accent-static:   --blue-static,
-        --positive:        --green,
-        --positive-static: --green-static,
-        --negative:        --red,
-        --negative-static: --red-static,
-        --warning:         --yellow,
-        --warning-static:  --yellow-static,
-
-        --focus:           --yellow,
-        --focus-static:    --yellow-static,
-
-        --bg-base:         --base --50,
-        --bg-l1:           --base --75,
-        --bg-l2:           --base --100,
- 
-        --border-mute:     --base --200,
-        --border:          --base --300,
-        --border-strong:   --base --400,
- 
-        --text-disabled:   --base --500,
-        --text-mute-more:  --base --600,
-        --text-mute:       --base --700,
-        --text:            --base --800,
-        --heading:         --base --900,
+$semantic-colors: (
+    --accent:          --blue,
+    --accent-static:   --blue-static,
+    --positive:        --green,
+    --positive-static: --green-static,
+    --negative:        --red,
+    --negative-static: --red-static,
+    --warning:         --yellow,
+    --warning-static:  --yellow-static,
+
+    --focus-raw:       --accent,
+    --focus-static:    --accent-static,
+
+    --bg-l2:           --base --50,
+    --bg-l1:           --base --100,
+    --bg-base:         --base --200,
+
+    --border-mute:     --base --200,
+    --border:          --base --300,
+    --border-strong:   --base --400,
+
+    --text-disabled:   --base --500,
+    --text-mute-more:  --base --600,
+    --text-mute:       --base --700,
+    --text:            --base --800,
+    --heading:         --base --900,
+
+    --focus: (
+        --outline:       --focus-raw --400,
+        --border-mute:   --focus-raw --900,
+        --border:        --focus-raw --1000,
+        --border-text:   --focus-raw --1000-text,
+        --border-strong: --focus-raw --1100,
+        --text:          --focus-raw --1100,
     ),
 ) !default;
 
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 91c4bea..f657057 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use 'sass:list';
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
@@ -103,7 +104,9 @@
         --rounding:   4px,
 
         --key-focus: (
-            --border: 4px,
+            --outline:       fn.dim(--border --thick, null),
+            --border:        fn.dim(--border --medium, null),
+            --border-offset: fn.dim(--border --medium, null),
         ),
 
         --paragraph: (
@@ -224,10 +227,20 @@
         ), $tree);
     }
 
-    @each $color, $ref in map.get($theme, --semantic) {
+    @each $color, $ref in config.$semantic-colors {
+        $res: ();
+
+        @if meta.type-of($ref) == 'map' {
+            @each $key, $r in $ref {
+                $res: map.set($res, $key, fn.color($r));
+            }
+        } @else {
+            $res: fn.color($ref);
+        }
+
         @include iro.props-store((
             --colors: (
-                $color: fn.color($ref),
+                $color: $res,
             ),
         ), $tree);
     }    
diff --git a/src/_objects.scss b/src/_objects.scss
index 3d5024c..525e31a 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -21,6 +21,6 @@
 // @use 'objects/dialog';
 // @use 'objects/lightbox';
 // @use 'objects/list-group';
-// @use 'objects/table';
+@use 'objects/table';
 // @use 'objects/alert';
 @use 'objects/palette';
diff --git a/src/_scopes.scss b/src/_scopes.scss
index 6df12e1..a3aeb6c 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -3,4 +3,4 @@
 @use 'scopes/blockquotes';
 @use 'scopes/lists';
 @use 'scopes/headings';
-// @use 'scopes/tables';
+@use 'scopes/tables';
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index b9020b6..cc7e500 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -12,7 +12,8 @@ $static-themes: 'black' 'white' !default;
     &:link,
     &:visited,
     &:enabled {
-        &:hover {
+        &:hover,
+        &:focus-visible {
             background-color: fn.color(--#{$theme} --hover --bg);
             color:            fn.color(--#{$theme} --hover --label);
         }
@@ -30,7 +31,8 @@ $static-themes: 'black' 'white' !default;
         &:link,
         &:visited,
         &:enabled {
-            &:hover {
+            &:hover,
+            &:focus-visible {
                 background-color: fn.color(--#{$theme}-quiet --hover --bg);
                 color:            fn.color(--#{$theme}-quiet --hover --label);
             }
@@ -47,10 +49,8 @@ $static-themes: 'black' 'white' !default;
         &:visited,
         &:enabled {
             &:focus-visible {
-                border-color:     fn.color(--#{$theme} --key-focus --border);
-                outline:          fn.color(--#{$theme} --key-focus --outline) solid fn.dim(--key-focus --outline);
-                background-color: fn.color(--#{$theme} --key-focus --bg);
-                color:            fn.color(--#{$theme} --key-focus --label);
+                outline:    fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
+                box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
             }
         }
     }
@@ -85,8 +85,9 @@ $static-themes: 'black' 'white' !default;
             ),
             
             --key-focus: (
-                --border:  fn.global-dim(--border --medium),
-                --outline: fn.global-dim(--key-focus --border),
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
             ),
         ),
         --colors: (
@@ -99,10 +100,9 @@ $static-themes: 'black' 'white' !default;
                 --bg: fn.global-color(--heading),
             ),
             --key-focus: (
-                --bg:      fn.global-color(--base --50),
-                --label:   fn.global-color(--heading),
-                --border:  fn.global-color(--focus --1100),
-                --outline: fn.global-color(--focus --400),
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
             ),
 
             --quiet: (
@@ -190,11 +190,13 @@ $static-themes: 'black' 'white' !default;
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
-        padding-block:    calc(fn.dim(--pad-b) - fn.dim(--key-focus --border));
-        padding-inline:   calc(fn.dim(--pad-i) - fn.dim(--key-focus --border));
+        margin:           calc(-1 * fn.dim(--key-focus --border));
+        padding-block:    fn.dim(--pad-b);
+        padding-inline:   fn.dim(--pad-i);
         border:           fn.dim(--key-focus --border) solid transparent;
-        border-radius:    fn.dim(--rounding);
+        border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
         background-color: fn.color(--bg);
+        background-clip:  padding-box;
         color:            fn.color(--label);
         font-size:        fn.dim(--font-size);
         line-height:      fn.global-dim(--font --standard --line-height);
@@ -204,7 +206,8 @@ $static-themes: 'black' 'white' !default;
         &:link,
         &:visited,
         &:enabled {
-            &:hover {
+            &:hover,
+            &:focus-visible {
                 background-color: fn.color(--hover --bg);
             }
 
@@ -220,7 +223,8 @@ $static-themes: 'black' 'white' !default;
             &:link,
             &:visited,
             &:enabled {
-                &:hover {
+                &:hover,
+                &:focus-visible {
                     background-color: fn.color(--quiet --hover --bg);
                 }
 
@@ -240,10 +244,8 @@ $static-themes: 'black' 'white' !default;
         &:visited,
         &:enabled {
             &:focus-visible {
-                border-color:     fn.color(--key-focus --border);
-                outline:          fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline);
-                background-color: fn.color(--key-focus --bg);
-                color:            fn.color(--key-focus --label);
+                outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
             }
         }
     
@@ -260,8 +262,8 @@ $static-themes: 'black' 'white' !default;
     
         @each $size in sm lg xl {
             @include iro.bem-modifier($size) {
-                padding-block:  calc(fn.dim(--#{$size} --pad-b) - fn.dim(--key-focus --border));
-                padding-inline: calc(fn.dim(--#{$size} --pad-i) - fn.dim(--key-focus --border));
+                padding-block:  fn.dim(--#{$size} --pad-b);
+                padding-inline: fn.dim(--#{$size} --pad-i);
                 font-size:      fn.dim(--#{$size} --font-size);
         
                 @include iro.bem-modifier('pill') {
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 08dc0ea..49f3f67 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -29,7 +29,8 @@ $static-themes: 'black' 'white' !default;
     &:link,
     &:visited,
     &:enabled {
-        &:hover {
+        &:hover,
+        &:focus-visible {
             border-color:     transparent;
             background-color: fn.color(list.join($key, --hover --bg));
             color:            fn.color(list.join($key, --hover --label));
@@ -58,15 +59,9 @@ $static-themes: 'black' 'white' !default;
 
     @include theme(static-#{$theme});
 
-    &:link,
-    &:visited,
-    &:enabled {
-        &:focus-visible {
-            border-color:     fn.color(list.join($key, --key-focus --border));
-            outline:          fn.color(list.join($key, --key-focus --outline)) solid fn.dim(--key-focus --outline);
-            background-color: fn.color(list.join($key, --key-focus --bg));
-            color:            fn.color(list.join($key, --key-focus --label));
-        }
+    &::after {
+        outline:    fn.color(list.join($key, --key-focus --border)) solid fn.dim(--key-focus --border);
+        box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($key, --key-focus --outline));
     }
 }
 
@@ -97,7 +92,9 @@ $static-themes: 'black' 'white' !default;
             ),
             
             --key-focus: (
-                --outline: fn.global-dim(--key-focus --border),
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
             ),
         ),
         --colors: (
@@ -120,10 +117,9 @@ $static-themes: 'black' 'white' !default;
                 --label:          fn.global-color(--text-disabled),
             ),
             --key-focus: (
-                --bg:      fn.global-color(--base --50),
-                --label:   fn.global-color(--heading),
-                --border:  fn.global-color(--focus --1100),
-                --outline: fn.global-color(--focus --400),
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
             ),
             
             --primary: (
@@ -216,6 +212,7 @@ $static-themes: 'black' 'white' !default;
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
+        position:         relative;
         padding-block:    fn.dim(--pad-b);
         padding-inline:   fn.dim(--pad-i);
         border:           fn.dim(--border) solid transparent;
@@ -228,6 +225,19 @@ $static-themes: 'black' 'white' !default;
         line-height:      fn.dim(--line-height);
         text-align:       center;
         text-decoration:  none;
+
+        &::after {
+            content:        '';
+            display:        none;
+            position:       absolute;
+            z-index:        1;
+            inset-block:    calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
+            inset-inline:   calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
+            border-radius:  fn.dim(--rounding);
+            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            pointer-events: none;
+        }
     
         @include iro.bem-modifier('block') {
             display: block;
@@ -263,10 +273,9 @@ $static-themes: 'black' 'white' !default;
         &:visited,
         &:enabled {
             &:focus-visible {
-                border-color:     fn.color(--key-focus --border);
-                outline:          fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline);
-                background-color: fn.color(--key-focus --bg);
-                color:            fn.color(--key-focus --label);
+                &::after {
+                    display: block;
+                }
             }
         }
     
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index a254ec4..509822b 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -11,14 +11,20 @@
             --pad-b:           fn.global-dim(--size --65),
             --rounding:        fn.global-dim(--rounding),
             --spacing-sibling: fn.global-dim(--size --300),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --border),
+            ),
         ),
         --colors: (
-            --box-border: fn.global-color(--text-mute),
+            --box-border: fn.global-color(--text-mute-more),
             --box-bg:     fn.global-color(--base --75),
     
             --hover: (
                 --label:      fn.global-color(--heading),
-                --box-border: fn.global-color(--text),
+                --box-border: fn.global-color(--text-mute),
             ),
             --accent: (
                 --box-border: fn.global-color(--accent --900),
@@ -27,37 +33,40 @@
                     --box-border: fn.global-color(--accent --1000),
                 ),
             ),
-            --key-focus: (
-                --bg:         fn.global-color(--focus-static --400),
-                --label:      fn.global-color(--focus-static --400-text),
-                --box-border: fn.global-color(--focus-static --1000),
-                --box-bg:     fn.global-color(--focus-static --1000-text),
-            ),
             --disabled: (
                 --label:      fn.global-color(--text-disabled),
                 --box-border: fn.global-color(--border-strong),
                 --box-bg:     fn.global-color(--base --75),
-            )
+            ),
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
         ),
     ));
 
     @include iro.bem-object(iro.props-namespace()) {
-        display:        inline-flex;
+        display:        inline-block;
         position:       relative;
-        align-items:    flex-start;
-        margin-inline:  calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b));
+        margin-inline:
+            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
+            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset));
         padding-block:  fn.dim(--pad-b);
         padding-inline: fn.dim(--pad-i);
 
         @include iro.bem-elem('box') {
-            display:            block;
+            display:            inline-block;
             position:           relative;
             flex:               0 0 auto;
             inline-size:        fn.dim(--size);
             block-size:         fn.dim(--size);
-            margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
-            border-radius:      fn.dim(--border);
+            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset));
+            border:             fn.dim(--key-focus --border-offset) solid transparent;
+            border-radius:      calc(fn.dim(--border) + fn.dim(--key-focus --border-offset));
             background-color:   fn.color(--box-border);
+            background-clip:    padding-box;
+            vertical-align:     top;
     
             &::before,
             &::after {
@@ -110,8 +119,7 @@
         }
     
         @include iro.bem-elem('label') {
-            align-self:  baseline;
-            margin-left: fn.dim(--label-gap);
+            margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
         }
     
         @include iro.bem-elem('native') {
@@ -127,7 +135,8 @@
             overflow:           hidden;
             border-radius:      fn.dim(--rounding);
     
-            &:hover {
+            &:hover,
+            &:focus-visible {
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--hover --label);
                 }
@@ -180,26 +189,13 @@
             }
     
             &:focus-visible {
-                background-color: fn.color(--key-focus --bg);
-
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--key-focus --label);
                 }
 
                 @include iro.bem-sibling-elem('box') {
-                    background-color: fn.color(--key-focus --box-border);
-
-                    &::before {
-                        background-color: fn.color(--key-focus --box-bg);
-                    }
-
-                    &::after {
-                        border-color: fn.color(--key-focus --box-bg);
-                    }
-
-                    @include iro.bem-elem('check-icon') {
-                        color: fn.color(--key-focus --box-bg);
-                    }
+                    outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                    box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
                 }
             }
         }
@@ -217,7 +213,8 @@
                         background-color: fn.color(--accent --box-border);
                     }
         
-                    &:hover {
+                    &:hover,
+                    &:focus-visible {
                         @include iro.bem-sibling-elem('box') {
                             background-color: fn.color(--accent --hover --box-border);
                         }
@@ -229,7 +226,8 @@
                         background-color: fn.color(--accent --box-border);
                     }
         
-                    &:hover {
+                    &:hover,
+                    &:focus-visible {
                         @include iro.bem-sibling-elem('box') {
                             background-color: fn.color(--accent --hover --box-border);
                         }
@@ -257,12 +255,6 @@
                         }
                     }
                 }
-
-                &:focus-visible {
-                    @include iro.bem-sibling-elem('box') {
-                        background-color: fn.color(--key-focus --box-border);
-                    }
-                }
             }
         }
     }
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 12dc6ca..7ade7e1 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -11,14 +11,20 @@
             --pad-b:           fn.global-dim(--size --65),
             --rounding:        fn.global-dim(--rounding),
             --spacing-sibling: fn.global-dim(--size --300),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --border),
+            ),
         ),
         --colors: (
-            --circle-border: fn.global-color(--text-mute),
+            --circle-border: fn.global-color(--text-mute-more),
             --circle-bg:     fn.global-color(--base --75),
     
             --hover: (
                 --label:         fn.global-color(--heading),
-                --circle-border: fn.global-color(--text),
+                --circle-border: fn.global-color(--text-mute),
             ),
             --accent: (
                 --circle-border: fn.global-color(--accent --900),
@@ -27,37 +33,39 @@
                     --circle-border: fn.global-color(--accent --1000),
                 ),
             ),
-            --key-focus: (
-                --bg:            fn.global-color(--focus-static --400),
-                --label:         fn.global-color(--focus-static --400-text),
-                --circle-border: fn.global-color(--focus-static --1000),
-                --circle-bg:     fn.global-color(--focus-static --1000-text),
-            ),
             --disabled: (
                 --label:         fn.global-color(--text-disabled),
                 --circle-border: fn.global-color(--border-strong),
                 --circle-bg:     fn.global-color(--base --75),
-            )
+            ),
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
         ),
     ));
 
     @include iro.bem-object(iro.props-namespace()) {
-        display:        inline-flex;
+        display:        inline-block;
         position:       relative;
-        align-items:    flex-start;
-        margin-inline:  calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i));
+        margin-inline:
+            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
+            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
         padding-block:  fn.dim(--pad-b);
         padding-inline: fn.dim(--pad-i);
     
         @include iro.bem-elem('circle') {
-            display:            block;
-            box-sizing:         border-box;
+            display:            inline-block;
             flex:               0 0 auto;
             inline-size:        fn.dim(--diameter);
             block-size:         fn.dim(--diameter);
-            margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter)));
+            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset));
+            border:             fn.dim(--key-focus --border-offset) solid transparent;
             border-radius:      2em;
             background-color:   fn.color(--circle-border);
+            background-clip:    padding-box;
+            vertical-align:     top;
     
             &::after {
                 content:            '';
@@ -74,8 +82,7 @@
         }
     
         @include iro.bem-elem('label') {
-            align-self:          baseline;
-            margin-inline-start: fn.dim(--label-gap);
+            margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
         }
     
         @include iro.bem-elem('native') {
@@ -91,7 +98,8 @@
             overflow:           hidden;
             border-radius:      fn.dim(--rounding);
     
-            &:hover {
+            &:hover,
+            &:focus-visible {
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--hover --label);
                 }
@@ -124,18 +132,13 @@
             }
 
             &:focus-visible {
-                background-color: fn.color(--key-focus --bg);
-
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--key-focus --label);
                 }
 
                 @include iro.bem-sibling-elem('circle') {
-                    background-color: fn.color(--key-focus --circle-border);
-
-                    &::after {
-                        background-color: fn.color(--key-focus --circle-bg);
-                    }
+                    outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                    box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
                 }
             }
         }
@@ -153,7 +156,8 @@
                         background-color: fn.color(--accent --circle-border);
                     }
         
-                    &:hover {
+                    &:hover,
+                    &:focus-visible {
                         @include iro.bem-sibling-elem('circle') {
                             background-color: fn.color(--accent --hover --circle-border);
                         }
@@ -175,12 +179,6 @@
                         }
                     }
                 }
-
-                &:focus-visible {
-                    @include iro.bem-sibling-elem('circle') {
-                        background-color: fn.color(--key-focus --circle-border);
-                    }
-                }
             }
         }
     }
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 9ebb290..a67aa8d 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -12,6 +12,12 @@
             --pad-b:           fn.global-dim(--size --65),
             --rounding:        fn.global-dim(--rounding),
             --spacing-sibling: fn.global-dim(--size --300),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --border),
+            ),
         ),
         --colors: (
             --track-bg:      fn.global-color(--border),
@@ -36,33 +42,34 @@
                 --handle-bg:     fn.global-color(--base --50),
             ),
             --key-focus: (
-                --bg:            fn.global-color(--focus-static --400),
-                --label:         fn.global-color(--focus-static --400-text),
-                --track-bg:      fn.global-color(--focus-static --700),
-                --handle-border: fn.global-color(--focus-static --1000),
-                --handle-bg:     fn.global-color(--focus-static --1000-text),
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
             ),
         ),
     ));
 
     @include iro.bem-object(iro.props-namespace()) {
-        display:        inline-flex;
+        display:        inline-block;
         position:       relative;
-        align-items:    flex-start;
-        margin-inline:  calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i));
+        margin-inline:
+            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
+            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
         padding-inline: fn.dim(--pad-i);
         padding-block:  fn.dim(--pad-b);
     
         @include iro.bem-elem('indicator') {
-            display:            block;
-            box-sizing:         border-box;
+            display:            inline-block;
             flex:               0 0 auto;
             inline-size:        fn.dim(--width);
             block-size:         fn.dim(--height);
-            margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height)));
+            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset));
             transition:         background-color .2s ease;
+            border:             fn.dim(--key-focus --border-offset) solid transparent;
             border-radius:      2em;
             background-color:   fn.color(--track-bg);
+            background-clip:    padding-box;
+            vertical-align:     top;
     
             &::after {
                 content:          '';
@@ -77,7 +84,6 @@
         }
     
         @include iro.bem-elem('label') {
-            align-self:          baseline;
             margin-inline-start: fn.dim(--label-gap);
         }
     
@@ -94,7 +100,8 @@
             overflow:           hidden;
             border-radius:      fn.dim(--rounding);
     
-            &:hover {
+            &:hover,
+            &:focus-visible {
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--hover --label);
                 }
@@ -116,7 +123,8 @@
                     }
                 }
     
-                &:hover {
+                &:hover,
+                &:focus-visible {
                     @include iro.bem-sibling-elem('indicator') {
                         background-color: fn.color(--hover --handle-border);
 
@@ -153,25 +161,13 @@
             }
     
             &:focus-visible {
-                background-color: fn.color(--key-focus --bg);
-
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--key-focus --label);
                 }
 
                 @include iro.bem-sibling-elem('indicator') {
-                    background-color: fn.color(--key-focus --track-bg);
-
-                    &::after {
-                        border-color:     fn.color(--key-focus --handle-border);
-                        background-color: fn.color(--key-focus --handle-bg);
-                    }
-                }
-
-                &:checked {
-                    @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--key-focus --handle-border);
-                    }
+                    outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                    box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
                 }
             }
         }
@@ -193,7 +189,8 @@
                         }
                     }
         
-                    &:hover {
+                    &:hover,
+                    &:focus-visible {
                         @include iro.bem-sibling-elem('indicator') {
                             background-color: fn.color(--accent --hover --handle-border);
     
@@ -219,18 +216,6 @@
                         }
                     }
                 }
-
-                &:focus-visible {
-                    &:checked {
-                        @include iro.bem-sibling-elem('indicator') {
-                            background-color: fn.color(--key-focus --handle-border);
-
-                            &::after {
-                                border-color: fn.color(--key-focus --handle-border);
-                            }
-                        }
-                    }
-                }
             }
         }
     }
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
new file mode 100644
index 0000000..cccf956
--- /dev/null
+++ b/src/objects/_table.scss
@@ -0,0 +1,167 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+@use '../mixins' as mx;
+
+@include iro.props-namespace('table') {
+    @include iro.props-store((
+        --dims: (
+            --pad-i:    fn.global-dim(--size --175),
+            --pad-b:    fn.global-dim(--size --125),
+            --rounding: fn.global-dim(--rounding),
+            --border:   fn.global-dim(--border --thin),
+            --50: (
+                --pad-b: fn.global-dim(--size --75),
+            )
+        ),
+        --colors: (
+            --border:  fn.global-color(--border),
+            --heading: fn.global-color(--heading),
+            --hover:   fn.global-color(--border-mute),
+            --press:   fn.global-color(--border),
+            --box: (
+                --bg:    fn.global-color(--base --50),
+                --hover: fn.global-color(--bg-base),
+                --press: fn.global-color(--border-mute),
+            )
+        )
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        border-spacing:  0;
+        border-collapse: separate;
+
+        @include iro.bem-modifier('fixed') {
+            table-layout: fixed;
+        }
+
+        @include iro.bem-elem('head-cell') {
+            @include mx.set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(--font-size --50),
+                --weight:      bold,
+                --transform:   uppercase,
+                --spacing:     .5px
+            ));
+
+            padding-inline: fn.dim(--pad-i);
+            padding-block:  fn.dim(--pad-b);
+            color:          fn.color(--heading);
+            text-align:     left;
+        }
+
+        @include iro.bem-elem('cell') {
+            padding-inline:           fn.dim(--pad-i);
+            padding-block:            fn.dim(--pad-b);
+            border-width:             0;
+            border-block-start-width: fn.dim(--border);
+            border-style:             solid;
+            border-color:             fn.color(--border);
+
+            @include iro.bem-modifier('divider') {
+                border-inline-end-width: fn.dim(--border);
+            }
+        }
+
+        @include iro.bem-elem('row') {
+            &:last-child {
+                @include iro.bem-elem('cell') {
+                    border-block-end-width: fn.dim(--border);
+                }
+            }
+        }
+
+        @include iro.bem-modifier('flush') {
+            @include iro.bem-elem('head-cell', 'cell') {
+                &:first-child {
+                    padding-inline-start: 0;
+                }
+
+                &:last-child {
+                    padding-inline-end: 0;
+                }
+            }
+        }
+
+        @include iro.bem-modifier('box') {
+            @include iro.bem-elem('cell') {
+                background-color: fn.color(--box --bg);
+            
+                &:first-child {
+                    border-inline-start-width: fn.dim(--border);
+                }
+            
+                &:last-child {
+                    border-inline-end-width: fn.dim(--border);
+                }
+            }
+    
+            @include iro.bem-elem('row') {
+                &:first-child {
+                    @include iro.bem-elem('cell') {
+                        &:first-child {
+                            border-start-start-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-start-end-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+    
+                &:last-child {
+                    @include iro.bem-elem('cell') {
+                        &:first-child {
+                            border-end-start-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-end-end-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-modifier('interactive') {
+            @include iro.bem-elem('row') {
+                @include iro.bem-elem('cell') {
+                    cursor: pointer;
+                }
+
+                &:hover {
+                    @include iro.bem-elem('cell') {
+                        background-color: fn.color(--hover);
+                    }
+                }
+    
+                &:active {
+                    @include iro.bem-elem('cell') {
+                        background-color: fn.color(--press);
+                    }
+                }
+            }
+
+            @include iro.bem-modifier('box') {
+                @include iro.bem-elem('row') {
+                    &:hover {
+                        @include iro.bem-elem('cell') {
+                            background-color: fn.color(--box --hover);
+                        }
+                    }
+        
+                    &:active {
+                        @include iro.bem-elem('cell') {
+                            background-color: fn.color(--box --press);
+                        }
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-modifier('50') {
+            @include iro.bem-elem('head-cell', 'cell') {
+                padding-block: fn.dim(--50 --pad-b);
+            }
+        }
+    }
+}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index babec79..6611ea6 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -50,7 +50,7 @@
             ),
             
             --key-focus: (
-                --border: fn.global-dim(--key-focus --border),
+                --border: fn.global-dim(--key-focus --outline),
             ),
         ),
         --colors: (
@@ -63,11 +63,11 @@
                 --border: fn.global-color(--text-mute-more),
             ),
             --focus: (
-                --border: fn.global-color(--focus --1100),
+                --border: fn.global-color(--focus --border),
             ),
             --key-focus: (
-                --border:  fn.global-color(--focus --1100),
-                --outline: fn.global-color(--focus --400),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
             ),
             --error: (
                 --border: fn.global-color(--negative --700),
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 9e0b18a..552b02a 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -9,7 +9,13 @@
 
             --hover: (
                 --underline:     fn.global-dim(--border --medium),
-            )
+            ),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --border),
+            ),
         ),
         --colors: (
             --underline:         fn.global-color(--text-mute-more),
@@ -33,22 +39,24 @@
             ),
 
             --key-focus: (
-                --bg:            fn.global-color(--focus-static --400),
-                --text:          fn.global-color(--focus-static --400-text),
-            )
-        )
+                --text:          fn.global-color(--focus --text),
+                --border:        fn.global-color(--focus --border),
+                --outline:       fn.global-color(--focus --outline),
+            ),
+        ),
     ));
 
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
-            margin:                    calc(-1 * fn.global-dim(--border --thick));
-            padding:                   fn.global-dim(--border --thick);
-            border-radius:             calc(fn.dim(--rounding) + fn.global-dim(--border --thick));
+            margin:                    calc(-1 * fn.dim(--key-focus --border-offset));
+            padding:                   fn.dim(--key-focus --border-offset);
+            border-radius:             fn.dim(--rounding);
             color:                     currentColor;
             text-decoration:           underline;
             text-decoration-color:     fn.color(--underline);
             text-decoration-thickness: fn.dim(--underline);
+            box-decoration-break:      clone;
 
             &:hover {
                 text-decoration:           underline;
@@ -57,11 +65,10 @@
             }
 
             &:focus-visible {
-                background-color:          fn.color(--key-focus --bg);
-                color:                     fn.color(--key-focus --text);
-                text-decoration:           underline;
-                text-decoration-thickness: fn.dim(--hover --underline);
-                text-decoration-skip-ink:  none;
+                outline:          fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                box-shadow:       0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                color:            fn.color(--key-focus --text);
+                text-decoration:  none;
             }
         }
 
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
new file mode 100644
index 0000000..016ed31
--- /dev/null
+++ b/src/scopes/_tables.scss
@@ -0,0 +1,115 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+@use '../mixins' as mx;
+
+@include iro.props-namespace('tables') {
+    @include iro.props-store((
+        --dims: (
+            --pad-i:     fn.foreign-dim(--table, --pad-i),
+            --pad-b:     fn.foreign-dim(--table, --pad-b),
+            --rounding:  fn.foreign-dim(--table, --rounding),
+            --border:    fn.foreign-dim(--table, --border),
+            --margin-bs: fn.global-dim(--paragraph --margin-bs),
+        ),
+        --colors: (
+            --border:  fn.foreign-color(--table, --border),
+            --heading: fn.foreign-color(--table, --heading),
+            --box: (
+                --bg: fn.foreign-color(--table, --box --bg),
+            )
+        )
+    ));
+
+    @include iro.bem-scope(iro.props-namespace()) {
+        table {
+            margin-block-start: fn.dim(--margin-bs);
+            border-spacing:     0;
+            border-collapse:    separate;
+        }
+
+        th {
+            @include mx.set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(--font-size --50),
+                --weight:      bold,
+                --transform:   uppercase,
+                --spacing:     .5px
+            ));
+
+            padding-block:  fn.dim(--pad-b);
+            padding-inline: fn.dim(--pad-i);
+            color:          fn.color(--heading);
+            text-align:     left;
+        }
+
+        td {
+            padding-block:            fn.dim(--pad-b);
+            padding-inline:           fn.dim(--pad-i);
+            border-width:             0;
+            border-block-start-width: fn.dim(--border);
+            border-style:             solid;
+            border-color:             fn.color(--border);
+        }
+
+        tr {
+            &:last-child {
+                td {
+                    border-block-end-width: fn.dim(--border);
+                }
+            }
+        }
+
+        @include iro.bem-modifier('flush') {
+            th,
+            td {
+                &:first-child {
+                    padding-inline-start: 0;
+                }
+
+                &:last-child {
+                    padding-inline-end: 0;
+                }
+            }
+        }
+
+        @include iro.bem-modifier('box') {
+            td {
+                background-color: fn.color(--box --bg);
+            
+                &:first-child {
+                    border-inline-start-width: fn.dim(--border);
+                }
+            
+                &:last-child {
+                    border-inline-end-width: fn.dim(--border);
+                }
+            }
+    
+            tr {
+                &:first-child {
+                    td {
+                        &:first-child {
+                            border-start-start-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-start-end-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+    
+                &:last-child {
+                    td {
+                        &:first-child {
+                            border-end-start-radius: fn.dim(--rounding);
+                        }
+            
+                        &:last-child {
+                            border-end-end-radius: fn.dim(--rounding);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
-- 
cgit v1.2.3-54-g00ecf