@norges-domstoler/dds-components 17.2.2 → 17.3.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 +91 -47
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +43 -11
  4. package/dist/index.d.ts +43 -11
  5. package/dist/index.js +1779 -1493
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +1677 -1390
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +10 -10
package/dist/index.css CHANGED
@@ -116,19 +116,24 @@
116
116
  /* src/components/Typography/typographyStyles.module.css */
117
117
  :root {
118
118
  --dds-color-text-body: var(--dds-color-text-default);
119
+ --dds-color-text-body-subtle: var(--dds-color-text-subtle);
119
120
  --dds-color-text-link: var(--dds-color-text-action-resting);
120
121
  --dds-color-text-link-visited: var(--dds-color-text-action-visited);
121
122
  --dds-color-text-label: var(--dds-color-text-medium);
122
123
  --dds-color-text-placeholder: var(--dds-color-text-subtle);
123
124
  --dds-color-text-helper: var(--dds-color-text-subtle);
125
+ --dds-color-icon-link: var(--dds-color-text-action-resting);
124
126
  }
125
127
  .typographyStyles_contrast {
126
128
  --dds-color-text-body: var(--dds-color-text-on-inverse);
129
+ --dds-color-text-body-subtle: var(--dds-color-text-on-inverse);
127
130
  --dds-color-text-link: var(--dds-color-text-on-inverse);
128
131
  --dds-color-text-link-visited: var( --dds-color-text-action-visited-on-inverse );
129
132
  --dds-color-text-label: var(--dds-color-text-on-inverse);
130
133
  --dds-color-text-helper: var(--dds-color-text-on-inverse);
131
134
  --dds-color-text-placeholder: var(--dds-color-text-subtle);
135
+ --dds-color-icon-link: var(--dds-color-text-on-inverse);
136
+ color: var(--dds-color-text-on-inverse);
132
137
  }
133
138
  :where(.typographyStyles_a) {
134
139
  font: inherit;
@@ -843,6 +848,70 @@
843
848
  border: 1px solid var(--dds-color-border-inverse);
844
849
  }
845
850
 
851
+ /* src/components/Accordion/Accordion.module.css */
852
+ :where(.Accordion_container) {
853
+ border-bottom: 1px solid var(--dds-color-border-default);
854
+ }
855
+ :where(.Accordion_container:first-child) {
856
+ border-top: 1px solid var(--dds-color-border-default);
857
+ }
858
+ :where(.Accordion_header-button) {
859
+ @media (prefers-reduced-motion: no-preference) {
860
+ transition: background-color 0.2s, var(--dds-focus-transition);
861
+ }
862
+ &:hover {
863
+ background-color: var(--dds-color-surface-hover-default);
864
+ color: var(--dds-color-text-action-hover);
865
+ }
866
+ }
867
+ .Accordion_header-container {
868
+ padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
869
+ }
870
+ .Accordion_body {
871
+ height: var(--dds-card-accordion-body-height);
872
+ }
873
+ .Accordion_body__content {
874
+ padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1-5) var(--dds-spacing-x2) var(--dds-spacing-x1);
875
+ }
876
+
877
+ /* src/components/helpers/AccordionBase/AccordionBase.module.css */
878
+ :where(.AccordionBase_header-button) {
879
+ -webkit-user-select: text;
880
+ -moz-user-select: text;
881
+ user-select: text;
882
+ position: relative;
883
+ cursor: pointer;
884
+ display: block;
885
+ width: 100%;
886
+ }
887
+ .AccordionBase_header-container {
888
+ display: flex;
889
+ justify-content: space-between;
890
+ align-items: center;
891
+ }
892
+ .AccordionBase_header__content {
893
+ text-align: left;
894
+ }
895
+ .AccordionBase_header__chevron {
896
+ display: flex;
897
+ align-items: center;
898
+ justify-content: center;
899
+ height: var(--dds-icon-size-medium);
900
+ width: var(--dds-icon-size-medium);
901
+ margin-left: var(--dds-spacing-x0-5);
902
+ }
903
+ .AccordionBase_body {
904
+ overflow: hidden;
905
+ }
906
+ .AccordionBase_body--animated {
907
+ @media (prefers-reduced-motion: no-preference) {
908
+ transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
909
+ }
910
+ }
911
+ .AccordionBase_body--hidden {
912
+ display: none;
913
+ }
914
+
846
915
  /* src/components/BackLink/BackLink.module.css */
847
916
  .BackLink_icon {
848
917
  display: inline;
@@ -917,7 +986,7 @@
917
986
  padding: var(--dds-spacing-x0-125) 0;
918
987
  }
919
988
  .Breadcrumbs_icon {
920
- color: var(--dds-color-icon-action-resting);
989
+ color: var(--dds-color-icon-link);
921
990
  }
922
991
 
923
992
  /* src/components/Button/Button.module.css */
@@ -1264,6 +1333,7 @@
1264
1333
  /* src/components/Card/Card.module.css */
1265
1334
  .Card_container {
1266
1335
  border: 1px solid;
1336
+ border-radius: var(--dds-border-radius-surface);
1267
1337
  @media (prefers-reduced-motion: no-preference) {
1268
1338
  transition: box-shadow 0.2s, border-color 0.2s;
1269
1339
  }
@@ -1294,13 +1364,6 @@
1294
1364
 
1295
1365
  /* src/components/Card/CardAccordion/CardAccordion.module.css */
1296
1366
  .CardAccordion_header-button {
1297
- -webkit-user-select: text;
1298
- -moz-user-select: text;
1299
- user-select: text;
1300
- position: relative;
1301
- cursor: pointer;
1302
- display: block;
1303
- width: 100%;
1304
1367
  @media (prefers-reduced-motion: no-preference) {
1305
1368
  transition: box-shadow 0.2s, var(--dds-focus-transition);
1306
1369
  }
@@ -1309,40 +1372,17 @@
1309
1372
  }
1310
1373
  }
1311
1374
  .CardAccordion_header-container {
1312
- display: flex;
1313
- justify-content: space-between;
1314
- align-items: center;
1315
1375
  padding: var(--dds-card-accordion-header-container-padding);
1316
1376
  @media (prefers-reduced-motion: no-preference) {
1317
1377
  transition: box-shadow 0.2s;
1318
1378
  }
1319
1379
  }
1320
- .CardAccordion_header__content {
1321
- text-align: left;
1322
- }
1323
- .CardAccordion_header__chevron {
1324
- display: flex;
1325
- align-items: center;
1326
- justify-content: center;
1327
- height: var(--dds-icon-size-medium);
1328
- width: var(--dds-icon-size-medium);
1329
- margin-left: var(--dds-spacing-x0-5);
1330
- }
1331
1380
  .CardAccordion_body {
1332
- overflow: hidden;
1333
1381
  height: var(--dds-card-accordion-body-height);
1334
1382
  }
1335
1383
  .CardAccordion_body__content {
1336
1384
  padding: var(--dds-card-accordion-body-content-padding);
1337
1385
  }
1338
- .CardAccordion_body--animated {
1339
- @media (prefers-reduced-motion: no-preference) {
1340
- transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1341
- }
1342
- }
1343
- .CardAccordion_body--hidden {
1344
- display: none;
1345
- }
1346
1386
 
1347
1387
  /* src/components/Chip/Chip.module.css */
1348
1388
  .Chip_container {
@@ -1360,6 +1400,11 @@
1360
1400
  gap: var(--dds-spacing-x0-75);
1361
1401
  }
1362
1402
 
1403
+ /* src/components/Contrast/Contrast.module.css */
1404
+ :where(.Contrast_container) {
1405
+ background-color: var(--dds-color-surface-inverse-default);
1406
+ }
1407
+
1363
1408
  /* src/components/date-inputs/common/DateInput.module.css */
1364
1409
  .DateInput_date-input {
1365
1410
  display: inline-flex;
@@ -1565,13 +1610,13 @@
1565
1610
  }
1566
1611
  .DescriptionList_list--default {
1567
1612
  dt {
1568
- color: var(--dds-color-text-default);
1613
+ color: var(--dds-color-text-body);
1569
1614
  font-weight: 600;
1570
1615
  }
1571
1616
  }
1572
1617
  .DescriptionList_list--subtle {
1573
1618
  dt {
1574
- color: var(--dds-color-text-subtle);
1619
+ color: var(--dds-color-text-body-subtle);
1575
1620
  }
1576
1621
  }
1577
1622
  .DescriptionList_list--row {
@@ -1589,7 +1634,7 @@
1589
1634
  align-items: center;
1590
1635
  display: flex;
1591
1636
  gap: var(--dds-spacing-x0-25);
1592
- color: var(--dds-color-text-default);
1637
+ color: var(--dds-color-text-body);
1593
1638
  }
1594
1639
  .DescriptionList_group {
1595
1640
  margin: var(--dds-spacing-x2);
@@ -2004,7 +2049,6 @@
2004
2049
 
2005
2050
  /* src/components/Footer/Footer.module.css */
2006
2051
  .Footer_container {
2007
- background-color: var(--dds-color-brand-primary-default);
2008
2052
  padding-block-start: var(--dds-spacing-x3);
2009
2053
  padding-block-end: var(--dds-spacing-x6);
2010
2054
  @media only screen and (min-width: 960px) {
@@ -2407,7 +2451,7 @@
2407
2451
 
2408
2452
  /* src/components/List/List.module.css */
2409
2453
  .List_list {
2410
- color: var(--dds-color-text-default);
2454
+ color: var(--dds-color-text-body);
2411
2455
  margin: var(--dds-spacing-x1) 0;
2412
2456
  ul,
2413
2457
  ol {
@@ -2432,15 +2476,21 @@
2432
2476
  position: absolute;
2433
2477
  top: calc((2.5em / 2) - 0.5em);
2434
2478
  left: 0;
2435
- background-size: contain;
2436
- background-repeat: no-repeat;
2437
- background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A');
2479
+ background: var(--dds-color-text-body);
2480
+ -webkit-mask-size: 100%;
2481
+ mask-size: 100%;
2482
+ -webkit-mask-repeat: no-repeat;
2483
+ mask-repeat: no-repeat;
2484
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A');
2485
+ mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<circle cx="6.7085" cy="6.7085" r="2.625" fill="%230B0D0E"/>%0A</svg>%0A');
2438
2486
  }
2439
2487
  ul > li:before {
2440
- background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="3.04346" y="6.08691" width="7.30435" height="1.82609" fill="%230B0D0E"/>%0A</svg>%0A');
2488
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="3.04346" y="6.08691" width="7.30435" height="1.82609" fill="%230B0D0E"/>%0A</svg>%0A');
2489
+ mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<rect x="3.04346" y="6.08691" width="7.30435" height="1.82609" fill="%230B0D0E"/>%0A</svg>%0A');
2441
2490
  }
2442
2491
  ul > li > ul > li:before {
2443
- background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z" fill="%230B0D0E"/>%0A</svg>%0A');
2492
+ -webkit-mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z" fill="%230B0D0E"/>%0A</svg>%0A');
2493
+ mask-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M6.70817 9.33333C8.80225 9.33333 10.4998 7.50516 10.4998 5.25H2.9165C2.9165 7.50516 4.61409 9.33333 6.70817 9.33333Z" fill="%230B0D0E"/>%0A</svg>%0A');
2444
2494
  }
2445
2495
  }
2446
2496
  }
@@ -3187,7 +3237,6 @@
3187
3237
 
3188
3238
  /* src/components/SkipToContent/SkipToContent.module.css */
3189
3239
  .SkipToContent_wrapper {
3190
- background-color: var(--dds-color-surface-inverse-default);
3191
3240
  padding: var(--dds-spacing-x0-25);
3192
3241
  box-sizing: border-box;
3193
3242
  position: absolute;
@@ -3210,11 +3259,6 @@
3210
3259
  z-index: 250;
3211
3260
  opacity: 1;
3212
3261
  }
3213
- .SkipToContent_link,
3214
- .SkipToContent_link:hover {
3215
- text-decoration: none;
3216
- color: var(--dds-color-text-on-inverse);
3217
- }
3218
3262
 
3219
3263
  /* src/components/SplitButton/SplitButton.module.css */
3220
3264
  .SplitButton_container {