@navikt/ds-css 5.8.0 → 5.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/date.css +26 -18
  3. package/dist/component/date.css +26 -19
  4. package/dist/component/date.min.css +1 -1
  5. package/dist/component/index.css +30 -16
  6. package/dist/component/index.min.css +1 -1
  7. package/dist/component/modal.css +9 -0
  8. package/dist/component/modal.min.css +1 -1
  9. package/dist/components.css +35 -19
  10. package/dist/components.min.css +1 -1
  11. package/dist/global/tokens.css +1 -1
  12. package/dist/index.css +30 -16
  13. package/dist/index.min.css +1 -1
  14. package/modal.css +8 -0
  15. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 5.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - Datepicker/Monthpicker: Hvis man bruker komponentene i Modal vil Popover bli erstattet med Modal uansett om man er på desktop eller mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
8
+
9
+ - Datepicker/Monthpicker/Popover: Fjernet `bubbleEscape`-prop. ([#2419](https://github.com/navikt/aksel/pull/2419))
10
+
11
+ - useDatepicker/useMonthPicker/useRangedpicker: Fjernet `openOnFocus`-prop, kan nå bare åpnes ved klikk på date-knapp i input. ([#2419](https://github.com/navikt/aksel/pull/2419))
12
+
13
+ - Datepicker/Monthpicker: Bytter nå automatisk til Modalvisning på mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
14
+
3
15
  ## 5.8.0
4
16
 
5
17
  ### Patch Changes
package/date.css CHANGED
@@ -149,18 +149,6 @@
149
149
  width: fit-content;
150
150
  }
151
151
 
152
- /* Focus layering */
153
- .navds-date__field-input:focus-visible,
154
- .navds-date__field-button {
155
- z-index: 1;
156
- }
157
-
158
- @supports not selector(:focus-visible) {
159
- .navds-date__field-input:focus {
160
- z-index: 1;
161
- }
162
- }
163
-
164
152
  .navds-date .rdp-day_selected,
165
153
  .navds-monthpicker__month--selected {
166
154
  color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -201,11 +189,11 @@
201
189
  }
202
190
 
203
191
  .navds-date__field-input {
204
- padding-right: var(--a-spacing-14);
192
+ padding-right: var(--a-spacing-12);
205
193
  }
206
194
 
207
195
  .navds-form-field--small .navds-date__field-input {
208
- padding-right: var(--a-spacing-10);
196
+ padding-right: var(--a-spacing-8);
209
197
  }
210
198
 
211
199
  /* Error-handling */
@@ -282,10 +270,6 @@
282
270
  pointer-events: none;
283
271
  }
284
272
 
285
- .navds-date__popover:where(.navds-popover) {
286
- border: none;
287
- }
288
-
289
273
  /* Readonly */
290
274
  .navds-date__field--readonly .navds-date__field-button {
291
275
  cursor: default;
@@ -310,11 +294,35 @@
310
294
  margin: 0;
311
295
  }
312
296
 
297
+ .navds-date__modal.navds-date {
298
+ padding: 0;
299
+ }
300
+
301
+ .navds-date__modal-body {
302
+ display: flex;
303
+ flex-direction: column;
304
+ align-items: flex-end;
305
+ padding: var(--a-spacing-4);
306
+ gap: var(--a-spacing-2);
307
+ }
308
+
309
+ .navds-date__modal-body > .navds-date {
310
+ padding: 0;
311
+ }
312
+
313
+ .navds-date__popover:where(.navds-popover) {
314
+ border: none;
315
+ }
316
+
313
317
  @media (min-width: 480px) {
314
318
  .navds-date {
315
319
  padding: var(--a-spacing-5) var(--a-spacing-4);
316
320
  }
317
321
 
322
+ .navds-date__modal-body {
323
+ padding: var(--a-spacing-6);
324
+ }
325
+
318
326
  .navds-date__caption {
319
327
  gap: var(--a-spacing-2);
320
328
  }
package/dist/component/date.css CHANGED
@@ -150,19 +150,6 @@
150
150
  width: fit-content;
151
151
  }
152
152
 
153
- /* Focus layering */
154
-
155
- .navds-date__field-input:focus-visible,
156
- .navds-date__field-button {
157
- z-index: 1;
158
- }
159
-
160
- @supports not selector(:focus-visible) {
161
- .navds-date__field-input:focus {
162
- z-index: 1;
163
- }
164
- }
165
-
166
153
  .navds-date .rdp-day_selected,
167
154
  .navds-monthpicker__month--selected {
168
155
  color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -203,11 +190,11 @@
203
190
  }
204
191
 
205
192
  .navds-date__field-input {
206
- padding-right: var(--a-spacing-14);
193
+ padding-right: var(--a-spacing-12);
207
194
  }
208
195
 
209
196
  .navds-form-field--small .navds-date__field-input {
210
- padding-right: var(--a-spacing-10);
197
+ padding-right: var(--a-spacing-8);
211
198
  }
212
199
 
213
200
  /* Error-handling */
@@ -285,10 +272,6 @@
285
272
  pointer-events: none;
286
273
  }
287
274
 
288
- .navds-date__popover:where(.navds-popover) {
289
- border: none;
290
- }
291
-
292
275
  /* Readonly */
293
276
 
294
277
  .navds-date__field--readonly .navds-date__field-button {
@@ -314,11 +297,35 @@
314
297
  margin: 0;
315
298
  }
316
299
 
300
+ .navds-date__modal.navds-date {
301
+ padding: 0;
302
+ }
303
+
304
+ .navds-date__modal-body {
305
+ display: flex;
306
+ flex-direction: column;
307
+ align-items: flex-end;
308
+ padding: var(--a-spacing-4);
309
+ gap: var(--a-spacing-2);
310
+ }
311
+
312
+ .navds-date__modal-body > .navds-date {
313
+ padding: 0;
314
+ }
315
+
316
+ .navds-date__popover:where(.navds-popover) {
317
+ border: none;
318
+ }
319
+
317
320
  @media (min-width: 480px) {
318
321
  .navds-date {
319
322
  padding: var(--a-spacing-5) var(--a-spacing-4);
320
323
  }
321
324
 
325
+ .navds-date__modal-body {
326
+ padding: var(--a-spacing-6);
327
+ }
328
+
322
329
  .navds-date__caption {
323
330
  gap: var(--a-spacing-2);
324
331
  }
package/dist/component/date.min.css CHANGED
@@ -1 +1 @@
1
- .navds-date{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;border-radius:var(--a-border-radius-medium);display:flex;justify-content:center;margin:var(--a-spacing-2)}.navds-date .rdp-weeknumber,.navds-date .rdp-weeknumber.rdp-button{color:var(--a-text-subtle);font-size:var(--a-font-size-small);height:2rem;width:2rem}.navds-date .rdp-weeknumber.rdp-button{box-shadow:0 0 0 1px var(--a-border-default)}.navds-date .rdp-weeknumber.rdp-button:active{background-color:var(--a-surface-action-active);box-shadow:none;color:var(--a-text-on-action)}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);display:block;height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-medium)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:3rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date__field-button,.navds-date__field-input:focus-visible{z-index:1}@supports not selector(:focus-visible){.navds-date__field-input:focus{z-index:1}}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-1);justify-content:space-between;padding-inline:var(--a-spacing-1)}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-14)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-10)}.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{align-items:center;background:none;border:none;border-end-start-radius:0;border-radius:calc(var(--a-border-radius-medium) - 1px);border-start-start-radius:0;color:var(--ac-date-input-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-size:1.5rem;height:calc(100% - .125rem);justify-content:center;margin:0;padding:var(--a-spacing-3);position:absolute;right:.0625rem;text-decoration:none;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{padding:var(--a-spacing-1)}.navds-date__field-button:hover:where(:not([disabled])){background-color:var(--ac-date-input-button-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-date-input-button-hover-text,var(--a-text-action-on-action-subtle))}.navds-form-field--disabled .navds-date__field-button{cursor:not-allowed;opacity:1}.navds-date__field-button:focus-visible{border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-date__field-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}.navds-date__popover:where(.navds-popover){border:none}.navds-date__field--readonly .navds-date__field-button{cursor:default}.navds-date__caption-button{height:2rem;width:2rem}.navds-date__week-row{align-items:center;display:flex;gap:var(--a-spacing-05)}.navds-date__week-wrapper{align-items:center;display:flex;justify-content:center;margin:0;width:2.5rem}@media (min-width:480px){.navds-date{padding:var(--a-spacing-5) var(--a-spacing-4)}.navds-date__caption{gap:var(--a-spacing-2)}.navds-date .rdp-button,.navds-date__caption-button{height:3rem;width:3rem}}
1
+ .navds-date{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;border-radius:var(--a-border-radius-medium);display:flex;justify-content:center;margin:var(--a-spacing-2)}.navds-date .rdp-weeknumber,.navds-date .rdp-weeknumber.rdp-button{color:var(--a-text-subtle);font-size:var(--a-font-size-small);height:2rem;width:2rem}.navds-date .rdp-weeknumber.rdp-button{box-shadow:0 0 0 1px var(--a-border-default)}.navds-date .rdp-weeknumber.rdp-button:active{background-color:var(--a-surface-action-active);box-shadow:none;color:var(--a-text-on-action)}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);display:block;height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-medium) var(--a-border-radius-medium) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-medium) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-medium)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:3rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-1);justify-content:space-between;padding-inline:var(--a-spacing-1)}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-12)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-8)}.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{align-items:center;background:none;border:none;border-end-start-radius:0;border-radius:calc(var(--a-border-radius-medium) - 1px);border-start-start-radius:0;color:var(--ac-date-input-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-size:1.5rem;height:calc(100% - .125rem);justify-content:center;margin:0;padding:var(--a-spacing-3);position:absolute;right:.0625rem;text-decoration:none;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{padding:var(--a-spacing-1)}.navds-date__field-button:hover:where(:not([disabled])){background-color:var(--ac-date-input-button-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-date-input-button-hover-text,var(--a-text-action-on-action-subtle))}.navds-form-field--disabled .navds-date__field-button{cursor:not-allowed;opacity:1}.navds-date__field-button:focus-visible{border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-date__field-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}.navds-date__field--readonly .navds-date__field-button{cursor:default}.navds-date__caption-button{height:2rem;width:2rem}.navds-date__week-row{align-items:center;display:flex;gap:var(--a-spacing-05)}.navds-date__week-wrapper{align-items:center;display:flex;justify-content:center;margin:0;width:2.5rem}.navds-date__modal.navds-date{padding:0}.navds-date__modal-body{align-items:flex-end;display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4)}.navds-date__modal-body>.navds-date{padding:0}.navds-date__popover:where(.navds-popover){border:none}@media (min-width:480px){.navds-date{padding:var(--a-spacing-5) var(--a-spacing-4)}.navds-date__modal-body{padding:var(--a-spacing-6)}.navds-date__caption{gap:var(--a-spacing-2)}.navds-date .rdp-button,.navds-date__caption-button{height:3rem;width:3rem}}
package/dist/component/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Mon, 30 Oct 2023 09:59:59 GMT
4
+ * Generated on Wed, 01 Nov 2023 14:49:15 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-1-alt: 0.375rem;
@@ -4533,6 +4533,13 @@ button.navds-internalheader__title:active,
4533
4533
  .navds-modal__footer :nth-of-type(2) {
4534
4534
  margin-left: auto;
4535
4535
  }
4536
+ /* When Datepicker is used nested inside a Modal */
4537
+ .navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
4538
+ min-width: fit-content;
4539
+ max-width: 100vw;
4540
+ max-height: 100vh;
4541
+ animation: none;
4542
+ }
4536
4543
  @keyframes akselModalFadeIn {
4537
4544
  from {
4538
4545
  opacity: 0;
@@ -4788,16 +4795,6 @@ button.navds-internalheader__title:active,
4788
4795
  position: relative;
4789
4796
  width: fit-content;
4790
4797
  }
4791
- /* Focus layering */
4792
- .navds-date__field-input:focus-visible,
4793
- .navds-date__field-button {
4794
- z-index: 1;
4795
- }
4796
- @supports not selector(:focus-visible) {
4797
- .navds-date__field-input:focus {
4798
- z-index: 1;
4799
- }
4800
- }
4801
4798
  .navds-date .rdp-day_selected,
4802
4799
  .navds-monthpicker__month--selected {
4803
4800
  color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -4832,10 +4829,10 @@ button.navds-internalheader__title:active,
4832
4829
  color: var(--ac-date-caption-text, var(--a-text-default));
4833
4830
  }
4834
4831
  .navds-date__field-input {
4835
- padding-right: var(--a-spacing-14);
4832
+ padding-right: var(--a-spacing-12);
4836
4833
  }
4837
4834
  .navds-form-field--small .navds-date__field-input {
4838
- padding-right: var(--a-spacing-10);
4835
+ padding-right: var(--a-spacing-8);
4839
4836
  }
4840
4837
  /* Error-handling */
4841
4838
  .navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
@@ -4900,9 +4897,6 @@ button.navds-internalheader__title:active,
4900
4897
  visibility: hidden;
4901
4898
  pointer-events: none;
4902
4899
  }
4903
- .navds-date__popover:where(.navds-popover) {
4904
- border: none;
4905
- }
4906
4900
  /* Readonly */
4907
4901
  .navds-date__field--readonly .navds-date__field-button {
4908
4902
  cursor: default;
@@ -4923,11 +4917,31 @@ button.navds-internalheader__title:active,
4923
4917
  justify-content: center;
4924
4918
  margin: 0;
4925
4919
  }
4920
+ .navds-date__modal.navds-date {
4921
+ padding: 0;
4922
+ }
4923
+ .navds-date__modal-body {
4924
+ display: flex;
4925
+ flex-direction: column;
4926
+ align-items: flex-end;
4927
+ padding: var(--a-spacing-4);
4928
+ gap: var(--a-spacing-2);
4929
+ }
4930
+ .navds-date__modal-body > .navds-date {
4931
+ padding: 0;
4932
+ }
4933
+ .navds-date__popover:where(.navds-popover) {
4934
+ border: none;
4935
+ }
4926
4936
  @media (min-width: 480px) {
4927
4937
  .navds-date {
4928
4938
  padding: var(--a-spacing-5) var(--a-spacing-4);
4929
4939
  }
4930
4940
 
4941
+ .navds-date__modal-body {
4942
+ padding: var(--a-spacing-6);
4943
+ }
4944
+
4931
4945
  .navds-date__caption {
4932
4946
  gap: var(--a-spacing-2);
4933
4947
  }