@navikt/ds-css 5.8.0 → 5.9.1

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 +18 -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 +37 -19
  6. package/dist/component/index.min.css +1 -1
  7. package/dist/component/modal.css +17 -3
  8. package/dist/component/modal.min.css +1 -1
  9. package/dist/components.css +43 -22
  10. package/dist/components.min.css +1 -1
  11. package/dist/global/tokens.css +1 -1
  12. package/dist/index.css +37 -19
  13. package/dist/index.min.css +1 -1
  14. package/modal.css +16 -3
  15. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 5.9.1
4
+
5
+ ### Patch Changes
6
+
7
+ - :lipstick: Modal: Bedre håndtering av mobiler i landskapsmodus ([#2444](https://github.com/navikt/aksel/pull/2444))
8
+
9
+ ## 5.9.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 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))
14
+
15
+ - Datepicker/Monthpicker/Popover: Fjernet `bubbleEscape`-prop. ([#2419](https://github.com/navikt/aksel/pull/2419))
16
+
17
+ - 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))
18
+
19
+ - Datepicker/Monthpicker: Bytter nå automatisk til Modalvisning på mobil. ([#2419](https://github.com/navikt/aksel/pull/2419))
20
+
3
21
  ## 5.8.0
4
22
 
5
23
  ### 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 Thu, 02 Nov 2023 08:58:03 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-1-alt: 0.375rem;
@@ -4473,12 +4473,16 @@ button.navds-internalheader__title:active,
4473
4473
  }
4474
4474
  @media (min-width: 480px) {
4475
4475
  .navds-modal {
4476
- max-width: calc((100% - 6px) - 2em);
4477
- max-height: calc((100% - 6px) - 2em);
4476
+ max-width: calc(100% - 6px - 2em);
4478
4477
  }
4479
4478
 
4480
4479
  .navds-modal--autowidth {
4481
- max-width: min(700px, calc((100% - 6px) - 2em));
4480
+ max-width: min(700px, calc(100% - 6px - 2em));
4481
+ }
4482
+ }
4483
+ @media (min-height: 480px) {
4484
+ .navds-modal {
4485
+ max-height: calc(100% - 6px - 2em);
4482
4486
  }
4483
4487
  }
4484
4488
  .navds-modal::backdrop {
@@ -4533,6 +4537,13 @@ button.navds-internalheader__title:active,
4533
4537
  .navds-modal__footer :nth-of-type(2) {
4534
4538
  margin-left: auto;
4535
4539
  }
4540
+ /* When Datepicker is used nested inside a Modal */
4541
+ .navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal {
4542
+ min-width: fit-content;
4543
+ max-width: 100vw;
4544
+ max-height: 100vh;
4545
+ animation: none;
4546
+ }
4536
4547
  @keyframes akselModalFadeIn {
4537
4548
  from {
4538
4549
  opacity: 0;
@@ -4788,16 +4799,6 @@ button.navds-internalheader__title:active,
4788
4799
  position: relative;
4789
4800
  width: fit-content;
4790
4801
  }
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
4802
  .navds-date .rdp-day_selected,
4802
4803
  .navds-monthpicker__month--selected {
4803
4804
  color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -4832,10 +4833,10 @@ button.navds-internalheader__title:active,
4832
4833
  color: var(--ac-date-caption-text, var(--a-text-default));
4833
4834
  }
4834
4835
  .navds-date__field-input {
4835
- padding-right: var(--a-spacing-14);
4836
+ padding-right: var(--a-spacing-12);
4836
4837
  }
4837
4838
  .navds-form-field--small .navds-date__field-input {
4838
- padding-right: var(--a-spacing-10);
4839
+ padding-right: var(--a-spacing-8);
4839
4840
  }
4840
4841
  /* Error-handling */
4841
4842
  .navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
@@ -4900,9 +4901,6 @@ button.navds-internalheader__title:active,
4900
4901
  visibility: hidden;
4901
4902
  pointer-events: none;
4902
4903
  }
4903
- .navds-date__popover:where(.navds-popover) {
4904
- border: none;
4905
- }
4906
4904
  /* Readonly */
4907
4905
  .navds-date__field--readonly .navds-date__field-button {
4908
4906
  cursor: default;
@@ -4923,11 +4921,31 @@ button.navds-internalheader__title:active,
4923
4921
  justify-content: center;
4924
4922
  margin: 0;
4925
4923
  }
4924
+ .navds-date__modal.navds-date {
4925
+ padding: 0;
4926
+ }
4927
+ .navds-date__modal-body {
4928
+ display: flex;
4929
+ flex-direction: column;
4930
+ align-items: flex-end;
4931
+ padding: var(--a-spacing-4);
4932
+ gap: var(--a-spacing-2);
4933
+ }
4934
+ .navds-date__modal-body > .navds-date {
4935
+ padding: 0;
4936
+ }
4937
+ .navds-date__popover:where(.navds-popover) {
4938
+ border: none;
4939
+ }
4926
4940
  @media (min-width: 480px) {
4927
4941
  .navds-date {
4928
4942
  padding: var(--a-spacing-5) var(--a-spacing-4);
4929
4943
  }
4930
4944
 
4945
+ .navds-date__modal-body {
4946
+ padding: var(--a-spacing-6);
4947
+ }
4948
+
4931
4949
  .navds-date__caption {
4932
4950
  gap: var(--a-spacing-2);
4933
4951
  }