Repository navigation
feat(dialog): update md-dialog to Material Design 3 specification - #150
Conversation
🚀 Deploying Preview to Cloudflare 🚀Preview URL: https://verify-md-dialog-spec-material.treeder.workers.dev (commit d0c38fc)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 aligns <md-dialog> with the Material Design 3 specification by integrating <md-elevation> with coordinated open/close animations, introducing stacked action button layouts, adding alert dialog support with scrim dismissal prevention, and adding a full-screen variant. In addition, it provides a dedicated dialog demo page (demo/dialog-demo.html), updates the main demo page, and cleans up legacy decorator remnants in favor of Lit reactive properties.
🔍 General Feedback
- Excellent implementation of the Material Design 3 Dialogs specification. The integration of
<md-elevation>(Level 3 elevation) along with matching fade keyframes ininternal/animations.jsensures smooth transitions consistent with other M3 surfaces. - The inclusion of
stackedactions (flex-direction: column-reverse; align-items: stretch;) correctly prioritises the confirming action on top of the dismissive action according to M3 mobile layout guidelines. - The dedicated
demo/dialog-demo.htmlshowcases all variants (basic, alert, stacked, scrollable with dividers, and full-screen) cleanly and provides clear interactive feedback. - Removing the obsolete commented-out TypeScript decorators at the bottom of
dialog.jsin favor of declarativestatic propertiessignificantly improves code hygiene.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 53,150 |
| Input Tokens (cached) | 408,454 (⚡ 88.4% cached) |
| PR Comments History Tokens | 524 |
| Thinking / Reasoning Tokens | 14,707 |
| Output Tokens | 416 |
| Total Session Tokens | 477,251 |
| Cost (uncached input) | $0.0403 |
| Cost (cached input) | $0.0306 |
| Cost (thinking / reasoning) | $0.0552 |
| Cost (response output) | $0.0016 |
| Estimated Total Cost | $0.1276 |
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 enhances <md-dialog> to align with the Material Design 3 Dialogs specification. It introduces container Level 3 elevation via <md-elevation>, alert dialog behaviour (type="alert" and prevent-scrim-close), stacked action button layouts (stacked), full-screen dialog support (fullscreen), and reactive scroll divider state. In addition, the PR provides a dedicated demonstration page (demo/dialog-demo.html) and comprehensive documentation updates.
✅ Resolved Items from Prior Reviews
- Corrected corrupted
@clickevent binding syntax across the HTML code snippets indialog/README.md. (dialog/README.md:27)
🔍 General Feedback
- Promoting internal state flags (
isAtScrollTop,isAtScrollBottom,hasHeadline,hasActions,hasIcon) to reactive properties with{ state: true }indialog.jsresolves a key issue where slot changes and intersection updates failed to trigger component re-renders. - The new
demo/dialog-demo.htmlpage provides a clear, interactive showcase covering all Material 3 dialog variants and interaction models. - The rewritten
dialog/README.mdis thorough and well-structured, providing comprehensive coverage of variants, design tokens, slots, and events.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 53,242 |
| Input Tokens (cached) | 408,454 (⚡ 88.3% cached) |
| PR Comments History Tokens | 641 |
| Thinking / Reasoning Tokens | 27,809 |
| Output Tokens | 636 |
| Total Session Tokens | 490,782 |
| Cost (uncached input) | $0.0404 |
| Cost (cached input) | $0.0306 |
| Cost (thinking / reasoning) | $0.1043 |
| Cost (response output) | $0.0024 |
| Estimated Total Cost | $0.1777 |
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.
…tive href on demo button
There was a problem hiding this comment.
📋 Review Summary
This pull request completes the Material Design 3 Dialog component implementation, bringing full alignment with M3 specifications including Level 3 elevation, standard 28dp shape tokens, stacked actions, fullscreen support, and alert modal behaviours. All previously raised feedback items regarding dialog centering, README syntax errors, and link button nesting have been successfully resolved.
✅ Resolved Items from Prior Reviews
- Fixed the event handler syntax in the HTML example snippets within dialog/README.md. (
dialog/README.md:27) - Removed position: relative from styles to preserve the user-agent modal vertical centring. (
dialog/dialog.js:508) - Removed the redundant outer element around in demo/dialog-demo.html and leveraged the component's native href attribute. (
demo/dialog-demo.html:103)
🔍 General Feedback
- The Material Design 3 Dialog implementation is now feature-complete, well-documented, and fully aligns with the M3 component specifications.
- The new standalone demo in demo/dialog-demo.html provides a comprehensive testbed for all supported dialog configurations, including basic confirmations, alerts, stacked actions, scrollable content with dynamic dividers, and fullscreen mode.
- Elevation animations are cleanly integrated into the dialog's opening and closing sequences without interfering with modal backdrop behaviour.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 53,122 |
| Input Tokens (cached) | 408,454 (⚡ 88.2% cached) |
| PR Comments History Tokens | 1,500 |
| Thinking / Reasoning Tokens | 10,100 |
| Output Tokens | 373 |
| Total Session Tokens | 473,549 |
| Cost (uncached input) | $0.0410 |
| Cost (cached input) | $0.0306 |
| Cost (thinking / reasoning) | $0.0379 |
| Cost (response output) | $0.0014 |
| Estimated Total Cost | $0.1109 |
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
Updates
<md-dialog>to fully align with the official Material Design 3 Dialogs Specification. This includes integrating Level 3 elevation, restoring container dimension constraints, fixing element getters and reactive states for animations/scroll dividers, adding stacked action layouts, supporting mobile full-screen dialogs, and ensuring non-dismissible alert dialog behavior.Key Changes
<md-elevation part="elevation">with Level 3 elevation (--md-dialog-container-elevation: 3) and--md-dialog-container-shadow-color.dialog/internal/animations.jssynchronized with M3 entry/exit motion curves.max-width: min(560px, calc(100% - 48px))andmax-height: min(560px, calc(100% - 48px))) alongsidemin-width: 280pxandmin-height: 140px.container,scroller,headline,content,actions,elevation) and reactive states (hasHeadline,hasActions,hasIcon,isAtScrollTop,isAtScrollBottom).animateDialogand allows scroll anchors to correctly track within the.scrollercontainer.handleDialogClick()so tapping the backdrop scrim does not dismiss alert dialogs (type="alert").prevent-scrim-closeattribute/property for standard dialogs requiring persistent display.stackedattribute/property to arrange action buttons vertically with confirming action on top and dismissive action below.fullscreenattribute/property supporting mobile/compact full-screen tasks (100% viewport, 0 radius, 0 elevation).--md-dialog-headline-trackingand--md-dialog-supporting-text-tracking.dialog/README.mdwith complete API reference, slots, properties, methods, events, and CSS tokens.demo/dialog-demo.htmlshowcasing all dialog variants and linked it indemo/index.html.Verification
node --checkpassed for all modified JS files.dialog/dialog.jsandall.jsverified in Node.js.prettier.