From 0898d9a3b3bead6912143b64acda96824af6e9b9 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 3 Mar 2026 11:32:57 +0100
Subject: Improved merged card list layout

---
 src/layouts/_card-list.scss | 65 ++++++++++++++++++++++++++++-----------------
 tpl/views/card.pug          | 14 +++++-----
 2 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index f7f7261..1645b49 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -4,6 +4,8 @@
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
+@use '../objects/card.vars' as card;
+
 @forward 'card-list.vars';
 @use 'card-list.vars' as vars;
 
@@ -16,52 +18,67 @@
 		gap:            props.get(vars.$row-gap);
 
 		@include bem.modifier('merge') {
-			position:         relative;
-			gap:              calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
-			padding:          props.get(vars.$merge-padding);
-			background-color: props.get(vars.$card-bg-color);
-			border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
-			border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
+			position:      relative;
+			gap:           0;
+			border-radius: props.get(vars.$rounding);
 
 			@include bem.elem('card') {
-				box-shadow: none;
+				background-clip: content-box;
 
 				&:not(:last-child) {
 					position:                relative;
 					border-end-start-radius: 0;
 					border-end-end-radius:   0;
-
-					&::after {
-						position:          absolute;
-						inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
-						inset-inline:      calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
-						display:           block;
-						block-size:        props.get(vars.$border-width);
-						content:           '';
-						background-color:  props.get(vars.$border-color);
-					}
 				}
 
 				&:hover,
 				&:active,
 				&:focus-visible {
-					transform:  none;
+					transform: none;
+					z-index:   10;
 				}
 
 				@include bem.next-twin-elem {
+					margin-block-start:        calc(-1 * props.get(card.$border-width));
+					border-block-start-color:  transparent;
 					border-start-start-radius: 0;
 					border-start-end-radius:   0;
+
+					&:hover,
+					&:active {
+						border-block-start-color: props.get(card.$hover--border-color);
+					}
+
+					&:focus-visible {
+						margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
+					}
+				}
+
+				&:focus-visible {
+					border-color: props.get(card.$hover--bg-color);
 				}
 			}
 
 			@include bem.modifier('borderless') {
-				border-color: props.get(vars.$card-bg-color);
-
 				@include bem.elem('card') {
-					&:not(:last-child) {
-						&::after {
-							inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
-						}
+					border-inline-color: props.get(vars.$card-bg-color);
+					border-block-color:  props.get(vars.$card-bg-color) props.get(card.$border-color);
+
+					@include bem.next-twin-elem {
+						border-block-start-color: transparent;
+					}
+
+					&:last-child {
+						border-block-end-color: props.get(vars.$card-bg-color);
+					}
+
+					&:hover,
+					&:active {
+						border-color: props.get(card.$hover--border-color);
+					}
+
+					&:focus-visible {
+						border-color: props.get(card.$hover--bg-color);
 					}
 				}
 			}
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index e982925..e802aab 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,4 +1,4 @@
-mixin view-card 
+mixin view-card
     +view('card', 'Card')(wide=true)
         .l-card-list
             +card(href='#' class='l-card-list__card')
@@ -21,15 +21,15 @@ mixin view-card
         +divider('faint')(class='u-mb-700')
 
         .l-card-list.l-card-list--merge
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                 +card-body
                     strong= 'Lorem ipsum dolor'
                     = 'sit amet'
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                 +card-body
                     strong= 'Lorem ipsum dolor'
                     = 'sit amet'
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                 +card-body
                     strong= 'Lorem ipsum dolor'
                     = 'sit amet'
@@ -37,15 +37,15 @@ mixin view-card
         +divider('faint')(class='u-mb-700')
 
         .l-card-list.l-card-list--merge.l-card-list--borderless.l-card-list--shadow
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                 +card-body
                     strong= 'Lorem ipsum dolor'
                     = 'sit amet'
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                 +card-body
                     strong= 'Lorem ipsum dolor'
                     = 'sit amet'
-            +card(href='#' class='l-card-list__card' borderless=true)
+            +card(href='#' class='l-card-list__card')
                 +card-body
                     strong= 'Lorem ipsum dolor'
                     = 'sit amet'
-- 
cgit v1.2.3-70-g09d2