From e63415e7858d3c5e6feff5c0f406f4c671852e61 Mon Sep 17 00:00:00 2001
From: Luke Warlow <lwarlow@igalia.com>
Date: Tue, 24 Feb 2026 18:16:31 +0000
Subject: [PATCH 1/2] [css-forms-1] Update structure and styles for temporal
 input

::field-component and ::field-separator are now children of ::field-text.

Also applies default styles.
---
 css-forms-1/Overview.bs | 48 +++++++++++++++++++++++++++++++++--------
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/css-forms-1/Overview.bs b/css-forms-1/Overview.bs
index 1107bc23992..b486722b2da 100644
--- a/css-forms-1/Overview.bs
+++ b/css-forms-1/Overview.bs
@@ -230,9 +230,12 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
       <tr>
         <td>`<input type=date>`</td>
         <td rowspan=5>
-        * ''::field-component''
-        * ''::field-separator''
-        * ''::picker-icon''
+        <pre>
+        ├─ ''::field-text''
+        │  ├─ ''::field-component''
+        │  └─ ''::field-separator''
+        └─ ''::picker-icon''
+        </pre>
 
         See [[#date-time-pseudos]]
         
@@ -548,7 +551,8 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
   </dl>
 
   Those pseudo-elements are siblings. The exact structure of the control is determined by internationalization and by the host language,
-  but must be consistent across user-agents.
+  but must be consistent across user-agents. ''::field-component'' and ''::field-separator'' pseudo-elements are all contained within
+  a ''::field-text'' pseudo-element.
 
   <div class=example id=date-input-pseudo-element-structure>
     The following control:
@@ -564,11 +568,12 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
 
     ```
     <input type="date">
-    ├─ ::field-component (08)
-    ├─ ::field-separator (/)
-    ├─ ::field-component (22)
-    ├─ ::field-separator (/)
-    ├─ ::field-component (2024)
+    ├─ ::field-text
+    │  ├─ ::field-component (08)
+		│  ├─ ::field-separator (/)
+    │  ├─ ::field-component (22)
+    │  ├─ ::field-separator (/)
+    │  └─ ::field-component (2024)
     └─ ::picker-icon
     ```
   </div>
@@ -1113,6 +1118,31 @@ select {
 }
 ```
 
+### Temporal inputs ### {#stylesheet-temporal-inputs}
+
+```css
+input[type="date"]::field-text,
+input[type="datetime-local"]::field-text,
+input[type="month"]::field-text,
+input[type="time"]::field-text,
+input[type="week"]::field-text {
+	display: flow !important;
+}
+
+input[type="date"]::field-component,
+input[type="date"]::field-separator,
+input[type="datetime-local"]::field-component,
+input[type="datetime-local"]::field-separator,
+input[type="month"]::field-component,
+input[type="month"]::field-separator,
+input[type="time"]::field-component,
+input[type="time"]::field-separator,
+input[type="week"]::field-component,
+input[type="week"]::field-separator {
+	position: static !important;
+}
+```
+
 <h2 class=no-num id=changes>Changes</h2>
 
 <h3 class=no-num id=changes-20250325>Since the

From 4f10c7493049364212779a57ba325e8594ce6108 Mon Sep 17 00:00:00 2001
From: Luke Warlow <lwarlow@igalia.com>
Date: Tue, 24 Feb 2026 18:28:36 +0000
Subject: [PATCH 2/2] Address comments

---
 css-forms-1/Overview.bs | 34 +++++++++++-----------------------
 1 file changed, 11 insertions(+), 23 deletions(-)

diff --git a/css-forms-1/Overview.bs b/css-forms-1/Overview.bs
index b486722b2da..e72b43b9757 100644
--- a/css-forms-1/Overview.bs
+++ b/css-forms-1/Overview.bs
@@ -568,13 +568,13 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
 
     ```
     <input type="date">
-    ├─ ::field-text
-    │  ├─ ::field-component (08)
-		│  ├─ ::field-separator (/)
-    │  ├─ ::field-component (22)
-    │  ├─ ::field-separator (/)
-    │  └─ ::field-component (2024)
-    └─ ::picker-icon
+      ├─ ::field-text
+      │  ├─ ::field-component (08)
+      │  ├─ ::field-separator (/)
+      │  ├─ ::field-component (22)
+      │  ├─ ::field-separator (/)
+      │  └─ ::field-component (2024)
+      └─ ::picker-icon
     ```
   </div>
 
@@ -1118,27 +1118,15 @@ select {
 }
 ```
 
-### Temporal inputs ### {#stylesheet-temporal-inputs}
+### Text inputs ### {#stylesheet-text-inputs}
 
 ```css
-input[type="date"]::field-text,
-input[type="datetime-local"]::field-text,
-input[type="month"]::field-text,
-input[type="time"]::field-text,
-input[type="week"]::field-text {
+input::field-text {
 	display: flow !important;
 }
 
-input[type="date"]::field-component,
-input[type="date"]::field-separator,
-input[type="datetime-local"]::field-component,
-input[type="datetime-local"]::field-separator,
-input[type="month"]::field-component,
-input[type="month"]::field-separator,
-input[type="time"]::field-component,
-input[type="time"]::field-separator,
-input[type="week"]::field-component,
-input[type="week"]::field-separator {
+input::field-component,
+input::field-separator {
 	position: static !important;
 }
 ```