@norges-domstoler/dds-components 23.0.1 → 23.1.1

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 +186 -164
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +375 -328
  4. package/dist/index.d.ts +375 -328
  5. package/dist/index.js +1479 -1380
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +1297 -1198
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +17 -17
package/dist/index.css CHANGED
@@ -535,11 +535,11 @@
535
535
  overflow-y: auto;
536
536
  }
537
537
  .utilStyles_visibility-transition {
538
- --dds-visiblity-transition: visibility 0.4s;
538
+ --dds-visibility-transition: visibility 0.4s;
539
539
  --dds-opacity-transition: opacity var(--dds-motion-surface);
540
540
  opacity: 0;
541
541
  @media (prefers-reduced-motion: no-preference) {
542
- transition: var(--dds-visiblity-transition), var(--dds-opacity-transition);
542
+ transition: var(--dds-visibility-transition), var(--dds-opacity-transition);
543
543
  }
544
544
  }
545
545
  .utilStyles_visibility-transition--open {
@@ -704,6 +704,14 @@
704
704
  --dds-r-m-b: var(--dds-r-xs-m-b);
705
705
  margin-block: var(--dds-r-m-b, initial);
706
706
  }
707
+ .layout_dds-bleed-m-i {
708
+ --dds-r-bleed-m-i: var(--dds-r-bleed-xs-m-i);
709
+ margin-inline: var(--dds-r-bleed-m-i, initial);
710
+ }
711
+ .layout_dds-bleed-m-b {
712
+ --dds-r-bleed-m-b: var(--dds-r-bleed-xs-m-b);
713
+ margin-block: var(--dds-r-bleed-m-b, initial);
714
+ }
707
715
  .layout_dds-h {
708
716
  --dds-r-h: var(--dds-r-xs-h);
709
717
  height: var(--dds-r-h, initial);
@@ -840,6 +848,12 @@
840
848
  .layout_dds-m-b {
841
849
  --dds-r-m-b: var(--dds-r-xs-m-b);
842
850
  }
851
+ .layout_dds-bleed-m-i {
852
+ --dds-r-bleed-m-i: var(--dds-r-bleed-xs-m-i);
853
+ }
854
+ .layout_dds-bleed-m-b {
855
+ --dds-r-bleed-m-b: var(--dds-r-bleed-xs-m-b);
856
+ }
843
857
  .layout_dds-h {
844
858
  --dds-r-h: var(--dds-r-xs-h);
845
859
  }
@@ -947,6 +961,12 @@
947
961
  .layout_dds-m-b {
948
962
  --dds-r-m-b: var(--dds-r-sm-m-b);
949
963
  }
964
+ .layout_dds-bleed-m-i {
965
+ --dds-r-bleed-m-i: var(--dds-r-bleed-sm-m-i);
966
+ }
967
+ .layout_dds-bleed-m-b {
968
+ --dds-r-bleed-m-b: var(--dds-r-bleed-sm-m-b);
969
+ }
950
970
  .layout_dds-h {
951
971
  --dds-r-h: var(--dds-r-sm-h);
952
972
  }
@@ -1054,6 +1074,12 @@
1054
1074
  .layout_dds-m-b {
1055
1075
  --dds-r-m-b: var(--dds-r-md-m-b);
1056
1076
  }
1077
+ .layout_dds-bleed-m-i {
1078
+ --dds-r-bleed-m-i: var(--dds-r-bleed-md-m-i);
1079
+ }
1080
+ .layout_dds-bleed-m-b {
1081
+ --dds-r-bleed-m-b: var(--dds-r-bleed-md-m-b);
1082
+ }
1057
1083
  .layout_dds-h {
1058
1084
  --dds-r-h: var(--dds-r-md-h);
1059
1085
  }
@@ -1161,6 +1187,12 @@
1161
1187
  .layout_dds-m-b {
1162
1188
  --dds-r-m-b: var(--dds-r-lg-m-b);
1163
1189
  }
1190
+ .layout_dds-bleed-m-i {
1191
+ --dds-r-bleed-m-i: var(--dds-r-bleed-lg-m-i);
1192
+ }
1193
+ .layout_dds-bleed-m-b {
1194
+ --dds-r-bleed-m-b: var(--dds-r-bleed-lg-m-b);
1195
+ }
1164
1196
  .layout_dds-h {
1165
1197
  --dds-r-h: var(--dds-r-lg-h);
1166
1198
  }
@@ -1268,6 +1300,12 @@
1268
1300
  .layout_dds-m-b {
1269
1301
  --dds-r-m-b: var(--dds-r-xl-m-b);
1270
1302
  }
1303
+ .layout_dds-bleed-m-i {
1304
+ --dds-r-bleed-m-i: var(--dds-r-bleed-xl-m-i);
1305
+ }
1306
+ .layout_dds-bleed-m-b {
1307
+ --dds-r-bleed-m-b: var(--dds-r-bleed-xl-m-b);
1308
+ }
1271
1309
  .layout_dds-h {
1272
1310
  --dds-r-h: var(--dds-r-xl-h);
1273
1311
  }
@@ -1849,75 +1887,95 @@
1849
1887
  }
1850
1888
  }
1851
1889
  .Button_button--xsmall {
1890
+ min-height: var(--dds-size-height-input-xsmall);
1891
+ padding-block: var(--dds-spacing-x0-125);
1852
1892
  &.Button_just-text {
1853
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
1893
+ padding-inline: var(--dds-spacing-x0-5);
1854
1894
  }
1855
1895
  &.Button_with-text-and-icon {
1856
1896
  gap: var(--dds-spacing-xs-icon-text-gap);
1857
1897
  &.Button_with-icon-left {
1858
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
1898
+ padding-inline: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
1859
1899
  }
1860
1900
  &.Button_with-icon-right {
1861
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
1901
+ padding-inline: var(--dds-spacing-x0-5) var(--dds-spacing-x0-25);
1862
1902
  }
1863
1903
  }
1864
1904
  &.Button_just-icon,
1865
1905
  &.Button_button--is-loading.Button_no-content {
1866
- padding: var(--dds-spacing-x0-25);
1906
+ padding-inline: var(--dds-spacing-x0-25);
1907
+ }
1908
+ &.Button_clear {
1909
+ padding: var(--dds-spacing-x0-125);
1867
1910
  }
1868
1911
  }
1869
1912
  .Button_button--small {
1913
+ min-height: var(--dds-size-height-input-small);
1914
+ padding-block: var(--dds-spacing-x0-25);
1870
1915
  &.Button_just-text {
1871
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
1916
+ padding-inline: var(--dds-spacing-x0-75);
1872
1917
  }
1873
1918
  &.Button_with-text-and-icon {
1874
1919
  gap: var(--dds-spacing-sm-icon-text-gap);
1875
1920
  &.Button_with-icon-left {
1876
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5);
1921
+ padding-inline: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
1877
1922
  }
1878
1923
  &.Button_with-icon-right {
1879
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
1924
+ padding-inline: var(--dds-spacing-x0-75) var(--dds-spacing-x0-5);
1880
1925
  }
1881
1926
  }
1882
1927
  &.Button_just-icon,
1883
1928
  &.Button_button--is-loading.Button_no-content {
1884
- padding: var(--dds-spacing-x0-5);
1929
+ padding-inline: var(--dds-spacing-x0-5);
1930
+ }
1931
+ &.Button_clear {
1932
+ padding: var(--dds-spacing-x0-25);
1885
1933
  }
1886
1934
  }
1887
1935
  .Button_button--medium {
1936
+ min-height: var(--dds-size-height-input-medium);
1937
+ padding-block: var(--dds-spacing-x0-5);
1888
1938
  &.Button_just-text {
1889
- padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
1939
+ padding-inline: var(--dds-spacing-x1);
1890
1940
  }
1891
1941
  &.Button_with-text-and-icon {
1892
1942
  gap: var(--dds-spacing-md-icon-text-gap);
1893
1943
  &.Button_with-icon-left {
1894
- padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
1944
+ padding-inline: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
1895
1945
  }
1896
1946
  &.Button_with-icon-right {
1897
- padding: var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x1);
1947
+ padding-inline: var(--dds-spacing-x1) var(--dds-spacing-x0-75);
1898
1948
  }
1899
1949
  }
1900
1950
  &.Button_just-icon,
1901
1951
  &.Button_button--is-loading.Button_no-content {
1902
- padding: var(--dds-spacing-x0-75);
1952
+ padding-inline: var(--dds-spacing-x0-75);
1953
+ }
1954
+ &.Button_clear {
1955
+ padding: var(--dds-spacing-x0-5);
1903
1956
  }
1904
1957
  }
1905
1958
  .Button_button--large {
1959
+ min-height: var(--dds-size-height-input-large);
1960
+ padding-block: var(--dds-spacing-x0-75);
1906
1961
  &.Button_just-text {
1907
- padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5);
1962
+ padding-inline: var(--dds-spacing-x1-5);
1908
1963
  }
1909
1964
  &.Button_with-text-and-icon {
1910
1965
  gap: var(--dds-spacing-lg-icon-text-gap);
1911
1966
  &.Button_with-icon-left {
1912
- padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
1967
+ padding-inline: var(--dds-spacing-x1) var(--dds-spacing-x1-5);
1913
1968
  }
1914
1969
  &.Button_with-icon-right {
1915
- padding: var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1-5);
1970
+ padding-inline: var(--dds-spacing-x1-5) var(--dds-spacing-x1);
1916
1971
  }
1917
1972
  }
1918
1973
  &.Button_just-icon,
1919
1974
  &.Button_button--is-loading.Button_no-content {
1920
- padding: var(--dds-spacing-x1);
1975
+ padding-inline: var(--dds-spacing-x1);
1976
+ }
1977
+ &.Button_clear {
1978
+ padding: var(--dds-spacing-x0-75);
1921
1979
  }
1922
1980
  }
1923
1981
  .Button_spinner-wrapper--absolute {
@@ -2485,36 +2543,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2485
2543
  border-radius: var(--dds-border-radius-rounded);
2486
2544
  }
2487
2545
 
2488
- /* src/components/Chip/Chip.module.css */
2489
- .Chip_container {
2490
- border: 1px solid var(--dds-color-border-subtle);
2491
- border-radius: var(--dds-border-radius-chip);
2492
- background-color: var(--dds-color-surface-subtle);
2493
- }
2494
-
2495
- /* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
2496
- .InlineIconButton_button {
2497
- display: inline-flex;
2498
- border-radius: var(--dds-border-radius-button);
2499
- color: var(--dds-color-icon-default);
2500
- &:hover:not(:disabled) {
2501
- background-color: var(--dds-color-surface-hover-default);
2502
- color: var(--dds-color-icon-action-hover);
2503
- }
2504
- &:not(:focus-visible) {
2505
- outline: none;
2506
- }
2507
- &:disabled {
2508
- cursor: not-allowed;
2509
- }
2510
- @media (prefers-reduced-motion: no-preference) {
2511
- transition:
2512
- background-color var(--dds-motion-micro-state),
2513
- color var(--dds-motion-micro-state),
2514
- var(--dds-focus-transition);
2515
- }
2516
- }
2517
-
2518
2546
  /* src/components/CookieBanner/CookieBanner.module.css */
2519
2547
  .CookieBanner_container:focus-visible {
2520
2548
  outline: none;
@@ -2531,10 +2559,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2531
2559
  font-family: var(--dds-font-family-monospace);
2532
2560
  }
2533
2561
  .DateInput_segment {
2534
- padding: 0 0.05rem;
2535
- display: block;
2536
- width: -moz-max-content;
2537
- width: max-content;
2538
2562
  font-variant-numeric: tabular-nums;
2539
2563
  outline: none;
2540
2564
  font-family: var(--dds-font-family-monospace);
@@ -2557,9 +2581,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2557
2581
  height: 0;
2558
2582
  width: 0;
2559
2583
  }
2560
- .DateInput_clear-button--inactive {
2561
- visibility: hidden;
2562
- }
2563
2584
  .DateInput_icon-wrapper--disabled,
2564
2585
  .DateInput_popover-button:disabled {
2565
2586
  color: var(--dds-color-icon-subtle);
@@ -2628,23 +2649,49 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2628
2649
  color: var(--dds-color-text-default);
2629
2650
  }
2630
2651
  }
2631
- .DateInput_calendar__cell-button--selected {
2632
- background-color: var(--dds-color-surface-action-selected);
2633
- border-color: var(--dds-color-surface-action-selected);
2634
- color: var(--dds-color-text-on-action);
2635
- }
2636
- .DateInput_calendar__cell-button--unavailable {
2652
+ .DateInput_calendar__cell-button--unavailable,
2653
+ .DateInput_calendar__cell-button--unavailable:hover {
2637
2654
  background-color: var(--dds-color-surface-field-disabled);
2638
2655
  border-color: var(--dds-color-surface-field-disabled);
2639
2656
  color: var(--dds-color-text-subtle);
2640
2657
  cursor: not-allowed;
2641
2658
  text-decoration: line-through;
2642
2659
  }
2660
+ .DateInput_calendar__cell-button--selected,
2661
+ .DateInput_calendar__cell-button--selected:hover {
2662
+ background-color: var(--dds-color-surface-action-selected);
2663
+ border-color: var(--dds-color-surface-action-selected);
2664
+ color: var(--dds-color-text-on-action);
2665
+ font-weight: var(--dds-font-weight-bold);
2666
+ }
2643
2667
  .DateInput_calendar__cell-button--unavailable--today {
2644
- border-color: var(--dds-color-surface-field-disabled);
2668
+ border-color: var(--dds-color-border-default);
2645
2669
  text-decoration: underline line-through;
2646
2670
  }
2647
2671
 
2672
+ /* src/components/helpers/InlineIconButton/InlineIconButton.module.css */
2673
+ .InlineIconButton_button {
2674
+ display: inline-flex;
2675
+ border-radius: var(--dds-border-radius-button);
2676
+ color: var(--dds-color-icon-default);
2677
+ &:hover:not(:disabled) {
2678
+ background-color: var(--dds-color-surface-hover-default);
2679
+ color: var(--dds-color-icon-action-hover);
2680
+ }
2681
+ &:not(:focus-visible) {
2682
+ outline: none;
2683
+ }
2684
+ &:disabled {
2685
+ cursor: not-allowed;
2686
+ }
2687
+ @media (prefers-reduced-motion: no-preference) {
2688
+ transition:
2689
+ background-color var(--dds-motion-micro-state),
2690
+ color var(--dds-motion-micro-state),
2691
+ var(--dds-focus-transition);
2692
+ }
2693
+ }
2694
+
2648
2695
  /* src/components/helpers/Input/Input.module.css */
2649
2696
  .Input_container {
2650
2697
  position: relative;
@@ -2655,10 +2702,18 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2655
2702
  --dds-input-absolute-el-left-small: var(--dds-spacing-x0-5);
2656
2703
  --dds-input-absolute-el-left-medium: var(--dds-spacing-x0-75);
2657
2704
  --dds-input-absolute-el-left-large: var(--dds-spacing-x0-75);
2705
+ --dds-input-btn-right: var(--dds-spacing-x0-25);
2706
+ --dds-input-btn-right-padding-xsmall: var(--dds-spacing-x0-125);
2707
+ --dds-input-btn-right-padding-small: var(--dds-spacing-x0-25);
2708
+ --dds-input-btn-right-padding-medium: var(--dds-spacing-x0-5);
2709
+ --dds-input-btn-right-padding-large: var(--dds-spacing-x0-75);
2658
2710
  --dds-input-absolute-el-right-xsmall: var(--dds-spacing-x0-25);
2659
2711
  --dds-input-absolute-el-right-small: var(--dds-spacing-x0-5);
2660
2712
  --dds-input-absolute-el-right-medium: var(--dds-spacing-x0-75);
2661
2713
  --dds-input-absolute-el-right-large: var(--dds-spacing-x0-75);
2714
+ & > svg {
2715
+ pointer-events: none;
2716
+ }
2662
2717
  }
2663
2718
  :where(.Input_input) {
2664
2719
  position: relative;
@@ -2752,53 +2807,96 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2752
2807
  }
2753
2808
  }
2754
2809
  :where(.Input_input--large) {
2755
- padding: var(--dds-spacing-x1) var(--dds-spacing-x0-75);
2810
+ padding: var(--dds-spacing-x0-75);
2811
+ height: var(--dds-size-height-input-large);
2756
2812
  }
2757
2813
  :where(.Input_input--medium) {
2758
- padding: var(--dds-spacing-x0-75);
2814
+ padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
2815
+ height: var(--dds-size-height-input-medium);
2759
2816
  }
2760
2817
  :where(.Input_input--small) {
2761
- padding: var(--dds-spacing-x0-5);
2818
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
2819
+ height: var(--dds-size-height-input-small);
2762
2820
  }
2763
2821
  :where(.Input_input--xsmall) {
2764
- padding: var(--dds-spacing-x0-25);
2822
+ padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25);
2823
+ height: var(--dds-size-height-input-xsmall);
2765
2824
  }
2766
- .Input_input-with-icon--large {
2825
+ :where(.Input_input-with-icon--large) {
2767
2826
  padding-left: calc(var(--dds-input-absolute-el-left-large) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
2768
2827
  }
2769
- .Input_input-with-icon--medium {
2828
+ :where(.Input_input-with-icon--medium) {
2770
2829
  padding-left: calc(var(--dds-input-absolute-el-left-medium) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
2771
2830
  }
2772
- .Input_input-with-icon--small {
2831
+ :where(.Input_input-with-icon--small) {
2773
2832
  padding-left: calc(var(--dds-input-absolute-el-left-small) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
2774
2833
  }
2775
- .Input_input-with-icon--xsmall {
2834
+ :where(.Input_input-with-icon--xsmall) {
2776
2835
  padding-left: calc(var(--dds-input-absolute-el-left-xsmall) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
2777
2836
  }
2778
- .Input_input-with-el-right--large {
2779
- padding-inline-end: calc(var(--dds-input-absolute-el-right-large) + var(--dds-size-icon-component) + var(--dds-spacing-lg-icon-text-gap));
2837
+ :where(.Input_input-with-el-right--large) {
2838
+ padding-inline-end: calc(var(--dds-input-absolute-el-right-large) + var(--dds-size-icon-component));
2839
+ }
2840
+ :where(.Input_input-with-el-right--medium) {
2841
+ padding-inline-end: calc(var(--dds-input-absolute-el-right-medium) + var(--dds-size-icon-component));
2842
+ }
2843
+ :where(.Input_input-with-el-right--small) {
2844
+ padding-inline-end: calc(var(--dds-input-absolute-el-right-small) + var(--dds-size-icon-component));
2845
+ }
2846
+ :where(.Input_input-with-el-right--xsmall) {
2847
+ padding-inline-end: calc(var(--dds-input-absolute-el-right-xsmall) + var(--dds-size-icon-component));
2848
+ }
2849
+ :where(.Input_input-with-btn-right--large) {
2850
+ padding-inline-end: calc(var(--dds-input-btn-right) + var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-large));
2851
+ }
2852
+ :where(.Input_input-with-btn-right--medium) {
2853
+ padding-inline-end: calc(var(--dds-input-btn-right) + var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-medium));
2780
2854
  }
2781
- .Input_input-with-el-right--medium {
2782
- padding-inline-end: calc(var(--dds-input-absolute-el-right-medium) + var(--dds-size-icon-component) + var(--dds-spacing-md-icon-text-gap));
2855
+ :where(.Input_input-with-btn-right--small) {
2856
+ padding-inline-end: calc(var(--dds-input-btn-right) + var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-small));
2783
2857
  }
2784
- .Input_input-with-el-right--small {
2785
- padding-inline-end: calc(var(--dds-input-absolute-el-right-small) + var(--dds-size-icon-component) + var(--dds-spacing-sm-icon-text-gap));
2858
+ :where(.Input_input-with-btn-right--xsmall) {
2859
+ padding-inline-end: calc(var(--dds-input-btn-right) + var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-xsmall));
2786
2860
  }
2787
- .Input_input-with-el-right--xsmall {
2788
- padding-inline-end: calc(var(--dds-input-absolute-el-right-xsmall) + var(--dds-size-icon-component) + var(--dds-spacing-xs-icon-text-gap));
2861
+ :where(.Input_input-with-icon-and-button-right--large) {
2862
+ padding-inline-end: calc(var(--dds-input-absolute-el-right-large) + 2 * var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-large));
2789
2863
  }
2790
- .Input_input-group__absolute-el-right--large {
2864
+ :where(.Input_input-with-icon-and-button-right--medium) {
2865
+ padding-inline-end: calc(var(--dds-input-absolute-el-right-medium) + 2 * var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-medium));
2866
+ }
2867
+ :where(.Input_input-with-icon-and-button-right--small) {
2868
+ padding-inline-end: calc(var(--dds-input-absolute-el-right-small) + 2 * var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-small));
2869
+ }
2870
+ :where(.Input_input-with-icon-and-button-right--xsmall) {
2871
+ padding-inline-end: calc(var(--dds-input-absolute-el-right-xsmall) + 2 * var(--dds-size-icon-component) + 2 * var(--dds-input-btn-right-padding-xsmall));
2872
+ }
2873
+ :where(.Input_input-group__absolute-el-right--large) {
2791
2874
  right: var(--dds-input-absolute-el-left-large);
2792
2875
  }
2793
- .Input_input-group__absolute-el-right--medium {
2876
+ :where(.Input_input-group__absolute-el-right--medium) {
2794
2877
  right: var(--dds-input-absolute-el-left-medium);
2795
2878
  }
2796
- .Input_input-group__absolute-el-right--small {
2879
+ :where(.Input_input-group__absolute-el-right--small) {
2797
2880
  right: var(--dds-input-absolute-el-left-small);
2798
2881
  }
2799
- .Input_input-group__absolute-el-right--xsmall {
2882
+ :where(.Input_input-group__absolute-el-right--xsmall) {
2800
2883
  right: var(--dds-input-absolute-el-left-xsmall);
2801
2884
  }
2885
+ :where(.Input_input-group__btn-right) {
2886
+ right: var(--dds-input-btn-right);
2887
+ }
2888
+ :where(.Input_input-group__btn-right-with-right-icon--xsmall) {
2889
+ right: calc(var(--dds-input-absolute-el-right-xsmall) + var(--dds-size-icon-component));
2890
+ }
2891
+ :where(.Input_input-group__btn-right-with-right-icon--small) {
2892
+ right: calc(var(--dds-input-absolute-el-right-small) + var(--dds-size-icon-component));
2893
+ }
2894
+ :where(.Input_input-group__btn-right-with-right-icon--medium) {
2895
+ right: calc(var(--dds-input-absolute-el-right-medium) + var(--dds-size-icon-component));
2896
+ }
2897
+ :where(.Input_input-group__btn-right-with-right-icon--large) {
2898
+ right: calc(var(--dds-input-absolute-el-right-large) + var(--dds-size-icon-component));
2899
+ }
2802
2900
  :where(.Input_input--with-affix) {
2803
2901
  gap: var(--dds-spacing-x1);
2804
2902
  }
@@ -3438,7 +3536,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3438
3536
  /* src/components/InlineEdit/InlineEdit.module.css */
3439
3537
  .InlineEdit_inline-input {
3440
3538
  width: 100%;
3441
- padding: var(--dds-spacing-x0-25);
3442
3539
  border-width: 1px;
3443
3540
  border-color: transparent;
3444
3541
  background-color: transparent;
@@ -3458,13 +3555,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3458
3555
  -moz-appearance: none;
3459
3556
  appearance: none;
3460
3557
  text-overflow: ellipsis;
3461
- width: 100%;
3462
- padding-right: var(--dds-spacing-x1-5);
3463
3558
  cursor: pointer;
3464
3559
  }
3465
- .InlineEdit_inline-select--with-clear-button {
3466
- padding-right: var(--dds-spacing-x3);
3467
- }
3468
3560
  .InlineEdit_inline-input:hover:enabled:-moz-read-write:not(:focus) {
3469
3561
  border-color: transparent;
3470
3562
  box-shadow: none;
@@ -3480,25 +3572,14 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3480
3572
  border-color: var(--dds-color-border-danger);
3481
3573
  box-shadow: 0 0 0 1px var(--dds-color-border-danger);
3482
3574
  }
3483
- .InlineEdit_inline-input--with-icon {
3484
- padding-left: var(--dds-spacing-x2);
3485
- }
3486
3575
  .InlineEdit_inline-textarea {
3487
3576
  resize: vertical;
3488
- }
3489
- .InlineEdit_edit-icon {
3490
- left: var(--dds-spacing-x0-5);
3491
- pointer-events: none;
3492
- z-index: var(--dds-zindex-absolute-element);
3577
+ height: initial;
3493
3578
  }
3494
3579
  .InlineEdit_edit-icon-textarea {
3495
3580
  position: absolute;
3496
3581
  top: var(--dds-spacing-x0-25);
3497
3582
  }
3498
- .InlineEdit_chevron {
3499
- right: var(--dds-spacing-x0-25);
3500
- pointer-events: none;
3501
- }
3502
3583
  .InlineEdit_clear-button {
3503
3584
  right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-small));
3504
3585
  }
@@ -3680,9 +3761,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3680
3761
  display: inline-grid;
3681
3762
  align-content: center;
3682
3763
  }
3683
- .Pagination_list__item--hidden {
3684
- visibility: hidden;
3685
- }
3686
3764
  .Pagination_indicators {
3687
3765
  grid-auto-flow: column;
3688
3766
  }
@@ -3734,6 +3812,7 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3734
3812
  }
3735
3813
  }
3736
3814
  &:disabled {
3815
+ opacity: 1;
3737
3816
  cursor: not-allowed;
3738
3817
  color: var(--dds-color-text-subtle);
3739
3818
  background-color: var(--dds-color-surface-field-disabled);
@@ -3766,43 +3845,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3766
3845
  color: var(--dds-color-icon-subtle);
3767
3846
  }
3768
3847
  }
3769
- .NativeSelect_select--xsmall {
3770
- padding-right: calc(var(--dds-spacing-x0-25) + var(--dds-size-icon-component));
3771
- }
3772
- .NativeSelect_select--small {
3773
- padding-right: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component));
3774
- }
3775
- .NativeSelect_select--medium {
3776
- padding-right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component));
3777
- }
3778
3848
  .NativeSelect_select--multiple {
3779
3849
  padding-right: 0;
3780
3850
  &.NativeSelect_select--readonly option {
3781
3851
  background-color: var(--dds-color-surface-field-disabled);
3782
3852
  }
3783
3853
  }
3784
- .NativeSelect_select--with-clear-button-medium {
3785
- padding-right: calc(var(--dds-spacing-x0-75) + 2 * var(--dds-size-icon-component));
3786
- }
3787
- .NativeSelect_select--with-clear-button-small {
3788
- padding-right: calc(var(--dds-spacing-x0-5) + 2 * var(--dds-size-icon-component));
3789
- }
3790
- .NativeSelect_select--with-clear-button-xsmall {
3791
- padding-right: calc(var(--dds-spacing-x0-25) + 2 * var(--dds-size-icon-component));
3792
- }
3793
- .NativeSelect_icon {
3794
- align-self: center;
3795
- pointer-events: none;
3796
- }
3797
- .NativeSelect_clear-button--xsmall {
3798
- right: calc(var(--dds-spacing-x0-25) + var(--dds-size-icon-component));
3799
- }
3800
- .NativeSelect_clear-button--small {
3801
- right: calc(var(--dds-spacing-x0-5) + var(--dds-size-icon-component));
3802
- }
3803
- .NativeSelect_clear-button--medium {
3804
- right: calc(var(--dds-spacing-x0-75) + var(--dds-size-icon-component));
3805
- }
3806
3854
 
3807
3855
  /* src/components/PhoneInput/PhoneInput.module.css */
3808
3856
  .PhoneInput_inputs-container {
@@ -3886,6 +3934,9 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3886
3934
  .PhoneInput_calling-code {
3887
3935
  left: var(--dds-spacing-x0-5);
3888
3936
  }
3937
+ .PhoneInput_calling-code--disabled {
3938
+ color: var(--dds-color-text-subtle);
3939
+ }
3889
3940
 
3890
3941
  /* src/components/Popover/Popover.module.css */
3891
3942
  .Popover_container {
@@ -4318,15 +4369,12 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
4318
4369
  grid-auto-columns: 1fr;
4319
4370
  }
4320
4371
  .ToggleBar_content {
4321
- display: flex;
4322
- justify-content: center;
4323
- align-items: center;
4324
4372
  word-break: break-word;
4325
- height: 100%;
4326
4373
  box-sizing: border-box;
4327
4374
  cursor: pointer;
4328
4375
  background-color: var(--dds-color-surface-default);
4329
4376
  border: 1px solid;
4377
+ height: 100%;
4330
4378
  @media (prefers-reduced-motion: no-preference) {
4331
4379
  transition:
4332
4380
  border-color var(--dds-motion-micro-state),
@@ -4385,18 +4433,8 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
4385
4433
 
4386
4434
  /* src/components/ToggleButton/ToggleButton.module.css */
4387
4435
  .ToggleButton_content {
4388
- display: flex;
4389
- align-items: center;
4390
- width: 100%;
4391
- height: 100%;
4392
4436
  box-sizing: border-box;
4393
4437
  cursor: pointer;
4394
- width: -moz-fit-content;
4395
- width: fit-content;
4396
- border: 1px solid var(--dds-color-border-default);
4397
- border-radius: var(--dds-border-radius-rounded);
4398
- background-color: var(--dds-color-surface-default);
4399
- color: var(--dds-color-text-default);
4400
4438
  @media (prefers-reduced-motion: no-preference) {
4401
4439
  transition:
4402
4440
  border-color var(--dds-motion-micro-state),
@@ -4408,22 +4446,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
4408
4446
  background-color: var(--dds-color-surface-hover-default);
4409
4447
  }
4410
4448
  }
4411
- .ToggleButton_small {
4412
- gap: var(--dds-spacing-sm-icon-text-gap);
4413
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
4414
- }
4415
- .ToggleButton_xsmall {
4416
- gap: var(--dds-spacing-xs-icon-text-gap);
4417
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
4418
- }
4419
- .ToggleButton_content--with-icon {
4420
- &.ToggleButton_small {
4421
- padding-inline-start: var(--dds-spacing-x0-75);
4422
- }
4423
- &.ToggleButton_xsmall {
4424
- padding-inline-start: var(--dds-spacing-x0-25);
4425
- }
4426
- }
4427
4449
  input:checked + .ToggleButton_content {
4428
4450
  color: var(--dds-color-text-on-action);
4429
4451
  background-color: var(--dds-color-surface-action-resting);