Lots of updates, especially dialog

33 files changed, 361 insertions, 236 deletions

diff --git a/package.json b/package.json
index 6047b47..122839c 100644
--- a/package.json
+++ b/package.json
@@ -27,8 +27,8 @@
         "postcss-scss": "^4.0.3",
         "pug": "^3.0.0",
         "pug-cli": "^1.0.0-alpha6",
-        "sass": "^1.49.8",
-        "stylelint": "^14.5.1",
+        "sass": "^1.49.9",
+        "stylelint": "^14.6.1",
         "stylelint-config-sass-guidelines": "^9.0.1",
         "svg-sprite": "^1.5.4"
     }
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/_rule.scss b/src/objects/_divider.scss
index ba09414..cef598f 100644
--- a/src/objects/_rule.scss
+++ b/src/objects/_divider.scss
@@ -1,7 +1,7 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-@include iro.props-namespace('rule') {
+@include iro.props-namespace('divider') {
     @include iro.props-store((
         --dims: (
             --margin-y: fn.global-dim(--size --85),
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/_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;
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss
index 6045e4b..2f9a2d0 100644
--- a/src_demo/components/_content.scss
+++ b/src_demo/components/_content.scss
@@ -3,5 +3,6 @@
 @include iro.props-namespace('content') {
     @include iro.bem-component(iro.props-namespace()) {
         grid-area: content;
+        overflow:  auto;
     }
 }
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
index 9cff3c8..6b7eaf0 100644
--- a/src_demo/components/_sidebar.scss
+++ b/src_demo/components/_sidebar.scss
@@ -2,28 +2,9 @@
 @use '../../src/functions' as fn;
 
 @include iro.props-namespace('sidebar') {
-    @include iro.props-store((
-        --colors: (
-            --bg:              fn.global-color(--bg),
-            --border:          fn.global-color(--obj),
-            --icon:            fn.global-color(--fg-hi),
-            --group-header-fg: fn.global-color(--fg-hi),
-        ),
-    ), 'colors');
-
-    @include iro.props-store((
-        --colors: (
-            --bg:     fn.global-color(--bg-hi),
-            --border: fn.global-color(--bg-hi),
-        ),
-    ), 'colors-dark');
-
     @include iro.bem-component(iro.props-namespace()) {
-        grid-area:        sidebar;
-        min-width:        10em;
-        padding:          .6em;
-        overflow:         auto;
-        border-right:     1px solid fn.color(--border);
-        background-color: fn.color(--bg);
+        grid-area:  sidebar;
+        min-width:  15em;
+        min-height: 0;
     }
 }
diff --git a/tpl/index.pug b/tpl/index.pug
index 400ec64..14bfa10 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -7,7 +7,7 @@
 include layouts/container.pug
 
 include objects/heading.pug
-include objects/rule.pug
+include objects/divider.pug
 include objects/badge.pug
 include objects/button.pug
 include objects/text-field.pug
@@ -27,14 +27,16 @@ include objects/lightbox.pug
 include objects/list-group.pug
 include objects/table.pug
 include objects/alert.pug
+include objects/header.pug
+include objects/sidebar.pug
 
 mixin view(id, title)
     -
         views.push({ id, title });
 
-    +container(padX=true padY=true narrow=true)(class='c-view' id=id)
+    +container(padX=true padY=true narrow=true class='c-view' id=id)
         +h1-heading('xl')= title
-        +rule('medium')
+        +divider('medium')
         block
 
 mixin user-card(name, hue)
@@ -47,7 +49,7 @@ mixin user-card(name, hue)
         = name
 
 include views/heading.pug
-include views/rule.pug
+include views/divider.pug
 include views/colored-links.pug
 include views/badge.pug
 include views/button.pug
@@ -80,9 +82,9 @@ html
         script(src="script.js")
 
     body
-        .c-content
+        .c-content.l-overflow
             +view-heading
-            +view-rule
+            +view-divider
             +view-colored-links
             +view-badge
             +view-button
@@ -104,7 +106,7 @@ html
             +view-table
             +view-alert 
 
-        .c-sidebar
+        +sidebar(class='c-sidebar')
             +menu
                 each view in views
                     +menu-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index 0467bd7..f99d789 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -4,7 +4,7 @@ mixin action-button
     -
         let classes = {
             'o-action-button':        true,
-            'o-action-button--block': attributes.block,
+            'u-d-block':              attributes.block,
             'o-action-button--quiet': attributes.quiet,
             'o-action-button--round': attributes.round,
             'is-selected':            attributes.selected
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 2823e41..2474cc3 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -1,7 +1,6 @@
-include rule.pug
-include button.pug
 include heading.pug
-include action-button.pug
+include header.pug
+include sidebar.pug
 
 mixin dialog(title)
     - const slots = {}
@@ -13,9 +12,7 @@ mixin dialog(title)
         block ? block() : undefined 
 
         let classes = {
-            'o-dialog':        true,
-            't-raised':        true,
-            'o-dialog--split': !!slots.sidebar,
+            'o-dialog': true,
         }
 
         let bodyClass = {
@@ -26,16 +23,26 @@ mixin dialog(title)
         }
 
     div(class=classes)
+        if slots['sidebar-header']
+            +header(class='o-dialog__sidebar-header')
+                - slots['sidebar-header']()
+
         if slots.sidebar
-            .o-dialog__sidebar
+            +sidebar(class='o-dialog__sidebar')
                 - slots.sidebar()
-        header.o-dialog__header
-            +div-heading('md')(class='o-dialog__title')
-                = title
-        +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
+
+        +header(class='o-dialog__header')
+            if slots.header
+                - slots.header()
+            else
+                if title
+                    +div-heading('sm')(class='o-dialog__label')= title
+            +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
+
         section(class=bodyClass)
             if slots.body
                 - slots.body()
+
         footer.o-dialog__footer.l-button-group
             +a-button(outline=true)= 'Cancel'
             = ' '
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug
new file mode 100644
index 0000000..094df07
--- /dev/null
+++ b/tpl/objects/divider.pug
@@ -0,0 +1,12 @@
+mixin divider(level)
+    -
+        let classes = {
+            'o-divider':             true,
+            'o-divider--labelled':   !!block,
+            ['o-divider--' + level]: true
+        }
+
+    div(class=classes)&attributes(attributes)
+        if block
+            .o-divider__label
+                block
diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug
new file mode 100644
index 0000000..4518afc
--- /dev/null
+++ b/tpl/objects/header.pug
@@ -0,0 +1,12 @@
+mixin header
+    -
+        let classes = {
+            'o-header': true
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    header(class=classes)
+        .o-header__content.t-lowered
+            block
diff --git a/tpl/objects/list-group.pug b/tpl/objects/list-group.pug
index 36be264..ad3c212 100644
--- a/tpl/objects/list-group.pug
+++ b/tpl/objects/list-group.pug
@@ -5,8 +5,8 @@ mixin list-group
 mixin list-group-item
     -
         let classes = {
-            'o-list-group__item':         true,
-            'o-list-group__item--action': attributes.action,
+            'o-list-group__item':              true,
+            'o-list-group__item--interactive': attributes.interactive,
         }
 
     div(class=classes)
diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug
deleted file mode 100644
index b2f3a38..0000000
--- a/tpl/objects/rule.pug
+++ /dev/null
@@ -1,12 +0,0 @@
-mixin rule(level)
-    -
-        let classes = {
-            'o-rule':             true,
-            'o-rule--labelled':   !!block,
-            ['o-rule--' + level]: true
-        }
-
-    div(class=classes)&attributes(attributes)
-        if block
-            .o-rule__label
-                block
diff --git a/tpl/objects/sidebar.pug b/tpl/objects/sidebar.pug
new file mode 100644
index 0000000..caa0f1f
--- /dev/null
+++ b/tpl/objects/sidebar.pug
@@ -0,0 +1,12 @@
+mixin sidebar
+    -
+        let classes = {
+            'o-sidebar': true
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    aside(class=classes)
+        .o-sidebar__content.l-overflow
+            block
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index cbdb8c4..673aa27 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -10,23 +10,33 @@ mixin text-field
         block ? block() : undefined 
 
         let classes = {
-            'o-text-field':      true,
-            'o-text-field--ext': attributes.ext,
-            'is-invalid':        attributes.invalid,
-            'is-disabled':       attributes.disabled,
-            'l-card':            !!block,
-            'l-card--flush':     !!block,
-            'l-card--gapless':   !!block
+            'o-text-field':           true,
+            'o-text-field--extended': !!block,
+            'is-invalid':             attributes.invalid,
+            'is-disabled':            attributes.disabled,
+            'l-card':                 !!block,
+            'l-card--flush':          !!block,
+            'l-card--gapless':        !!block
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+        const attr = {
+            placeholder: attributes.placeholder,
+            disabled:    attributes.disabled
         }
 
     div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
         if !!block
             if slots.pre
-                - slots.pre()
-            input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes)
+                .u-d-contents.t-raised
+                    - slots.pre()
+            input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr)
             if slots.post
-                - slots.post()
+                .u-d-contents.t-raised
+                    - slots.post()
             .o-text-field__bg
         else
-            input.o-text-field__native&attributes(attributes)
+            input.o-text-field__native&attributes(attr)
             .o-text-field__bg
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 6aaead5..0b6f8e7 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -18,10 +18,40 @@ mixin view-dialog
 
         .c-box
             +backdrop
-                +dialog('Lorem ipsum')(noRule=true)
+                +dialog('Tags')
+                    +slot('sidebar-header')
+                        +div-heading('sm')(class='o-dialog__label')= '#channel'
+                    +slot('sidebar')
+                        +menu(style={ 'min-width': '10em' })
+                            +menu-item(icon='bookmark')= 'Bookmark'
+                            +menu-item(icon='tags', selected=true)= 'Tags'
+                            +menu-item(icon='hash')= 'achannel'
+                    +slot('body')
+                        p.u-mt-0= loremIpsum
+
+        .c-box
+            +backdrop
+                +dialog('#channel')
+                    +slot('sidebar')
+                        +menu(style={ 'min-width': '10em' })
+                            +menu-item(icon='bookmark')= 'Bookmark'
+                            +menu-item(icon='tags', selected=true)= 'Tags'
+                            +menu-item(icon='hash')= 'achannel'
+                    +slot('body')
+                        p.u-mt-0= loremIpsum
+
+        .c-box
+            +backdrop
+                +dialog
+                    +slot('header')
+                        .l-card.l-card--flush
+                            .l-card__block.l-flex
+                                +action-button(quiet=true icon='chevron-left')
+                                +action-button(quiet=true icon='chevron-right')
+                            .l-card__block.l-card__block--main
+                                +div-heading('sm')= 'Tags'
                     +slot('sidebar')
                         +menu(style={ 'min-width': '10em' })
-                            +menu-header= '#channel'
                             +menu-item(icon='bookmark')= 'Bookmark'
                             +menu-item(icon='tags', selected=true)= 'Tags'
                             +menu-item(icon='hash')= 'achannel'
diff --git a/tpl/views/rule.pug b/tpl/views/divider.pug
index 495c804..8c3ec0c 100644
--- a/tpl/views/rule.pug
+++ b/tpl/views/divider.pug
@@ -1,21 +1,21 @@
-mixin view-rule 
-    +view('rule', 'Rule')
+mixin view-divider 
+    +view('divider', 'Divider')
         .c-box
             +div-heading('lg')= 'Heading'
-            +rule('strong')
+            +divider('strong')
             p= loremIpsum
 
         .c-box
             +div-heading('sm')= 'Heading'
-            +rule('medium')
+            +divider('medium')
             p= loremIpsum
 
         .c-box
             +div-heading('xs')= 'Heading'
-            +rule('faint')
+            +divider('faint')
             p= loremIpsum
 
         .c-box
-            +rule('strong')= 'Strong'
-            +rule('medium')= 'Medium'
-            +rule('faint')= 'Faint'
+            +divider('strong')= 'Strong'
+            +divider('medium')= 'Medium'
+            +divider('faint')= 'Faint'
diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug
index 970f0fb..9acef31 100644
--- a/tpl/views/list-group.pug
+++ b/tpl/views/list-group.pug
@@ -9,7 +9,7 @@ mixin view-list-group
 
         .c-box
             +list-group
-                +list-group-item(action=true)= 'First item'
-                +list-group-item(action=true)= 'Second item'
-                +list-group-item(action=true)= 'Third item'
-                +list-group-item(action=true)= 'Fourth item'
+                +list-group-item(interactive=true)= 'First item'
+                +list-group-item(interactive=true)= 'Second item'
+                +list-group-item(interactive=true)= 'Third item'
+                +list-group-item(interactive=true)= 'Fourth item'
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 0ba84be..262195d 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -14,9 +14,10 @@ mixin view-text-field
                 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
             br
             div
-                +text-field(placeholder='Just landed in L.A.')
+                +text-field(placeholder='Just landed in L.A.' class="u-p-50")
                     +slot('pre')
-                        +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
+                        +action-button(quiet=true class='l-card__block')= 'Volpeon'
+                        +divider('vertical')(class='u-ml-50')
                     +slot('post')
                         +action-button(quiet=true icon='smile' class='l-card__block')
                         +action-button(quiet=true icon='send' class='l-card__block')
diff --git a/yarn.lock b/yarn.lock
index 3745f64..6962c41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -705,10 +705,10 @@ debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@^4.3.3:
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
-  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
+debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
@@ -1266,7 +1266,7 @@ internal-slot@^1.0.3:
 
 "iro-icons@git+https://git.vulpes.one/git/iro-icons.git":
   version "1.0.0"
-  resolved "git+https://git.vulpes.one/git/iro-icons.git#b871fcd977047a20812ebac8d82f7a1d695eee2b"
+  resolved "git+https://git.vulpes.one/git/iro-icons.git#b07eab73627edc89c31da7f207348bb86c71adb4"
 
 "iro-sass@git+https://git.vulpes.one/git/iro-sass.git":
   version "1.0.2"
@@ -1745,6 +1745,11 @@ nanoid@^3.2.0:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
   integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
 
+nanoid@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
+  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
+
 normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -1985,7 +1990,7 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.3.11, postcss@^8.4.6:
+postcss@^8.3.11:
   version "8.4.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
   integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
@@ -1994,6 +1999,15 @@ postcss@^8.3.11, postcss@^8.4.6:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.12:
+  version "8.4.12"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
+  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
+  dependencies:
+    nanoid "^3.3.1"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prettysize@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/prettysize/-/prettysize-2.0.0.tgz#902c02480d865d9cc0813011c9feb4fa02ce6996"
@@ -2458,10 +2472,10 @@ safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass@^1.49.8:
-  version "1.49.8"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.8.tgz#9bbbc5d43d14862db07f1c04b786c9da9b641828"
-  integrity sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==
+sass@^1.49.9:
+  version "1.49.9"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9"
+  integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -2693,16 +2707,16 @@ stylelint-scss@^4.0.0:
     postcss-selector-parser "^6.0.6"
     postcss-value-parser "^4.1.0"
 
-stylelint@^14.5.1:
-  version "14.5.1"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.5.1.tgz#2b2575ccaf14bb057209d48fc87c17d5b684f8db"
-  integrity sha512-8Hf4HtnhxlWlf7iXF9zFfhSc3X0teRnVzl6PqPs2JEFx+dy/mhMhghZfiTDW4QG0ihDw9+WP7GZw5Nzx7cQF5A==
+stylelint@^14.6.1:
+  version "14.6.1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.6.1.tgz#aff137b0254515fc36b91921d88a3eb2edc194bf"
+  integrity sha512-FfNdvZUZdzh9KDQxDnO7Opp+prKh8OQVuSW8S13cBtxrooCbm6J6royhUeb++53WPMt04VB+ZbOz/QmzAijs6Q==
   dependencies:
     balanced-match "^2.0.0"
     colord "^2.9.2"
     cosmiconfig "^7.0.1"
     css-functions-list "^3.0.1"
-    debug "^4.3.3"
+    debug "^4.3.4"
     execall "^2.0.0"
     fast-glob "^3.2.11"
     fastest-levenshtein "^1.0.12"
@@ -2723,7 +2737,7 @@ stylelint@^14.5.1:
     normalize-path "^3.0.0"
     normalize-selector "^0.2.0"
     picocolors "^1.0.0"
-    postcss "^8.4.6"
+    postcss "^8.4.12"
     postcss-media-query-parser "^0.2.3"
     postcss-resolve-nested-selector "^0.1.1"
     postcss-safe-parser "^6.0.0"