From d6029583794e5d1b7ea06845c0927a11b194d74e Mon Sep 17 00:00:00 2001
From: Travis Reeder <treeder@gmail.com>
Date: Wed, 26 Aug 2026 23:05:44 -0700
Subject: [PATCH] feat(text-field): add support for color input type

---
 demo/index.html    |  6 ++++++
 text/README.md     |  2 ++
 text/text-field.js | 44 +++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/demo/index.html b/demo/index.html
index acbdd70..73ecfe9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -173,6 +173,12 @@ <h2>Inputs</h2>
               label="Preferred Date"
               required
               minlength="4"></md-text-field>
+            <md-text-field
+              color="outlined"
+              id="themeColor"
+              type="color"
+              label="Theme Color"
+              value="#6750a4"></md-text-field>
             <md-button onclick="save()">Save</md-button>
 
             <script>
diff --git a/text/README.md b/text/README.md
index 35f61b5..614d01e 100644
--- a/text/README.md
+++ b/text/README.md
@@ -4,4 +4,6 @@
 <md-text-field color="outlined"></md-text-field>
 
 <md-text-field color="filled"></md-text-field>
+
+<md-text-field type="color" label="Color" value="#6750a4"></md-text-field>
 ```
diff --git a/text/text-field.js b/text/text-field.js
index 523f04c..901640c 100644
--- a/text/text-field.js
+++ b/text/text-field.js
@@ -229,6 +229,7 @@ export class TextField extends textFieldBaseClass {
      * - search
      * - tel
      * - url
+     * - color
      *
      * See
      * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
@@ -432,7 +433,7 @@ export class TextField extends textFieldBaseClass {
       ?has-start=${this.hasLeadingIcon}
       label=${this.label}
       max=${this.maxLength}
-      ?populated=${!!this.value}
+      ?populated=${!!this.value || this.type === 'color'}
       ?required=${this.required}
       ?resizable=${this.type === 'textarea'}
       supporting-text=${this.supportingText}
@@ -751,6 +752,10 @@ __decorate([
         resize: inherit;
       }
 
+      :host([type='color']) .field {
+        cursor: pointer;
+      }
+
       .icon {
         color: currentColor;
         display: flex;
@@ -817,6 +822,43 @@ __decorate([
         -moz-appearance: textfield;
       }
 
+      .input[type='color'] {
+        appearance: auto;
+        -webkit-appearance: auto;
+        box-sizing: border-box;
+        cursor: pointer;
+        height: 28px;
+        min-height: 28px;
+        width: 100%;
+        border: none;
+        background: none;
+        padding: 0;
+        margin: 0;
+        vertical-align: middle;
+      }
+
+      .input[type='color']::-webkit-color-swatch-wrapper {
+        padding: 0;
+      }
+
+      .input[type='color']::-webkit-color-swatch {
+        border: 1px solid var(--_outline-color, rgba(0, 0, 0, 0.2));
+        border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+        box-sizing: border-box;
+      }
+
+      .input[type='color']::-moz-color-swatch {
+        border: 1px solid var(--_outline-color, rgba(0, 0, 0, 0.2));
+        border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+        box-sizing: border-box;
+      }
+
+      :host([disabled]) .input[type='color'] {
+        cursor: default;
+        pointer-events: none;
+        opacity: var(--_disabled-input-text-opacity, 0.38);
+      }
+
       :focus-within .input {
         caret-color: var(--_focus-caret-color);
       }