7 files changed, 19 insertions, 13 deletions

diff --git a/package.json b/package.json
index e89abdb..b1233f2 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 check trash bookmark tags user chevron-right hash public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x public/icons.svg",
         "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 47e2c93..751a01e 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -105,7 +105,7 @@
         text-decoration:  none;
         text-overflow:    ellipsis;
         white-space:      nowrap;
-    
+
         &:link,
         &:visited,
         &:enabled {
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index ff88774..1e95b39 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -12,8 +12,8 @@
             --rounding:  3px,
             --border:    1px,
             --item: (
-                --pad-x: .8rem,
-                --pad-y: .4rem,
+                --pad-x: iro.fn-px-to-rem(12px),
+                --pad-y: iro.fn-px-to-rem(7px),
             ),
         ),
     ), 'dims');
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index ca0d373..09bebf0 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -6,7 +6,7 @@
         --dims: (
             --size:              iro.fn-px-to-rem(40px),
             --size-sm:           iro.fn-px-to-rem(30px),
-            --size-xs:           iro.fn-px-to-rem(20px),
+            --size-xs:           iro.fn-px-to-rem(18px),
             --indicator-size:    fn.foreign-dim(--status-indicator, --size),
             --indicator-spacing: iro.fn-px-to-rem(3px),
             --rounding:          25%,
@@ -79,7 +79,7 @@
         }
 
         @include iro.bem-modifier('xs') {
-            font-size: iro.fn-px-to-rem(12px);
+            font-size: iro.fn-px-to-rem(11px);
 
             @include iro.bem-elem('content') {
                 width:       fn.dim(--size-xs);
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 91ef0a5..12899a3 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -6,8 +6,8 @@
         --dims: (
             --separator: .6rem,
             --item: (
-                --pad-x: .8rem,
-                --pad-y: .4rem,
+                --pad-x: iro.fn-px-to-rem(10px),
+                --pad-y: iro.fn-px-to-rem(5px),
             ),
         ),
     ), 'dims');
@@ -61,8 +61,7 @@
             &:enabled {
                 color: currentColor;
 
-                &:hover,
-                &:active {
+                @include iro.bem-multi('&:hover, &:active', 'is' 'selected') {
                     background-color: fn.color(--item --hover --bg);
                     color:            fn.color(--item --hover --label);
                 }
diff --git a/tpl/index.pug b/tpl/index.pug
index fa9bd85..510e09b 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -476,7 +476,7 @@ html
             +rule(level='medium')
 
             +box
-                div(style={ display: 'flex', gap: '2rem' })
+                div(style={ display: 'flex', gap: '3rem' })
                     +menu
                         +menu-header= 'Category 1'
                         +menu-item= 'Mark as away'
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 7c9c07e..97a571d 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -1,12 +1,19 @@
 include icon.pug
 include status-indicator.pug
+include action-button.pug
 
 mixin menu
     .o-menu
         block
 
 mixin menu-item
-    button.o-menu__item(disabled=attributes.disabled)
+    -
+        let classes = {
+            'o-menu__item': true,
+            'is-selected':  attributes.selected,
+        }
+
+    button(class=classes, disabled=attributes.disabled)
         .l-card.l-card--flush
             if attributes.icon
                 .l-card__block.o-menu__icon-slot
@@ -14,7 +21,7 @@ mixin menu-item
                         +status-indicator(attributes.icon)(class='o-menu__icon')
                     else
                         +icon(attributes.icon)(class='o-menu__icon')
-            .l-card__block.l-card__block--main
+            .l-card__block.l-card__block--main&attributes({ class: attributes.contentClass })
                 block
             if attributes.postIcon
                 .l-card__block.o-menu__icon-slot