@carbon/ibm-products 2.3.2 → 2.4.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. package/css/index-full-carbon.css +262 -110
  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 +40 -24
  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 +86 -54
  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 +145 -38
  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/Card/Card.js +11 -1
  18. package/es/components/Card/CardFooter.js +4 -2
  19. package/es/components/Card/CardHeader.js +20 -2
  20. package/es/components/Datagrid/Datagrid/Datagrid.js +5 -1
  21. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +15 -21
  22. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +6 -20
  23. package/es/components/Datagrid/Datagrid.docs-page.js +123 -0
  24. package/es/components/Datagrid/Extensions/ColumnAlignment/ColumnAlignment.docs-page.js +13 -0
  25. package/es/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.docs-page.js +13 -0
  26. package/es/components/Datagrid/Extensions/EditableCell/EditableCell.docs-page.js +47 -0
  27. package/es/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js +13 -0
  28. package/es/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +57 -0
  29. package/es/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.docs-page.js +13 -0
  30. package/es/components/Datagrid/utils/DatagridActions.js +1 -1
  31. package/es/components/Datagrid/utils/getArgTypes.js +4 -0
  32. package/es/components/EditUpdateCards/EditUpdateCards.js +66 -4
  33. package/es/components/FilterSummary/FilterSummary.js +7 -3
  34. package/es/components/OptionsTile/OptionsTile.js +8 -1
  35. package/es/components/ProductiveCard/ProductiveCard.js +21 -1
  36. package/es/global/js/utils/StoryDocsPage.js +6 -2
  37. package/lib/components/Card/Card.js +11 -1
  38. package/lib/components/Card/CardFooter.js +4 -2
  39. package/lib/components/Card/CardHeader.js +20 -2
  40. package/lib/components/Datagrid/Datagrid/Datagrid.js +5 -1
  41. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +14 -20
  42. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +6 -23
  43. package/lib/components/Datagrid/Datagrid.docs-page.js +134 -0
  44. package/lib/components/Datagrid/Extensions/ColumnAlignment/ColumnAlignment.docs-page.js +21 -0
  45. package/lib/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.docs-page.js +21 -0
  46. package/lib/components/Datagrid/Extensions/EditableCell/EditableCell.docs-page.js +55 -0
  47. package/lib/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js +21 -0
  48. package/lib/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +65 -0
  49. package/lib/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.docs-page.js +21 -0
  50. package/lib/components/Datagrid/utils/DatagridActions.js +1 -1
  51. package/lib/components/Datagrid/utils/getArgTypes.js +4 -0
  52. package/lib/components/EditUpdateCards/EditUpdateCards.js +66 -4
  53. package/lib/components/FilterSummary/FilterSummary.js +7 -3
  54. package/lib/components/OptionsTile/OptionsTile.js +8 -1
  55. package/lib/components/ProductiveCard/ProductiveCard.js +21 -1
  56. package/lib/global/js/utils/StoryDocsPage.js +6 -2
  57. package/package.json +16 -16
  58. package/scss/components/Datagrid/_datagrid.scss +17 -10
  59. package/scss/components/Datagrid/_storybook-styles.scss +5 -0
  60. package/scss/components/EditUpdateCards/_edit-update-cards.scss +10 -0
  61. package/scss/components/FilterSummary/_storybook-styles.scss +2 -0
  62. package/scss/components/ProductiveCard/_productive-card.scss +15 -0
  63. package/scss/components/Tearsheet/_tearsheet.scss +6 -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
 
@@ -3689,6 +3689,9 @@ p.c4p--about-modal__copyright-text:first-child {
3689
3689
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
3690
3690
  width: 100%;
3691
3691
  }
3692
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
3693
+ height: 5rem;
3694
+ }
3692
3695
  @media (min-width: 42rem) {
3693
3696
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
3694
3697
  width: calc(100% - (2 * 4rem));
@@ -7891,6 +7894,7 @@ button.c4p--add-select__global-filter-toggle--open {
7891
7894
  padding-left: 0.625rem;
7892
7895
  /* stylelint-disable-next-line max-nesting-depth */
7893
7896
  /* stylelint-disable-next-line max-nesting-depth */
7897
+ /* stylelint-disable-next-line max-nesting-depth */
7894
7898
  }
7895
7899
  .c4p--card__productive .c4p--card__actions-header-ghost-button::before {
7896
7900
  position: absolute;
@@ -7907,6 +7911,18 @@ button.c4p--add-select__global-filter-toggle--open {
7907
7911
  .c4p--card__productive .c4p--card__actions-header-ghost-button:hover::before {
7908
7912
  opacity: 0;
7909
7913
  }
7914
+ .c4p--card__productive .c4p--card__actions-header-ghost-button:hover + .c4p--card__actions-header-ghost-button {
7915
+ /* stylelint-disable-next-line max-nesting-depth */
7916
+ }
7917
+ .c4p--card__productive .c4p--card__actions-header-ghost-button:hover + .c4p--card__actions-header-ghost-button::before {
7918
+ opacity: 0;
7919
+ }
7920
+ .c4p--card__productive .c4p--card__actions-header-ghost-button:first-child:not(:last-child) {
7921
+ /* stylelint-disable-next-line max-nesting-depth */
7922
+ }
7923
+ .c4p--card__productive .c4p--card__actions-header-ghost-button:first-child:not(:last-child)::before {
7924
+ display: none;
7925
+ }
7910
7926
  .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
7911
7927
  .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
7912
7928
  margin-top: 0;
@@ -11865,14 +11881,19 @@ th.c4p--datagrid__select-all-toggle-on.button {
11865
11881
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11866
11882
  display: none;
11867
11883
  }
11868
- .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11869
- left: 0.125rem;
11870
- width: 112px;
11884
+
11885
+ .c4p--datagrid .c4p--datagrid__row-size-options-container .cds--popover-container .cds--btn--icon-only {
11886
+ display: flex;
11887
+ width: 3rem;
11888
+ height: 3rem;
11889
+ align-items: center;
11890
+ justify-content: center;
11891
+ padding-top: 0;
11871
11892
  }
11872
11893
 
11873
- .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11874
- left: 0.125rem;
11875
- width: 112px;
11894
+ .c4p--datagrid .c4p--datagrid__row-size-options-container .c4p--datagrid__row-size-dropdown {
11895
+ padding: 1rem;
11896
+ background-color: var(--cds-layer);
11876
11897
  }
11877
11898
 
11878
11899
  .c4p--datagrid__datagridWrap-simple {
@@ -13939,15 +13960,15 @@ a.cds--side-nav__link--current::before {
13939
13960
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13940
13961
  }
13941
13962
 
13942
- .cds--layout-constraint--size\:default-xs {
13963
+ .cds--layout-constraint--size__default-xs {
13943
13964
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
13944
13965
  }
13945
13966
 
13946
- .cds--layout-constraint--size\:min-xs {
13967
+ .cds--layout-constraint--size__min-xs {
13947
13968
  --cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem);
13948
13969
  }
13949
13970
 
13950
- .cds--layout-constraint--size\:max-xs {
13971
+ .cds--layout-constraint--size__max-xs {
13951
13972
  --cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem);
13952
13973
  }
13953
13974
 
@@ -13956,15 +13977,15 @@ a.cds--side-nav__link--current::before {
13956
13977
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13957
13978
  }
13958
13979
 
13959
- .cds--layout-constraint--size\:default-sm {
13980
+ .cds--layout-constraint--size__default-sm {
13960
13981
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
13961
13982
  }
13962
13983
 
13963
- .cds--layout-constraint--size\:min-sm {
13984
+ .cds--layout-constraint--size__min-sm {
13964
13985
  --cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem);
13965
13986
  }
13966
13987
 
13967
- .cds--layout-constraint--size\:max-sm {
13988
+ .cds--layout-constraint--size__max-sm {
13968
13989
  --cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem);
13969
13990
  }
13970
13991
 
@@ -13973,15 +13994,15 @@ a.cds--side-nav__link--current::before {
13973
13994
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13974
13995
  }
13975
13996
 
13976
- .cds--layout-constraint--size\:default-md {
13997
+ .cds--layout-constraint--size__default-md {
13977
13998
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
13978
13999
  }
13979
14000
 
13980
- .cds--layout-constraint--size\:min-md {
14001
+ .cds--layout-constraint--size__min-md {
13981
14002
  --cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem);
13982
14003
  }
13983
14004
 
13984
- .cds--layout-constraint--size\:max-md {
14005
+ .cds--layout-constraint--size__max-md {
13985
14006
  --cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem);
13986
14007
  }
13987
14008
 
@@ -13990,15 +14011,15 @@ a.cds--side-nav__link--current::before {
13990
14011
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13991
14012
  }
13992
14013
 
13993
- .cds--layout-constraint--size\:default-lg {
14014
+ .cds--layout-constraint--size__default-lg {
13994
14015
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
13995
14016
  }
13996
14017
 
13997
- .cds--layout-constraint--size\:min-lg {
14018
+ .cds--layout-constraint--size__min-lg {
13998
14019
  --cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem);
13999
14020
  }
14000
14021
 
14001
- .cds--layout-constraint--size\:max-lg {
14022
+ .cds--layout-constraint--size__max-lg {
14002
14023
  --cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem);
14003
14024
  }
14004
14025
 
@@ -14007,15 +14028,15 @@ a.cds--side-nav__link--current::before {
14007
14028
  --cds-layout-size-height:var(--cds-layout-size-height-context);
14008
14029
  }
14009
14030
 
14010
- .cds--layout-constraint--size\:default-xl {
14031
+ .cds--layout-constraint--size__default-xl {
14011
14032
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
14012
14033
  }
14013
14034
 
14014
- .cds--layout-constraint--size\:min-xl {
14035
+ .cds--layout-constraint--size__min-xl {
14015
14036
  --cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem);
14016
14037
  }
14017
14038
 
14018
- .cds--layout-constraint--size\:max-xl {
14039
+ .cds--layout-constraint--size__max-xl {
14019
14040
  --cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem);
14020
14041
  }
14021
14042
 
@@ -14024,15 +14045,15 @@ a.cds--side-nav__link--current::before {
14024
14045
  --cds-layout-size-height:var(--cds-layout-size-height-context);
14025
14046
  }
14026
14047
 
14027
- .cds--layout-constraint--size\:default-2xl {
14048
+ .cds--layout-constraint--size__default-2xl {
14028
14049
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
14029
14050
  }
14030
14051
 
14031
- .cds--layout-constraint--size\:min-2xl {
14052
+ .cds--layout-constraint--size__min-2xl {
14032
14053
  --cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem);
14033
14054
  }
14034
14055
 
14035
- .cds--layout-constraint--size\:max-2xl {
14056
+ .cds--layout-constraint--size__max-2xl {
14036
14057
  --cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem);
14037
14058
  }
14038
14059
 
@@ -14041,15 +14062,15 @@ a.cds--side-nav__link--current::before {
14041
14062
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
14042
14063
  }
14043
14064
 
14044
- .cds--layout-constraint--density\:default-condensed {
14065
+ .cds--layout-constraint--density__default-condensed {
14045
14066
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
14046
14067
  }
14047
14068
 
14048
- .cds--layout-constraint--density\:min-condensed {
14069
+ .cds--layout-constraint--density__min-condensed {
14049
14070
  --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14050
14071
  }
14051
14072
 
14052
- .cds--layout-constraint--density\:max-condensed {
14073
+ .cds--layout-constraint--density__max-condensed {
14053
14074
  --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14054
14075
  }
14055
14076
 
@@ -14058,15 +14079,15 @@ a.cds--side-nav__link--current::before {
14058
14079
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
14059
14080
  }
14060
14081
 
14061
- .cds--layout-constraint--density\:default-normal {
14082
+ .cds--layout-constraint--density__default-normal {
14062
14083
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
14063
14084
  }
14064
14085
 
14065
- .cds--layout-constraint--density\:min-normal {
14086
+ .cds--layout-constraint--density__min-normal {
14066
14087
  --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem);
14067
14088
  }
14068
14089
 
14069
- .cds--layout-constraint--density\:max-normal {
14090
+ .cds--layout-constraint--density__max-normal {
14070
14091
  --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem);
14071
14092
  }
14072
14093
 
@@ -14213,6 +14234,10 @@ a.cds--side-nav__link--current::before {
14213
14234
  width: 100%;
14214
14235
  }
14215
14236
 
14237
+ .c4p--tearsheet.c4p--tearsheet--wide .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
14238
+ height: 5rem;
14239
+ }
14240
+
14216
14241
  @media (min-width: 42rem) {
14217
14242
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__container {
14218
14243
  width: calc(100% - (2 * 4rem));
@@ -14580,6 +14605,10 @@ a.cds--side-nav__link--current::before {
14580
14605
  .c4p--edit-update-cards#c4p--edit-update-cards--edit {
14581
14606
  /* Used id for overriding the SVG path fill */
14582
14607
  }
14608
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button,
14609
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button {
14610
+ color: #ffffff;
14611
+ }
14583
14612
  .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header button:hover,
14584
14613
  .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__footer button:hover {
14585
14614
  background-color: #0050e6;
@@ -14610,6 +14639,9 @@ a.cds--side-nav__link--current::before {
14610
14639
  .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--loading:hover {
14611
14640
  background-color: transparent;
14612
14641
  }
14642
+ .c4p--edit-update-cards#c4p--edit-update-cards--edit .c4p--card__header-container {
14643
+ align-items: center;
14644
+ }
14613
14645
  .c4p--edit-update-cards:not(.c4p--edit-update-cards__actions-bottom)#c4p--edit-update-cards--edit .c4p--card__header {
14614
14646
  background-color: #0f62fe;
14615
14647
  color: #ffffff;
@@ -17159,6 +17191,7 @@ li.cds--accordion__item--disabled:last-of-type {
17159
17191
  padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
17160
17192
  }
17161
17193
  .cds--btn--icon-only > :first-child {
17194
+ min-width: 1rem;
17162
17195
  margin-block-start: 0.0625rem;
17163
17196
  }
17164
17197
  .cds--btn--icon-only .cds--btn__icon {
@@ -18955,7 +18988,15 @@ fieldset[disabled] .cds--form__helper-text {
18955
18988
  }
18956
18989
 
18957
18990
  .cds--list-box--expanded {
18958
- border-bottom-color: var(--cds-border-subtle);
18991
+ border-bottom-color: var(--cds-border-subtle-01, #c6c6c6);
18992
+ }
18993
+
18994
+ .cds--layer-two .cds--list-box--expanded {
18995
+ border-bottom-color: var(--cds-border-subtle-02, #e0e0e0);
18996
+ }
18997
+
18998
+ .cds--layer-three .cds--list-box--expanded {
18999
+ border-bottom-color: var(--cds-border-subtle-03, #c6c6c6);
18959
19000
  }
18960
19001
 
18961
19002
  .cds--list-box--expanded:hover {
@@ -19378,6 +19419,7 @@ fieldset[disabled] .cds--form__helper-text {
19378
19419
  z-index: 9100;
19379
19420
  right: 0;
19380
19421
  left: 0;
19422
+ display: none;
19381
19423
  width: 100%;
19382
19424
  background-color: var(--cds-layer);
19383
19425
  overflow-y: auto;
@@ -19392,9 +19434,10 @@ fieldset[disabled] .cds--form__helper-text {
19392
19434
  }
19393
19435
  }
19394
19436
 
19395
- .cds--list-box .cds--list-box__field[aria-expanded=false] + .cds--list-box__menu {
19437
+ .cds--list-box .cds--list-box__field[aria-expanded=false] .cds--list-box__menu {
19396
19438
  display: none;
19397
19439
  max-height: 0;
19440
+ visibility: hidden;
19398
19441
  }
19399
19442
 
19400
19443
  .cds--list-box--expanded .cds--list-box__menu {
@@ -19450,7 +19493,15 @@ fieldset[disabled] .cds--form__helper-text {
19450
19493
  }
19451
19494
 
19452
19495
  .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
19453
- border-top-color: var(--cds-border-subtle);
19496
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
19497
+ }
19498
+
19499
+ .cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
19500
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
19501
+ }
19502
+
19503
+ .cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item__option:hover {
19504
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
19454
19505
  }
19455
19506
 
19456
19507
  .cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option {
@@ -19461,12 +19512,24 @@ fieldset[disabled] .cds--form__helper-text {
19461
19512
  color: var(--cds-text-primary, #161616);
19462
19513
  }
19463
19514
 
19464
- .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19465
- border-top-color: transparent;
19515
+ .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19516
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
19466
19517
  }
19467
19518
 
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);
19519
+ .cds--layer-two .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19520
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
19521
+ }
19522
+
19523
+ .cds--layer-three .cds--list-box--disabled .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19524
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
19525
+ }
19526
+
19527
+ .cds--layer-two .cds--list-box__menu-item__option {
19528
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
19529
+ }
19530
+
19531
+ .cds--layer-three .cds--list-box__menu-item__option {
19532
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
19470
19533
  }
19471
19534
 
19472
19535
  .cds--list-box__menu-item__option {
@@ -19478,7 +19541,7 @@ fieldset[disabled] .cds--form__helper-text {
19478
19541
  padding: 0.6875rem 0;
19479
19542
  padding-right: 1.5rem;
19480
19543
  border-top: 1px solid transparent;
19481
- border-top-color: var(--cds-border-subtle);
19544
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
19482
19545
  border-bottom: 1px solid transparent;
19483
19546
  margin: 0 1rem;
19484
19547
  color: var(--cds-text-secondary, #525252);
@@ -19540,12 +19603,24 @@ fieldset[disabled] .cds--form__helper-text {
19540
19603
  border-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
19541
19604
  }
19542
19605
 
19543
- .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option {
19544
- border-top-color: var(--cds-border-subtle);
19606
+ .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
19607
+ .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19608
+ border-top-color: var(--cds-border-subtle-01, #c6c6c6);
19545
19609
  }
19546
19610
 
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);
19611
+ .cds--layer-two .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
19612
+ .cds--layer-two .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19613
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
19614
+ }
19615
+
19616
+ .cds--layer-three .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
19617
+ .cds--layer-three .cds--list-box__menu-item[disabled]:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19618
+ border-top-color: var(--cds-border-subtle-03, #c6c6c6);
19619
+ }
19620
+
19621
+ .cds--list-box__menu-item--active + .cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,
19622
+ .cds--list-box__menu-item:hover + .cds--list-box__menu-item .cds--list-box__menu-item__option {
19623
+ border-top-color: transparent;
19549
19624
  }
19550
19625
 
19551
19626
  .cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option {
@@ -19558,10 +19633,15 @@ fieldset[disabled] .cds--form__helper-text {
19558
19633
  }
19559
19634
 
19560
19635
  .cds--list-box__menu-item--highlighted {
19561
- border-color: transparent;
19562
- background-color: var(--cds-layer-selected);
19636
+ outline: 2px solid var(--cds-focus, #0f62fe);
19637
+ outline-offset: -2px;
19563
19638
  color: var(--cds-text-primary, #161616);
19564
19639
  }
19640
+ @media screen and (prefers-contrast) {
19641
+ .cds--list-box__menu-item--highlighted {
19642
+ outline-style: dotted;
19643
+ }
19644
+ }
19565
19645
 
19566
19646
  .cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,
19567
19647
  .cds--list-box__menu-item--highlighted + .cds--list-box__menu-item .cds--list-box__menu-item__option {
@@ -19942,11 +20022,8 @@ fieldset[disabled] .cds--form__helper-text {
19942
20022
  outline: 2px solid var(--cds-focus, #0f62fe);
19943
20023
  outline-offset: -2px;
19944
20024
  position: absolute;
19945
- top: 0;
19946
- right: 0;
19947
- bottom: 0;
19948
- left: 0;
19949
20025
  content: "";
20026
+ inset: 0;
19950
20027
  }
19951
20028
  @media screen and (prefers-contrast) {
19952
20029
  .cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after {
@@ -21330,7 +21407,8 @@ tr.cds--data-table--selected:last-of-type td {
21330
21407
  }
21331
21408
 
21332
21409
  .cds--action-list .cds--btn {
21333
- padding: calc(0.875rem - 3px) 1rem;
21410
+ padding-right: 1rem;
21411
+ padding-left: 1rem;
21334
21412
  color: var(--cds-text-on-color, #ffffff);
21335
21413
  white-space: nowrap;
21336
21414
  }
@@ -25661,35 +25739,26 @@ button.cds--dropdown-text:focus {
25661
25739
  }
25662
25740
 
25663
25741
  .cds--search--fluid .cds--search-magnifier-icon {
25664
- top: auto;
25665
- right: 1rem;
25666
- bottom: 0.8125rem;
25667
- left: auto;
25742
+ inset: auto 1rem 0.8125rem auto;
25668
25743
  transform: none;
25669
25744
  }
25670
25745
 
25671
25746
  .cds--search--fluid .cds--search-close {
25672
- top: auto;
25673
- right: 3rem;
25674
- bottom: 0;
25675
- left: auto;
25676
25747
  width: 2.5rem;
25677
25748
  height: 2.5rem;
25678
25749
  border: none;
25750
+ inset: auto 3rem 0 auto;
25679
25751
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25680
25752
  }
25681
25753
 
25682
25754
  .cds--search--fluid .cds--search-close::before {
25683
25755
  position: absolute;
25684
- top: auto;
25685
- right: -0.0625rem;
25686
- bottom: 0.875rem;
25687
- left: auto;
25688
25756
  display: block;
25689
25757
  width: 0.0625rem;
25690
25758
  height: 1rem;
25691
25759
  background: var(--cds-border-subtle);
25692
25760
  content: "";
25761
+ inset: auto -0.0625rem 0.875rem auto;
25693
25762
  }
25694
25763
 
25695
25764
  .cds--search--fluid .cds--search-input:focus ~ .cds--search-close:hover {
@@ -26185,8 +26254,8 @@ optgroup.cds--select-optgroup:disabled,
26185
26254
  }
26186
26255
 
26187
26256
  .cds--text-area--fluid div.cds--label {
26188
- right: 1rem;
26189
- left: initial;
26257
+ display: flex;
26258
+ justify-content: flex-end;
26190
26259
  }
26191
26260
 
26192
26261
  .cds--text-area--fluid .cds--text-area {
@@ -26992,6 +27061,15 @@ optgroup.cds--select-optgroup:disabled,
26992
27061
  .cds--modal .cds--number__rule-divider {
26993
27062
  background-color: var(--cds-border-subtle-02, #e0e0e0);
26994
27063
  }
27064
+ .cds--modal .cds--list-box__menu-item__option {
27065
+ border-top-color: var(--cds-border-subtle-02, #e0e0e0);
27066
+ }
27067
+ .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
27068
+ border-top-color: var(--cds-layer-hover);
27069
+ }
27070
+ .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
27071
+ border-top-color: var(--cds-layer-selected-hover);
27072
+ }
26995
27073
  .cds--modal .cds--text-input--fluid .cds--text-input,
26996
27074
  .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
26997
27075
  .cds--modal .cds--text-area--fluid .cds--text-area,
@@ -29618,11 +29696,8 @@ span.cds--pagination__text.cds--pagination__items-count {
29618
29696
  .cds--popover {
29619
29697
  position: absolute;
29620
29698
  z-index: 6000;
29621
- top: 0;
29622
- right: 0;
29623
- bottom: 0;
29624
- left: 0;
29625
29699
  filter: var(--cds-popover-drop-shadow, none);
29700
+ inset: 0;
29626
29701
  pointer-events: none;
29627
29702
  }
29628
29703
 
@@ -29942,10 +30017,6 @@ span.cds--pagination__text.cds--pagination__items-count {
29942
30017
 
29943
30018
  .cds--progress-bar--indeterminate .cds--progress-bar__track::after {
29944
30019
  position: absolute;
29945
- top: 0;
29946
- right: 0;
29947
- bottom: 0;
29948
- left: 0;
29949
30020
  animation-duration: 1400ms;
29950
30021
  animation-iteration-count: infinite;
29951
30022
  animation-name: progress-bar-indeterminate;
@@ -29954,6 +30025,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29954
30025
  background-position-x: 0%;
29955
30026
  background-size: 200% 100%;
29956
30027
  content: "";
30028
+ inset: 0;
29957
30029
  }
29958
30030
 
29959
30031
  .cds--progress-bar__helper-text {
@@ -31380,6 +31452,20 @@ span.cds--pagination__text.cds--pagination__items-count {
31380
31452
  }
31381
31453
  }
31382
31454
 
31455
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list {
31456
+ display: grid;
31457
+ width: 100%;
31458
+ grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
31459
+ }
31460
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-label,
31461
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item-secondary-label {
31462
+ overflow: hidden;
31463
+ text-overflow: ellipsis;
31464
+ }
31465
+ .cds--tabs.cds--tabs--contained.cds--tabs--full-width .cds--tab--list .cds--tabs__nav-link .cds--tabs__nav-item--icon {
31466
+ margin-left: auto;
31467
+ }
31468
+
31383
31469
  .cds--tabs {
31384
31470
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
31385
31471
  font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -32040,11 +32126,12 @@ span.cds--pagination__text.cds--pagination__items-count {
32040
32126
  }
32041
32127
 
32042
32128
  .cds--tile {
32129
+ --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
32130
  position: relative;
32044
32131
  display: block;
32045
32132
  min-width: 8rem;
32046
32133
  min-height: 4rem;
32047
- padding: 1rem;
32134
+ padding: var(--cds-layout-density-padding-inline-local);
32048
32135
  background-color: var(--cds-layer);
32049
32136
  outline: 2px solid transparent;
32050
32137
  outline-offset: -2px;
@@ -32125,7 +32212,6 @@ span.cds--pagination__text.cds--pagination__items-count {
32125
32212
  .cds--tile--clickable.cds--link--disabled,
32126
32213
  .cds--tile--clickable:hover.cds--link--disabled {
32127
32214
  display: block;
32128
- padding: 1rem;
32129
32215
  background-color: var(--cds-layer);
32130
32216
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
32131
32217
  cursor: not-allowed;
@@ -32134,8 +32220,8 @@ span.cds--pagination__text.cds--pagination__items-count {
32134
32220
  .cds--tile--clickable .cds--tile--icon,
32135
32221
  .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
32136
32222
  position: absolute;
32137
- right: 1rem;
32138
- bottom: 1rem;
32223
+ right: var(--cds-layout-density-padding-inline-local);
32224
+ bottom: var(--cds-layout-density-padding-inline-local);
32139
32225
  }
32140
32226
 
32141
32227
  .cds--tile--clickable .cds--tile--icon {
@@ -32151,14 +32237,14 @@ span.cds--pagination__text.cds--pagination__items-count {
32151
32237
  }
32152
32238
 
32153
32239
  .cds--tile--selectable {
32154
- padding-right: 3rem;
32155
32240
  border: 1px solid transparent;
32241
+ padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32156
32242
  }
32157
32243
 
32158
32244
  .cds--tile__checkmark {
32159
32245
  position: absolute;
32160
- top: 1rem;
32161
- right: 1rem;
32246
+ top: var(--cds-layout-density-padding-inline-local);
32247
+ right: var(--cds-layout-density-padding-inline-local);
32162
32248
  height: 1rem;
32163
32249
  border: none;
32164
32250
  background: transparent;
@@ -32188,8 +32274,8 @@ span.cds--pagination__text.cds--pagination__items-count {
32188
32274
  right: 0;
32189
32275
  bottom: 0;
32190
32276
  display: flex;
32191
- width: 3rem;
32192
- height: 3rem;
32277
+ width: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32278
+ height: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32193
32279
  align-items: center;
32194
32280
  justify-content: center;
32195
32281
  }
@@ -32229,8 +32315,8 @@ span.cds--pagination__text.cds--pagination__items-count {
32229
32315
  right: 0;
32230
32316
  bottom: 0;
32231
32317
  display: flex;
32232
- width: 3rem;
32233
- height: 3rem;
32318
+ width: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32319
+ height: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
32234
32320
  align-items: center;
32235
32321
  justify-content: center;
32236
32322
  }
@@ -32639,8 +32725,7 @@ span.cds--pagination__text.cds--pagination__items-count {
32639
32725
  }
32640
32726
 
32641
32727
  .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 {
32728
+ .cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch {
32644
32729
  box-shadow: 0 0 0 1px var(--cds-focus-inset, #ffffff), 0 0 0 3px var(--cds-focus, #0f62fe);
32645
32730
  }
32646
32731
 
@@ -32740,13 +32825,72 @@ span.cds--pagination__text.cds--pagination__items-count {
32740
32825
 
32741
32826
  @media screen and (-ms-high-contrast: active), (forced-colors: active) {
32742
32827
  .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 {
32828
+ .cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch {
32745
32829
  color: Highlight;
32746
32830
  outline: 1px solid Highlight;
32747
32831
  }
32748
32832
  }
32749
32833
 
32834
+ .cds--toggle--skeleton {
32835
+ display: flex;
32836
+ align-items: center;
32837
+ }
32838
+
32839
+ .cds--toggle--skeleton .cds--toggle__skeleton-circle {
32840
+ position: relative;
32841
+ overflow: hidden;
32842
+ background: var(--cds-skeleton-background, #e8e8e8);
32843
+ border-radius: 50%;
32844
+ width: 1.125rem;
32845
+ height: 1.125rem;
32846
+ border-radius: 50%;
32847
+ }
32848
+ .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
32849
+ position: absolute;
32850
+ width: 200%;
32851
+ height: 100%;
32852
+ animation: 3000ms ease-in-out skeleton infinite;
32853
+ background: var(--cds-skeleton-element, #c6c6c6);
32854
+ content: "";
32855
+ will-change: transform-origin, transform, opacity;
32856
+ }
32857
+ @media (prefers-reduced-motion: reduce) {
32858
+ .cds--toggle--skeleton .cds--toggle__skeleton-circle::before {
32859
+ animation: none;
32860
+ }
32861
+ }
32862
+
32863
+ .cds--toggle--skeleton .cds--toggle__skeleton-rectangle {
32864
+ position: relative;
32865
+ padding: 0;
32866
+ border: none;
32867
+ background: var(--cds-skeleton-background, #e8e8e8);
32868
+ box-shadow: none;
32869
+ pointer-events: none;
32870
+ width: 1.5rem;
32871
+ height: 0.5rem;
32872
+ margin-left: 0.5rem;
32873
+ }
32874
+ .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:hover, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:focus, .cds--toggle--skeleton .cds--toggle__skeleton-rectangle:active {
32875
+ border: none;
32876
+ cursor: default;
32877
+ outline: none;
32878
+ }
32879
+ .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
32880
+ position: absolute;
32881
+ width: 100%;
32882
+ height: 100%;
32883
+ animation: 3000ms ease-in-out skeleton infinite;
32884
+ background: var(--cds-skeleton-element, #c6c6c6);
32885
+ content: "";
32886
+ will-change: transform-origin, transform, opacity;
32887
+ }
32888
+ @media (prefers-reduced-motion: reduce) {
32889
+ .cds--toggle--skeleton .cds--toggle__skeleton-rectangle::before {
32890
+ animation: none;
32891
+ }
32892
+ }
32893
+
32750
32894
  .cds--tree {
32751
32895
  overflow: hidden;
32752
32896
  }
@@ -32993,6 +33137,10 @@ span.cds--pagination__text.cds--pagination__items-count {
32993
33137
  }
32994
33138
  }
32995
33139
 
33140
+ .cds--header__global .cds--popover {
33141
+ z-index: 8001;
33142
+ }
33143
+
32996
33144
  .cds--header__action > :first-child {
32997
33145
  margin-block-start: 0;
32998
33146
  }
@@ -33928,6 +34076,10 @@ a.cds--side-nav__link--current::before {
33928
34076
  }
33929
34077
  }
33930
34078
 
34079
+ .cds--header__global .cds--popover {
34080
+ z-index: 8001;
34081
+ }
34082
+
33931
34083
  .cds--header__action > :first-child {
33932
34084
  margin-block-start: 0;
33933
34085
  }