10 files changed, 173 insertions, 75 deletions

diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index ac20cb9..3f02ecc 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -124,6 +124,10 @@ $theme-light: (
         --bg-l2:   --base --50,
         --bg-l1:   --base --100,
         --bg-base: --base --200,
+
+        --box: (
+            --border: --base --200,
+        ),
     )),
 
     --constants: (
@@ -183,5 +187,9 @@ $theme-dark: (
 
     --constants: (
         --shadow: rgba(#000, .1),
+
+        --box: (
+            --border: rgba(#000, .1),
+        ),
     ),
 );
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..b828e44 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);
         }
@@ -29,6 +57,23 @@
             }
         }
 
+        @include bem.modifier('grid-sm') {
+            display:               grid;
+            grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
+            gap:                   props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
+
+            @include bem.modifier("grid-sm") {
+                @include media.media("<=md") {
+                    display: flex;
+                    gap:     props.get(vars.$row-gap);
+                }
+            }
+
+            @include bem.modifier('quiet') {
+                row-gap: props.get(vars.$grid-sm--quiet--row-gap);
+            }
+        }
+
         @include bem.modifier('masonry') {
             display:    block;
             columns:    auto props.get(vars.$masonry--col-width);
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index f77bfbf..1c49c0f 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,7 +1,7 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
+$row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--100)) !default;
 $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
 
 $grid--row-gap:        props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default;
@@ -9,6 +9,11 @@ $grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$s
 $grid--col-width:      props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
 $grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
 
+$grid-sm--row-gap:        props.def(--l-card-list--grid-md--row-gap, props.get(core.$size--150)) !default;
+$grid-sm--col-gap:        props.def(--l-card-list--grid-md--col-gap, props.get(core.$size--150)) !default;
+$grid-sm--col-width:      props.def(--l-card-list--grid-md--col-width, props.get(core.$size--4600)) !default;
+$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default;
+
 $masonry--row-gap:        props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
 $masonry--col-gap:        props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
 $masonry--col-width:      props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 7863f50..f4a9a46 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -52,6 +52,35 @@
         }
     }
 
+    @include bem.modifier('static') {
+        color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
+        background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
+        border-color:     transparent;
+        box-shadow:       none;
+
+        &:link,
+        &:visited,
+        &:enabled {
+            color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
+            background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
+            border-color:     transparent;
+            box-shadow:       none;
+
+            &:hover,
+            &:focus-visible {
+                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
+                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
+                border-color:     transparent;
+            }
+
+            &:active {
+                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
+                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
+                border-color:     transparent;
+            }
+        }
+    }
+
     @include bem.modifier('quiet') {
         color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
         background-color: transparent;
@@ -80,11 +109,17 @@
         }
     }
 
-    @include bem.is('selected', 'badge') {
+    @include bem.is('selected') {
         color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
         background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
         border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
 
+        @include bem.modifier('static') {
+            color:            props.get($theme, list.join($key, --selected --label-color)...);
+            background-color: props.get($theme, list.join($key, --selected --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --selected --border-color)...);
+        }
+
         &:link,
         &:visited,
         &:enabled {
@@ -106,12 +141,6 @@
             }
         }
     }
-
-    @include bem.is('badge') {
-        color:            props.get($theme, list.join($key, --selected --label-color)...);
-        background-color: props.get($theme, list.join($key, --selected --bg-color)...);
-        border-color:     props.get($theme, list.join($key, --selected --border-color)...);
-    }
 }
 
 @mixin styles {
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 1a9be25..84bb415 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-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..6b80e2f 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,34 +14,26 @@
         position:         relative;
         display:          flex;
         flex-direction:   column;
-        background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
-        border:           1px solid transparent;
+        background-color: props.get(vars.$bg-color);
+        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, background-color .2s, border-color .2s;
 
         @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
             &:active,
             &:focus-visible {
-                transform: translateY(props.get(vars.$hover--offset-b));
-
-                @include bem.elem('body') {
-                    @include bem.modifier('hidden') {
-                        visibility: visible;
-                        opacity:    1;
-                        transition:
-                            opacity .2s ease,
-                            visibility .2s linear;
-                    }
-                }
+                transform:        translateY(props.get(vars.$hover--offset-b));
+                background-color: props.get(vars.$hover--bg-color);
+                border-color:     props.get(vars.$hover--border-color);
             }
 
             &: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
@@ -65,13 +57,13 @@
             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: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
             }
 
             &: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: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
             }
 
             @include bem.next-elem('avatar') {
@@ -104,26 +96,6 @@
                 margin-block:  -100em 100em;
                 content:       '';
             }
-
-            @include bem.modifier('hidden') {
-                position:                absolute;
-                inset-block-end:         0;
-                inset-inline:            0;
-                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);
-                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);
-                }
-            }
         }
 
         @include bem.elem('content') {
@@ -155,19 +127,14 @@
                 &:hover,
                 &:active,
                 &:focus-visible {
-                    transform: none;
+                    transform:        none;
+                    background-color: transparent;
 
                     @include bem.elem('image') {
                         background-color: props.get(vars.$quiet--hover--image-color);
                         opacity:          .75;
                         transform:        translateY(props.get(vars.$hover--offset-b));
                     }
-
-                    @include bem.elem('body') {
-                        @include bem.modifier('hidden') {
-                            transform: translateY(props.get(vars.$hover--offset-b));
-                        }
-                    }
                 }
 
                 &:focus-visible {
@@ -203,11 +170,6 @@
             @include bem.elem('body') {
                 padding:             0;
                 padding-block-start: props.get(vars.$spacing);
-
-                @include bem.modifier('hidden') {
-                    padding-block:  props.get(vars.$pad-b);
-                    padding-inline: props.get(vars.$pad-i);
-                }
             }
 
             @include bem.elem('footer') {
@@ -215,6 +177,49 @@
             }
         }
 
+        @include bem.modifier('thumbnail') {
+            @include bem.elem('image') {
+                inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+                margin:        calc(-1 * props.get(vars.$border-width));
+                border-radius: props.get(vars.$rounding);
+            }
+
+            @include bem.elem('body') {
+                position:                absolute;
+                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.$hover--bg-color);
+                border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
+                border-color:            transparent;
+                border-style:            solid;
+                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                opacity:                 0;
+                transition:
+                    border-color .2s ease,
+                    opacity .2s ease,
+                    visibility 0s .2s linear;
+            }
+
+            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    @include bem.elem('body') {
+                        border-color: props.get(vars.$hover--border-color);
+                        visibility:   visible;
+                        opacity:      1;
+                        transition:
+                            border-color .2s ease,
+                            opacity .2s ease,
+                            visibility .2s linear;
+                    }
+                }
+            }
+        }
+
         @include bem.modifier('horizontal') {
             flex-direction: row;
             align-items:    center;
@@ -225,11 +230,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..c5bbc0d 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;
@@ -17,9 +19,12 @@ $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.g
 $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
 
 $bg-color:      props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
-$border-color:  props.def(--o-card--border-color, props.get(core.$theme, --border-mute), 'color') !default;
+$border-color:  props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default;
 $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
 
+$hover--bg-color:         props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default;
+$hover--border-color:     props.def(--o-card--hover--border-color, props.get(core.$theme, --border), '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/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index 833eacb..f64c42b 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -6,7 +6,7 @@ $line-height:  props.def(--o-text-field--line-height, 1.4) !default;
 $pad-i:        props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
 $pad-b:        props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
 $border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
-$rounding:     props.def(--o-text-field--rounding, props.get(core.$rounding)) !default;
+$rounding:     props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
 
 $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
 
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index b9bf4d1..b976100 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -3,7 +3,7 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$rounding:               props.def(--s-links--rounding, props.get(core.$rounding)) !default;
+$rounding:               props.def(--s-links--rounding, props.get(core.$rounding--sm)) !default;
 $underline-width:        props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
 $hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default;