@carbon/ibm-products 2.1.2 → 2.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (128) hide show
  1. package/css/index-full-carbon.css +562 -189
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +151 -0
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +320 -18
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +2 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +231 -94
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/APIKeyModal/APIKeyModal.docs-page.js +26 -0
  18. package/es/components/AboutModal/AboutModal.docs-page.js +21 -0
  19. package/es/components/AboutModal/AboutModal.js +1 -1
  20. package/es/components/Cascade/Cascade.docs-page.js +22 -0
  21. package/es/components/Cascade/Cascade.js +11 -1
  22. package/es/components/CreateFullPage/CreateFullPage.docs-page.js +39 -0
  23. package/es/components/CreateFullPage/CreateFullPage.js +13 -0
  24. package/es/components/CreateModal/CreateModal.docs-page.js +24 -0
  25. package/es/components/CreateModal/CreateModal.js +7 -0
  26. package/es/components/CreateSidePanel/CreateSidePanel.docs-page.js +18 -0
  27. package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
  28. package/es/components/CreateTearsheet/CreateTearsheet.docs-page.js +29 -0
  29. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
  30. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +3 -2
  31. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +19 -17
  32. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
  33. package/es/components/EditFullPage/EditFullPage.docs-page.js +39 -0
  34. package/es/components/EditFullPage/EditFullPage.js +2 -1
  35. package/es/components/EditSidePanel/EditSidePanel.js +1 -1
  36. package/es/components/EditTearsheet/EditTearsheet.docs-page.js +25 -0
  37. package/es/components/EditTearsheet/EditTearsheet.js +4 -0
  38. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
  39. package/es/components/EditUpdateCards/EditUpdateCards.js +3 -2
  40. package/es/components/EmptyStates/EmptyState.js +4 -0
  41. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
  42. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
  43. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
  44. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
  45. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
  46. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
  47. package/es/components/ExampleComponent/ExampleComponent.docs-page.js +22 -0
  48. package/es/components/ExportModal/ExportModal.js +4 -0
  49. package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
  50. package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
  51. package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
  52. package/es/components/ImportModal/ImportModal.docs-page.js +18 -0
  53. package/es/components/MultiAddSelect/MultiAddSelect.docs-page.js +17 -0
  54. package/es/components/MultiAddSelect/MultiAddSelect.js +4 -0
  55. package/es/components/RemoveModal/RemoveModal.docs-page.js +18 -0
  56. package/es/components/RemoveModal/RemoveModal.js +6 -0
  57. package/es/components/SingleAddSelect/SingleAddSelect.docs-page.js +15 -0
  58. package/es/components/SingleAddSelect/SingleAddSelect.js +4 -0
  59. package/es/components/StatusIcon/StatusIcon.docs-page.js +17 -0
  60. package/es/components/StatusIcon/StatusIcon.js +10 -0
  61. package/es/components/Tearsheet/TearsheetShell.js +7 -1
  62. package/es/components/Toolbar/Toolbar.docs-page.js +14 -0
  63. package/es/components/UserProfileImage/UserProfileImage.docs-page.js +17 -0
  64. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  65. package/es/components/WebTerminal/WebTerminal.docs-page.js +52 -0
  66. package/es/components/WebTerminal/WebTerminal.js +4 -0
  67. package/es/global/js/utils/StoryDocsPage.js +218 -0
  68. package/es/global/js/utils/story-helper.js +107 -5
  69. package/lib/components/APIKeyModal/APIKeyModal.docs-page.js +37 -0
  70. package/lib/components/AboutModal/AboutModal.docs-page.js +32 -0
  71. package/lib/components/AboutModal/AboutModal.js +1 -1
  72. package/lib/components/Cascade/Cascade.docs-page.js +33 -0
  73. package/lib/components/Cascade/Cascade.js +11 -1
  74. package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +50 -0
  75. package/lib/components/CreateFullPage/CreateFullPage.js +13 -0
  76. package/lib/components/CreateModal/CreateModal.docs-page.js +35 -0
  77. package/lib/components/CreateModal/CreateModal.js +7 -0
  78. package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js +29 -0
  79. package/lib/components/CreateSidePanel/CreateSidePanel.js +1 -1
  80. package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js +40 -0
  81. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
  82. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +3 -2
  83. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +19 -17
  84. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
  85. package/lib/components/EditFullPage/EditFullPage.docs-page.js +50 -0
  86. package/lib/components/EditFullPage/EditFullPage.js +2 -1
  87. package/lib/components/EditSidePanel/EditSidePanel.js +1 -1
  88. package/lib/components/EditTearsheet/EditTearsheet.docs-page.js +36 -0
  89. package/lib/components/EditTearsheet/EditTearsheet.js +4 -0
  90. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
  91. package/lib/components/EditUpdateCards/EditUpdateCards.js +3 -2
  92. package/lib/components/EmptyStates/EmptyState.js +4 -0
  93. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
  94. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
  95. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
  96. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
  97. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
  98. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
  99. package/lib/components/ExampleComponent/ExampleComponent.docs-page.js +33 -0
  100. package/lib/components/ExportModal/ExportModal.js +4 -0
  101. package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
  102. package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
  103. package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
  104. package/lib/components/ImportModal/ImportModal.docs-page.js +26 -0
  105. package/lib/components/MultiAddSelect/MultiAddSelect.docs-page.js +25 -0
  106. package/lib/components/MultiAddSelect/MultiAddSelect.js +4 -0
  107. package/lib/components/RemoveModal/RemoveModal.docs-page.js +26 -0
  108. package/lib/components/RemoveModal/RemoveModal.js +6 -0
  109. package/lib/components/SingleAddSelect/SingleAddSelect.docs-page.js +23 -0
  110. package/lib/components/SingleAddSelect/SingleAddSelect.js +4 -0
  111. package/lib/components/StatusIcon/StatusIcon.docs-page.js +28 -0
  112. package/lib/components/StatusIcon/StatusIcon.js +10 -0
  113. package/lib/components/Tearsheet/TearsheetShell.js +7 -1
  114. package/lib/components/Toolbar/Toolbar.docs-page.js +25 -0
  115. package/lib/components/UserProfileImage/UserProfileImage.docs-page.js +28 -0
  116. package/lib/components/UserProfileImage/UserProfileImage.js +1 -1
  117. package/lib/components/WebTerminal/WebTerminal.docs-page.js +63 -0
  118. package/lib/components/WebTerminal/WebTerminal.js +4 -0
  119. package/lib/global/js/utils/StoryDocsPage.js +225 -0
  120. package/lib/global/js/utils/story-helper.js +114 -6
  121. package/package.json +8 -8
  122. package/scss/components/Cascade/_storybook-styles.scss +3 -2
  123. package/scss/components/Datagrid/_storybook-styles.scss +1 -1
  124. package/scss/components/Datagrid/styles/_datagrid.scss +14 -0
  125. package/scss/components/NotificationsPanel/_storybook-styles.scss +12 -0
  126. package/scss/components/PageHeader/_storybook-styles.scss +0 -18
  127. package/scss/components/WebTerminal/_storybook-styles.scss +7 -12
  128. package/scss/components/HTTPErrors/_storybook-styles.scss +0 -20
@@ -77,8 +77,6 @@
77
77
  .cds--copy-btn {
78
78
  position: relative;
79
79
  display: flex;
80
- width: 2.5rem;
81
- height: 2.5rem;
82
80
  align-items: center;
83
81
  justify-content: center;
84
82
  padding: 0;
@@ -488,11 +486,13 @@
488
486
  transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
489
487
  }
490
488
 
489
+ .cds--btn > .cds--snippet__icon {
490
+ margin-block-start: 0;
491
+ }
492
+
491
493
  .cds--copy-btn {
492
494
  display: flex;
493
495
  overflow: visible;
494
- width: 2.5rem;
495
- height: 2.5rem;
496
496
  align-items: center;
497
497
  justify-content: center;
498
498
  padding: 0;
@@ -535,16 +535,13 @@
535
535
  right: 0;
536
536
  }
537
537
 
538
- .cds--snippet--inline.cds--btn--md.cds--btn--icon-only {
539
- padding-right: 0;
540
- padding-left: 0;
541
- }
542
-
543
- .cds--snippet--inline.cds--btn--md {
544
- min-height: 1.25rem;
538
+ .cds--snippet--inline.cds--btn {
539
+ width: initial;
540
+ height: 1.25rem;
541
+ padding-inline: 0;
545
542
  }
546
543
 
547
- .cds--snippet--inline.cds--btn--primary:hover {
544
+ .cds--snippet--inline.cds--btn.cds--btn--primary:hover {
548
545
  color: var(--cds-text-primary, #161616);
549
546
  }
550
547
 
@@ -553,12 +550,8 @@
553
550
  right: 0.5rem;
554
551
  }
555
552
 
556
- .cds--snippet--multi .cds--copy-btn.cds--btn--md {
553
+ .cds--snippet--multi .cds--copy-btn {
557
554
  z-index: 10;
558
- width: 2rem;
559
- height: 2rem;
560
- min-height: 2rem;
561
- padding: 0;
562
555
  }
563
556
 
564
557
  .cds--snippet-btn--expand {
@@ -2930,6 +2923,157 @@ p.c4p--about-modal__copyright-text:first-child {
2930
2923
  margin-bottom: 0;
2931
2924
  }
2932
2925
 
2926
+ :root {
2927
+ --cds-layout-size-height-xs: 1.5rem;
2928
+ --cds-layout-size-height-sm: 2rem;
2929
+ --cds-layout-size-height-md: 2.5rem;
2930
+ --cds-layout-size-height-lg: 3rem;
2931
+ --cds-layout-size-height-xl: 4rem;
2932
+ --cds-layout-size-height-2xl: 5rem;
2933
+ --cds-layout-size-height-min: 0px;
2934
+ --cds-layout-size-height-max: 999999999px;
2935
+ --cds-layout-density-padding-inline-condensed: 0.5rem;
2936
+ --cds-layout-density-padding-inline-normal: 1rem;
2937
+ --cds-layout-density-padding-inline-min: 0px;
2938
+ --cds-layout-density-padding-inline-max: 999999999px;
2939
+ }
2940
+
2941
+ .cds--layout--size-xs {
2942
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
2943
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2944
+ }
2945
+
2946
+ .cds--layout-constraint--size\:default-xs {
2947
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
2948
+ }
2949
+
2950
+ .cds--layout-constraint--size\:min-xs {
2951
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
2952
+ }
2953
+
2954
+ .cds--layout-constraint--size\:max-xs {
2955
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
2956
+ }
2957
+
2958
+ .cds--layout--size-sm {
2959
+ --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
2960
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2961
+ }
2962
+
2963
+ .cds--layout-constraint--size\:default-sm {
2964
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
2965
+ }
2966
+
2967
+ .cds--layout-constraint--size\:min-sm {
2968
+ --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
2969
+ }
2970
+
2971
+ .cds--layout-constraint--size\:max-sm {
2972
+ --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
2973
+ }
2974
+
2975
+ .cds--layout--size-md {
2976
+ --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
2977
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2978
+ }
2979
+
2980
+ .cds--layout-constraint--size\:default-md {
2981
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
2982
+ }
2983
+
2984
+ .cds--layout-constraint--size\:min-md {
2985
+ --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
2986
+ }
2987
+
2988
+ .cds--layout-constraint--size\:max-md {
2989
+ --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
2990
+ }
2991
+
2992
+ .cds--layout--size-lg {
2993
+ --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
2994
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
2995
+ }
2996
+
2997
+ .cds--layout-constraint--size\:default-lg {
2998
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
2999
+ }
3000
+
3001
+ .cds--layout-constraint--size\:min-lg {
3002
+ --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
3003
+ }
3004
+
3005
+ .cds--layout-constraint--size\:max-lg {
3006
+ --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
3007
+ }
3008
+
3009
+ .cds--layout--size-xl {
3010
+ --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
3011
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
3012
+ }
3013
+
3014
+ .cds--layout-constraint--size\:default-xl {
3015
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
3016
+ }
3017
+
3018
+ .cds--layout-constraint--size\:min-xl {
3019
+ --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
3020
+ }
3021
+
3022
+ .cds--layout-constraint--size\:max-xl {
3023
+ --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
3024
+ }
3025
+
3026
+ .cds--layout--size-2xl {
3027
+ --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
3028
+ --cds-layout-size-height: var(--cds-layout-size-height-context);
3029
+ }
3030
+
3031
+ .cds--layout-constraint--size\:default-2xl {
3032
+ --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
3033
+ }
3034
+
3035
+ .cds--layout-constraint--size\:min-2xl {
3036
+ --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
3037
+ }
3038
+
3039
+ .cds--layout-constraint--size\:max-2xl {
3040
+ --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
3041
+ }
3042
+
3043
+ .cds--layout--density-condensed {
3044
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
3045
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
3046
+ }
3047
+
3048
+ .cds--layout-constraint--density\:default-condensed {
3049
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
3050
+ }
3051
+
3052
+ .cds--layout-constraint--density\:min-condensed {
3053
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
3054
+ }
3055
+
3056
+ .cds--layout-constraint--density\:max-condensed {
3057
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
3058
+ }
3059
+
3060
+ .cds--layout--density-normal {
3061
+ --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
3062
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
3063
+ }
3064
+
3065
+ .cds--layout-constraint--density\:default-normal {
3066
+ --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
3067
+ }
3068
+
3069
+ .cds--layout-constraint--density\:min-normal {
3070
+ --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
3071
+ }
3072
+
3073
+ .cds--layout-constraint--density\:max-normal {
3074
+ --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
3075
+ }
3076
+
2933
3077
  .c4p--side-panel__container {
2934
3078
  --c4p--side-panel--subtitle-opacity: 1;
2935
3079
  --c4p--side-panel--title-container-height: 0;
@@ -10621,6 +10765,14 @@ button.c4p--add-select__global-filter-toggle--open {
10621
10765
  padding: 0;
10622
10766
  }
10623
10767
 
10768
+ .c4p--datagrid .cds--action-list .cds--btn {
10769
+ align-items: center;
10770
+ }
10771
+
10772
+ .c4p--datagrid .cds--action-list .cds--btn__icon {
10773
+ margin-top: 0;
10774
+ }
10775
+
10624
10776
  /*
10625
10777
  * Licensed Materials - Property of IBM
10626
10778
  * 5724-Q36
@@ -13333,7 +13485,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
13333
13485
  width: 0;
13334
13486
  }
13335
13487
 
13336
- .cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,
13337
13488
  .cds--side-nav--expanded {
13338
13489
  width: 16rem;
13339
13490
  }
@@ -13768,6 +13919,157 @@ a.cds--side-nav__link--current::before {
13768
13919
  fill: ButtonText;
13769
13920
  }
13770
13921
  }
13922
+ :root {
13923
+ --cds-layout-size-height-xs:1.5rem;
13924
+ --cds-layout-size-height-sm:2rem;
13925
+ --cds-layout-size-height-md:2.5rem;
13926
+ --cds-layout-size-height-lg:3rem;
13927
+ --cds-layout-size-height-xl:4rem;
13928
+ --cds-layout-size-height-2xl:5rem;
13929
+ --cds-layout-size-height-min:0px;
13930
+ --cds-layout-size-height-max:999999999px;
13931
+ --cds-layout-density-padding-inline-condensed:0.5rem;
13932
+ --cds-layout-density-padding-inline-normal:1rem;
13933
+ --cds-layout-density-padding-inline-min:0px;
13934
+ --cds-layout-density-padding-inline-max:999999999px;
13935
+ }
13936
+
13937
+ .cds--layout--size-xs {
13938
+ --cds-layout-size-height-context:var(--cds-layout-size-height-xs, 1.5rem);
13939
+ --cds-layout-size-height:var(--cds-layout-size-height-context);
13940
+ }
13941
+
13942
+ .cds--layout-constraint--size\:default-xs {
13943
+ --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
13944
+ }
13945
+
13946
+ .cds--layout-constraint--size\:min-xs {
13947
+ --cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem);
13948
+ }
13949
+
13950
+ .cds--layout-constraint--size\:max-xs {
13951
+ --cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem);
13952
+ }
13953
+
13954
+ .cds--layout--size-sm {
13955
+ --cds-layout-size-height-context:var(--cds-layout-size-height-sm, 2rem);
13956
+ --cds-layout-size-height:var(--cds-layout-size-height-context);
13957
+ }
13958
+
13959
+ .cds--layout-constraint--size\:default-sm {
13960
+ --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
13961
+ }
13962
+
13963
+ .cds--layout-constraint--size\:min-sm {
13964
+ --cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem);
13965
+ }
13966
+
13967
+ .cds--layout-constraint--size\:max-sm {
13968
+ --cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem);
13969
+ }
13970
+
13971
+ .cds--layout--size-md {
13972
+ --cds-layout-size-height-context:var(--cds-layout-size-height-md, 2.5rem);
13973
+ --cds-layout-size-height:var(--cds-layout-size-height-context);
13974
+ }
13975
+
13976
+ .cds--layout-constraint--size\:default-md {
13977
+ --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
13978
+ }
13979
+
13980
+ .cds--layout-constraint--size\:min-md {
13981
+ --cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem);
13982
+ }
13983
+
13984
+ .cds--layout-constraint--size\:max-md {
13985
+ --cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem);
13986
+ }
13987
+
13988
+ .cds--layout--size-lg {
13989
+ --cds-layout-size-height-context:var(--cds-layout-size-height-lg, 3rem);
13990
+ --cds-layout-size-height:var(--cds-layout-size-height-context);
13991
+ }
13992
+
13993
+ .cds--layout-constraint--size\:default-lg {
13994
+ --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
13995
+ }
13996
+
13997
+ .cds--layout-constraint--size\:min-lg {
13998
+ --cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem);
13999
+ }
14000
+
14001
+ .cds--layout-constraint--size\:max-lg {
14002
+ --cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem);
14003
+ }
14004
+
14005
+ .cds--layout--size-xl {
14006
+ --cds-layout-size-height-context:var(--cds-layout-size-height-xl, 4rem);
14007
+ --cds-layout-size-height:var(--cds-layout-size-height-context);
14008
+ }
14009
+
14010
+ .cds--layout-constraint--size\:default-xl {
14011
+ --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
14012
+ }
14013
+
14014
+ .cds--layout-constraint--size\:min-xl {
14015
+ --cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem);
14016
+ }
14017
+
14018
+ .cds--layout-constraint--size\:max-xl {
14019
+ --cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem);
14020
+ }
14021
+
14022
+ .cds--layout--size-2xl {
14023
+ --cds-layout-size-height-context:var(--cds-layout-size-height-2xl, 5rem);
14024
+ --cds-layout-size-height:var(--cds-layout-size-height-context);
14025
+ }
14026
+
14027
+ .cds--layout-constraint--size\:default-2xl {
14028
+ --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
14029
+ }
14030
+
14031
+ .cds--layout-constraint--size\:min-2xl {
14032
+ --cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem);
14033
+ }
14034
+
14035
+ .cds--layout-constraint--size\:max-2xl {
14036
+ --cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem);
14037
+ }
14038
+
14039
+ .cds--layout--density-condensed {
14040
+ --cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14041
+ --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
14042
+ }
14043
+
14044
+ .cds--layout-constraint--density\:default-condensed {
14045
+ --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
14046
+ }
14047
+
14048
+ .cds--layout-constraint--density\:min-condensed {
14049
+ --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14050
+ }
14051
+
14052
+ .cds--layout-constraint--density\:max-condensed {
14053
+ --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14054
+ }
14055
+
14056
+ .cds--layout--density-normal {
14057
+ --cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal, 1rem);
14058
+ --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
14059
+ }
14060
+
14061
+ .cds--layout-constraint--density\:default-normal {
14062
+ --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
14063
+ }
14064
+
14065
+ .cds--layout-constraint--density\:min-normal {
14066
+ --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem);
14067
+ }
14068
+
14069
+ .cds--layout-constraint--density\:max-normal {
14070
+ --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem);
14071
+ }
14072
+
13771
14073
  .c4p--action-set {
13772
14074
  align-items: stretch;
13773
14075
  justify-content: flex-end;
@@ -14402,6 +14704,14 @@ video {
14402
14704
  vertical-align: baseline;
14403
14705
  }
14404
14706
 
14707
+ button,
14708
+ select,
14709
+ input,
14710
+ textarea {
14711
+ border-radius: 0;
14712
+ font-family: inherit;
14713
+ }
14714
+
14405
14715
  /* HTML5 display-role reset for older browsers */
14406
14716
  article,
14407
14717
  aside,
@@ -16039,6 +16349,8 @@ em {
16039
16349
  }
16040
16350
 
16041
16351
  .cds--accordion {
16352
+ --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
16353
+ --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
16042
16354
  box-sizing: border-box;
16043
16355
  padding: 0;
16044
16356
  border: 0;
@@ -16084,11 +16396,10 @@ em {
16084
16396
  position: relative;
16085
16397
  display: flex;
16086
16398
  width: 100%;
16087
- min-height: 2.5rem;
16399
+ min-height: var(--cds-layout-size-height-local);
16088
16400
  flex-direction: row-reverse;
16089
- align-items: flex-start;
16401
+ align-items: center;
16090
16402
  justify-content: flex-start;
16091
- padding: 0.625rem 0;
16092
16403
  margin: 0;
16093
16404
  color: var(--cds-text-primary, #161616);
16094
16405
  cursor: pointer;
@@ -16126,16 +16437,6 @@ em {
16126
16437
  }
16127
16438
  }
16128
16439
 
16129
- .cds--accordion--lg .cds--accordion__heading {
16130
- min-height: 3rem;
16131
- align-items: center;
16132
- }
16133
-
16134
- .cds--accordion--sm .cds--accordion__heading {
16135
- min-height: 2rem;
16136
- padding: 0.3125rem 0;
16137
- }
16138
-
16139
16440
  .cds--accordion__heading[disabled] {
16140
16441
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
16141
16442
  cursor: not-allowed;
@@ -16164,7 +16465,7 @@ li.cds--accordion__item--disabled:last-of-type {
16164
16465
  width: 1rem;
16165
16466
  height: 1rem;
16166
16467
  flex: 0 0 1rem;
16167
- margin: 2px 1rem 0 0;
16468
+ margin: 0 var(--cds-layout-density-padding-inline-local) 0 0;
16168
16469
  fill: var(--cds-icon-primary, #161616);
16169
16470
  transform: rotate(-270deg) /*rtl:ignore*/;
16170
16471
  transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -16178,14 +16479,13 @@ li.cds--accordion__item--disabled:last-of-type {
16178
16479
  z-index: 1;
16179
16480
  width: 100%;
16180
16481
  padding-right: 1rem;
16181
- margin: 0 0 0 1rem;
16482
+ margin: 0 0 0 var(--cds-layout-density-padding-inline-local);
16182
16483
  text-align: left;
16183
16484
  }
16184
16485
 
16185
16486
  .cds--accordion__content {
16186
16487
  display: none;
16187
- padding-right: 1rem;
16188
- padding-left: 1rem;
16488
+ padding-inline: var(--cds-layout-density-padding-inline-local);
16189
16489
  transition: padding cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
16190
16490
  }
16191
16491
  @media (min-width: 480px) {
@@ -16210,7 +16510,7 @@ li.cds--accordion__item--disabled:last-of-type {
16210
16510
  }
16211
16511
 
16212
16512
  .cds--accordion--start .cds--accordion__arrow {
16213
- margin: 2px 0 0 1rem;
16513
+ margin: 2px 0 0 var(--cds-layout-density-padding-inline-local);
16214
16514
  }
16215
16515
 
16216
16516
  .cds--accordion--start .cds--accordion__title {
@@ -16218,7 +16518,7 @@ li.cds--accordion__item--disabled:last-of-type {
16218
16518
  }
16219
16519
 
16220
16520
  .cds--accordion--start .cds--accordion__content {
16221
- margin-left: 2rem;
16521
+ margin-left: calc(var(--cds-layout-density-padding-inline-local) + 1rem);
16222
16522
  }
16223
16523
 
16224
16524
  .cds--accordion__item--collapsing .cds--accordion__content,
@@ -16654,6 +16954,15 @@ li.cds--accordion__item--disabled:last-of-type {
16654
16954
  }
16655
16955
 
16656
16956
  .cds--btn {
16957
+ --cds-layout-size-height-local: clamp(var(--cds-layout-size-height-min), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), var(--cds-layout-size-height-max));
16958
+ --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
16959
+ --temp-1lh: (
16960
+ var(--cds-body-compact-01-line-height, 1.28572) * 1em
16961
+ );
16962
+ --temp-padding-block-max: calc(
16963
+ (var(--cds-layout-size-height-lg) - var(--temp-1lh)) / 2 -
16964
+ 0.0625rem
16965
+ );
16657
16966
  box-sizing: border-box;
16658
16967
  padding: 0;
16659
16968
  border: 0;
@@ -16669,15 +16978,16 @@ li.cds--accordion__item--disabled:last-of-type {
16669
16978
  display: inline-flex;
16670
16979
  width: max-content;
16671
16980
  max-width: 20rem;
16672
- min-height: 3rem;
16981
+ height: var(--cds-layout-size-height-local);
16673
16982
  flex-shrink: 0;
16674
- align-items: center;
16675
16983
  justify-content: space-between;
16676
- padding: calc(0.875rem - 3px) calc(4rem - 1px) calc(0.875rem - 3px) calc(1rem - 1px);
16677
16984
  margin: 0;
16678
16985
  border-radius: 0;
16679
16986
  cursor: pointer;
16680
16987
  outline: none;
16988
+ padding-block-start: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
16989
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
16990
+ padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
16681
16991
  text-align: left;
16682
16992
  text-decoration: none;
16683
16993
  transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
@@ -16697,10 +17007,12 @@ li.cds--accordion__item--disabled:last-of-type {
16697
17007
  }
16698
17008
  .cds--btn .cds--btn__icon {
16699
17009
  position: absolute;
16700
- right: 1rem;
17010
+ top: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
17011
+ right: var(--cds-layout-density-padding-inline-local);
16701
17012
  width: 1rem;
16702
17013
  height: 1rem;
16703
17014
  flex-shrink: 0;
17015
+ margin-block-start: 0.0625rem;
16704
17016
  }
16705
17017
 
16706
17018
  .cds--btn::-moz-focus-inner {
@@ -16803,7 +17115,7 @@ li.cds--accordion__item--disabled:last-of-type {
16803
17115
  border-color: transparent;
16804
17116
  background-color: transparent;
16805
17117
  color: var(--cds-link-primary, #0f62fe);
16806
- padding: calc(0.875rem - 3px) 1rem;
17118
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
16807
17119
  }
16808
17120
  .cds--btn--ghost:hover {
16809
17121
  background-color: var(--cds-layer-hover);
@@ -16835,19 +17147,19 @@ li.cds--accordion__item--disabled:last-of-type {
16835
17147
  color: var(--cds-text-on-color-disabled, #8d8d8d);
16836
17148
  outline: none;
16837
17149
  }
16838
- .cds--btn--ghost.cds--btn--sm {
16839
- padding: calc(0.375rem - 3px) 1rem;
16840
- }
16841
- .cds--btn--ghost.cds--btn--field, .cds--btn--ghost.cds--btn--md {
16842
- padding: calc(0.675rem - 3px) 1rem;
16843
- }
16844
17150
  .cds--btn--ghost:not([disabled]) svg {
16845
17151
  fill: var(--cds-icon-primary, #161616);
16846
17152
  }
16847
17153
 
16848
17154
  .cds--btn--icon-only {
16849
- padding-right: 0.9375rem;
16850
- padding-left: 0.9375rem;
17155
+ width: var(--cds-layout-size-height-local);
17156
+ height: var(--cds-layout-size-height-local);
17157
+ justify-content: center;
17158
+ padding: 0;
17159
+ padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
17160
+ }
17161
+ .cds--btn--icon-only > :first-child {
17162
+ margin-block-start: 0.0625rem;
16851
17163
  }
16852
17164
  .cds--btn--icon-only .cds--btn__icon {
16853
17165
  position: static;
@@ -16879,15 +17191,12 @@ li.cds--accordion__item--disabled:last-of-type {
16879
17191
  cursor: not-allowed;
16880
17192
  }
16881
17193
 
16882
- .cds--btn--field.cds--btn--icon-only,
16883
- .cds--btn--md.cds--btn--icon-only {
16884
- padding-right: 0.6875rem;
16885
- padding-left: 0.6875rem;
17194
+ .cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
17195
+ cursor: not-allowed;
16886
17196
  }
16887
17197
 
16888
- .cds--btn--sm.cds--btn--icon-only {
16889
- padding-right: 0.4375rem;
16890
- padding-left: 0.4375rem;
17198
+ .cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
17199
+ pointer-events: none;
16891
17200
  }
16892
17201
 
16893
17202
  .cds--btn--danger {
@@ -16959,7 +17268,7 @@ li.cds--accordion__item--disabled:last-of-type {
16959
17268
  border-color: transparent;
16960
17269
  background-color: transparent;
16961
17270
  color: var(--cds-button-danger-secondary, #da1e28);
16962
- padding: calc(0.875rem - 3px) 1rem;
17271
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
16963
17272
  }
16964
17273
  .cds--btn--danger--ghost:hover {
16965
17274
  background-color: var(--cds-button-danger-hover, #b81921);
@@ -16988,46 +17297,12 @@ li.cds--accordion__item--disabled:last-of-type {
16988
17297
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
16989
17298
  outline: none;
16990
17299
  }
16991
- .cds--btn--danger--ghost.cds--btn--sm {
16992
- padding: calc(0.375rem - 3px) 1rem;
16993
- }
16994
- .cds--btn--danger--ghost.cds--btn--field, .cds--btn--danger--ghost.cds--btn--md {
16995
- padding: calc(0.675rem - 3px) 1rem;
16996
- }
16997
-
16998
- .cds--btn--sm {
16999
- min-height: 2rem;
17000
- padding: calc(0.375rem - 3px) calc(4rem - 4px) calc(0.375rem - 3px) calc(1rem - 4px);
17001
- }
17002
-
17003
- .cds--btn--2xl:not(.cds--btn--icon-only) {
17004
- align-items: baseline;
17005
- padding-top: 1rem;
17006
- padding-right: 4rem;
17007
- padding-left: 1rem;
17008
- min-height: 5rem;
17009
- }
17010
-
17011
- .cds--btn--xl:not(.cds--btn--icon-only) {
17012
- align-items: baseline;
17013
- padding-top: 1rem;
17014
- padding-right: 4rem;
17015
- padding-left: 1rem;
17016
- min-height: 4rem;
17017
- }
17018
-
17019
- .cds--btn--field,
17020
- .cds--btn--md {
17021
- min-height: 2.5rem;
17022
- padding: calc(0.675rem - 3px) calc(4rem - 4px) calc(0.675rem - 3px) calc(1rem - 4px);
17023
- }
17024
17300
 
17025
17301
  .cds--btn--expressive {
17026
17302
  font-size: var(--cds-body-compact-02-font-size, 1rem);
17027
17303
  font-weight: var(--cds-body-compact-02-font-weight, 400);
17028
17304
  line-height: var(--cds-body-compact-02-line-height, 1.375);
17029
17305
  letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
17030
- min-height: 3rem;
17031
17306
  }
17032
17307
 
17033
17308
  .cds--btn--icon-only.cds--btn--expressive {
@@ -17328,6 +17603,7 @@ input[data-invalid] ~ .cds--form-requirement,
17328
17603
  .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement,
17329
17604
  .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
17330
17605
  .cds--time-picker--invalid ~ .cds--form-requirement,
17606
+ .cds--time-picker--warning ~ .cds--form-requirement,
17331
17607
  .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
17332
17608
  .cds--text-input__field-wrapper--warning ~ .cds--form-requirement,
17333
17609
  .cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement,
@@ -17717,6 +17993,8 @@ fieldset[disabled] .cds--form__helper-text {
17717
17993
  }
17718
17994
 
17719
17995
  .cds--text-input {
17996
+ --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
17997
+ --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
17720
17998
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
17721
17999
  font-weight: var(--cds-body-compact-01-font-weight, 400);
17722
18000
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -17724,8 +18002,8 @@ fieldset[disabled] .cds--form__helper-text {
17724
18002
  outline: 2px solid transparent;
17725
18003
  outline-offset: -2px;
17726
18004
  width: 100%;
17727
- height: 2.5rem;
17728
- padding: 0 1rem;
18005
+ height: var(--cds-layout-size-height-local);
18006
+ padding: 0 var(--cds-layout-density-padding-inline-local);
17729
18007
  border: none;
17730
18008
  border-bottom: 1px solid var(--cds-border-strong);
17731
18009
  background-color: var(--cds-field);
@@ -17762,14 +18040,6 @@ fieldset[disabled] .cds--form__helper-text {
17762
18040
  display: none;
17763
18041
  }
17764
18042
 
17765
- .cds--text-input--lg {
17766
- height: 3rem;
17767
- }
17768
-
17769
- .cds--text-input--sm {
17770
- height: 2rem;
17771
- }
17772
-
17773
18043
  .cds--password-input {
17774
18044
  padding-right: 2.5rem;
17775
18045
  }
@@ -18313,6 +18583,10 @@ fieldset[disabled] .cds--form__helper-text {
18313
18583
  }
18314
18584
 
18315
18585
  .cds--tag {
18586
+ --cds-layout-size-height-xs: 1.125rem;
18587
+ --cds-layout-size-height-sm: 1.125rem;
18588
+ --cds-layout-size-height-md: 1.5rem;
18589
+ --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-md)));
18316
18590
  font-size: var(--cds-label-01-font-size, 0.75rem);
18317
18591
  font-weight: var(--cds-label-01-font-weight, 400);
18318
18592
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -18322,16 +18596,25 @@ fieldset[disabled] .cds--form__helper-text {
18322
18596
  display: inline-flex;
18323
18597
  min-width: 2rem;
18324
18598
  max-width: 100%;
18325
- min-height: 1.5rem;
18599
+ min-height: var(--cds-layout-size-height-local);
18326
18600
  align-items: center;
18327
18601
  justify-content: center;
18328
- padding: 0.25rem 0.5rem;
18329
18602
  margin: 0.25rem;
18330
18603
  border-radius: 0.9375rem;
18331
18604
  cursor: default;
18605
+ padding-inline: 0.5rem;
18332
18606
  vertical-align: middle;
18333
18607
  word-break: break-word;
18334
18608
  }
18609
+ .cds--layout--size-xs .cds--tag {
18610
+ --cds-layout-size-height: var(--cds-layout-size-height-xs);
18611
+ }
18612
+ .cds--layout--size-sm .cds--tag {
18613
+ --cds-layout-size-height: var(--cds-layout-size-height-sm);
18614
+ }
18615
+ .cds--layout--size-md .cds--tag {
18616
+ --cds-layout-size-height: var(--cds-layout-size-height-md);
18617
+ }
18335
18618
  .cds--tag.cds--tag--interactive:hover,
18336
18619
  .cds--tag .cds--tag__close-icon:hover {
18337
18620
  background-color: var(--cds-tag-hover-gray, #c6c6c6);
@@ -18502,8 +18785,8 @@ fieldset[disabled] .cds--form__helper-text {
18502
18785
 
18503
18786
  .cds--tag__close-icon {
18504
18787
  display: flex;
18505
- width: 1.5rem;
18506
- height: 1.5rem;
18788
+ width: var(--cds-layout-size-height-local);
18789
+ height: var(--cds-layout-size-height-local);
18507
18790
  flex-shrink: 0;
18508
18791
  align-items: center;
18509
18792
  justify-content: center;
@@ -18557,18 +18840,11 @@ fieldset[disabled] .cds--form__helper-text {
18557
18840
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
18558
18841
  }
18559
18842
 
18560
- .cds--tag--sm {
18561
- min-height: 1.125rem;
18562
- padding: 0 0.5rem;
18563
- }
18564
-
18565
18843
  .cds--tag--sm.cds--tag--filter {
18566
18844
  padding-right: 0;
18567
18845
  }
18568
18846
 
18569
18847
  .cds--tag--sm .cds--tag__close-icon {
18570
- width: 1.125rem;
18571
- height: 1.125rem;
18572
18848
  margin-left: 0.3125rem;
18573
18849
  }
18574
18850
 
@@ -19477,13 +19753,23 @@ fieldset[disabled] .cds--form__helper-text {
19477
19753
  transform: rotate(180deg);
19478
19754
  }
19479
19755
 
19756
+ .cds--contained-list {
19757
+ --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-xl)));
19758
+ --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
19759
+ }
19760
+
19761
+ .cds--contained-list > ul {
19762
+ padding: 0;
19763
+ margin: 0;
19764
+ }
19765
+
19480
19766
  .cds--contained-list__header {
19481
19767
  position: sticky;
19482
19768
  z-index: 1;
19483
19769
  top: 0;
19484
19770
  display: flex;
19485
19771
  align-items: center;
19486
- padding-inline: 1rem;
19772
+ padding-inline: var(--cds-layout-density-padding-inline-local);
19487
19773
  }
19488
19774
 
19489
19775
  .cds--contained-list__label {
@@ -19493,7 +19779,7 @@ fieldset[disabled] .cds--form__helper-text {
19493
19779
  .cds--contained-list .cds--search {
19494
19780
  position: sticky;
19495
19781
  z-index: 1;
19496
- top: 48px;
19782
+ top: var(--cds-layout-size-height-local);
19497
19783
  }
19498
19784
  .cds--contained-list .cds--search.cds--search--expandable .cds--search-input {
19499
19785
  background-color: var(--cds-field);
@@ -19532,46 +19818,6 @@ fieldset[disabled] .cds--form__helper-text {
19532
19818
  outline: none;
19533
19819
  }
19534
19820
 
19535
- .cds--contained-list--on-page.cds--contained-list--sm .cds--contained-list__header {
19536
- height: 2rem;
19537
- }
19538
-
19539
- .cds--contained-list--sm .cds--contained-list-item__content,
19540
- .cds--contained-list--sm .cds--contained-list-item--clickable .cds--contained-list-item__content {
19541
- min-height: 2rem;
19542
- padding: calc(0.5rem - 0.125rem) 1rem;
19543
- }
19544
-
19545
- .cds--contained-list--on-page.cds--contained-list--md .cds--contained-list__header {
19546
- height: 2.5rem;
19547
- }
19548
-
19549
- .cds--contained-list--md .cds--contained-list-item__content,
19550
- .cds--contained-list--md .cds--contained-list-item--clickable .cds--contained-list-item__content {
19551
- min-height: 2.5rem;
19552
- padding: calc(0.75rem - 0.125rem) 1rem;
19553
- }
19554
-
19555
- .cds--contained-list--on-page.cds--contained-list--lg .cds--contained-list__header {
19556
- height: 3rem;
19557
- }
19558
-
19559
- .cds--contained-list--lg .cds--contained-list-item__content,
19560
- .cds--contained-list--lg .cds--contained-list-item--clickable .cds--contained-list-item__content {
19561
- min-height: 3rem;
19562
- padding: calc(1rem - 0.125rem) 1rem;
19563
- }
19564
-
19565
- .cds--contained-list--on-page.cds--contained-list--xl .cds--contained-list__header {
19566
- height: 4rem;
19567
- }
19568
-
19569
- .cds--contained-list--xl .cds--contained-list-item__content,
19570
- .cds--contained-list--xl .cds--contained-list-item--clickable .cds--contained-list-item__content {
19571
- min-height: 4rem;
19572
- padding: calc(1.5rem - 0.125rem) 1rem;
19573
- }
19574
-
19575
19821
  .cds--contained-list--on-page + .cds--contained-list--on-page {
19576
19822
  margin-block-start: 1rem;
19577
19823
  }
@@ -19581,6 +19827,7 @@ fieldset[disabled] .cds--form__helper-text {
19581
19827
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
19582
19828
  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
19583
19829
  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
19830
+ height: var(--cds-layout-size-height-local);
19584
19831
  border-bottom: 1px solid var(--cds-border-subtle);
19585
19832
  background-color: var(--cds-background, #ffffff);
19586
19833
  color: var(--cds-text-primary, #161616);
@@ -19606,12 +19853,17 @@ fieldset[disabled] .cds--form__helper-text {
19606
19853
 
19607
19854
  .cds--contained-list-item {
19608
19855
  position: relative;
19856
+ list-style: none;
19609
19857
  }
19610
19858
 
19611
19859
  .cds--contained-list-item:not(:first-of-type) {
19612
19860
  margin-top: -1px;
19613
19861
  }
19614
19862
 
19863
+ .cds--contained-list-item__content {
19864
+ box-sizing: border-box;
19865
+ }
19866
+
19615
19867
  .cds--contained-list-item--clickable .cds--contained-list-item__content {
19616
19868
  box-sizing: border-box;
19617
19869
  padding: 0;
@@ -19642,10 +19894,15 @@ fieldset[disabled] .cds--form__helper-text {
19642
19894
 
19643
19895
  .cds--contained-list-item__content,
19644
19896
  .cds--contained-list-item--clickable .cds--contained-list-item__content {
19897
+ --temp-1lh: (
19898
+ var(--cds-body-01-line-height, 1.42857) * 1em
19899
+ );
19645
19900
  font-size: var(--cds-body-01-font-size, 0.875rem);
19646
19901
  font-weight: var(--cds-body-01-font-weight, 400);
19647
19902
  line-height: var(--cds-body-01-line-height, 1.42857);
19648
19903
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
19904
+ min-height: var(--cds-layout-size-height-local);
19905
+ padding: calc((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2) var(--cds-layout-density-padding-inline-local);
19649
19906
  color: var(--cds-text-primary, #161616);
19650
19907
  }
19651
19908
 
@@ -19660,8 +19917,8 @@ fieldset[disabled] .cds--form__helper-text {
19660
19917
  }
19661
19918
 
19662
19919
  .cds--contained-list--inset-rulers .cds--contained-list-item:not(:last-of-type)::before {
19663
- right: 1rem;
19664
- left: 1rem;
19920
+ right: var(--cds-layout-density-padding-inline-local);
19921
+ left: var(--cds-layout-density-padding-inline-local);
19665
19922
  }
19666
19923
 
19667
19924
  .cds--contained-list-item--clickable .cds--contained-list-item__content:not(:disabled):hover {
@@ -19729,20 +19986,14 @@ fieldset[disabled] .cds--form__helper-text {
19729
19986
  }
19730
19987
 
19731
19988
  .cds--content-switcher {
19989
+ --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
19990
+ --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
19732
19991
  display: flex;
19733
19992
  width: 100%;
19734
- height: 2.5rem;
19993
+ height: var(--cds-layout-size-height-local);
19735
19994
  justify-content: space-evenly;
19736
19995
  }
19737
19996
 
19738
- .cds--content-switcher--sm {
19739
- height: 2rem;
19740
- }
19741
-
19742
- .cds--content-switcher--lg {
19743
- height: 3rem;
19744
- }
19745
-
19746
19997
  .cds--content-switcher-btn {
19747
19998
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
19748
19999
  outline: 2px solid transparent;
@@ -19754,9 +20005,6 @@ fieldset[disabled] .cds--form__helper-text {
19754
20005
  position: relative;
19755
20006
  display: inline-flex;
19756
20007
  overflow: hidden;
19757
- width: 100%;
19758
- align-items: center;
19759
- padding: 0.5rem 1rem;
19760
20008
  border: none;
19761
20009
  border-top: 0.0625rem solid var(--cds-border-inverse, #161616);
19762
20010
  border-bottom: 0.0625rem solid var(--cds-border-inverse, #161616);
@@ -19834,6 +20082,12 @@ fieldset[disabled] .cds--form__helper-text {
19834
20082
  border-color: var(--cds-border-disabled, #c6c6c6);
19835
20083
  }
19836
20084
 
20085
+ .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn {
20086
+ width: 100%;
20087
+ align-items: center;
20088
+ padding: 0.5rem var(--cds-layout-density-padding-inline-local);
20089
+ }
20090
+
19837
20091
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
19838
20092
  border-left: 0.0625rem solid var(--cds-border-inverse, #161616);
19839
20093
  border-bottom-left-radius: 0.25rem;
@@ -20121,6 +20375,34 @@ fieldset[disabled] .cds--form__helper-text {
20121
20375
  vertical-align: middle;
20122
20376
  }
20123
20377
 
20378
+ .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand) {
20379
+ padding-top: 1rem;
20380
+ padding-bottom: 1rem;
20381
+ }
20382
+ .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-menu {
20383
+ padding-top: 0.5rem;
20384
+ }
20385
+ .cds--data-table.cds--data-table--top-aligned-body.cds--data-table--lg tr:not([data-child-row]) td:not(.cds--table-expand).cds--table-column-checkbox:not(.cds--table-column-radio) {
20386
+ padding-top: 0.8125rem;
20387
+ }
20388
+ .cds--data-table.cds--data-table--top-aligned-body td {
20389
+ vertical-align: top;
20390
+ }
20391
+
20392
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header) {
20393
+ padding-top: 1rem;
20394
+ padding-bottom: 1rem;
20395
+ }
20396
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-menu {
20397
+ padding-top: 0.5rem;
20398
+ }
20399
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th:not(.cds--table-expand):not(.cds--table-sort__header).cds--table-column-checkbox {
20400
+ padding-top: 0.8125rem;
20401
+ }
20402
+ .cds--data-table.cds--data-table--top-aligned-header th {
20403
+ vertical-align: top;
20404
+ }
20405
+
20124
20406
  .cds--data-table th[align=right],
20125
20407
  .cds--data-table td[align=right] {
20126
20408
  text-align: right;
@@ -20401,7 +20683,8 @@ tr.cds--data-table--selected:last-of-type td {
20401
20683
  height: calc(100% + 1px);
20402
20684
  }
20403
20685
 
20404
- .cds--data-table.cds--data-table--xs .cds--table-column-checkbox {
20686
+ .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
20687
+ .cds--data-table.cds--data-table--xs:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
20405
20688
  padding-top: 0;
20406
20689
  padding-bottom: 0;
20407
20690
  }
@@ -20423,12 +20706,14 @@ tr.cds--data-table--selected:last-of-type td {
20423
20706
  }
20424
20707
 
20425
20708
  .cds--data-table--sm td,
20426
- .cds--data-table--sm tbody tr th {
20709
+ .cds--data-table--sm tbody tr th,
20710
+ .cds--data-table--sm.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
20427
20711
  padding-top: 0.4375rem;
20428
20712
  padding-bottom: 0.375rem;
20429
20713
  }
20430
20714
 
20431
- .cds--data-table.cds--data-table--sm .cds--table-column-checkbox {
20715
+ .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
20716
+ .cds--data-table.cds--data-table--sm:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
20432
20717
  padding-top: 0.1875rem;
20433
20718
  padding-bottom: 0.1875rem;
20434
20719
  }
@@ -20443,7 +20728,8 @@ tr.cds--data-table--selected:last-of-type td {
20443
20728
  height: 2.5rem;
20444
20729
  }
20445
20730
 
20446
- .cds--data-table--md .cds--table-header-label {
20731
+ .cds--data-table--md .cds--table-header-label,
20732
+ .cds--data-table--md.cds--data-table--top-aligned-header th.cds--table-column-checkbox {
20447
20733
  padding-top: 0.4375rem;
20448
20734
  padding-bottom: 0.4375rem;
20449
20735
  }
@@ -20454,7 +20740,8 @@ tr.cds--data-table--selected:last-of-type td {
20454
20740
  padding-bottom: 0.375rem;
20455
20741
  }
20456
20742
 
20457
- .cds--data-table.cds--data-table--md .cds--table-column-checkbox {
20743
+ .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-body) td.cds--table-column-checkbox,
20744
+ .cds--data-table.cds--data-table--md:not(.cds--data-table--top-aligned-header) th.cds--table-column-checkbox {
20458
20745
  padding-top: 0.1875rem;
20459
20746
  padding-bottom: 0.1875rem;
20460
20747
  }
@@ -20478,6 +20765,7 @@ tr.cds--data-table--selected:last-of-type td {
20478
20765
  .cds--data-table--xl td,
20479
20766
  .cds--data-table--xl tbody tr th {
20480
20767
  padding-top: 1rem;
20768
+ padding-bottom: 1rem;
20481
20769
  }
20482
20770
 
20483
20771
  .cds--data-table--xl th,
@@ -21399,6 +21687,25 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
21399
21687
  border: 0;
21400
21688
  }
21401
21689
 
21690
+ .cds--data-table--top-aligned-body td .cds--table-expand__button,
21691
+ .cds--data-table--top-aligned-header th .cds--table-expand__button {
21692
+ height: 2rem;
21693
+ align-items: start;
21694
+ padding-top: 0.5rem;
21695
+ }
21696
+
21697
+ .cds--data-table--top-aligned-body.cds--data-table--xs td .cds--table-expand__button,
21698
+ .cds--data-table--top-aligned-header.cds--data-table--xs th .cds--table-expand__button {
21699
+ height: 1.5rem;
21700
+ padding-top: 0.25rem;
21701
+ }
21702
+
21703
+ .cds--data-table--top-aligned-body.cds--data-table--md td .cds--table-expand__button,
21704
+ .cds--data-table--top-aligned-header.cds--data-table--md th .cds--table-expand__button {
21705
+ padding-top: 0.5rem;
21706
+ margin-top: -0.25rem;
21707
+ }
21708
+
21402
21709
  .cds--table-expand__button:focus {
21403
21710
  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe);
21404
21711
  outline: none;
@@ -21412,7 +21719,6 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
21412
21719
 
21413
21720
  .cds--data-table--xl .cds--table-expand__button {
21414
21721
  width: 2rem;
21415
- padding: 0;
21416
21722
  }
21417
21723
 
21418
21724
  tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
@@ -21747,6 +22053,30 @@ th .cds--table-sort__flex {
21747
22053
  justify-content: space-between;
21748
22054
  }
21749
22055
 
22056
+ .cds--data-table--top-aligned-header th .cds--table-sort__flex {
22057
+ align-items: start;
22058
+ }
22059
+
22060
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--lg th.cds--table-sort__header {
22061
+ padding-top: 1rem;
22062
+ }
22063
+
22064
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label,
22065
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header .cds--table-sort__flex .cds--table-header-label {
22066
+ padding-top: 0;
22067
+ padding-bottom: 0;
22068
+ }
22069
+
22070
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--sm th.cds--table-sort__header {
22071
+ padding-top: 0.4375rem;
22072
+ padding-bottom: 0.4375rem;
22073
+ }
22074
+
22075
+ .cds--data-table.cds--data-table--top-aligned-header.cds--data-table--xs th.cds--table-sort__header {
22076
+ padding-top: 0.125rem;
22077
+ padding-bottom: 0.125rem;
22078
+ }
22079
+
21750
22080
  .cds--data-table--sort:not(.cds--data-table--xs):not(.cds--data-table--sm):not(.cds--data-table--md):not(.cds--data-table--xl) th .cds--table-sort__flex {
21751
22081
  /* IE11 workaround for align-items: center and min-height
21752
22082
  https://github.com/philipwalton/flexbugs/issues/231 */
@@ -26583,6 +26913,10 @@ optgroup.cds--select-optgroup:disabled,
26583
26913
  white-space: nowrap;
26584
26914
  }
26585
26915
 
26916
+ .cds--menu-item__shortcut {
26917
+ display: flex;
26918
+ }
26919
+
26586
26920
  .cds--menu--with-icons > .cds--menu-item,
26587
26921
  .cds--menu--with-icons > .cds--menu-item-group > ul > .cds--menu-item,
26588
26922
  .cds--menu--with-icons > .cds--menu-item-radio-group > ul > .cds--menu-item {
@@ -28069,7 +28403,8 @@ optgroup.cds--select-optgroup:disabled,
28069
28403
 
28070
28404
  /* Tertiary action button when not inline (toast) */
28071
28405
  .cds--actionable-notification__action-button.cds--btn--tertiary {
28072
- padding: 0 1rem;
28406
+ padding-right: 1rem;
28407
+ padding-left: 1rem;
28073
28408
  margin-bottom: 1rem;
28074
28409
  margin-left: calc(2rem + 1.25rem - 0.125rem);
28075
28410
  }
@@ -28281,6 +28616,10 @@ optgroup.cds--select-optgroup:disabled,
28281
28616
  background-color: var(--cds-layer-hover);
28282
28617
  }
28283
28618
 
28619
+ .cds--overflow-menu > :first-child {
28620
+ margin-block-start: 0;
28621
+ }
28622
+
28284
28623
  .cds--overflow-menu--sm {
28285
28624
  width: 2rem;
28286
28625
  height: 2rem;
@@ -28808,6 +29147,11 @@ span.cds--pagination__text.cds--pagination__items-count {
28808
29147
  box-sizing: inherit;
28809
29148
  }
28810
29149
 
29150
+ .cds--pagination__button > svg,
29151
+ .cds--btn--ghost.cds--pagination__button > svg {
29152
+ margin-block-start: 0;
29153
+ }
29154
+
28811
29155
  .cds--pagination--sm .cds--pagination__button,
28812
29156
  .cds--pagination--sm .cds--btn--ghost.cds--pagination__button {
28813
29157
  width: 2rem;
@@ -29547,6 +29891,10 @@ span.cds--pagination__text.cds--pagination__items-count {
29547
29891
  fill: var(--cds-icon-primary, #161616);
29548
29892
  }
29549
29893
 
29894
+ .cds--progress-bar {
29895
+ --cds-layout-density-padding-inline-local: clamp(var(--cds-layout-density-padding-inline-min), var(--cds-layout-density-padding-inline, var(--cds-layout-density-padding-inline-normal)), var(--cds-layout-density-padding-inline-max));
29896
+ }
29897
+
29550
29898
  .cds--progress-bar__label {
29551
29899
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
29552
29900
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -29555,8 +29903,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29555
29903
  display: flex;
29556
29904
  min-width: 3rem;
29557
29905
  justify-content: space-between;
29558
- margin-bottom: 0.5rem;
29559
29906
  color: var(--cds-text-primary, #161616);
29907
+ margin-block-end: 0.5rem;
29560
29908
  }
29561
29909
 
29562
29910
  .cds--progress-bar__label-text {
@@ -29618,7 +29966,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29618
29966
 
29619
29967
  .cds--progress-bar__status-icon {
29620
29968
  flex-shrink: 0;
29621
- margin-left: 1rem;
29969
+ margin-inline-start: var(--cds-layout-density-padding-inline-local);
29622
29970
  }
29623
29971
 
29624
29972
  .cds--progress-bar--finished .cds--progress-bar__bar,
@@ -29655,7 +30003,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29655
30003
  .cds--progress-bar--error.cds--progress-bar--inline .cds--progress-bar__label {
29656
30004
  flex-shrink: 1;
29657
30005
  justify-content: flex-start;
29658
- margin-right: 0;
30006
+ margin-inline-end: 0;
29659
30007
  }
29660
30008
 
29661
30009
  @keyframes progress-bar-indeterminate {
@@ -29674,7 +30022,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29674
30022
  .cds--progress-bar--inline .cds--progress-bar__label {
29675
30023
  flex-shrink: 0;
29676
30024
  margin-bottom: 0;
29677
- margin-inline-end: 1rem;
30025
+ margin-inline-end: var(--cds-layout-density-padding-inline-local);
29678
30026
  }
29679
30027
 
29680
30028
  .cds--progress-bar--inline .cds--progress-bar__track {
@@ -29697,7 +30045,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29697
30045
 
29698
30046
  .cds--progress-bar--indented .cds--progress-bar__label,
29699
30047
  .cds--progress-bar--indented .cds--progress-bar__helper-text {
29700
- padding-inline: 1rem;
30048
+ padding-inline: var(--cds-layout-density-padding-inline-local);
29701
30049
  }
29702
30050
 
29703
30051
  .cds--tooltip {
@@ -30474,11 +30822,10 @@ span.cds--pagination__text.cds--pagination__items-count {
30474
30822
  }
30475
30823
 
30476
30824
  .cds--slider__range-label {
30477
- font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
30478
- font-size: var(--cds-code-02-font-size, 0.875rem);
30479
- font-weight: var(--cds-code-02-font-weight, 400);
30480
- line-height: var(--cds-code-02-line-height, 1.42857);
30481
- letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
30825
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
30826
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
30827
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
30828
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
30482
30829
  color: var(--cds-text-primary, #161616);
30483
30830
  white-space: nowrap;
30484
30831
  }
@@ -31265,10 +31612,15 @@ span.cds--pagination__text.cds--pagination__items-count {
31265
31612
  .cds--tabs .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
31266
31613
  padding: 0.25rem;
31267
31614
  margin: -0.25rem;
31268
- cursor: pointer;
31269
31615
  line-height: 0;
31270
31616
  pointer-events: auto;
31271
31617
  }
31618
+ .cds--tabs .cds--tabs__nav-item--icon-left {
31619
+ display: flex;
31620
+ align-items: center;
31621
+ padding-right: 0.5rem;
31622
+ margin-top: -2px;
31623
+ }
31272
31624
  .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
31273
31625
  padding-left: 1rem;
31274
31626
  }
@@ -32055,10 +32407,21 @@ span.cds--pagination__text.cds--pagination__items-count {
32055
32407
  }
32056
32408
 
32057
32409
  .cds--time-picker__input {
32410
+ position: relative;
32058
32411
  display: flex;
32059
32412
  flex-direction: column;
32060
32413
  }
32061
32414
 
32415
+ .cds--time-picker__error__icon {
32416
+ position: absolute;
32417
+ top: 50%;
32418
+ right: 1rem;
32419
+ display: flex;
32420
+ height: 100%;
32421
+ place-items: center;
32422
+ transform: translateY(-50%);
32423
+ }
32424
+
32062
32425
  .cds--time-picker .cds--select-input {
32063
32426
  width: auto;
32064
32427
  min-width: auto;
@@ -32086,6 +32449,10 @@ span.cds--pagination__text.cds--pagination__items-count {
32086
32449
  opacity: 1;
32087
32450
  }
32088
32451
 
32452
+ .cds--time-picker__input-field-error {
32453
+ width: 6.175rem;
32454
+ }
32455
+
32089
32456
  .cds--time-picker--light .cds--select-input {
32090
32457
  background-color: var(--cds-field-02, #ffffff);
32091
32458
  }
@@ -32626,6 +32993,10 @@ span.cds--pagination__text.cds--pagination__items-count {
32626
32993
  }
32627
32994
  }
32628
32995
 
32996
+ .cds--header__action > :first-child {
32997
+ margin-block-start: 0;
32998
+ }
32999
+
32629
33000
  .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
32630
33001
  .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
32631
33002
  display: none;
@@ -33007,7 +33378,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
33007
33378
  width: 0;
33008
33379
  }
33009
33380
 
33010
- .cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,
33011
33381
  .cds--side-nav--expanded {
33012
33382
  width: 16rem;
33013
33383
  }
@@ -33558,6 +33928,10 @@ a.cds--side-nav__link--current::before {
33558
33928
  }
33559
33929
  }
33560
33930
 
33931
+ .cds--header__action > :first-child {
33932
+ margin-block-start: 0;
33933
+ }
33934
+
33561
33935
  .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
33562
33936
  .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
33563
33937
  display: none;
@@ -33939,7 +34313,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
33939
34313
  width: 0;
33940
34314
  }
33941
34315
 
33942
- .cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,
33943
34316
  .cds--side-nav--expanded {
33944
34317
  width: 16rem;
33945
34318
  }