Lots of updates, especially dialog

11 files changed, 157 insertions, 126 deletions

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;