feat(text-field): add support for color input type

[treeder]

Description

Adds support for type="color" on <md-text-field>.

Details:

• Floating label: Updates renderField() to automatically mark type === 'color' as populated so floating labels float properly above the color swatch.
• Material 3 styling: Adds styles for .input[type='color'] and cross-browser swatch pseudo-elements (::-webkit-color-swatch, ::-moz-color-swatch, and Firefox ::-moz-focus-inner), with theme-aware border token fallback.
• Interactive UX: Adds pointer cursor to active fields, adds showPicker() method forwarding to the input, and delegates clicks anywhere in the field container to open the picker.
• Disabled & Readonly states: Enforces pointer-events: none and cursor: default on disabled and readonly color fields, with disabled opacity applied.
• Form integration: Adheres to the HTML color input specification with fallback value #000000 on submission ([getFormValue]()) and on reset().
• Demo & Docs: Integrated color field into the Expressive inputs showcase demo and updated text/README.md.

Verification:

• Merged latest main (33 commits forward, resolved conflict in demo/index.html).
• Verified JavaScript syntax across all files.
• Automated end-to-end browser tests in Chromium via Playwright:
  • Default value defaulting to #000000
  • Custom values preserved
  • populated attribute and label floating
  • Form submission (FormData) and form.reset()
  • showPicker() invocation on container click
  • disabled and readonly styling / pointer-events
  • Demo page rendering without console errors

[github-actions]

📋 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 populated state 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.

[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	4abeed3	Commit Preview URL Branch Preview URL	Oct 04 2026, 06:31 PM

[github-actions]

📋 Review Summary

This pull request adds support for HTML5 type="color" to md-text-field. It introduces tailored color swatch styling for WebKit and Gecko, floating label preservation for the non-empty color swatch, click delegation to open the native colour picker from anywhere on the field, and a standard showPicker() method. The documentation in text/README.md and the interactive showcase in demo/components/expressive-component.js have also been updated accordingly.

🔍 General Feedback

• The implementation for type="color" is well thought out. In particular, ensuring that ?populated evaluates to true for colour inputs prevents the resting label from overlapping the colour swatch.
• The addition of defensive optional chaining (this.getInputOrTextarea()?.value) in updated() improves resilience against lifecycle race conditions where the internal input may not yet be instantiated.
• Disabling pointer events on .input[type='color'] when readonly is active provides a great usability improvement, compensating for the fact that native <input type="color"> ignores the HTML readonly attribute.

📊 Token Usage & Cost Efficiency

Metric	Value
Input Tokens (uncached)	46,598
Input Tokens (cached)	386,641 (⚡ 89.2% cached)
PR Comments History Tokens	313
Thinking / Reasoning Tokens	27,447
Output Tokens	266
Total Session Tokens	461,265
Cost (uncached input)	$0.0352
Cost (cached input)	$0.0290
Cost (thinking / reasoning)	$0.1029
Cost (response output)	$0.0010
Estimated Total Cost	$0.1681

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.