@navikt/ds-css 5.12.5 → 5.13.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 (37) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/accordion.css +11 -3
  3. package/button.css +58 -26
  4. package/chips.css +12 -4
  5. package/date.css +12 -4
  6. package/dist/component/accordion.css +11 -3
  7. package/dist/component/button.css +58 -26
  8. package/dist/component/chips.css +12 -4
  9. package/dist/component/date.css +12 -4
  10. package/dist/component/expansioncard.css +6 -2
  11. package/dist/component/form.css +101 -42
  12. package/dist/component/helptext.css +6 -2
  13. package/dist/component/index.css +274 -110
  14. package/dist/component/index.min.css +2 -2
  15. package/dist/component/pagination.css +6 -2
  16. package/dist/component/primitives.css +11 -2
  17. package/dist/component/primitives.min.css +1 -1
  18. package/dist/component/timeline.css +34 -16
  19. package/dist/component/togglegroup.css +16 -6
  20. package/dist/components.css +273 -109
  21. package/dist/components.min.css +1 -1
  22. package/dist/global/tokens.css +2 -1
  23. package/dist/global/tokens.min.css +1 -1
  24. package/dist/index.css +274 -110
  25. package/dist/index.min.css +2 -2
  26. package/expansioncard.css +6 -2
  27. package/form/combobox.css +21 -7
  28. package/form/radio-checkbox.css +46 -19
  29. package/form/search.css +22 -12
  30. package/form/switch.css +6 -2
  31. package/form/text-field.css +6 -2
  32. package/help-text.css +6 -2
  33. package/package.json +2 -2
  34. package/pagination.css +6 -2
  35. package/primitives/page.css +11 -2
  36. package/timeline.css +34 -16
  37. package/toggle-group.css +16 -6
package/expansioncard.css CHANGED
@@ -60,7 +60,9 @@
60
60
 
61
61
  .navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
62
62
  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
63
- box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
63
+ box-shadow:
64
+ 1px 0 0 0 var(--__ac-expansioncard-border-color),
65
+ -1px 0 0 0 var(--__ac-expansioncard-border-color),
64
66
  0 -1px 0 0 var(--__ac-expansioncard-border-color);
65
67
  }
66
68
 
@@ -190,7 +192,9 @@
190
192
  }
191
193
 
192
194
  :where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
193
- box-shadow: 1px 0 0 0 var(--__ac-expansioncard-border-color), -1px 0 0 0 var(--__ac-expansioncard-border-color),
195
+ box-shadow:
196
+ 1px 0 0 0 var(--__ac-expansioncard-border-color),
197
+ -1px 0 0 0 var(--__ac-expansioncard-border-color),
194
198
  0 1px 0 0 var(--__ac-expansioncard-border-color);
195
199
  }
196
200
 
package/form/combobox.css CHANGED
@@ -39,7 +39,9 @@
39
39
 
40
40
  .navds-combobox--error
41
41
  .navds-text-field__input:not(:hover):not(:disabled):not(.navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
42
- box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
42
+ box-shadow:
43
+ 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
44
+ var(--a-shadow-focus);
43
45
  }
44
46
 
45
47
  .navds-combobox__selected-options {
@@ -89,7 +91,9 @@
89
91
  }
90
92
 
91
93
  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
92
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
94
+ box-shadow:
95
+ 0 0 0 1px var(--a-surface-default) inset,
96
+ var(--a-shadow-focus);
93
97
  box-shadow: var(--a-shadow-focus);
94
98
  }
95
99
 
@@ -105,7 +109,9 @@
105
109
  }
106
110
 
107
111
  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
108
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
112
+ box-shadow:
113
+ 0 0 0 1px var(--a-surface-default) inset,
114
+ var(--a-shadow-focus);
109
115
  box-shadow: var(--a-shadow-focus);
110
116
  }
111
117
 
@@ -116,7 +122,9 @@
116
122
 
117
123
  @supports not selector(:has) {
118
124
  .navds-combobox--focused .navds-combobox__wrapper-inner {
119
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
125
+ box-shadow:
126
+ 0 0 0 1px var(--a-surface-default) inset,
127
+ var(--a-shadow-focus);
120
128
  box-shadow: var(--a-shadow-focus);
121
129
  }
122
130
 
@@ -171,14 +179,18 @@
171
179
  }
172
180
 
173
181
  .navds-combobox__button-toggle-list:focus-visible {
174
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
182
+ box-shadow:
183
+ 0 0 0 1px var(--a-surface-default) inset,
184
+ var(--a-shadow-focus);
175
185
  box-shadow: var(--a-shadow-focus);
176
186
  outline: none;
177
187
  }
178
188
 
179
189
  @supports not selector(:focus-visible) {
180
190
  .navds-combobox__button-toggle-list:focus {
181
- box-shadow: 0 0 0 1px var(--a-surface-default) inset, var(--a-shadow-focus);
191
+ box-shadow:
192
+ 0 0 0 1px var(--a-surface-default) inset,
193
+ var(--a-shadow-focus);
182
194
  box-shadow: var(--a-shadow-focus);
183
195
  outline: none;
184
196
  }
@@ -297,7 +309,9 @@
297
309
  }
298
310
 
299
311
  .navds-combobox__list-item__new-option--focus {
300
- box-shadow: var(--a-shadow-focus) inset, var(--a-border-action) 0 0 0 5px inset;
312
+ box-shadow:
313
+ var(--a-shadow-focus) inset,
314
+ var(--a-border-action) 0 0 0 5px inset;
301
315
  border-radius: calc(var(--a-border-radius-medium) - 1px);
302
316
  }
303
317
 
package/form/radio-checkbox.css CHANGED
@@ -72,26 +72,34 @@
72
72
 
73
73
  .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
74
74
  .navds-radio__input:focus-visible + .navds-radio__label::before {
75
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
76
- 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
75
+ box-shadow:
76
+ 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
77
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
78
+ 0 0 0 4px var(--a-border-focus);
77
79
  }
78
80
 
79
81
  @supports not selector(:focus-visible) {
80
82
  .navds-checkbox__input:focus + .navds-checkbox__label::before,
81
83
  .navds-radio__input:focus + .navds-radio__label::before {
82
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), 0 0 0 4px var(--a-border-focus);
84
+ box-shadow:
85
+ 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
86
+ 0 0 0 4px var(--a-border-focus);
83
87
  }
84
88
  }
85
89
 
86
90
  .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
87
91
  .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
88
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
92
+ box-shadow:
93
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
94
+ 0 0 0 4px var(--a-border-focus);
89
95
  }
90
96
 
91
97
  @supports not selector(:focus-visible) {
92
98
  .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
93
99
  .navds-radio__input:hover:focus + .navds-radio__label::before {
94
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), 0 0 0 4px var(--a-border-focus);
100
+ box-shadow:
101
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
102
+ 0 0 0 4px var(--a-border-focus);
95
103
  }
96
104
  }
97
105
 
@@ -149,33 +157,42 @@
149
157
 
150
158
  .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
151
159
  .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
152
- box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
153
- 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
160
+ box-shadow:
161
+ 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
162
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
163
+ 0 0 0 4px var(--a-border-focus);
154
164
  }
155
165
 
156
166
  @supports not selector(:focus-visible) {
157
167
  .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
158
168
  .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
159
- box-shadow: 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
160
- 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
169
+ box-shadow:
170
+ 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action)),
171
+ 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
172
+ 0 0 0 4px var(--a-border-focus);
161
173
  }
162
174
  }
163
175
 
164
176
  .navds-radio__input:checked + .navds-radio__label::before {
165
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
177
+ box-shadow:
178
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
166
179
  inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default));
167
180
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
168
181
  }
169
182
 
170
183
  .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
171
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
172
- inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
184
+ box-shadow:
185
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
186
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
187
+ 0 0 0 4px var(--a-border-focus);
173
188
  }
174
189
 
175
190
  @supports not selector(:focus-visible) {
176
191
  .navds-radio__input:checked:focus + .navds-radio__label::before {
177
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
178
- inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)), 0 0 0 4px var(--a-border-focus);
192
+ box-shadow:
193
+ 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
194
+ inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
195
+ 0 0 0 4px var(--a-border-focus);
179
196
  }
180
197
  }
181
198
 
@@ -213,7 +230,9 @@
213
230
  > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
214
231
  + .navds-checkbox__label::before,
215
232
  .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
216
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
233
+ box-shadow:
234
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
235
+ 0 0 0 4px var(--a-border-focus);
217
236
  }
218
237
 
219
238
  @supports not selector(:focus-visible) {
@@ -221,7 +240,9 @@
221
240
  > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
222
241
  + .navds-checkbox__label::before,
223
242
  .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
224
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
243
+ box-shadow:
244
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
245
+ 0 0 0 4px var(--a-border-focus);
225
246
  }
226
247
  }
227
248
 
@@ -238,7 +259,9 @@
238
259
  + .navds-checkbox__label::before,
239
260
  .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
240
261
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
241
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
262
+ box-shadow:
263
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
264
+ 0 0 0 4px var(--a-border-focus);
242
265
  }
243
266
 
244
267
  @supports not selector(:focus-visible) {
@@ -255,7 +278,9 @@
255
278
  + .navds-checkbox__label::before,
256
279
  .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
257
280
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
258
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), 0 0 0 4px var(--a-border-focus);
281
+ box-shadow:
282
+ 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
283
+ 0 0 0 4px var(--a-border-focus);
259
284
  }
260
285
  }
261
286
 
@@ -314,7 +339,9 @@
314
339
 
315
340
  .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label::before {
316
341
  background-color: var(--a-icon-subtle);
317
- box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border), inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
342
+ box-shadow:
343
+ 0 0 0 2px var(--__ac-radio-checkbox-readonly-border),
344
+ inset 0 0 0 2px var(--__ac-radio-checkbox-readonly-bg);
318
345
  }
319
346
 
320
347
  .navds-checkbox--readonly > .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
package/form/search.css CHANGED
@@ -128,14 +128,15 @@
128
128
  }
129
129
 
130
130
  .navds-search__button-search.navds-button--secondary {
131
- box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
131
+ box-shadow:
132
+ -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
132
133
  0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
133
134
  0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
134
135
  }
135
136
 
136
137
  .navds-search__button-search.navds-button--secondary:hover {
137
- box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
138
- inset,
138
+ box-shadow:
139
+ -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
139
140
  0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
140
141
  0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
141
142
  -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)));
@@ -147,33 +148,40 @@
147
148
  }
148
149
 
149
150
  .navds-search__button-search.navds-button--secondary:focus-visible {
150
- box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
151
+ box-shadow:
152
+ 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
151
153
  var(--a-shadow-focus);
152
154
  }
153
155
 
154
156
  .navds-search__button-search.navds-button--secondary:focus-visible:hover {
155
- box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
157
+ box-shadow:
158
+ 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
156
159
  var(--a-shadow-focus);
157
160
  }
158
161
 
159
162
  .navds-search__button-search.navds-button--secondary:focus-visible:active {
160
- box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
163
+ box-shadow:
164
+ 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
165
+ var(--a-shadow-focus);
161
166
  }
162
167
 
163
168
  @supports not selector(:focus-visible) {
164
169
  .navds-search__button-search.navds-button--secondary:focus {
165
- box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
170
+ box-shadow:
171
+ 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
166
172
  var(--a-shadow-focus);
167
173
  }
168
174
 
169
175
  .navds-search__button-search.navds-button--secondary:focus:hover {
170
- box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
171
- inset,
176
+ box-shadow:
177
+ 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
172
178
  var(--a-shadow-focus);
173
179
  }
174
180
 
175
181
  .navds-search__button-search.navds-button--secondary:focus:active {
176
- box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
182
+ box-shadow:
183
+ 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset,
184
+ var(--a-shadow-focus);
177
185
  }
178
186
  }
179
187
 
@@ -184,7 +192,8 @@
184
192
  }
185
193
 
186
194
  .navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
187
- box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
195
+ box-shadow:
196
+ inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
188
197
  var(--a-shadow-focus);
189
198
  }
190
199
 
@@ -197,7 +206,8 @@
197
206
 
198
207
  @supports not selector(:focus-visible) {
199
208
  .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
200
- box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
209
+ box-shadow:
210
+ inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
201
211
  var(--a-shadow-focus);
202
212
  }
203
213
 
package/form/switch.css CHANGED
@@ -111,12 +111,16 @@
111
111
  }
112
112
 
113
113
  .navds-switch__input:focus-visible ~ .navds-switch__track {
114
- box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
114
+ box-shadow:
115
+ 0 0 0 1px var(--a-surface-default),
116
+ var(--a-shadow-focus);
115
117
  }
116
118
 
117
119
  @supports not selector(:focus-visible) {
118
120
  .navds-switch__input:focus ~ .navds-switch__track {
119
- box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
121
+ box-shadow:
122
+ 0 0 0 1px var(--a-surface-default),
123
+ var(--a-shadow-focus);
120
124
  }
121
125
  }
122
126
 
package/form/text-field.css CHANGED
@@ -65,12 +65,16 @@
65
65
  }
66
66
 
67
67
  .navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
68
- box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
68
+ box-shadow:
69
+ 0 0 0 1px var(--a-border-danger),
70
+ var(--a-shadow-focus);
69
71
  }
70
72
 
71
73
  @supports not selector(:focus-visible) {
72
74
  .navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
73
- box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
75
+ box-shadow:
76
+ 0 0 0 1px var(--a-border-danger),
77
+ var(--a-shadow-focus);
74
78
  }
75
79
  }
76
80
 
package/help-text.css CHANGED
@@ -14,13 +14,17 @@
14
14
 
15
15
  .navds-help-text__button:focus-visible {
16
16
  outline: none;
17
- box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
17
+ box-shadow:
18
+ 0 0 0 1px var(--a-border-focus),
19
+ inset 0 0 0 1px var(--a-border-focus);
18
20
  }
19
21
 
20
22
  @supports not selector(:focus-visible) {
21
23
  .navds-help-text__button:focus {
22
24
  outline: none;
23
- box-shadow: 0 0 0 1px var(--a-border-focus), inset 0 0 0 1px var(--a-border-focus);
25
+ box-shadow:
26
+ 0 0 0 1px var(--a-border-focus),
27
+ inset 0 0 0 1px var(--a-border-focus);
24
28
  }
25
29
  }
26
30
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "5.12.5",
3
+ "version": "5.13.0",
4
4
  "description": "CSS for NAV Designsystem",
5
5
  "author": "Aksel | NAV designsystem team",
6
6
  "keywords": [
@@ -27,7 +27,7 @@
27
27
  "css:get-version": "node config/get-version.js"
28
28
  },
29
29
  "devDependencies": {
30
- "@navikt/ds-tokens": "^5.12.5",
30
+ "@navikt/ds-tokens": "^5.13.0",
31
31
  "cssnano": "6.0.0",
32
32
  "fast-glob": "3.2.11",
33
33
  "lodash": "4.17.21",
package/pagination.css CHANGED
@@ -36,12 +36,16 @@
36
36
  }
37
37
 
38
38
  .navds-pagination__item[aria-current="true"]:focus-visible {
39
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
39
+ box-shadow:
40
+ inset 0 0 0 1px var(--a-surface-default),
41
+ var(--a-shadow-focus);
40
42
  }
41
43
 
42
44
  @supports not selector(:focus-visible) {
43
45
  .navds-pagination__item[aria-current="true"]:focus {
44
- box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
46
+ box-shadow:
47
+ inset 0 0 0 1px var(--a-surface-default),
48
+ var(--a-shadow-focus);
45
49
  }
46
50
  }
47
51
 
package/primitives/page.css CHANGED
@@ -10,6 +10,9 @@
10
10
 
11
11
  /* Page.Block */
12
12
  .navds-pageblock {
13
+ /* stylelint-disable-next-line length-zero-no-unit */
14
+ --__ac-page-padding-inline: 0px;
15
+
13
16
  margin-inline: auto;
14
17
  width: 100%;
15
18
  }
@@ -27,6 +30,10 @@
27
30
  padding-block-end: var(--a-spacing-8);
28
31
  }
29
32
 
33
+ .navds-pageblock--text {
34
+ max-width: calc(var(--a-text-width-max) + var(--__ac-page-padding-inline) + var(--__ac-page-padding-inline));
35
+ }
36
+
30
37
  .navds-pageblock--md {
31
38
  max-width: 768px;
32
39
  }
@@ -44,11 +51,13 @@
44
51
  }
45
52
 
46
53
  .navds-pageblock--gutters {
47
- padding-inline: var(--a-spacing-4);
54
+ --__ac-page-padding-inline: var(--a-spacing-4);
55
+
56
+ padding-inline: var(--__ac-page-padding-inline);
48
57
  }
49
58
 
50
59
  @media (min-width: 1024px) {
51
60
  .navds-pageblock--gutters {
52
- padding-inline: var(--a-spacing-12);
61
+ --__ac-page-padding-inline: var(--a-spacing-12);
53
62
  }
54
63
  }
package/timeline.css CHANGED
@@ -178,8 +178,10 @@
178
178
  border: none;
179
179
  cursor: pointer;
180
180
  background: var(--a-surface-default);
181
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
182
- 0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 5px var(--a-surface-default);
181
+ box-shadow:
182
+ inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
183
+ 0 0 0 4px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
184
+ 0 0 0 5px var(--a-surface-default);
183
185
  z-index: 2;
184
186
  border-radius: var(--a-border-radius-full);
185
187
  padding: var(--a-spacing-1);
@@ -198,34 +200,44 @@
198
200
  }
199
201
 
200
202
  .navds-timeline__pin-button:focus-visible {
201
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
202
- 0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
203
+ box-shadow:
204
+ inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
205
+ 0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
206
+ 0 0 0 4px var(--a-surface-default),
203
207
  0 0 0 6px var(--a-border-focus);
204
208
  outline: none;
205
209
  }
206
210
 
207
211
  .navds-timeline__pin-button:hover {
208
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
209
- 0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
212
+ box-shadow:
213
+ inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
214
+ 0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
215
+ 0 0 0 5px var(--a-surface-default);
210
216
  }
211
217
 
212
218
  .navds-timeline__pin-button:hover:focus-visible {
213
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
214
- 0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
219
+ box-shadow:
220
+ inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
221
+ 0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
222
+ 0 0 0 4px var(--a-surface-default),
215
223
  0 0 0 6px var(--a-border-focus);
216
224
  }
217
225
 
218
226
  @supports not selector(:focus-visible) {
219
227
  .navds-timeline__pin-button:focus {
220
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
221
- 0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
228
+ box-shadow:
229
+ inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
230
+ 0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
231
+ 0 0 0 4px var(--a-surface-default),
222
232
  0 0 0 6px var(--a-border-focus);
223
233
  outline: none;
224
234
  }
225
235
 
226
236
  .navds-timeline__pin-button:hover:focus {
227
- box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
228
- 0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
237
+ box-shadow:
238
+ inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
239
+ 0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
240
+ 0 0 0 4px var(--a-surface-default),
229
241
  0 0 0 6px var(--a-border-focus);
230
242
  }
231
243
  }
@@ -284,7 +296,8 @@
284
296
  }
285
297
 
286
298
  .navds-timeline__period--selected:focus-visible {
287
- box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
299
+ box-shadow:
300
+ inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
288
301
  0 0 0 2px var(--a-border-focus);
289
302
  z-index: 3;
290
303
  }
@@ -294,7 +307,9 @@
294
307
  }
295
308
 
296
309
  .navds-timeline__zoom-button:focus-visible {
297
- box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
310
+ box-shadow:
311
+ 0 0 0 1px var(--a-surface-default),
312
+ 0 0 0 3px var(--a-border-focus);
298
313
  border-width: 1px;
299
314
  }
300
315
 
@@ -311,13 +326,16 @@
311
326
  }
312
327
 
313
328
  .navds-timeline__period--selected:focus {
314
- box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
329
+ box-shadow:
330
+ inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
315
331
  0 0 0 2px var(--a-border-focus);
316
332
  z-index: 3;
317
333
  }
318
334
 
319
335
  .navds-timeline__zoom-button:focus {
320
- box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
336
+ box-shadow:
337
+ 0 0 0 1px var(--a-surface-default),
338
+ 0 0 0 3px var(--a-border-focus);
321
339
  border-width: 1px;
322
340
  }
323
341
 
package/toggle-group.css CHANGED
@@ -66,34 +66,44 @@
66
66
 
67
67
  .navds-toggle-group__button:focus-visible {
68
68
  outline: none;
69
- box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
69
+ box-shadow:
70
+ 0 0 0 1px var(--a-surface-default),
71
+ 0 0 0 4px var(--a-border-focus);
70
72
  }
71
73
 
72
74
  @supports not selector(:focus-visible) {
73
75
  .navds-toggle-group__button:focus {
74
76
  outline: none;
75
- box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
77
+ box-shadow:
78
+ 0 0 0 1px var(--a-surface-default),
79
+ 0 0 0 4px var(--a-border-focus);
76
80
  }
77
81
  }
78
82
 
79
83
  .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
80
- box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
84
+ box-shadow:
85
+ 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
86
+ 0 0 0 4px var(--a-border-focus);
81
87
  }
82
88
 
83
89
  @supports not selector(:focus-visible) {
84
90
  .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
85
- box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
91
+ box-shadow:
92
+ 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)),
93
+ 0 0 0 4px var(--a-border-focus);
86
94
  }
87
95
  }
88
96
 
89
97
  .navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
90
- box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
98
+ box-shadow:
99
+ 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
91
100
  0 0 0 4px var(--a-border-focus);
92
101
  }
93
102
 
94
103
  @supports not selector(:focus-visible) {
95
104
  .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
96
- box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
105
+ box-shadow:
106
+ 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
97
107
  0 0 0 4px var(--a-border-focus);
98
108
  }
99
109
  }