Update

23 files changed, 289 insertions, 54 deletions

diff --git a/package.json b/package.json
index 9855892..81ec80a 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
         "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
         "build:assets": "cp -r static/* public/",
         "build:app": "pug tpl/index.pug -p tpl --out public/",
-        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg",
         "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/_base.scss b/src/_base.scss
index 4932235..aecf6af 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -67,12 +67,10 @@ p {
 }
 
 strong {
-    color:       fn.color(--heading);
     font-weight: bold;
 }
 
 small {
-    color:     fn.color(--text-mute);
     font-size: fn.dim(--font-size --75);
 }
 
diff --git a/src/_config.scss b/src/_config.scss
index 56a74e1..ffba8c9 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -156,6 +156,10 @@ $theme-light: (
         --bg-l1:   --base --100,
         --bg-base: --base --200,
     )),
+
+    --constants: (
+        --shadow: rgba(#000, 0.15),
+    ),
 ) !default;
 
 $theme-dark: (
@@ -212,6 +216,10 @@ $theme-dark: (
         --bg-l1:   --base --75,
         --bg-l2:   --base --100,
     )),
+
+    --constants: (
+        --shadow: rgba(#000, 0.5),
+    ),
 ) !default;
 
 $themes: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 23ee4d4..797001c 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -101,6 +101,12 @@
             --thin:   1px,
         ),
 
+        --shadow: (
+            --x:    0,
+            --y:    1px,
+            --blur: 4px,
+        ),
+
         --rounding:   4px,
 
         --key-focus: (
@@ -110,7 +116,7 @@
         ),
 
         --paragraph: (
-            --margin-bs: fn.dim(--size --300, null),
+            --margin-bs: fn.dim(--size --200, null),
         ),
 
         --heading: (
@@ -230,6 +236,14 @@
         ), $tree);
     }
 
+    @each $color, $value in map.get($theme, --constants) {
+        @include iro.props-store((
+            --colors: (
+                $color: $value,
+            ),
+        ), $tree);
+    }
+
     @each $color, $ref in map.get($theme, --semantic) {
         $res: ();
 
@@ -246,7 +260,7 @@
                 $color: $res,
             ),
         ), $tree);
-    }    
+    }
 }
 
 @each $theme-name, $theme in config.$themes {
diff --git a/src/_layouts.scss b/src/_layouts.scss
index 26cfe3f..779fd64 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -4,4 +4,5 @@
 @use 'layouts/form';
 @use 'layouts/flex';
 @use 'layouts/overflow';
+@use 'layouts/card-list';
 @use 'layouts/message-group';
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 29d792b..dca6831 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -20,8 +20,7 @@
     @include set-font(--standard, (
         --line-height: null,
         --size:        fn.global-dim(list.join(--heading, $size)),
-        --weight:      bold,
-        --spacing:     1px
+        --weight:      bold
     ));
 
     color: fn.global-color(--heading);
diff --git a/src/_utils.scss b/src/_utils.scss
index a99d7ec..06afa62 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -119,6 +119,10 @@ $sizes: 0 10 50 75 100 125 200 400 700 800 !default;
     color: fn.color(--text-mute);
 }
 
+@include iro.bem-utility('c-mute-more') {
+    color: fn.color(--text-mute-more);
+}
+
 @include iro.bem-utility('mt-neutralize') {
     &::before {
         content:       '';
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
new file mode 100644
index 0000000..c27b297
--- /dev/null
+++ b/src/layouts/_card-list.scss
@@ -0,0 +1,78 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+@use 'include-media/dist/include-media' as media;
+
+@include iro.props-namespace('card-list') {
+    @include iro.props-store((
+        --dims: (
+            --row-gap: fn.global-dim(--size --800),
+            --col-gap: fn.global-dim(--size --400),
+
+            --grid: (
+                --row-gap:   fn.global-dim(--size --800),
+                --col-gap:   fn.global-dim(--size --400),
+                --col-width: fn.global-dim(--size --3200),
+            ),
+            --masonry: (
+                --row-gap:   fn.global-dim(--size --800),
+                --col-gap:   fn.global-dim(--size --400),
+                --col-width: fn.global-dim(--size --3200),
+            ),
+            --masonry-h: (
+                --row-gap:    fn.global-dim(--size --800),
+                --col-gap:    fn.global-dim(--size --400),
+                --row-height: fn.global-dim(--size --3200),
+            )
+        ),
+        --colors: (
+            --border: fn.global-color(--border),
+        ),
+    ));
+
+    @include iro.bem-layout(iro.props-namespace()) {
+        display:        flex;
+        flex-direction: column;
+        gap:            fn.dim(--row-gap) fn.dim(--col-gap);
+
+        @include iro.bem-modifier('grid') {
+            display:               grid;
+            grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
+            gap:                   fn.dim(--grid --row-gap) fn.dim(--grid --col-gap);
+        }
+
+        @include iro.bem-modifier('masonry') {
+            display:    block;
+            columns:    auto fn.dim(--masonry --col-width);
+            column-gap: fn.dim(--masonry --col-gap);
+
+            @include iro.bem-elem('card') {
+                margin-bottom: fn.dim(--masonry --row-gap);
+            }
+        }
+
+        @include iro.bem-modifier('masonry-h') {
+            flex-flow: row wrap;
+            gap:       fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap);
+
+            @include iro.bem-elem('card') {
+                flex:      1 0 auto;
+                max-width: 100%;
+            }
+
+            @include iro.bem-elem('card-content') {
+                height: fn.dim(--masonry-h --row-height);
+            }
+
+            @include iro.bem-elem('dummy') {
+                flex:   1 0 auto;
+                width:  fn.dim(--masonry-h --row-height);
+            }
+        }
+
+        @include iro.bem-modifier('aspect-5\\/4') {
+            @include iro.bem-elem('card') {
+                aspect-ratio: 5 / 4;
+            }
+        }
+    }
+}
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%));
diff --git a/static/0000 Cover@0.5x.webp b/static/0000 Cover@0.5x.webp
new file mode 100755
index 0000000..2ad8155
--- /dev/null
+++ b/static/0000 Cover@0.5x.webp
diff --git a/static/01 Design Cody.png b/static/01 Design Cody.png
new file mode 100755
index 0000000..d734a41
--- /dev/null
+++ b/static/01 Design Cody.png
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index b5fb8da..1fa3347 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -5,7 +5,7 @@ mixin a-button
             'o-button--block':   attributes.block,
             'o-button--primary': attributes.primary,
             'o-button--outline': attributes.outline,
-            'o-button--round':   !!attributes.icon
+            'o-button--round':   !!attributes.icon && !block
         }
         if (attributes.variant) {
             classes['o-button--' + attributes.variant] = true
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d61393d..d7595d1 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,7 +1,12 @@
 mixin card
     -
         let classes = {
-            'o-card': true,
+            'o-card':        true,
+            'o-card--quiet': !!attributes.quiet,
+        }
+
+        if (attributes.class) {
+            classes[attributes.class] = true;
         }
 
     if attributes.href
@@ -13,10 +18,10 @@ mixin card
 
 mixin card-image
     .o-card__image
-        img.o-card__image-img(src=attributes.src)
+        img.o-card__image-img(src=attributes.src style=attributes.style)
 
 mixin card-body
-    .o-card__body
+    .o-card__body(style=attributes.style)
         block
 
 mixin card-title 
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 6858867..e466cdc 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,23 +1,54 @@
 mixin view-card 
     +view('card', 'Card')
-        .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' })
+        .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' })
             +card(href='#')
-                +card-image(src='Drawing_Half.png')
+                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
                 +card-avatar(src='avatar.png')
                 +card-body
                     +card-title= 'XS Heading'
-                    +card-content= loremIpsum
+                    +card-content
+                        p= loremIpsum
+                        p= loremIpsum
                 +card-footer
                     = 'Footer'
 
-            +card(href='#')
+            +card
                 +card-body
                     .l-media
                         +avatar(class='l-media__block' src='avatar.png')
                         .l-media__block.l-media__block--main
                             strong.u-d-block= 'Volpeon'
                             small.u-d-block= '@volpeon@is-a.wyvern.rip'
-                    +card-content= loremIpsum
-                +card-image(src='Drawing_Half.png')
+                    +card-content
+                        p= loremIpsum
+                        p= loremIpsum
+                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '16 / 9' })
                 +card-body
-                    = 'Footer'
+                    .l-media
+                        .l-media__block
+                            +badge('positive')(quiet=true icon='repeat' href='#')
+                                +icon('repeat')
+                                strong.u-mis-50= '12'
+                        .l-media__block
+                            +badge('warning')(quiet=true icon='star' href='#')
+                                +icon('star')
+                                strong.u-mis-50= '34'
+                        .l-media__block.u-mis-auto
+                            +a-button(primary=true)= 'Reply'
+
+            +card(quiet=true href='#')
+                +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+                +card-body
+                    +card-title= 'XS Heading'
+                    +card-content
+                        p= loremIpsum
+                        p= loremIpsum
+
+        +divider('faint')
+
+        .l-card-list.l-card-list--masonry
+            each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
+                +card(href='#' class='l-card-list__card')
+                    +card-image(src=img)
+                    +card-body
+                        +card-title= 'XS Heading'
diff --git a/tpl/views/icon-nav.pug b/tpl/views/icon-nav.pug
index e71229d..8ba9880 100644
--- a/tpl/views/icon-nav.pug
+++ b/tpl/views/icon-nav.pug
@@ -5,7 +5,7 @@ mixin view-icon-nav
                 +icon-nav-item('hash')
                 +icon-nav-item('bookmark')(selected=true)
                 +icon-nav-item('tags')
-                +icon-nav-item('cog')(class='u-ml-auto')
+                +icon-nav-item('cog')(class='u-mis-auto')
                 +icon-nav-item('logout')
 
         .c-box
diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug
index dc744d9..48cb008 100644
--- a/tpl/views/message-group.pug
+++ b/tpl/views/message-group.pug
@@ -71,10 +71,10 @@ mixin view-message-group
                         .l-media
                             .l-media__block.l-media__block--main
                                 strong= 'Volpeon'
-                                small.u-ml-100= '@volpeon@mk.vulpes.one'
+                                small.u-mis-100= '@volpeon@mk.vulpes.one'
                             small.l-media__block
                                 = '5 minutes ago'
-                                +icon('lock')(class='u-ml-100')
+                                +icon('lock')(class='u-mis-100')
                     +slot('body')= 'Full width bubble messages test'
                 +message()(theme='t-up' group=true)
                     +slot('body')= loremIpsum
diff --git a/tpl/views/message.pug b/tpl/views/message.pug
index 9130537..dc8b289 100644
--- a/tpl/views/message.pug
+++ b/tpl/views/message.pug
@@ -5,7 +5,7 @@ mixin view-message
                 +slot('body')= loremIpsum
                 +slot('time')
                     = '12:34'
-                    +icon('lock')(class='u-ml-100')
+                    +icon('lock')(class='u-mis-100')
 
         .c-box
             +message('Volpeon')(compact=true highlight=true theme='t-up')
@@ -21,10 +21,10 @@ mixin view-message
                     .l-media
                         .l-media__block.l-media__block--main
                             strong= 'Volpeon'
-                            small.u-ml-100= '@volpeon@mk.vulpes.one'
+                            small.u-mis-100= '@volpeon@mk.vulpes.one'
                         small.l-media__block
                             = '5 minutes ago'
-                            +icon('lock')(class='u-ml-100')
+                            +icon('lock')(class='u-mis-100')
                 +slot('body')
                     = loremIpsum
                     = loremIpsum
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 9a60741..165e2ce 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -17,7 +17,7 @@ mixin view-text-field
                 +text-field(placeholder='Just landed in L.A.' class="u-p-50")
                     +slot('pre')
                         +action-button(quiet=true class='l-media__block')= 'Volpeon'
-                        +divider('vertical')(class='u-ml-50')
+                        +divider('vertical')(class='u-mis-50')
                     +slot('post')
                         +action-button(quiet=true icon='smile' class='l-media__block')
                         +action-button(quiet=true icon='send' class='l-media__block')