@norges-domstoler/dds-components 0.0.0-dev-20251111115604 → 0.0.0-dev-20251111141002

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 +57 -32
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +27 -27
  4. package/dist/index.d.ts +27 -27
  5. package/dist/index.js +65 -57
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +65 -57
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +5 -5
package/dist/index.css CHANGED
@@ -1507,6 +1507,10 @@
1507
1507
  --dds-input-default-width: 320px;
1508
1508
  --dds-input-default-width-xsmall: 210px;
1509
1509
  --dds-selection-control-height: 18px;
1510
+ --dds-spacing-xs-icon-text-gap: var(--dds-spacing-x0-25);
1511
+ --dds-spacing-sm-icon-text-gap: var(--dds-spacing-x0-25);
1512
+ --dds-spacing-md-icon-text-gap: var(--dds-spacing-x0-5);
1513
+ --dds-spacing-lg-icon-text-gap: var(--dds-spacing-x0-75);
1510
1514
  --dds-transition-duration-surface-move: 0.5s;
1511
1515
  }
1512
1516
  .ThemeProvider_global-styles {
@@ -1672,7 +1676,7 @@
1672
1676
  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
1673
1677
  }
1674
1678
  &.Button_with-text-and-icon {
1675
- gap: var(--dds-spacing-x0-125);
1679
+ gap: var(--dds-spacing-xs-icon-text-gap);
1676
1680
  &.Button_with-icon-left {
1677
1681
  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
1678
1682
  }
@@ -1693,7 +1697,7 @@
1693
1697
  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
1694
1698
  }
1695
1699
  &.Button_with-text-and-icon {
1696
- gap: var(--dds-spacing-x0-25);
1700
+ gap: var(--dds-spacing-sm-icon-text-gap);
1697
1701
  &.Button_with-icon-left {
1698
1702
  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5);
1699
1703
  }
@@ -1714,7 +1718,7 @@
1714
1718
  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
1715
1719
  }
1716
1720
  &.Button_with-text-and-icon {
1717
- gap: var(--dds-spacing-x0-5);
1721
+ gap: var(--dds-spacing-md-icon-text-gap);
1718
1722
  &.Button_with-icon-left {
1719
1723
  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
1720
1724
  }
@@ -1735,7 +1739,7 @@
1735
1739
  padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5);
1736
1740
  }
1737
1741
  &.Button_with-text-and-icon {
1738
- gap: var(--dds-spacing-x0-75);
1742
+ gap: var(--dds-spacing-lg-icon-text-gap);
1739
1743
  &.Button_with-icon-left {
1740
1744
  padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
1741
1745
  }
@@ -2333,10 +2337,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2333
2337
  .DateInput_clear-button--inactive {
2334
2338
  visibility: hidden;
2335
2339
  }
2336
- .DateInput_icon,
2337
- .DateInput_popover-button {
2338
- margin-block: -3px;
2339
- }
2340
2340
  .DateInput_icon-wrapper--disabled,
2341
2341
  .DateInput_popover-button:disabled {
2342
2342
  color: var(--dds-color-icon-subtle);
@@ -2347,7 +2347,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2347
2347
  }
2348
2348
  .DateInput_popover-button {
2349
2349
  padding: 1px;
2350
- margin-inline-start: -1px;
2350
+ margin-inline-start: -2px;
2351
2351
  }
2352
2352
  .DateInput_popover {
2353
2353
  z-index: var(--dds-zindex-popover);
@@ -2540,6 +2540,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2540
2540
  border-color: 1px solid var(--dds-color-border-default);
2541
2541
  }
2542
2542
  }
2543
+ :where(.Input_input--large) {
2544
+ padding: var(--dds-spacing-x1) var(--dds-spacing-x0-75);
2545
+ }
2543
2546
  :where(.Input_input--medium) {
2544
2547
  padding: var(--dds-spacing-x0-75);
2545
2548
  }
@@ -2549,16 +2552,52 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2549
2552
  :where(.Input_input--xsmall) {
2550
2553
  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
2551
2554
  }
2555
+ .Input_input-with-icon--large {
2556
+ padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-lg-icon-text-gap));
2557
+ }
2558
+ .Input_input-with-icon--medium {
2559
+ padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-md-icon-text-gap));
2560
+ }
2561
+ .Input_input-with-icon--small {
2562
+ padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-sm-icon-text-gap));
2563
+ }
2564
+ .Input_input-with-icon--xsmall {
2565
+ padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-xs-icon-text-gap));
2566
+ }
2567
+ .Input_input-with-el-right--large {
2568
+ padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
2569
+ }
2570
+ .Input_input-with-el-right--medium {
2571
+ padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
2572
+ }
2573
+ .Input_input-with-el-right--small {
2574
+ padding-inline-end: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
2575
+ }
2576
+ .Input_input-with-el-right--xsmall {
2577
+ padding-inline-end: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-xs-icon-text-gap));
2578
+ }
2552
2579
  :where(.Input_input--with-affix) {
2553
2580
  gap: var(--dds-spacing-x1);
2554
2581
  }
2555
- :where(.Input_input-group__absolute-element) {
2582
+ :where(.Input_input-group__absolute-el) {
2556
2583
  position: absolute;
2557
2584
  top: 50%;
2558
2585
  transform: translateY(-50%);
2559
2586
  z-index: var(--dds-zindex-absolute-element);
2560
2587
  color: var(--dds-color-icon-default);
2561
2588
  }
2589
+ :where(.Input_input-group__absolute-el--large) {
2590
+ left: var(--dds-spacing-x0-75);
2591
+ }
2592
+ :where(.Input_input-group__absolute-el--medium) {
2593
+ left: var(--dds-spacing-x0-75);
2594
+ }
2595
+ :where(.Input_input-group__absolute-el--small) {
2596
+ left: var(--dds-spacing-x0-75);
2597
+ }
2598
+ :where(.Input_input-group__absolute-el--xsmall) {
2599
+ left: var(--dds-spacing-x0-5);
2600
+ }
2562
2601
 
2563
2602
  /* src/components/DescriptionList/DescriptionList.module.css */
2564
2603
  .DescriptionList_list {
@@ -3664,9 +3703,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3664
3703
  -webkit-appearance: none;
3665
3704
  }
3666
3705
  }
3667
- .Search_search-icon {
3668
- left: var(--dds-spacing-x0-75);
3669
- }
3670
3706
  .Search_clear-button {
3671
3707
  right: var(--dds-spacing-x1);
3672
3708
  }
@@ -3935,11 +3971,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3935
3971
  }
3936
3972
  .Tabs_tab--medium--row {
3937
3973
  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-5);
3938
- gap: var(--dds-spacing-x0-5);
3974
+ gap: var(--dds-spacing-md-icon-text-gap);
3939
3975
  }
3940
3976
  .Tabs_tab--small--row {
3941
3977
  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
3942
- gap: var(--dds-spacing-x0-125);
3978
+ gap: var(--dds-spacing-sm-icon-text-gap);
3943
3979
  }
3944
3980
  .Tabs_tab--medium--column {
3945
3981
  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
@@ -4048,17 +4084,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
4048
4084
  .TextInput_container--disabled {
4049
4085
  color: var(--dds-color-text-subtle);
4050
4086
  }
4051
- .TextInput_input {
4052
- &.TextInput_with-icon--medium {
4053
- padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
4054
- }
4055
- &.TextInput_with-icon--small {
4056
- padding-left: calc(var(--dds-spacing-x0-75) + var(--dds-icon-size-medium) + var(--dds-spacing-x0-5));
4057
- }
4058
- &.TextInput_with-icon--xsmall {
4059
- padding-left: calc(var(--dds-spacing-x0-5) + var(--dds-icon-size-small) + var(--dds-spacing-x0-25));
4060
- }
4061
- }
4062
4087
  .TextInput_input--extended {
4063
4088
  width: 100%;
4064
4089
  }
@@ -4298,7 +4323,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
4298
4323
  }
4299
4324
  .ToggleBar_content--large--with-text {
4300
4325
  padding: var(--dds-spacing-x1) var(--dds-spacing-x2);
4301
- gap: var(--dds-spacing-x0-5);
4326
+ gap: var(--dds-spacing-lg-icon-text-gap);
4302
4327
  }
4303
4328
  .ToggleBar_content--medium--just-icon {
4304
4329
  padding: var(--dds-spacing-x0-75);
@@ -4308,7 +4333,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
4308
4333
  }
4309
4334
  .ToggleBar_content--medium--with-text {
4310
4335
  padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1-5);
4311
- gap: var(--dds-spacing-x0-75);
4336
+ gap: var(--dds-spacing-md-icon-text-gap);
4312
4337
  }
4313
4338
  .ToggleBar_content--small--just-icon {
4314
4339
  padding: var(--dds-spacing-x0-5);
@@ -4318,7 +4343,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
4318
4343
  }
4319
4344
  .ToggleBar_content--small--with-text {
4320
4345
  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
4321
- gap: var(--dds-spacing-x0-5);
4346
+ gap: var(--dds-spacing-sm-icon-text-gap);
4322
4347
  }
4323
4348
  .ToggleBar_content--xsmall--just-icon {
4324
4349
  padding: var(--dds-spacing-x0-25);
@@ -4328,7 +4353,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
4328
4353
  }
4329
4354
  .ToggleBar_content--xsmall--with-text {
4330
4355
  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-75);
4331
- gap: var(--dds-spacing-x0-5);
4356
+ gap: var(--dds-spacing-xs-icon-text-gap);
4332
4357
  }
4333
4358
  .ToggleBar_label {
4334
4359
  &:hover .ToggleBar_content {
@@ -4382,11 +4407,11 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
4382
4407
  }
4383
4408
  }
4384
4409
  .ToggleButton_small {
4385
- gap: var(--dds-spacing-x0-25);
4410
+ gap: var(--dds-spacing-sm-icon-text-gap);
4386
4411
  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
4387
4412
  }
4388
4413
  .ToggleButton_xsmall {
4389
- gap: var(--dds-spacing-x0-125);
4414
+ gap: var(--dds-spacing-xs-icon-text-gap);
4390
4415
  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
4391
4416
  }
4392
4417
  .ToggleButton_content--with-icon {