Repository navigation
fix(menu): align slotted icon sizing and layout with Material 3 specs - #151
Conversation
🚀 Deploying Preview to Cloudflare 🚀Preview URL: https://fix-slotted-menu-icons-material.treeder.workers.dev (commit 357275a)This URL reflects your latest Preview deploymentPreview Deployments by commit
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
📋 Review Summary
This pull request refines Material Design 3 menu item metrics and icon handling across md-menu and md-menu-item, adjusting container height to 48px, horizontal padding to 12px, item gap to 8px, and enforcing 20px icon sizing across slotted icons, images, and SVGs. In addition, it updates the documentation and menu demo page to demonstrate slotted avatars, icons, and SVGs.
🔍 General Feedback
- Standardising the menu item dimensions (48px height, 12px horizontal padding, 8px gap) and capping slotted icons/images to 20px aligns nicely with the Material Design 3 menu specifications.
- The new slotted icons and avatars section in
demo/menu-demo.htmlis a great showcase of the containment behavior.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 43,114 |
| Input Tokens (cached) | 418,560 (⚡ 90.7% cached) |
| Thinking / Reasoning Tokens | 87 |
| Output Tokens | 459 |
| Total Session Tokens | 462,220 |
| Cost (uncached input) | $0.0323 |
| Cost (cached input) | $0.0314 |
| Cost (thinking / reasoning) | $0.0003 |
| Cost (response output) | $0.0017 |
| Estimated Total Cost | $0.0658 |
Gemini 3.8 Flash: introductory rate $0.75/$3.75 per 1M applied; reverts to $1.5/$7.5 after 2026-12-31.
Gemini 3.8 Flash: standard tier; batch and flex are half again, priority is higher.
Cache reads are priced here, but context-cache STORAGE, where the model charges for it separately per token-hour, is not included, so the figure can run slightly low.
There was a problem hiding this comment.
📋 Review Summary
This pull request refines Material 3 menu styling and specifications across the codebase, updating the standard item height to 48px, horizontal padding to 12px, element gap to 8px, and icon sizing to 20px in both vertical and baseline modes. Documentation and demos have been updated accordingly, including a new showcase for slotted icons, avatars, and SVGs. While the containment rules on slotted elements work well, applying fixed dimensions directly to the slot elements causes unpopulated leading and trailing slots to reserve empty 20px boxes, which introduces layout regressions for text-only items and select options.
✅ Resolved Items from Prior Reviews
- Removed hard-coded
font-variation-settings: 'opsz' 20on slottedmd-iconelements so that other standard Material Symbols font variation axes (such asFILL,wght, andGRAD) remain intact. (menu/menu-item.js:156)
🔍 General Feedback
- Updating the M3 menu specs to 48px item height, 12px padding, and 8px gap aligns the implementation cleanly with the latest Material 3 Expressive guidelines.
- The new slotted icons and avatars demo section in
demo/menu-demo.htmlis a great addition for validating SVG graphics, standard icons, and circular avatar images. - Ensure all components reusing
menuItemStyles(such as<md-select-option>) are regression-tested when altering default menu item dimensions.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 43,070 |
| Input Tokens (cached) | 418,560 (⚡ 90.5% cached) |
| PR Comments History Tokens | 799 |
| Thinking / Reasoning Tokens | 46,251 |
| Output Tokens | 826 |
| Total Session Tokens | 509,506 |
| Cost (uncached input) | $0.0329 |
| Cost (cached input) | $0.0314 |
| Cost (thinking / reasoning) | $0.1734 |
| Cost (response output) | $0.0031 |
| Estimated Total Cost | $0.2408 |
Gemini 3.8 Flash: introductory rate $0.75/$3.75 per 1M applied; reverts to $1.5/$7.5 after 2026-12-31.
Gemini 3.8 Flash: standard tier; batch and flex are half again, priority is higher.
Cache reads are priced here, but context-cache STORAGE, where the model charges for it separately per token-hour, is not included, so the figure can run slightly low.
There was a problem hiding this comment.
📋 Review Summary
This pull request refines Material 3 menu item specifications and slotted icon styling to align with the updated design tokens. It standardises menu item heights to 48px, adjusts element spacing to 8px, and ensures 20px icon containment for slotted icons, SVGs, and avatars across both vertical and baseline variants. In addition, the documentation and interactive demo have been updated to demonstrate slotted media containment.
✅ Resolved Items from Prior Reviews
- Removed hard-coded font-variation-settings on slotted md-icon elements to preserve custom font variation axes such as FILL and wght. (
menu/menu-item.js:156) - Removed fixed dimensions from [slot='start'] so that items without leading icons do not display an empty 20px indent. (
menu/menu-item.js:168) - Removed fixed dimensions from [slot='end'] so that items without trailing icons or indicators render flush without reserved blank space. (
menu/menu-item.js:181)
🔍 General Feedback
- Applying width, height, max-width, and max-height constraints to :is([slot='start'], [slot='end'])::slotted(*) ensures that custom slotted images, avatars, and SVGs are consistently contained within the 20px spec bounding box without breaking layout alignment.
- The synchronised updates across tokens in menu.js, styling in menu-item.js, documentation in menu/README.md, and demo examples in demo/menu-demo.html maintain excellent project consistency.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 42,123 |
| Input Tokens (cached) | 418,560 (⚡ 90.5% cached) |
| PR Comments History Tokens | 1,814 |
| Thinking / Reasoning Tokens | 3,752 |
| Output Tokens | 412 |
| Total Session Tokens | 466,661 |
| Cost (uncached input) | $0.0330 |
| Cost (cached input) | $0.0314 |
| Cost (thinking / reasoning) | $0.0141 |
| Cost (response output) | $0.0015 |
| Estimated Total Cost | $0.0800 |
Gemini 3.8 Flash: introductory rate $0.75/$3.75 per 1M applied; reverts to $1.5/$7.5 after 2026-12-31.
Gemini 3.8 Flash: standard tier; batch and flex are half again, priority is higher.
Cache reads are priced here, but context-cache STORAGE, where the model charges for it separately per token-hour, is not included, so the figure can run slightly low.
1 participant
Summary
Aligns menu item icon sizing, slot constraints, item gap, and container height with the official Material 3 Menus Specification. Previously, icons defaulted to
24pxinstead of20px, and arbitrary slotted content (such as avatars, images, or SVGs) could expand unconstrained beyond the standard bounding box.Key Changes
--md-menu-item-icon-sizefallback and token values to20pxacross both baseline and expressive vertical variants.20px x 20pxbounding box (width,height,min/max-width,min/max-height,flex-shrink: 0) on[slot='start']and[slot='end'].box-sizing: border-box,object-fit: contain,max-width, andmax-heightto::slotted(*).object-fit: coverandborder-radius: inheritfor::slotted(img)so custom avatars and profile images maintain their aspect ratio and circular clipping.font-variation-settings: 'opsz' 20to::slotted(md-icon).--md-menu-item-between-spacefrom12pxto8pxper the spec diagram.48px.menu/README.md.demo/menu-demo.htmlshowcasing slotted standard icons, avatars (<img>), and SVG graphics strictly constrained to 20px.Verification
demo/menu-demo.html.