From e4255279ff72e5438d297888d808851cdf2178ed Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 26 Mar 2022 14:40:11 +0100
Subject: Lots of updates, especially dialog

---
 src/_apply-vars.scss            |  16 ++++-
 src/_config.scss                |   2 +-
 src/_declare-vars.scss          |  20 ++++--
 src/_objects.scss               |   4 +-
 src/layouts/_button-group.scss  |   2 +-
 src/objects/_action-button.scss |  69 +++------------------
 src/objects/_action-menu.scss   |   3 +-
 src/objects/_dialog.scss        |  83 +++++++++++--------------
 src/objects/_divider.scss       | 131 ++++++++++++++++++++++++++++++++++++++++
 src/objects/_header.scss        |  31 ++++++++++
 src/objects/_heading.scss       |  17 +++---
 src/objects/_lightbox.scss      |   2 +
 src/objects/_list-group.scss    |   2 +-
 src/objects/_rule.scss          | 131 ----------------------------------------
 src/objects/_sidebar.scss       |  36 +++++++++++
 src/objects/_table.scss         |   2 +-
 src/objects/_text-field.scss    |  36 ++++++++---
 17 files changed, 321 insertions(+), 266 deletions(-)
 create mode 100644 src/objects/_divider.scss
 create mode 100644 src/objects/_header.scss
 delete mode 100644 src/objects/_rule.scss
 create mode 100644 src/objects/_sidebar.scss

(limited to 'src')

diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index 66ad9b7..9639a97 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -19,6 +19,12 @@
     }
 }
 
+@include iro.bem-theme('dark') {
+    @include iro.props-assign('colors');
+    @include iro.props-assign('colors-dark');
+    @include iro.props-assign('palette-dark');
+}
+
 @include iro.bem-theme('raised') {
     @include iro.props-assign('colors');
     @include iro.props-assign('palette-light-raised');
@@ -29,8 +35,12 @@
     }
 }
 
-@include iro.bem-theme('dark') {
+@include iro.bem-theme('lowered') {
     @include iro.props-assign('colors');
-    @include iro.props-assign('colors-dark');
-    @include iro.props-assign('palette-dark');
+    @include iro.props-assign('palette-light-lowered');
+
+    @media (prefers-color-scheme: dark) {
+        @include iro.props-assign('colors-dark');
+        @include iro.props-assign('palette-dark-lowered');
+    }
 }
diff --git a/src/_config.scss b/src/_config.scss
index cdbd02c..68df69f 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -21,7 +21,7 @@ $wanted-grays: (
     --3:  1,
 
     --4:  1.15,
-    --5:  1.3,
+    --5:  1.35,
     --6:  1.7,
 
     --7:  2.4,
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 998608a..0bcf101 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -115,7 +115,7 @@
         --fg:     fn.color(--gray --10, null), // Text
         --fg-lo:  fn.color(--gray --11, null), // Strong text
 
-        --gray:   ( --h: 220, --s: 5% ),
+        --gray:   ( --h: 220, --s: 0% ),
         --blue:   fn.color-palette(blend.lch(48% 50 279)),
         --purple: fn.color-palette(blend.lch(48% 50 308)),
         --red:    fn.color-palette(blend.lch(48% 50 23)),
@@ -140,7 +140,7 @@
         --focus: (
             --shadow:    0 0 0 fn.dim(--focus-outline-width, null) fn.color(--accent --primary --semi, null),
             --fill:      fn.color(--accent --primary --bg, null),
-            --text:      fn.color(--accent --primary --lo, null),
+            --text:      fn.color(--accent --primary --obj, null),
             --fill-text: fn.color(--accent --primary --fg, null),
         ),
     ),
@@ -148,7 +148,7 @@
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(94%),
+        --gray: fn.gray-palette(96%),
     ),
 ), 'palette-light');
 
@@ -158,6 +158,12 @@
     ),
 ), 'palette-light-raised');
 
+@include iro.props-store((
+    --colors: (
+        --gray: fn.gray-palette(91%),
+    ),
+), 'palette-light-lowered');
+
 //
 
 @include iro.props-store((
@@ -187,10 +193,16 @@
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(16%),
+        --gray: fn.gray-palette(13%),
     ),
 ), 'palette-dark-raised');
 
+@include iro.props-store((
+    --colors: (
+        --gray: fn.gray-palette(5%),
+    ),
+), 'palette-dark-lowered');
+
 //
 
 @each $breakpoint in map-keys(media.$breakpoints) {
diff --git a/src/_objects.scss b/src/_objects.scss
index 070e281..d01ed54 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -1,6 +1,6 @@
 @use 'objects/icon';
 @use 'objects/heading';
-@use 'objects/rule';
+@use 'objects/divider';
 @use 'objects/badge';
 @use 'objects/button';
 @use 'objects/text-field';
@@ -11,6 +11,8 @@
 @use 'objects/action-button';
 @use 'objects/status-indicator';
 @use 'objects/avatar';
+@use 'objects/header';
+@use 'objects/sidebar';
 @use 'objects/action-menu';
 @use 'objects/menu';
 @use 'objects/backdrop';
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index 17de1e1..2917776 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -4,7 +4,7 @@
 @include iro.props-namespace('button-group') {
     @include iro.props-store((
         --dims: (
-            --spacing: iro.fn-px-to-rem(16px),
+            --spacing: fn.global-dim(--size --150),
         ),
     ), 'dims');
 
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 83321da..2dcbb12 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -15,44 +15,33 @@
             --bg:     fn.global-color(--bg-hi),
             --label:  fn.global-color(--fg),
             --border: fn.global-color(--obj-lo),
-            --shadow: 0 0 0 0 transparent,
     
             --hover: (
                 --bg:     fn.global-color(--bg-hi2),
                 --label:  fn.global-color(--fg-lo),
                 --border: fn.global-color(--fg-hi2),
-                --shadow: 0 0 0 0 transparent,
             ),
             --active: (
                 --bg:     fn.global-color(--obj-hi),
                 --label:  fn.global-color(--fg-lo),
                 --border: fn.global-color(--fg-hi2),
-                --shadow: 0 0 0 0 transparent,
             ),
             --selected: (
                 --bg:     fn.global-color(--obj-hi),
                 --label:  fn.global-color(--fg),
                 --border: fn.global-color(--fg-hi3),
-                --shadow: 0 0 0 0 transparent,
 
                 --hover: (
                     --label:  fn.global-color(--fg-lo),
                     --border: fn.global-color(--fg-hi2),
-                    --shadow: 0 0 0 0 transparent,
-                ),
-                --key-focus: (
-                    --bg: fn.global-color(--obj-hi),
                 ),
             ),
             --disabled: (
                 --bg:     fn.global-color(--obj-hi),
                 --label:  fn.global-color(--fg-hi3),
                 --border: fn.global-color(--obj-hi),
-                --shadow: 0 0 0 0 transparent,
             ),
             --key-focus: (
-                --bg:     fn.global-color(--bg-hi2),
-                --label:  fn.global-color(--fg-lo),
                 --border: fn.global-color(--focus --fill),
                 --shadow: fn.global-color(--focus --shadow),
             ),
@@ -74,19 +63,10 @@
                     --hover: (
                         --label: fn.global-color(--fg-lo),
                     ),
-                    --key-focus: (
-                        --bg: fn.global-color(--obj),
-                    ),
                 ),
                 --disabled: (
                     --label: fn.global-color(--fg-hi3),
                 ),
-                --key-focus: (
-                    --bg:     fn.global-color(--bg-hi2),
-                    --label:  fn.global-color(--fg-lo),
-                    --border: fn.global-color(--focus --fill),
-                    --shadow: fn.global-color(--focus --shadow),
-                ),
             ),
         ),
     ), 'colors');
@@ -98,7 +78,6 @@
         border:           1px solid fn.color(--disabled --border);
         border-radius:    fn.dim(--rounding);
         background-color: fn.color(--disabled --bg);
-        box-shadow:       fn.color(--disabled --shadow);
         color:            fn.color(--disabled --label);
         line-height:      1;
         text-align:       center;
@@ -111,59 +90,36 @@
         &:enabled {
             border-color:     fn.color(--border);
             background-color: fn.color(--bg);
-            box-shadow:       fn.color(--shadow);
             color:            fn.color(--label);
 
             &:hover {
                 border-color:     fn.color(--hover --border);
                 background-color: fn.color(--hover --bg);
-                box-shadow:       fn.color(--hover --shadow);
                 color:            fn.color(--hover --label);
             }
     
             &:active {
                 border-color:     fn.color(--active --border);
                 background-color: fn.color(--active --bg);
-                box-shadow:       fn.color(--active --shadow);
                 color:            fn.color(--active --label);
             }
         }
     
-        @include iro.bem-at-theme('keyboard') {
-            &:focus {
-                border-color:     fn.color(--key-focus --border);
-                background-color: fn.color(--key-focus --bg);
-                box-shadow:       inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
-                color:            fn.color(--key-focus --label);
-            }
-        }
-    
         @include iro.bem-is('selected') {
             &:link,
             &:visited,
             &:enabled {
                 border-color:     fn.color(--selected --border);
                 background-color: fn.color(--selected --bg);
-                box-shadow:       fn.color(--selected --shadow);
                 color:            fn.color(--selected --label);
         
                 &:hover,
                 &:active {
                     border-color:     fn.color(--selected --hover --border);
                     background-color: fn.color(--selected --bg);
-                    box-shadow:       fn.color(--selected --hover --shadow);
                     color:            fn.color(--selected --hover --label);
                 }
             }
-    
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    border-color:     fn.color(--key-focus --border);
-                    background-color: fn.color(--selected --key-focus --bg);
-                    box-shadow:       inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
-                    color:            fn.color(--key-focus --label);
-                }
-            }
         }
     
         @include iro.bem-modifier('quiet') {
@@ -195,15 +151,6 @@
                 }
             }
     
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    border-color:     fn.color(--quiet --key-focus --border);
-                    background-color: fn.color(--quiet --key-focus --bg);
-                    box-shadow:       inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow);
-                    color:            fn.color(--quiet --key-focus --label);
-                }
-            }
-    
             @include iro.bem-is('selected') {
                 background-color: fn.color(--quiet --selected --bg);
                 color:            fn.color(--quiet --disabled --label);
@@ -224,14 +171,16 @@
                         color:            fn.color(--quiet --selected --hover --label);
                     }
                 }
+            }
+        }
     
-                @include iro.bem-at-theme('keyboard') {
-                    &:focus {
-                        border-color:     fn.color(--quiet --key-focus --border);
-                        background-color: fn.color(--quiet --selected --key-focus --bg);
-                        box-shadow:       inset 0 0 0 1px fn.color(--quiet --key-focus --border), fn.color(--quiet --key-focus --shadow);
-                        color:            fn.color(--quiet --key-focus --label);
-                    }
+        @include iro.bem-at-theme('keyboard') {
+            &:link,
+            &:visited,
+            &:enabled {
+                &:focus {
+                    border-color: fn.color(--key-focus --border);
+                    box-shadow:   inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
                 }
             }
         }
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 89c4b3c..88e84d6 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -19,7 +19,7 @@
     @include iro.props-store((
         --colors: (
             --shadow:    0 .2em .5em rgba(#000, .1),
-            --border:    fn.global-color(--obj-lo),
+            --border:    rgba(#000, .2),
             --separator: fn.global-color(--obj),
             --icon:      fn.global-color(--fg-hi),
             --item: (
@@ -43,6 +43,7 @@
     @include iro.props-store((
         --colors: (
             --shadow: 0 .2em .5em rgba(#000, .5),
+            --border: rgba(#fff, .2),
         ),
     ), 'colors-dark');
 
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 54e9c59..f6e8e63 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -1,18 +1,20 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
+@use 'header';
+
 @include iro.props-namespace('dialog') {
     @include iro.props-store((
         --dims: (
-            --pad-x:    fn.global-dim(--size --300),
-            --pad-y:    fn.global-dim(--size --300),
             --width-sm: iro.fn-px-to-rem(500px),
             --width-md: iro.fn-px-to-rem(800px),
             --width-lg: iro.fn-px-to-rem(1100px),
             --rounding: 3px,
-            --sidebar: (
-                --pad-x: fn.global-dim(--size --150),
-                --pad-y: fn.global-dim(--size --300),
+            --border:   1px,
+
+            --body: (
+                --pad-x: fn.global-dim(--size --200),
+                --pad-y: fn.global-dim(--size --200),
             )
         ),
     ), 'dims');
@@ -26,20 +28,18 @@
 
     @include iro.props-store((
         --colors: (
+            --border: rgba(#000, .05),
             --shadow: 0 .2em .5em rgba(#000, .2),
+
             --sidebar: (
-                --bg:     fn.global-color(--bg),
                 --border: fn.global-color(--obj),
-            )
+            ),
         ),
     ), 'colors');
 
     @include iro.props-store((
         --colors: (
-            --sidebar: (
-                --bg:     fn.global-color(--bg-hi2),
-                --border: fn.global-color(--bg-hi2),
-            ),
+            --border: rgba(#fff, .2),
         ),
     ), 'colors-dark');
 
@@ -48,9 +48,9 @@
         grid-template-rows:    auto 1fr auto;
         grid-template-columns: auto 1fr;
         grid-template-areas:
-            'sidebar header'
-            'sidebar body'
-            'sidebar footer';
+            'sidebar-header header'
+            'sidebar        body'
+            'sidebar        footer';
         position:              relative;
         box-sizing:            border-box;
         width:                 100%;
@@ -59,7 +59,7 @@
         overflow:              hidden;
         border-radius:         fn.dim(--rounding);
         background-color:      fn.global-color(--bg);
-        box-shadow:            fn.color(--shadow);
+        box-shadow:            0 0 0 1px fn.color(--border), fn.color(--shadow);
         color:                 fn.global-color(--fg);
 
         @include iro.bem-modifier('sm') {
@@ -70,52 +70,41 @@
             max-width: fn.dim(--width-lg);
         }
 
-        @include iro.bem-elem('sidebar') {
-            grid-area:        sidebar;
-            padding:          fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
-            border-right:     1px solid fn.color(--sidebar --border);
-            background-color: fn.color(--sidebar --bg);
+        @include iro.bem-elem('sidebar-header') {
+            grid-area:    sidebar-header;
+            border-right: 1px solid fn.color(--sidebar --border);
+
+            @include iro.bem-sibling-elem('header') {
+                grid-area: header;
+            }
         }
 
         @include iro.bem-elem('header') {
-            grid-area: header;
-            margin:    fn.dim(--pad-y) fn.dim(--pad-x) 0;
+            grid-area: sidebar-header / sidebar-header / header / header;
+        }
 
-            @include iro.bem-sibling-elem('body') {
-                &::before {
-                    display: none;
-                }
-            }
+        @include iro.bem-elem('close-btn') {
+            margin-left: auto;
         }
 
-        @include iro.bem-elem('body') {
-            grid-area:  body;
-            min-height: 0;
-            margin:     fn.dim(--pad-y) fn.dim(--pad-x);
+        @include iro.bem-elem('label') {
+            padding: 0 calc(fn.dim(--body --pad-x) - fn.foreign-dim(--header, --pad-x));
+        }
 
-            &::before {
-                content: '';
-                width:   fn.global-dim(--size --500);
-                height:  fn.global-dim(--size --500);
-                float:   right;
-            }
+        @include iro.bem-elem('sidebar') {
+            grid-area: sidebar;
         }
 
-        @include iro.bem-elem('close-btn') {
-            position:  absolute;
-            top:       fn.global-dim(--size --150);
-            right:     fn.global-dim(--size --150);
-            font-size: fn.global-dim(--font-size --150);
+        @include iro.bem-elem('body') {
+            grid-area:  body;
+            min-height: 0;
+            padding:    fn.dim(--body --pad-y) fn.dim(--body --pad-x);
         }
 
         @include iro.bem-elem('footer') {
             grid-area:       footer;
             justify-content: flex-end;
-            margin:          0 fn.dim(--pad-x) fn.dim(--pad-y);
-        }
-
-        @include iro.bem-elem('title') {
-            margin-top: 0;
+            padding:         fn.dim(--body --pad-y) fn.dim(--body --pad-x);
         }
     }
 }
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
new file mode 100644
index 0000000..cef598f
--- /dev/null
+++ b/src/objects/_divider.scss
@@ -0,0 +1,131 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('divider') {
+    @include iro.props-store((
+        --dims: (
+            --margin-y: fn.global-dim(--size --85),
+    
+            --strong: (
+                --border-width:    fn.global-dim(--border-width --thick),
+                --label-font-size: fn.global-dim(--font-size --100),
+            ),
+            --medium: (
+                --border-width:    fn.global-dim(--border-width --medium),
+                --label-font-size: fn.global-dim(--font-size --75),
+            ),
+            --faint: (
+                --border-width:    fn.global-dim(--border-width --thin),
+                --label-font-size: fn.global-dim(--font-size --50),
+            ),
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --strong: (
+                --bg:    fn.global-color(--fg),
+                --label: fn.global-color(--fg),
+            ),
+            --medium: (
+                --bg:    fn.global-color(--obj),
+                --label: fn.global-color(--fg-hi),
+            ),
+            --faint: (
+                --bg:    fn.global-color(--obj),
+                --label: fn.global-color(--fg-hi2),
+            ),
+        ),
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          block;
+        height:           fn.dim(--strong --border-width);
+        margin-top:       fn.dim(--margin-y);
+        margin-bottom:    fn.dim(--margin-y);
+        background-color: fn.color(--strong --bg);
+
+        @include iro.bem-modifier('vertical') {
+            align-self:       stretch;
+            width:            1px;
+            height:           auto;
+            margin-top:       0;
+            margin-bottom:    0;
+            background-color: fn.color(--faint --bg);
+        }
+
+        @include iro.bem-modifier('medium') {
+            height:           fn.dim(--medium --border-width);
+            background-color: fn.color(--medium --bg);
+        }
+
+        @include iro.bem-modifier('faint') {
+            height:           fn.dim(--faint --border-width);
+            background-color: fn.color(--faint --bg);
+        }
+
+        @include iro.bem-modifier('labelled') {
+            display:          flex;
+            flex-direction:   row;
+            align-items:      center;
+            height:           auto;
+            border-radius:    0;
+            background-color: transparent;
+
+            &::before,
+            &::after {
+                content:          '';
+                display:          block;
+                flex:             1 1 auto;
+                width:            100%;
+                height:           3px;
+                background-color: fn.color(--strong --bg);
+            }
+
+            &::before {
+                margin-right: 1em;
+            }
+
+            &::after {
+                margin-left: 1em;
+            }
+
+            @include iro.bem-elem('label') {
+                flex:           0 0 auto;
+                color:          fn.color(--strong --label);
+                font-size:      fn.dim(--strong --label-font-size);
+                font-weight:    700;
+                letter-spacing: .5px;
+                text-transform: uppercase;
+            }
+
+            @include iro.bem-modifier('medium') {
+                &::before,
+                &::after {
+                    height:           2px;
+                    background-color: fn.color(--medium --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color:       fn.color(--medium --label);
+                    font-size:   fn.dim(--medium --label-font-size);
+                    font-weight: 500;
+                }
+            }
+
+            @include iro.bem-modifier('faint') {
+                &::before,
+                &::after {
+                    height:           1px;
+                    background-color: fn.color(--faint --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color:       fn.color(--faint --label);
+                    font-size:   fn.dim(--faint --label-font-size);
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_header.scss b/src/objects/_header.scss
new file mode 100644
index 0000000..773d584
--- /dev/null
+++ b/src/objects/_header.scss
@@ -0,0 +1,31 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('header') {
+    @include iro.props-store((
+        --dims: (
+            --pad-x: fn.global-dim(--size --75),
+            --pad-y: fn.global-dim(--size --75)
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --border: fn.global-color(--obj),
+        ),
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        border-bottom: 1px solid fn.color(--border);
+
+        @include iro.bem-elem('content') {
+            display:          flex;
+            box-sizing:       border-box;
+            align-items:      center;
+            height:           100%;
+            padding:          fn.dim(--pad-y) fn.dim(--pad-x);
+            background-color: fn.global-color(--bg);
+            color:            fn.global-color(--fg);
+        }
+    }
+}
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 48088ba..3c14c99 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -23,12 +23,15 @@
     @include iro.bem-object(iro.props-namespace()) {
         @include mx.set-font(--headline);
 
-        display:       block;
-        margin-top:    fn.dim(--in-page-margin --top);
-        margin-bottom: 0;
+        display: block;
 
-        & + & {
-            margin-top: fn.dim(--in-page-margin --top-sibling);
+        @include iro.bem-at-theme('typography') {
+            margin-top:    fn.dim(--in-page-margin --top);
+            margin-bottom: 0;
+    
+            & + & {
+                margin-top: fn.dim(--in-page-margin --top-sibling);
+            }
         }
 
         @include iro.bem-modifier('xxl') {
@@ -54,8 +57,8 @@
         @include iro.bem-modifier('sm') {
             @include mx.set-font(--standard, (
                 --line-height: null,
-                --size: fn.global-dim(--font-size --100),
-                --weight: 500
+                --size:        fn.global-dim(--font-size --100),
+                --weight:      700
             ));
 
             color: fn.color(--strong);
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index f3addf7..435ff88 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,6 +1,8 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
+@use 'action-button';
+
 @include iro.props-namespace('lightbox') {
     @include iro.props-store((
         --dims: (
diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss
index 521bc19..1093ad8 100644
--- a/src/objects/_list-group.scss
+++ b/src/objects/_list-group.scss
@@ -31,7 +31,7 @@
                 border-top: 1px solid fn.color(--border);
             }
 
-            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'action') {
+            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                 &:hover {
                     background-color: fn.color(--hover);
                 }
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
deleted file mode 100644
index ba09414..0000000
--- a/src/objects/_rule.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('rule') {
-    @include iro.props-store((
-        --dims: (
-            --margin-y: fn.global-dim(--size --85),
-    
-            --strong: (
-                --border-width:    fn.global-dim(--border-width --thick),
-                --label-font-size: fn.global-dim(--font-size --100),
-            ),
-            --medium: (
-                --border-width:    fn.global-dim(--border-width --medium),
-                --label-font-size: fn.global-dim(--font-size --75),
-            ),
-            --faint: (
-                --border-width:    fn.global-dim(--border-width --thin),
-                --label-font-size: fn.global-dim(--font-size --50),
-            ),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --strong: (
-                --bg:    fn.global-color(--fg),
-                --label: fn.global-color(--fg),
-            ),
-            --medium: (
-                --bg:    fn.global-color(--obj),
-                --label: fn.global-color(--fg-hi),
-            ),
-            --faint: (
-                --bg:    fn.global-color(--obj),
-                --label: fn.global-color(--fg-hi2),
-            ),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:          block;
-        height:           fn.dim(--strong --border-width);
-        margin-top:       fn.dim(--margin-y);
-        margin-bottom:    fn.dim(--margin-y);
-        background-color: fn.color(--strong --bg);
-
-        @include iro.bem-modifier('vertical') {
-            align-self:       stretch;
-            width:            1px;
-            height:           auto;
-            margin-top:       0;
-            margin-bottom:    0;
-            background-color: fn.color(--faint --bg);
-        }
-
-        @include iro.bem-modifier('medium') {
-            height:           fn.dim(--medium --border-width);
-            background-color: fn.color(--medium --bg);
-        }
-
-        @include iro.bem-modifier('faint') {
-            height:           fn.dim(--faint --border-width);
-            background-color: fn.color(--faint --bg);
-        }
-
-        @include iro.bem-modifier('labelled') {
-            display:          flex;
-            flex-direction:   row;
-            align-items:      center;
-            height:           auto;
-            border-radius:    0;
-            background-color: transparent;
-
-            &::before,
-            &::after {
-                content:          '';
-                display:          block;
-                flex:             1 1 auto;
-                width:            100%;
-                height:           3px;
-                background-color: fn.color(--strong --bg);
-            }
-
-            &::before {
-                margin-right: 1em;
-            }
-
-            &::after {
-                margin-left: 1em;
-            }
-
-            @include iro.bem-elem('label') {
-                flex:           0 0 auto;
-                color:          fn.color(--strong --label);
-                font-size:      fn.dim(--strong --label-font-size);
-                font-weight:    700;
-                letter-spacing: .5px;
-                text-transform: uppercase;
-            }
-
-            @include iro.bem-modifier('medium') {
-                &::before,
-                &::after {
-                    height:           2px;
-                    background-color: fn.color(--medium --bg);
-                }
-
-                @include iro.bem-elem('label') {
-                    color:       fn.color(--medium --label);
-                    font-size:   fn.dim(--medium --label-font-size);
-                    font-weight: 500;
-                }
-            }
-
-            @include iro.bem-modifier('faint') {
-                &::before,
-                &::after {
-                    height:           1px;
-                    background-color: fn.color(--faint --bg);
-                }
-
-                @include iro.bem-elem('label') {
-                    color:       fn.color(--faint --label);
-                    font-size:   fn.dim(--faint --label-font-size);
-                    font-weight: 500;
-                }
-            }
-        }
-    }
-}
diff --git a/src/objects/_sidebar.scss b/src/objects/_sidebar.scss
new file mode 100644
index 0000000..bf8dd59
--- /dev/null
+++ b/src/objects/_sidebar.scss
@@ -0,0 +1,36 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('sidebar') {
+    @include iro.props-store((
+        --dims: (
+            --pad-x: fn.global-dim(--size --75),
+            --pad-y: fn.global-dim(--size --75)
+        ),
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --border: fn.global-color(--obj),
+        ),
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        border-width: 0 1px 0 0;
+        border-style: solid;
+        border-color: fn.color(--border);
+
+        @include iro.bem-elem('content') {
+            box-sizing:       border-box;
+            height:           100%;
+            padding:          fn.dim(--pad-y) fn.dim(--pad-x);
+            background-color: fn.global-color(--bg);
+            color:            fn.global-color(--fg);
+        }
+
+        @include iro.bem-modifier('right') {
+            border-right-width: 0;
+            border-left-width:  1px;
+        }
+    }
+}
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 410492b..1365d05 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -5,7 +5,7 @@
 @include iro.props-namespace('table') {
     @include iro.props-store((
         --dims: (
-            --pad-x:    fn.global-dim(--size --200),
+            --pad-x:    fn.global-dim(--size --175),
             --pad-y:    fn.global-dim(--size --125),
             --rounding: 3px,
             --50: (
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index e9330ce..1e18f0a 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -37,6 +37,11 @@
             --border-width:  fn.global-dim(--border-width --thin),
             --border-radius: 2px,
 
+            --extended: (
+                --pad:           fn.global-dim(--size --50),
+                --border-radius: 6px,
+            ),
+
             --focus: (
                 --border-width:  fn.global-dim(--border-width --medium),
             )
@@ -87,7 +92,8 @@
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
-        $line-height: 1.4;
+        $line-height:         1.4;
+        $focus-border-offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width));
 
         position:         relative;
         min-width:        0;
@@ -133,14 +139,12 @@
                 outline: 0;
 
                 @include iro.bem-sibling-elem('bg') {
-                    $offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width));
-
-                    top:           $offset;
-                    right:         $offset;
-                    bottom:        $offset;
-                    left:          $offset;
+                    top:           $focus-border-offset;
+                    right:         $focus-border-offset;
+                    bottom:        $focus-border-offset;
+                    left:          $focus-border-offset;
                     border:        fn.dim(--focus --border-width) solid fn.color(--focus --border);
-                    border-radius: calc(fn.dim(--border-radius) - $offset);
+                    border-radius: calc(fn.dim(--border-radius) - $focus-border-offset);
                     box-shadow:    fn.color(--focus --shadow);
                 }
             }
@@ -150,6 +154,22 @@
             }
         }
 
+        @include iro.bem-modifier('extended') {
+            padding: fn.dim(--extended --pad);
+
+            @include iro.bem-multi('&', 'elem' 'bg') {
+                border-radius: calc(fn.dim(--border-radius) + fn.dim(--extended --pad));
+            }
+
+            @include iro.bem-elem('native') {
+                &:focus {
+                    @include iro.bem-sibling-elem('bg') {
+                        border-radius: calc(fn.dim(--extended --border-radius) - $focus-border-offset);
+                    }
+                }
+            }
+        }
+
         @include iro.bem-is('invalid') {
             @include iro.bem-elem('native') {
                 @include invalid;
-- 
cgit v1.2.3-70-g09d2