From cf8a24e4f931437e9d2ae72a2a278d569a6cd283 Mon Sep 17 00:00:00 2001
From: javiercoronadonarvaez <javier.coronado@metalab.com>
Date: Mon, 22 Jun 2026 09:32:51 -0600
Subject: [PATCH 1/2] feat: update global text field disabled state

---
 static/css/v3/forms.css                | 15 ++++++++++++++-
 templates/v3/includes/_field_text.html |  6 +++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/static/css/v3/forms.css b/static/css/v3/forms.css
index 7a757f301..d2eaa8e51 100644
--- a/static/css/v3/forms.css
+++ b/static/css/v3/forms.css
@@ -216,14 +216,27 @@
 .field__control--disabled,
 .field__control--disabled:hover,
 .field__control--disabled:focus-within {
-  opacity: 0.5;
+  background-color: var(--color-surface-mid, #f7f7f8);
+  border-color: var(--color-stroke-strong, #05081640);
   cursor: not-allowed;
 }
 
+.field__control--disabled .field__input,
+.field__control--disabled .field__input::placeholder,
+.field__control--disabled:hover .field__input::placeholder {
+  color: var(--color-text-secondary, #6b6d78);
+}
+
 .field__control--disabled .field__input {
   cursor: not-allowed;
 }
 
+.field__control--disabled .field__icon,
+.field__control--disabled:hover .field__icon,
+.field__control--disabled:focus-within .field__icon {
+  color: var(--color-icon-secondary, #6b6d78);
+}
+
 /* ========== Datetime-local: hide native icon, full-area click ========== */
 .field__control--datetime {
   position: relative;
diff --git a/templates/v3/includes/_field_text.html b/templates/v3/includes/_field_text.html
index 0b85147a8..cba7f8ee5 100644
--- a/templates/v3/includes/_field_text.html
+++ b/templates/v3/includes/_field_text.html
@@ -109,7 +109,11 @@
            aria-describedby="field-{{ name }}-help"
            {% endif %}
            {% if validate_type == "email" %}x-model="value" @blur="touched = true"{% elif submit_icon %}x-model="q" {% if dispatch_field_change %}@input.debounce.150ms="$dispatch('field-change', { name: '{{ name }}', value: q })"{% endif %}{% elif max_chars %}x-model="value"{% endif %}>
-    {% if submit_icon %}
+    {% if disabled %}
+      <span class="field__icon" aria-hidden="true">
+        {% include "includes/icon.html" with icon_name="lock" icon_class="field__icon" icon_size=16 icon_viewbox="0 0 16 16" %}
+      </span>
+    {% elif submit_icon %}
       <button type="submit"
               class="field__submit"
               aria-label="{{ submit_label|default:'Submit' }}"

From a08c0cb93149bb6ccd17b8e9102b3f1e9a991cfd Mon Sep 17 00:00:00 2001
From: javiercoronadonarvaez <javier.coronado@metalab.com>
Date: Tue, 30 Jun 2026 09:58:51 -0600
Subject: [PATCH 2/2] fix: address review feedback on text field disabled state

---
 static/css/v3/forms.css                        | 8 ++++----
 templates/v3/examples/_v3_example_section.html | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/static/css/v3/forms.css b/static/css/v3/forms.css
index d2eaa8e51..150b263ef 100644
--- a/static/css/v3/forms.css
+++ b/static/css/v3/forms.css
@@ -216,15 +216,15 @@
 .field__control--disabled,
 .field__control--disabled:hover,
 .field__control--disabled:focus-within {
-  background-color: var(--color-surface-mid, #f7f7f8);
-  border-color: var(--color-stroke-strong, #05081640);
+  background-color: var(--color-surface-mid);
+  border-color: var(--color-stroke-strong);
   cursor: not-allowed;
 }
 
 .field__control--disabled .field__input,
 .field__control--disabled .field__input::placeholder,
 .field__control--disabled:hover .field__input::placeholder {
-  color: var(--color-text-secondary, #6b6d78);
+  color: var(--color-text-secondary);
 }
 
 .field__control--disabled .field__input {
@@ -234,7 +234,7 @@
 .field__control--disabled .field__icon,
 .field__control--disabled:hover .field__icon,
 .field__control--disabled:focus-within .field__icon {
-  color: var(--color-icon-secondary, #6b6d78);
+  color: var(--color-icon-secondary);
 }
 
 /* ========== Datetime-local: hide native icon, full-area click ========== */
diff --git a/templates/v3/examples/_v3_example_section.html b/templates/v3/examples/_v3_example_section.html
index 57fcff627..06fcfb9e1 100644
--- a/templates/v3/examples/_v3_example_section.html
+++ b/templates/v3/examples/_v3_example_section.html
@@ -505,6 +505,7 @@ <h3>{{ section_title }}</h3>
           {% include "v3/includes/_field_text.html" with name="ex_basic" label="Text field" placeholder="Enter text..." %}
           {% include "v3/includes/_field_text.html" with name="ex_search" label="With icon" placeholder="Search..." icon_left="search" %}
           {% include "v3/includes/_field_text.html" with name="ex_error" label="Error state" placeholder="Enter value" error="This field is required." %}
+          {% include "v3/includes/_field_text.html" with name="ex_disabled" label="Disabled state" placeholder="Enter value" value="Disabled value" disabled="true" %}
           {% include "v3/includes/_field_checkbox.html" with name="ex_agree" label="I agree to the terms and conditions" %}
           {% include "v3/includes/_field_dropdown.html" with name="ex_type" label="Dropdown" options=demo_dropdown_options placeholder="Select type..." %}
           {% include "v3/includes/_field_combo.html" with name="ex_library" label="Combo (searchable)" placeholder="Search libraries..." options=demo_libs %}