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/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 +--
 7 files changed, 313 insertions(+), 160 deletions(-)
 create mode 100644 src/objects/_table.scss

(limited to 'src/objects')

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),
-- 
cgit v1.2.3-70-g09d2