From ab4b0f6de711e903cad9d75adf410951ad29b70e Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Wed, 5 Nov 2025 11:35:13 +0200
Subject: [PATCH] feat: add input-fields stylable part to date-time-picker

---
 .../src/styles/vaadin-date-time-picker-base-styles.js       | 6 +++---
 packages/date-time-picker/src/vaadin-date-time-picker.d.ts  | 1 +
 packages/date-time-picker/src/vaadin-date-time-picker.js    | 3 ++-
 .../test/dom/__snapshots__/date-time-picker.test.snap.js    | 2 +-
 .../vaadin-lumo-styles/src/components/date-time-picker.css  | 6 +++---
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/date-time-picker/src/styles/vaadin-date-time-picker-base-styles.js b/packages/date-time-picker/src/styles/vaadin-date-time-picker-base-styles.js
index e9ddedfc6a4..066600a7efd 100644
--- a/packages/date-time-picker/src/styles/vaadin-date-time-picker-base-styles.js
+++ b/packages/date-time-picker/src/styles/vaadin-date-time-picker-base-styles.js
@@ -11,17 +11,17 @@ export const dateTimePickerStyles = css`
     width: calc(var(--vaadin-field-default-width, 12em) * 2 + var(--vaadin-date-time-picker-gap, var(--vaadin-gap-s)));
   }
 
-  .slots {
+  [part='input-fields'] {
     display: flex;
     gap: var(--vaadin-date-time-picker-gap, var(--vaadin-gap-s));
   }
 
-  .slots ::slotted([slot='date-picker']) {
+  [part='input-fields'] ::slotted([slot='date-picker']) {
     min-width: 0;
     flex: 1 1 auto;
   }
 
-  .slots ::slotted([slot='time-picker']) {
+  [part='input-fields'] ::slotted([slot='time-picker']) {
     min-width: 0;
     flex: 1 1.65 auto;
   }
diff --git a/packages/date-time-picker/src/vaadin-date-time-picker.d.ts b/packages/date-time-picker/src/vaadin-date-time-picker.d.ts
index e2096bf950d..3c6a2f8f98e 100644
--- a/packages/date-time-picker/src/vaadin-date-time-picker.d.ts
+++ b/packages/date-time-picker/src/vaadin-date-time-picker.d.ts
@@ -63,6 +63,7 @@ export interface DateTimePickerEventMap extends DateTimePickerCustomEventMap, HT
  * Part name            | Description
  * ---------------------|----------------
  * `label`              | The slotted label element wrapper
+ * `input-fields`       | The date and time pickers wrapper
  * `helper-text`        | The slotted helper text element wrapper
  * `error-message`      | The slotted error message element wrapper
  * `required-indicator` | The `required` state indicator element
diff --git a/packages/date-time-picker/src/vaadin-date-time-picker.js b/packages/date-time-picker/src/vaadin-date-time-picker.js
index adbd59927e9..fffdf006c4c 100644
--- a/packages/date-time-picker/src/vaadin-date-time-picker.js
+++ b/packages/date-time-picker/src/vaadin-date-time-picker.js
@@ -35,6 +35,7 @@ import { DateTimePickerMixin } from './vaadin-date-time-picker-mixin.js';
  * Part name            | Description
  * ---------------------|----------------
  * `label`              | The slotted label element wrapper
+ * `input-fields`       | The date and time pickers wrapper
  * `helper-text`        | The slotted helper text element wrapper
  * `error-message`      | The slotted error message element wrapper
  * `required-indicator` | The `required` state indicator element
@@ -117,7 +118,7 @@ class DateTimePicker extends DateTimePickerMixin(
           <span part="required-indicator" aria-hidden="true"></span>
         </div>
 
-        <div class="slots">
+        <div part="input-fields">
           <slot name="date-picker" id="dateSlot"></slot>
           <slot name="time-picker" id="timeSlot"></slot>
         </div>
diff --git a/packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js b/packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js
index b53bf20c9f3..5a7f79477d3 100644
--- a/packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js
+++ b/packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js
@@ -582,7 +582,7 @@ snapshots["vaadin-date-time-picker shadow default"] =
     >
     </span>
   </div>
-  <div class="slots">
+  <div part="input-fields">
     <slot
       id="dateSlot"
       name="date-picker"
diff --git a/packages/vaadin-lumo-styles/src/components/date-time-picker.css b/packages/vaadin-lumo-styles/src/components/date-time-picker.css
index 965422d7f44..4c5b2163ca0 100644
--- a/packages/vaadin-lumo-styles/src/components/date-time-picker.css
+++ b/packages/vaadin-lumo-styles/src/components/date-time-picker.css
@@ -8,17 +8,17 @@
     --vaadin-field-default-width: auto;
   }
 
-  .slots {
+  [part='input-fields'] {
     display: flex;
     --vaadin-field-default-width: 12em;
   }
 
-  .slots ::slotted([slot='date-picker']) {
+  [part='input-fields'] ::slotted([slot='date-picker']) {
     min-width: 0;
     flex: 1 1 auto;
   }
 
-  .slots ::slotted([slot='time-picker']) {
+  [part='input-fields'] ::slotted([slot='time-picker']) {
     min-width: 0;
     flex: 1 1.65 auto;
   }