7 files changed, 93 insertions, 30 deletions

diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 04c0f63..7c546d7 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -99,7 +99,8 @@ $shadow--l2--y:    props.def(--shadow--l2--y, 4px) !default;
 $shadow--l2--blur: props.def(--shadow--l2--blur, 8px) !default;
 $shadow--l2--grow: props.def(--shadow--l2--grow, -3px) !default;
 
-$rounding: props.def(--rounding, 8px) !default;
+$rounding:     props.def(--rounding, 8px) !default;
+$rounding--sm: props.def(--rounding--sm, 4px) !default;
 
 $key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
 $key-focus--border-width:  props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8ef40c5..a1655be 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -6,6 +6,7 @@
 
 @forward 'card-list.vars';
 @use 'card-list.vars' as vars;
+@use '../objects/card.vars' as card;
 
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
@@ -15,6 +16,33 @@
         flex-direction: column;
         gap:            props.get(vars.$row-gap);
 
+        @include bem.modifier('merge') {
+            position:   relative;
+            gap:        0;
+
+            @include bem.elem('card') {
+                transition: none;
+
+                &:not(:last-child) {
+                    margin-bottom:           calc(-1 * props.get(card.$border-width));
+                    border-end-start-radius: 0;
+                    border-end-end-radius:   0;
+                }
+
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    z-index:    10;
+                    transform:  none;
+                }
+
+                @include bem.next-twin-elem {
+                    border-start-start-radius: 0;
+                    border-start-end-radius:   0;
+                }
+            }
+        }
+
         @include bem.modifier('quiet') {
             row-gap: props.get(vars.$quiet--row-gap);
         }
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 1a9be25..72dc4a1 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -5,28 +5,28 @@
 
 $line-height:  props.def(--o-action-button--line-height, 1.4) !default;
 $border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
-$rounding:     props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
+$rounding:     props.def(--o-action-button--rounding, props.get(core.$rounding--sm)) !default;
 
 $pad-i--sm:       props.def(--o-action-button--sm--pad-i, props.get(core.$size--75)) !default;
-$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default;
-$pad-i-pill--sm:  props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--100)) !default;
+$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--10)) !default;
+$pad-i-pill--sm:  props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--115)) !default;
 $pad-b--sm:       props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
 $font-size--sm:   props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
 
-$pad-i:        props.def(--o-action-button--pad-i, props.get(core.$size--100)) !default;
-$pad-i-label:  props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default;
+$pad-i:        props.def(--o-action-button--pad-i, props.get(core.$size--115)) !default;
+$pad-i-label:  props.def(--o-action-button--pad-i-label, props.get(core.$size--40)) !default;
 $pad-i-pill:   props.def(--o-action-button--pad-i-pill, props.get(core.$size--150)) !default;
 $pad-b:        props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
 $font-size:    props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
 
-$pad-i--lg:       props.def(--o-action-button--lg--pad-i, props.get(core.$size--150)) !default;
-$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--75)) !default;
+$pad-i--lg:       props.def(--o-action-button--lg--pad-i, props.get(core.$size--160)) !default;
+$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--65)) !default;
 $pad-i-pill--lg:  props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
 $pad-b--lg:       props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
 $font-size--lg:   props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
 
-$pad-i--xl:       props.def(--o-action-button--xl--pad-i, props.get(core.$size--175)) !default;
-$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--100)) !default;
+$pad-i--xl:       props.def(--o-action-button--xl--pad-i, props.get(core.$size--200)) !default;
+$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--85)) !default;
 $pad-i-pill--xl:  props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
 $pad-b--xl:       props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
 $font-size--xl:   props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 4f8c7fb..aaf46b6 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -16,16 +16,17 @@
         flex-direction:   column;
         background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
-        border:           1px solid transparent;
+        border:           props.get(vars.$border-width) solid transparent;
         border-color:     props.get(vars.$border-color);
         border-radius:    props.get(vars.$rounding);
-        transition:       transform .2s;
+        transition:       transform .2s, border-color .2s;
 
         @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
             &:active,
             &:focus-visible {
-                transform: translateY(props.get(vars.$hover--offset-b));
+                transform:    translateY(props.get(vars.$hover--offset-b));
+                border-color: props.get(vars.$hover--border-color);
 
                 @include bem.elem('body') {
                     @include bem.modifier('hidden') {
@@ -39,9 +40,9 @@
             }
 
             &:focus-visible {
-                margin:        calc(-1 * props.get(vars.$key-focus--border-width) + 1px);
-                border:        props.get(vars.$key-focus--border-offset) solid transparent;
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) - 1px);
+                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+                border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
                 outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                 box-shadow:
                     0 0 0
@@ -59,19 +60,20 @@
             position:    relative;
             display:     block;
             flex:        0 0 auto;
-            inline-size: 100%;
+            inline-size: calc(100% + 2 * props.get(vars.$border-width));
+            margin:      calc(-1 * props.get(vars.$border-width));
             overflow:    hidden;
             object-fit:  cover;
             transition:  background-color .2s, transform .2s, opacity .2s;
 
             &:first-child {
-                border-start-start-radius: calc(props.get(vars.$rounding) - 1px);
-                border-start-end-radius:   calc(props.get(vars.$rounding) - 1px);
+                border-start-start-radius: props.get(vars.$rounding);
+                border-start-end-radius:   props.get(vars.$rounding);
             }
 
             &:last-child {
-                border-end-start-radius: calc(props.get(vars.$rounding) - 1px);
-                border-end-end-radius:   calc(props.get(vars.$rounding) - 1px);
+                border-end-start-radius: props.get(vars.$rounding);
+                border-end-end-radius:   props.get(vars.$rounding);
             }
 
             @include bem.next-elem('avatar') {
@@ -107,21 +109,21 @@
 
             @include bem.modifier('hidden') {
                 position:                absolute;
-                inset-block-end:         0;
-                inset-inline:            0;
+                inset-block-end:         calc(-1 * props.get(vars.$border-width));
+                inset-inline:            calc(-1 * props.get(vars.$border-width));
                 z-index:                 10;
                 visibility:              hidden;
                 background-color:        props.get(vars.$bg-color);
-                //border-end-start-radius: props.get(vars.$rounding);
-                //border-end-end-radius:   props.get(vars.$rounding);
+                border-end-start-radius: props.get(vars.$rounding);
+                border-end-end-radius:   props.get(vars.$rounding);
                 opacity:                 0;
                 transition:
                     opacity .2s ease,
                     visibility 0s .2s linear;
 
                 @include bem.next-elem('image') {
-                    border-start-start-radius: calc(props.get(vars.$rounding) - 1px);
-                    border-start-end-radius:   calc(props.get(vars.$rounding) - 1px);
+                    border-start-start-radius: props.get(vars.$rounding);
+                    border-start-end-radius:   props.get(vars.$rounding);
                 }
             }
         }
@@ -225,11 +227,11 @@
 
                 &:first-child {
                     border-start-end-radius:   0;
-                    border-end-start-radius:   calc(props.get(vars.$rounding) - 1px);
+                    border-end-start-radius:   props.get(vars.$rounding);
                 }
     
                 &:last-child {
-                    border-start-end-radius: calc(props.get(vars.$rounding) - 1px);
+                    border-start-end-radius: props.get(vars.$rounding);
                     border-end-start-radius: 0;
                 }
             }
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 4f5cf40..ca603be 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -3,6 +3,8 @@
 @use '../core.vars' as core;
 
 $divider-width:        props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
+$border-width:         props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
+$sub-border-width:     props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default;
 $pad-i:                props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
 $pad-b:                props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
 $spacing:              props.def(--o-card--spacing, props.get(core.$size--200)) !default;
@@ -20,6 +22,9 @@ $bg-color:      props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), '
 $border-color:  props.def(--o-card--border-color, props.get(core.$theme, --border-mute), 'color') !default;
 $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
 
+$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border-strong), 'color') !default;
+$hover--sub-border-color: props.def(--o-card--hover--sub-border-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+
 $key-focus--label-color:   props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
 $key-focus--border-color:  props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
 $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index e0f6a15..acb86eb 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -38,7 +38,13 @@ mixin card-image
                 block
 
 mixin card-body
-    .o-card__body(style=attributes.style)
+    -
+        let classes = {
+            'o-card__body': true,
+            'o-card__body--hidden': attributes.hidden,
+        }
+
+    div(class=classes)(style=attributes.style)
         block
 
 mixin card-title 
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 61081a9..3fd0113 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,7 +1,28 @@
 mixin view-card 
     +view('card', 'Card')(wide=true)
+        .l-card-list.l-card-list--merge
+            +card(href='#' class='l-card-list__card')
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card')
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+            +card(href='#' class='l-card-list__card')
+                +card-body
+                    strong= 'Lorem ipsum dolor'
+                    = 'sit amet'
+
+        +divider('faint')(class='u-mb-700')
+
         .l-card-list.l-card-list--masonry
             +card(href='#' class='l-card-list__card')
+                +card-body(hidden=true)
+                    +card-title= 'XS Heading'
+                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+
+            +card(href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
                 +card-avatar(src='avatar.png')
                 +card-body