@carbon/ibm-products 2.3.2 → 2.4.0

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 (47) hide show
  1. package/css/index-full-carbon.css +235 -110
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +24 -24
  6. package/css/index-without-carbon-released-only.min.css +1 -1
  7. package/css/index-without-carbon.css +59 -54
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +2 -2
  10. package/css/index-without-carbon.min.css.map +1 -1
  11. package/css/index.css +122 -38
  12. package/css/index.css.map +1 -1
  13. package/css/index.min.css +3 -3
  14. package/css/index.min.css.map +1 -1
  15. package/es/components/Datagrid/Datagrid/Datagrid.js +5 -1
  16. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +15 -21
  17. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +6 -20
  18. package/es/components/Datagrid/Datagrid.docs-page.js +123 -0
  19. package/es/components/Datagrid/Extensions/ColumnAlignment/ColumnAlignment.docs-page.js +13 -0
  20. package/es/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.docs-page.js +13 -0
  21. package/es/components/Datagrid/Extensions/EditableCell/EditableCell.docs-page.js +47 -0
  22. package/es/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js +13 -0
  23. package/es/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +57 -0
  24. package/es/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.docs-page.js +13 -0
  25. package/es/components/Datagrid/utils/DatagridActions.js +1 -1
  26. package/es/components/Datagrid/utils/getArgTypes.js +4 -0
  27. package/es/components/FilterSummary/FilterSummary.js +7 -3
  28. package/es/components/OptionsTile/OptionsTile.js +8 -1
  29. package/es/global/js/utils/StoryDocsPage.js +6 -2
  30. package/lib/components/Datagrid/Datagrid/Datagrid.js +5 -1
  31. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +14 -20
  32. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +6 -23
  33. package/lib/components/Datagrid/Datagrid.docs-page.js +134 -0
  34. package/lib/components/Datagrid/Extensions/ColumnAlignment/ColumnAlignment.docs-page.js +21 -0
  35. package/lib/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.docs-page.js +21 -0
  36. package/lib/components/Datagrid/Extensions/EditableCell/EditableCell.docs-page.js +55 -0
  37. package/lib/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js +21 -0
  38. package/lib/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +65 -0
  39. package/lib/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.docs-page.js +21 -0
  40. package/lib/components/Datagrid/utils/DatagridActions.js +1 -1
  41. package/lib/components/Datagrid/utils/getArgTypes.js +4 -0
  42. package/lib/components/FilterSummary/FilterSummary.js +7 -3
  43. package/lib/components/OptionsTile/OptionsTile.js +8 -1
  44. package/lib/global/js/utils/StoryDocsPage.js +6 -2
  45. package/package.json +16 -16
  46. package/scss/components/Datagrid/_datagrid.scss +17 -10
  47. package/scss/components/FilterSummary/_storybook-styles.scss +2 -0
@@ -2943,15 +2943,15 @@ p.c4p--about-modal__copyright-text:first-child {
2943
2943
  --cds-layout-size-height: var(--cds-layout-size-height-context);
2944
2944
  }
2945
2945
 
2946
- .cds--layout-constraint--size\:default-xs {
2946
+ .cds--layout-constraint--size__default-xs {
2947
2947
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
2948
2948
  }
2949
2949
 
2950
- .cds--layout-constraint--size\:min-xs {
2950
+ .cds--layout-constraint--size__min-xs {
2951
2951
  --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
2952
2952
  }
2953
2953
 
2954
- .cds--layout-constraint--size\:max-xs {
2954
+ .cds--layout-constraint--size__max-xs {
2955
2955
  --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
2956
2956
  }
2957
2957
 
@@ -2960,15 +2960,15 @@ p.c4p--about-modal__copyright-text:first-child {
2960
2960
  --cds-layout-size-height: var(--cds-layout-size-height-context);
2961
2961
  }
2962
2962
 
2963
- .cds--layout-constraint--size\:default-sm {
2963
+ .cds--layout-constraint--size__default-sm {
2964
2964
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
2965
2965
  }
2966
2966
 
2967
- .cds--layout-constraint--size\:min-sm {
2967
+ .cds--layout-constraint--size__min-sm {
2968
2968
  --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
2969
2969
  }
2970
2970
 
2971
- .cds--layout-constraint--size\:max-sm {
2971
+ .cds--layout-constraint--size__max-sm {
2972
2972
  --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
2973
2973
  }
2974
2974
 
@@ -2977,15 +2977,15 @@ p.c4p--about-modal__copyright-text:first-child {
2977
2977
  --cds-layout-size-height: var(--cds-layout-size-height-context);
2978
2978
  }
2979
2979
 
2980
- .cds--layout-constraint--size\:default-md {
2980
+ .cds--layout-constraint--size__default-md {
2981
2981
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
2982
2982
  }
2983
2983
 
2984
- .cds--layout-constraint--size\:min-md {
2984
+ .cds--layout-constraint--size__min-md {
2985
2985
  --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
2986
2986
  }
2987
2987
 
2988
- .cds--layout-constraint--size\:max-md {
2988
+ .cds--layout-constraint--size__max-md {
2989
2989
  --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
2990
2990
  }
2991
2991
 
@@ -2994,15 +2994,15 @@ p.c4p--about-modal__copyright-text:first-child {
2994
2994
  --cds-layout-size-height: var(--cds-layout-size-height-context);
2995
2995
  }
2996
2996
 
2997
- .cds--layout-constraint--size\:default-lg {
2997
+ .cds--layout-constraint--size__default-lg {
2998
2998
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
2999
2999
  }
3000
3000
 
3001
- .cds--layout-constraint--size\:min-lg {
3001
+ .cds--layout-constraint--size__min-lg {
3002
3002
  --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
3003
3003
  }
3004
3004
 
3005
- .cds--layout-constraint--size\:max-lg {
3005
+ .cds--layout-constraint--size__max-lg {
3006
3006
  --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
3007
3007
  }
3008
3008
 
@@ -3011,15 +3011,15 @@ p.c4p--about-modal__copyright-text:first-child {
3011
3011
  --cds-layout-size-height: var(--cds-layout-size-height-context);
3012
3012
  }
3013
3013
 
3014
- .cds--layout-constraint--size\:default-xl {
3014
+ .cds--layout-constraint--size__default-xl {
3015
3015
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
3016
3016
  }
3017
3017
 
3018
- .cds--layout-constraint--size\:min-xl {
3018
+ .cds--layout-constraint--size__min-xl {
3019
3019
  --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
3020
3020
  }
3021
3021
 
3022
- .cds--layout-constraint--size\:max-xl {
3022
+ .cds--layout-constraint--size__max-xl {
3023
3023
  --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
3024
3024
  }
3025
3025
 
@@ -3028,15 +3028,15 @@ p.c4p--about-modal__copyright-text:first-child {
3028
3028
  --cds-layout-size-height: var(--cds-layout-size-height-context);
3029
3029
  }
3030
3030
 
3031
- .cds--layout-constraint--size\:default-2xl {
3031
+ .cds--layout-constraint--size__default-2xl {
3032
3032
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
3033
3033
  }
3034
3034
 
3035
- .cds--layout-constraint--size\:min-2xl {
3035
+ .cds--layout-constraint--size__min-2xl {
3036
3036
  --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
3037
3037
  }
3038
3038
 
3039
- .cds--layout-constraint--size\:max-2xl {
3039
+ .cds--layout-constraint--size__max-2xl {
3040
3040
  --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
3041
3041
  }
3042
3042
 
@@ -3045,15 +3045,15 @@ p.c4p--about-modal__copyright-text:first-child {
3045
3045
  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
3046
3046
  }
3047
3047
 
3048
- .cds--layout-constraint--density\:default-condensed {
3048
+ .cds--layout-constraint--density__default-condensed {
3049
3049
  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
3050
3050
  }
3051
3051
 
3052
- .cds--layout-constraint--density\:min-condensed {
3052
+ .cds--layout-constraint--density__min-condensed {
3053
3053
  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
3054
3054
  }
3055
3055
 
3056
- .cds--layout-constraint--density\:max-condensed {
3056
+ .cds--layout-constraint--density__max-condensed {
3057
3057
  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
3058
3058
  }
3059
3059
 
@@ -3062,15 +3062,15 @@ p.c4p--about-modal__copyright-text:first-child {
3062
3062
  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
3063
3063
  }
3064
3064
 
3065
- .cds--layout-constraint--density\:default-normal {
3065
+ .cds--layout-constraint--density__default-normal {
3066
3066
  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
3067
3067
  }
3068
3068
 
3069
- .cds--layout-constraint--density\:min-normal {
3069
+ .cds--layout-constraint--density__min-normal {
3070
3070
  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
3071
3071
  }
3072
3072
 
3073
- .cds--layout-constraint--density\:max-normal {
3073
+ .cds--layout-constraint--density__max-normal {
3074
3074
  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
3075
3075
  }
3076
3076
 
@@ -11865,14 +11865,19 @@ th.c4p--datagrid__select-all-toggle-on.button {
11865
11865
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11866
11866
  display: none;
11867
11867
  }
11868
- .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11869
- left: 0.125rem;
11870
- width: 112px;
11868
+
11869
+ .c4p--datagrid .c4p--datagrid__row-size-options-container .cds--popover-container .cds--btn--icon-only {
11870
+ display: flex;
11871
+ width: 3rem;
11872
+ height: 3rem;
11873
+ align-items: center;
11874
+ justify-content: center;
11875
+ padding-top: 0;
11871
11876
  }
11872
11877
 
11873
- .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11874
- left: 0.125rem;
11875
- width: 112px;
11878
+ .c4p--datagrid .c4p--datagrid__row-size-options-container .c4p--datagrid__row-size-dropdown {
11879
+ padding: 1rem;
11880
+ background-color: var(--cds-layer);
11876
11881
  }
11877
11882
 
11878
11883
  .c4p--datagrid__datagridWrap-simple {
@@ -13939,15 +13944,15 @@ a.cds--side-nav__link--current::before {
13939
13944
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13940
13945
  }
13941
13946
 
13942
- .cds--layout-constraint--size\:default-xs {
13947
+ .cds--layout-constraint--size__default-xs {
13943
13948
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
13944
13949
  }
13945
13950
 
13946
- .cds--layout-constraint--size\:min-xs {
13951
+ .cds--layout-constraint--size__min-xs {
13947
13952
  --cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem);
13948
13953
  }
13949
13954
 
13950
- .cds--layout-constraint--size\:max-xs {
13955
+ .cds--layout-constraint--size__max-xs {
13951
13956
  --cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem);
13952
13957
  }
13953
13958
 
@@ -13956,15 +13961,15 @@ a.cds--side-nav__link--current::before {
13956
13961
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13957
13962
  }
13958
13963
 
13959
- .cds--layout-constraint--size\:default-sm {
13964
+ .cds--layout-constraint--size__default-sm {
13960
13965
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
13961
13966
  }
13962
13967
 
13963
- .cds--layout-constraint--size\:min-sm {
13968
+ .cds--layout-constraint--size__min-sm {
13964
13969
  --cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem);
13965
13970
  }
13966
13971
 
13967
- .cds--layout-constraint--size\:max-sm {
13972
+ .cds--layout-constraint--size__max-sm {
13968
13973
  --cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem);
13969
13974
  }
13970
13975
 
@@ -13973,15 +13978,15 @@ a.cds--side-nav__link--current::before {
13973
13978
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13974
13979
  }
13975
13980
 
13976
- .cds--layout-constraint--size\:default-md {
13981
+ .cds--layout-constraint--size__default-md {
13977
13982
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
13978
13983
  }
13979
13984
 
13980
- .cds--layout-constraint--size\:min-md {
13985
+ .cds--layout-constraint--size__min-md {
13981
13986
  --cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem);
13982
13987
  }
13983
13988
 
13984
- .cds--layout-constraint--size\:max-md {
13989
+ .cds--layout-constraint--size__max-md {
13985
13990
  --cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem);
13986
13991
  }
13987
13992
 
@@ -13990,15 +13995,15 @@ a.cds--side-nav__link--current::before {
13990
13995
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13991
13996
  }
13992
13997
 
13993
- .cds--layout-constraint--size\:default-lg {
13998
+ .cds--layout-constraint--size__default-lg {
13994
13999
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
13995
14000
  }
13996
14001
 
13997
- .cds--layout-constraint--size\:min-lg {
14002
+ .cds--layout-constraint--size__min-lg {
13998
14003
  --cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem);
13999
14004
  }
14000
14005
 
14001
- .cds--layout-constraint--size\:max-lg {
14006
+ .cds--layout-constraint--size__max-lg {
14002
14007
  --cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem);
14003
14008
  }
14004
14009
 
@@ -14007,15 +14012,15 @@ a.cds--side-nav__link--current::before {
14007
14012
  --cds-layout-size-height:var(--cds-layout-size-height-context);
14008
14013
  }
14009
14014
 
14010
- .cds--layout-constraint--size\:default-xl {
14015
+ .cds--layout-constraint--size__default-xl {
14011
14016
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
14012
14017
  }
14013
14018
 
14014
- .cds--layout-constraint--size\:min-xl {
14019
+ .cds--layout-constraint--size__min-xl {
14015
14020
  --cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem);
14016
14021
  }
14017
14022
 
14018
- .cds--layout-constraint--size\:max-xl {
14023
+ .cds--layout-constraint--size__max-xl {
14019
14024
  --cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem);
14020
14025
  }
14021
14026
 
@@ -14024,15 +14029,15 @@ a.cds--side-nav__link--current::before {
14024
14029
  --cds-layout-size-height:var(--cds-layout-size-height-context);
14025
14030
  }
14026
14031
 
14027
- .cds--layout-constraint--size\:default-2xl {
14032
+ .cds--layout-constraint--size__default-2xl {
14028
14033
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
14029
14034
  }
14030
14035
 
14031
- .cds--layout-constraint--size\:min-2xl {
14036
+ .cds--layout-constraint--size__min-2xl {
14032
14037
  --cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem);
14033
14038
  }
14034
14039
 
14035
- .cds--layout-constraint--size\:max-2xl {
14040
+ .cds--layout-constraint--size__max-2xl {
14036
14041
  --cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem);
14037
14042
  }
14038
14043
 
@@ -14041,15 +14046,15 @@ a.cds--side-nav__link--current::before {
14041
14046
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
14042
14047
  }
14043
14048
 
14044
- .cds--layout-constraint--density\:default-condensed {
14049
+ .cds--layout-constraint--density__default-condensed {
14045
14050
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
14046
14051
  }
14047
14052
 
14048
- .cds--layout-constraint--density\:min-condensed {
14053
+ .cds--layout-constraint--density__min-condensed {
14049
14054
  --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14050
14055
  }
14051
14056
 
14052
- .cds--layout-constraint--density\:max-condensed {
14057
+ .cds--layout-constraint--density__max-condensed {
14053
14058
  --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14054
14059
  }
14055
14060
 
@@ -14058,15 +14063,15 @@ a.cds--side-nav__link--current::before {
14058
14063
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
14059
14064
  }
14060
14065
 
14061
- .cds--layout-constraint--density\:default-normal {
14066
+ .cds--layout-constraint--density__default-normal {
14062
14067
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
14063
14068
  }
14064
14069
 
14065
- .cds--layout-constraint--density\:min-normal {
14070
+ .cds--layout-constraint--density__min-normal {
14066
14071
  --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem);
14067
14072
  }
14068
14073
 
14069
- .cds--layout-constraint--density\:max-normal {
14074
+ .cds--layout-constraint--density__max-normal {
14070
14075
  --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem);
14071
14076
  }
14072
14077
 
@@ -17159,6 +17164,7 @@ li.cds--accordion__item--disabled:last-of-type {
17159
17164
  padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
17160
17165
  }
17161
17166
  .cds--btn--icon-only > :first-child {
17167
+ min-width: 1rem;
17162
17168
  margin-block-start: 0.0625rem;
17163
17169
  }
17164
17170
  .cds--btn--icon-only .cds--btn__icon {
@@ -18955,7 +18961,15 @@ fieldset[disabled] .cds--form__helper-text {
18955
18961
  }
18956
18962
 
18957
18963
  .cds--list-box--expanded {
18958
- border-bottom-color: var(--cds-border-subtle);
18964
+ border-bottom-color: var(--cds-border-subtle-01, #c6c6c6);
18965
+ }
18966
+
18967
+ .cds--layer-two .cds--list-box--expanded {
18968
+ border-bottom-color: var(--cds-border-subtle-02, #e0e0e0);
18969
+ }
18970
+
18971
+ .cds--layer-three .cds--list-box--expanded {
18972
+ border-bottom-color: var(--cds-border-subtle-03, #c6c6c6);
18959
18973
  }
18960
18974
 
18961
18975
  .cds--list-box--expanded:hover {
@@ -19378,6 +19392,7 @@ fieldset[disabled] .cds--form__helper-text {
19378
19392
  z-index: 9100;
19379
19393
  right: 0;
19380
19394
  left: 0;
19395
+ display: none;
19381
19396
  width: 100%;
19382
19397
  background-color: var(--cds-layer);
19383
19398
  overflow-y: auto;
@@ -19392,9 +19407,10 @@ fieldset[disabled] .cds--form__helper-text {
19392
19407
  }
19393
19408
  }
19394
19409
 
19395
- .cds--list-box .cds--list-box__field[aria-expanded=false] + .cds--list-box__menu {
19410
+ .cds--list-box .cds--list-box__field[aria-expanded=false] .cds--list-box__menu {
19396
19411
  display: none;
19397
19412
  max-height: 0;
19413
+ visibility: hidden;
19398
19414
  }
19399
19415
 
19400
19416
  .cds--list-box--expanded .cds--list-box__menu {
@@ -19450,7 +19466,15 @@ fieldset[disabled] .cds--form__helper-text {
19450
19466
  }
19451
19467
 
19452
19468
  .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
19453
- border-top-color: var(--cds-border-subtle);
19469
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
19470
+ }
19471
+
19472
+ .cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
19473
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
19474
+ }
19475
+
19476
+ .cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
19477
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
19454
19478
  }
19455
19479
 
19456
19480
  .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option {
@@ -19461,12 +19485,24 @@ fieldset[disabled] .cds--form__helper-text {
19461
19485
  color: var(--cds-text-primary, #161616);
19462
19486
  }
19463
19487
 
19464
- .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19465
- border-top-color: transparent;
19488
+ .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19489
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
19466
19490
  }
19467
19491
 
19468
- .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19469
- border-top-color: var(--cds-border-subtle);
19492
+ .cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19493
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
19494
+ }
19495
+
19496
+ .cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19497
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
19498
+ }
19499
+
19500
+ .cds--layer-two .cds--list-box__menu-item__option {
19501
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
19502
+ }
19503
+
19504
+ .cds--layer-three .cds--list-box__menu-item__option {
19505
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
19470
19506
  }
19471
19507
 
19472
19508
  .cds--list-box__menu-item__option {
@@ -19478,7 +19514,7 @@ fieldset[disabled] .cds--form__helper-text {
19478
19514
  padding: 0.6875rem 0;
19479
19515
  padding-right: 1.5rem;
19480
19516
  border-top: 1px solid transparent;
19481
- border-top-color: var(--cds-border-subtle);
19517
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
19482
19518
  border-bottom: 1px solid transparent;
19483
19519
  margin: 0 1rem;
19484
19520
  color: var(--cds-text-secondary, #525252);
@@ -19540,12 +19576,24 @@ fieldset[disabled] .cds--form__helper-text {
19540
19576
  border-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
19541
19577
  }
19542
19578
 
19543
- .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option {
19544
- border-top-color: var(--cds-border-subtle);
19579
+ .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
19580
+ .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19581
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
19545
19582
  }
19546
19583
 
19547
- .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19548
- border-top-color: var(--cds-border-subtle);
19584
+ .cds--layer-two .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
19585
+ .cds--layer-two .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19586
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
19587
+ }
19588
+
19589
+ .cds--layer-three .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
19590
+ .cds--layer-three .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19591
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
19592
+ }
19593
+
19594
+ .cds--list-box__menu-item--active + .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
19595
+ .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19596
+ border-top-color: transparent;
19549
19597
  }
19550
19598
 
19551
19599
  .cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option {
@@ -19558,10 +19606,15 @@ fieldset[disabled] .cds--form__helper-text {
19558
19606
  }
19559
19607
 
19560
19608
  .cds--list-box__menu-item--highlighted {
19561
- border-color: transparent;
19562
- background-color: var(--cds-layer-selected);
19609
+ outline: 2px solid var(--cds-focus, #0f62fe);
19610
+ outline-offset: -2px;
19563
19611
  color: var(--cds-text-primary, #161616);
19564
19612
  }
19613
+ @media screen and (prefers-contrast) {
19614
+ .cds--list-box__menu-item--highlighted {
19615
+ outline-style: dotted;
19616
+ }
19617
+ }
19565
19618
 
19566
19619
  .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,
19567
19620
  .cds--list-box__menu-item--highlighted + .cds--list-box__menu-item .cds--list-box__menu-item__option {
@@ -19942,11 +19995,8 @@ fieldset[disabled] .cds--form__helper-text {
19942
19995
  outline: 2px solid var(--cds-focus, #0f62fe);
19943
19996
  outline-offset: -2px;
19944
19997
  position: absolute;
19945
- top: 0;
19946
- right: 0;
19947
- bottom: 0;
19948
- left: 0;
19949
19998
  content: "";
19999
+ inset: 0;
19950
20000
  }
19951
20001
  @media screen and (prefers-contrast) {
19952
20002
  .cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after {
@@ -21330,7 +21380,8 @@ tr.cds--data-table--selected:last-of-type td {
21330
21380
  }
21331
21381
 
21332
21382
  .cds--action-list .cds--btn {
21333
- padding: calc(0.875rem - 3px) 1rem;
21383
+ padding-right: 1rem;
21384
+ padding-left: 1rem;
21334
21385
  color: var(--cds-text-on-color, #ffffff);
21335
21386
  white-space: nowrap;
21336
21387
  }
@@ -25661,35 +25712,26 @@ button.cds--dropdown-text:focus {
25661
25712
  }
25662
25713
 
25663
25714
  .cds--search--fluid .cds--search-magnifier-icon {
25664
- top: auto;
25665
- right: 1rem;
25666
- bottom: 0.8125rem;
25667
- left: auto;
25715
+ inset: auto 1rem 0.8125rem auto;
25668
25716
  transform: none;
25669
25717
  }
25670
25718
 
25671
25719
  .cds--search--fluid .cds--search-close {
25672
- top: auto;
25673
- right: 3rem;
25674
- bottom: 0;
25675
- left: auto;
25676
25720
  width: 2.5rem;
25677
25721
  height: 2.5rem;
25678
25722
  border: none;
25723
+ inset: auto 3rem 0 auto;
25679
25724
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25680
25725
  }
25681
25726
 
25682
25727
  .cds--search--fluid .cds--search-close::before {
25683
25728
  position: absolute;
25684
- top: auto;
25685
- right: -0.0625rem;
25686
- bottom: 0.875rem;
25687
- left: auto;
25688
25729
  display: block;
25689
25730
  width: 0.0625rem;
25690
25731
  height: 1rem;
25691
25732
  background: var(--cds-border-subtle);
25692
25733
  content: "";
25734
+ inset: auto -0.0625rem 0.875rem auto;
25693
25735
  }
25694
25736
 
25695
25737
  .cds--search--fluid .cds--search-input:focus ~ .cds--search-close:hover {
@@ -26185,8 +26227,8 @@ optgroup.cds--select-optgroup:disabled,
26185
26227
  }
26186
26228
 
26187
26229
  .cds--text-area--fluid div.cds--label {
26188
- right: 1rem;
26189
- left: initial;
26230
+ display: flex;
26231
+ justify-content: flex-end;
26190
26232
  }
26191
26233
 
26192
26234
  .cds--text-area--fluid .cds--text-area {
@@ -26992,6 +27034,15 @@ optgroup.cds--select-optgroup:disabled,
26992
27034
  .cds--modal .cds--number__rule-divider {
26993
27035
  background-color: var(--cds-border-subtle-02, #e0e0e0);
26994
27036
  }
27037
+ .cds--modal .cds--list-box__menu-item__option {
27038
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
27039
+ }
27040
+ .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
27041
+ border-top-color: var(--cds-layer-hover);
27042
+ }
27043
+ .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
27044
+ border-top-color: var(--cds-layer-selected-hover);
27045
+ }
26995
27046
  .cds--modal .cds--text-input--fluid .cds--text-input,
26996
27047
  .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
26997
27048
  .cds--modal .cds--text-area--fluid .cds--text-area,
@@ -29618,11 +29669,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29618
29669
  .cds--popover {
29619
29670
  position: absolute;
29620
29671
  z-index: 6000;
29621
- top: 0;
29622
- right: 0;
29623
- bottom: 0;
29624
- left: 0;
29625
29672
  filter: var(--cds-popover-drop-shadow, none);
29673
+ inset: 0;
29626
29674
  pointer-events: none;
29627
29675
  }
29628
29676
 
@@ -29942,10 +29990,6 @@ span.cds--pagination__text.cds--pagination__items-count {
29942
29990
 
29943
29991
  .cds--progress-bar--indeterminate .cds--progress-bar__track::after {
29944
29992
  position: absolute;
29945
- top: 0;
29946
- right: 0;
29947
- bottom: 0;
29948
- left: 0;
29949
29993
  animation-duration: 1400ms;
29950
29994
  animation-iteration-count: infinite;
29951
29995
  animation-name: progress-bar-indeterminate;
@@ -29954,6 +29998,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29954
29998
  background-position-x: 0%;
29955
29999
  background-size: 200% 100%;
29956
30000
  content: "";
30001
+ inset: 0;
29957
30002
  }
29958
30003
 
29959
30004
  .cds--progress-bar__helper-text {
@@ -31380,6 +31425,20 @@ span.cds--pagination__text.cds--pagination__items-count {
31380
31425
  }
31381
31426
  }
31382
31427
 
31428
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list {
31429
+ display: grid;
31430
+ width: 100%;
31431
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
31432
+ }
31433
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-label,
31434
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-secondary-label {
31435
+ overflow: hidden;
31436
+ text-overflow: ellipsis;
31437
+ }
31438
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item--icon {
31439
+ margin-left: auto;
31440
+ }
31441
+
31383
31442
  .cds--tabs {
31384
31443
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
31385
31444
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -32040,11 +32099,12 @@ span.cds--pagination__text.cds--pagination__items-count {
32040
32099
  }
32041
32100
 
32042
32101
  .cds--tile {
32102
+ --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));
32043
32103
  position: relative;
32044
32104
  display: block;
32045
32105
  min-width: 8rem;
32046
32106
  min-height: 4rem;
32047
- padding: 1rem;
32107
+ padding: var(--cds-layout-density-padding-inline-local);
32048
32108
  background-color: var(--cds-layer);
32049
32109
  outline: 2px solid transparent;
32050
32110
  outline-offset: -2px;
@@ -32125,7 +32185,6 @@ span.cds--pagination__text.cds--pagination__items-count {
32125
32185
  .cds--tile--clickable.cds--link--disabled,
32126
32186
  .cds--tile--clickable:hover.cds--link--disabled {
32127
32187
  display: block;
32128
- padding: 1rem;
32129
32188
  background-color: var(--cds-layer);
32130
32189
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
32131
32190
  cursor: not-allowed;
@@ -32134,8 +32193,8 @@ span.cds--pagination__text.cds--pagination__items-count {
32134
32193
  .cds--tile--clickable .cds--tile--icon,
32135
32194
  .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
32136
32195
  position: absolute;
32137
- right: 1rem;
32138
- bottom: 1rem;
32196
+ right: var(--cds-layout-density-padding-inline-local);
32197
+ bottom: var(--cds-layout-density-padding-inline-local);
32139
32198
  }
32140
32199
 
32141
32200
  .cds--tile--clickable .cds--tile--icon {
@@ -32151,14 +32210,14 @@ span.cds--pagination__text.cds--pagination__items-count {
32151
32210
  }
32152
32211
 
32153
32212
  .cds--tile--selectable {
32154
- padding-right: 3rem;
32155
32213
  border: 1px solid transparent;
32214
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32156
32215
  }
32157
32216
 
32158
32217
  .cds--tile__checkmark {
32159
32218
  position: absolute;
32160
- top: 1rem;
32161
- right: 1rem;
32219
+ top: var(--cds-layout-density-padding-inline-local);
32220
+ right: var(--cds-layout-density-padding-inline-local);
32162
32221
  height: 1rem;
32163
32222
  border: none;
32164
32223
  background: transparent;
@@ -32188,8 +32247,8 @@ span.cds--pagination__text.cds--pagination__items-count {
32188
32247
  right: 0;
32189
32248
  bottom: 0;
32190
32249
  display: flex;
32191
- width: 3rem;
32192
- height: 3rem;
32250
+ width: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32251
+ height: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32193
32252
  align-items: center;
32194
32253
  justify-content: center;
32195
32254
  }
@@ -32229,8 +32288,8 @@ span.cds--pagination__text.cds--pagination__items-count {
32229
32288
  right: 0;
32230
32289
  bottom: 0;
32231
32290
  display: flex;
32232
- width: 3rem;
32233
- height: 3rem;
32291
+ width: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32292
+ height: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32234
32293
  align-items: center;
32235
32294
  justify-content: center;
32236
32295
  }
@@ -32639,8 +32698,7 @@ span.cds--pagination__text.cds--pagination__items-count {
32639
32698
  }
32640
32699
 
32641
32700
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
32642
- .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch,
32643
- .cds--toggle:active .cds--toggle__switch {
32701
+ .cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch {
32644
32702
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
32645
32703
  }
32646
32704
 
@@ -32740,13 +32798,72 @@ span.cds--pagination__text.cds--pagination__items-count {
32740
32798
 
32741
32799
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
32742
32800
  .cds--toggle__button:focus + .cds--toggle__label .cds--toggle__switch,
32743
- .cds--toggle__button:not(:disabled):active + .cds--toggle__label .cds--toggle__switch,
32744
- .cds--toggle:active .cds--toggle__switch {
32801
+ .cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch {
32745
32802
  color: Highlight;
32746
32803
  outline: 1px solid Highlight;
32747
32804
  }
32748
32805
  }
32749
32806
 
32807
+ .cds--toggle--skeleton {
32808
+ display: flex;
32809
+ align-items: center;
32810
+ }
32811
+
32812
+ .cds--toggle--skeleton .cds--toggle__skeleton-circle {
32813
+ position: relative;
32814
+ overflow: hidden;
32815
+ background: var(--cds-skeleton-background, #e8e8e8);
32816
+ border-radius: 50%;
32817
+ width: 1.125rem;
32818
+ height: 1.125rem;
32819
+ border-radius: 50%;
32820
+ }
32821
+ .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
32822
+ position: absolute;
32823
+ width: 200%;
32824
+ height: 100%;
32825
+ animation: 3000ms ease-in-out skeleton infinite;
32826
+ background: var(--cds-skeleton-element, #c6c6c6);
32827
+ content: "";
32828
+ will-change: transform-origin, transform, opacity;
32829
+ }
32830
+ @media (prefers-reduced-motion: reduce) {
32831
+ .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
32832
+ animation: none;
32833
+ }
32834
+ }
32835
+
32836
+ .cds--toggle--skeleton .cds--toggle__skeleton-rectangle {
32837
+ position: relative;
32838
+ padding: 0;
32839
+ border: none;
32840
+ background: var(--cds-skeleton-background, #e8e8e8);
32841
+ box-shadow: none;
32842
+ pointer-events: none;
32843
+ width: 1.5rem;
32844
+ height: 0.5rem;
32845
+ margin-left: 0.5rem;
32846
+ }
32847
+ .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:hover, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:focus, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:active {
32848
+ border: none;
32849
+ cursor: default;
32850
+ outline: none;
32851
+ }
32852
+ .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
32853
+ position: absolute;
32854
+ width: 100%;
32855
+ height: 100%;
32856
+ animation: 3000ms ease-in-out skeleton infinite;
32857
+ background: var(--cds-skeleton-element, #c6c6c6);
32858
+ content: "";
32859
+ will-change: transform-origin, transform, opacity;
32860
+ }
32861
+ @media (prefers-reduced-motion: reduce) {
32862
+ .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
32863
+ animation: none;
32864
+ }
32865
+ }
32866
+
32750
32867
  .cds--tree {
32751
32868
  overflow: hidden;
32752
32869
  }
@@ -32993,6 +33110,10 @@ span.cds--pagination__text.cds--pagination__items-count {
32993
33110
  }
32994
33111
  }
32995
33112
 
33113
+ .cds--header__global .cds--popover {
33114
+ z-index: 8001;
33115
+ }
33116
+
32996
33117
  .cds--header__action > :first-child {
32997
33118
  margin-block-start: 0;
32998
33119
  }
@@ -33928,6 +34049,10 @@ a.cds--side-nav__link--current::before {
33928
34049
  }
33929
34050
  }
33930
34051
 
34052
+ .cds--header__global .cds--popover {
34053
+ z-index: 8001;
34054
+ }
34055
+
33931
34056
  .cds--header__action > :first-child {
33932
34057
  margin-block-start: 0;
33933
34058
  }