From 6376f1a5225b2fa45f6c861d4a265bf13b56d038 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 29 Jun 2024 10:01:02 +0200
Subject: Update

---
 src/.old/layouts/_message-group.scss | 139 ++++++++++++++++++++
 src/.old/objects/_lightbox.scss      | 206 -----------------------------
 src/.old/objects/_list-group.scss    |  61 +++++++++
 src/_config.scss                     |  16 +--
 src/_layouts.scss                    |   2 +-
 src/_objects.scss                    |   4 +-
 src/_themes.scss                     |   8 ++
 src/layouts/_card-list.scss          |  40 ++++--
 src/layouts/_container.scss          |  25 ++--
 src/layouts/_message-group.scss      | 139 --------------------
 src/objects/_avatar.scss             |   4 +-
 src/objects/_card.scss               |  15 +--
 src/objects/_lightbox.scss           | 243 +++++++++++++++++++++++++++++++++++
 src/objects/_list-group.scss         |  61 ---------
 src/objects/_status-indicator.scss   |   4 +-
 src/scopes/_links.scss               |  75 ++++++++---
 16 files changed, 572 insertions(+), 470 deletions(-)
 create mode 100644 src/.old/layouts/_message-group.scss
 delete mode 100644 src/.old/objects/_lightbox.scss
 create mode 100644 src/.old/objects/_list-group.scss
 delete mode 100644 src/layouts/_message-group.scss
 create mode 100644 src/objects/_lightbox.scss
 delete mode 100644 src/objects/_list-group.scss

(limited to 'src')

diff --git a/src/.old/layouts/_message-group.scss b/src/.old/layouts/_message-group.scss
new file mode 100644
index 0000000..235e242
--- /dev/null
+++ b/src/.old/layouts/_message-group.scss
@@ -0,0 +1,139 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+// @use '../objects/message';
+
+@include iro.props-namespace('message-group') {
+    @include iro.props-store((
+        --dims: (
+            --spacing-x:  fn.global-dim(--size --225),
+            --spacing-y:  fn.global-dim(--size --150),
+            --arrow-size: fn.global-dim(--size --100),
+
+            --compact: (
+                --spacing-x: fn.global-dim(--size --225),
+                --spacing-y: fn.global-dim(--size --50),
+            )
+        )
+    ));
+
+    @include iro.bem-layout(iro.props-namespace()) {
+        display:               grid;
+        grid-template-columns: auto 1fr;
+        grid-auto-rows:        auto;
+        grid-template-areas:   'avatar message' 'avatar .';
+        align-items:           flex-start;
+        gap:                   0 fn.dim(--spacing-x);
+        
+        @include iro.bem-elem('avatar') {
+            grid-area:  avatar;
+            block-size: 0;
+        }
+        
+        @include iro.bem-elem('message') {
+            grid-column:     message;
+            position:        relative;
+            box-sizing:      border-box;
+            min-inline-size: 0;
+            max-inline-size: 100%;
+
+            &::before {
+                content:             '';
+                display:             none;
+                position:            absolute;
+                top:                 0;
+                left:                calc(-1 * fn.dim(--arrow-size));
+                border:              fn.dim(--arrow-size) solid fn.global-color(--bg-l2);
+                border-bottom-color: transparent;
+                border-left-color:   transparent;
+            }
+
+            @include iro.bem-next-twin-elem {
+                margin-top: fn.dim(--spacing-y);
+            }
+        }
+        
+        @include iro.bem-modifier('right') {
+            @include iro.bem-elem('message') {
+                &::before {
+                    right:              calc(-1 * fn.dim(--arrow-size));
+                    left:               auto;
+                    border-right-color: transparent;
+                    border-left-color:  fn.global-color(--bg-l2);
+                }
+            }
+        }
+        
+        @include iro.bem-modifier('compact') {
+            gap: 0 fn.dim(--compact --spacing-x);
+        
+            @include iro.bem-modifier('left') {
+                justify-items: start;
+            }
+        
+            @include iro.bem-modifier('right') {
+                justify-items: end;
+            }
+        
+            @include iro.bem-elem('message') {
+                @include iro.bem-next-twin-elem {
+                    margin-top: fn.dim(--compact --spacing-y);
+                }
+            }
+        }
+        
+        @include iro.bem-modifier('right') {
+            grid-template-columns: 1fr auto;
+            grid-template-areas:   'message avatar' '. avatar';
+        }
+        
+        @include iro.bem-modifier('no-avatar') {
+            grid-template-columns: 1fr;
+            grid-template-areas:   'message';
+
+            @include iro.bem-elem('avatar') {
+                display: none;
+            }
+        }
+        
+        @include iro.bem-modifier('arrow') {
+            @include iro.bem-elem('message') {
+                &::before {
+                    display: block;
+                }
+
+                @include iro.bem-next-twin-elem {
+                    &::before {
+                        display: none;
+                    }
+                }
+            }
+        }
+        
+        & + & {
+            @include iro.bem-modifier('merge') {
+                margin-top: fn.dim(--spacing-y);
+
+                @include iro.bem-elem('avatar') {
+                    visibility: hidden;
+                }
+
+                @include iro.bem-modifier('compact') {
+                    margin-top: fn.dim(--compact --spacing-y);
+                }
+
+                @include iro.bem-elem('merge-hide') {
+                    display: none;
+                }
+        
+                @include iro.bem-modifier('arrow') {
+                    @include iro.bem-elem('message') {
+                        &::before {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/.old/objects/_lightbox.scss b/src/.old/objects/_lightbox.scss
deleted file mode 100644
index 31d3398..0000000
--- a/src/.old/objects/_lightbox.scss
+++ /dev/null
@@ -1,206 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@use 'action-button';
-
-@include iro.props-namespace('lightbox') {
-    @include iro.props-store((
-        --dims: (
-            --pad: fn.global-dim(--size --150),
-            --thumbnail: (
-                --size:     fn.global-dim(--size --700),
-                --spacing:  fn.global-dim(--size --100),
-                --idle:     1px,
-                --selected: 2px,
-            ),
-            --close-button: (
-                --font-size: fn.global-dim(--font-size --200),
-            ),
-            --nav-button: (
-                --width:     fn.global-dim(--size --3800),
-                --height:    fn.global-dim(--size --3800),
-                --font-size: fn.global-dim(--font-size --200),
-            ),
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --dims: (
-            --thumbnail: (
-                --size: fn.global-dim(--size --600),
-            ),
-            --nav-button: (
-                --width:  fn.global-dim(--size --2500),
-                --height: fn.global-dim(--size --2500),
-            ),
-        ),
-    ), 'md');
-
-    @include iro.props-store((
-        --colors: (
-            --thumbnail: (
-                --idle:     fn.global-color(--fg-hi2),
-                --selected: fn.global-color(--fg-lo),
-            ),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:               grid;
-        grid-template-rows:    auto minmax(0, 1fr) auto auto;
-        grid-template-columns: auto minmax(0, 1fr) auto;
-        grid-template-areas:
-            'header     header     header'
-            'prev       content    next'
-            'thumbnails thumbnails thumbnails'
-            'footer     footer     footer';
-        box-sizing:            border-box;
-        height:                100%;
-        overflow:              hidden;
-
-        @include iro.bem-elem('header') {
-            grid-area:   header;
-            display:     flex;
-            align-items: flex-start;
-            padding:     fn.dim(--pad) fn.dim(--pad) 0;
-        }
-
-        @include iro.bem-elem('img') {
-            display:    none;
-            box-sizing: border-box;
-            grid-area:  content;
-            width:      100%;
-            height:     100%;
-            padding:    fn.dim(--pad);
-            object-fit: scale-down;
-
-            @include iro.bem-sibling-elem('img') {
-                @include iro.bem-modifier('default') {
-                    display: block;
-
-                    @include iro.bem-next-elem('nav-btn') {
-                        display: block;
-    
-                        @include iro.bem-next-elem('nav-btn') {
-                            display: block;
-                        }
-                    }
-                }
-            }
-
-            @include iro.bem-multi('&:target', 'is' 'visible') {
-                display: block;
-
-                @include iro.bem-next-elem('nav-btn') {
-                    display: block;
-
-                    @include iro.bem-next-elem('nav-btn') {
-                        display: block;
-                    }
-                }
-
-                @include iro.bem-sibling-elem('img') {
-                    @include iro.bem-modifier('default') {
-                        display: none;
-
-                        @include iro.bem-next-elem('nav-btn') {
-                            display: none;
-        
-                            @include iro.bem-next-elem('nav-btn') {
-                                display: none;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        @include iro.bem-elem('thumbnails') {
-            grid-area: thumbnails;
-            display:   flex;
-            gap:       fn.dim(--thumbnail --spacing);
-            padding:   fn.dim(--thumbnail --selected) fn.dim(--pad) fn.dim(--pad);
-            overflow:  auto;
-        }
-
-        @include iro.bem-elem('footer') {
-            grid-area:   footer;
-            display:     flex;
-            align-items: flex-start;
-            padding:     0 fn.dim(--pad) fn.dim(--pad);
-        }
-
-        @include iro.bem-elem('thumbnail') {
-            position:  relative;
-            flex:      0 0 auto;
-            width:     fn.dim(--thumbnail --size);
-            height:    fn.dim(--thumbnail --size);
-            opacity:   .75;
-            box-shadow: 0 0 0 fn.dim(--thumbnail --idle) fn.color(--thumbnail --idle) inset;
-
-            &:hover {
-                opacity: 1;
-            }
-
-            @include iro.bem-is('selected') {
-                opacity:    1;
-                box-shadow: 0 0 0 fn.dim(--thumbnail --selected) fn.color(--thumbnail --selected);
-            }
-        }
-
-        @include iro.bem-elem('thumbnail-img') {
-            display:         block;
-            position:        absolute;
-            top:             0;
-            left:            0;
-            width:           100%;
-            height:          100%;
-            object-fit:      cover;
-            object-position: center center;
-        }
-
-        @include iro.bem-elem('thumbnail-icon') {
-            position:  absolute;
-            top:       50%;
-            left:      50%;
-            transform: translate(-50%, -50%);
-        }
-
-        @include iro.bem-elem('close-btn') {
-            flex:      0 0 auto;
-            margin:    calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto;
-            font-size: fn.dim(--close-button --font-size);
-        }
-
-        @include iro.bem-elem('nav-btn') {
-            display:    none;
-            position:   relative;
-            align-self: center;
-            overflow:   visible;
-            font-size:  fn.dim(--nav-button --font-size);
-
-            &::after {
-                content:   '';
-                display:   block;
-                position:  absolute;
-                top:       50%;
-                left:      50%;
-                width:     fn.dim(--nav-button --width);
-                height:    fn.dim(--nav-button --height);
-                transform: translate(-50%, -50%);
-            }
-
-            @include iro.bem-modifier('prev') {
-                grid-area:    prev;
-                margin-right: calc(-1 * fn.dim(--pad));
-                margin-left:  calc(.5 * fn.dim(--pad));
-            }
-    
-            @include iro.bem-modifier('next') {
-                grid-area:    next;
-                margin-right: calc(.5 * fn.dim(--pad));
-                margin-left:  calc(-1 * fn.dim(--pad));
-            }
-        }
-    }
-}
diff --git a/src/.old/objects/_list-group.scss b/src/.old/objects/_list-group.scss
new file mode 100644
index 0000000..a346828
--- /dev/null
+++ b/src/.old/objects/_list-group.scss
@@ -0,0 +1,61 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('list-group') {
+    @include iro.props-store((
+        --dims: (
+            --pad-i:    fn.global-dim(--size --175),
+            --pad-b:    fn.global-dim(--size --125),
+            --rounding: fn.global-dim(--rounding),
+            --border:   fn.global-dim(--border --thin),
+        ),
+        --colors: (
+            --bg:     fn.global-color(--base --75),
+            --border: fn.global-color(--border),
+            --hover:  fn.global-color(--border-mute),
+            --active: fn.global-color(--border),
+        )
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        border:           fn.dim(--border) solid fn.color(--border);
+        border-radius:    fn.dim(--rounding);
+        background-color: fn.color(--bg);
+
+        @include iro.bem-elem('item') {
+            padding-block:  fn.dim(--pad-b);
+            padding-inline: fn.dim(--pad-i);
+
+            @include iro.bem-next-twin-elem {
+                border-width:             0;
+                border-block-start-width: fn.dim(--border);
+                border-style:             solid;
+                border-color:             fn.color(--border);
+            }
+
+            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &:hover,
+                &:focus-visible {
+                    background-color: fn.color(--hover);
+                }
+
+                &:active {
+                    background-color: fn.color(--active);
+                }
+            }
+        }
+
+        @include iro.bem-modifier('horizontal') {
+            display: flex;
+
+            @include iro.bem-elem('item') {
+                flex: 1 0 auto;
+
+                @include iro.bem-next-twin-elem {
+                    border-block-start-width:  0;
+                    border-inline-start-width: fn.dim(--border);
+                }
+            }
+        }
+    }
+}
diff --git a/src/_config.scss b/src/_config.scss
index ffba8c9..73e0725 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -109,15 +109,15 @@ $theme-light: (
             --75:  -4,
             --100: 0,
         
-            --200: easing.cubic-bezier(.2, .1, .7, .95, math.div(1, 8)) * 106,
-            --300: easing.cubic-bezier(.2, .1, .7, .95, math.div(2, 8)) * 106,
-            --400: easing.cubic-bezier(.2, .1, .7, .95, math.div(3, 8)) * 106,
+            --200: easing.cubic-bezier(.2, .1, .8, 1, math.div(1, 8)) * 106,
+            --300: easing.cubic-bezier(.2, .1, .8, 1, math.div(2, 8)) * 106,
+            --400: easing.cubic-bezier(.2, .1, .8, 1, math.div(3, 8)) * 106,
         
-            --500: easing.cubic-bezier(.2, .1, .7, .95, math.div(4, 8)) * 106,
-            --600: easing.cubic-bezier(.2, .1, .7, .95, math.div(5, 8)) * 106,
-            --700: easing.cubic-bezier(.2, .1, .7, .95, math.div(6, 8)) * 106,
-            --800: easing.cubic-bezier(.2, .1, .7, .95, math.div(7, 8)) * 106,
-            --900: easing.cubic-bezier(.2, .1, .7, .95, math.div(8, 8)) * 106,
+            --500: easing.cubic-bezier(.2, .1, .8, 1, math.div(4, 8)) * 106,
+            --600: easing.cubic-bezier(.2, .1, .8, 1, math.div(5, 8)) * 106,
+            --700: easing.cubic-bezier(.2, .1, .8, 1, math.div(6, 8)) * 106,
+            --800: easing.cubic-bezier(.2, .1, .8, 1, math.div(7, 8)) * 106,
+            --900: easing.cubic-bezier(.2, .1, .8, 1, math.div(8, 8)) * 106,
         ),
 
         --colors: (
diff --git a/src/_layouts.scss b/src/_layouts.scss
index 779fd64..572308d 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -5,4 +5,4 @@
 @use 'layouts/flex';
 @use 'layouts/overflow';
 @use 'layouts/card-list';
-@use 'layouts/message-group';
+//@use 'layouts/message-group';
diff --git a/src/_objects.scss b/src/_objects.scss
index fc6e556..c5049cd 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -21,8 +21,8 @@
 // @use 'objects/icon-nav';
 @use 'objects/backdrop';
 // @use 'objects/dialog';
-// @use 'objects/lightbox';
-@use 'objects/list-group';
+@use 'objects/lightbox';
+// @use 'objects/list-group';
 @use 'objects/table';
 @use 'objects/alert';
 @use 'objects/palette';
diff --git a/src/_themes.scss b/src/_themes.scss
index 72562c0..6fcf83b 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,6 +1,8 @@
 @use 'iro-sass/src/index' as iro;
 @use 'functions' as fn;
 
+$static-themes: 'black' 'white' !default;
+
 @include iro.bem-theme('base') {
     background-color: fn.global-color(--bg-base);
 }
@@ -12,3 +14,9 @@
 @include iro.bem-theme('l2') {
     background-color: fn.global-color(--bg-l2);
 }
+
+@each $theme in $static-themes {
+    @include iro.bem-theme($theme) {
+        color: fn.global-color(--#{$theme}-transparent --800),
+    }
+}
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index c27b297..362325a 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -37,7 +37,11 @@
         @include iro.bem-modifier('grid') {
             display:               grid;
             grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
-            gap:                   fn.dim(--grid --row-gap) fn.dim(--grid --col-gap);
+            gap:                   fn.dim(--grid --col-gap);
+
+            @include iro.bem-modifier('quiet') {
+                row-gap: fn.dim(--grid --row-gap);
+            }
         }
 
         @include iro.bem-modifier('masonry') {
@@ -46,31 +50,45 @@
             column-gap: fn.dim(--masonry --col-gap);
 
             @include iro.bem-elem('card') {
-                margin-bottom: fn.dim(--masonry --row-gap);
+                margin-bottom: fn.dim(--masonry --col-gap);
+                break-inside:  avoid;
+            }
+
+            @include iro.bem-modifier('quiet') {
+                @include iro.bem-elem('card') {
+                    margin-bottom: fn.dim(--masonry --row-gap);
+                }
             }
         }
 
         @include iro.bem-modifier('masonry-h') {
             flex-flow: row wrap;
-            gap:       fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap);
+            gap:       fn.dim(--masonry-h --col-gap);
+
+            &::after {
+                content:     '';
+                display:     block;
+                flex:        1 0 auto;
+                inline-size: fn.dim(--masonry-h --row-height);
+                block-size:  0;
+            }
 
             @include iro.bem-elem('card') {
-                flex:      1 0 auto;
-                max-width: 100%;
+                flex:            1 0 auto;
+                max-inline-size: 100%;
             }
 
-            @include iro.bem-elem('card-content') {
-                height: fn.dim(--masonry-h --row-height);
+            @include iro.bem-elem('card-image') {
+                block-size: fn.dim(--masonry-h --row-height);
             }
 
-            @include iro.bem-elem('dummy') {
-                flex:   1 0 auto;
-                width:  fn.dim(--masonry-h --row-height);
+            @include iro.bem-modifier('quiet') {
+                row-gap: fn.dim(--masonry-h --row-gap);
             }
         }
 
         @include iro.bem-modifier('aspect-5\\/4') {
-            @include iro.bem-elem('card') {
+            @include iro.bem-elem('card-image') {
                 aspect-ratio: 5 / 4;
             }
         }
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index fcc4837..06607a1 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,22 +7,22 @@
             --narrow-125: iro.fn-px-to-rem(720px),
             --narrow:     iro.fn-px-to-rem(610px),
             --narrow-75:  iro.fn-px-to-rem(500px),
-            --pad-x:      fn.global-dim(--size --400),
-            --pad-y:      fn.global-dim(--size --800),
+            --pad-i:      fn.global-dim(--size --400),
+            --pad-b:      fn.global-dim(--size --800),
         )
     ));
 
     @include iro.props-store((
         --dims: (
-            --pad-x: fn.global-dim(--size --200),
-            --pad-y: fn.global-dim(--size --600),
+            --pad-i: fn.global-dim(--size --200),
+            --pad-b: fn.global-dim(--size --600),
         )
     ), 'sm');
 
     @include iro.props-store((
         --dims: (
-            --pad-x: fn.global-dim(--size --150),
-            --pad-y: fn.global-dim(--size --450),
+            --pad-i: fn.global-dim(--size --150),
+            --pad-b: fn.global-dim(--size --450),
         )
     ), 'xs');
 
@@ -30,19 +30,16 @@
         @each $size in 'narrow-125' 'narrow' 'narrow-75' {
             @include iro.bem-modifier($size) {
                 max-inline-size: fn.dim(--#{$size});
-                margin-right:    auto;
-                margin-left:     auto;
+                margin-inline:   auto;
             }
         }
 
-        @include iro.bem-modifier('pad-x') {
-            padding-right: fn.dim(--pad-x);
-            padding-left:  fn.dim(--pad-x);
+        @include iro.bem-modifier('pad-i') {
+            margin-inline: fn.dim(--pad-i);
         }
 
-        @include iro.bem-modifier('pad-y') {
-            padding-top:    fn.dim(--pad-y);
-            padding-bottom: fn.dim(--pad-y);
+        @include iro.bem-modifier('pad-b') {
+            padding-block: fn.dim(--pad-b);
         }
     }
 }
diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss
deleted file mode 100644
index 235e242..0000000
--- a/src/layouts/_message-group.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-// @use '../objects/message';
-
-@include iro.props-namespace('message-group') {
-    @include iro.props-store((
-        --dims: (
-            --spacing-x:  fn.global-dim(--size --225),
-            --spacing-y:  fn.global-dim(--size --150),
-            --arrow-size: fn.global-dim(--size --100),
-
-            --compact: (
-                --spacing-x: fn.global-dim(--size --225),
-                --spacing-y: fn.global-dim(--size --50),
-            )
-        )
-    ));
-
-    @include iro.bem-layout(iro.props-namespace()) {
-        display:               grid;
-        grid-template-columns: auto 1fr;
-        grid-auto-rows:        auto;
-        grid-template-areas:   'avatar message' 'avatar .';
-        align-items:           flex-start;
-        gap:                   0 fn.dim(--spacing-x);
-        
-        @include iro.bem-elem('avatar') {
-            grid-area:  avatar;
-            block-size: 0;
-        }
-        
-        @include iro.bem-elem('message') {
-            grid-column:     message;
-            position:        relative;
-            box-sizing:      border-box;
-            min-inline-size: 0;
-            max-inline-size: 100%;
-
-            &::before {
-                content:             '';
-                display:             none;
-                position:            absolute;
-                top:                 0;
-                left:                calc(-1 * fn.dim(--arrow-size));
-                border:              fn.dim(--arrow-size) solid fn.global-color(--bg-l2);
-                border-bottom-color: transparent;
-                border-left-color:   transparent;
-            }
-
-            @include iro.bem-next-twin-elem {
-                margin-top: fn.dim(--spacing-y);
-            }
-        }
-        
-        @include iro.bem-modifier('right') {
-            @include iro.bem-elem('message') {
-                &::before {
-                    right:              calc(-1 * fn.dim(--arrow-size));
-                    left:               auto;
-                    border-right-color: transparent;
-                    border-left-color:  fn.global-color(--bg-l2);
-                }
-            }
-        }
-        
-        @include iro.bem-modifier('compact') {
-            gap: 0 fn.dim(--compact --spacing-x);
-        
-            @include iro.bem-modifier('left') {
-                justify-items: start;
-            }
-        
-            @include iro.bem-modifier('right') {
-                justify-items: end;
-            }
-        
-            @include iro.bem-elem('message') {
-                @include iro.bem-next-twin-elem {
-                    margin-top: fn.dim(--compact --spacing-y);
-                }
-            }
-        }
-        
-        @include iro.bem-modifier('right') {
-            grid-template-columns: 1fr auto;
-            grid-template-areas:   'message avatar' '. avatar';
-        }
-        
-        @include iro.bem-modifier('no-avatar') {
-            grid-template-columns: 1fr;
-            grid-template-areas:   'message';
-
-            @include iro.bem-elem('avatar') {
-                display: none;
-            }
-        }
-        
-        @include iro.bem-modifier('arrow') {
-            @include iro.bem-elem('message') {
-                &::before {
-                    display: block;
-                }
-
-                @include iro.bem-next-twin-elem {
-                    &::before {
-                        display: none;
-                    }
-                }
-            }
-        }
-        
-        & + & {
-            @include iro.bem-modifier('merge') {
-                margin-top: fn.dim(--spacing-y);
-
-                @include iro.bem-elem('avatar') {
-                    visibility: hidden;
-                }
-
-                @include iro.bem-modifier('compact') {
-                    margin-top: fn.dim(--compact --spacing-y);
-                }
-
-                @include iro.bem-elem('merge-hide') {
-                    display: none;
-                }
-        
-                @include iro.bem-modifier('arrow') {
-                    @include iro.bem-elem('message') {
-                        &::before {
-                            display: none;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 5a34d19..19bff10 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -6,8 +6,8 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
 
 @mixin status($size: ()) {
     @include iro.bem-elem('status') {
-        width:  fn.dim(list.join($size, --indicator-size));
-        height: fn.dim(list.join($size, --indicator-size));
+        inline-size: fn.dim(list.join($size, --indicator-size));
+        block-size:  fn.dim(list.join($size, --indicator-size));
 
         @include iro.bem-next-elem('content') {
             mask-image: radial-gradient(
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 9f84d7a..c6c47d7 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -68,7 +68,7 @@
 
         @include iro.bem-elem('image') {
             position:         relative;
-            width:            100%;
+            inline-size:      100%;
             overflow:         hidden;
             background-color: fn.color(--image-bg);
 
@@ -88,10 +88,10 @@
         }
 
         @include iro.bem-elem('image-img') {
-            display:    block;
-            object-fit: cover;
-            width:      100%;
-            height:     100%;
+            display:     block;
+            object-fit:  cover;
+            inline-size: 100%;
+            block-size:  100%;
         }
 
         @include iro.bem-elem('body') {
@@ -117,7 +117,7 @@
             &::before {
                 content:          '';
                 display:          block;
-                height:           fn.dim(--divider);
+                block-size:       fn.dim(--divider);
                 margin-block:     fn.dim(--spacing);
                 background-color: fn.color(--divider);
             }
@@ -132,8 +132,7 @@
                 &:hover,
                 &:active {
                     @include iro.bem-elem('image') {
-                        outline:        fn.dim(--border) solid fn.color(--quiet --hover --border);
-                        outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border));
+                        outline: fn.dim(--border) solid fn.color(--quiet --hover --border);
                     }
                 }
                 
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
new file mode 100644
index 0000000..7844eae
--- /dev/null
+++ b/src/objects/_lightbox.scss
@@ -0,0 +1,243 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@use 'action-button';
+
+$static-themes: 'black' 'white' !default;
+
+@include iro.props-namespace('lightbox') {
+    @include iro.props-store((
+        --dims: (
+            --pad: fn.global-dim(--size --150),
+            --thumbnail: (
+                --size:     fn.global-dim(--size --700),
+                --spacing:  fn.global-dim(--size --100),
+                --idle:     fn.global-dim(--border --thin),
+                --selected: fn.global-dim(--border --medium),
+            ),
+            --close-button: (
+                --font-size: fn.global-dim(--font-size --200),
+            ),
+            --nav-button: (
+                --width:     fn.global-dim(--size --2000),
+                --height:    fn.global-dim(--size --3800),
+                --font-size: fn.global-dim(--font-size --200),
+            ),
+        ),
+        --colors: (
+            --thumbnail: (
+                --idle:     fn.global-color(--border-strong),
+                --selected: fn.global-color(--heading),
+            ),
+        ),
+    ));
+
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --text:         fn.global-color(--white-transparent --800),
+                    --thumbnail: (
+                        --idle:     fn.global-color(--white-transparent --400),
+                        --selected: fn.global-color(--white-transparent --900),
+                    ),
+                )
+            )
+        ));
+    }
+
+    @include iro.props-store((
+        --dims: (
+            --thumbnail: (
+                --size: fn.global-dim(--size --600),
+            ),
+            --nav-button: (
+                --width:  fn.global-dim(--size --2500),
+                --height: fn.global-dim(--size --2500),
+            ),
+        ),
+    ), 'md');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:               grid;
+        grid-template-rows:    auto minmax(0, 1fr) auto auto;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        grid-template-areas:
+            'header     header     header'
+            'prev       content    next'
+            'thumbnails thumbnails thumbnails'
+            'footer     footer     footer';
+        box-sizing:            border-box;
+        block-size:            100%;
+        min-block-size:        0;
+
+        @include iro.bem-elem('header') {
+            grid-area:           header;
+            display:             flex;
+            align-items:         flex-start;
+            padding-block-start: fn.dim(--pad);
+            padding-inline:      fn.dim(--pad);
+        }
+
+        @include iro.bem-elem('img') {
+            display:     none;
+            box-sizing:  border-box;
+            grid-area:   content;
+            inline-size: 100%;
+            block-size:  100%;
+            padding:     fn.dim(--pad);
+            object-fit:  scale-down;
+
+            @include iro.bem-sibling-elem('img') {
+                @include iro.bem-modifier('default') {
+                    display: block;
+
+                    @include iro.bem-next-elem('nav-btn') {
+                        display: block;
+    
+                        @include iro.bem-next-elem('nav-btn') {
+                            display: block;
+                        }
+                    }
+                }
+            }
+
+            @include iro.bem-multi('&:target', 'is' 'visible') {
+                display: block;
+
+                @include iro.bem-next-elem('nav-btn') {
+                    display: block;
+
+                    @include iro.bem-next-elem('nav-btn') {
+                        display: block;
+                    }
+                }
+
+                @include iro.bem-sibling-elem('img') {
+                    @include iro.bem-modifier('default') {
+                        display: none;
+
+                        @include iro.bem-next-elem('nav-btn') {
+                            display: none;
+        
+                            @include iro.bem-next-elem('nav-btn') {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-elem('thumbnails') {
+            grid-area:      thumbnails;
+            display:        flex;
+            gap:            fn.dim(--thumbnail --spacing);
+            padding-block:  fn.dim(--thumbnail --selected) fn.dim(--pad);
+            padding-inline: fn.dim(--pad);
+            overflow:       auto;
+        }
+
+        @include iro.bem-elem('footer') {
+            grid-area:      footer;
+            display:        flex;
+            align-items:    flex-start;
+            padding-block:  0 fn.dim(--pad);
+            padding-inline: fn.dim(--pad);
+        }
+
+        @include iro.bem-elem('thumbnail') {
+            position:    relative;
+            flex:        0 0 auto;
+            inline-size: fn.dim(--thumbnail --size);
+            block-size:  fn.dim(--thumbnail --size);
+            outline:     fn.dim(--thumbnail --idle) solid fn.color(--thumbnail --idle);
+            opacity:     .75;
+
+            &:hover,
+            &:focus-visible {
+                opacity: 1;
+            }
+
+            @include iro.bem-is('selected') {
+                outline: fn.dim(--thumbnail --selected) solid fn.color(--thumbnail --selected);
+                opacity: 1;
+            }
+        }
+
+        @include iro.bem-elem('thumbnail-img') {
+            display:            block;
+            position:           absolute;
+            inset-block-start:  0;
+            inset-inline-start: 0;
+            inline-size:        100%;
+            block-size:         100%;
+            object-fit:         cover;
+            object-position:    center center;
+        }
+
+        @include iro.bem-elem('thumbnail-icon') {
+            position:           absolute;
+            inset-block-start:  50%;
+            inset-inline-start: 50%;
+            transform:          translate(-50%, -50%);
+        }
+
+        @include iro.bem-elem('close-btn') {
+            flex:               0 0 auto;
+            margin-block-start: calc(-.5 * fn.dim(--pad));
+            margin-inline:      auto calc(-.5 * fn.dim(--pad));
+            font-size:          fn.dim(--close-button --font-size);
+        }
+
+        @include iro.bem-elem('nav-btn') {
+            display:    none;
+            position:   relative;
+            align-self: center;
+            overflow:   visible;
+            font-size:  fn.dim(--nav-button --font-size);
+
+            &::before {
+                content:            '';
+                display:            block;
+                position:           absolute;
+                inset-block-start:  50%;
+                inline-size:        fn.dim(--nav-button --width);
+                block-size:         fn.dim(--nav-button --height);
+                transform:          translateY(-50%);
+            }
+
+            @include iro.bem-modifier('prev') {
+                grid-area:     prev;
+                margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad));
+
+                &::before {
+                    inset-inline-start: 0;
+                }
+            }
+    
+            @include iro.bem-modifier('next') {
+                grid-area:     next;
+                margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad));
+
+                &::before {
+                    inset-inline-end: 0;
+                }
+            }
+        }
+    
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                color: fn.color(--static-#{$theme} --text);
+
+                @include iro.bem-elem('thumbnail') {
+                    outline-color: fn.color(--static-#{$theme} --thumbnail --idle);
+        
+                    @include iro.bem-is('selected') {
+                        outline-color: fn.color(--static-#{$theme} --thumbnail --selected);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss
deleted file mode 100644
index a346828..0000000
--- a/src/objects/_list-group.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('list-group') {
-    @include iro.props-store((
-        --dims: (
-            --pad-i:    fn.global-dim(--size --175),
-            --pad-b:    fn.global-dim(--size --125),
-            --rounding: fn.global-dim(--rounding),
-            --border:   fn.global-dim(--border --thin),
-        ),
-        --colors: (
-            --bg:     fn.global-color(--base --75),
-            --border: fn.global-color(--border),
-            --hover:  fn.global-color(--border-mute),
-            --active: fn.global-color(--border),
-        )
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
-        border:           fn.dim(--border) solid fn.color(--border);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
-
-        @include iro.bem-elem('item') {
-            padding-block:  fn.dim(--pad-b);
-            padding-inline: fn.dim(--pad-i);
-
-            @include iro.bem-next-twin-elem {
-                border-width:             0;
-                border-block-start-width: fn.dim(--border);
-                border-style:             solid;
-                border-color:             fn.color(--border);
-            }
-
-            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                &:hover,
-                &:focus-visible {
-                    background-color: fn.color(--hover);
-                }
-
-                &:active {
-                    background-color: fn.color(--active);
-                }
-            }
-        }
-
-        @include iro.bem-modifier('horizontal') {
-            display: flex;
-
-            @include iro.bem-elem('item') {
-                flex: 1 0 auto;
-
-                @include iro.bem-next-twin-elem {
-                    border-block-start-width:  0;
-                    border-inline-start-width: fn.dim(--border);
-                }
-            }
-        }
-    }
-}
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index cadd395..416e65e 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -24,8 +24,8 @@ $themes: 'accent' 'positive' 'negative' 'warning' !default;
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
-        width:            fn.dim(--size);
-        height:           fn.dim(--size);
+        inline-size:      fn.dim(--size);
+        block-size:       fn.dim(--size);
         border-radius:    10em;
         background-color: fn.color(--default);
         vertical-align:   middle;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 552b02a..790d5c6 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,6 +1,8 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
+$static-themes: 'black' 'white' !default;
+
 @include iro.props-namespace('links') {
     @include iro.props-store((
         --dims: (
@@ -18,23 +20,23 @@
             ),
         ),
         --colors: (
-            --underline:         fn.global-color(--text-mute-more),
+            --underline: fn.global-color(--text-mute-more),
 
-            --idle: (
+            --colored: (
                 --text:          fn.global-color(--accent --1100),
                 --underline:     fn.global-color(--accent --600),
 
                 --hover: (
                     --text:      fn.global-color(--accent --1300),
                 ),
-            ),
-
-            --visited: (
-                --text:          fn.global-color(--purple --1100),
-                --underline:     fn.global-color(--purple --600),
-
-                --hover: (
-                    --text:      fn.global-color(--purple --1300),
+    
+                --visited: (
+                    --text:          fn.global-color(--purple --1100),
+                    --underline:     fn.global-color(--purple --600),
+    
+                    --hover: (
+                        --text:      fn.global-color(--purple --1300),
+                    ),
                 ),
             ),
 
@@ -46,6 +48,27 @@
         ),
     ));
 
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --text:          fn.global-color(--#{$theme}-transparent --800),
+                    --underline:     fn.global-color(--#{$theme}-transparent --500),
+    
+                    --hover: (
+                        --text:      fn.global-color(--#{$theme}-transparent --900),
+                    ),
+
+                    --key-focus: (
+                        --text:      fn.global-color(--#{$theme}-transparent --900),
+                        --border:    fn.global-color(--#{$theme}-transparent --900),
+                        --outline:   fn.global-color(--#{$theme}-transparent --300),
+                    ),
+                )
+            )
+        ));
+    }
+
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
@@ -81,20 +104,40 @@
 
         @include iro.bem-modifier('colored') {
             :link {
-                color:                 fn.color(--idle --text);
-                text-decoration-color: fn.color(--idle --underline);
+                color:                 fn.color(--colored --text);
+                text-decoration-color: fn.color(--colored --underline);
 
                 &:hover {
-                    color:             fn.color(--idle --hover --text);
+                    color:             fn.color(--colored --hover --text);
                 }
             }
     
             :visited {
-                color:                 fn.color(--visited --text);
-                text-decoration-color: fn.color(--visited --underline);
+                color:                 fn.color(--colored --visited --text);
+                text-decoration-color: fn.color(--colored --visited --underline);
 
                 &:hover {
-                    color:             fn.color(--visited --hover --text);
+                    color:             fn.color(--colored --visited --hover --text);
+                }
+            }
+        }
+
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                :link,
+                :visited {
+                    color:                 fn.color(--static-#{$theme} --text);
+                    text-decoration-color: fn.color(--static-#{$theme} --underline);
+
+                    &:hover {
+                        color:             fn.color(--static-#{$theme} --hover --text);
+                    }
+
+                    &:focus-visible {
+                        outline-color: fn.color(--static-#{$theme} --key-focus --border);
+                        box-shadow:    0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline);
+                        color:         fn.color(--static-#{$theme} --key-focus --text);
+                    }
                 }
             }
         }
-- 
cgit v1.2.3-70-g09d2