@carbon/ibm-products 2.1.1 → 2.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (153) hide show
  1. package/css/index-full-carbon.css +586 -191
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +157 -1
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +2 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +344 -20
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +248 -95
  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/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +3 -0
  21. package/es/components/Cascade/Cascade.docs-page.js +22 -0
  22. package/es/components/Cascade/Cascade.js +11 -1
  23. package/es/components/CreateFullPage/CreateFullPage.docs-page.js +39 -0
  24. package/es/components/CreateFullPage/CreateFullPage.js +13 -0
  25. package/es/components/CreateModal/CreateModal.docs-page.js +24 -0
  26. package/es/components/CreateModal/CreateModal.js +7 -0
  27. package/es/components/CreateSidePanel/CreateSidePanel.docs-page.js +18 -0
  28. package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
  29. package/es/components/CreateTearsheet/CreateTearsheet.docs-page.js +29 -0
  30. package/es/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
  31. package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  32. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
  33. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +3 -2
  34. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
  35. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +5 -11
  36. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +12 -10
  37. package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
  38. package/es/components/Datagrid/utils/DatagridActions.js +6 -14
  39. package/es/components/EditFullPage/EditFullPage.docs-page.js +39 -0
  40. package/es/components/EditFullPage/EditFullPage.js +2 -1
  41. package/es/components/EditSidePanel/EditSidePanel.js +1 -1
  42. package/es/components/EditTearsheet/EditTearsheet.docs-page.js +25 -0
  43. package/es/components/EditTearsheet/EditTearsheet.js +4 -0
  44. package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
  45. package/es/components/EditUpdateCards/EditUpdateCards.js +3 -2
  46. package/es/components/EmptyStates/EmptyState.js +4 -0
  47. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
  48. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
  49. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
  50. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
  51. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
  52. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
  53. package/es/components/ExampleComponent/ExampleComponent.docs-page.js +22 -0
  54. package/es/components/ExportModal/ExportModal.js +4 -0
  55. package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
  56. package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
  57. package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
  58. package/es/components/ImportModal/ImportModal.docs-page.js +18 -0
  59. package/es/components/ImportModal/ImportModal.js +13 -6
  60. package/es/components/MultiAddSelect/MultiAddSelect.docs-page.js +17 -0
  61. package/es/components/MultiAddSelect/MultiAddSelect.js +4 -0
  62. package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
  63. package/es/components/PageHeader/PageHeaderUtils.js +2 -2
  64. package/es/components/RemoveModal/RemoveModal.docs-page.js +18 -0
  65. package/es/components/RemoveModal/RemoveModal.js +6 -0
  66. package/es/components/SingleAddSelect/SingleAddSelect.docs-page.js +15 -0
  67. package/es/components/SingleAddSelect/SingleAddSelect.js +4 -0
  68. package/es/components/StatusIcon/StatusIcon.docs-page.js +17 -0
  69. package/es/components/StatusIcon/StatusIcon.js +10 -0
  70. package/es/components/Tearsheet/TearsheetShell.js +11 -6
  71. package/es/components/Toolbar/Toolbar.docs-page.js +14 -0
  72. package/es/components/UserProfileImage/UserProfileImage.docs-page.js +17 -0
  73. package/es/components/UserProfileImage/UserProfileImage.js +1 -1
  74. package/es/components/WebTerminal/WebTerminal.docs-page.js +52 -0
  75. package/es/components/WebTerminal/WebTerminal.js +4 -0
  76. package/es/global/js/hooks/useCreateComponentStepChange.js +16 -15
  77. package/es/global/js/utils/StoryDocsPage.js +218 -0
  78. package/es/global/js/utils/story-helper.js +108 -6
  79. package/lib/components/APIKeyModal/APIKeyModal.docs-page.js +37 -0
  80. package/lib/components/AboutModal/AboutModal.docs-page.js +32 -0
  81. package/lib/components/AboutModal/AboutModal.js +1 -1
  82. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +3 -0
  83. package/lib/components/Cascade/Cascade.docs-page.js +33 -0
  84. package/lib/components/Cascade/Cascade.js +11 -1
  85. package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +50 -0
  86. package/lib/components/CreateFullPage/CreateFullPage.js +13 -0
  87. package/lib/components/CreateModal/CreateModal.docs-page.js +35 -0
  88. package/lib/components/CreateModal/CreateModal.js +7 -0
  89. package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js +29 -0
  90. package/lib/components/CreateSidePanel/CreateSidePanel.js +1 -1
  91. package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js +40 -0
  92. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
  93. package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
  94. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
  95. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +3 -2
  96. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
  97. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +4 -10
  98. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +12 -10
  99. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
  100. package/lib/components/Datagrid/utils/DatagridActions.js +5 -13
  101. package/lib/components/EditFullPage/EditFullPage.docs-page.js +50 -0
  102. package/lib/components/EditFullPage/EditFullPage.js +2 -1
  103. package/lib/components/EditSidePanel/EditSidePanel.js +1 -1
  104. package/lib/components/EditTearsheet/EditTearsheet.docs-page.js +36 -0
  105. package/lib/components/EditTearsheet/EditTearsheet.js +4 -0
  106. package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
  107. package/lib/components/EditUpdateCards/EditUpdateCards.js +3 -2
  108. package/lib/components/EmptyStates/EmptyState.js +4 -0
  109. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
  110. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
  111. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
  112. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
  113. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
  114. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
  115. package/lib/components/ExampleComponent/ExampleComponent.docs-page.js +33 -0
  116. package/lib/components/ExportModal/ExportModal.js +4 -0
  117. package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
  118. package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
  119. package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
  120. package/lib/components/ImportModal/ImportModal.docs-page.js +26 -0
  121. package/lib/components/ImportModal/ImportModal.js +13 -6
  122. package/lib/components/MultiAddSelect/MultiAddSelect.docs-page.js +25 -0
  123. package/lib/components/MultiAddSelect/MultiAddSelect.js +4 -0
  124. package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
  125. package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
  126. package/lib/components/RemoveModal/RemoveModal.docs-page.js +26 -0
  127. package/lib/components/RemoveModal/RemoveModal.js +6 -0
  128. package/lib/components/SingleAddSelect/SingleAddSelect.docs-page.js +23 -0
  129. package/lib/components/SingleAddSelect/SingleAddSelect.js +4 -0
  130. package/lib/components/StatusIcon/StatusIcon.docs-page.js +28 -0
  131. package/lib/components/StatusIcon/StatusIcon.js +10 -0
  132. package/lib/components/Tearsheet/TearsheetShell.js +11 -6
  133. package/lib/components/Toolbar/Toolbar.docs-page.js +25 -0
  134. package/lib/components/UserProfileImage/UserProfileImage.docs-page.js +28 -0
  135. package/lib/components/UserProfileImage/UserProfileImage.js +1 -1
  136. package/lib/components/WebTerminal/WebTerminal.docs-page.js +63 -0
  137. package/lib/components/WebTerminal/WebTerminal.js +4 -0
  138. package/lib/global/js/hooks/useCreateComponentStepChange.js +16 -15
  139. package/lib/global/js/utils/StoryDocsPage.js +225 -0
  140. package/lib/global/js/utils/story-helper.js +115 -7
  141. package/package.json +10 -10
  142. package/scss/components/Cascade/_storybook-styles.scss +3 -2
  143. package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
  144. package/scss/components/Datagrid/_storybook-styles.scss +8 -2
  145. package/scss/components/Datagrid/styles/_datagrid.scss +14 -0
  146. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +7 -0
  147. package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
  148. package/scss/components/NotificationsPanel/_storybook-styles.scss +10 -2
  149. package/scss/components/PageHeader/_storybook-styles.scss +24 -14
  150. package/scss/components/Tearsheet/_tearsheet.scss +7 -1
  151. package/scss/components/WebTerminal/_storybook-styles.scss +11 -1
  152. package/scss/global/styles/_display-box.scss +1 -0
  153. package/scss/components/HTTPErrors/_storybook-styles.scss +0 -6
@@ -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;
@@ -3560,11 +3704,13 @@ p.c4p--about-modal__copyright-text:first-child {
3560
3704
  padding: 1.5rem 2rem;
3561
3705
  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3562
3706
  margin: 0;
3707
+ background-color: var(--cds-layer);
3563
3708
  }
3564
3709
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
3565
3710
  padding: 1rem;
3566
3711
  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3567
3712
  margin: 0;
3713
+ background-color: var(--cds-layer);
3568
3714
  }
3569
3715
  .c4p--tearsheet .c4p--tearsheet__header-content {
3570
3716
  display: flex;
@@ -3655,10 +3801,13 @@ p.c4p--about-modal__copyright-text:first-child {
3655
3801
  .c4p--tearsheet .c4p--tearsheet__main {
3656
3802
  display: flex;
3657
3803
  flex-direction: row;
3658
- background-color: var(--cds-layer);
3804
+ background-color: var(--cds-background, #ffffff);
3659
3805
  grid-column: 1/-1;
3660
3806
  grid-row: 1/-1;
3661
3807
  }
3808
+ .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__main {
3809
+ background-color: var(--cds-layer);
3810
+ }
3662
3811
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
3663
3812
  border-right: none;
3664
3813
  border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -10616,6 +10765,14 @@ button.c4p--add-select__global-filter-toggle--open {
10616
10765
  padding: 0;
10617
10766
  }
10618
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
+
10619
10776
  /*
10620
10777
  * Licensed Materials - Property of IBM
10621
10778
  * 5724-Q36
@@ -11046,6 +11203,13 @@ button.c4p--add-select__global-filter-toggle--open {
11046
11203
  grid-template-columns: 1fr 1fr;
11047
11204
  }
11048
11205
 
11206
+ .c4p--datagrid-filter-flyout__trigger.cds--btn {
11207
+ display: flex;
11208
+ width: 3rem;
11209
+ height: 3rem;
11210
+ justify-content: center;
11211
+ }
11212
+
11049
11213
  .c4p--datagrid-filter-flyout__trigger--open.cds--btn.cds--btn--icon-only {
11050
11214
  position: relative;
11051
11215
  background-color: var(--cds-layer-02, #ffffff);
@@ -11169,6 +11333,10 @@ button.c4p--add-select__global-filter-toggle--open {
11169
11333
  }
11170
11334
 
11171
11335
  .cds--btn.c4p--datagrid-filter-panel-open-button {
11336
+ display: flex;
11337
+ width: 3rem;
11338
+ height: 3rem;
11339
+ justify-content: center;
11172
11340
  border-right: 1px solid var(--cds-layer-accent-01, #e0e0e0);
11173
11341
  border-bottom: none;
11174
11342
  }
@@ -13317,7 +13485,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
13317
13485
  width: 0;
13318
13486
  }
13319
13487
 
13320
- .cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,
13321
13488
  .cds--side-nav--expanded {
13322
13489
  width: 16rem;
13323
13490
  }
@@ -13752,6 +13919,157 @@ a.cds--side-nav__link--current::before {
13752
13919
  fill: ButtonText;
13753
13920
  }
13754
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
+
13755
14073
  .c4p--action-set {
13756
14074
  align-items: stretch;
13757
14075
  justify-content: flex-end;
@@ -13912,12 +14230,14 @@ a.cds--side-nav__link--current::before {
13912
14230
  padding: 1.5rem 2rem;
13913
14231
  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
13914
14232
  margin: 0;
14233
+ background-color: var(--cds-layer);
13915
14234
  }
13916
14235
 
13917
14236
  .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header {
13918
14237
  padding: 1rem;
13919
14238
  border-bottom: 1px solid var(--cds-border-subtle-01, #c6c6c6);
13920
14239
  margin: 0;
14240
+ background-color: var(--cds-layer);
13921
14241
  }
13922
14242
 
13923
14243
  .c4p--tearsheet .c4p--tearsheet__header-content {
@@ -14028,11 +14348,15 @@ a.cds--side-nav__link--current::before {
14028
14348
  .c4p--tearsheet .c4p--tearsheet__main {
14029
14349
  display: flex;
14030
14350
  flex-direction: row;
14031
- background-color: var(--cds-layer);
14351
+ background-color: var(--cds-background, #ffffff);
14032
14352
  grid-column: 1/-1;
14033
14353
  grid-row: 1/-1;
14034
14354
  }
14035
14355
 
14356
+ .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__main {
14357
+ background-color: var(--cds-layer);
14358
+ }
14359
+
14036
14360
  .c4p--tearsheet .c4p--tearsheet__main .c4p--tearsheet__influencer {
14037
14361
  border-right: none;
14038
14362
  border-left: 1px solid var(--cds-border-subtle-01, #c6c6c6);
@@ -14380,6 +14704,14 @@ video {
14380
14704
  vertical-align: baseline;
14381
14705
  }
14382
14706
 
14707
+ button,
14708
+ select,
14709
+ input,
14710
+ textarea {
14711
+ border-radius: 0;
14712
+ font-family: inherit;
14713
+ }
14714
+
14383
14715
  /* HTML5 display-role reset for older browsers */
14384
14716
  article,
14385
14717
  aside,
@@ -16017,6 +16349,8 @@ em {
16017
16349
  }
16018
16350
 
16019
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));
16020
16354
  box-sizing: border-box;
16021
16355
  padding: 0;
16022
16356
  border: 0;
@@ -16062,11 +16396,10 @@ em {
16062
16396
  position: relative;
16063
16397
  display: flex;
16064
16398
  width: 100%;
16065
- min-height: 2.5rem;
16399
+ min-height: var(--cds-layout-size-height-local);
16066
16400
  flex-direction: row-reverse;
16067
- align-items: flex-start;
16401
+ align-items: center;
16068
16402
  justify-content: flex-start;
16069
- padding: 0.625rem 0;
16070
16403
  margin: 0;
16071
16404
  color: var(--cds-text-primary, #161616);
16072
16405
  cursor: pointer;
@@ -16104,16 +16437,6 @@ em {
16104
16437
  }
16105
16438
  }
16106
16439
 
16107
- .cds--accordion--lg .cds--accordion__heading {
16108
- min-height: 3rem;
16109
- align-items: center;
16110
- }
16111
-
16112
- .cds--accordion--sm .cds--accordion__heading {
16113
- min-height: 2rem;
16114
- padding: 0.3125rem 0;
16115
- }
16116
-
16117
16440
  .cds--accordion__heading[disabled] {
16118
16441
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
16119
16442
  cursor: not-allowed;
@@ -16142,7 +16465,7 @@ li.cds--accordion__item--disabled:last-of-type {
16142
16465
  width: 1rem;
16143
16466
  height: 1rem;
16144
16467
  flex: 0 0 1rem;
16145
- margin: 2px 1rem 0 0;
16468
+ margin: 0 var(--cds-layout-density-padding-inline-local) 0 0;
16146
16469
  fill: var(--cds-icon-primary, #161616);
16147
16470
  transform: rotate(-270deg) /*rtl:ignore*/;
16148
16471
  transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -16156,14 +16479,13 @@ li.cds--accordion__item--disabled:last-of-type {
16156
16479
  z-index: 1;
16157
16480
  width: 100%;
16158
16481
  padding-right: 1rem;
16159
- margin: 0 0 0 1rem;
16482
+ margin: 0 0 0 var(--cds-layout-density-padding-inline-local);
16160
16483
  text-align: left;
16161
16484
  }
16162
16485
 
16163
16486
  .cds--accordion__content {
16164
16487
  display: none;
16165
- padding-right: 1rem;
16166
- padding-left: 1rem;
16488
+ padding-inline: var(--cds-layout-density-padding-inline-local);
16167
16489
  transition: padding cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
16168
16490
  }
16169
16491
  @media (min-width: 480px) {
@@ -16188,7 +16510,7 @@ li.cds--accordion__item--disabled:last-of-type {
16188
16510
  }
16189
16511
 
16190
16512
  .cds--accordion--start .cds--accordion__arrow {
16191
- margin: 2px 0 0 1rem;
16513
+ margin: 2px 0 0 var(--cds-layout-density-padding-inline-local);
16192
16514
  }
16193
16515
 
16194
16516
  .cds--accordion--start .cds--accordion__title {
@@ -16196,7 +16518,7 @@ li.cds--accordion__item--disabled:last-of-type {
16196
16518
  }
16197
16519
 
16198
16520
  .cds--accordion--start .cds--accordion__content {
16199
- margin-left: 2rem;
16521
+ margin-left: calc(var(--cds-layout-density-padding-inline-local) + 1rem);
16200
16522
  }
16201
16523
 
16202
16524
  .cds--accordion__item--collapsing .cds--accordion__content,
@@ -16632,6 +16954,15 @@ li.cds--accordion__item--disabled:last-of-type {
16632
16954
  }
16633
16955
 
16634
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
+ );
16635
16966
  box-sizing: border-box;
16636
16967
  padding: 0;
16637
16968
  border: 0;
@@ -16647,15 +16978,16 @@ li.cds--accordion__item--disabled:last-of-type {
16647
16978
  display: inline-flex;
16648
16979
  width: max-content;
16649
16980
  max-width: 20rem;
16650
- min-height: 3rem;
16981
+ height: var(--cds-layout-size-height-local);
16651
16982
  flex-shrink: 0;
16652
- align-items: center;
16653
16983
  justify-content: space-between;
16654
- padding: calc(0.875rem - 3px) calc(4rem - 1px) calc(0.875rem - 3px) calc(1rem - 1px);
16655
16984
  margin: 0;
16656
16985
  border-radius: 0;
16657
16986
  cursor: pointer;
16658
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);
16659
16991
  text-align: left;
16660
16992
  text-decoration: none;
16661
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);
@@ -16675,10 +17007,12 @@ li.cds--accordion__item--disabled:last-of-type {
16675
17007
  }
16676
17008
  .cds--btn .cds--btn__icon {
16677
17009
  position: absolute;
16678
- 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);
16679
17012
  width: 1rem;
16680
17013
  height: 1rem;
16681
17014
  flex-shrink: 0;
17015
+ margin-block-start: 0.0625rem;
16682
17016
  }
16683
17017
 
16684
17018
  .cds--btn::-moz-focus-inner {
@@ -16781,7 +17115,7 @@ li.cds--accordion__item--disabled:last-of-type {
16781
17115
  border-color: transparent;
16782
17116
  background-color: transparent;
16783
17117
  color: var(--cds-link-primary, #0f62fe);
16784
- padding: calc(0.875rem - 3px) 1rem;
17118
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
16785
17119
  }
16786
17120
  .cds--btn--ghost:hover {
16787
17121
  background-color: var(--cds-layer-hover);
@@ -16813,19 +17147,19 @@ li.cds--accordion__item--disabled:last-of-type {
16813
17147
  color: var(--cds-text-on-color-disabled, #8d8d8d);
16814
17148
  outline: none;
16815
17149
  }
16816
- .cds--btn--ghost.cds--btn--sm {
16817
- padding: calc(0.375rem - 3px) 1rem;
16818
- }
16819
- .cds--btn--ghost.cds--btn--field, .cds--btn--ghost.cds--btn--md {
16820
- padding: calc(0.675rem - 3px) 1rem;
16821
- }
16822
17150
  .cds--btn--ghost:not([disabled]) svg {
16823
17151
  fill: var(--cds-icon-primary, #161616);
16824
17152
  }
16825
17153
 
16826
17154
  .cds--btn--icon-only {
16827
- padding-right: 0.9375rem;
16828
- 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;
16829
17163
  }
16830
17164
  .cds--btn--icon-only .cds--btn__icon {
16831
17165
  position: static;
@@ -16857,15 +17191,12 @@ li.cds--accordion__item--disabled:last-of-type {
16857
17191
  cursor: not-allowed;
16858
17192
  }
16859
17193
 
16860
- .cds--btn--field.cds--btn--icon-only,
16861
- .cds--btn--md.cds--btn--icon-only {
16862
- padding-right: 0.6875rem;
16863
- padding-left: 0.6875rem;
17194
+ .cds--icon-tooltip--disabled .cds--tooltip-trigger__wrapper {
17195
+ cursor: not-allowed;
16864
17196
  }
16865
17197
 
16866
- .cds--btn--sm.cds--btn--icon-only {
16867
- padding-right: 0.4375rem;
16868
- padding-left: 0.4375rem;
17198
+ .cds--icon-tooltip--disabled .cds--btn--icon-only[disabled] {
17199
+ pointer-events: none;
16869
17200
  }
16870
17201
 
16871
17202
  .cds--btn--danger {
@@ -16937,7 +17268,7 @@ li.cds--accordion__item--disabled:last-of-type {
16937
17268
  border-color: transparent;
16938
17269
  background-color: transparent;
16939
17270
  color: var(--cds-button-danger-secondary, #da1e28);
16940
- padding: calc(0.875rem - 3px) 1rem;
17271
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
16941
17272
  }
16942
17273
  .cds--btn--danger--ghost:hover {
16943
17274
  background-color: var(--cds-button-danger-hover, #b81921);
@@ -16966,46 +17297,12 @@ li.cds--accordion__item--disabled:last-of-type {
16966
17297
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
16967
17298
  outline: none;
16968
17299
  }
16969
- .cds--btn--danger--ghost.cds--btn--sm {
16970
- padding: calc(0.375rem - 3px) 1rem;
16971
- }
16972
- .cds--btn--danger--ghost.cds--btn--field, .cds--btn--danger--ghost.cds--btn--md {
16973
- padding: calc(0.675rem - 3px) 1rem;
16974
- }
16975
-
16976
- .cds--btn--sm {
16977
- min-height: 2rem;
16978
- padding: calc(0.375rem - 3px) calc(4rem - 4px) calc(0.375rem - 3px) calc(1rem - 4px);
16979
- }
16980
-
16981
- .cds--btn--2xl:not(.cds--btn--icon-only) {
16982
- align-items: baseline;
16983
- padding-top: 1rem;
16984
- padding-right: 4rem;
16985
- padding-left: 1rem;
16986
- min-height: 5rem;
16987
- }
16988
-
16989
- .cds--btn--xl:not(.cds--btn--icon-only) {
16990
- align-items: baseline;
16991
- padding-top: 1rem;
16992
- padding-right: 4rem;
16993
- padding-left: 1rem;
16994
- min-height: 4rem;
16995
- }
16996
-
16997
- .cds--btn--field,
16998
- .cds--btn--md {
16999
- min-height: 2.5rem;
17000
- padding: calc(0.675rem - 3px) calc(4rem - 4px) calc(0.675rem - 3px) calc(1rem - 4px);
17001
- }
17002
17300
 
17003
17301
  .cds--btn--expressive {
17004
17302
  font-size: var(--cds-body-compact-02-font-size, 1rem);
17005
17303
  font-weight: var(--cds-body-compact-02-font-weight, 400);
17006
17304
  line-height: var(--cds-body-compact-02-line-height, 1.375);
17007
17305
  letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
17008
- min-height: 3rem;
17009
17306
  }
17010
17307
 
17011
17308
  .cds--btn--icon-only.cds--btn--expressive {
@@ -17306,6 +17603,7 @@ input[data-invalid] ~ .cds--form-requirement,
17306
17603
  .cds--date-picker-input__wrapper--warn ~ .cds--form-requirement,
17307
17604
  .cds--date-picker-input__wrapper--invalid ~ .cds--form-requirement,
17308
17605
  .cds--time-picker--invalid ~ .cds--form-requirement,
17606
+ .cds--time-picker--warning ~ .cds--form-requirement,
17309
17607
  .cds--text-input__field-wrapper[data-invalid] ~ .cds--form-requirement,
17310
17608
  .cds--text-input__field-wrapper--warning ~ .cds--form-requirement,
17311
17609
  .cds--text-input__field-wrapper--warning > .cds--text-input ~ .cds--form-requirement,
@@ -17695,6 +17993,8 @@ fieldset[disabled] .cds--form__helper-text {
17695
17993
  }
17696
17994
 
17697
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));
17698
17998
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
17699
17999
  font-weight: var(--cds-body-compact-01-font-weight, 400);
17700
18000
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
@@ -17702,8 +18002,8 @@ fieldset[disabled] .cds--form__helper-text {
17702
18002
  outline: 2px solid transparent;
17703
18003
  outline-offset: -2px;
17704
18004
  width: 100%;
17705
- height: 2.5rem;
17706
- padding: 0 1rem;
18005
+ height: var(--cds-layout-size-height-local);
18006
+ padding: 0 var(--cds-layout-density-padding-inline-local);
17707
18007
  border: none;
17708
18008
  border-bottom: 1px solid var(--cds-border-strong);
17709
18009
  background-color: var(--cds-field);
@@ -17740,14 +18040,6 @@ fieldset[disabled] .cds--form__helper-text {
17740
18040
  display: none;
17741
18041
  }
17742
18042
 
17743
- .cds--text-input--lg {
17744
- height: 3rem;
17745
- }
17746
-
17747
- .cds--text-input--sm {
17748
- height: 2rem;
17749
- }
17750
-
17751
18043
  .cds--password-input {
17752
18044
  padding-right: 2.5rem;
17753
18045
  }
@@ -18291,6 +18583,10 @@ fieldset[disabled] .cds--form__helper-text {
18291
18583
  }
18292
18584
 
18293
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)));
18294
18590
  font-size: var(--cds-label-01-font-size, 0.75rem);
18295
18591
  font-weight: var(--cds-label-01-font-weight, 400);
18296
18592
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -18300,16 +18596,25 @@ fieldset[disabled] .cds--form__helper-text {
18300
18596
  display: inline-flex;
18301
18597
  min-width: 2rem;
18302
18598
  max-width: 100%;
18303
- min-height: 1.5rem;
18599
+ min-height: var(--cds-layout-size-height-local);
18304
18600
  align-items: center;
18305
18601
  justify-content: center;
18306
- padding: 0.25rem 0.5rem;
18307
18602
  margin: 0.25rem;
18308
18603
  border-radius: 0.9375rem;
18309
18604
  cursor: default;
18605
+ padding-inline: 0.5rem;
18310
18606
  vertical-align: middle;
18311
18607
  word-break: break-word;
18312
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
+ }
18313
18618
  .cds--tag.cds--tag--interactive:hover,
18314
18619
  .cds--tag .cds--tag__close-icon:hover {
18315
18620
  background-color: var(--cds-tag-hover-gray, #c6c6c6);
@@ -18480,8 +18785,8 @@ fieldset[disabled] .cds--form__helper-text {
18480
18785
 
18481
18786
  .cds--tag__close-icon {
18482
18787
  display: flex;
18483
- width: 1.5rem;
18484
- height: 1.5rem;
18788
+ width: var(--cds-layout-size-height-local);
18789
+ height: var(--cds-layout-size-height-local);
18485
18790
  flex-shrink: 0;
18486
18791
  align-items: center;
18487
18792
  justify-content: center;
@@ -18535,18 +18840,11 @@ fieldset[disabled] .cds--form__helper-text {
18535
18840
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
18536
18841
  }
18537
18842
 
18538
- .cds--tag--sm {
18539
- min-height: 1.125rem;
18540
- padding: 0 0.5rem;
18541
- }
18542
-
18543
18843
  .cds--tag--sm.cds--tag--filter {
18544
18844
  padding-right: 0;
18545
18845
  }
18546
18846
 
18547
18847
  .cds--tag--sm .cds--tag__close-icon {
18548
- width: 1.125rem;
18549
- height: 1.125rem;
18550
18848
  margin-left: 0.3125rem;
18551
18849
  }
18552
18850
 
@@ -19455,13 +19753,23 @@ fieldset[disabled] .cds--form__helper-text {
19455
19753
  transform: rotate(180deg);
19456
19754
  }
19457
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
+
19458
19766
  .cds--contained-list__header {
19459
19767
  position: sticky;
19460
19768
  z-index: 1;
19461
19769
  top: 0;
19462
19770
  display: flex;
19463
19771
  align-items: center;
19464
- padding-inline: 1rem;
19772
+ padding-inline: var(--cds-layout-density-padding-inline-local);
19465
19773
  }
19466
19774
 
19467
19775
  .cds--contained-list__label {
@@ -19471,7 +19779,7 @@ fieldset[disabled] .cds--form__helper-text {
19471
19779
  .cds--contained-list .cds--search {
19472
19780
  position: sticky;
19473
19781
  z-index: 1;
19474
- top: 48px;
19782
+ top: var(--cds-layout-size-height-local);
19475
19783
  }
19476
19784
  .cds--contained-list .cds--search.cds--search--expandable .cds--search-input {
19477
19785
  background-color: var(--cds-field);
@@ -19510,46 +19818,6 @@ fieldset[disabled] .cds--form__helper-text {
19510
19818
  outline: none;
19511
19819
  }
19512
19820
 
19513
- .cds--contained-list--on-page.cds--contained-list--sm .cds--contained-list__header {
19514
- height: 2rem;
19515
- }
19516
-
19517
- .cds--contained-list--sm .cds--contained-list-item__content,
19518
- .cds--contained-list--sm .cds--contained-list-item--clickable .cds--contained-list-item__content {
19519
- min-height: 2rem;
19520
- padding: calc(0.5rem - 0.125rem) 1rem;
19521
- }
19522
-
19523
- .cds--contained-list--on-page.cds--contained-list--md .cds--contained-list__header {
19524
- height: 2.5rem;
19525
- }
19526
-
19527
- .cds--contained-list--md .cds--contained-list-item__content,
19528
- .cds--contained-list--md .cds--contained-list-item--clickable .cds--contained-list-item__content {
19529
- min-height: 2.5rem;
19530
- padding: calc(0.75rem - 0.125rem) 1rem;
19531
- }
19532
-
19533
- .cds--contained-list--on-page.cds--contained-list--lg .cds--contained-list__header {
19534
- height: 3rem;
19535
- }
19536
-
19537
- .cds--contained-list--lg .cds--contained-list-item__content,
19538
- .cds--contained-list--lg .cds--contained-list-item--clickable .cds--contained-list-item__content {
19539
- min-height: 3rem;
19540
- padding: calc(1rem - 0.125rem) 1rem;
19541
- }
19542
-
19543
- .cds--contained-list--on-page.cds--contained-list--xl .cds--contained-list__header {
19544
- height: 4rem;
19545
- }
19546
-
19547
- .cds--contained-list--xl .cds--contained-list-item__content,
19548
- .cds--contained-list--xl .cds--contained-list-item--clickable .cds--contained-list-item__content {
19549
- min-height: 4rem;
19550
- padding: calc(1.5rem - 0.125rem) 1rem;
19551
- }
19552
-
19553
19821
  .cds--contained-list--on-page + .cds--contained-list--on-page {
19554
19822
  margin-block-start: 1rem;
19555
19823
  }
@@ -19559,6 +19827,7 @@ fieldset[disabled] .cds--form__helper-text {
19559
19827
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
19560
19828
  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
19561
19829
  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
19830
+ height: var(--cds-layout-size-height-local);
19562
19831
  border-bottom: 1px solid var(--cds-border-subtle);
19563
19832
  background-color: var(--cds-background, #ffffff);
19564
19833
  color: var(--cds-text-primary, #161616);
@@ -19584,12 +19853,17 @@ fieldset[disabled] .cds--form__helper-text {
19584
19853
 
19585
19854
  .cds--contained-list-item {
19586
19855
  position: relative;
19856
+ list-style: none;
19587
19857
  }
19588
19858
 
19589
19859
  .cds--contained-list-item:not(:first-of-type) {
19590
19860
  margin-top: -1px;
19591
19861
  }
19592
19862
 
19863
+ .cds--contained-list-item__content {
19864
+ box-sizing: border-box;
19865
+ }
19866
+
19593
19867
  .cds--contained-list-item--clickable .cds--contained-list-item__content {
19594
19868
  box-sizing: border-box;
19595
19869
  padding: 0;
@@ -19620,10 +19894,15 @@ fieldset[disabled] .cds--form__helper-text {
19620
19894
 
19621
19895
  .cds--contained-list-item__content,
19622
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
+ );
19623
19900
  font-size: var(--cds-body-01-font-size, 0.875rem);
19624
19901
  font-weight: var(--cds-body-01-font-weight, 400);
19625
19902
  line-height: var(--cds-body-01-line-height, 1.42857);
19626
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);
19627
19906
  color: var(--cds-text-primary, #161616);
19628
19907
  }
19629
19908
 
@@ -19638,8 +19917,8 @@ fieldset[disabled] .cds--form__helper-text {
19638
19917
  }
19639
19918
 
19640
19919
  .cds--contained-list--inset-rulers .cds--contained-list-item:not(:last-of-type)::before {
19641
- right: 1rem;
19642
- left: 1rem;
19920
+ right: var(--cds-layout-density-padding-inline-local);
19921
+ left: var(--cds-layout-density-padding-inline-local);
19643
19922
  }
19644
19923
 
19645
19924
  .cds--contained-list-item--clickable .cds--contained-list-item__content:not(:disabled):hover {
@@ -19707,20 +19986,14 @@ fieldset[disabled] .cds--form__helper-text {
19707
19986
  }
19708
19987
 
19709
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));
19710
19991
  display: flex;
19711
19992
  width: 100%;
19712
- height: 2.5rem;
19993
+ height: var(--cds-layout-size-height-local);
19713
19994
  justify-content: space-evenly;
19714
19995
  }
19715
19996
 
19716
- .cds--content-switcher--sm {
19717
- height: 2rem;
19718
- }
19719
-
19720
- .cds--content-switcher--lg {
19721
- height: 3rem;
19722
- }
19723
-
19724
19997
  .cds--content-switcher-btn {
19725
19998
  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
19726
19999
  outline: 2px solid transparent;
@@ -19732,9 +20005,6 @@ fieldset[disabled] .cds--form__helper-text {
19732
20005
  position: relative;
19733
20006
  display: inline-flex;
19734
20007
  overflow: hidden;
19735
- width: 100%;
19736
- align-items: center;
19737
- padding: 0.5rem 1rem;
19738
20008
  border: none;
19739
20009
  border-top: 0.0625rem solid var(--cds-border-inverse, #161616);
19740
20010
  border-bottom: 0.0625rem solid var(--cds-border-inverse, #161616);
@@ -19812,6 +20082,12 @@ fieldset[disabled] .cds--form__helper-text {
19812
20082
  border-color: var(--cds-border-disabled, #c6c6c6);
19813
20083
  }
19814
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
+
19815
20091
  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
19816
20092
  border-left: 0.0625rem solid var(--cds-border-inverse, #161616);
19817
20093
  border-bottom-left-radius: 0.25rem;
@@ -20099,6 +20375,34 @@ fieldset[disabled] .cds--form__helper-text {
20099
20375
  vertical-align: middle;
20100
20376
  }
20101
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
+
20102
20406
  .cds--data-table th[align=right],
20103
20407
  .cds--data-table td[align=right] {
20104
20408
  text-align: right;
@@ -20379,7 +20683,8 @@ tr.cds--data-table--selected:last-of-type td {
20379
20683
  height: calc(100% + 1px);
20380
20684
  }
20381
20685
 
20382
- .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 {
20383
20688
  padding-top: 0;
20384
20689
  padding-bottom: 0;
20385
20690
  }
@@ -20401,12 +20706,14 @@ tr.cds--data-table--selected:last-of-type td {
20401
20706
  }
20402
20707
 
20403
20708
  .cds--data-table--sm td,
20404
- .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 {
20405
20711
  padding-top: 0.4375rem;
20406
20712
  padding-bottom: 0.375rem;
20407
20713
  }
20408
20714
 
20409
- .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 {
20410
20717
  padding-top: 0.1875rem;
20411
20718
  padding-bottom: 0.1875rem;
20412
20719
  }
@@ -20421,7 +20728,8 @@ tr.cds--data-table--selected:last-of-type td {
20421
20728
  height: 2.5rem;
20422
20729
  }
20423
20730
 
20424
- .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 {
20425
20733
  padding-top: 0.4375rem;
20426
20734
  padding-bottom: 0.4375rem;
20427
20735
  }
@@ -20432,7 +20740,8 @@ tr.cds--data-table--selected:last-of-type td {
20432
20740
  padding-bottom: 0.375rem;
20433
20741
  }
20434
20742
 
20435
- .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 {
20436
20745
  padding-top: 0.1875rem;
20437
20746
  padding-bottom: 0.1875rem;
20438
20747
  }
@@ -20456,6 +20765,7 @@ tr.cds--data-table--selected:last-of-type td {
20456
20765
  .cds--data-table--xl td,
20457
20766
  .cds--data-table--xl tbody tr th {
20458
20767
  padding-top: 1rem;
20768
+ padding-bottom: 1rem;
20459
20769
  }
20460
20770
 
20461
20771
  .cds--data-table--xl th,
@@ -21377,6 +21687,25 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
21377
21687
  border: 0;
21378
21688
  }
21379
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
+
21380
21709
  .cds--table-expand__button:focus {
21381
21710
  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe);
21382
21711
  outline: none;
@@ -21390,7 +21719,6 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
21390
21719
 
21391
21720
  .cds--data-table--xl .cds--table-expand__button {
21392
21721
  width: 2rem;
21393
- padding: 0;
21394
21722
  }
21395
21723
 
21396
21724
  tr.cds--parent-row.cds--expandable-row td.cds--table-expand + td::after {
@@ -21725,6 +22053,30 @@ th .cds--table-sort__flex {
21725
22053
  justify-content: space-between;
21726
22054
  }
21727
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
+
21728
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 {
21729
22081
  /* IE11 workaround for align-items: center and min-height
21730
22082
  https://github.com/philipwalton/flexbugs/issues/231 */
@@ -26561,6 +26913,10 @@ optgroup.cds--select-optgroup:disabled,
26561
26913
  white-space: nowrap;
26562
26914
  }
26563
26915
 
26916
+ .cds--menu-item__shortcut {
26917
+ display: flex;
26918
+ }
26919
+
26564
26920
  .cds--menu--with-icons > .cds--menu-item,
26565
26921
  .cds--menu--with-icons > .cds--menu-item-group > ul > .cds--menu-item,
26566
26922
  .cds--menu--with-icons > .cds--menu-item-radio-group > ul > .cds--menu-item {
@@ -28047,7 +28403,8 @@ optgroup.cds--select-optgroup:disabled,
28047
28403
 
28048
28404
  /* Tertiary action button when not inline (toast) */
28049
28405
  .cds--actionable-notification__action-button.cds--btn--tertiary {
28050
- padding: 0 1rem;
28406
+ padding-right: 1rem;
28407
+ padding-left: 1rem;
28051
28408
  margin-bottom: 1rem;
28052
28409
  margin-left: calc(2rem + 1.25rem - 0.125rem);
28053
28410
  }
@@ -28259,6 +28616,10 @@ optgroup.cds--select-optgroup:disabled,
28259
28616
  background-color: var(--cds-layer-hover);
28260
28617
  }
28261
28618
 
28619
+ .cds--overflow-menu > :first-child {
28620
+ margin-block-start: 0;
28621
+ }
28622
+
28262
28623
  .cds--overflow-menu--sm {
28263
28624
  width: 2rem;
28264
28625
  height: 2rem;
@@ -28786,6 +29147,11 @@ span.cds--pagination__text.cds--pagination__items-count {
28786
29147
  box-sizing: inherit;
28787
29148
  }
28788
29149
 
29150
+ .cds--pagination__button > svg,
29151
+ .cds--btn--ghost.cds--pagination__button > svg {
29152
+ margin-block-start: 0;
29153
+ }
29154
+
28789
29155
  .cds--pagination--sm .cds--pagination__button,
28790
29156
  .cds--pagination--sm .cds--btn--ghost.cds--pagination__button {
28791
29157
  width: 2rem;
@@ -29525,6 +29891,10 @@ span.cds--pagination__text.cds--pagination__items-count {
29525
29891
  fill: var(--cds-icon-primary, #161616);
29526
29892
  }
29527
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
+
29528
29898
  .cds--progress-bar__label {
29529
29899
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
29530
29900
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -29533,8 +29903,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29533
29903
  display: flex;
29534
29904
  min-width: 3rem;
29535
29905
  justify-content: space-between;
29536
- margin-bottom: 0.5rem;
29537
29906
  color: var(--cds-text-primary, #161616);
29907
+ margin-block-end: 0.5rem;
29538
29908
  }
29539
29909
 
29540
29910
  .cds--progress-bar__label-text {
@@ -29596,7 +29966,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29596
29966
 
29597
29967
  .cds--progress-bar__status-icon {
29598
29968
  flex-shrink: 0;
29599
- margin-left: 1rem;
29969
+ margin-inline-start: var(--cds-layout-density-padding-inline-local);
29600
29970
  }
29601
29971
 
29602
29972
  .cds--progress-bar--finished .cds--progress-bar__bar,
@@ -29633,7 +30003,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29633
30003
  .cds--progress-bar--error.cds--progress-bar--inline .cds--progress-bar__label {
29634
30004
  flex-shrink: 1;
29635
30005
  justify-content: flex-start;
29636
- margin-right: 0;
30006
+ margin-inline-end: 0;
29637
30007
  }
29638
30008
 
29639
30009
  @keyframes progress-bar-indeterminate {
@@ -29652,7 +30022,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29652
30022
  .cds--progress-bar--inline .cds--progress-bar__label {
29653
30023
  flex-shrink: 0;
29654
30024
  margin-bottom: 0;
29655
- margin-inline-end: 1rem;
30025
+ margin-inline-end: var(--cds-layout-density-padding-inline-local);
29656
30026
  }
29657
30027
 
29658
30028
  .cds--progress-bar--inline .cds--progress-bar__track {
@@ -29675,7 +30045,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29675
30045
 
29676
30046
  .cds--progress-bar--indented .cds--progress-bar__label,
29677
30047
  .cds--progress-bar--indented .cds--progress-bar__helper-text {
29678
- padding-inline: 1rem;
30048
+ padding-inline: var(--cds-layout-density-padding-inline-local);
29679
30049
  }
29680
30050
 
29681
30051
  .cds--tooltip {
@@ -30452,11 +30822,10 @@ span.cds--pagination__text.cds--pagination__items-count {
30452
30822
  }
30453
30823
 
30454
30824
  .cds--slider__range-label {
30455
- font-family: var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);
30456
- font-size: var(--cds-code-02-font-size, 0.875rem);
30457
- font-weight: var(--cds-code-02-font-weight, 400);
30458
- line-height: var(--cds-code-02-line-height, 1.42857);
30459
- 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);
30460
30829
  color: var(--cds-text-primary, #161616);
30461
30830
  white-space: nowrap;
30462
30831
  }
@@ -31243,10 +31612,15 @@ span.cds--pagination__text.cds--pagination__items-count {
31243
31612
  .cds--tabs .cds--tabs__nav-item--icon .cds--tabs__nav-item--close-icon {
31244
31613
  padding: 0.25rem;
31245
31614
  margin: -0.25rem;
31246
- cursor: pointer;
31247
31615
  line-height: 0;
31248
31616
  pointer-events: auto;
31249
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
+ }
31250
31624
  .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
31251
31625
  padding-left: 1rem;
31252
31626
  }
@@ -32033,10 +32407,21 @@ span.cds--pagination__text.cds--pagination__items-count {
32033
32407
  }
32034
32408
 
32035
32409
  .cds--time-picker__input {
32410
+ position: relative;
32036
32411
  display: flex;
32037
32412
  flex-direction: column;
32038
32413
  }
32039
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
+
32040
32425
  .cds--time-picker .cds--select-input {
32041
32426
  width: auto;
32042
32427
  min-width: auto;
@@ -32064,6 +32449,10 @@ span.cds--pagination__text.cds--pagination__items-count {
32064
32449
  opacity: 1;
32065
32450
  }
32066
32451
 
32452
+ .cds--time-picker__input-field-error {
32453
+ width: 6.175rem;
32454
+ }
32455
+
32067
32456
  .cds--time-picker--light .cds--select-input {
32068
32457
  background-color: var(--cds-field-02, #ffffff);
32069
32458
  }
@@ -32604,6 +32993,10 @@ span.cds--pagination__text.cds--pagination__items-count {
32604
32993
  }
32605
32994
  }
32606
32995
 
32996
+ .cds--header__action > :first-child {
32997
+ margin-block-start: 0;
32998
+ }
32999
+
32607
33000
  .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
32608
33001
  .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
32609
33002
  display: none;
@@ -32985,7 +33378,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
32985
33378
  width: 0;
32986
33379
  }
32987
33380
 
32988
- .cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,
32989
33381
  .cds--side-nav--expanded {
32990
33382
  width: 16rem;
32991
33383
  }
@@ -33536,6 +33928,10 @@ a.cds--side-nav__link--current::before {
33536
33928
  }
33537
33929
  }
33538
33930
 
33931
+ .cds--header__action > :first-child {
33932
+ margin-block-start: 0;
33933
+ }
33934
+
33539
33935
  .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
33540
33936
  .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
33541
33937
  display: none;
@@ -33917,7 +34313,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
33917
34313
  width: 0;
33918
34314
  }
33919
34315
 
33920
- .cds--side-nav.cds--side-nav--rail:not(.cds--side-nav--fixed):hover,
33921
34316
  .cds--side-nav--expanded {
33922
34317
  width: 16rem;
33923
34318
  }