Update

6 files changed, 126 insertions, 29 deletions

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 7a7ff46..7fe9d44 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -11,8 +11,8 @@ $static-themes: 'black' 'white' !default;
     color:            fn.color(list.join($theme, --disabled --label));
 
     &::after {
-        outline:    fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border);
-        box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
+        outline-color: fn.color(list.join($theme, --key-focus --border));
+        box-shadow:    0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
     }
 
     &:link,
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index e6fa74e..5a34d19 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -24,9 +24,11 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
 @include iro.props-namespace('avatar') {
     @include iro.props-store((
         --dims: (
-            --size:           fn.global-dim(--size --500),
-            --font-size:      fn.global-dim(--font-size --100),
-            --indicator-size: fn.global-dim(--size --150),
+            --size:              fn.global-dim(--size --500),
+            --font-size:         fn.global-dim(--font-size --100),
+            --indicator-size:    fn.global-dim(--size --150),
+            --indicator-spacing: fn.global-dim(--size --40),
+            --rounding:          25%,
 
             --xxxl: (
                 --size:           fn.global-dim(--size --1600),
@@ -58,8 +60,6 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
                 --font-size:      fn.global-dim(--font-size --50),
                 --indicator-size: fn.global-dim(--size --100),
             ),
-            --indicator-spacing: fn.global-dim(--size --40),
-            --rounding:          25%,
             
             --key-focus: (
                 --border:        fn.global-dim(--key-focus --border),
@@ -82,12 +82,24 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
     @include iro.bem-object(iro.props-namespace()) {
         display:        inline-block;
         position:       relative;
-        border:         fn.dim(--key-focus --border) solid transparent;
         border-radius:  fn.dim(--rounding);
         font-size:      fn.dim(--font-size);
         font-style:     normal;
         vertical-align: .05em;
 
+        &::after {
+            content:        '';
+            display:        none;
+            position:       absolute;
+            z-index:        1;
+            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
+            border:         fn.dim(--key-focus --border-offset) solid transparent;
+            border-radius:  fn.dim(--rounding);
+            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            pointer-events: none;
+        }
+
         @include iro.bem-elem('status') {
             position:         absolute;
             inset-inline-end: 0;
@@ -110,6 +122,10 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
         @include iro.bem-modifier('circle') {
             border-radius: 100%;
 
+            &::after {
+                border-radius: 100%;
+            }
+
             @include iro.bem-elem('content') {
                 border-radius: 100%;
             }
@@ -143,8 +159,9 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
         }
     
         &:focus-visible {
-            outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-            box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            &::after {
+                display: block;
+            }
         }
     }
 }
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index cc7e500..06261b8 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -45,13 +45,9 @@ $static-themes: 'black' 'white' !default;
     }
 
     @if string.slice($theme, 1, 7) == 'static-' {
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                outline:    fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
-                box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
-            }
+        &::after {
+            outline:    fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
         }
     }
 }
@@ -190,11 +186,10 @@ $static-themes: 'black' 'white' !default;
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          inline-block;
-        margin:           calc(-1 * fn.dim(--key-focus --border));
+        position:         relative;
         padding-block:    fn.dim(--pad-b);
         padding-inline:   fn.dim(--pad-i);
-        border:           fn.dim(--key-focus --border) solid transparent;
-        border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
+        border-radius:    fn.dim(--rounding);
         background-color: fn.color(--bg);
         background-clip:  padding-box;
         color:            fn.color(--label);
@@ -203,6 +198,18 @@ $static-themes: 'black' 'white' !default;
         text-align:       center;
         text-decoration:  none;
 
+        &::after {
+            content:        '';
+            display:        none;
+            position:       absolute;
+            z-index:        1;
+            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
+            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
+            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            pointer-events: none;
+        }
+
         &:link,
         &:visited,
         &:enabled {
@@ -244,8 +251,9 @@ $static-themes: 'black' 'white' !default;
         &:visited,
         &:enabled {
             &:focus-visible {
-                outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-                box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                &::after {
+                    display: block;
+                }
             }
         }
     
@@ -258,6 +266,10 @@ $static-themes: 'black' 'white' !default;
         @include iro.bem-modifier('pill') {
             padding-inline: fn.dim(--pad-i-pill);
             border-radius:  10em;
+
+            &::after {
+                border-radius: 10em;
+            }
         }
     
         @each $size in sm lg xl {
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 5783ac1..9f84d7a 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -18,18 +18,26 @@
             ),
         ),
         --colors: (
-            --bg:      fn.global-color(--bg-l2),
-            --border:  fn.global-color(--border-mute),
-            --divider: fn.global-color(--border-mute),
+            --bg:       fn.global-color(--bg-l2),
+            --image-bg: fn.global-color(--border-mute),
+            --border:   fn.global-color(--border-mute),
+            --divider:  fn.global-color(--border-mute),
 
             --hover: (
                 --border: fn.global-color(--border),
             ),
+
             --key-focus: (
                 --label:   fn.global-color(--focus --text),
                 --border:  fn.global-color(--focus --border),
                 --outline: fn.global-color(--focus --outline),
             ),
+
+            --quiet: (
+                --hover: (
+                    --border: fn.global-color(--text-disabled),
+                ),
+            ),
         ),
     ));
 
@@ -59,8 +67,20 @@
         }
 
         @include iro.bem-elem('image') {
-            position: relative;
-            width:    100%;
+            position:         relative;
+            width:            100%;
+            overflow:         hidden;
+            background-color: fn.color(--image-bg);
+
+            &:first-child {
+                border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
+                border-start-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+            }
+
+            &:last-child {
+                border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
+                border-end-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+            }
 
             @include iro.bem-next-elem('avatar') {
                 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
@@ -102,5 +122,47 @@
                 background-color: fn.color(--divider);
             }
         }
+
+        @include iro.bem-modifier('quiet') {
+            position:         relative;
+            border:           0;
+            background-color: transparent;
+
+            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &: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));
+                    }
+                }
+                
+                &:focus-visible {
+                    outline:    none;
+                    box-shadow: none;
+
+                    @include iro.bem-elem('image') {
+                        outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                        box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                    }
+                }
+            }
+
+            @include iro.bem-elem('image') {
+                margin:          calc(-1 * fn.dim(--key-focus --border));
+                border:          fn.dim(--key-focus --border) solid transparent;
+                border-radius:   calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
+                background-clip: padding-box;
+            }
+
+            @include iro.bem-elem('body') {
+                padding:             0;
+                padding-block-start: fn.dim(--spacing);
+            }
+
+            @include iro.bem-elem('footer') {
+                padding-inline: 0;
+            }
+        }
     }
 }
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 84ddf12..d1e2897 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -75,6 +75,7 @@ $static-themes: 'black' 'white' !default;
 
     @include iro.bem-object(iro.props-namespace()) {
         display:        flex;
+        flex:           0 0 auto;
         flex-direction: row;
         align-items:    center;
         block-size:     1em;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 9d4b1c7..5ad58ec 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -14,7 +14,12 @@
         --colors: (
             --bg:        fn.global-color(--bg-l2),
             --border:    fn.global-color(--border),
-            --shadow:    0 .2em .5em rgba(#000, .1),
+            --filter:    drop-shadow(
+                fn.global-dim(--shadow --x)
+                fn.global-dim(--shadow --y)
+                fn.global-dim(--shadow --blur)
+                fn.global-color(--shadow)
+            ),
         ),
     ));
 
@@ -29,7 +34,7 @@
         border:             fn.dim(--border) solid fn.color(--border);
         border-radius:      fn.dim(--rounding);
         background-color:   fn.color(--bg);
-        box-shadow:         fn.color(--shadow);
+        filter:             fn.color(--filter);
 
         @include iro.bem-modifier('up-left') {
             transform: translate(var(--x), calc(var(--y) - 100%));