Skip to content

fix(menu): align slotted icon sizing and layout with Material 3 specs #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
treeder merged 3 commits into from
Oct 14, 2026
Merged

fix(menu): align slotted icon sizing and layout with Material 3 specs #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c66ec2
fix(menu): align slotted icon sizing and gap with Material 3 specs
treeder Oct 14, 2026
cb32de3
fix: avoid overriding font-variation-settings on slotted md-icon
treeder Oct 14, 2026
357275a
fix: remove explicit dimensions on slot start and end to avoid empty …
treeder Oct 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 36 additions & 1 deletion demo/menu-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ <h1>Material 3 Menus</h1>
<span class="spec-badge">Default (M3 Expressive)</span>
<h2>Vertical Menu (Default)</h2>
<p>
44px item height, 16px container radius, 20px icons, inset 12px rounded pill selection, and shape-morphing
48px item height, 16px container radius, 20px icons, inset 12px rounded pill selection, and shape-morphing
motion. Applied by default to all <code>&lt;md-menu&gt;</code> elements.
</p>

Expand Down Expand Up @@ -280,6 +280,41 @@ <h2>Cascading Submenu</h2>
</md-menu>
</div>
</div>

<!-- 5. Slotted Icons & Avatars -->
<div class="card">
<span class="spec-badge">Slotted Content</span>
<h2>Slotted Icons & Avatars</h2>
<p>Demonstrates proper 20px spec containment for standard icons, slotted images/avatars, and SVG graphics.</p>

<div class="anchor-wrapper">
<md-button id="btn-slotted" color="tonal" onclick="document.getElementById('menu-slotted').show()">
Open Slotted Menu
</md-button>
<md-menu id="menu-slotted" anchor="btn-slotted">
<md-menu-item>
<div slot="headline">Travis Reeder</div>
<img slot="start" src="./images/avatar2.png" style="border-radius: 50%" alt="Avatar" />
</md-menu-item>
<md-menu-item>
<div slot="headline">Standard Icon</div>
<md-icon slot="start">settings</md-icon>
</md-menu-item>
<md-menu-item>
<div slot="headline">SVG Graphic</div>
<svg slot="start" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg>
</md-menu-item>
<md-divider></md-divider>
<md-menu-item>
<div slot="headline">Trailing Indicator</div>
<md-icon slot="start">folder</md-icon>
<md-icon slot="end">chevron_right</md-icon>
</md-menu-item>
</md-menu>
</div>
</div>
</div>
</body>
</html>
16 changes: 8 additions & 8 deletions menu/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ menu.close()

The modern Material 3 Expressive vertical menu is enabled by default:

- **Item height**: 44px
- **Horizontal padding**: 16px
- **Element gap**: 12px
- **Item height**: 48px
- **Horizontal padding**: 12px
- **Element gap**: 8px
- **Container corner radius**: 16px (`md.sys.shape.corner.large`)
- **Item corner radius**: Inset pill with 12px outer corners (`md.sys.shape.corner.medium`) and 4px inner corners
- **Icon size**: 20px (`md.comp.menus.item.leading/trailing-icon-size`)
Expand Down Expand Up @@ -189,10 +189,10 @@ Submenus open next to their parent item without overlapping it. Submenus automat
| `--md-menu-container-shape` | `4px` (baseline) / `16px` (vertical) | Menu surface corner radius |
| `--md-menu-container-color` | `surface-container` (baseline) / `surface-container-low` (vertical) | Background color of menu container |
| `--md-menu-container-max-width` | `280px` | Maximum container width |
| `--md-menu-item-one-line-container-height` | `48px` (baseline) / `44px` (vertical) | Height of a single-line menu item |
| `--md-menu-item-leading-space` | `12px` (baseline) / `16px` (vertical) | Left/leading padding inside menu item |
| `--md-menu-item-trailing-space` | `12px` (baseline) / `16px` (vertical) | Right/trailing padding inside menu item |
| `--md-menu-item-between-space` | `12px` | Spacing between icons and text inside item |
| `--md-menu-item-icon-size` | `24px` (baseline) / `20px` (vertical) | Sizing of slotted leading and trailing icons |
| `--md-menu-item-one-line-container-height` | `48px` | Height of a single-line menu item |
| `--md-menu-item-leading-space` | `12px` | Left/leading padding inside menu item |
| `--md-menu-item-trailing-space` | `12px` | Right/trailing padding inside menu item |
| `--md-menu-item-between-space` | `8px` | Spacing between icons and text inside item |
| `--md-menu-item-icon-size` | `20px` | Sizing of slotted leading and trailing icons |
| `--md-menu-item-selected-container-color` | `secondary-container` (baseline/standard) / `tertiary` (vibrant) | Background color of selected item |
| `--md-menu-item-selected-label-text-color` | `on-secondary-container` / `on-tertiary` (vibrant) | Label color of selected item |
20 changes: 15 additions & 5 deletions menu/menu-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const menuItemStyles = css`
);
letter-spacing: var(--md-menu-item-label-text-tracking, var(--md-sys-typescale-label-large-tracking, 0.1px));
min-height: var(--md-menu-item-one-line-container-height, 48px);
gap: var(--md-menu-item-between-space, 12px);
gap: var(--md-menu-item-between-space, 8px);
padding-top: var(--md-menu-item-top-space, 8px);
padding-bottom: var(--md-menu-item-bottom-space, 8px);
padding-inline-start: var(--md-menu-item-leading-space, 12px);
Expand Down Expand Up @@ -137,12 +137,22 @@ export const menuItemStyles = css`
}
:is([slot='start'], [slot='end'])::slotted(*) {
fill: currentColor;
font-size: var(--md-menu-item-icon-size, 24px);
width: var(--md-menu-item-icon-size, 24px);
height: var(--md-menu-item-icon-size, 24px);
font-size: var(--md-menu-item-icon-size, 20px);
width: var(--md-menu-item-icon-size, 20px);
height: var(--md-menu-item-icon-size, 20px);
max-width: var(--md-menu-item-icon-size, 20px);
max-height: var(--md-menu-item-icon-size, 20px);
box-sizing: border-box;
object-fit: contain;
flex-shrink: 0;
}
:is([slot='start'], [slot='end'])::slotted(img) {
border-radius: inherit;
object-fit: cover;
}
:is([slot='start'], [slot='end'])::slotted(md-icon) {
--md-icon-size: var(--md-menu-item-icon-size, 24px);
--md-icon-size: var(--md-menu-item-icon-size, 20px);
font-size: var(--md-menu-item-icon-size, 20px);
}
[slot='start'] {
color: var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));
Expand Down
41 changes: 24 additions & 17 deletions menu/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1027,12 +1027,12 @@ export class Menu extends LitElement {
--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));
--md-menu-container-shape: var(--md-sys-shape-corner-large, 16px);
--md-menu-container-color: var(--md-sys-color-surface-container-low, #f7f2fa);
--md-menu-item-one-line-container-height: 44px;
--md-menu-item-leading-space: 16px;
--md-menu-item-trailing-space: 16px;
--md-menu-item-one-line-container-height: 48px;
--md-menu-item-leading-space: 12px;
--md-menu-item-trailing-space: 12px;
--md-menu-item-top-space: 8px;
--md-menu-item-bottom-space: 8px;
--md-menu-item-between-space: 12px;
--md-menu-item-between-space: 8px;
--md-menu-item-icon-size: 20px;
--md-menu-item-shape: var(--md-sys-shape-corner-extra-small, 4px);
--md-menu-item-selected-shape: var(--md-sys-shape-corner-medium, 12px);
Expand Down Expand Up @@ -1117,8 +1117,8 @@ export class Menu extends LitElement {
--md-menu-item-trailing-space: 12px;
--md-menu-item-top-space: 8px;
--md-menu-item-bottom-space: 8px;
--md-menu-item-between-space: 12px;
--md-menu-item-icon-size: 24px;
--md-menu-item-between-space: 8px;
--md-menu-item-icon-size: 20px;
--md-menu-item-shape: 0px;
--md-menu-item-selected-shape: 0px;
}
Expand Down Expand Up @@ -1157,12 +1157,12 @@ export class Menu extends LitElement {
:host([vertical]) {
--md-menu-container-shape: var(--md-sys-shape-corner-large, 16px);
--md-menu-container-color: var(--md-sys-color-surface-container-low, #f7f2fa);
--md-menu-item-one-line-container-height: 44px;
--md-menu-item-leading-space: 16px;
--md-menu-item-trailing-space: 16px;
--md-menu-item-one-line-container-height: 48px;
--md-menu-item-leading-space: 12px;
--md-menu-item-trailing-space: 12px;
--md-menu-item-top-space: 8px;
--md-menu-item-bottom-space: 8px;
--md-menu-item-between-space: 12px;
--md-menu-item-between-space: 8px;
--md-menu-item-icon-size: 20px;
--md-menu-item-shape: var(--md-sys-shape-corner-extra-small, 4px);
--md-menu-item-selected-shape: var(--md-sys-shape-corner-medium, 12px);
Expand Down Expand Up @@ -1221,8 +1221,10 @@ export class Menu extends LitElement {
}

/* First child in vertical menu */
:host(:not([variant='baseline']):not([baseline])) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='first']),
:host(:not([variant='baseline']):not([baseline])) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):first-of-type),
:host(:not([variant='baseline']):not([baseline]))
::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='first']),
:host(:not([variant='baseline']):not([baseline]))
::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):first-of-type),
:host([variant='vertical']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='first']),
:host([variant='vertical']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):first-of-type),
:host([variant='expressive']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='first']),
Expand All @@ -1236,8 +1238,10 @@ export class Menu extends LitElement {
}

/* Last child in vertical menu */
:host(:not([variant='baseline']):not([baseline])) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='last']),
:host(:not([variant='baseline']):not([baseline])) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):last-of-type),
:host(:not([variant='baseline']):not([baseline]))
::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='last']),
:host(:not([variant='baseline']):not([baseline]))
::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):last-of-type),
:host([variant='vertical']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='last']),
:host([variant='vertical']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):last-of-type),
:host([variant='expressive']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='last']),
Expand All @@ -1251,8 +1255,10 @@ export class Menu extends LitElement {
}

/* Single child in vertical menu */
:host(:not([variant='baseline']):not([baseline])) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='single']),
:host(:not([variant='baseline']):not([baseline])) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):only-of-type),
:host(:not([variant='baseline']):not([baseline]))
::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='single']),
:host(:not([variant='baseline']):not([baseline]))
::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):only-of-type),
:host([variant='vertical']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='single']),
:host([variant='vertical']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):only-of-type),
:host([variant='expressive']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item])[menu-position='single']),
Expand All @@ -1264,7 +1270,8 @@ export class Menu extends LitElement {

/* Hover and focus morphing in vertical menu */
:host(:not([variant='baseline']):not([baseline])) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):hover),
:host(:not([variant='baseline']):not([baseline])) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):focus-within),
:host(:not([variant='baseline']):not([baseline]))
::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):focus-within),
:host([variant='vertical']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):hover),
:host([variant='vertical']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):focus-within),
:host([variant='expressive']) ::slotted(:is(md-menu-item, md-sub-menu, [md-menu-item]):hover),
Expand Down
Loading