feat(text-field): add support for color input type - #124
Conversation
There was a problem hiding this comment.
📋 Review Summary
This pull request adds native HTML5 type="color" input support to the md-text-field component. It includes custom styling for color swatches across WebKit and Gecko engines, ensures appropriate label floating via the populated attribute, and updates documentation and demo files.
🔍 General Feedback
- Clean and minimal implementation for supporting native color inputs within
md-text-field. - Good handling of the
populatedstate to ensure floating labels do not overlap the native color swatch when no initial value is explicitly provided.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 35,051 |
| Input Tokens (cached) | 323,315 (⚡ 90.2% cached) |
| Output Tokens | 144 |
| Total Session Tokens | 359,891 |
| Cost (uncached input) | $0.0263 |
| Cost (cached input) | $0.0242 |
| Cost (output) | $0.0005 |
| Estimated Total Cost | $0.0511 |
Gemini 3.7 Flash: introductory rate $0.75/$3.75 per 1M applied; reverts to $1.5/$7.5 after 2026-12-31.
Gemini 3.7 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.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
material | d602958 | Commit Preview URL Branch Preview URL |
Aug 27 2026, 06:06 AM |
Description
Adds support for
type="color"on<md-text-field>.Details:
renderField()to automatically marktype === 'color'as populated so the floating label floats properly above the color swatch..input[type='color']and cross-browser swatch pseudo-elements (::-webkit-color-swatch,::-moz-color-swatch).Verification: