fix(pickers): fix pickers readme and demos

[treeder]

Summary

Fixes the pickers README documentation and resolves broken picker demo pages.

• pickers/README.md: Replaced the "WIP" placeholder with comprehensive Material 3 documentation, including design spec links, imports (individual components & text field integration), detailed usage examples, and full API reference tables.
• demo/date-picker-demo.html: Fixed 404 imports when deployed to GitHub Pages/subpaths (caused by leading slashes), modernized container and typography styling with Material 3 design tokens, added navigation links, and added datetime-local demo.
• demo/time-picker-demo.html: Standardized imports via import map, fixed premature value access before custom elements upgraded, updated styling, and added text field and datetime-local dialog demos.
• demo/index.html: Added Date Picker and Time Picker demo links to the "Other demo pages" list.
• pickers/datetime-picker-dialog.js: Ensured confirm() captures current picker value when confirmed without edits, and added composed: true to events.
• pickers/date-picker.js & pickers/time-picker.js: Cleaned up CSS comments, added pointer capture for clock dial dragging, and made events composed.

Verification

• Automated browser tests using Playwright verified that both demo pages load without console errors or 404s.
• Tested embedded selection, dialog open/confirm, and text field calendar/clock integrations across all components.

[github-actions]

📋 Review Summary

This PR expands and refines the date and time picker components, including enhanced documentation, interactive demo pages, and event dispatching improvements. In particular, custom events (such as 'confirm', 'change', and 'cancel') now bubble and compose properly through shadow DOM boundaries, and fallback value extraction was added to DateTimePickerDialog. Documentation in pickers/README.md and navigation links across demo pages have been substantially improved.

🔍 General Feedback

• Great work completing the documentation in pickers/README.md with detailed usage examples, property tables, and event explanations.
• Updating the custom events with composed: true ensures that host applications and wrapping web components receive picker events correctly.
• Adding dedicated demo navigation between index.html, date-picker-demo.html, and time-picker-demo.html improves discoverability.
• 💡 Additional Feedback on Unmodified Lines:
• demo/date-picker-demo.html (Lines 137-138): 🟢 Using embeddedPicker.value directly rather than e.target.value is slightly more robust in case child elements trigger bubbling events.

        embeddedPicker.addEventListener('change', () => {
        embeddedValue.textContent = embeddedPicker.value || 'None'
      })
  

📊 Token Usage & Cost Efficiency

Metric	Value
Input Tokens (uncached)	48,985
Input Tokens (cached)	341,826 (⚡ 87.5% cached)
Output Tokens	666
Total Session Tokens	391,477
Cost (uncached input)	$0.0367
Cost (cached input)	$0.0256
Cost (output)	$0.0025
Estimated Total Cost	$0.0649

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.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	material	a3dc3f3	Commit Preview URL Branch Preview URL	Sep 11 2026, 09:42 PM

[github-actions]

📋 Review Summary

This pull request completes the Material 3 Date and Time Picker component implementations, adds dedicated demo pages, and connects them into the main demo application and documentation. It ensures picker events (change, input, confirm, cancel, close) cleanly cross shadow DOM boundaries via composed: true, improves pointer capture and drag behaviour in the analog clock face, and resolves previous feedback regarding internal state synchronisation in md-datetime-picker-dialog.

✅ Resolved Items from Prior Reviews

• Synchronised internal _date and _time properties when extracting fallback values from child pickers in md-datetime-picker-dialog. (pickers/datetime-picker-dialog.js:135)

🔍 General Feedback

• The new pickers/README.md documentation is well-structured, providing clear code examples, usage patterns (inline, dialog, and text-field integration), and comprehensive property/event API reference tables.
• Updating the demo pages (date-picker-demo.html and time-picker-demo.html) to use bare module specifiers via import maps aligns them with standard project conventions and prevents broken relative import paths.
• Fixing the Google Fonts preload stylesheet URL typo in date-picker-demo.html (&&display=swap to &display=swap) ensures the font stylesheet preloads cleanly without query string corruption.

📊 Token Usage & Cost Efficiency

Metric	Value
Input Tokens (uncached)	49,185
Input Tokens (cached)	341,826 (⚡ 87.3% cached)
PR Comments History Tokens	601
Output Tokens	971
Total Session Tokens	408,087
Cost (uncached input)	$0.0373
Cost (cached input)	$0.0256
Cost (output)	$0.0036
Estimated Total Cost	$0.0666

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.

[github-actions]

📋 Review Summary

This pull request completes the documentation and demo pages for the Material 3 Date and Time Pickers, while polishing component lifecycle methods, event dispatch order, and CSS comment hygiene. All previously raised feedback items—including state synchronisation in the picker dialog, proper event bubbling scope, and pointer interaction lifecycle handling—have been resolved cleanly. Overall codebase health and developer ergonomics are markedly improved.

✅ Resolved Items from Prior Reviews

• Internal state (_date and _time) is now properly synchronised with queried child picker fallback values inside confirm(). (pickers/datetime-picker-dialog.js:135)
• Dispatched the input event prior to the change event in DatePicker.selectDate for standard event ordering. (pickers/date-picker.js:200)
• Kept the change event uncomposed in DateTimePickerDialog to prevent duplicate or premature change events bubbling out of host text fields. (pickers/datetime-picker-dialog.js:154)
• Added @pointercancel to the clock face in TimePicker to safely terminate dragging gestures when interrupted. (pickers/time-picker.js:101)

🔍 General Feedback

• The replacement of non-standard // single-line comments in CSS template literals with standard CSS block comments (/* ... */) in date-picker.js ensures CSS parsing conformance across all browsers.
• Comprehensive documentation in pickers/README.md covering embedded pickers, picker dialogs, text field integration, and full API tables provides great clarity for users.
• The demo pages (date-picker-demo.html and time-picker-demo.html) now correctly use importmap paths and provide responsive cross-links to the main demo gallery.

📊 Token Usage & Cost Efficiency

Metric	Value
Input Tokens (uncached)	49,212
Input Tokens (cached)	341,826 (⚡ 87.2% cached)
PR Comments History Tokens	1,107
Output Tokens	490
Total Session Tokens	394,998
Cost (uncached input)	$0.0377
Cost (cached input)	$0.0256
Cost (output)	$0.0018
Estimated Total Cost	$0.0652

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.