siemens · spliffone · Apr 20, 2026
@@ -8,15 +8,15 @@
   <div class="flex-fill">
     <button
       type="button"
-      class="open-month-view flex-fill text-end px-2 btn btn-tertiary calendar-button"
+      class="open-month-view flex-fill text-end px-4 btn btn-tertiary calendar-button"
       tabindex="0"
       (click)="emitViewChange('month')"
     >
       {{ focusedDate() | date: 'MMMM' }}
     </button>
     <button
       type="button"
-      class="open-year-view flex-fill text-start px-2 btn btn-tertiary calendar-button"
+      class="open-year-view flex-fill text-start px-4 btn btn-tertiary calendar-button"
       tabindex="0"
       (click)="emitViewChange('year')"
     >
@@ -30,7 +30,7 @@
     (clicked)="setMonthOffset(1)"
   />
 </div>
-<table class="px-9 mt-6" role="grid">
+<table class="px-9" role="grid">
   <thead class="si-calendar-table-header">
     <tr>
       @if (!hideWeekNumbers()) {
@@ -64,7 +64,7 @@
   >
   </tbody>
 </table>
-<div class="footer pt-2 ps-8 pe-8">
+<div class="footer ps-8 pe-8">
   <button
     type="button"
     class="today-button btn btn-tertiary flex-fill"

@@ -48,7 +48,10 @@ import { SiInitialFocusComponent } from './si-initial-focus.component';
   selector: 'si-day-selection',
   imports: [DatePipe, SiCalendarBodyComponent, SiCalendarDirectionButtonComponent, SiTranslatePipe],
   templateUrl: './si-day-selection.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'd-flex flex-column gap-6'
+  }
 })
 export class SiDaySelectionComponent extends SiInitialFocusComponent {
   private readonly todayDefaultText = t(() => $localize`:@@SI_DATEPICKER.TODAY:Today`);

@@ -20,7 +20,7 @@
     (clicked)="setYearOffset(1)"
   />
 </div>
-<table class="px-9 mt-6" role="grid">
+<table class="px-9" role="grid">
   <tbody
     si-calendar-body
     [focusedDate]="focusedDate()"
@@ -38,3 +38,4 @@
   >
   </tbody>
 </table>
+<div class="footer"></div>
@@ -38,7 +38,10 @@ import { SiInitialFocusComponent } from './si-initial-focus.component';
   selector: 'si-month-selection',
   imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe],
   templateUrl: './si-month-selection.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'd-flex flex-column gap-6'
+  }
 })
 export class SiMonthSelectionComponent extends SiInitialFocusComponent implements OnChanges {
   /**

@@ -15,7 +15,7 @@
     (clicked)="changeVisibleYearRange(1)"
   />
 </div>
-<table class="px-9 mt-6" role="grid">
+<table class="px-9" role="grid">
   <tbody
     si-calendar-body
     [focusedDate]="focusedDate()"
@@ -30,3 +30,4 @@
   >
   </tbody>
 </table>
+<div class="footer"></div>
@@ -37,7 +37,10 @@ import { SiInitialFocusComponent } from './si-initial-focus.component';
   selector: 'si-year-selection',
   imports: [SiCalendarDirectionButtonComponent, SiCalendarBodyComponent, DatePipe],
   templateUrl: './si-year-selection.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'd-flex flex-column gap-6'
+  }
 })
 export class SiYearSelectionComponent extends SiInitialFocusComponent implements OnChanges {
   /**

@@ -2,6 +2,7 @@
 @use '@siemens/element-theme/src/styles/variables';
 
 :host {
+  background: variables.$element-base-1;
   max-block-size: max-content;
   // Shrink the container when the two month layout wraps the content
   // so that the scrollbar is positioned directly at the end of the content.
@@ -25,7 +26,7 @@
   // and making the screen larger has no effect on expanding to two
   // pickers again. Seems to be acceptable as size is adjusted after
   // closing and reopening again.
-  max-inline-size: 348px;
+  max-inline-size: 43.5ch;
 }
 
 .first-datepicker {