feat(Dates): placeholder data attribute (#859)

epr3 · web-flow · commit 0037f032a7a5 · 2024-04-19T08:50:00.000+08:00
* feat: add data-placeholder attribute

* docs: update stories to use data-placeholder

* docs: use data-placeholder in demo

* docs: add docs for new data attribute
diff --git a/docs/components/demo/DateField/tailwind/index.vue b/docs/components/demo/DateField/tailwind/index.vue
@@ -21,7 +21,7 @@ import { DateFieldInput, DateFieldRoot, Label } from 'radix-vue'
         <DateFieldInput
           v-else
           :part="item.part"
-          class="rounded p-0.5   focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+          class="rounded p-0.5   focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
         >
           {{ item.value }}
         </DateFieldInput>
diff --git a/docs/components/demo/DatePicker/tailwind/index.vue b/docs/components/demo/DatePicker/tailwind/index.vue
@@ -45,7 +45,7 @@ import {
             <DatePickerInput
               v-else
               :part="item.part"
-              class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9 "
+              class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 "
             >
               {{ item.value }}
             </DatePickerInput>
diff --git a/docs/components/demo/DateRangeField/tailwind/index.vue b/docs/components/demo/DateRangeField/tailwind/index.vue
@@ -24,7 +24,7 @@ import { DateRangeFieldInput, DateRangeFieldRoot, Label } from 'radix-vue'
         <DateRangeFieldInput
           v-else
           :part="item.part"
-          class="rounded-md p-0.5  focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+          class="rounded-md p-0.5  focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           type="start"
         >
           {{ item.value }}
@@ -45,7 +45,7 @@ import { DateRangeFieldInput, DateRangeFieldRoot, Label } from 'radix-vue'
         <DateRangeFieldInput
           v-else
           :part="item.part"
-          class="rounded-md p-0.5  focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+          class="rounded-md p-0.5  focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           type="end"
         >
           {{ item.value }}
diff --git a/docs/components/demo/DateRangePicker/tailwind/index.vue b/docs/components/demo/DateRangePicker/tailwind/index.vue
@@ -45,7 +45,7 @@ import {
           <DateRangePickerInput
             v-else
             :part="item.part"
-            class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
             type="start"
           >
             {{ item.value }}
@@ -66,7 +66,7 @@ import {
           <DateRangePickerInput
             v-else
             :part="item.part"
-            class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
             type="end"
           >
             {{ item.value }}
diff --git a/docs/content/components/date-field.md b/docs/content/components/date-field.md
@@ -108,7 +108,11 @@ Contains the date field segments
     {
       attribute: '[data-invalid]',
       values: 'Present when invalid',
-    }
+    },
+    {
+      attribute: '[data-placeholder]',
+      values: 'Present when no value is set',
+    },
   ]"
 />
 
diff --git a/docs/content/components/date-picker.md b/docs/content/components/date-picker.md
@@ -164,6 +164,10 @@ Contains the date picker date field segments
     {
       attribute: '[data-invalid]',
       values: 'Present when invalid',
+    },
+    {
+      attribute: '[data-placeholder]',
+      values: 'Present when no value is set',
     }
   ]"
 />
diff --git a/docs/content/components/date-range-field.md b/docs/content/components/date-range-field.md
@@ -108,7 +108,11 @@ Contains the date field segments
     {
       attribute: '[data-invalid]',
       values: 'Present when invalid',
-    }
+    },
+    {
+      attribute: '[data-placeholder]',
+      values: 'Present when no value is set',
+    },
   ]"
 />
 
diff --git a/docs/content/components/date-range-picker.md b/docs/content/components/date-range-picker.md
@@ -165,6 +165,10 @@ Contains the date picker date field segments
     {
       attribute: '[data-invalid]',
       values: 'Present when invalid',
+    },
+    {
+      attribute: '[data-placeholder]',
+      values: 'Present when no value is set',
     }
   ]"
 />
diff --git a/packages/radix-vue/src/DateField/story/DateFieldChromatic.story.vue b/packages/radix-vue/src/DateField/story/DateFieldChromatic.story.vue
@@ -26,7 +26,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -50,7 +50,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -73,7 +73,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -97,7 +97,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -122,7 +122,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -147,7 +147,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -172,7 +172,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -196,7 +196,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
diff --git a/packages/radix-vue/src/DateField/story/DateFieldDefault.story.vue b/packages/radix-vue/src/DateField/story/DateFieldDefault.story.vue
@@ -25,7 +25,7 @@ import { Label } from '@/Label'
             <DateFieldInput
               v-else
               :part="item.part"
-              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
             >
               {{ item.value }}
             </DateFieldInput>
diff --git a/packages/radix-vue/src/DateField/story/DateFieldGranular.story.vue b/packages/radix-vue/src/DateField/story/DateFieldGranular.story.vue
@@ -25,7 +25,7 @@ import { Label } from '@/Label'
             <DateFieldInput
               v-else
               :part="item.part"
-              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
             >
               {{ item.value }}
             </DateFieldInput>
@@ -54,7 +54,7 @@ import { Label } from '@/Label'
             <DateFieldInput
               v-else
               :part="item.part"
-              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
             >
               {{ item.value }}
             </DateFieldInput>
@@ -83,7 +83,7 @@ import { Label } from '@/Label'
             <DateFieldInput
               v-else
               :part="item.part"
-              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
             >
               {{ item.value }}
             </DateFieldInput>
@@ -112,7 +112,7 @@ import { Label } from '@/Label'
             <DateFieldInput
               v-else
               :part="item.part"
-              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
             >
               {{ item.value }}
             </DateFieldInput>
diff --git a/packages/radix-vue/src/DateField/story/DateFieldInvalid.story.vue b/packages/radix-vue/src/DateField/story/DateFieldInvalid.story.vue
@@ -25,7 +25,7 @@ import { Label } from '@/Label'
             <DateFieldInput
               v-else
               :part="item.part"
-              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+              class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
             >
               {{ item.value }}
             </DateFieldInput>
diff --git a/packages/radix-vue/src/DateField/story/DateFieldLocales.story.vue b/packages/radix-vue/src/DateField/story/DateFieldLocales.story.vue
@@ -20,7 +20,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholderdata-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -45,7 +45,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -70,7 +70,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -95,7 +95,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -120,7 +120,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
@@ -145,7 +145,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
           <DateFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
           >
             {{ item.value }}
           </DateFieldInput>
diff --git a/packages/radix-vue/src/DateField/useDateField.ts b/packages/radix-vue/src/DateField/useDateField.ts
@@ -55,6 +55,7 @@ function daySegmentAttrs(props: SegmentAttrProps) {
     'aria-valuemax': valueMax,
     'aria-valuenow': valueNow,
     'aria-valuetext': valueText,
+    'data-placeholder': isEmpty ? '' : undefined,
   }
 }
 
@@ -77,6 +78,7 @@ function monthSegmentAttrs(props: SegmentAttrProps) {
     'aria-valuemax': valueMax,
     'aria-valuenow': valueNow,
     'aria-valuetext': valueText,
+    'data-placeholder': isEmpty ? '' : undefined,
   }
 }
 
@@ -96,6 +98,7 @@ function yearSegmentAttrs(props: SegmentAttrProps) {
     'aria-valuemax': valueMax,
     'aria-valuenow': valueNow,
     'aria-valuetext': valueText,
+    'data-placeholder': isEmpty ? '' : undefined,
   }
 }
 
@@ -118,6 +121,7 @@ function hourSegmentAttrs(props: SegmentAttrProps) {
     'aria-valuemax': valueMax,
     'aria-valuenow': valueNow,
     'aria-valuetext': valueText,
+    'data-placeholder': isEmpty ? '' : undefined,
   }
 }
 
@@ -141,6 +145,7 @@ function minuteSegmentAttrs(props: SegmentAttrProps) {
     'aria-valuemax': valueMax,
     'aria-valuenow': valueNow,
     'aria-valuetext': valueText,
+    'data-placeholder': isEmpty ? '' : undefined,
   }
 }
 
@@ -164,6 +169,7 @@ function secondSegmentAttrs(props: SegmentAttrProps) {
     'aria-valuemax': valueMax,
     'aria-valuenow': valueNow,
     'aria-valuetext': valueText,
+    'data-placeholder': isEmpty ? '' : undefined,
   }
 }
 
diff --git a/packages/radix-vue/src/DatePicker/story/DatePickerDefault.story.vue b/packages/radix-vue/src/DatePicker/story/DatePickerDefault.story.vue
@@ -47,7 +47,7 @@ import { Label } from '@/Label'
               <DatePickerInput
                 v-else
                 :part="item.part"
-                class="rounded-5px px-1 py-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+                class="rounded-5px px-1 py-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
               >
                 {{ item.value }}
               </DatePickerInput>
diff --git a/packages/radix-vue/src/DatePicker/story/_DummyDatePicker.vue b/packages/radix-vue/src/DatePicker/story/_DummyDatePicker.vue
@@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(props, emits)
         <DatePickerInput
           v-else
           :part="item.part"
-          class="rounded-5px px-1 py-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+          class="rounded-5px px-1 py-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
         >
           {{ item.value }}
         </DatePickerInput>
diff --git a/packages/radix-vue/src/DateRangeField/story/DateRangeFieldDefault.story.vue b/packages/radix-vue/src/DateRangeField/story/DateRangeFieldDefault.story.vue
@@ -21,7 +21,7 @@ import { DateRangeFieldInput, DateRangeFieldRoot } from '../'
           <DateRangeFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 py-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 py-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
             type="start"
           >
             {{ item.value }}
@@ -39,7 +39,7 @@ import { DateRangeFieldInput, DateRangeFieldRoot } from '../'
           <DateRangeFieldInput
             v-else
             :part="item.part"
-            class="rounded-5px px-1 py-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+            class="rounded-5px px-1 py-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
             type="end"
           >
             {{ item.value }}
diff --git a/packages/radix-vue/src/DateRangeField/story/_DummyDateRangeField.vue b/packages/radix-vue/src/DateRangeField/story/_DummyDateRangeField.vue
@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(props, emits)
       <DateRangeFieldInput
         v-else
         :part="item.part"
-        class="rounded-5px p-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+        class="rounded-5px p-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
         type="start"
       >
         {{ item.value }}
@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(props, emits)
       <DateRangeFieldInput
         v-else
         :part="item.part"
-        class="rounded-5px p-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
+        class="rounded-5px p-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
         type="end"
       >
         {{ item.value }}
diff --git a/packages/radix-vue/src/DateRangePicker/story/DateRangePickerDefault.story.vue b/packages/radix-vue/src/DateRangePicker/story/DateRangePickerDefault.story.vue
diff --git a/packages/radix-vue/src/DateRangePicker/story/_DummyDateRangePicker.vue b/packages/radix-vue/src/DateRangePicker/story/_DummyDateRangePicker.vue

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ import { DateFieldInput, DateFieldRoot, Label } from 'radix-vue'`
`21`	`21`	`<DateFieldInput`
`22`	`22`	`v-else`
`23`	`23`	`:part="item.part"`
`24`		`- class="rounded p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"`
	`24`	`+ class="rounded p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"`
`25`	`25`	`>`
`26`	`26`	`{{ item.value }}`
`27`	`27`	`</DateFieldInput>`
Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,7 @@ import {`
`45`	`45`	`<DatePickerInput`
`46`	`46`	`v-else`
`47`	`47`	`:part="item.part"`
`48`		`- class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9 "`
	`48`	`+ class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 "`
`49`	`49`	`>`
`50`	`50`	`{{ item.value }}`
`51`	`51`	`</DatePickerInput>`
Original file line number	Diff line number	Diff line change
`@@ -164,6 +164,10 @@ Contains the date picker date field segments`
`164`	`164`	`{`
`165`	`165`	`attribute: '[data-invalid]',`
`166`	`166`	`values: 'Present when invalid',`
	`167`	`+ },`
	`168`	`+ {`
	`169`	`+ attribute: '[data-placeholder]',`
	`170`	`+ values: 'Present when no value is set',`
`167`	`171`	`}`
`168`	`172`	`]"`
`169`	`173`	`/>`
Original file line number	Diff line number	Diff line change
`@@ -165,6 +165,10 @@ Contains the date picker date field segments`
`165`	`165`	`{`
`166`	`166`	`attribute: '[data-invalid]',`
`167`	`167`	`values: 'Present when invalid',`
	`168`	`+ },`
	`169`	`+ {`
	`170`	`+ attribute: '[data-placeholder]',`
	`171`	`+ values: 'Present when no value is set',`
`168`	`172`	`}`
`169`	`173`	`]"`
`170`	`174`	`/>`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ import { Label } from '@/Label'`
`25`	`25`	`<DateFieldInput`
`26`	`26`	`v-else`
`27`	`27`	`:part="item.part"`
`28`		`- class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"`
	`28`	`+ class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"`
`29`	`29`	`>`
`30`	`30`	`{{ item.value }}`
`31`	`31`	`</DateFieldInput>`