@carbon/ibm-products 2.49.1 → 2.50.0-rc.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 (116) hide show
  1. package/css/index-full-carbon.css +1180 -1148
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +3 -0
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +5 -0
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +27 -20
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AboutModal/AboutModal.js +23 -6
  18. package/es/components/ActionBar/ActionBar.d.ts +5 -1
  19. package/es/components/ActionBar/ActionBar.js +13 -3
  20. package/es/components/ActionBar/ActionBarOverflowItems.d.ts +12 -3
  21. package/es/components/ActionBar/ActionBarOverflowItems.js +13 -3
  22. package/es/components/Carousel/Carousel.js +1 -2
  23. package/es/components/Coachmark/CoachmarkDragbar.js +0 -1
  24. package/es/components/Coachmark/CoachmarkHeader.js +0 -1
  25. package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +0 -1
  26. package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +0 -1
  27. package/es/components/CoachmarkStack/CoachmarkStackHome.js +1 -2
  28. package/es/components/ConditionBuilder/ConditionBuilder.js +1 -3
  29. package/es/components/CreateTearsheet/CreateTearsheet.d.ts +6 -0
  30. package/es/components/CreateTearsheet/CreateTearsheet.js +13 -1
  31. package/es/components/CreateTearsheet/CreateTearsheetStep.d.ts +18 -0
  32. package/es/components/CreateTearsheet/CreateTearsheetStep.js +30 -3
  33. package/es/components/Datagrid/Datagrid/DatagridContent.js +4 -1
  34. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -21
  35. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +7 -2
  36. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
  37. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +4 -1
  38. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +3 -1
  39. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
  40. package/es/components/Datagrid/Datagrid/addons/stateReducer.d.ts +7 -0
  41. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +99 -41
  42. package/es/components/Datagrid/types/index.d.ts +2 -0
  43. package/es/components/Datagrid/useDisableSelectRows.js +18 -3
  44. package/es/components/Datagrid/useFlexResize.d.ts +0 -6
  45. package/es/components/Datagrid/useFlexResize.js +33 -17
  46. package/es/components/Datagrid/useSortableColumns.js +2 -1
  47. package/es/components/EditUpdateCards/EditUpdateCards.d.ts +1 -1
  48. package/es/components/EditUpdateCards/EditUpdateCards.js +1 -2
  49. package/es/components/PageHeader/PageHeader.js +12 -2
  50. package/es/components/PageHeader/PageHeaderUtils.js +0 -5
  51. package/es/components/SidePanel/SidePanel.js +6 -6
  52. package/es/components/TagOverflow/TagOverflow.d.ts +1 -1
  53. package/es/components/TagOverflow/TagOverflow.js +1 -2
  54. package/es/components/TagSet/TagSet.d.ts +8 -6
  55. package/es/components/TagSet/TagSet.js +38 -30
  56. package/es/components/TagSet/TagSetOverflow.d.ts +4 -0
  57. package/es/components/TagSet/TagSetOverflow.js +8 -2
  58. package/es/components/Tearsheet/Tearsheet.d.ts +1 -1
  59. package/es/components/Tearsheet/TearsheetNarrow.d.ts +1 -1
  60. package/es/components/Tearsheet/TearsheetShell.d.ts +1 -1
  61. package/es/components/Tearsheet/TearsheetShell.js +2 -1
  62. package/es/global/js/hooks/useCreateComponentStepChange.d.ts +3 -1
  63. package/es/global/js/hooks/useCreateComponentStepChange.js +18 -2
  64. package/es/global/js/utils/Wrap.d.ts +4 -0
  65. package/lib/components/AboutModal/AboutModal.js +22 -5
  66. package/lib/components/ActionBar/ActionBar.d.ts +5 -1
  67. package/lib/components/ActionBar/ActionBar.js +13 -3
  68. package/lib/components/ActionBar/ActionBarOverflowItems.d.ts +12 -3
  69. package/lib/components/ActionBar/ActionBarOverflowItems.js +13 -3
  70. package/lib/components/Carousel/Carousel.js +1 -2
  71. package/lib/components/Coachmark/CoachmarkDragbar.js +0 -1
  72. package/lib/components/Coachmark/CoachmarkHeader.js +0 -1
  73. package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js +0 -1
  74. package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js +0 -1
  75. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +1 -2
  76. package/lib/components/ConditionBuilder/ConditionBuilder.js +1 -3
  77. package/lib/components/CreateTearsheet/CreateTearsheet.d.ts +6 -0
  78. package/lib/components/CreateTearsheet/CreateTearsheet.js +13 -1
  79. package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts +18 -0
  80. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +29 -2
  81. package/lib/components/Datagrid/Datagrid/DatagridContent.js +4 -1
  82. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +3 -20
  83. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +7 -2
  84. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +6 -3
  85. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +4 -1
  86. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +3 -1
  87. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -1
  88. package/lib/components/Datagrid/Datagrid/addons/stateReducer.d.ts +7 -0
  89. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +99 -40
  90. package/lib/components/Datagrid/types/index.d.ts +2 -0
  91. package/lib/components/Datagrid/useDisableSelectRows.js +18 -3
  92. package/lib/components/Datagrid/useFlexResize.d.ts +0 -6
  93. package/lib/components/Datagrid/useFlexResize.js +32 -16
  94. package/lib/components/Datagrid/useSortableColumns.js +2 -1
  95. package/lib/components/EditUpdateCards/EditUpdateCards.d.ts +1 -1
  96. package/lib/components/EditUpdateCards/EditUpdateCards.js +1 -2
  97. package/lib/components/PageHeader/PageHeader.js +11 -1
  98. package/lib/components/PageHeader/PageHeaderUtils.js +0 -5
  99. package/lib/components/SidePanel/SidePanel.js +6 -6
  100. package/lib/components/TagOverflow/TagOverflow.d.ts +1 -1
  101. package/lib/components/TagOverflow/TagOverflow.js +1 -2
  102. package/lib/components/TagSet/TagSet.d.ts +8 -6
  103. package/lib/components/TagSet/TagSet.js +38 -30
  104. package/lib/components/TagSet/TagSetOverflow.d.ts +4 -0
  105. package/lib/components/TagSet/TagSetOverflow.js +8 -2
  106. package/lib/components/Tearsheet/Tearsheet.d.ts +1 -1
  107. package/lib/components/Tearsheet/TearsheetNarrow.d.ts +1 -1
  108. package/lib/components/Tearsheet/TearsheetShell.d.ts +1 -1
  109. package/lib/components/Tearsheet/TearsheetShell.js +2 -1
  110. package/lib/global/js/hooks/useCreateComponentStepChange.d.ts +3 -1
  111. package/lib/global/js/hooks/useCreateComponentStepChange.js +18 -2
  112. package/lib/global/js/utils/Wrap.d.ts +4 -0
  113. package/package.json +12 -12
  114. package/scss/components/Datagrid/styles/_useSortableColumns.scss +1 -0
  115. package/scss/components/Tearsheet/_tearsheet.scss +2 -0
  116. package/telemetry.yml +6 -0
@@ -3719,6 +3719,8 @@ p.c4p--about-modal__copyright-text:first-child {
3719
3719
  }
3720
3720
  .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
3721
3721
  inset-inline-end: 0;
3722
+ margin-block: 6px;
3723
+ margin-inline-end: 1rem;
3722
3724
  }
3723
3725
 
3724
3726
  @keyframes step-content-entrance {
@@ -11110,6 +11112,7 @@ button.c4p--add-select__global-filter-toggle--open {
11110
11112
  }
11111
11113
  .c4p--datagrid__sortableColumn .cds--table-sort.c4p--datagrid--table-sort {
11112
11114
  width: calc(100% + 2rem);
11115
+ align-items: inherit;
11113
11116
  margin: 0 calc(-1 * 1rem);
11114
11117
  }
11115
11118
 
@@ -14901,6 +14904,8 @@ a.cds--side-nav__link--current::before {
14901
14904
 
14902
14905
  .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
14903
14906
  inset-inline-end: 0;
14907
+ margin-block: 6px;
14908
+ margin-inline-end: 1rem;
14904
14909
  }
14905
14910
 
14906
14911
  @keyframes influencer-menu-entrance {
@@ -23950,14 +23955,14 @@ li.cds--accordion__item--disabled:last-of-type {
23950
23955
  .cds--accordion__item--active {
23951
23956
  overflow: visible;
23952
23957
  }
23953
- .cds--accordion__item--active .cds--accordion__wrapper {
23958
+ .cds--accordion__item--active > .cds--accordion__wrapper {
23954
23959
  overflow: visible;
23955
23960
  max-block-size: fit-content;
23956
23961
  opacity: 1;
23957
23962
  padding-block: 0.5rem;
23958
23963
  padding-block-end: 1.5rem;
23959
23964
  }
23960
- .cds--accordion__item--active .cds--accordion__arrow {
23965
+ .cds--accordion__item--active > .cds--accordion__heading > .cds--accordion__arrow {
23961
23966
  fill: var(--cds-icon-primary, #161616);
23962
23967
  transform: rotate(-90deg) /*rtl:ignore*/;
23963
23968
  }
@@ -24077,60 +24082,6 @@ li.cds--accordion__item--disabled:last-of-type {
24077
24082
  padding-inline-start: 0;
24078
24083
  }
24079
24084
 
24080
- .cds--aspect-ratio {
24081
- position: relative;
24082
- }
24083
-
24084
- .cds--aspect-ratio::before {
24085
- block-size: 0;
24086
- content: "";
24087
- float: left;
24088
- inline-size: 1px;
24089
- margin-inline-start: -1px;
24090
- }
24091
-
24092
- .cds--aspect-ratio::after {
24093
- display: table;
24094
- clear: both;
24095
- content: "";
24096
- }
24097
-
24098
- .cds--aspect-ratio--16x9::before {
24099
- padding-block-start: 56.25%;
24100
- }
24101
-
24102
- .cds--aspect-ratio--9x16::before {
24103
- padding-block-start: 177.7777777778%;
24104
- }
24105
-
24106
- .cds--aspect-ratio--2x1::before {
24107
- padding-block-start: 50%;
24108
- }
24109
-
24110
- .cds--aspect-ratio--1x2::before {
24111
- padding-block-start: 200%;
24112
- }
24113
-
24114
- .cds--aspect-ratio--4x3::before {
24115
- padding-block-start: 75%;
24116
- }
24117
-
24118
- .cds--aspect-ratio--3x4::before {
24119
- padding-block-start: 133.3333333333%;
24120
- }
24121
-
24122
- .cds--aspect-ratio--3x2::before {
24123
- padding-block-start: 66.6666666667%;
24124
- }
24125
-
24126
- .cds--aspect-ratio--2x3::before {
24127
- padding-block-start: 150%;
24128
- }
24129
-
24130
- .cds--aspect-ratio--1x1::before {
24131
- padding-block-start: 100%;
24132
- }
24133
-
24134
24085
  .cds--popover-container {
24135
24086
  display: inline-block;
24136
24087
  }
@@ -25157,8 +25108,16 @@ li.cds--accordion__item--disabled:last-of-type {
25157
25108
  box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
25158
25109
  }
25159
25110
 
25160
- .cds--overflow-menu,
25161
- .cds--overflow-menu__trigger {
25111
+ .cds--toggletip-label {
25112
+ font-size: var(--cds-body-01-font-size, 0.875rem);
25113
+ font-weight: var(--cds-body-01-font-weight, 400);
25114
+ line-height: var(--cds-body-01-line-height, 1.42857);
25115
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
25116
+ color: var(--cds-text-secondary, #525252);
25117
+ margin-inline-end: 0.5rem;
25118
+ }
25119
+
25120
+ .cds--toggletip-button {
25162
25121
  box-sizing: border-box;
25163
25122
  padding: 0;
25164
25123
  border: 0;
@@ -25174,345 +25133,1033 @@ li.cds--accordion__item--disabled:last-of-type {
25174
25133
  cursor: pointer;
25175
25134
  text-align: start;
25176
25135
  inline-size: 100%;
25177
- box-sizing: border-box;
25178
- padding: 0;
25179
- border: 0;
25180
- margin: 0;
25181
- font-family: inherit;
25182
- font-size: 100%;
25183
- vertical-align: baseline;
25184
- outline: 2px solid transparent;
25185
- outline-offset: -2px;
25186
- position: relative;
25187
25136
  display: flex;
25188
25137
  align-items: center;
25189
- justify-content: center;
25190
- block-size: 2.5rem;
25191
- cursor: pointer;
25192
- inline-size: 2.5rem;
25193
- min-block-size: 2.5rem;
25194
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
25195
25138
  }
25196
- .cds--overflow-menu *,
25197
- .cds--overflow-menu *::before,
25198
- .cds--overflow-menu *::after,
25199
- .cds--overflow-menu__trigger *,
25200
- .cds--overflow-menu__trigger *::before,
25201
- .cds--overflow-menu__trigger *::after {
25139
+ .cds--toggletip-button *,
25140
+ .cds--toggletip-button *::before,
25141
+ .cds--toggletip-button *::after {
25202
25142
  box-sizing: inherit;
25203
25143
  }
25204
- .cds--overflow-menu::-moz-focus-inner,
25205
- .cds--overflow-menu__trigger::-moz-focus-inner {
25144
+ .cds--toggletip-button::-moz-focus-inner {
25206
25145
  border: 0;
25207
25146
  }
25208
- .cds--overflow-menu *,
25209
- .cds--overflow-menu *::before,
25210
- .cds--overflow-menu *::after,
25211
- .cds--overflow-menu__trigger *,
25212
- .cds--overflow-menu__trigger *::before,
25213
- .cds--overflow-menu__trigger *::after {
25214
- box-sizing: inherit;
25215
- }
25216
- .cds--overflow-menu:focus,
25217
- .cds--overflow-menu__trigger:focus {
25218
- outline: 2px solid var(--cds-focus, #0f62fe);
25219
- outline-offset: -2px;
25220
- }
25221
- @media screen and (prefers-contrast) {
25222
- .cds--overflow-menu:focus,
25223
- .cds--overflow-menu__trigger:focus {
25224
- outline-style: dotted;
25225
- }
25226
- }
25227
- .cds--overflow-menu:hover,
25228
- .cds--overflow-menu__trigger:hover {
25229
- background-color: var(--cds-layer-hover);
25230
- }
25231
-
25232
- .cds--overflow-menu > :first-child {
25233
- margin-block-start: 0;
25234
- }
25235
25147
 
25236
- .cds--overflow-menu--sm {
25237
- block-size: 2rem;
25238
- inline-size: 2rem;
25239
- min-block-size: 2rem;
25148
+ .cds--toggletip-button svg {
25149
+ fill: var(--cds-icon-secondary, #525252);
25240
25150
  }
25241
25151
 
25242
- .cds--overflow-menu--lg {
25243
- block-size: 3rem;
25244
- inline-size: 3rem;
25152
+ .cds--toggletip-button:hover svg,
25153
+ .cds--toggletip--open .cds--toggletip-button svg {
25154
+ fill: var(--cds-icon-primary, #161616);
25245
25155
  }
25246
25156
 
25247
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
25248
- outline: 2px solid var(--cds-focus, #0f62fe);
25249
- outline-offset: -2px;
25157
+ .cds--toggletip-button:focus {
25158
+ outline: 1px solid var(--cds-focus, #0f62fe);
25250
25159
  }
25251
25160
  @media screen and (prefers-contrast) {
25252
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
25161
+ .cds--toggletip-button:focus {
25253
25162
  outline-style: dotted;
25254
25163
  }
25255
25164
  }
25256
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus svg {
25257
- outline: none;
25165
+
25166
+ .cds--toggletip {
25167
+ --cds-popover-offset: 0.8125rem;
25258
25168
  }
25259
25169
 
25260
- .cds--overflow-menu.cds--overflow-menu--open,
25261
- .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger {
25262
- box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
25263
- background-color: var(--cds-layer);
25264
- transition: none;
25170
+ .cds--toggletip-content {
25171
+ --cds-button-focus-color: var(--cds-focus-inverse, #ffffff);
25172
+ --cds-link-text-color: var(--cds-link-inverse, #78a9ff);
25173
+ --cds-link-hover-text-color: var(--cds-link-inverse-hover, #a6c8ff);
25174
+ --cds-link-visited-text-color: var(--cds-link-inverse-visited, #be95ff);
25175
+ --cds-link-focus-text-color: var(--cds-focus-inverse, #ffffff);
25176
+ font-size: var(--cds-body-01-font-size, 0.875rem);
25177
+ font-weight: var(--cds-body-01-font-weight, 400);
25178
+ line-height: var(--cds-body-01-line-height, 1.42857);
25179
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
25180
+ display: grid;
25181
+ padding: 1rem;
25182
+ max-inline-size: 18rem;
25183
+ row-gap: 1rem;
25265
25184
  }
25266
25185
 
25267
- .cds--overflow-menu--light.cds--overflow-menu--open,
25268
- .cds--overflow-menu--light.cds--overflow-menu--open .cds--overflow-menu__trigger {
25269
- background-color: var(--cds-layer);
25186
+ .cds--toggletip-content p {
25187
+ font-size: var(--cds-body-01-font-size, 0.875rem);
25188
+ font-weight: var(--cds-body-01-font-weight, 400);
25189
+ line-height: var(--cds-body-01-line-height, 1.42857);
25190
+ letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
25270
25191
  }
25271
25192
 
25272
- .cds--overflow-menu__icon {
25273
- block-size: 1rem;
25274
- fill: var(--cds-icon-primary, #161616);
25275
- inline-size: 1rem;
25193
+ .cds--toggletip-actions {
25194
+ display: flex;
25195
+ align-items: center;
25196
+ justify-content: space-between;
25197
+ column-gap: 1rem;
25276
25198
  }
25277
25199
 
25278
- .cds--overflow-menu__wrapper {
25279
- line-height: 0;
25200
+ .cds--slug {
25201
+ display: flex;
25280
25202
  }
25281
25203
 
25282
- .cds--overflow-menu-options {
25283
- box-sizing: border-box;
25284
- padding: 0;
25285
- border: 0;
25286
- margin: 0;
25287
- font-family: inherit;
25288
- font-size: 100%;
25289
- vertical-align: baseline;
25290
- box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
25291
- position: absolute;
25292
- z-index: 6000;
25293
- display: none;
25294
- flex-direction: column;
25295
- align-items: flex-start;
25296
- background-color: var(--cds-layer);
25297
- inline-size: 10rem;
25298
- inset-block-start: 32px;
25299
- inset-inline-start: 0;
25300
- list-style: none;
25204
+ .cds--slug:has(> .cds--popover--open) {
25205
+ z-index: 2;
25301
25206
  }
25302
- .cds--overflow-menu-options *,
25303
- .cds--overflow-menu-options *::before,
25304
- .cds--overflow-menu-options *::after {
25305
- box-sizing: inherit;
25207
+
25208
+ .cds--slug .cds--slug__button {
25209
+ position: relative;
25210
+ display: flex;
25211
+ align-items: center;
25212
+ justify-content: center;
25213
+ border: 1px solid var(--cds-border-inverse, #161616);
25214
+ background: transparent;
25215
+ color: var(--cds-text-primary, #161616);
25216
+ font-weight: 600;
25217
+ outline: none;
25218
+ transition: color 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), background 70ms cubic-bezier(0, 0, 0.38, 0.9);
25306
25219
  }
25307
- .cds--overflow-menu-options::after {
25308
- position: absolute;
25309
- display: block;
25310
- background-color: var(--cds-layer);
25311
- content: "";
25312
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
25220
+ .cds--slug .cds--slug__button--mini {
25221
+ height: 1rem;
25222
+ width: 1rem;
25223
+ font-size: 0.5625rem;
25224
+ line-height: 0.75rem;
25313
25225
  }
25314
- @media screen and (prefers-reduced-motion: reduce) {
25315
- .cds--overflow-menu-options::after {
25316
- transition: none;
25317
- }
25226
+ .cds--slug .cds--slug__button--2xs {
25227
+ height: 1.25rem;
25228
+ width: 1.25rem;
25229
+ font-size: 0.75rem;
25230
+ line-height: 1rem;
25318
25231
  }
25319
-
25320
- .cds--overflow-menu.cds--overflow-menu--open:hover {
25321
- background-color: var(--cds-layer);
25232
+ .cds--slug .cds--slug__button--xs {
25233
+ height: 1.5rem;
25234
+ width: 1.5rem;
25235
+ font-size: 0.75rem;
25236
+ line-height: 1rem;
25322
25237
  }
25323
-
25324
- .cds--overflow-menu-options--light {
25325
- background-color: var(--cds-layer);
25238
+ .cds--slug .cds--slug__button--sm {
25239
+ height: 2rem;
25240
+ width: 2rem;
25241
+ font-size: 1rem;
25242
+ line-height: 1.3125rem;
25326
25243
  }
25327
- .cds--overflow-menu-options--light::after {
25328
- background-color: var(--cds-layer);
25244
+ .cds--slug .cds--slug__button--md {
25245
+ height: 2.5rem;
25246
+ width: 2.5rem;
25247
+ font-size: 1rem;
25248
+ line-height: 1.3125rem;
25329
25249
  }
25330
-
25331
- .cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover {
25332
- background-color: var(--cds-layer);
25250
+ .cds--slug .cds--slug__button--lg {
25251
+ height: 3rem;
25252
+ width: 3rem;
25253
+ font-size: 1rem;
25254
+ line-height: 1.3125rem;
25333
25255
  }
25334
-
25335
- .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
25336
- block-size: 0.1875rem;
25337
- inline-size: 2.5rem;
25338
- inset-block-start: -0.1875rem;
25339
- inset-inline-start: 0;
25256
+ .cds--slug .cds--slug__button--xl {
25257
+ height: 4rem;
25258
+ width: 4rem;
25259
+ font-size: 1.25rem;
25260
+ line-height: 1.625rem;
25340
25261
  }
25341
25262
 
25342
- .cds--overflow-menu-options[data-floating-menu-direction=top]::after {
25343
- block-size: 0.5rem;
25344
- inline-size: 2.5rem;
25345
- inset-block-end: -0.5rem;
25346
- inset-inline-start: 0;
25263
+ .cds--slug__button--mini::after,
25264
+ .cds--slug__button--2xs::after {
25265
+ position: absolute;
25266
+ display: block;
25267
+ block-size: 24px;
25268
+ content: "";
25269
+ inline-size: 24px;
25347
25270
  }
25348
25271
 
25349
- .cds--overflow-menu-options[data-floating-menu-direction=left]::after {
25350
- block-size: 2.5rem;
25351
- inline-size: 0.375rem;
25352
- inset-block-start: 0;
25353
- inset-inline-end: -0.375rem;
25272
+ .cds--slug .cds--slug__button:focus {
25273
+ border: 1px solid var(--cds-focus, #0f62fe);
25274
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
25354
25275
  }
25355
25276
 
25356
- .cds--overflow-menu-options[data-floating-menu-direction=right]::after {
25357
- block-size: 2.5rem;
25358
- inline-size: 0.375rem;
25359
- inset-block-start: 0;
25360
- inset-inline-start: -0.375rem;
25277
+ .cds--slug .cds--slug__button:hover {
25278
+ background: var(--cds-border-inverse, #161616);
25279
+ color: var(--cds-text-inverse, #ffffff);
25361
25280
  }
25362
25281
 
25363
- .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
25364
- inline-size: 2rem;
25365
- }
25366
- .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
25367
- block-size: 2rem;
25282
+ .cds--slug .cds--slug__button:hover:active {
25283
+ background: var(--cds-border-inverse, #161616);
25284
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-focus-inset, #ffffff);
25285
+ color: var(--cds-text-inverse, #ffffff);
25368
25286
  }
25369
25287
 
25370
- .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
25371
- inline-size: 3rem;
25372
- }
25373
- .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
25374
- block-size: 3rem;
25288
+ .cds--slug .cds--slug__button.cds--slug__button--mini:hover:active,
25289
+ .cds--slug .cds--slug__button.cds--slug__button--2xs:hover:active {
25290
+ box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
25375
25291
  }
25376
25292
 
25377
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=top]::after,
25378
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
25379
- inset-inline-end: 0;
25380
- inset-inline-start: auto;
25293
+ .cds--slug__text {
25294
+ position: relative;
25295
+ z-index: 1;
25381
25296
  }
25382
25297
 
25383
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=left]::after,
25384
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
25385
- inset-block-end: 0;
25386
- inset-block-start: auto;
25298
+ .cds--slug .cds--slug__button--inline {
25299
+ border: 1px solid transparent;
25300
+ border-radius: 0.0625rem;
25301
+ background: transparent;
25302
+ block-size: initial;
25303
+ color: var(--cds-text-primary, #161616);
25304
+ font-size: 0.875rem;
25305
+ inline-size: initial;
25306
+ line-height: initial;
25307
+ padding-inline: 0.25rem;
25387
25308
  }
25388
25309
 
25389
- .cds--overflow-menu-options--open {
25390
- display: flex;
25310
+ .cds--slug__button--inline::before {
25311
+ display: none;
25391
25312
  }
25392
25313
 
25393
- .cds--overflow-menu-options__content {
25394
- inline-size: 100%;
25314
+ .cds--slug .cds--slug__button--inline:focus {
25315
+ border-color: var(--cds-focus, #0f62fe);
25316
+ box-shadow: none;
25395
25317
  }
25396
25318
 
25397
- .cds--overflow-menu-options__option {
25398
- box-sizing: border-box;
25399
- padding: 0;
25400
- border: 0;
25401
- margin: 0;
25402
- font-family: inherit;
25403
- font-size: 100%;
25404
- vertical-align: baseline;
25405
- display: flex;
25406
- align-items: center;
25407
- padding: 0;
25408
- background-color: transparent;
25409
- block-size: 2.5rem;
25410
- inline-size: 100%;
25411
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
25412
- }
25413
- .cds--overflow-menu-options__option *,
25414
- .cds--overflow-menu-options__option *::before,
25415
- .cds--overflow-menu-options__option *::after {
25416
- box-sizing: inherit;
25319
+ .cds--slug .cds--slug__button--inline:hover,
25320
+ .cds--slug .cds--slug__button--inline:hover:active {
25321
+ border-color: var(--cds-icon-secondary, #525252);
25322
+ background: transparent;
25323
+ box-shadow: none;
25324
+ color: var(--cds-text-secondary, #525252);
25417
25325
  }
25418
25326
 
25419
- .cds--overflow-menu-options--sm .cds--overflow-menu-options__option {
25420
- block-size: 2rem;
25327
+ .cds--slug .cds--slug__button--inline:focus:hover {
25328
+ border-color: var(--cds-focus, #0f62fe);
25421
25329
  }
25422
25330
 
25423
- .cds--overflow-menu-options--lg .cds--overflow-menu-options__option {
25424
- block-size: 3rem;
25331
+ .cds--slug .cds--slug__button--inline:hover .cds--slug__text::before {
25332
+ background: var(--cds-icon-secondary, #525252);
25425
25333
  }
25426
25334
 
25427
- .cds--overflow-menu--divider {
25428
- border-block-start: 1px solid var(--cds-border-subtle);
25335
+ .cds--slug__button--inline .cds--slug__text {
25336
+ padding-inline-start: 0.5rem;
25429
25337
  }
25430
25338
 
25431
- .cds--overflow-menu--light .cds--overflow-menu--divider {
25432
- border-block-start: 1px solid var(--cds-border-subtle);
25339
+ .cds--slug__button--inline.cds--slug__button--lg .cds--slug__text,
25340
+ .cds--slug__button--inline.cds--slug__button--xl .cds--slug__text {
25341
+ padding-inline-start: 0.75rem;
25433
25342
  }
25434
25343
 
25435
- a.cds--overflow-menu-options__btn::before {
25344
+ .cds--slug__button--inline .cds--slug__text::before {
25345
+ position: absolute;
25436
25346
  display: inline-block;
25437
- block-size: 100%;
25347
+ background: var(--cds-icon-primary, #161616);
25348
+ block-size: 0.25rem;
25438
25349
  content: "";
25439
- vertical-align: middle;
25350
+ inline-size: 0.25rem;
25351
+ inset-block-start: 50%;
25352
+ inset-inline-start: 0;
25353
+ opacity: 1;
25354
+ transform: translateY(-50%);
25355
+ transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9);
25440
25356
  }
25441
25357
 
25442
- .cds--overflow-menu-options__btn {
25443
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
25444
- font-weight: var(--cds-body-compact-01-font-weight, 400);
25445
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
25446
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
25447
- outline: 2px solid transparent;
25448
- outline-offset: -2px;
25449
- display: inline-flex;
25450
- align-items: center;
25451
- padding: 0 1rem;
25452
- border: none;
25453
- background-color: transparent;
25454
- block-size: 100%;
25455
- color: var(--cds-text-secondary, #525252);
25456
- cursor: pointer;
25457
- font-family: inherit;
25458
- font-weight: 400;
25459
- inline-size: 100%;
25460
- max-inline-size: 11.25rem;
25461
- text-align: start;
25462
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9), color 110ms cubic-bezier(0, 0, 0.38, 0.9);
25463
- }
25464
- .cds--overflow-menu-options__btn:hover {
25465
- color: var(--cds-text-primary, #161616);
25466
- }
25467
- .cds--overflow-menu-options__btn:focus {
25468
- outline: 2px solid var(--cds-focus, #0f62fe);
25469
- outline-offset: -2px;
25470
- }
25471
- @media screen and (prefers-contrast) {
25472
- .cds--overflow-menu-options__btn:focus {
25473
- outline-style: dotted;
25474
- }
25475
- }
25476
- .cds--overflow-menu-options__btn::-moz-focus-inner {
25477
- border: none;
25358
+ .cds--slug__button--lg .cds--slug__text::before,
25359
+ .cds--slug__button--xl .cds--slug__text::before {
25360
+ block-size: 0.5rem;
25361
+ inline-size: 0.5rem;
25478
25362
  }
25479
25363
 
25480
- .cds--overflow-menu-options__btn svg {
25481
- fill: var(--cds-icon-secondary, #525252);
25364
+ .cds--slug__button--inline.cds--slug__button--mini,
25365
+ .cds--slug__button--inline.cds--slug__button--mini .cds--slug__additional-text,
25366
+ .cds--slug__button--inline.cds--slug__button--2xs,
25367
+ .cds--slug__button--inline.cds--slug__button--2xs .cds--slug__additional-text,
25368
+ .cds--slug__button--inline.cds--slug__button--xs,
25369
+ .cds--slug__button--inline.cds--slug__button--xs .cds--slug__additional-text,
25370
+ .cds--slug__button--inline.cds--slug__button--sm,
25371
+ .cds--slug__button--inline.cds--slug__button--sm .cds--slug__additional-text {
25372
+ font-size: 0.75rem;
25482
25373
  }
25483
25374
 
25484
- .cds--overflow-menu-options__btn:hover svg {
25485
- fill: var(--cds-icon-primary, #161616);
25375
+ .cds--slug__button--inline.cds--slug__button--lg,
25376
+ .cds--slug__button--inline.cds--slug__button--xl {
25377
+ font-size: 1rem;
25486
25378
  }
25487
25379
 
25488
- .cds--overflow-menu-options__option-content {
25489
- overflow: hidden;
25490
- text-overflow: ellipsis;
25491
- white-space: nowrap;
25380
+ .cds--slug .cds--slug__button--inline-with-content {
25381
+ border: 1px solid var(--cds-border-inverse, #161616);
25382
+ padding-block: 0.125rem;
25383
+ padding-inline: 0.5rem;
25492
25384
  }
25493
25385
 
25494
- .cds--overflow-menu-options__option:hover {
25495
- background-color: var(--cds-layer-hover);
25386
+ .cds--slug__button--inline-with-content .cds--slug__additional-text {
25387
+ font-size: var(--cds-body-compact-02-font-size, 1rem);
25388
+ font-weight: var(--cds-body-compact-02-font-weight, 400);
25389
+ line-height: var(--cds-body-compact-02-line-height, 1.375);
25390
+ letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
25391
+ padding-inline-start: 0.25rem;
25496
25392
  }
25497
25393
 
25498
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover,
25499
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus {
25500
- background-color: var(--cds-button-danger-primary, #da1e28);
25501
- color: var(--cds-text-on-color, #ffffff);
25502
- }
25503
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover svg,
25504
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus svg {
25505
- fill: currentColor;
25394
+ .cds--slug__button--inline.cds--slug__button--md .cds--slug__additional-text {
25395
+ font-size: 0.875rem;
25506
25396
  }
25507
25397
 
25508
- .cds--overflow-menu-options__option--disabled:hover {
25509
- background-color: var(--cds-layer);
25510
- cursor: not-allowed;
25398
+ .cds--slug .cds--slug__button--inline-with-content:focus,
25399
+ .cds--slug .cds--slug__button--inline-with-content:hover:focus {
25400
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
25511
25401
  }
25512
25402
 
25513
- .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn {
25514
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
25515
- cursor: not-allowed;
25403
+ .cds--slug .cds--slug-content {
25404
+ background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
25405
+ border: 1px solid transparent;
25406
+ border-radius: 0.5rem;
25407
+ box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), -40px 44px 60px -24px var(--cds-ai-popover-shadow-outer-01, rgba(0, 67, 206, 0.06)), -56px 64px 64px -24px var(--cds-ai-popover-shadow-outer-02, rgba(0, 0, 0, 0.04));
25408
+ color: var(--cds-text-primary, #161616);
25409
+ min-inline-size: 17.5rem;
25410
+ }
25411
+
25412
+ .cds--slug > .cds--toggletip > .cds--popover > .cds--popover-caret,
25413
+ .cds--slug > .cds--toggletip.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
25414
+ background: transparent;
25415
+ clip-path: none;
25416
+ }
25417
+
25418
+ .cds--slug > .cds--toggletip:is(.cds--popover--top,
25419
+ .cds--popover--top-right,
25420
+ .cds--popover--top-left,
25421
+ .cds--popover--top-end,
25422
+ .cds--popover--top-start,
25423
+ .cds--popover--bottom,
25424
+ .cds--popover--bottom-right,
25425
+ .cds--popover--bottom-left,
25426
+ .cds--popover--bottom-start,
25427
+ .cds--popover--bottom-end,
25428
+ .cds--popover--left,
25429
+ .cds--popover--left-top,
25430
+ .cds--popover--left-bottom,
25431
+ .cds--popover--left-start,
25432
+ .cds--popover--left-end,
25433
+ .cds--popover--right,
25434
+ .cds--popover--right-top,
25435
+ .cds--popover--right-bottom,
25436
+ .cds--popover--right-start,
25437
+ .cds--popover--right-end) > .cds--popover > .cds--popover-caret::before,
25438
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
25439
+ .cds--popover--top-right,
25440
+ .cds--popover--top-left,
25441
+ .cds--popover--top-end,
25442
+ .cds--popover--top-start,
25443
+ .cds--popover--bottom,
25444
+ .cds--popover--bottom-right,
25445
+ .cds--popover--bottom-left,
25446
+ .cds--popover--bottom-start,
25447
+ .cds--popover--bottom-end,
25448
+ .cds--popover--left,
25449
+ .cds--popover--left-top,
25450
+ .cds--popover--left-bottom,
25451
+ .cds--popover--left-start,
25452
+ .cds--popover--left-end,
25453
+ .cds--popover--right,
25454
+ .cds--popover--right-top,
25455
+ .cds--popover--right-bottom,
25456
+ .cds--popover--right-start,
25457
+ .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
25458
+ position: absolute;
25459
+ display: block;
25460
+ border: 1px solid var(--cds-ai-border-start, rgba(166, 200, 255, 0.64));
25461
+ background: var(--cds-background, #ffffff);
25462
+ block-size: 0.75rem;
25463
+ clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
25464
+ content: "";
25465
+ inline-size: 0.75rem;
25466
+ transform: rotate(45deg);
25467
+ }
25468
+
25469
+ .cds--slug > .cds--toggletip:is(.cds--popover--top,
25470
+ .cds--popover--top-right,
25471
+ .cds--popover--top-left,
25472
+ .cds--popover--top-end,
25473
+ .cds--popover--top-start,
25474
+ .cds--popover--bottom,
25475
+ .cds--popover--bottom-right,
25476
+ .cds--popover--bottom-left,
25477
+ .cds--popover--bottom-start,
25478
+ .cds--popover--bottom-end,
25479
+ .cds--popover--left,
25480
+ .cds--popover--left-top,
25481
+ .cds--popover--left-bottom,
25482
+ .cds--popover--left-start,
25483
+ .cds--popover--left-end,
25484
+ .cds--popover--right,
25485
+ .cds--popover--right-top,
25486
+ .cds--popover--right-bottom,
25487
+ .cds--popover--right-start,
25488
+ .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
25489
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
25490
+ .cds--popover--top-right,
25491
+ .cds--popover--top-left,
25492
+ .cds--popover--top-end,
25493
+ .cds--popover--top-start,
25494
+ .cds--popover--bottom,
25495
+ .cds--popover--bottom-right,
25496
+ .cds--popover--bottom-left,
25497
+ .cds--popover--bottom-start,
25498
+ .cds--popover--bottom-end,
25499
+ .cds--popover--left,
25500
+ .cds--popover--left-top,
25501
+ .cds--popover--left-bottom,
25502
+ .cds--popover--left-start,
25503
+ .cds--popover--left-end,
25504
+ .cds--popover--right,
25505
+ .cds--popover--right-top,
25506
+ .cds--popover--right-bottom,
25507
+ .cds--popover--right-start,
25508
+ .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
25509
+ position: absolute;
25510
+ display: block;
25511
+ background: var(--cds-background, #ffffff);
25512
+ block-size: 0.875rem;
25513
+ content: "";
25514
+ inline-size: 0.125rem;
25515
+ }
25516
+
25517
+ .cds--slug > .cds--toggletip:is(.cds--popover--top,
25518
+ .cds--popover--top-right,
25519
+ .cds--popover--top-left,
25520
+ .cds--popover--top-end,
25521
+ .cds--popover--top-start) > .cds--popover > .cds--popover-caret::before,
25522
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
25523
+ .cds--popover--top-right,
25524
+ .cds--popover--top-left,
25525
+ .cds--popover--top-end,
25526
+ .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
25527
+ inset-block-end: 0.0625rem;
25528
+ transform: rotate(-135deg);
25529
+ }
25530
+ .cds--slug > .cds--toggletip:is(.cds--popover--top,
25531
+ .cds--popover--top-right,
25532
+ .cds--popover--top-left,
25533
+ .cds--popover--top-end,
25534
+ .cds--popover--top-start) > .cds--popover > .cds--popover-caret::after,
25535
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
25536
+ .cds--popover--top-right,
25537
+ .cds--popover--top-left,
25538
+ .cds--popover--top-end,
25539
+ .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
25540
+ background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
25541
+ block-size: 0.125rem;
25542
+ border-end-end-radius: 50%;
25543
+ border-end-start-radius: 50%;
25544
+ inline-size: 0.875rem;
25545
+ inset-block-start: -0.125rem;
25546
+ inset-inline-start: -0.0625rem;
25547
+ }
25548
+
25549
+ .cds--slug > .cds--toggletip:is(.cds--popover--top,
25550
+ .cds--popover--top-right,
25551
+ .cds--popover--top-left,
25552
+ .cds--popover--top-end,
25553
+ .cds--popover--top-start) > .cds--popover > .cds--slug-content--with-actions + .cds--popover-caret::after {
25554
+ display: none;
25555
+ }
25556
+
25557
+ .cds--slug > .cds--toggletip:is(.cds--popover--right,
25558
+ .cds--popover--right-bottom,
25559
+ .cds--popover--right-top,
25560
+ .cds--popover--right-start,
25561
+ .cds--popover--right-end) > .cds--popover > .cds--popover-caret::before,
25562
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right,
25563
+ .cds--popover--right-bottom,
25564
+ .cds--popover--right-top,
25565
+ .cds--popover--right-start,
25566
+ .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
25567
+ inset-inline-start: 0.0625rem;
25568
+ transform: rotate(-45deg);
25569
+ }
25570
+ .cds--slug > .cds--toggletip:is(.cds--popover--right,
25571
+ .cds--popover--right-bottom,
25572
+ .cds--popover--right-top,
25573
+ .cds--popover--right-start,
25574
+ .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
25575
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right,
25576
+ .cds--popover--right-bottom,
25577
+ .cds--popover--right-top,
25578
+ .cds--popover--right-start,
25579
+ .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
25580
+ border-end-start-radius: 50%;
25581
+ border-start-start-radius: 50%;
25582
+ inset-block-start: -0.0625rem;
25583
+ inset-inline-start: 0.375rem;
25584
+ }
25585
+
25586
+ .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
25587
+ .cds--popover--bottom-left,
25588
+ .cds--popover--bottom-right,
25589
+ .cds--popover--bottom-start,
25590
+ .cds--popover--bottom-end) > .cds--popover > .cds--popover-caret::before,
25591
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom,
25592
+ .cds--popover--bottom-left,
25593
+ .cds--popover--bottom-right,
25594
+ .cds--popover--bottom-start,
25595
+ .cds--popover--bottom-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
25596
+ inset-block-start: 0.0625rem;
25597
+ transform: rotate(45deg);
25598
+ }
25599
+ .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
25600
+ .cds--popover--bottom-left,
25601
+ .cds--popover--bottom-right,
25602
+ .cds--popover--bottom-start,
25603
+ .cds--popover--bottom-end) > .cds--popover > .cds--popover-caret::after,
25604
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom,
25605
+ .cds--popover--bottom-left,
25606
+ .cds--popover--bottom-right,
25607
+ .cds--popover--bottom-start,
25608
+ .cds--popover--bottom-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
25609
+ block-size: 0.125rem;
25610
+ border-start-end-radius: 50%;
25611
+ border-start-start-radius: 50%;
25612
+ inline-size: 0.875rem;
25613
+ inset-block-end: -0.15625rem;
25614
+ inset-inline-start: -0.0625rem;
25615
+ }
25616
+
25617
+ .cds--slug > .cds--toggletip:is(.cds--popover--left,
25618
+ .cds--popover--left-bottom,
25619
+ .cds--popover--left-top,
25620
+ .cds--popover--left-start,
25621
+ .cds--popover--left-end) > .cds--popover > .cds--popover-caret::before,
25622
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
25623
+ .cds--popover--left-bottom,
25624
+ .cds--popover--left-top,
25625
+ .cds--popover--left-start,
25626
+ .cds--popover--left-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
25627
+ inset-inline-end: 0.0625rem;
25628
+ transform: rotate(135deg);
25629
+ }
25630
+ .cds--slug > .cds--toggletip:is(.cds--popover--left,
25631
+ .cds--popover--left-bottom,
25632
+ .cds--popover--left-top,
25633
+ .cds--popover--left-start,
25634
+ .cds--popover--left-end) > .cds--popover > .cds--popover-caret::after,
25635
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
25636
+ .cds--popover--left-bottom,
25637
+ .cds--popover--left-top,
25638
+ .cds--popover--left-start,
25639
+ .cds--popover--left-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
25640
+ border-end-end-radius: 50%;
25641
+ border-start-end-radius: 50%;
25642
+ inset-block-start: -0.0625rem;
25643
+ inset-inline-start: -0.125rem;
25644
+ }
25645
+
25646
+ .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
25647
+ .cds--popover--right-bottom,
25648
+ .cds--popover--left-end,
25649
+ .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
25650
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
25651
+ .cds--popover--right-bottom,
25652
+ .cds--popover--left-end,
25653
+ .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
25654
+ background: transparent;
25655
+ }
25656
+
25657
+ .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
25658
+ .cds--popover--right-bottom,
25659
+ .cds--popover--left-end,
25660
+ .cds--popover--right-end,
25661
+ .cds--popover--top,
25662
+ .cds--popover--top-right,
25663
+ .cds--popover--top-left,
25664
+ .cds--popover--top-end,
25665
+ .cds--popover--top-start) > .cds--popover > .cds--popover-caret::before,
25666
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
25667
+ .cds--popover--right-bottom,
25668
+ .cds--popover--left-end,
25669
+ .cds--popover--right-end,
25670
+ .cds--popover--top,
25671
+ .cds--popover--top-right,
25672
+ .cds--popover--top-left,
25673
+ .cds--popover--top-end,
25674
+ .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
25675
+ border-color: var(--cds-ai-popover-caret-bottom, #78a9ff);
25676
+ background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
25677
+ }
25678
+
25679
+ .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
25680
+ .cds--popover--right-bottom,
25681
+ .cds--popover--left-end,
25682
+ .cds--popover--right-end,
25683
+ .cds--popover--top,
25684
+ .cds--popover--top-right,
25685
+ .cds--popover--top-left,
25686
+ .cds--popover--top-end,
25687
+ .cds--popover--top-start) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before,
25688
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
25689
+ .cds--popover--right-bottom,
25690
+ .cds--popover--left-end,
25691
+ .cds--popover--right-end,
25692
+ .cds--popover--top,
25693
+ .cds--popover--top-right,
25694
+ .cds--popover--top-left,
25695
+ .cds--popover--top-start,
25696
+ .cds--popover--top-end) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-content > .cds--popover-caret::before {
25697
+ background: var(--cds-ai-popover-caret-bottom-background-actions, #e9effa);
25698
+ }
25699
+
25700
+ .cds--slug > .cds--toggletip:is(.cds--popover--left,
25701
+ .cds--popover--right) > .cds--popover > .cds--popover-caret::before,
25702
+ .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
25703
+ .cds--popover--right) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
25704
+ border-color: var(--cds-ai-popover-caret-center, #a0c3ff);
25705
+ }
25706
+
25707
+ .cds--slug .cds--toggletip-content {
25708
+ padding-block-end: 5rem;
25709
+ padding-block-start: 1.5rem;
25710
+ padding-inline: 1.5rem;
25711
+ }
25712
+
25713
+ .cds--slug .cds--slug-content .cds--toggletip-content {
25714
+ max-inline-size: 20rem;
25715
+ }
25716
+
25717
+ .cds--slug .cds--slug-actions {
25718
+ position: absolute;
25719
+ justify-content: flex-end;
25720
+ backdrop-filter: blur(85px);
25721
+ background: rgba(0, 0, 0, 0.01);
25722
+ border-end-end-radius: 0.5rem;
25723
+ border-end-start-radius: 0.5rem;
25724
+ column-gap: 0;
25725
+ inline-size: 100%;
25726
+ inset-block-end: 0;
25727
+ inset-inline-end: 0;
25728
+ }
25729
+
25730
+ .cds--slug .cds--slug-actions .cds--btn:focus {
25731
+ border-color: var(--cds-focus, #0f62fe);
25732
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-background, #ffffff);
25733
+ }
25734
+
25735
+ .cds--slug .cds--slug-actions .cds--btn--primary {
25736
+ order: 1;
25737
+ border-end-end-radius: 0.4375rem;
25738
+ }
25739
+
25740
+ .cds--slug.cds--slug--revert {
25741
+ transform: translate(0.5rem, -50%);
25742
+ }
25743
+
25744
+ .cds--slug--revert .cds--btn--icon-only {
25745
+ align-items: center;
25746
+ padding-block-start: 0;
25747
+ }
25748
+
25749
+ .cds--slug--revert .cds--btn--icon-only svg {
25750
+ margin: 0;
25751
+ }
25752
+
25753
+ .cds--aspect-ratio {
25754
+ position: relative;
25755
+ }
25756
+
25757
+ .cds--aspect-ratio::before {
25758
+ block-size: 0;
25759
+ content: "";
25760
+ float: left;
25761
+ inline-size: 1px;
25762
+ margin-inline-start: -1px;
25763
+ }
25764
+
25765
+ .cds--aspect-ratio::after {
25766
+ display: table;
25767
+ clear: both;
25768
+ content: "";
25769
+ }
25770
+
25771
+ .cds--aspect-ratio--16x9::before {
25772
+ padding-block-start: 56.25%;
25773
+ }
25774
+
25775
+ .cds--aspect-ratio--9x16::before {
25776
+ padding-block-start: 177.7777777778%;
25777
+ }
25778
+
25779
+ .cds--aspect-ratio--2x1::before {
25780
+ padding-block-start: 50%;
25781
+ }
25782
+
25783
+ .cds--aspect-ratio--1x2::before {
25784
+ padding-block-start: 200%;
25785
+ }
25786
+
25787
+ .cds--aspect-ratio--4x3::before {
25788
+ padding-block-start: 75%;
25789
+ }
25790
+
25791
+ .cds--aspect-ratio--3x4::before {
25792
+ padding-block-start: 133.3333333333%;
25793
+ }
25794
+
25795
+ .cds--aspect-ratio--3x2::before {
25796
+ padding-block-start: 66.6666666667%;
25797
+ }
25798
+
25799
+ .cds--aspect-ratio--2x3::before {
25800
+ padding-block-start: 150%;
25801
+ }
25802
+
25803
+ .cds--aspect-ratio--1x1::before {
25804
+ padding-block-start: 100%;
25805
+ }
25806
+
25807
+ .cds--overflow-menu,
25808
+ .cds--overflow-menu__trigger {
25809
+ box-sizing: border-box;
25810
+ padding: 0;
25811
+ border: 0;
25812
+ margin: 0;
25813
+ font-family: inherit;
25814
+ font-size: 100%;
25815
+ vertical-align: baseline;
25816
+ display: inline-block;
25817
+ padding: 0;
25818
+ border: 0;
25819
+ appearance: none;
25820
+ background: none;
25821
+ cursor: pointer;
25822
+ text-align: start;
25823
+ inline-size: 100%;
25824
+ box-sizing: border-box;
25825
+ padding: 0;
25826
+ border: 0;
25827
+ margin: 0;
25828
+ font-family: inherit;
25829
+ font-size: 100%;
25830
+ vertical-align: baseline;
25831
+ outline: 2px solid transparent;
25832
+ outline-offset: -2px;
25833
+ position: relative;
25834
+ display: flex;
25835
+ align-items: center;
25836
+ justify-content: center;
25837
+ block-size: 2.5rem;
25838
+ cursor: pointer;
25839
+ inline-size: 2.5rem;
25840
+ min-block-size: 2.5rem;
25841
+ transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
25842
+ }
25843
+ .cds--overflow-menu *,
25844
+ .cds--overflow-menu *::before,
25845
+ .cds--overflow-menu *::after,
25846
+ .cds--overflow-menu__trigger *,
25847
+ .cds--overflow-menu__trigger *::before,
25848
+ .cds--overflow-menu__trigger *::after {
25849
+ box-sizing: inherit;
25850
+ }
25851
+ .cds--overflow-menu::-moz-focus-inner,
25852
+ .cds--overflow-menu__trigger::-moz-focus-inner {
25853
+ border: 0;
25854
+ }
25855
+ .cds--overflow-menu *,
25856
+ .cds--overflow-menu *::before,
25857
+ .cds--overflow-menu *::after,
25858
+ .cds--overflow-menu__trigger *,
25859
+ .cds--overflow-menu__trigger *::before,
25860
+ .cds--overflow-menu__trigger *::after {
25861
+ box-sizing: inherit;
25862
+ }
25863
+ .cds--overflow-menu:focus,
25864
+ .cds--overflow-menu__trigger:focus {
25865
+ outline: 2px solid var(--cds-focus, #0f62fe);
25866
+ outline-offset: -2px;
25867
+ }
25868
+ @media screen and (prefers-contrast) {
25869
+ .cds--overflow-menu:focus,
25870
+ .cds--overflow-menu__trigger:focus {
25871
+ outline-style: dotted;
25872
+ }
25873
+ }
25874
+ .cds--overflow-menu:hover,
25875
+ .cds--overflow-menu__trigger:hover {
25876
+ background-color: var(--cds-layer-hover);
25877
+ }
25878
+
25879
+ .cds--overflow-menu > :first-child {
25880
+ margin-block-start: 0;
25881
+ }
25882
+
25883
+ .cds--overflow-menu--sm {
25884
+ block-size: 2rem;
25885
+ inline-size: 2rem;
25886
+ min-block-size: 2rem;
25887
+ }
25888
+
25889
+ .cds--overflow-menu--lg {
25890
+ block-size: 3rem;
25891
+ inline-size: 3rem;
25892
+ }
25893
+
25894
+ .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
25895
+ outline: 2px solid var(--cds-focus, #0f62fe);
25896
+ outline-offset: -2px;
25897
+ }
25898
+ @media screen and (prefers-contrast) {
25899
+ .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
25900
+ outline-style: dotted;
25901
+ }
25902
+ }
25903
+ .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus svg {
25904
+ outline: none;
25905
+ }
25906
+
25907
+ .cds--overflow-menu.cds--overflow-menu--open,
25908
+ .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger {
25909
+ box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
25910
+ background-color: var(--cds-layer);
25911
+ transition: none;
25912
+ }
25913
+
25914
+ .cds--overflow-menu--light.cds--overflow-menu--open,
25915
+ .cds--overflow-menu--light.cds--overflow-menu--open .cds--overflow-menu__trigger {
25916
+ background-color: var(--cds-layer);
25917
+ }
25918
+
25919
+ .cds--overflow-menu__icon {
25920
+ block-size: 1rem;
25921
+ fill: var(--cds-icon-primary, #161616);
25922
+ inline-size: 1rem;
25923
+ }
25924
+
25925
+ .cds--overflow-menu__wrapper {
25926
+ line-height: 0;
25927
+ }
25928
+
25929
+ .cds--overflow-menu-options {
25930
+ box-sizing: border-box;
25931
+ padding: 0;
25932
+ border: 0;
25933
+ margin: 0;
25934
+ font-family: inherit;
25935
+ font-size: 100%;
25936
+ vertical-align: baseline;
25937
+ box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
25938
+ position: absolute;
25939
+ z-index: 6000;
25940
+ display: none;
25941
+ flex-direction: column;
25942
+ align-items: flex-start;
25943
+ background-color: var(--cds-layer);
25944
+ inline-size: 10rem;
25945
+ inset-block-start: 32px;
25946
+ inset-inline-start: 0;
25947
+ list-style: none;
25948
+ }
25949
+ .cds--overflow-menu-options *,
25950
+ .cds--overflow-menu-options *::before,
25951
+ .cds--overflow-menu-options *::after {
25952
+ box-sizing: inherit;
25953
+ }
25954
+ .cds--overflow-menu-options::after {
25955
+ position: absolute;
25956
+ display: block;
25957
+ background-color: var(--cds-layer);
25958
+ content: "";
25959
+ transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
25960
+ }
25961
+ @media screen and (prefers-reduced-motion: reduce) {
25962
+ .cds--overflow-menu-options::after {
25963
+ transition: none;
25964
+ }
25965
+ }
25966
+
25967
+ .cds--overflow-menu.cds--overflow-menu--open:hover {
25968
+ background-color: var(--cds-layer);
25969
+ }
25970
+
25971
+ .cds--overflow-menu-options--light {
25972
+ background-color: var(--cds-layer);
25973
+ }
25974
+ .cds--overflow-menu-options--light::after {
25975
+ background-color: var(--cds-layer);
25976
+ }
25977
+
25978
+ .cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover {
25979
+ background-color: var(--cds-layer);
25980
+ }
25981
+
25982
+ .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
25983
+ block-size: 0.1875rem;
25984
+ inline-size: 2.5rem;
25985
+ inset-block-start: -0.1875rem;
25986
+ inset-inline-start: 0;
25987
+ }
25988
+
25989
+ .cds--overflow-menu-options[data-floating-menu-direction=top]::after {
25990
+ block-size: 0.5rem;
25991
+ inline-size: 2.5rem;
25992
+ inset-block-end: -0.5rem;
25993
+ inset-inline-start: 0;
25994
+ }
25995
+
25996
+ .cds--overflow-menu-options[data-floating-menu-direction=left]::after {
25997
+ block-size: 2.5rem;
25998
+ inline-size: 0.375rem;
25999
+ inset-block-start: 0;
26000
+ inset-inline-end: -0.375rem;
26001
+ }
26002
+
26003
+ .cds--overflow-menu-options[data-floating-menu-direction=right]::after {
26004
+ block-size: 2.5rem;
26005
+ inline-size: 0.375rem;
26006
+ inset-block-start: 0;
26007
+ inset-inline-start: -0.375rem;
26008
+ }
26009
+
26010
+ .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
26011
+ inline-size: 2rem;
26012
+ }
26013
+ .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
26014
+ block-size: 2rem;
26015
+ }
26016
+
26017
+ .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
26018
+ inline-size: 3rem;
26019
+ }
26020
+ .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
26021
+ block-size: 3rem;
26022
+ }
26023
+
26024
+ .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=top]::after,
26025
+ .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
26026
+ inset-inline-end: 0;
26027
+ inset-inline-start: auto;
26028
+ }
26029
+
26030
+ .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=left]::after,
26031
+ .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
26032
+ inset-block-end: 0;
26033
+ inset-block-start: auto;
26034
+ }
26035
+
26036
+ .cds--overflow-menu-options--open {
26037
+ display: flex;
26038
+ }
26039
+
26040
+ .cds--overflow-menu-options__content {
26041
+ inline-size: 100%;
26042
+ }
26043
+
26044
+ .cds--overflow-menu-options__option {
26045
+ box-sizing: border-box;
26046
+ padding: 0;
26047
+ border: 0;
26048
+ margin: 0;
26049
+ font-family: inherit;
26050
+ font-size: 100%;
26051
+ vertical-align: baseline;
26052
+ display: flex;
26053
+ align-items: center;
26054
+ padding: 0;
26055
+ background-color: transparent;
26056
+ block-size: 2.5rem;
26057
+ inline-size: 100%;
26058
+ transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
26059
+ }
26060
+ .cds--overflow-menu-options__option *,
26061
+ .cds--overflow-menu-options__option *::before,
26062
+ .cds--overflow-menu-options__option *::after {
26063
+ box-sizing: inherit;
26064
+ }
26065
+
26066
+ .cds--overflow-menu-options--sm .cds--overflow-menu-options__option {
26067
+ block-size: 2rem;
26068
+ }
26069
+
26070
+ .cds--overflow-menu-options--lg .cds--overflow-menu-options__option {
26071
+ block-size: 3rem;
26072
+ }
26073
+
26074
+ .cds--overflow-menu--divider {
26075
+ border-block-start: 1px solid var(--cds-border-subtle);
26076
+ }
26077
+
26078
+ .cds--overflow-menu--light .cds--overflow-menu--divider {
26079
+ border-block-start: 1px solid var(--cds-border-subtle);
26080
+ }
26081
+
26082
+ a.cds--overflow-menu-options__btn::before {
26083
+ display: inline-block;
26084
+ block-size: 100%;
26085
+ content: "";
26086
+ vertical-align: middle;
26087
+ }
26088
+
26089
+ .cds--overflow-menu-options__btn {
26090
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
26091
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
26092
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
26093
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
26094
+ outline: 2px solid transparent;
26095
+ outline-offset: -2px;
26096
+ display: inline-flex;
26097
+ align-items: center;
26098
+ padding: 0 1rem;
26099
+ border: none;
26100
+ background-color: transparent;
26101
+ block-size: 100%;
26102
+ color: var(--cds-text-secondary, #525252);
26103
+ cursor: pointer;
26104
+ font-family: inherit;
26105
+ font-weight: 400;
26106
+ inline-size: 100%;
26107
+ max-inline-size: 11.25rem;
26108
+ text-align: start;
26109
+ transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9), color 110ms cubic-bezier(0, 0, 0.38, 0.9);
26110
+ }
26111
+ .cds--overflow-menu-options__btn:hover {
26112
+ color: var(--cds-text-primary, #161616);
26113
+ }
26114
+ .cds--overflow-menu-options__btn:focus {
26115
+ outline: 2px solid var(--cds-focus, #0f62fe);
26116
+ outline-offset: -2px;
26117
+ }
26118
+ @media screen and (prefers-contrast) {
26119
+ .cds--overflow-menu-options__btn:focus {
26120
+ outline-style: dotted;
26121
+ }
26122
+ }
26123
+ .cds--overflow-menu-options__btn::-moz-focus-inner {
26124
+ border: none;
26125
+ }
26126
+
26127
+ .cds--overflow-menu-options__btn svg {
26128
+ fill: var(--cds-icon-secondary, #525252);
26129
+ }
26130
+
26131
+ .cds--overflow-menu-options__btn:hover svg {
26132
+ fill: var(--cds-icon-primary, #161616);
26133
+ }
26134
+
26135
+ .cds--overflow-menu-options__option-content {
26136
+ overflow: hidden;
26137
+ text-overflow: ellipsis;
26138
+ white-space: nowrap;
26139
+ }
26140
+
26141
+ .cds--overflow-menu-options__option:hover {
26142
+ background-color: var(--cds-layer-hover);
26143
+ }
26144
+
26145
+ .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover,
26146
+ .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus {
26147
+ background-color: var(--cds-button-danger-primary, #da1e28);
26148
+ color: var(--cds-text-on-color, #ffffff);
26149
+ }
26150
+ .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover svg,
26151
+ .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus svg {
26152
+ fill: currentColor;
26153
+ }
26154
+
26155
+ .cds--overflow-menu-options__option--disabled:hover {
26156
+ background-color: var(--cds-layer);
26157
+ cursor: not-allowed;
26158
+ }
26159
+
26160
+ .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn {
26161
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
26162
+ cursor: not-allowed;
25516
26163
  }
25517
26164
  .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:hover, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:active, .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn:focus {
25518
26165
  outline: 2px solid transparent;
@@ -26087,7 +26734,8 @@ input[data-invalid]:not(:focus),
26087
26734
  .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
26088
26735
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
26089
26736
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
26090
- .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),
26737
+ .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,
26738
+ .cds--combo-box--invalid--focused),
26091
26739
  .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
26092
26740
  outline: 2px solid var(--cds-support-error, #da1e28);
26093
26741
  outline-offset: -2px;
@@ -26098,7 +26746,8 @@ input[data-invalid]:not(:focus),
26098
26746
  .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
26099
26747
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
26100
26748
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
26101
- .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),
26749
+ .cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,
26750
+ .cds--combo-box--invalid--focused),
26102
26751
  .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
26103
26752
  outline-style: dotted;
26104
26753
  }
@@ -27587,6 +28236,10 @@ fieldset[disabled] .cds--form__helper-text {
27587
28236
  inset-inline-start: -2.5rem;
27588
28237
  }
27589
28238
 
28239
+ .cds--toggle-password-tooltip .cds--popover-content {
28240
+ min-inline-size: 2.5rem;
28241
+ }
28242
+
27590
28243
  .cds--text-input--sm + .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
27591
28244
  inline-size: 2rem;
27592
28245
  }
@@ -27648,6 +28301,20 @@ fieldset[disabled] .cds--form__helper-text {
27648
28301
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
27649
28302
  }
27650
28303
 
28304
+ .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger {
28305
+ cursor: default;
28306
+ }
28307
+ .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger svg {
28308
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
28309
+ }
28310
+
28311
+ .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover {
28312
+ cursor: default;
28313
+ }
28314
+ .cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover svg {
28315
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
28316
+ }
28317
+
27651
28318
  .cds--text-input__counter-alert {
27652
28319
  position: absolute;
27653
28320
  overflow: hidden;
@@ -28756,6 +29423,11 @@ fieldset[disabled] .cds--form__helper-text {
28756
29423
  inset-inline-end: -0.5625rem;
28757
29424
  }
28758
29425
 
29426
+ .cds--list-box__wrapper--slug .cds--slug--revert::after {
29427
+ inset-block-start: 0.5rem;
29428
+ inset-inline-end: -0.0625rem;
29429
+ }
29430
+
28759
29431
  .cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) {
28760
29432
  background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
28761
29433
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
@@ -28885,7 +29557,7 @@ fieldset[disabled] .cds--form__helper-text {
28885
29557
  }
28886
29558
  }
28887
29559
 
28888
- .cds--list-box--expanded .cds--combo-box--input--focus.cds--text-input {
29560
+ .cds--combo-box.cds--list-box--expanded:has(input[aria-activedescendant]:not([aria-activedescendant=""])) .cds--combo-box--input--focus.cds--text-input {
28889
29561
  outline-offset: -0.0625rem;
28890
29562
  outline-width: 0.0625rem;
28891
29563
  }
@@ -30056,11 +30728,11 @@ fieldset[disabled] .cds--form__helper-text {
30056
30728
  color: var(--cds-text-primary, #161616);
30057
30729
  }
30058
30730
 
30059
- .cds--data-table tr + :not(.cds--popover-container):hover .cds--link {
30731
+ .cds--data-table tr:hover .cds--link:not(.cds--popover-container .cds--link) {
30060
30732
  color: var(--cds-link-secondary, #0043ce);
30061
30733
  }
30062
30734
 
30063
- .cds--data-table tr + :not(.cds--popover-container):hover .cds--link--disabled {
30735
+ .cds--data-table tr:hover .cds--link--disabled:not(.cds--popover-container .cds--link) {
30064
30736
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
30065
30737
  }
30066
30738
 
@@ -32600,9 +33272,9 @@ th .cds--table-sort__flex {
32600
33272
  }
32601
33273
 
32602
33274
  .flatpickr-calendar.inline {
32603
- position: relative;
33275
+ position: absolute;
32604
33276
  display: block;
32605
- inset-block-start: 0.125rem;
33277
+ inset-block-start: auto;
32606
33278
  }
32607
33279
 
32608
33280
  .flatpickr-calendar.static {
@@ -34481,6 +35153,10 @@ button.cds--dropdown-text:focus {
34481
35153
  }
34482
35154
  }
34483
35155
 
35156
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--combo-box) {
35157
+ outline: none;
35158
+ }
35159
+
34484
35160
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--list-box--expanded) {
34485
35161
  outline-width: 0.0625rem;
34486
35162
  }
@@ -34673,8 +35349,9 @@ button.cds--dropdown-text:focus {
34673
35349
  white-space: nowrap;
34674
35350
  }
34675
35351
 
34676
- .cds--list-box__wrapper--fluid .cds--combo-box .cds--text-input:focus {
34677
- outline: none;
35352
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus .cds--combo-box.cds--list-box--expanded:has(input[aria-activedescendant]:not([aria-activedescendant=""])) .cds--combo-box--input--focus.cds--text-input {
35353
+ outline-offset: -0.0625rem;
35354
+ outline-width: 0.0625rem;
34678
35355
  }
34679
35356
 
34680
35357
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__selection {
@@ -34970,12 +35647,12 @@ button.cds--dropdown-text:focus {
34970
35647
  inset-block-start: 2.6875rem;
34971
35648
  }
34972
35649
 
34973
- .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(~ .cds--slug--revert)) {
35650
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(.cds--slug--revert)) {
34974
35651
  background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
34975
35652
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
34976
35653
  }
34977
35654
 
34978
- .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug .cds--date-picker__input:not(.cds--date-picker__input--invalid) {
35655
+ .cds--date-picker--fluid .cds--date-picker-input__wrapper--slug:not(:has(.cds--slug--revert)) .cds--date-picker__input:not(.cds--date-picker__input--invalid) {
34979
35656
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
34980
35657
  }
34981
35658
 
@@ -35047,14 +35724,14 @@ button.cds--dropdown-text:focus {
35047
35724
 
35048
35725
  .cds--multi-select--filterable--input-focused,
35049
35726
  .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=false]),
35050
- .cds--multi-select.cds--multi-select--selected .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=true]) {
35727
+ .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=true]) {
35051
35728
  outline: 2px solid var(--cds-focus, #0f62fe);
35052
35729
  outline-offset: -2px;
35053
35730
  }
35054
35731
  @media screen and (prefers-contrast) {
35055
35732
  .cds--multi-select--filterable--input-focused,
35056
35733
  .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=false]),
35057
- .cds--multi-select.cds--multi-select--selected .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=true]) {
35734
+ .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=true]) {
35058
35735
  outline-style: dotted;
35059
35736
  }
35060
35737
  }
@@ -35867,7 +36544,7 @@ button.cds--dropdown-text:focus {
35867
36544
  padding-inline-end: 7.5rem;
35868
36545
  }
35869
36546
 
35870
- .cds--number-input--fluid .cds--number__input-wrapper--slug:not(:has(~ .cds--slug--revert)) {
36547
+ .cds--number-input--fluid .cds--number__input-wrapper--slug:not(:has(.cds--slug--revert)) {
35871
36548
  background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
35872
36549
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
35873
36550
  }
@@ -36255,6 +36932,11 @@ optgroup.cds--select-optgroup:disabled,
36255
36932
  inset-inline-end: calc(-0.5rem - 1px);
36256
36933
  }
36257
36934
 
36935
+ .cds--select--slug .cds--slug--revert::after {
36936
+ inset-block-start: 0.5rem;
36937
+ inset-inline-end: -0.0625rem;
36938
+ }
36939
+
36258
36940
  .cds--select--slug .cds--select-input:not(:has(~ .cds--slug--revert)) {
36259
36941
  background-image: linear-gradient(0deg, var(--cds-ai-aura-start-sm, rgba(69, 137, 255, 0.16)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 100%);
36260
36942
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
@@ -39345,6 +40027,8 @@ span.cds--pagination__text.cds--pagination__items-count {
39345
40027
  font-weight: var(--cds-body-compact-01-font-weight, 400);
39346
40028
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
39347
40029
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
40030
+ --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-sm)), var(--cds-layout-size-height, var(--cds-layout-size-height-lg)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
40031
+ --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));
39348
40032
  line-height: 0;
39349
40033
  }
39350
40034
  .cds--pagination-nav html {
@@ -39401,12 +40085,12 @@ span.cds--pagination__text.cds--pagination__items-count {
39401
40085
  text-align: start;
39402
40086
  position: relative;
39403
40087
  display: block;
39404
- padding: 1.0625rem 0.25rem;
40088
+ padding: calc((var(--cds-layout-size-height-local) - 0.875rem) / 2) 0.25rem;
39405
40089
  border-radius: 0;
39406
40090
  color: var(--cds-text-primary, #161616);
39407
40091
  font-weight: 400;
39408
40092
  line-height: 1;
39409
- min-inline-size: 3rem;
40093
+ min-inline-size: var(--cds-layout-size-height-local);
39410
40094
  outline: 0;
39411
40095
  text-align: center;
39412
40096
  text-decoration: none;
@@ -39487,7 +40171,7 @@ span.cds--pagination__text.cds--pagination__items-count {
39487
40171
 
39488
40172
  .cds--pagination-nav__page--select {
39489
40173
  appearance: none;
39490
- max-block-size: 3rem;
40174
+ max-block-size: var(--cds-layout-size-height-local);
39491
40175
  text-indent: calc(50% - 4.5px);
39492
40176
  }
39493
40177
  @-moz-document url-prefix() {
@@ -39531,7 +40215,7 @@ span.cds--pagination__text.cds--pagination__items-count {
39531
40215
 
39532
40216
  .cds--pagination-nav__select-icon {
39533
40217
  position: absolute;
39534
- inset-block-start: calc(50% - 0.5rem);
40218
+ inset-block-start: calc(50% - 0.25rem);
39535
40219
  inset-inline-start: calc(50% - 0.5rem);
39536
40220
  pointer-events: none;
39537
40221
  }
@@ -40389,870 +41073,232 @@ span.cds--pagination__text.cds--pagination__items-count {
40389
41073
  }
40390
41074
  .cds--slider__thumb--lower:focus .cds--slider__thumb-icon--focus,
40391
41075
  .cds--slider__thumb--upper:focus .cds--slider__thumb-icon--focus {
40392
- display: block;
40393
- }
40394
-
40395
- .cds--slider__thumb--lower:focus::before,
40396
- .cds--slider__thumb--upper:focus::before {
40397
- inline-size: 100%;
40398
- }
40399
-
40400
- .cds--slider__thumb--upper {
40401
- transform: none;
40402
- }
40403
- .cds--slider__thumb--upper::before {
40404
- inset-inline-end: auto;
40405
- inset-inline-start: 0;
40406
- }
40407
- .cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
40408
- transform: none;
40409
- }
40410
-
40411
- .cds--slider__input {
40412
- display: none;
40413
- }
40414
-
40415
- .cds--slider-text-input-wrapper {
40416
- position: relative;
40417
- }
40418
-
40419
- .cds--slider-text-input-wrapper--hidden {
40420
- display: none;
40421
- }
40422
-
40423
- .cds--slider-text-input,
40424
- .cds-slider-text-input {
40425
- -moz-appearance: textfield;
40426
- appearance: textfield;
40427
- block-size: 2.5rem;
40428
- inline-size: 4rem;
40429
- }
40430
- .cds--slider-text-input::-webkit-outer-spin-button, .cds--slider-text-input::-webkit-inner-spin-button,
40431
- .cds-slider-text-input::-webkit-outer-spin-button,
40432
- .cds-slider-text-input::-webkit-inner-spin-button {
40433
- display: none;
40434
- }
40435
-
40436
- .cds--slider__thumb:focus ~ .cds--slider__filled-track,
40437
- .cds--slider__thumb-wrapper:focus-within ~ .cds--slider__filled-track {
40438
- background-color: var(--cds-border-interactive, #0f62fe);
40439
- }
40440
-
40441
- .cds--slider-text-input.cds--text-input--invalid,
40442
- .cds--slider-text-input--warn {
40443
- inline-size: 6rem;
40444
- padding-inline-end: 3rem;
40445
- }
40446
-
40447
- .cds--slider__invalid-icon {
40448
- position: absolute;
40449
- fill: var(--cds-support-error, #da1e28);
40450
- inset-block-start: 50%;
40451
- inset-inline-end: 1rem;
40452
- transform: translateY(-50%);
40453
- }
40454
-
40455
- .cds--slider__validation-msg.cds--form-requirement {
40456
- display: block;
40457
- overflow: visible;
40458
- max-block-size: 100%;
40459
- }
40460
-
40461
- .cds--slider__validation-msg--invalid {
40462
- color: var(--cds-text-error, #da1e28);
40463
- }
40464
-
40465
- .cds--slider__invalid-icon.cds--slider__invalid-icon--warning {
40466
- fill: var(--cds-support-warning, #f1c21b);
40467
- }
40468
-
40469
- .cds--slider__invalid-icon--warning path:first-of-type {
40470
- fill: #000000;
40471
- opacity: 1;
40472
- }
40473
-
40474
- .cds--label--disabled ~ .cds--slider-container > .cds--slider__range-label {
40475
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
40476
- }
40477
-
40478
- .cds--slider--disabled.cds--slider {
40479
- cursor: not-allowed;
40480
- }
40481
-
40482
- .cds--slider--disabled .cds--slider__thumb {
40483
- background-color: var(--cds-border-disabled, #c6c6c6);
40484
- }
40485
- .cds--slider--disabled .cds--slider__thumb:hover {
40486
- cursor: not-allowed;
40487
- transform: translate(-50%, -50%);
40488
- }
40489
- .cds--slider--disabled .cds--slider__thumb:focus {
40490
- background-color: var(--cds-border-disabled, #c6c6c6);
40491
- box-shadow: none;
40492
- outline: none;
40493
- transform: translate(-50%, -50%);
40494
- }
40495
- .cds--slider--disabled .cds--slider__thumb:active {
40496
- background: var(--cds-border-disabled, #c6c6c6);
40497
- transform: translate(-50%, -50%);
40498
- }
40499
-
40500
- .cds--slider--disabled .cds--slider__track,
40501
- .cds--slider--disabled .cds--slider__filled-track,
40502
- .cds--slider--disabled .cds--slider__thumb:focus ~ .cds--slider__filled-track {
40503
- background-color: var(--cds-border-disabled, #c6c6c6);
40504
- }
40505
-
40506
- .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input,
40507
- .cds--slider--disabled ~ .cds--slider-text-input {
40508
- border: none;
40509
- background-color: var(--cds-field);
40510
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
40511
- cursor: not-allowed;
40512
- transition: none;
40513
- }
40514
- .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:active, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:focus, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:hover,
40515
- .cds--slider--disabled ~ .cds--slider-text-input:active,
40516
- .cds--slider--disabled ~ .cds--slider-text-input:focus,
40517
- .cds--slider--disabled ~ .cds--slider-text-input:hover {
40518
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
40519
- outline: none;
40520
- }
40521
-
40522
- .cds--slider--readonly {
40523
- cursor: default;
40524
- }
40525
-
40526
- .cds--slider-container--readonly .cds--slider__thumb {
40527
- block-size: 0;
40528
- inline-size: 0;
40529
- }
40530
- .cds--slider-container--readonly .cds--slider__thumb::before, .cds--slider-container--readonly .cds--slider__thumb::after {
40531
- display: none;
40532
- }
40533
-
40534
- .cds--slider-container--readonly .cds--slider-text-input {
40535
- background-color: transparent;
40536
- }
40537
-
40538
- .cds--slider__status-msg.cds--form-requirement {
40539
- display: block;
40540
- overflow: visible;
40541
- max-block-size: 100%;
40542
- }
40543
-
40544
- .cds--slider-container.cds--skeleton .cds--slider__range-label {
40545
- position: relative;
40546
- padding: 0;
40547
- border: none;
40548
- background: var(--cds-skeleton-background, #e8e8e8);
40549
- box-shadow: none;
40550
- pointer-events: none;
40551
- block-size: 0.75rem;
40552
- inline-size: 1.25rem;
40553
- }
40554
- .cds--slider-container.cds--skeleton .cds--slider__range-label:hover, .cds--slider-container.cds--skeleton .cds--slider__range-label:focus, .cds--slider-container.cds--skeleton .cds--slider__range-label:active {
40555
- border: none;
40556
- cursor: default;
40557
- outline: none;
40558
- }
40559
- .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
40560
- position: absolute;
40561
- animation: 3000ms ease-in-out cds--skeleton infinite;
40562
- background: var(--cds-skeleton-element, #c6c6c6);
40563
- block-size: 100%;
40564
- content: "";
40565
- inline-size: 100%;
40566
- will-change: transform-origin, transform, opacity;
40567
- }
40568
- @media (prefers-reduced-motion: reduce) {
40569
- .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
40570
- animation: none;
40571
- }
40572
- }
40573
-
40574
- .cds--slider-container.cds--skeleton .cds--slider__track {
40575
- cursor: default;
40576
- pointer-events: none;
40577
- }
40578
-
40579
- .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper {
40580
- inset-inline-start: 50%;
40581
- }
40582
- .cds--slider-container.cds--skeleton .cds--slider__thumb {
40583
- cursor: default;
40584
- pointer-events: none;
40585
- }
40586
- .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--lower {
40587
- inset-inline-start: 0;
40588
- }
40589
- .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--upper {
40590
- inset-inline-start: 100%;
40591
- }
40592
-
40593
- .cds--popover-container.cds--slider__thumb-wrapper {
40594
- position: absolute;
40595
- }
40596
-
40597
- /* stylelint-disable */
40598
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
40599
- .cds--slider__thumb {
40600
- outline: 1px solid transparent;
40601
- }
40602
- }
40603
-
40604
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
40605
- .cds--slider__thumb:focus {
40606
- color: Highlight;
40607
- outline: 1px solid Highlight;
40608
- }
40609
- }
40610
-
40611
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
40612
- .cds--slider__track {
40613
- outline: 1px solid transparent;
40614
- }
40615
- }
40616
-
40617
- /* stylelint-enable */
40618
- .cds--toggletip-label {
40619
- font-size: var(--cds-body-01-font-size, 0.875rem);
40620
- font-weight: var(--cds-body-01-font-weight, 400);
40621
- line-height: var(--cds-body-01-line-height, 1.42857);
40622
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
40623
- color: var(--cds-text-secondary, #525252);
40624
- margin-inline-end: 0.5rem;
40625
- }
40626
-
40627
- .cds--toggletip-button {
40628
- box-sizing: border-box;
40629
- padding: 0;
40630
- border: 0;
40631
- margin: 0;
40632
- font-family: inherit;
40633
- font-size: 100%;
40634
- vertical-align: baseline;
40635
- display: inline-block;
40636
- padding: 0;
40637
- border: 0;
40638
- appearance: none;
40639
- background: none;
40640
- cursor: pointer;
40641
- text-align: start;
40642
- inline-size: 100%;
40643
- display: flex;
40644
- align-items: center;
40645
- }
40646
- .cds--toggletip-button *,
40647
- .cds--toggletip-button *::before,
40648
- .cds--toggletip-button *::after {
40649
- box-sizing: inherit;
40650
- }
40651
- .cds--toggletip-button::-moz-focus-inner {
40652
- border: 0;
40653
- }
40654
-
40655
- .cds--toggletip-button svg {
40656
- fill: var(--cds-icon-secondary, #525252);
40657
- }
40658
-
40659
- .cds--toggletip-button:hover svg,
40660
- .cds--toggletip--open .cds--toggletip-button svg {
40661
- fill: var(--cds-icon-primary, #161616);
40662
- }
40663
-
40664
- .cds--toggletip-button:focus {
40665
- outline: 1px solid var(--cds-focus, #0f62fe);
40666
- }
40667
- @media screen and (prefers-contrast) {
40668
- .cds--toggletip-button:focus {
40669
- outline-style: dotted;
40670
- }
40671
- }
40672
-
40673
- .cds--toggletip {
40674
- --cds-popover-offset: 0.8125rem;
40675
- }
40676
-
40677
- .cds--toggletip-content {
40678
- --cds-button-focus-color: var(--cds-focus-inverse, #ffffff);
40679
- --cds-link-text-color: var(--cds-link-inverse, #78a9ff);
40680
- --cds-link-hover-text-color: var(--cds-link-inverse-hover, #a6c8ff);
40681
- --cds-link-visited-text-color: var(--cds-link-inverse-visited, #be95ff);
40682
- --cds-link-focus-text-color: var(--cds-focus-inverse, #ffffff);
40683
- font-size: var(--cds-body-01-font-size, 0.875rem);
40684
- font-weight: var(--cds-body-01-font-weight, 400);
40685
- line-height: var(--cds-body-01-line-height, 1.42857);
40686
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
40687
- display: grid;
40688
- padding: 1rem;
40689
- max-inline-size: 18rem;
40690
- row-gap: 1rem;
40691
- }
40692
-
40693
- .cds--toggletip-content p {
40694
- font-size: var(--cds-body-01-font-size, 0.875rem);
40695
- font-weight: var(--cds-body-01-font-weight, 400);
40696
- line-height: var(--cds-body-01-line-height, 1.42857);
40697
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
40698
- }
40699
-
40700
- .cds--toggletip-actions {
40701
- display: flex;
40702
- align-items: center;
40703
- justify-content: space-between;
40704
- column-gap: 1rem;
40705
- }
40706
-
40707
- .cds--slug {
40708
- display: flex;
40709
- }
40710
-
40711
- .cds--slug:has(> .cds--popover--open) {
40712
- z-index: 2;
40713
- }
40714
-
40715
- .cds--slug .cds--slug__button {
40716
- position: relative;
40717
- display: flex;
40718
- align-items: center;
40719
- justify-content: center;
40720
- border: 1px solid var(--cds-border-inverse, #161616);
40721
- background: transparent;
40722
- color: var(--cds-text-primary, #161616);
40723
- font-weight: 600;
40724
- outline: none;
40725
- transition: color 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), background 70ms cubic-bezier(0, 0, 0.38, 0.9);
40726
- }
40727
- .cds--slug .cds--slug__button--mini {
40728
- height: 1rem;
40729
- width: 1rem;
40730
- font-size: 0.5625rem;
40731
- line-height: 0.75rem;
40732
- }
40733
- .cds--slug .cds--slug__button--2xs {
40734
- height: 1.25rem;
40735
- width: 1.25rem;
40736
- font-size: 0.75rem;
40737
- line-height: 1rem;
40738
- }
40739
- .cds--slug .cds--slug__button--xs {
40740
- height: 1.5rem;
40741
- width: 1.5rem;
40742
- font-size: 0.75rem;
40743
- line-height: 1rem;
40744
- }
40745
- .cds--slug .cds--slug__button--sm {
40746
- height: 2rem;
40747
- width: 2rem;
40748
- font-size: 1rem;
40749
- line-height: 1.3125rem;
40750
- }
40751
- .cds--slug .cds--slug__button--md {
40752
- height: 2.5rem;
40753
- width: 2.5rem;
40754
- font-size: 1rem;
40755
- line-height: 1.3125rem;
40756
- }
40757
- .cds--slug .cds--slug__button--lg {
40758
- height: 3rem;
40759
- width: 3rem;
40760
- font-size: 1rem;
40761
- line-height: 1.3125rem;
40762
- }
40763
- .cds--slug .cds--slug__button--xl {
40764
- height: 4rem;
40765
- width: 4rem;
40766
- font-size: 1.25rem;
40767
- line-height: 1.625rem;
40768
- }
40769
-
40770
- .cds--slug .cds--slug__button:focus {
40771
- border: 1px solid var(--cds-focus, #0f62fe);
40772
- box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
40773
- }
40774
-
40775
- .cds--slug .cds--slug__button.cds--slug__button--mini:focus,
40776
- .cds--slug .cds--slug__button.cds--slug__button--2xs:focus {
40777
- box-shadow: none;
40778
- }
40779
-
40780
- .cds--slug .cds--slug__button:hover {
40781
- background: var(--cds-border-inverse, #161616);
40782
- color: var(--cds-text-inverse, #ffffff);
40783
- }
40784
-
40785
- .cds--slug .cds--slug__button:hover:active {
40786
- background: var(--cds-border-inverse, #161616);
40787
- box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-focus-inset, #ffffff);
40788
- color: var(--cds-text-inverse, #ffffff);
40789
- }
40790
-
40791
- .cds--slug .cds--slug__button.cds--slug__button--mini:hover:active,
40792
- .cds--slug .cds--slug__button.cds--slug__button--2xs:hover:active {
40793
- box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
40794
- }
40795
-
40796
- .cds--slug__text {
40797
- position: relative;
40798
- z-index: 1;
40799
- }
40800
-
40801
- .cds--slug .cds--slug__button--inline {
40802
- border: 1px solid transparent;
40803
- border-radius: 0.0625rem;
40804
- background: transparent;
40805
- block-size: initial;
40806
- color: var(--cds-text-primary, #161616);
40807
- font-size: 0.875rem;
40808
- inline-size: initial;
40809
- line-height: initial;
40810
- padding-inline: 0.25rem;
40811
- }
40812
-
40813
- .cds--slug__button--inline::before {
40814
- display: none;
40815
- }
40816
-
40817
- .cds--slug .cds--slug__button--inline:focus {
40818
- border-color: var(--cds-focus, #0f62fe);
40819
- box-shadow: none;
40820
- }
40821
-
40822
- .cds--slug .cds--slug__button--inline:hover,
40823
- .cds--slug .cds--slug__button--inline:hover:active {
40824
- border-color: var(--cds-icon-secondary, #525252);
40825
- background: transparent;
40826
- box-shadow: none;
40827
- color: var(--cds-text-secondary, #525252);
40828
- }
40829
-
40830
- .cds--slug .cds--slug__button--inline:focus:hover {
40831
- border-color: var(--cds-focus, #0f62fe);
40832
- }
40833
-
40834
- .cds--slug .cds--slug__button--inline:hover .cds--slug__text::before {
40835
- background: var(--cds-icon-secondary, #525252);
40836
- }
40837
-
40838
- .cds--slug__button--inline .cds--slug__text {
40839
- padding-inline-start: 0.5rem;
40840
- }
40841
-
40842
- .cds--slug__button--inline.cds--slug__button--lg .cds--slug__text,
40843
- .cds--slug__button--inline.cds--slug__button--xl .cds--slug__text {
40844
- padding-inline-start: 0.75rem;
40845
- }
40846
-
40847
- .cds--slug__button--inline .cds--slug__text::before {
40848
- position: absolute;
40849
- display: inline-block;
40850
- background: var(--cds-icon-primary, #161616);
40851
- block-size: 0.25rem;
40852
- content: "";
40853
- inline-size: 0.25rem;
40854
- inset-block-start: 50%;
40855
- inset-inline-start: 0;
40856
- opacity: 1;
40857
- transform: translateY(-50%);
40858
- transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9);
41076
+ display: block;
40859
41077
  }
40860
41078
 
40861
- .cds--slug__button--lg .cds--slug__text::before,
40862
- .cds--slug__button--xl .cds--slug__text::before {
40863
- block-size: 0.5rem;
40864
- inline-size: 0.5rem;
41079
+ .cds--slider__thumb--lower:focus::before,
41080
+ .cds--slider__thumb--upper:focus::before {
41081
+ inline-size: 100%;
40865
41082
  }
40866
41083
 
40867
- .cds--slug__button--inline.cds--slug__button--mini,
40868
- .cds--slug__button--inline.cds--slug__button--mini .cds--slug__additional-text,
40869
- .cds--slug__button--inline.cds--slug__button--2xs,
40870
- .cds--slug__button--inline.cds--slug__button--2xs .cds--slug__additional-text,
40871
- .cds--slug__button--inline.cds--slug__button--xs,
40872
- .cds--slug__button--inline.cds--slug__button--xs .cds--slug__additional-text,
40873
- .cds--slug__button--inline.cds--slug__button--sm,
40874
- .cds--slug__button--inline.cds--slug__button--sm .cds--slug__additional-text {
40875
- font-size: 0.75rem;
41084
+ .cds--slider__thumb--upper {
41085
+ transform: none;
40876
41086
  }
40877
-
40878
- .cds--slug__button--inline.cds--slug__button--lg,
40879
- .cds--slug__button--inline.cds--slug__button--xl {
40880
- font-size: 1rem;
41087
+ .cds--slider__thumb--upper::before {
41088
+ inset-inline-end: auto;
41089
+ inset-inline-start: 0;
41090
+ }
41091
+ .cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
41092
+ transform: none;
40881
41093
  }
40882
41094
 
40883
- .cds--slug .cds--slug__button--inline-with-content {
40884
- border: 1px solid var(--cds-border-inverse, #161616);
40885
- padding-block: 0.125rem;
40886
- padding-inline: 0.5rem;
41095
+ .cds--slider__input {
41096
+ display: none;
40887
41097
  }
40888
41098
 
40889
- .cds--slug__button--inline-with-content .cds--slug__additional-text {
40890
- font-size: var(--cds-body-compact-02-font-size, 1rem);
40891
- font-weight: var(--cds-body-compact-02-font-weight, 400);
40892
- line-height: var(--cds-body-compact-02-line-height, 1.375);
40893
- letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
40894
- padding-inline-start: 0.25rem;
41099
+ .cds--slider-text-input-wrapper {
41100
+ position: relative;
40895
41101
  }
40896
41102
 
40897
- .cds--slug__button--inline.cds--slug__button--md .cds--slug__additional-text {
40898
- font-size: 0.875rem;
41103
+ .cds--slider-text-input-wrapper--hidden {
41104
+ display: none;
40899
41105
  }
40900
41106
 
40901
- .cds--slug .cds--slug__button--inline-with-content:focus,
40902
- .cds--slug .cds--slug__button--inline-with-content:hover:focus {
40903
- box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
41107
+ .cds--slider-text-input,
41108
+ .cds-slider-text-input {
41109
+ -moz-appearance: textfield;
41110
+ appearance: textfield;
41111
+ block-size: 2.5rem;
41112
+ inline-size: 4rem;
41113
+ }
41114
+ .cds--slider-text-input::-webkit-outer-spin-button, .cds--slider-text-input::-webkit-inner-spin-button,
41115
+ .cds-slider-text-input::-webkit-outer-spin-button,
41116
+ .cds-slider-text-input::-webkit-inner-spin-button {
41117
+ display: none;
40904
41118
  }
40905
41119
 
40906
- .cds--slug .cds--slug-content {
40907
- background: linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff)), var(--cds-ai-popover-background, var(--cds-ai-popover-background, #ffffff))) border-box;
40908
- border: 1px solid transparent;
40909
- border-radius: 0.5rem;
40910
- box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), -40px 44px 60px -24px var(--cds-ai-popover-shadow-outer-01, rgba(0, 67, 206, 0.06)), -56px 64px 64px -24px var(--cds-ai-popover-shadow-outer-02, rgba(0, 0, 0, 0.04));
40911
- color: var(--cds-text-primary, #161616);
40912
- min-inline-size: 17.5rem;
41120
+ .cds--slider__thumb:focus ~ .cds--slider__filled-track,
41121
+ .cds--slider__thumb-wrapper:focus-within ~ .cds--slider__filled-track {
41122
+ background-color: var(--cds-border-interactive, #0f62fe);
40913
41123
  }
40914
41124
 
40915
- .cds--slug > .cds--toggletip > .cds--popover > .cds--popover-caret,
40916
- .cds--slug > .cds--toggletip.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
40917
- background: transparent;
40918
- clip-path: none;
41125
+ .cds--slider-text-input.cds--text-input--invalid,
41126
+ .cds--slider-text-input--warn {
41127
+ inline-size: 6rem;
41128
+ padding-inline-end: 3rem;
40919
41129
  }
40920
41130
 
40921
- .cds--slug > .cds--toggletip:is(.cds--popover--top,
40922
- .cds--popover--top-right,
40923
- .cds--popover--top-left,
40924
- .cds--popover--top-end,
40925
- .cds--popover--top-start,
40926
- .cds--popover--bottom,
40927
- .cds--popover--bottom-right,
40928
- .cds--popover--bottom-left,
40929
- .cds--popover--bottom-start,
40930
- .cds--popover--bottom-end,
40931
- .cds--popover--left,
40932
- .cds--popover--left-top,
40933
- .cds--popover--left-bottom,
40934
- .cds--popover--left-start,
40935
- .cds--popover--left-end,
40936
- .cds--popover--right,
40937
- .cds--popover--right-top,
40938
- .cds--popover--right-bottom,
40939
- .cds--popover--right-start,
40940
- .cds--popover--right-end) > .cds--popover > .cds--popover-caret::before,
40941
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
40942
- .cds--popover--top-right,
40943
- .cds--popover--top-left,
40944
- .cds--popover--top-end,
40945
- .cds--popover--top-start,
40946
- .cds--popover--bottom,
40947
- .cds--popover--bottom-right,
40948
- .cds--popover--bottom-left,
40949
- .cds--popover--bottom-start,
40950
- .cds--popover--bottom-end,
40951
- .cds--popover--left,
40952
- .cds--popover--left-top,
40953
- .cds--popover--left-bottom,
40954
- .cds--popover--left-start,
40955
- .cds--popover--left-end,
40956
- .cds--popover--right,
40957
- .cds--popover--right-top,
40958
- .cds--popover--right-bottom,
40959
- .cds--popover--right-start,
40960
- .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41131
+ .cds--slider__invalid-icon {
40961
41132
  position: absolute;
40962
- display: block;
40963
- border: 1px solid var(--cds-ai-border-start, rgba(166, 200, 255, 0.64));
40964
- background: var(--cds-background, #ffffff);
40965
- block-size: 0.75rem;
40966
- clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
40967
- content: "";
40968
- inline-size: 0.75rem;
40969
- transform: rotate(45deg);
41133
+ fill: var(--cds-support-error, #da1e28);
41134
+ inset-block-start: 50%;
41135
+ inset-inline-end: 1rem;
41136
+ transform: translateY(-50%);
40970
41137
  }
40971
41138
 
40972
- .cds--slug > .cds--toggletip:is(.cds--popover--top,
40973
- .cds--popover--top-right,
40974
- .cds--popover--top-left,
40975
- .cds--popover--top-end,
40976
- .cds--popover--top-start,
40977
- .cds--popover--bottom,
40978
- .cds--popover--bottom-right,
40979
- .cds--popover--bottom-left,
40980
- .cds--popover--bottom-start,
40981
- .cds--popover--bottom-end,
40982
- .cds--popover--left,
40983
- .cds--popover--left-top,
40984
- .cds--popover--left-bottom,
40985
- .cds--popover--left-start,
40986
- .cds--popover--left-end,
40987
- .cds--popover--right,
40988
- .cds--popover--right-top,
40989
- .cds--popover--right-bottom,
40990
- .cds--popover--right-start,
40991
- .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
40992
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
40993
- .cds--popover--top-right,
40994
- .cds--popover--top-left,
40995
- .cds--popover--top-end,
40996
- .cds--popover--top-start,
40997
- .cds--popover--bottom,
40998
- .cds--popover--bottom-right,
40999
- .cds--popover--bottom-left,
41000
- .cds--popover--bottom-start,
41001
- .cds--popover--bottom-end,
41002
- .cds--popover--left,
41003
- .cds--popover--left-top,
41004
- .cds--popover--left-bottom,
41005
- .cds--popover--left-start,
41006
- .cds--popover--left-end,
41007
- .cds--popover--right,
41008
- .cds--popover--right-top,
41009
- .cds--popover--right-bottom,
41010
- .cds--popover--right-start,
41011
- .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41012
- position: absolute;
41139
+ .cds--slider__validation-msg.cds--form-requirement {
41013
41140
  display: block;
41014
- background: var(--cds-background, #ffffff);
41015
- block-size: 0.875rem;
41016
- content: "";
41017
- inline-size: 0.125rem;
41141
+ overflow: visible;
41142
+ max-block-size: 100%;
41018
41143
  }
41019
41144
 
41020
- .cds--slug > .cds--toggletip:is(.cds--popover--top,
41021
- .cds--popover--top-right,
41022
- .cds--popover--top-left,
41023
- .cds--popover--top-end,
41024
- .cds--popover--top-start) > .cds--popover > .cds--popover-caret::before,
41025
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
41026
- .cds--popover--top-right,
41027
- .cds--popover--top-left,
41028
- .cds--popover--top-end,
41029
- .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41030
- inset-block-end: 0.0625rem;
41031
- transform: rotate(-135deg);
41145
+ .cds--slider__validation-msg--invalid {
41146
+ color: var(--cds-text-error, #da1e28);
41032
41147
  }
41033
- .cds--slug > .cds--toggletip:is(.cds--popover--top,
41034
- .cds--popover--top-right,
41035
- .cds--popover--top-left,
41036
- .cds--popover--top-end,
41037
- .cds--popover--top-start) > .cds--popover > .cds--popover-caret::after,
41038
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
41039
- .cds--popover--top-right,
41040
- .cds--popover--top-left,
41041
- .cds--popover--top-end,
41042
- .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41043
- background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
41044
- block-size: 0.125rem;
41045
- border-end-end-radius: 50%;
41046
- border-end-start-radius: 50%;
41047
- inline-size: 0.875rem;
41048
- inset-block-start: -0.125rem;
41049
- inset-inline-start: -0.0625rem;
41148
+
41149
+ .cds--slider__invalid-icon.cds--slider__invalid-icon--warning {
41150
+ fill: var(--cds-support-warning, #f1c21b);
41050
41151
  }
41051
41152
 
41052
- .cds--slug > .cds--toggletip:is(.cds--popover--top,
41053
- .cds--popover--top-right,
41054
- .cds--popover--top-left,
41055
- .cds--popover--top-end,
41056
- .cds--popover--top-start) > .cds--popover > .cds--slug-content--with-actions + .cds--popover-caret::after {
41057
- display: none;
41153
+ .cds--slider__invalid-icon--warning path:first-of-type {
41154
+ fill: #000000;
41155
+ opacity: 1;
41058
41156
  }
41059
41157
 
41060
- .cds--slug > .cds--toggletip:is(.cds--popover--right,
41061
- .cds--popover--right-bottom,
41062
- .cds--popover--right-top,
41063
- .cds--popover--right-start,
41064
- .cds--popover--right-end) > .cds--popover > .cds--popover-caret::before,
41065
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right,
41066
- .cds--popover--right-bottom,
41067
- .cds--popover--right-top,
41068
- .cds--popover--right-start,
41069
- .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41070
- inset-inline-start: 0.0625rem;
41071
- transform: rotate(-45deg);
41158
+ .cds--label--disabled ~ .cds--slider-container > .cds--slider__range-label {
41159
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
41072
41160
  }
41073
- .cds--slug > .cds--toggletip:is(.cds--popover--right,
41074
- .cds--popover--right-bottom,
41075
- .cds--popover--right-top,
41076
- .cds--popover--right-start,
41077
- .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
41078
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right,
41079
- .cds--popover--right-bottom,
41080
- .cds--popover--right-top,
41081
- .cds--popover--right-start,
41082
- .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41083
- border-end-start-radius: 50%;
41084
- border-start-start-radius: 50%;
41085
- inset-block-start: -0.0625rem;
41086
- inset-inline-start: 0.375rem;
41161
+
41162
+ .cds--slider--disabled.cds--slider {
41163
+ cursor: not-allowed;
41087
41164
  }
41088
41165
 
41089
- .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
41090
- .cds--popover--bottom-left,
41091
- .cds--popover--bottom-right,
41092
- .cds--popover--bottom-start,
41093
- .cds--popover--bottom-end) > .cds--popover > .cds--popover-caret::before,
41094
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom,
41095
- .cds--popover--bottom-left,
41096
- .cds--popover--bottom-right,
41097
- .cds--popover--bottom-start,
41098
- .cds--popover--bottom-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41099
- inset-block-start: 0.0625rem;
41100
- transform: rotate(45deg);
41166
+ .cds--slider--disabled .cds--slider__thumb {
41167
+ background-color: var(--cds-border-disabled, #c6c6c6);
41101
41168
  }
41102
- .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
41103
- .cds--popover--bottom-left,
41104
- .cds--popover--bottom-right,
41105
- .cds--popover--bottom-start,
41106
- .cds--popover--bottom-end) > .cds--popover > .cds--popover-caret::after,
41107
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom,
41108
- .cds--popover--bottom-left,
41109
- .cds--popover--bottom-right,
41110
- .cds--popover--bottom-start,
41111
- .cds--popover--bottom-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41112
- block-size: 0.125rem;
41113
- border-start-end-radius: 50%;
41114
- border-start-start-radius: 50%;
41115
- inline-size: 0.875rem;
41116
- inset-block-end: -0.15625rem;
41117
- inset-inline-start: -0.0625rem;
41169
+ .cds--slider--disabled .cds--slider__thumb:hover {
41170
+ cursor: not-allowed;
41171
+ transform: translate(-50%, -50%);
41118
41172
  }
41119
-
41120
- .cds--slug > .cds--toggletip:is(.cds--popover--left,
41121
- .cds--popover--left-bottom,
41122
- .cds--popover--left-top,
41123
- .cds--popover--left-start,
41124
- .cds--popover--left-end) > .cds--popover > .cds--popover-caret::before,
41125
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
41126
- .cds--popover--left-bottom,
41127
- .cds--popover--left-top,
41128
- .cds--popover--left-start,
41129
- .cds--popover--left-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41130
- inset-inline-end: 0.0625rem;
41131
- transform: rotate(135deg);
41173
+ .cds--slider--disabled .cds--slider__thumb:focus {
41174
+ background-color: var(--cds-border-disabled, #c6c6c6);
41175
+ box-shadow: none;
41176
+ outline: none;
41177
+ transform: translate(-50%, -50%);
41132
41178
  }
41133
- .cds--slug > .cds--toggletip:is(.cds--popover--left,
41134
- .cds--popover--left-bottom,
41135
- .cds--popover--left-top,
41136
- .cds--popover--left-start,
41137
- .cds--popover--left-end) > .cds--popover > .cds--popover-caret::after,
41138
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
41139
- .cds--popover--left-bottom,
41140
- .cds--popover--left-top,
41141
- .cds--popover--left-start,
41142
- .cds--popover--left-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41143
- border-end-end-radius: 50%;
41144
- border-start-end-radius: 50%;
41145
- inset-block-start: -0.0625rem;
41146
- inset-inline-start: -0.125rem;
41179
+ .cds--slider--disabled .cds--slider__thumb:active {
41180
+ background: var(--cds-border-disabled, #c6c6c6);
41181
+ transform: translate(-50%, -50%);
41147
41182
  }
41148
41183
 
41149
- .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
41150
- .cds--popover--right-bottom,
41151
- .cds--popover--left-end,
41152
- .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
41153
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
41154
- .cds--popover--right-bottom,
41155
- .cds--popover--left-end,
41156
- .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41157
- background: transparent;
41184
+ .cds--slider--disabled .cds--slider__track,
41185
+ .cds--slider--disabled .cds--slider__filled-track,
41186
+ .cds--slider--disabled .cds--slider__thumb:focus ~ .cds--slider__filled-track {
41187
+ background-color: var(--cds-border-disabled, #c6c6c6);
41158
41188
  }
41159
41189
 
41160
- .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
41161
- .cds--popover--right-bottom,
41162
- .cds--popover--left-end,
41163
- .cds--popover--right-end,
41164
- .cds--popover--top,
41165
- .cds--popover--top-right,
41166
- .cds--popover--top-left,
41167
- .cds--popover--top-end,
41168
- .cds--popover--top-start) > .cds--popover > .cds--popover-caret::before,
41169
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
41170
- .cds--popover--right-bottom,
41171
- .cds--popover--left-end,
41172
- .cds--popover--right-end,
41173
- .cds--popover--top,
41174
- .cds--popover--top-right,
41175
- .cds--popover--top-left,
41176
- .cds--popover--top-end,
41177
- .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41178
- border-color: var(--cds-ai-popover-caret-bottom, #78a9ff);
41179
- background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
41190
+ .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input,
41191
+ .cds--slider--disabled ~ .cds--slider-text-input {
41192
+ border: none;
41193
+ background-color: var(--cds-field);
41194
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
41195
+ cursor: not-allowed;
41196
+ transition: none;
41197
+ }
41198
+ .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:active, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:focus, .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input:hover,
41199
+ .cds--slider--disabled ~ .cds--slider-text-input:active,
41200
+ .cds--slider--disabled ~ .cds--slider-text-input:focus,
41201
+ .cds--slider--disabled ~ .cds--slider-text-input:hover {
41202
+ color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
41203
+ outline: none;
41180
41204
  }
41181
41205
 
41182
- .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
41183
- .cds--popover--right-bottom,
41184
- .cds--popover--left-end,
41185
- .cds--popover--right-end,
41186
- .cds--popover--top,
41187
- .cds--popover--top-right,
41188
- .cds--popover--top-left,
41189
- .cds--popover--top-end,
41190
- .cds--popover--top-start) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before,
41191
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
41192
- .cds--popover--right-bottom,
41193
- .cds--popover--left-end,
41194
- .cds--popover--right-end,
41195
- .cds--popover--top,
41196
- .cds--popover--top-right,
41197
- .cds--popover--top-left,
41198
- .cds--popover--top-start,
41199
- .cds--popover--top-end) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-content > .cds--popover-caret::before {
41200
- background: var(--cds-ai-popover-caret-bottom-background-actions, #e9effa);
41206
+ .cds--slider--readonly {
41207
+ cursor: default;
41201
41208
  }
41202
41209
 
41203
- .cds--slug > .cds--toggletip:is(.cds--popover--left,
41204
- .cds--popover--right) > .cds--popover > .cds--popover-caret::before,
41205
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
41206
- .cds--popover--right) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41207
- border-color: var(--cds-ai-popover-caret-center, #a0c3ff);
41210
+ .cds--slider-container--readonly .cds--slider__thumb {
41211
+ block-size: 0;
41212
+ inline-size: 0;
41213
+ }
41214
+ .cds--slider-container--readonly .cds--slider__thumb::before, .cds--slider-container--readonly .cds--slider__thumb::after {
41215
+ display: none;
41208
41216
  }
41209
41217
 
41210
- .cds--slug .cds--toggletip-content {
41211
- padding-block-end: 5rem;
41212
- padding-block-start: 1.5rem;
41213
- padding-inline: 1.5rem;
41218
+ .cds--slider-container--readonly .cds--slider-text-input {
41219
+ background-color: transparent;
41214
41220
  }
41215
41221
 
41216
- .cds--slug .cds--slug-content .cds--toggletip-content {
41217
- max-inline-size: 20rem;
41222
+ .cds--slider__status-msg.cds--form-requirement {
41223
+ display: block;
41224
+ overflow: visible;
41225
+ max-block-size: 100%;
41218
41226
  }
41219
41227
 
41220
- .cds--slug .cds--slug-actions {
41228
+ .cds--slider-container.cds--skeleton .cds--slider__range-label {
41229
+ position: relative;
41230
+ padding: 0;
41231
+ border: none;
41232
+ background: var(--cds-skeleton-background, #e8e8e8);
41233
+ box-shadow: none;
41234
+ pointer-events: none;
41235
+ block-size: 0.75rem;
41236
+ inline-size: 1.25rem;
41237
+ }
41238
+ .cds--slider-container.cds--skeleton .cds--slider__range-label:hover, .cds--slider-container.cds--skeleton .cds--slider__range-label:focus, .cds--slider-container.cds--skeleton .cds--slider__range-label:active {
41239
+ border: none;
41240
+ cursor: default;
41241
+ outline: none;
41242
+ }
41243
+ .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
41221
41244
  position: absolute;
41222
- justify-content: flex-end;
41223
- backdrop-filter: blur(85px);
41224
- background: rgba(0, 0, 0, 0.01);
41225
- border-end-end-radius: 0.5rem;
41226
- border-end-start-radius: 0.5rem;
41227
- column-gap: 0;
41245
+ animation: 3000ms ease-in-out cds--skeleton infinite;
41246
+ background: var(--cds-skeleton-element, #c6c6c6);
41247
+ block-size: 100%;
41248
+ content: "";
41228
41249
  inline-size: 100%;
41229
- inset-block-end: 0;
41230
- inset-inline-end: 0;
41250
+ will-change: transform-origin, transform, opacity;
41251
+ }
41252
+ @media (prefers-reduced-motion: reduce) {
41253
+ .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
41254
+ animation: none;
41255
+ }
41231
41256
  }
41232
41257
 
41233
- .cds--slug .cds--slug-actions .cds--btn:focus {
41234
- border-color: var(--cds-focus, #0f62fe);
41235
- box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-background, #ffffff);
41258
+ .cds--slider-container.cds--skeleton .cds--slider__track {
41259
+ cursor: default;
41260
+ pointer-events: none;
41236
41261
  }
41237
41262
 
41238
- .cds--slug .cds--slug-actions .cds--btn--primary {
41239
- order: 1;
41240
- border-end-end-radius: 0.4375rem;
41263
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper {
41264
+ inset-inline-start: 50%;
41265
+ }
41266
+ .cds--slider-container.cds--skeleton .cds--slider__thumb {
41267
+ cursor: default;
41268
+ pointer-events: none;
41269
+ }
41270
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--lower {
41271
+ inset-inline-start: 0;
41272
+ }
41273
+ .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--upper {
41274
+ inset-inline-start: 100%;
41241
41275
  }
41242
41276
 
41243
- .cds--slug.cds--slug--revert {
41244
- transform: translate(0.5rem, -50%);
41277
+ .cds--popover-container.cds--slider__thumb-wrapper {
41278
+ position: absolute;
41245
41279
  }
41246
41280
 
41247
- .cds--slug--revert .cds--btn--icon-only {
41248
- align-items: center;
41249
- padding-block-start: 0;
41281
+ /* stylelint-disable */
41282
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
41283
+ .cds--slider__thumb {
41284
+ outline: 1px solid transparent;
41285
+ }
41250
41286
  }
41251
41287
 
41252
- .cds--slug--revert .cds--btn--icon-only svg {
41253
- margin: 0;
41288
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
41289
+ .cds--slider__thumb:focus {
41290
+ color: Highlight;
41291
+ outline: 1px solid Highlight;
41292
+ }
41254
41293
  }
41255
41294
 
41295
+ @media screen and (-ms-high-contrast: active), (forced-colors: active) {
41296
+ .cds--slider__track {
41297
+ outline: 1px solid transparent;
41298
+ }
41299
+ }
41300
+
41301
+ /* stylelint-enable */
41256
41302
  .cds--stack-horizontal {
41257
41303
  display: inline-grid;
41258
41304
  column-gap: var(--cds-stack-gap, 0);
@@ -42169,22 +42215,6 @@ span.cds--pagination__text.cds--pagination__items-count {
42169
42215
  .cds--tabs--contained ~ .cds--tab-content {
42170
42216
  background: var(--cds-layer);
42171
42217
  }
42172
- .cds--tabs--contained ~ .cds--tab-content > * {
42173
- --cds-layer: var(--cds-layer-02, #ffffff);
42174
- --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
42175
- --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
42176
- --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
42177
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
42178
- --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
42179
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
42180
- --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
42181
- --cds-field: var(--cds-field-02, #ffffff);
42182
- --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
42183
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
42184
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
42185
- --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
42186
- --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
42187
- }
42188
42218
 
42189
42219
  .cds--tabs--vertical ~ .cds--tab-content {
42190
42220
  grid-column: 3/-1;
@@ -43798,6 +43828,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
43798
43828
  border-inline-end: 1px solid var(--cds-border-subtle);
43799
43829
  border-inline-start: 1px solid var(--cds-border-subtle);
43800
43830
  inline-size: 16rem;
43831
+ overflow-y: auto;
43801
43832
  }
43802
43833
 
43803
43834
  .cds--side-nav {
@@ -44815,6 +44846,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
44815
44846
  border-inline-end: 1px solid var(--cds-border-subtle);
44816
44847
  border-inline-start: 1px solid var(--cds-border-subtle);
44817
44848
  inline-size: 16rem;
44849
+ overflow-y: auto;
44818
44850
  }
44819
44851
 
44820
44852
  .cds--side-nav {