@carbon/ibm-products 2.1.1 → 2.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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
  }