@navikt/ds-css 5.7.6 → 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 +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 +33 -17
  6. package/dist/component/index.min.css +1 -1
  7. package/dist/component/modal.css +13 -1
  8. package/dist/component/modal.min.css +1 -1
  9. package/dist/components.css +39 -20
  10. package/dist/components.min.css +1 -1
  11. package/dist/global/tokens.css +1 -1
  12. package/dist/index.css +33 -17
  13. package/dist/index.min.css +1 -1
  14. package/modal.css +12 -1
  15. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
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
+
15
+ ## 5.8.0
16
+
17
+ ### Patch Changes
18
+
19
+ - :bug: Modal: Bedre støtte for Tooltip i Modal ([#2429](https://github.com/navikt/aksel/pull/2429))
20
+
3
21
  ## 5.7.6
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 Fri, 20 Oct 2023 15:20:50 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;
@@ -4443,7 +4443,6 @@ button.navds-internalheader__title:active,
4443
4443
  .navds-modal--polyfilled {
4444
4444
  top: 50%;
4445
4445
  transform: translate(0, -50%);
4446
- overflow: auto;
4447
4446
 
4448
4447
  /* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
4449
4448
  left: 0;
@@ -4452,6 +4451,9 @@ button.navds-internalheader__title:active,
4452
4451
  height: fit-content;
4453
4452
  margin: auto;
4454
4453
  }
4454
+ .navds-modal--polyfilled .navds-modal--polyfilled {
4455
+ overflow: auto;
4456
+ }
4455
4457
  .navds-modal--polyfilled:not([open]) {
4456
4458
  display: none; /* from polyfill */
4457
4459
  }
@@ -4531,6 +4533,13 @@ button.navds-internalheader__title:active,
4531
4533
  .navds-modal__footer :nth-of-type(2) {
4532
4534
  margin-left: auto;
4533
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
+ }
4534
4543
  @keyframes akselModalFadeIn {
4535
4544
  from {
4536
4545
  opacity: 0;
@@ -4786,16 +4795,6 @@ button.navds-internalheader__title:active,
4786
4795
  position: relative;
4787
4796
  width: fit-content;
4788
4797
  }
4789
- /* Focus layering */
4790
- .navds-date__field-input:focus-visible,
4791
- .navds-date__field-button {
4792
- z-index: 1;
4793
- }
4794
- @supports not selector(:focus-visible) {
4795
- .navds-date__field-input:focus {
4796
- z-index: 1;
4797
- }
4798
- }
4799
4798
  .navds-date .rdp-day_selected,
4800
4799
  .navds-monthpicker__month--selected {
4801
4800
  color: var(--ac-date-selected-text, var(--a-text-on-action));
@@ -4830,10 +4829,10 @@ button.navds-internalheader__title:active,
4830
4829
  color: var(--ac-date-caption-text, var(--a-text-default));
4831
4830
  }
4832
4831
  .navds-date__field-input {
4833
- padding-right: var(--a-spacing-14);
4832
+ padding-right: var(--a-spacing-12);
4834
4833
  }
4835
4834
  .navds-form-field--small .navds-date__field-input {
4836
- padding-right: var(--a-spacing-10);
4835
+ padding-right: var(--a-spacing-8);
4837
4836
  }
4838
4837
  /* Error-handling */
4839
4838
  .navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
@@ -4898,9 +4897,6 @@ button.navds-internalheader__title:active,
4898
4897
  visibility: hidden;
4899
4898
  pointer-events: none;
4900
4899
  }
4901
- .navds-date__popover:where(.navds-popover) {
4902
- border: none;
4903
- }
4904
4900
  /* Readonly */
4905
4901
  .navds-date__field--readonly .navds-date__field-button {
4906
4902
  cursor: default;
@@ -4921,11 +4917,31 @@ button.navds-internalheader__title:active,
4921
4917
  justify-content: center;
4922
4918
  margin: 0;
4923
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
+ }
4924
4936
  @media (min-width: 480px) {
4925
4937
  .navds-date {
4926
4938
  padding: var(--a-spacing-5) var(--a-spacing-4);
4927
4939
  }
4928
4940
 
4941
+ .navds-date__modal-body {
4942
+ padding: var(--a-spacing-6);
4943
+ }
4944
+
4929
4945
  .navds-date__caption {
4930
4946
  gap: var(--a-spacing-2);
4931
4947
  }