@carbon/ibm-products 2.3.2 → 2.4.1

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 (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
  }