@norges-domstoler/dds-components 21.3.1 → 21.5.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 (9) hide show
  1. package/dist/index.css +116 -26
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +73 -65
  4. package/dist/index.d.ts +73 -65
  5. package/dist/index.js +1065 -965
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +754 -656
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +7 -8
package/dist/index.css CHANGED
@@ -144,9 +144,20 @@
144
144
  --dds-color-text-link-visited: var( --dds-color-text-action-visited-on-inverse );
145
145
  --dds-color-text-label: var(--dds-color-text-on-inverse);
146
146
  --dds-color-text-helper: var(--dds-color-text-on-inverse);
147
- --dds-color-text-placeholder: var(--dds-color-text-subtle);
147
+ --dds-color-text-placeholder: var(--dds-color-text-on-inverse);
148
148
  --dds-color-icon-link: var(--dds-color-text-on-inverse);
149
+ --dds-color-text-default-inversable: var(--dds-color-text-on-inverse);
150
+ --dds-color-text-subtle-inversable: var(--dds-color-text-on-inverse);
151
+ --dds-color-text-medium-inversable: var(--dds-color-text-on-inverse);
152
+ --dds-color-text-action-resting-inversable: var(--dds-color-text-on-inverse);
153
+ --dds-color-text-action-hover-inversable: var(--dds-color-text-on-inverse);
154
+ --dds-color-text-requiredfield-inversable: var(--dds-color-text-on-inverse);
149
155
  color: var(--dds-color-text-on-inverse);
156
+ --dds-color-icon-default-inversable: var(--dds-color-text-on-inverse);
157
+ --dds-color-icon-subtle-inversable: var(--dds-color-text-on-inverse);
158
+ --dds-color-icon-medium-inversable: var(--dds-color-text-on-inverse);
159
+ --dds-color-icon-action-resting-inversable: var(--dds-color-icon-on-inverse);
160
+ --dds-color-icon-action-hover-inversable: var(--dds-color-icon-on-inverse);
150
161
  }
151
162
  :where(.typographyStyles_a) {
152
163
  font: inherit;
@@ -181,7 +192,7 @@
181
192
  }
182
193
  }
183
194
  .typographyStyles_a--visited:visited {
184
- color: var(--dds-color-text-action-visited);
195
+ color: var(--dds-color-text-link-visited);
185
196
  }
186
197
  :where(.typographyStyles_body-xsmall) {
187
198
  margin: 0;
@@ -349,17 +360,89 @@
349
360
  text-decoration: underline;
350
361
  }
351
362
  .typographyStyles_text-color--default {
352
- color: var(--dds-color-text-default);
363
+ color: var(--dds-color-text-default-inversable);
353
364
  }
354
365
  .typographyStyles_text-color--medium {
355
- color: var(--dds-color-text-medium);
366
+ color: var(--dds-color-text-medium-inversable);
356
367
  }
357
368
  .typographyStyles_text-color--subtle {
358
- color: var(--dds-color-text-subtle);
369
+ color: var(--dds-color-text-subtle-inversable);
370
+ }
371
+ .typographyStyles_text-color--requiredfield {
372
+ color: var(--dds-color-text-requiredfield-inversable);
373
+ }
374
+ .typographyStyles_text-color--action-resting {
375
+ color: var(--dds-color-text-action-resting-inversable);
376
+ }
377
+ .typographyStyles_text-color--action-hover:hover {
378
+ color: var(--dds-color-text-action-hover-inversable);
379
+ }
380
+ .typographyStyles_text-color--action-visited:visited {
381
+ color: var(--dds-color-text-link-visited);
382
+ }
383
+ .typographyStyles_text-color--on-action {
384
+ color: var(--dds-color-text-on-action);
385
+ }
386
+ .typographyStyles_text-color--on-status-default {
387
+ color: var(--dds-color-text-on-status-default);
388
+ }
389
+ .typographyStyles_text-color--on-status-strong {
390
+ color: var(--dds-color-text-on-status-strong);
391
+ }
392
+ .typographyStyles_text-color--on-notification {
393
+ color: var(--dds-color-text-on-notification);
359
394
  }
360
395
  .typographyStyles_text-color--on-inverse {
361
396
  color: var(--dds-color-text-on-inverse);
362
397
  }
398
+ .typographyStyles_icon-color--default {
399
+ color: var(--dds-color-icon-default-inversable);
400
+ }
401
+ .typographyStyles_icon-color--medium {
402
+ color: var(--dds-color-icon-medium-inversable);
403
+ }
404
+ .typographyStyles_icon-color--subtle {
405
+ color: var(--dds-color-icon-subtle-inversable);
406
+ }
407
+ .typographyStyles_icon-color--on-action {
408
+ color: var(--dds-color-icon-on-action);
409
+ }
410
+ .typographyStyles_icon-color--action-resting {
411
+ color: var(--dds-color-icon-action-resting-inversable);
412
+ }
413
+ .typographyStyles_icon-color--action-hover:hover {
414
+ color: var(--dds-color-icon-action-hover-inversable);
415
+ }
416
+ .typographyStyles_icon-color--on-action {
417
+ color: var(--dds-color-icon-on-action);
418
+ }
419
+ .typographyStyles_icon-color--on-info-default {
420
+ color: var(--dds-color-icon-on-info-default);
421
+ }
422
+ .typographyStyles_icon-color--on-info-strong {
423
+ color: var(--dds-color-icon-on-info-strong);
424
+ }
425
+ .typographyStyles_icon-color--on-success-default {
426
+ color: var(--dds-color-icon-on-success-default);
427
+ }
428
+ .typographyStyles_icon-color--on-success-strong {
429
+ color: var(--dds-color-icon-on-success-strong);
430
+ }
431
+ .typographyStyles_icon-color--on-danger-default {
432
+ color: var(--dds-color-icon-on-danger-default);
433
+ }
434
+ .typographyStyles_icon-color--on-danger-strong {
435
+ color: var(--dds-color-icon-on-danger-strong);
436
+ }
437
+ .typographyStyles_icon-color--on-warning-default {
438
+ color: var(--dds-color-icon-on-warning-default);
439
+ }
440
+ .typographyStyles_icon-color--on-warning-strong {
441
+ color: var(--dds-color-icon-on-warning-strong);
442
+ }
443
+ .typographyStyles_icon-color--on-inverse {
444
+ color: var(--dds-color-icon-on-inverse);
445
+ }
363
446
 
364
447
  /* src/components/helpers/styling/utilStyles.module.css */
365
448
  :where(.utilStyles_remove-list-styling) {
@@ -1948,7 +2031,7 @@
1948
2031
  border-color: var(--dds-color-border-subtle);
1949
2032
  }
1950
2033
  .Card_container--navigation:hover,
1951
- .Card_container--selection-control:has(input:enabled:not([aria-readonly])):hover {
2034
+ .Card_container--selection-control:has(input:enabled:not([aria-readonly=true])):hover {
1952
2035
  border-color: var(--dds-color-border-action-hover);
1953
2036
  box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
1954
2037
  }
@@ -1962,7 +2045,7 @@
1962
2045
  top: var(--dds-selection-control-card-control-top);
1963
2046
  }
1964
2047
  input:disabled,
1965
- input[aria-readonly] {
2048
+ input[aria-readonly=true] {
1966
2049
  & ~ span {
1967
2050
  background-color: var(--dds-color-surface-field-disabled);
1968
2051
  }
@@ -1977,7 +2060,7 @@
1977
2060
  box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
1978
2061
  }
1979
2062
  &:has(input:disabled),
1980
- &:has(input[aria-readonly]) {
2063
+ &:has(input[aria-readonly=true]) {
1981
2064
  box-shadow: none;
1982
2065
  background-color: var(--dds-color-surface-selected-default);
1983
2066
  background-color: var(--dds-color-surface-field-disabled);
@@ -2046,16 +2129,16 @@
2046
2129
  -webkit-user-select: none;
2047
2130
  -moz-user-select: none;
2048
2131
  user-select: none;
2049
- &:not(:hover) input[aria-invalid]:enabled:not([aria-readonly]):not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
2132
+ &:not(:hover) input[aria-invalid]:enabled:not([aria-readonly=true]):not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
2050
2133
  background-color: var(--dds-color-surface-danger-default);
2051
2134
  }
2052
2135
  }
2053
2136
  .SelectionControl_label:has(input:enabled) {
2054
- input[aria-invalid]:not([aria-readonly]):not(:focus-visible) ~ .SelectionControl_selection-control {
2137
+ input[aria-invalid]:not([aria-readonly=true]):not(:focus-visible) ~ .SelectionControl_selection-control {
2055
2138
  border-color: var(--dds-color-border-danger);
2056
2139
  box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
2057
2140
  }
2058
- &:hover input:not(:checked):not([aria-readonly]) ~ .SelectionControl_selection-control {
2141
+ &:hover input:not(:checked):not([aria-readonly=true]) ~ .SelectionControl_selection-control {
2059
2142
  background-color: var(--dds-color-surface-hover-default);
2060
2143
  box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
2061
2144
  border-color: var(--dds-color-border-action-hover);
@@ -2065,13 +2148,13 @@
2065
2148
  border-color: var(--dds-color-surface-action-selected);
2066
2149
  background-color: var(--dds-color-surface-action-selected);
2067
2150
  }
2068
- input:checked[aria-readonly] ~ .SelectionControl_selection-control,
2069
- input[data-indeterminate][aria-readonly] ~ .SelectionControl_selection-control {
2151
+ input:checked[aria-readonly=true] ~ .SelectionControl_selection-control,
2152
+ input[data-indeterminate][aria-readonly=true] ~ .SelectionControl_selection-control {
2070
2153
  border-color: var(--dds-color-surface-action-selected-disabled);
2071
2154
  background-color: var(--dds-color-surface-action-selected-disabled);
2072
2155
  }
2073
2156
  &:hover {
2074
- input:enabled:not([aria-readonly]) {
2157
+ input:enabled:not([aria-readonly=true]) {
2075
2158
  &:checked[type=checkbox],
2076
2159
  &[data-indeterminate] {
2077
2160
  ~ .SelectionControl_selection-control {
@@ -2126,7 +2209,7 @@ input[data-indeterminate] ~ .SelectionControl_selection-control:after {
2126
2209
  border-color: var(--dds-color-surface-action-selected-disabled);
2127
2210
  background-color: var(--dds-color-surface-action-selected-disabled);
2128
2211
  }
2129
- .SelectionControl_label:has(input[aria-readonly]) {
2212
+ .SelectionControl_label:has(input[aria-readonly=true]) {
2130
2213
  cursor: default;
2131
2214
  color: var(--dds-color-text-medium);
2132
2215
  input ~ .SelectionControl_selection-control {
@@ -2226,7 +2309,6 @@ input[data-indeterminate] ~ .SelectionControl_selection-control:after {
2226
2309
  flex-direction: row;
2227
2310
  align-items: center;
2228
2311
  gap: var(--dds-spacing-x0-25);
2229
- width: var(--dds-date-input-width);
2230
2312
  }
2231
2313
  .DateInput_date-input--medium {
2232
2314
  padding-inline-start: var(--dds-spacing-x0-5);
@@ -2390,6 +2472,17 @@ input[data-indeterminate] ~ .SelectionControl_selection-control:after {
2390
2472
  --dds-color-text-placeholder: var(--dds-color-text-subtle);
2391
2473
  --dds-color-text-helper: var(--dds-color-text-subtle);
2392
2474
  --dds-color-icon-link: var(--dds-color-text-action-resting);
2475
+ --dds-color-text-subtle-inversable: var(--dds-color-text-subtle);
2476
+ --dds-color-text-default-inversable: var(--dds-color-text-default);
2477
+ --dds-color-text-medium-inversable: var(--dds-color-text-medium);
2478
+ --dds-color-text-action-resting-inversable: var( --dds-color-text-action-resting );
2479
+ --dds-color-text-action-hover-inversable: var(--dds-color-text-action-hover);
2480
+ --dds-color-text-requiredfield-inversable: var( --dds-color-text-requiredfield );
2481
+ --dds-color-icon-subtle-inversable: var(--dds-color-icon-subtle);
2482
+ --dds-color-icon-default-inversable: var(--dds-color-icon-default);
2483
+ --dds-color-icon-medium-inversable: var(--dds-color-icon-medium);
2484
+ --dds-color-icon-action-resting-inversable: var( --dds-color-icon-action-resting );
2485
+ --dds-color-icon-action-hover-inversable: var(--dds-color-icon-action-hover);
2393
2486
  --dds-focus-outline: var(--dds-color-focus-outside) 2px solid;
2394
2487
  --dds-focus-outline-offset: var(--dds-spacing-x0-125);
2395
2488
  --dds-focus-outline-inset: calc(0px - var(--dds-spacing-x0-25));
@@ -3863,9 +3956,6 @@ select:hover {
3863
3956
  .TextInput_container--disabled {
3864
3957
  color: var(--dds-color-text-subtle);
3865
3958
  }
3866
- .TextInput_input-width {
3867
- width: var(--dds-textinput-width);
3868
- }
3869
3959
  .TextInput_input {
3870
3960
  &.TextInput_with-icon--medium {
3871
3961
  padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
@@ -3977,10 +4067,10 @@ select:hover {
3977
4067
  input:checked ~ .Toggle_track > .Toggle_thumb {
3978
4068
  transform: translateX(1.25rem);
3979
4069
  }
3980
- input:checked:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
4070
+ input:checked:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
3981
4071
  transform: translateX(var(--dds-spacing-x1));
3982
4072
  }
3983
- input:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
4073
+ input:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
3984
4074
  width: 1.5rem;
3985
4075
  }
3986
4076
  }
@@ -3997,16 +4087,16 @@ select:hover {
3997
4087
  input:checked ~ .Toggle_track > .Toggle_thumb {
3998
4088
  transform: translateX(var(--dds-spacing-x1));
3999
4089
  }
4000
- input:checked:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
4090
+ input:checked:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
4001
4091
  transform: translateX(var(--dds-spacing-x0-75));
4002
4092
  }
4003
- input:enabled:active:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track > .Toggle_thumb {
4093
+ input:enabled:active:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track > .Toggle_thumb {
4004
4094
  width: var(--dds-spacing-x2);
4005
4095
  }
4006
4096
  }
4007
4097
  .Toggle_label,
4008
4098
  .Toggle_label--is-loading {
4009
- input:checked:enabled:not([aria-readonly]) ~ .Toggle_track {
4099
+ input:checked:enabled:not([aria-readonly=true]) ~ .Toggle_track {
4010
4100
  background-color: var(--dds-color-surface-action-selected);
4011
4101
  border-color: var(--dds-color-border-action-default);
4012
4102
  & > .Toggle_thumb {
@@ -4020,14 +4110,14 @@ select:hover {
4020
4110
  }
4021
4111
  .Toggle_label {
4022
4112
  cursor: pointer;
4023
- &:hover input:enabled:checked:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track {
4113
+ &:hover input:enabled:checked:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track {
4024
4114
  background-color: var(--dds-color-surface-action-hover);
4025
4115
  border-color: var(--dds-color-border-action-hover);
4026
4116
  .Toggle_thumb {
4027
4117
  border-color: var(--dds-color-border-action-hover);
4028
4118
  }
4029
4119
  }
4030
- &:hover input:enabled:not([aria-disabled]):not([aria-readonly]) ~ .Toggle_track {
4120
+ &:hover input:enabled:not([aria-disabled]):not([aria-readonly=true]) ~ .Toggle_track {
4031
4121
  background-color: var(--dds-color-surface-hover-default);
4032
4122
  border-color: var(--dds-color-border-action-hover);
4033
4123
  .Toggle_thumb {