From b566769679473b91d2f63406fba7cc3b44c4fcc1 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 25 Jun 2024 11:11:05 +0200
Subject: Update

---
 src/.old/objects/_switch.scss | 221 ---------------------------------------
 src/_config.scss              |  26 ++---
 src/_objects.scss             |   2 +-
 src/objects/_badge.scss       | 165 +++++++++++++++++++++--------
 src/objects/_button.scss      |  58 +++++++----
 src/objects/_checkbox.scss    |  18 +---
 src/objects/_divider.scss     |   2 +-
 src/objects/_radio.scss       |  18 +---
 src/objects/_switch.scss      | 237 ++++++++++++++++++++++++++++++++++++++++++
 src/objects/_text-field.scss  |  11 +-
 src/scopes/_links.scss        |   8 +-
 tpl/objects/checkbox.pug      |   1 -
 tpl/objects/radio.pug         |   1 -
 tpl/views/badge.pug           |  67 +++---------
 tpl/views/button.pug          |  19 +---
 15 files changed, 447 insertions(+), 407 deletions(-)
 delete mode 100644 src/.old/objects/_switch.scss
 create mode 100644 src/objects/_switch.scss

diff --git a/src/.old/objects/_switch.scss b/src/.old/objects/_switch.scss
deleted file mode 100644
index cbbb9b7..0000000
--- a/src/.old/objects/_switch.scss
+++ /dev/null
@@ -1,221 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('switch') {
-    @include iro.props-store((
-        --dims: (
-            --width:     fn.global-dim(--size --325),
-            --height:    calc(fn.global-dim(--size --175) + 1px),
-            --label-gap: fn.global-dim(--size --125),
-            --border:    fn.global-dim(--border --medium),
-            --pad-x:     fn.global-dim(--size --65),
-            --pad-y:     fn.global-dim(--size --65),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --track-bg:      fn.global-color(--obj),
-            --handle-border: fn.global-color(--fg-hi),
-            --handle-bg:     fn.global-color(--bg-hi),
-    
-            --hover: (
-                --label:         fn.global-color(--fg-lo),
-                --handle-border: fn.global-color(--fg),
-            ),
-            --accent: (
-                --handle-border: fn.global-color(--accent --primary --solid --bg),
-    
-                --hover: (
-                    --handle-border: fn.global-color(--accent --primary --solid --obj),
-                ),
-            ),
-            --key-focus: (
-                --label:         fn.global-color(--focus --text),
-                --track-bg:      fn.global-color(--focus --fill),
-                --handle-border: fn.global-color(--focus --fill),
-                --shadow:        fn.global-color(--focus --shadow),
-            ),
-            --disabled: (
-                --label:         fn.global-color(--fg-hi3),
-                --track-bg:      fn.global-color(--obj),
-                --handle-border: fn.global-color(--obj-lo),
-                --handle-bg:     fn.global-color(--bg-hi),
-            )
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:      inline-flex;
-        position:     relative;
-        align-items:  flex-start;
-        margin-right: calc(-1 * fn.dim(--pad-x));
-        margin-left:  calc(-1 * fn.dim(--pad-x));
-        padding:      fn.dim(--pad-y) fn.dim(--pad-x);
-    
-        @include iro.bem-elem('indicator') {
-            display:          block;
-            box-sizing:       border-box;
-            flex:             0 0 auto;
-            width:            fn.dim(--width);
-            height:           fn.dim(--height);
-            margin-top:       calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height)));
-            transition:       background-color .2s ease;
-            border-radius:    2em;
-            background-color: fn.color(--track-bg);
-    
-            &::after {
-                content:          '';
-                display:          block;
-                width:            calc(fn.dim(--height) - 2 * fn.dim(--border));
-                height:           calc(fn.dim(--height) - 2 * fn.dim(--border));
-                transition:       transform .2s ease;
-                border:           fn.dim(--border) solid fn.color(--handle-border);
-                border-radius:    fn.dim(--width);
-                background-color: fn.color(--handle-bg);
-            }
-        }
-    
-        @include iro.bem-elem('label') {
-            align-self:  baseline;
-            margin-left: fn.dim(--label-gap);
-        }
-    
-        @include iro.bem-elem('native') {
-            position: absolute;
-            top:      0;
-            left:     0;
-            width:    100%;
-            height:   100%;
-            margin:   0;
-            padding:  0;
-            overflow: hidden;
-            opacity:  .0001;
-    
-            &:hover {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--hover --label);
-                }
-    
-                @include iro.bem-sibling-elem('indicator') {
-                    &::after {
-                        border-color: fn.color(--hover --handle-border);
-                    }
-                }
-            }
-    
-            &:checked {
-                @include iro.bem-sibling-elem('indicator') {
-                    background-color: fn.color(--handle-border);
-    
-                    &::after {
-                        transform:    translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
-                        border-color: fn.color(--handle-border);
-                    }
-                }
-    
-                &:hover {
-                    @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--hover --handle-border);
-
-                        &::after {
-                            border-color: fn.color(--hover --handle-border);
-                        }
-                    }
-                }
-            }
-    
-            &:disabled {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
-                }
-    
-                @include iro.bem-sibling-elem('indicator') {
-                    background-color: fn.color(--disabled --track-bg);
-    
-                    &::after {
-                        border-color:     fn.color(--disabled --handle-border);
-                        background-color: fn.color(--disabled --handle-bg);
-                    }
-                }
-    
-                &:checked {
-                    @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--disabled --handle-border);
-    
-                        &::after {
-                            border-color: fn.color(--disabled --handle-border);
-                        }
-                    }
-                }
-            }
-    
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    @include iro.bem-sibling-elem('label') {
-                        color: fn.color(--key-focus --label);
-                    }
-    
-                    @include iro.bem-sibling-elem('indicator') {
-                        &::after {
-                            border-color: fn.color(--key-focus --handle-border);
-                            box-shadow:   fn.color(--key-focus --shadow);
-                        }
-                    }
-    
-                    &:checked {
-                        @include iro.bem-sibling-elem('indicator') {
-                            background-color: fn.color(--key-focus --track-bg);
-                        }
-                    }
-                }
-            }
-        }
-    
-        @include iro.bem-modifier('standalone') {
-            @include iro.bem-elem('indicator') {
-                margin-top: 0;
-            }
-        }
-    
-        @include iro.bem-modifier('accent') {
-            @include iro.bem-elem('native') {
-                &:checked {
-                    @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--accent --handle-border);
-        
-                        &::after {
-                            border-color: fn.color(--accent --handle-border);
-                        }
-                    }
-        
-                    &:hover {
-                        @include iro.bem-sibling-elem('indicator') {
-                            background-color: fn.color(--accent --hover --handle-border);
-    
-                            &::after {
-                                border-color: fn.color(--accent --hover --handle-border);
-                            }
-                        }
-                    }
-                }
-        
-                &:disabled {
-                    @include iro.bem-sibling-elem('label') {
-                        color: fn.color(--disabled --label);
-                    }
-
-                    &:checked {
-                        @include iro.bem-sibling-elem('indicator') {
-                            background-color: fn.color(--disabled --handle-border);
-
-                            &::after {
-                                border-color: fn.color(--disabled --handle-border);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/_config.scss b/src/_config.scss
index ce72c8e..fd338a9 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -88,19 +88,19 @@ $theme-light: (
         ),
 
         --colors: (
-            --100:  math.div( 0, 12) * 95 + 5,
-            --200:  math.div( 1, 12) * 95 + 5,
-            --300:  math.div( 2, 12) * 95 + 5,
-            --400:  math.div( 3, 12) * 95 + 5,
-            --500:  math.div( 4, 12) * 95 + 5,
-            --600:  math.div( 5, 12) * 95 + 5,
-            --700:  math.div( 6, 12) * 95 + 5,
-            --800:  math.div( 7, 12) * 95 + 5,
-            --900:  math.div( 8, 12) * 95 + 5,
-            --1000: math.div( 9, 12) * 95 + 5,
-            --1100: math.div(10, 12) * 95 + 5,
-            --1200: math.div(11, 12) * 95 + 5,
-            --1300: math.div(12, 12) * 95 + 5,
+            --100:  math.div( 0, 12) * 96 + 5,
+            --200:  math.div( 1, 12) * 96 + 5,
+            --300:  math.div( 2, 12) * 96 + 5,
+            --400:  math.div( 3, 12) * 96 + 5,
+            --500:  math.div( 4, 12) * 96 + 5,
+            --600:  math.div( 5, 12) * 96 + 5,
+            --700:  math.div( 6, 12) * 96 + 5,
+            --800:  math.div( 7, 12) * 96 + 5,
+            --900:  math.div( 8, 12) * 96 + 5,
+            --1000: math.div( 9, 12) * 96 + 5,
+            --1100: math.div(10, 12) * 96 + 5,
+            --1200: math.div(11, 12) * 96 + 5,
+            --1300: math.div(12, 12) * 96 + 5,
         ),
     ),
 
diff --git a/src/_objects.scss b/src/_objects.scss
index 0f510ff..3d5024c 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -8,7 +8,7 @@
 @use 'objects/field-label';
 @use 'objects/radio';
 @use 'objects/checkbox';
-// @use 'objects/switch';
+@use 'objects/switch';
 // @use 'objects/action-button';
 // @use 'objects/overflow-button';
 // @use 'objects/status-indicator';
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 6a984bf..b9020b6 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,7 +1,60 @@
+@use 'sass:string';
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-$themes: accent positive negative warning;
+$themes:        'accent' 'positive' 'negative' 'warning' !default;
+$static-themes: 'black' 'white' !default;
+
+@mixin theme($theme) {
+    background-color: fn.color(--#{$theme} --bg);
+    color:            fn.color(--#{$theme} --label);
+
+    &:link,
+    &:visited,
+    &:enabled {
+        &:hover {
+            background-color: fn.color(--#{$theme} --hover --bg);
+            color:            fn.color(--#{$theme} --hover --label);
+        }
+
+        &:active {
+            background-color: fn.color(--#{$theme} --active --bg);
+            color:            fn.color(--#{$theme} --active --label);
+        }
+    }
+
+    @include iro.bem-modifier('quiet') {
+        background-color: fn.color(--#{$theme}-quiet --bg);
+        color:            fn.color(--#{$theme}-quiet --label);
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:hover {
+                background-color: fn.color(--#{$theme}-quiet --hover --bg);
+                color:            fn.color(--#{$theme}-quiet --hover --label);
+            }
+
+            &:active {
+                background-color: fn.color(--#{$theme}-quiet --active --bg);
+                color:            fn.color(--#{$theme}-quiet --active --label);
+            }
+        }
+    }
+
+    @if string.slice($theme, 1, 7) == 'static-' {
+        &:link,
+        &: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);
+            }
+        }
+    }
+}
 
 @include iro.props-namespace('badge') {
     @include iro.props-store((
@@ -32,7 +85,8 @@ $themes: accent positive negative warning;
             ),
             
             --key-focus: (
-                --border: fn.global-dim(--key-focus --border),
+                --border:  fn.global-dim(--border --medium),
+                --outline: fn.global-dim(--key-focus --border),
             ),
         ),
         --colors: (
@@ -45,9 +99,10 @@ $themes: accent positive negative warning;
                 --bg: fn.global-color(--heading),
             ),
             --key-focus: (
-                --bg:     fn.global-color(--base --50),
-                --label:  fn.global-color(--heading),
-                --border: fn.global-color(--focus-static --400),
+                --bg:      fn.global-color(--base --50),
+                --label:   fn.global-color(--heading),
+                --border:  fn.global-color(--focus --1100),
+                --outline: fn.global-color(--focus --400),
             ),
 
             --quiet: (
@@ -70,10 +125,12 @@ $themes: accent positive negative warning;
                     --bg:    fn.global-color(--#{$theme}-static --900),
                     --label: fn.global-color(--#{$theme}-static --900-text),
                     --hover: (
-                        --bg: fn.global-color(--#{$theme}-static --1000),
+                        --bg:    fn.global-color(--#{$theme}-static --1000),
+                        --label: fn.global-color(--#{$theme}-static --1000-text),
                     ),
                     --active: (
-                        --bg: fn.global-color(--#{$theme}-static --1100),
+                        --bg:    fn.global-color(--#{$theme}-static --1100),
+                        --label: fn.global-color(--#{$theme}-static --1000-text),
                     ),
                 ),
 
@@ -81,20 +138,61 @@ $themes: accent positive negative warning;
                     --bg:    fn.global-color(--#{$theme} --200),
                     --label: fn.global-color(--#{$theme} --1100),
                     --hover: (
-                        --bg: fn.global-color(--#{$theme} --300),
+                        --bg:    fn.global-color(--#{$theme} --300),
+                        --label: fn.global-color(--#{$theme} --1200),
                     ),
                     --active: (
-                        --bg: fn.global-color(--#{$theme} --400),
+                        --bg:    fn.global-color(--#{$theme} --400),
+                        --label: fn.global-color(--#{$theme} --1300),
                     ),
                 )
             ),
         ));
     }
 
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --bg:    fn.global-color(--#{$theme}-transparent --800),
+                    --label: fn.global-color(--#{$theme}-transparent --text),
+                    --hover: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --900),
+                        --label: fn.global-color(--#{$theme}-transparent --text),
+                    ),
+                    --active: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --900),
+                        --label: fn.global-color(--#{$theme}-transparent --text),
+                    ),
+                    --key-focus: (
+                        --bg:      fn.global-color(--#{$theme}-transparent --100),
+                        --label:   fn.global-color(--#{$theme}-transparent --900),
+                        --border:  fn.global-color(--#{$theme}-transparent --900),
+                        --outline: fn.global-color(--#{$theme}-transparent --300),
+                    ),
+                ),
+
+                --static-#{$theme}-quiet: (
+                    --bg:    fn.global-color(--#{$theme}-transparent --200),
+                    --label: fn.global-color(--#{$theme}-transparent --900),
+                    --hover: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --300),
+                        --label: fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                    --active: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --400),
+                        --label: fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                )
+            )
+        ));
+    }
+
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
+        padding-block:    calc(fn.dim(--pad-b) - fn.dim(--key-focus --border));
+        padding-inline:   calc(fn.dim(--pad-i) - fn.dim(--key-focus --border));
+        border:           fn.dim(--key-focus --border) solid transparent;
         border-radius:    fn.dim(--rounding);
         background-color: fn.color(--bg);
         color:            fn.color(--label);
@@ -134,37 +232,7 @@ $themes: accent positive negative warning;
     
         @each $theme in $themes {
             @include iro.bem-modifier($theme) {
-                background-color: fn.color(--#{$theme} --bg);
-                color:            fn.color(--#{$theme} --label);
-    
-                &:link,
-                &:visited,
-                &:enabled {
-                    &:hover {
-                        background-color: fn.color(--#{$theme} --hover --bg);
-                    }
-    
-                    &:active {
-                        background-color: fn.color(--#{$theme} --active --bg);
-                    }
-                }
-
-                @include iro.bem-modifier('quiet') {
-                    background-color: fn.color(--#{$theme}-quiet --bg);
-                    color:            fn.color(--#{$theme}-quiet --label);
-        
-                    &:link,
-                    &:visited,
-                    &:enabled {
-                        &:hover {
-                            background-color: fn.color(--#{$theme}-quiet --hover --bg);
-                        }
-        
-                        &:active {
-                            background-color: fn.color(--#{$theme}-quiet --active --bg);
-                        }
-                    }
-                }
+                @include theme($theme);
             }
         }
 
@@ -172,12 +240,19 @@ $themes: accent positive negative warning;
         &: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);
-                box-shadow:       0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border);
                 color:            fn.color(--key-focus --label);
             }
         }
     
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                @include theme(static-#{$theme});
+            }
+        }
+    
         @include iro.bem-modifier('pill') {
             padding-inline: fn.dim(--pad-i-pill);
             border-radius:  10em;
@@ -185,8 +260,8 @@ $themes: accent positive negative warning;
     
         @each $size in sm lg xl {
             @include iro.bem-modifier($size) {
-                padding-block:  fn.dim(--#{$size} --pad-b);
-                padding-inline: fn.dim(--#{$size} --pad-i);
+                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));
                 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 0da3a65..08dc0ea 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,8 +2,8 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-$themes:        'accent' 'negative';
-$static-themes: 'black' 'white';
+$themes:        'accent' 'negative' !default;
+$static-themes: 'black' 'white' !default;
 
 @mixin theme($theme: null) {
     $key: if($theme == null, (), --#{$theme});
@@ -57,6 +57,17 @@ $static-themes: 'black' 'white';
     }
 
     @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));
+        }
+    }
 }
 
 @include iro.props-namespace('button') {
@@ -86,7 +97,7 @@ $static-themes: 'black' 'white';
             ),
             
             --key-focus: (
-                --border: fn.global-dim(--key-focus --border),
+                --outline: fn.global-dim(--key-focus --border),
             ),
         ),
         --colors: (
@@ -111,7 +122,8 @@ $static-themes: 'black' 'white';
             --key-focus: (
                 --bg:      fn.global-color(--base --50),
                 --label:   fn.global-color(--heading),
-                --border:  fn.global-color(--focus-static --400),
+                --border:  fn.global-color(--focus --1100),
+                --outline: fn.global-color(--focus --400),
             ),
             
             --primary: (
@@ -163,11 +175,6 @@ $static-themes: 'black' 'white';
                     --outline-border: fn.global-color(--#{$theme}-transparent --300),
                     --outline-label:  fn.global-color(--#{$theme}-transparent --900),
 
-                    --disabled: (
-                        --bg:             fn.global-color(--#{$theme}-transparent --200),
-                        --outline-border: fn.global-color(--#{$theme}-transparent --300),
-                        --label:          fn.global-color(--#{$theme}-transparent --500),
-                    ),
                     --hover: (
                         --bg:     fn.global-color(--#{$theme}-transparent --300),
                         --label:  fn.global-color(--#{$theme}-transparent --900),
@@ -176,6 +183,17 @@ $static-themes: 'black' 'white';
                         --bg:     fn.global-color(--#{$theme}-transparent --400),
                         --label:  fn.global-color(--#{$theme}-transparent --900),
                     ),
+                    --disabled: (
+                        --bg:             fn.global-color(--#{$theme}-transparent --200),
+                        --outline-border: fn.global-color(--#{$theme}-transparent --300),
+                        --label:          fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                    --key-focus: (
+                        --bg:      fn.global-color(--#{$theme}-transparent --100),
+                        --label:   fn.global-color(--#{$theme}-transparent --900),
+                        --border:  fn.global-color(--#{$theme}-transparent --900),
+                        --outline: fn.global-color(--#{$theme}-transparent --300),
+                    ),
                 ),
                 --static-#{$theme}-primary: (
                     --bg:             fn.global-color(--#{$theme}-transparent --800),
@@ -240,28 +258,28 @@ $static-themes: 'black' 'white';
                 @include theme($theme);
             }
         }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include static-theme($theme);
-            }
-
-            @include iro.bem-modifier(static-#{$theme}-primary) {
-                @include static-theme(#{$theme}-primary, $theme);
-            }
-        }
 
         &:link,
         &: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);
-                box-shadow:       0 0 0 calc(fn.dim(--key-focus --border) - fn.dim(--border)) fn.color(--key-focus --border);
                 color:            fn.color(--key-focus --label);
             }
         }
     
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                @include static-theme($theme);
+            }
+
+            @include iro.bem-modifier(static-#{$theme}-primary) {
+                @include static-theme(#{$theme}-primary, $theme);
+            }
+        }
+    
         @include iro.bem-modifier('round') {
             inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
             padding-inline: 0;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index e56b10e..a254ec4 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -49,16 +49,6 @@
         padding-block:  fn.dim(--pad-b);
         padding-inline: fn.dim(--pad-i);
 
-        @include iro.bem-elem('bg') {
-            display:        block;
-            position:       absolute;
-            z-index:        -1;
-            inset-block:    0;
-            inset-inline:   0;
-            border-radius:  fn.dim(--rounding);
-            pointer-events: none;
-        }
-    
         @include iro.bem-elem('box') {
             display:            block;
             position:           relative;
@@ -125,7 +115,9 @@
         }
     
         @include iro.bem-elem('native') {
+            appearance:         none;
             position:           absolute;
+            z-index:            -1;
             inset-block-start:  0;
             inset-inline-start: 0;
             inline-size:        100%;
@@ -133,7 +125,7 @@
             margin:             0;
             padding:            0;
             overflow:           hidden;
-            opacity:            .0001;
+            border-radius:      fn.dim(--rounding);
     
             &:hover {
                 @include iro.bem-sibling-elem('label') {
@@ -188,9 +180,7 @@
             }
     
             &:focus-visible {
-                @include iro.bem-sibling-elem('bg') {
-                    background-color: fn.color(--key-focus --bg);
-                }
+                background-color: fn.color(--key-focus --bg);
 
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--key-focus --label);
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 29ab537..84ddf12 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -3,7 +3,7 @@
 @use '../functions' as fn;
 @use '../config';
 
-$static-themes: 'black' 'white';
+$static-themes: 'black' 'white' !default;
 
 @include iro.props-namespace('divider') {
     @include iro.props-store((
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 5f461ce..12dc6ca 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -48,16 +48,6 @@
         margin-inline:  calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i));
         padding-block:  fn.dim(--pad-b);
         padding-inline: fn.dim(--pad-i);
-
-        @include iro.bem-elem('bg') {
-            display:        block;
-            position:       absolute;
-            z-index:        -1;
-            inset-block:    0;
-            inset-inline:   0;
-            border-radius:  fn.dim(--rounding);
-            pointer-events: none;
-        }
     
         @include iro.bem-elem('circle') {
             display:            block;
@@ -89,7 +79,9 @@
         }
     
         @include iro.bem-elem('native') {
+            appearance:         none;
             position:           absolute;
+            z-index:            -1;
             inset-block-start:  0;
             inset-inline-start: 0;
             inline-size:        100%;
@@ -97,7 +89,7 @@
             margin:             0;
             padding:            0;
             overflow:           hidden;
-            opacity:            .0001;
+            border-radius:      fn.dim(--rounding);
     
             &:hover {
                 @include iro.bem-sibling-elem('label') {
@@ -132,9 +124,7 @@
             }
 
             &:focus-visible {
-                @include iro.bem-sibling-elem('bg') {
-                    background-color: fn.color(--key-focus --bg);
-                }
+                background-color: fn.color(--key-focus --bg);
 
                 @include iro.bem-sibling-elem('label') {
                     color: fn.color(--key-focus --label);
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
new file mode 100644
index 0000000..9ebb290
--- /dev/null
+++ b/src/objects/_switch.scss
@@ -0,0 +1,237 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('switch') {
+    @include iro.props-store((
+        --dims: (
+            --width:           fn.global-dim(--size --350),
+            --height:          fn.global-dim(--size --200),
+            --label-gap:       fn.global-dim(--size --125),
+            --border:          fn.global-dim(--border --medium),
+            --pad-i:           fn.global-dim(--size --65),
+            --pad-b:           fn.global-dim(--size --65),
+            --rounding:        fn.global-dim(--rounding),
+            --spacing-sibling: fn.global-dim(--size --300),
+        ),
+        --colors: (
+            --track-bg:      fn.global-color(--border),
+            --handle-border: fn.global-color(--text-mute),
+            --handle-bg:     fn.global-color(--base --50),
+    
+            --hover: (
+                --label:         fn.global-color(--heading),
+                --handle-border: fn.global-color(--text),
+            ),
+            --accent: (
+                --handle-border: fn.global-color(--accent --900),
+    
+                --hover: (
+                    --handle-border: fn.global-color(--accent --1000),
+                ),
+            ),
+            --disabled: (
+                --label:         fn.global-color(--text-disabled),
+                --track-bg:      fn.global-color(--border),
+                --handle-border: fn.global-color(--border-strong),
+                --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),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:        inline-flex;
+        position:       relative;
+        align-items:    flex-start;
+        margin-inline:  calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i));
+        padding-inline: fn.dim(--pad-i);
+        padding-block:  fn.dim(--pad-b);
+    
+        @include iro.bem-elem('indicator') {
+            display:            block;
+            box-sizing:         border-box;
+            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)));
+            transition:         background-color .2s ease;
+            border-radius:      2em;
+            background-color:   fn.color(--track-bg);
+    
+            &::after {
+                content:          '';
+                display:          block;
+                inline-size:      calc(fn.dim(--height) - 2 * fn.dim(--border));
+                block-size:       calc(fn.dim(--height) - 2 * fn.dim(--border));
+                transition:       transform .2s ease;
+                border:           fn.dim(--border) solid fn.color(--handle-border);
+                border-radius:    fn.dim(--width);
+                background-color: fn.color(--handle-bg);
+            }
+        }
+    
+        @include iro.bem-elem('label') {
+            align-self:          baseline;
+            margin-inline-start: fn.dim(--label-gap);
+        }
+    
+        @include iro.bem-elem('native') {
+            appearance:         none;
+            position:           absolute;
+            z-index:            -1;
+            inset-block-start:  0;
+            inset-inline-start: 0;
+            inline-size:        100%;
+            block-size:         100%;
+            margin:             0;
+            padding:            0;
+            overflow:           hidden;
+            border-radius:      fn.dim(--rounding);
+    
+            &:hover {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--hover --label);
+                }
+    
+                @include iro.bem-sibling-elem('indicator') {
+                    &::after {
+                        border-color: fn.color(--hover --handle-border);
+                    }
+                }
+            }
+    
+            &:checked {
+                @include iro.bem-sibling-elem('indicator') {
+                    background-color: fn.color(--handle-border);
+    
+                    &::after {
+                        transform:    translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
+                        border-color: fn.color(--handle-border);
+                    }
+                }
+    
+                &:hover {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--hover --handle-border);
+
+                        &::after {
+                            border-color: fn.color(--hover --handle-border);
+                        }
+                    }
+                }
+            }
+    
+            &:disabled {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--disabled --label);
+                }
+    
+                @include iro.bem-sibling-elem('indicator') {
+                    background-color: fn.color(--disabled --track-bg);
+    
+                    &::after {
+                        border-color:     fn.color(--disabled --handle-border);
+                        background-color: fn.color(--disabled --handle-bg);
+                    }
+                }
+    
+                &:checked {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--disabled --handle-border);
+    
+                        &::after {
+                            border-color: fn.color(--disabled --handle-border);
+                        }
+                    }
+                }
+            }
+    
+            &: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);
+                    }
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('standalone') {
+            @include iro.bem-elem('indicator') {
+                margin-block-start: 0;
+            }
+        }
+    
+        @include iro.bem-modifier('accent') {
+            @include iro.bem-elem('native') {
+                &:checked {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--accent --handle-border);
+        
+                        &::after {
+                            border-color: fn.color(--accent --handle-border);
+                        }
+                    }
+        
+                    &:hover {
+                        @include iro.bem-sibling-elem('indicator') {
+                            background-color: fn.color(--accent --hover --handle-border);
+    
+                            &::after {
+                                border-color: fn.color(--accent --hover --handle-border);
+                            }
+                        }
+                    }
+                }
+        
+                &:disabled {
+                    @include iro.bem-sibling-elem('label') {
+                        color: fn.color(--disabled --label);
+                    }
+
+                    &:checked {
+                        @include iro.bem-sibling-elem('indicator') {
+                            background-color: fn.color(--disabled --handle-border);
+
+                            &::after {
+                                border-color: fn.color(--disabled --handle-border);
+                            }
+                        }
+                    }
+                }
+
+                &: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/_text-field.scss b/src/objects/_text-field.scss
index 37108ab..babec79 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -26,8 +26,9 @@
 
 @mixin keyboard-focus {
     @include iro.bem-sibling-elem('bg') {
-        border-color: fn.color(--key-focus --border);
-        box-shadow:   0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --outline);
+        border-color:   fn.color(--key-focus --border);
+        outline:        fn.color(--key-focus --outline) solid fn.dim(--key-focus --border);
+        //outline-offset: fn.dim(--focus --border);
     }
 }
 
@@ -62,11 +63,11 @@
                 --border: fn.global-color(--text-mute-more),
             ),
             --focus: (
-                --border: fn.global-color(--accent --900),
+                --border: fn.global-color(--focus --1100),
             ),
             --key-focus: (
-                --border:  fn.global-color(--focus --1300),
-                --outline: fn.global-color(--focus-static --400),
+                --border:  fn.global-color(--focus --1100),
+                --outline: fn.global-color(--focus --400),
             ),
             --error: (
                 --border: fn.global-color(--negative --700),
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 4f36972..9e0b18a 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -15,20 +15,20 @@
             --underline:         fn.global-color(--text-mute-more),
 
             --idle: (
-                --text:          fn.global-color(--accent --1000),
+                --text:          fn.global-color(--accent --1100),
                 --underline:     fn.global-color(--accent --600),
 
                 --hover: (
-                    --text:      fn.global-color(--accent --1200),
+                    --text:      fn.global-color(--accent --1300),
                 ),
             ),
 
             --visited: (
-                --text:          fn.global-color(--purple --1000),
+                --text:          fn.global-color(--purple --1100),
                 --underline:     fn.global-color(--purple --600),
 
                 --hover: (
-                    --text:      fn.global-color(--purple --1200),
+                    --text:      fn.global-color(--purple --1300),
                 ),
             ),
 
diff --git a/tpl/objects/checkbox.pug b/tpl/objects/checkbox.pug
index cb975d5..874505b 100644
--- a/tpl/objects/checkbox.pug
+++ b/tpl/objects/checkbox.pug
@@ -16,4 +16,3 @@ mixin checkbox
             +icon('check')(class='o-checkbox__check-icon')
         .o-checkbox__label
             block
-        .o-checkbox__bg
diff --git a/tpl/objects/radio.pug b/tpl/objects/radio.pug
index ba941be..8cb1b1f 100644
--- a/tpl/objects/radio.pug
+++ b/tpl/objects/radio.pug
@@ -10,4 +10,3 @@ mixin radio
         .o-radio__circle
         .o-radio__label
             block
-        .o-radio__bg
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index a55baca..e1aa9e2 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -3,73 +3,40 @@ mixin view-badge
         .c-box
             +badge(size='sm' href='#')= '50'
             = ' '
-            +badge= '100'
+            +badge(href='#')= '100'
             = ' '
             +badge(size='lg' href='#')= '200'
             = ' '
             +badge(size='xl' href='#')= '300'
 
         .c-box
-            +badge(size='sm' href='#' quiet=true)= '50'
+            +badge(href='#')= '100'
             = ' '
-            +badge(quiet=true)= '100'
+            +badge(quiet=true href='#')= '100'
             = ' '
-            +badge(size='lg' href='#' quiet=true)= '200'
+            +badge(pill=true href='#')= '100'
             = ' '
-            +badge(size='xl' href='#' quiet=true)= '300'
+            +badge(quiet=true pill=true href='#')= '100'
 
         each theme in ['accent', 'positive', 'negative', 'warning']
             .c-box
-                +badge(theme)(size='sm' href='#')= 'new'
+                +badge(theme)(href='#')= 'new'
                 = ' '
-                +badge(theme)= 'new'
+                +badge(theme)(quiet=true href='#')= 'new'
                 = ' '
-                +badge(theme)(size='lg' href='#')= 'new'
+                +badge(theme)(pill=true href='#')= 'new'
                 = ' '
-                +badge(theme)(size='xl' href='#')= 'new'
+                +badge(theme)(quiet=true pill=true href='#')= 'new'
 
-            .c-box
-                +badge(theme)(size='sm' href='#' quiet=true)= 'new'
-                = ' '
-                +badge(theme)(quiet=true)= 'new'
-                = ' '
-                +badge(theme)(size='lg' href='#' quiet=true)= 'new'
-                = ' '
-                +badge(theme)(size='xl' href='#' quiet=true)= 'new'
+        each theme in ['static-black', 'static-white']
+            -
+                const bg = theme.startsWith('static-black') ? 500 : 1000;
 
-        .c-box
-            +badge(size='sm', pill=true)= '50'
-            = ' '
-            +badge(pill=true)= '100'
-            = ' '
-            +badge(size='lg' pill=true)= '200'
-            = ' '
-            +badge(size='xl' pill=true)= '300'
-
-        .c-box
-            +badge(size='sm' pill=true quiet=true)= 'new'
-            = ' '
-            +badge(pill=true quiet=true)= 'new'
-            = ' '
-            +badge(size='lg' pill=true quiet=true)= 'new'
-            = ' '
-            +badge(size='xl' pill=true quiet=true)= 'new'
-
-        each theme in ['accent', 'positive', 'negative', 'warning']
-            .c-box
-                +badge(theme)(size='sm' pill=true href='#')= 'new'
-                = ' '
-                +badge(theme)(pill=true)= 'new'
-                = ' '
-                +badge(theme)(size='lg' pill=true href='#')= 'new'
-                = ' '
-                +badge(theme)(size='xl' pill=true href='#')= 'new'
-
-            .c-box
-                +badge(theme)(size='sm' pill=true href='#' quiet=true)= 'new'
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+                +badge(theme)(href='#')= 'new'
                 = ' '
-                +badge(theme)(pill=true quiet=true)= 'new'
+                +badge(theme)(quiet=true href='#')= 'new'
                 = ' '
-                +badge(theme)(size='lg' pill=true href='#' quiet=true)= 'new'
+                +badge(theme)(pill=true href='#')= 'new'
                 = ' '
-                +badge(theme)(size='xl' pill=true href='#' quiet=true)= 'new'
+                +badge(theme)(quiet=true pill=true href='#')= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 221219c..c476d9b 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -8,15 +8,8 @@ mixin view-button
             +a-button(size='lg')= 'Button'
             = ' '
             +a-button(size='xl')= 'Button'
-            br
-            +a-button(size='sm' disabled=true)= 'Button'
-            = ' '
-            +a-button(disabled=true)= 'Button'
-            = ' '
-            +a-button(size='lg' disabled=true)= 'Button'
-            = ' '
-            +a-button(size='xl' disabled=true)= 'Button'
-            br
+
+        .c-box
             +a-button(size='sm' outline=true)= 'Button'
             = ' '
             +a-button(outline=true)= 'Button'
@@ -24,14 +17,6 @@ mixin view-button
             +a-button(size='lg' outline=true)= 'Button'
             = ' '
             +a-button(size='xl' outline=true)= 'Button'
-            br
-            +a-button(size='sm' outline=true disabled=true)= 'Button'
-            = ' '
-            +a-button(outline=true disabled=true)= 'Button'
-            = ' '
-            +a-button(size='lg' outline=true disabled=true)= 'Button'
-            = ' '
-            +a-button(size='xl' outline=true disabled=true)= 'Button'
 
         .c-box
             .l-button-group
-- 
cgit v1.2.3-54-g00ecf