12 files changed, 95 insertions, 94 deletions

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 204e889..2010a2d 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -66,7 +66,7 @@ $breakpoints: (
 @forward 'objects/status-indicator' as o-status-indicator--*;
 @forward 'objects/switch' as o-switch--*;
 @forward 'objects/table' as o-table--*;
-@forward 'objects/tabs' as o-tabs--*;
+@forward 'objects/tabbar' as o-tabbar--*;
 @forward 'objects/text-field' as o-text-field--*;
 @forward 'objects/thumbnail' as o-thumbnail--*;
 
diff --git a/src/_utils.scss b/src/_utils.scss
index bd92454..e90aa57 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -200,6 +200,10 @@ $-sizes: (
         white-space:   nowrap;
     }
 
+    @include bem.utility('o-auto') {
+        overflow: auto;
+    }
+
     @include bem.utility('o-hidden') {
         overflow: hidden;
     }
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index e6f266d..6628eab 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,7 +14,7 @@
         position:         relative;
         display:          flex;
         flex-direction:   column;
-        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+        margin-inline:    calc(-1 * props.get(vars.$key-focus--border-width));
         background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
         border:           props.get(vars.$key-focus--border-offset) solid transparent;
@@ -55,9 +55,11 @@
         }
 
         @include bem.elem('image') {
+            position:    relative;
             display:     block;
             flex:        0 0 auto;
             inline-size: 100%;
+            overflow:    hidden;
             object-fit:  cover;
             transition:  transform .2s, opacity .2s;
 
@@ -76,6 +78,21 @@
             }
         }
 
+        @include bem.elem('image-img') {
+            display:     block;
+            inline-size: 100%;
+            object-fit:  cover;
+        }
+
+        @include bem.elem('image-overlay') {
+            position:        absolute;
+            inset-block-end: 0;
+            inset-inline:    0;
+            z-index:         5;
+            padding-block:   props.get(vars.$image-overlay--pad-b);
+            padding-inline:  props.get(vars.$image-overlay--pad-i);
+        }
+
         @include bem.elem('body') {
             flex:            1 0 auto;
             padding-block:   props.get(vars.$pad-b);
@@ -129,7 +146,7 @@
 
         @include bem.modifier('quiet') {
             position:         relative;
-            margin:           0;
+            margin-inline:    0;
             background-color: transparent;
             border:           0;
 
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 8ee7158..8adbcde 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -2,11 +2,13 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !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;
-$rounding:      props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$divider-width:        props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !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;
+$rounding:             props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
+$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
 
 $hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
 
diff --git a/src/objects/_tabs.scss b/src/objects/_tabbar.scss
index 61085c2..e0dbcb0 100644
--- a/src/objects/_tabs.scss
+++ b/src/objects/_tabbar.scss
@@ -5,49 +5,46 @@
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
-@forward 'tabs.vars';
-@use 'tabs.vars' as vars;
+@forward 'tabbar.vars';
+@use 'tabbar.vars' as vars;
 
 @mixin styles {
     @include materialize-at-root(meta.module-variables('vars'));
 
-    @include bem.object('tabs') {
-        position:        relative;
-        display:         flex;
-        gap:             props.get(vars.$spacing);
+    @include bem.object('tabbar') {
         min-inline-size: 0;
         block-size:      props.get(vars.$block-size);
-        padding-inline:  calc(.5 * props.get(vars.$spacing));
-        margin-inline:   calc(-.5 * props.get(vars.$spacing));
         overflow-inline: auto;
+        box-shadow:      0 calc(-1 * props.get(vars.$indicator--width)) 0 0 props.get(vars.$railing--bg-color) inset;
 
-        &::after {
-            position:         absolute;
-            inset-block-end:  0;
-            inset-inline:     calc(.5 * props.get(vars.$spacing));
-            z-index:          -10;
-            block-size:       props.get(vars.$indicator--width);
-            content:          '';
-            background-color: props.get(vars.$railing--bg-color);
-        }
+        @include bem.elem('tabs') {
+            display:       flex;
+            block-size:    100%;
+            margin-inline: calc(-.5 * props.get(vars.$spacing));
 
-        @include bem.modifier('quiet') {
             &::after {
-                display: none;
+                display:     block;
+                inline-size: props.get(vars.$spacing);
+                content:     '';
             }
         }
 
+        @include bem.modifier('quiet') {
+            box-shadow: none;
+        }
+
         @include bem.modifier('adapt') {
-            block-size:      100%;
+            block-size: 100%;
         }
 
         @include bem.elem('tab') {
-            position:               relative;
-            display:                flex;
-            align-items:            center;
-            color:                  props.get(vars.$tab--text-color);
-            white-space:            nowrap;
-            border-block:           props.get(vars.$indicator--width) solid transparent;
+            position:       relative;
+            display:        flex;
+            align-items:    center;
+            padding-inline: calc(.5 * props.get(vars.$spacing));
+            color:          props.get(vars.$tab--text-color);
+            white-space:    nowrap;
+            border-block:   props.get(vars.$indicator--width) solid transparent;
 
             &::before {
                 position:          absolute;
@@ -86,10 +83,6 @@
             }
         }
 
-        @include bem.elem('caret') {
-            display: none;
-        }
-
         @include bem.modifier('accent') {
             @include bem.elem('tab') {
                 @include bem.is('selected') {
@@ -98,30 +91,5 @@
                 }
             }
         }
-
-        @include bem.is('collapsed') {
-            @include bem.elem('tab') {
-                display: none;
-
-                @include bem.is('selected') {
-                    display:                flex;
-                    color:                  props.get(vars.$tab--text-color);
-                    border-block-end-color: transparent;
-
-                    &:link,
-                    &:visited {
-                        &:hover,
-                        &:active,
-                        &:focus-visible {
-                            color: props.get(vars.$tab--selected--text-color);
-                        }
-                    }
-                }
-            }
-
-            @include bem.elem('caret') {
-                display: block;
-            }
-        }
     }
 }
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
new file mode 100644
index 0000000..f4486d6
--- /dev/null
+++ b/src/objects/_tabbar.vars.scss
@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default;
+$rounding:   props.def(--o-tabbar--rounding, props.get(core.$rounding)) !default;
+$spacing:    props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
+$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
+
+$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; 
+
+$key-focus--border-width:  props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$tab--text-color:           props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
+$tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
+$tab--accent--text-color:   props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
+
+$railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+
+$key-focus--text-color:    props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
+$key-focus--border-color:  props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_tabs.vars.scss b/src/objects/_tabs.vars.scss
deleted file mode 100644
index 08b24cb..0000000
--- a/src/objects/_tabs.vars.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'iro-sass/src/props';
-@use '../core.vars' as core;
-
-$block-size: props.def(--o-tabs--block-size, props.get(core.$size--700)) !default;
-$rounding:   props.def(--o-tabs--rounding, props.get(core.$rounding)) !default;
-$spacing:    props.def(--o-tabs--spacing, props.get(core.$size--400)) !default;
-$tab--pad-i: props.def(--o-tabs--tab--pad-i, props.get(core.$size--50)) !default;
-
-$indicator--width: props.def(--o-tabs--indicator--width, props.get(core.$border-width--medium)) !default; 
-
-$key-focus--border-width:  props.def(--o-tabs--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-tabs--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-tabs--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
-
-$tab--text-color:           props.def(--o-tabs--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
-$tab--selected--text-color: props.def(--o-tabs--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
-$tab--accent--text-color:   props.def(--o-tabs--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
-
-$railing--bg-color: props.def(--o-tabs--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
-
-$key-focus--text-color:    props.def(--o-tabs--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
-$key-focus--border-color:  props.def(--o-tabs--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
-$key-focus--outline-color: props.def(--o-tabs--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
index 6c38c3f..8e77a17 100644
--- a/src/scopes/_body.vars.scss
+++ b/src/scopes/_body.vars.scss
@@ -6,6 +6,6 @@
 $font-size:                  props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
 $paragraph--margin-bs:       props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
 $paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
-$img--max-block-size:        props.def(--s-body--img--max-block-size, calc(100vh - props.get(core.$size--2400))) !default;
+$img--max-block-size:        props.def(--s-body--img--max-block-size, none) !default;
 
 $strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_figures.vars.scss b/src/scopes/_figures.vars.scss
index 67c8cd5..1737078 100644
--- a/src/scopes/_figures.vars.scss
+++ b/src/scopes/_figures.vars.scss
@@ -6,5 +6,5 @@ $pad-b:        props.def(--s-figures--pad-b, props.get(core.$size--100)) !defaul
 $border-width: props.def(--s-figures--border-width, props.get(core.$border-width--thin)) !default;
 $font-size:    props.def(--s-figures--font-size, props.get(core.$font-size--100)) !default;
 
-$text-color:   props.def(--s-figures--text-color, props.get(core.$theme, --text-mute), 'color') !default;
-$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border), 'color') !default;
+$text-color:   props.def(--s-figures--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$border-color: props.def(--s-figures--border-color, props.get(core.$theme, --border-mute), 'color') !default;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index c5d1eef..701f638 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -44,7 +44,7 @@
 @include iro.o-status-indicator--styles;
 @include iro.o-switch--styles;
 @include iro.o-table--styles;
-@include iro.o-tabs--styles;
+@include iro.o-tabbar--styles;
 @include iro.o-text-field--styles;
 @include iro.o-thumbnail--styles;
 
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index 2ab9bef..e0f6a15 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -26,7 +26,16 @@ mixin card-image
             classes[attributes.class] = true;
         }
 
-    img(class=classes src=attributes.src style=attributes.style)
+        let imgClasses = {
+            'o-card__image-img': true,
+            'l-card-list__card-image': attributes.list
+        }
+
+    div(class=classes)
+        img(class=imgClasses src=attributes.src style=attributes.style)
+        if block
+            .o-card__image-overlay 
+                block
 
 mixin card-body
     .o-card__body(style=attributes.style)
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 633cf01..61081a9 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -36,6 +36,7 @@ mixin view-card
 
             +card(quiet=true href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+                    +badge= 'Drawings'
                 +card-body
                     +card-title= 'XS Heading'
                     +card-content
@@ -59,7 +60,7 @@ mixin view-card
             div(class=classes)
                 each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
                     +card(quiet=quiet href='#' class='l-card-list__card')
-                        +card-image(src=img class='l-card-list__card-image')
+                        +card-image(src=img list=true)
                         +card-body
                             .l-media
                                 .l-media__block.l-media__block--main