@carbon/ibm-products 2.43.2-canary.217 → 2.43.2-canary.219

Sign up to get free protection for your applications and to get access to all the features.
@@ -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 {
@@ -14902,6 +14904,8 @@ a.cds--side-nav__link--current::before {
14902
14904
 
14903
14905
  .c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
14904
14906
  inset-inline-end: 0;
14907
+ margin-block: 6px;
14908
+ margin-inline-end: 1rem;
14905
14909
  }
14906
14910
 
14907
14911
  @keyframes influencer-menu-entrance {
@@ -23951,14 +23955,14 @@ li.cds--accordion__item--disabled:last-of-type {
23951
23955
  .cds--accordion__item--active {
23952
23956
  overflow: visible;
23953
23957
  }
23954
- .cds--accordion__item--active .cds--accordion__wrapper {
23958
+ .cds--accordion__item--active > .cds--accordion__wrapper {
23955
23959
  overflow: visible;
23956
23960
  max-block-size: fit-content;
23957
23961
  opacity: 1;
23958
23962
  padding-block: 0.5rem;
23959
23963
  padding-block-end: 1.5rem;
23960
23964
  }
23961
- .cds--accordion__item--active .cds--accordion__arrow {
23965
+ .cds--accordion__item--active > .cds--accordion__heading > .cds--accordion__arrow {
23962
23966
  fill: var(--cds-icon-primary, #161616);
23963
23967
  transform: rotate(-90deg) /*rtl:ignore*/;
23964
23968
  }
@@ -24078,60 +24082,6 @@ li.cds--accordion__item--disabled:last-of-type {
24078
24082
  padding-inline-start: 0;
24079
24083
  }
24080
24084
 
24081
- .cds--aspect-ratio {
24082
- position: relative;
24083
- }
24084
-
24085
- .cds--aspect-ratio::before {
24086
- block-size: 0;
24087
- content: "";
24088
- float: left;
24089
- inline-size: 1px;
24090
- margin-inline-start: -1px;
24091
- }
24092
-
24093
- .cds--aspect-ratio::after {
24094
- display: table;
24095
- clear: both;
24096
- content: "";
24097
- }
24098
-
24099
- .cds--aspect-ratio--16x9::before {
24100
- padding-block-start: 56.25%;
24101
- }
24102
-
24103
- .cds--aspect-ratio--9x16::before {
24104
- padding-block-start: 177.7777777778%;
24105
- }
24106
-
24107
- .cds--aspect-ratio--2x1::before {
24108
- padding-block-start: 50%;
24109
- }
24110
-
24111
- .cds--aspect-ratio--1x2::before {
24112
- padding-block-start: 200%;
24113
- }
24114
-
24115
- .cds--aspect-ratio--4x3::before {
24116
- padding-block-start: 75%;
24117
- }
24118
-
24119
- .cds--aspect-ratio--3x4::before {
24120
- padding-block-start: 133.3333333333%;
24121
- }
24122
-
24123
- .cds--aspect-ratio--3x2::before {
24124
- padding-block-start: 66.6666666667%;
24125
- }
24126
-
24127
- .cds--aspect-ratio--2x3::before {
24128
- padding-block-start: 150%;
24129
- }
24130
-
24131
- .cds--aspect-ratio--1x1::before {
24132
- padding-block-start: 100%;
24133
- }
24134
-
24135
24085
  .cds--popover-container {
24136
24086
  display: inline-block;
24137
24087
  }
@@ -25158,8 +25108,16 @@ li.cds--accordion__item--disabled:last-of-type {
25158
25108
  box-shadow: 0.0625rem 0 0 0 var(--cds-button-separator, #e0e0e0);
25159
25109
  }
25160
25110
 
25161
- .cds--overflow-menu,
25162
- .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 {
25163
25121
  box-sizing: border-box;
25164
25122
  padding: 0;
25165
25123
  border: 0;
@@ -25175,345 +25133,1033 @@ li.cds--accordion__item--disabled:last-of-type {
25175
25133
  cursor: pointer;
25176
25134
  text-align: start;
25177
25135
  inline-size: 100%;
25178
- box-sizing: border-box;
25179
- padding: 0;
25180
- border: 0;
25181
- margin: 0;
25182
- font-family: inherit;
25183
- font-size: 100%;
25184
- vertical-align: baseline;
25185
- outline: 2px solid transparent;
25186
- outline-offset: -2px;
25187
- position: relative;
25188
25136
  display: flex;
25189
25137
  align-items: center;
25190
- justify-content: center;
25191
- block-size: 2.5rem;
25192
- cursor: pointer;
25193
- inline-size: 2.5rem;
25194
- min-block-size: 2.5rem;
25195
- transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
25196
25138
  }
25197
- .cds--overflow-menu *,
25198
- .cds--overflow-menu *::before,
25199
- .cds--overflow-menu *::after,
25200
- .cds--overflow-menu__trigger *,
25201
- .cds--overflow-menu__trigger *::before,
25202
- .cds--overflow-menu__trigger *::after {
25139
+ .cds--toggletip-button *,
25140
+ .cds--toggletip-button *::before,
25141
+ .cds--toggletip-button *::after {
25203
25142
  box-sizing: inherit;
25204
25143
  }
25205
- .cds--overflow-menu::-moz-focus-inner,
25206
- .cds--overflow-menu__trigger::-moz-focus-inner {
25144
+ .cds--toggletip-button::-moz-focus-inner {
25207
25145
  border: 0;
25208
25146
  }
25209
- .cds--overflow-menu *,
25210
- .cds--overflow-menu *::before,
25211
- .cds--overflow-menu *::after,
25212
- .cds--overflow-menu__trigger *,
25213
- .cds--overflow-menu__trigger *::before,
25214
- .cds--overflow-menu__trigger *::after {
25215
- box-sizing: inherit;
25216
- }
25217
- .cds--overflow-menu:focus,
25218
- .cds--overflow-menu__trigger:focus {
25219
- outline: 2px solid var(--cds-focus, #0f62fe);
25220
- outline-offset: -2px;
25221
- }
25222
- @media screen and (prefers-contrast) {
25223
- .cds--overflow-menu:focus,
25224
- .cds--overflow-menu__trigger:focus {
25225
- outline-style: dotted;
25226
- }
25227
- }
25228
- .cds--overflow-menu:hover,
25229
- .cds--overflow-menu__trigger:hover {
25230
- background-color: var(--cds-layer-hover);
25231
- }
25232
-
25233
- .cds--overflow-menu > :first-child {
25234
- margin-block-start: 0;
25235
- }
25236
25147
 
25237
- .cds--overflow-menu--sm {
25238
- block-size: 2rem;
25239
- inline-size: 2rem;
25240
- min-block-size: 2rem;
25148
+ .cds--toggletip-button svg {
25149
+ fill: var(--cds-icon-secondary, #525252);
25241
25150
  }
25242
25151
 
25243
- .cds--overflow-menu--lg {
25244
- block-size: 3rem;
25245
- inline-size: 3rem;
25152
+ .cds--toggletip-button:hover svg,
25153
+ .cds--toggletip--open .cds--toggletip-button svg {
25154
+ fill: var(--cds-icon-primary, #161616);
25246
25155
  }
25247
25156
 
25248
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
25249
- outline: 2px solid var(--cds-focus, #0f62fe);
25250
- outline-offset: -2px;
25157
+ .cds--toggletip-button:focus {
25158
+ outline: 1px solid var(--cds-focus, #0f62fe);
25251
25159
  }
25252
25160
  @media screen and (prefers-contrast) {
25253
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
25161
+ .cds--toggletip-button:focus {
25254
25162
  outline-style: dotted;
25255
25163
  }
25256
25164
  }
25257
- .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus svg {
25258
- outline: none;
25165
+
25166
+ .cds--toggletip {
25167
+ --cds-popover-offset: 0.8125rem;
25259
25168
  }
25260
25169
 
25261
- .cds--overflow-menu.cds--overflow-menu--open,
25262
- .cds--overflow-menu.cds--overflow-menu--open .cds--overflow-menu__trigger {
25263
- box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
25264
- background-color: var(--cds-layer);
25265
- 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;
25266
25184
  }
25267
25185
 
25268
- .cds--overflow-menu--light.cds--overflow-menu--open,
25269
- .cds--overflow-menu--light.cds--overflow-menu--open .cds--overflow-menu__trigger {
25270
- 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);
25271
25191
  }
25272
25192
 
25273
- .cds--overflow-menu__icon {
25274
- block-size: 1rem;
25275
- fill: var(--cds-icon-primary, #161616);
25276
- inline-size: 1rem;
25193
+ .cds--toggletip-actions {
25194
+ display: flex;
25195
+ align-items: center;
25196
+ justify-content: space-between;
25197
+ column-gap: 1rem;
25277
25198
  }
25278
25199
 
25279
- .cds--overflow-menu__wrapper {
25280
- line-height: 0;
25200
+ .cds--slug {
25201
+ display: flex;
25281
25202
  }
25282
25203
 
25283
- .cds--overflow-menu-options {
25284
- box-sizing: border-box;
25285
- padding: 0;
25286
- border: 0;
25287
- margin: 0;
25288
- font-family: inherit;
25289
- font-size: 100%;
25290
- vertical-align: baseline;
25291
- box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
25292
- position: absolute;
25293
- z-index: 6000;
25294
- display: none;
25295
- flex-direction: column;
25296
- align-items: flex-start;
25297
- background-color: var(--cds-layer);
25298
- inline-size: 10rem;
25299
- inset-block-start: 32px;
25300
- inset-inline-start: 0;
25301
- list-style: none;
25204
+ .cds--slug:has(> .cds--popover--open) {
25205
+ z-index: 2;
25302
25206
  }
25303
- .cds--overflow-menu-options *,
25304
- .cds--overflow-menu-options *::before,
25305
- .cds--overflow-menu-options *::after {
25306
- 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);
25307
25219
  }
25308
- .cds--overflow-menu-options::after {
25309
- position: absolute;
25310
- display: block;
25311
- background-color: var(--cds-layer);
25312
- content: "";
25313
- 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;
25314
25225
  }
25315
- @media screen and (prefers-reduced-motion: reduce) {
25316
- .cds--overflow-menu-options::after {
25317
- transition: none;
25318
- }
25226
+ .cds--slug .cds--slug__button--2xs {
25227
+ height: 1.25rem;
25228
+ width: 1.25rem;
25229
+ font-size: 0.75rem;
25230
+ line-height: 1rem;
25319
25231
  }
25320
-
25321
- .cds--overflow-menu.cds--overflow-menu--open:hover {
25322
- 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;
25323
25237
  }
25324
-
25325
- .cds--overflow-menu-options--light {
25326
- 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;
25327
25243
  }
25328
- .cds--overflow-menu-options--light::after {
25329
- 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;
25330
25249
  }
25331
-
25332
- .cds--overflow-menu.cds--overflow-menu--light.cds--overflow-menu--open:hover {
25333
- 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;
25334
25255
  }
25335
-
25336
- .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
25337
- block-size: 0.1875rem;
25338
- inline-size: 2.5rem;
25339
- inset-block-start: -0.1875rem;
25340
- 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;
25341
25261
  }
25342
25262
 
25343
- .cds--overflow-menu-options[data-floating-menu-direction=top]::after {
25344
- block-size: 0.5rem;
25345
- inline-size: 2.5rem;
25346
- inset-block-end: -0.5rem;
25347
- 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;
25348
25270
  }
25349
25271
 
25350
- .cds--overflow-menu-options[data-floating-menu-direction=left]::after {
25351
- block-size: 2.5rem;
25352
- inline-size: 0.375rem;
25353
- inset-block-start: 0;
25354
- 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);
25355
25275
  }
25356
25276
 
25357
- .cds--overflow-menu-options[data-floating-menu-direction=right]::after {
25358
- block-size: 2.5rem;
25359
- inline-size: 0.375rem;
25360
- inset-block-start: 0;
25361
- 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);
25362
25280
  }
25363
25281
 
25364
- .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 {
25365
- inline-size: 2rem;
25366
- }
25367
- .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 {
25368
- 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);
25369
25286
  }
25370
25287
 
25371
- .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 {
25372
- inline-size: 3rem;
25373
- }
25374
- .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 {
25375
- 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);
25376
25291
  }
25377
25292
 
25378
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=top]::after,
25379
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
25380
- inset-inline-end: 0;
25381
- inset-inline-start: auto;
25293
+ .cds--slug__text {
25294
+ position: relative;
25295
+ z-index: 1;
25382
25296
  }
25383
25297
 
25384
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=left]::after,
25385
- .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
25386
- inset-block-end: 0;
25387
- 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;
25388
25308
  }
25389
25309
 
25390
- .cds--overflow-menu-options--open {
25391
- display: flex;
25310
+ .cds--slug__button--inline::before {
25311
+ display: none;
25392
25312
  }
25393
25313
 
25394
- .cds--overflow-menu-options__content {
25395
- inline-size: 100%;
25314
+ .cds--slug .cds--slug__button--inline:focus {
25315
+ border-color: var(--cds-focus, #0f62fe);
25316
+ box-shadow: none;
25396
25317
  }
25397
25318
 
25398
- .cds--overflow-menu-options__option {
25399
- box-sizing: border-box;
25400
- padding: 0;
25401
- border: 0;
25402
- margin: 0;
25403
- font-family: inherit;
25404
- font-size: 100%;
25405
- vertical-align: baseline;
25406
- display: flex;
25407
- align-items: center;
25408
- padding: 0;
25409
- background-color: transparent;
25410
- block-size: 2.5rem;
25411
- inline-size: 100%;
25412
- transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
25413
- }
25414
- .cds--overflow-menu-options__option *,
25415
- .cds--overflow-menu-options__option *::before,
25416
- .cds--overflow-menu-options__option *::after {
25417
- 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);
25418
25325
  }
25419
25326
 
25420
- .cds--overflow-menu-options--sm .cds--overflow-menu-options__option {
25421
- block-size: 2rem;
25327
+ .cds--slug .cds--slug__button--inline:focus:hover {
25328
+ border-color: var(--cds-focus, #0f62fe);
25422
25329
  }
25423
25330
 
25424
- .cds--overflow-menu-options--lg .cds--overflow-menu-options__option {
25425
- block-size: 3rem;
25331
+ .cds--slug .cds--slug__button--inline:hover .cds--slug__text::before {
25332
+ background: var(--cds-icon-secondary, #525252);
25426
25333
  }
25427
25334
 
25428
- .cds--overflow-menu--divider {
25429
- border-block-start: 1px solid var(--cds-border-subtle);
25335
+ .cds--slug__button--inline .cds--slug__text {
25336
+ padding-inline-start: 0.5rem;
25430
25337
  }
25431
25338
 
25432
- .cds--overflow-menu--light .cds--overflow-menu--divider {
25433
- 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;
25434
25342
  }
25435
25343
 
25436
- a.cds--overflow-menu-options__btn::before {
25344
+ .cds--slug__button--inline .cds--slug__text::before {
25345
+ position: absolute;
25437
25346
  display: inline-block;
25438
- block-size: 100%;
25347
+ background: var(--cds-icon-primary, #161616);
25348
+ block-size: 0.25rem;
25439
25349
  content: "";
25440
- 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);
25441
25356
  }
25442
25357
 
25443
- .cds--overflow-menu-options__btn {
25444
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
25445
- font-weight: var(--cds-body-compact-01-font-weight, 400);
25446
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
25447
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
25448
- outline: 2px solid transparent;
25449
- outline-offset: -2px;
25450
- display: inline-flex;
25451
- align-items: center;
25452
- padding: 0 1rem;
25453
- border: none;
25454
- background-color: transparent;
25455
- block-size: 100%;
25456
- color: var(--cds-text-secondary, #525252);
25457
- cursor: pointer;
25458
- font-family: inherit;
25459
- font-weight: 400;
25460
- inline-size: 100%;
25461
- max-inline-size: 11.25rem;
25462
- text-align: start;
25463
- 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);
25464
- }
25465
- .cds--overflow-menu-options__btn:hover {
25466
- color: var(--cds-text-primary, #161616);
25467
- }
25468
- .cds--overflow-menu-options__btn:focus {
25469
- outline: 2px solid var(--cds-focus, #0f62fe);
25470
- outline-offset: -2px;
25471
- }
25472
- @media screen and (prefers-contrast) {
25473
- .cds--overflow-menu-options__btn:focus {
25474
- outline-style: dotted;
25475
- }
25476
- }
25477
- .cds--overflow-menu-options__btn::-moz-focus-inner {
25478
- 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;
25479
25362
  }
25480
25363
 
25481
- .cds--overflow-menu-options__btn svg {
25482
- 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;
25483
25373
  }
25484
25374
 
25485
- .cds--overflow-menu-options__btn:hover svg {
25486
- 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;
25487
25378
  }
25488
25379
 
25489
- .cds--overflow-menu-options__option-content {
25490
- overflow: hidden;
25491
- text-overflow: ellipsis;
25492
- 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;
25493
25384
  }
25494
25385
 
25495
- .cds--overflow-menu-options__option:hover {
25496
- 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;
25497
25392
  }
25498
25393
 
25499
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover,
25500
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus {
25501
- background-color: var(--cds-button-danger-primary, #da1e28);
25502
- color: var(--cds-text-on-color, #ffffff);
25503
- }
25504
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:hover svg,
25505
- .cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus svg {
25506
- fill: currentColor;
25394
+ .cds--slug__button--inline.cds--slug__button--md .cds--slug__additional-text {
25395
+ font-size: 0.875rem;
25507
25396
  }
25508
25397
 
25509
- .cds--overflow-menu-options__option--disabled:hover {
25510
- background-color: var(--cds-layer);
25511
- 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);
25512
25401
  }
25513
25402
 
25514
- .cds--overflow-menu-options__option--disabled .cds--overflow-menu-options__btn {
25515
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
25516
- 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;
25517
26163
  }
25518
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 {
25519
26165
  outline: 2px solid transparent;
@@ -26088,7 +26734,8 @@ input[data-invalid]:not(:focus),
26088
26734
  .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
26089
26735
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
26090
26736
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
26091
- .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),
26092
26739
  .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
26093
26740
  outline: 2px solid var(--cds-support-error, #da1e28);
26094
26741
  outline-offset: -2px;
@@ -26099,7 +26746,8 @@ input[data-invalid]:not(:focus),
26099
26746
  .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:not(:focus),
26100
26747
  .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:not(:focus),
26101
26748
  .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
26102
- .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),
26103
26751
  .cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus) {
26104
26752
  outline-style: dotted;
26105
26753
  }
@@ -27588,6 +28236,10 @@ fieldset[disabled] .cds--form__helper-text {
27588
28236
  inset-inline-start: -2.5rem;
27589
28237
  }
27590
28238
 
28239
+ .cds--toggle-password-tooltip .cds--popover-content {
28240
+ min-inline-size: 2.5rem;
28241
+ }
28242
+
27591
28243
  .cds--text-input--sm + .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
27592
28244
  inline-size: 2rem;
27593
28245
  }
@@ -27649,6 +28301,20 @@ fieldset[disabled] .cds--form__helper-text {
27649
28301
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
27650
28302
  }
27651
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
+
27652
28318
  .cds--text-input__counter-alert {
27653
28319
  position: absolute;
27654
28320
  overflow: hidden;
@@ -28757,6 +29423,11 @@ fieldset[disabled] .cds--form__helper-text {
28757
29423
  inset-inline-end: -0.5625rem;
28758
29424
  }
28759
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
+
28760
29431
  .cds--list-box__wrapper--slug .cds--list-box:not(:has(.cds--slug--revert)) {
28761
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%);
28762
29433
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
@@ -28886,7 +29557,7 @@ fieldset[disabled] .cds--form__helper-text {
28886
29557
  }
28887
29558
  }
28888
29559
 
28889
- .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 {
28890
29561
  outline-offset: -0.0625rem;
28891
29562
  outline-width: 0.0625rem;
28892
29563
  }
@@ -30057,11 +30728,11 @@ fieldset[disabled] .cds--form__helper-text {
30057
30728
  color: var(--cds-text-primary, #161616);
30058
30729
  }
30059
30730
 
30060
- .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) {
30061
30732
  color: var(--cds-link-secondary, #0043ce);
30062
30733
  }
30063
30734
 
30064
- .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) {
30065
30736
  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
30066
30737
  }
30067
30738
 
@@ -32601,9 +33272,9 @@ th .cds--table-sort__flex {
32601
33272
  }
32602
33273
 
32603
33274
  .flatpickr-calendar.inline {
32604
- position: relative;
33275
+ position: absolute;
32605
33276
  display: block;
32606
- inset-block-start: 0.125rem;
33277
+ inset-block-start: auto;
32607
33278
  }
32608
33279
 
32609
33280
  .flatpickr-calendar.static {
@@ -34482,6 +35153,10 @@ button.cds--dropdown-text:focus {
34482
35153
  }
34483
35154
  }
34484
35155
 
35156
+ .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--combo-box) {
35157
+ outline: none;
35158
+ }
35159
+
34485
35160
  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus:has(.cds--list-box--expanded) {
34486
35161
  outline-width: 0.0625rem;
34487
35162
  }
@@ -34674,8 +35349,9 @@ button.cds--dropdown-text:focus {
34674
35349
  white-space: nowrap;
34675
35350
  }
34676
35351
 
34677
- .cds--list-box__wrapper--fluid .cds--combo-box .cds--text-input:focus {
34678
- 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;
34679
35355
  }
34680
35356
 
34681
35357
  .cds--list-box__wrapper--fluid .cds--combo-box .cds--list-box__selection {
@@ -34971,12 +35647,12 @@ button.cds--dropdown-text:focus {
34971
35647
  inset-block-start: 2.6875rem;
34972
35648
  }
34973
35649
 
34974
- .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)) {
34975
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%);
34976
35652
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
34977
35653
  }
34978
35654
 
34979
- .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) {
34980
35656
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
34981
35657
  }
34982
35658
 
@@ -35048,14 +35724,14 @@ button.cds--dropdown-text:focus {
35048
35724
 
35049
35725
  .cds--multi-select--filterable--input-focused,
35050
35726
  .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=false]),
35051
- .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]) {
35052
35728
  outline: 2px solid var(--cds-focus, #0f62fe);
35053
35729
  outline-offset: -2px;
35054
35730
  }
35055
35731
  @media screen and (prefers-contrast) {
35056
35732
  .cds--multi-select--filterable--input-focused,
35057
35733
  .cds--multi-select .cds--list-box__field--wrapper--input-focused:has(button[aria-expanded=false]),
35058
- .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]) {
35059
35735
  outline-style: dotted;
35060
35736
  }
35061
35737
  }
@@ -35868,7 +36544,7 @@ button.cds--dropdown-text:focus {
35868
36544
  padding-inline-end: 7.5rem;
35869
36545
  }
35870
36546
 
35871
- .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)) {
35872
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%);
35873
36549
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
35874
36550
  }
@@ -36256,6 +36932,11 @@ optgroup.cds--select-optgroup:disabled,
36256
36932
  inset-inline-end: calc(-0.5rem - 1px);
36257
36933
  }
36258
36934
 
36935
+ .cds--select--slug .cds--slug--revert::after {
36936
+ inset-block-start: 0.5rem;
36937
+ inset-inline-end: -0.0625rem;
36938
+ }
36939
+
36259
36940
  .cds--select--slug .cds--select-input:not(:has(~ .cds--slug--revert)) {
36260
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%);
36261
36942
  border-block-end-color: var(--cds-ai-border-strong, #4589ff);
@@ -39346,6 +40027,8 @@ span.cds--pagination__text.cds--pagination__items-count {
39346
40027
  font-weight: var(--cds-body-compact-01-font-weight, 400);
39347
40028
  line-height: var(--cds-body-compact-01-line-height, 1.28572);
39348
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));
39349
40032
  line-height: 0;
39350
40033
  }
39351
40034
  .cds--pagination-nav html {
@@ -39402,12 +40085,12 @@ span.cds--pagination__text.cds--pagination__items-count {
39402
40085
  text-align: start;
39403
40086
  position: relative;
39404
40087
  display: block;
39405
- padding: 1.0625rem 0.25rem;
40088
+ padding: calc((var(--cds-layout-size-height-local) - 0.875rem) / 2) 0.25rem;
39406
40089
  border-radius: 0;
39407
40090
  color: var(--cds-text-primary, #161616);
39408
40091
  font-weight: 400;
39409
40092
  line-height: 1;
39410
- min-inline-size: 3rem;
40093
+ min-inline-size: var(--cds-layout-size-height-local);
39411
40094
  outline: 0;
39412
40095
  text-align: center;
39413
40096
  text-decoration: none;
@@ -39488,7 +40171,7 @@ span.cds--pagination__text.cds--pagination__items-count {
39488
40171
 
39489
40172
  .cds--pagination-nav__page--select {
39490
40173
  appearance: none;
39491
- max-block-size: 3rem;
40174
+ max-block-size: var(--cds-layout-size-height-local);
39492
40175
  text-indent: calc(50% - 4.5px);
39493
40176
  }
39494
40177
  @-moz-document url-prefix() {
@@ -39532,7 +40215,7 @@ span.cds--pagination__text.cds--pagination__items-count {
39532
40215
 
39533
40216
  .cds--pagination-nav__select-icon {
39534
40217
  position: absolute;
39535
- inset-block-start: calc(50% - 0.5rem);
40218
+ inset-block-start: calc(50% - 0.25rem);
39536
40219
  inset-inline-start: calc(50% - 0.5rem);
39537
40220
  pointer-events: none;
39538
40221
  }
@@ -40390,870 +41073,232 @@ span.cds--pagination__text.cds--pagination__items-count {
40390
41073
  }
40391
41074
  .cds--slider__thumb--lower:focus .cds--slider__thumb-icon--focus,
40392
41075
  .cds--slider__thumb--upper:focus .cds--slider__thumb-icon--focus {
40393
- display: block;
40394
- }
40395
-
40396
- .cds--slider__thumb--lower:focus::before,
40397
- .cds--slider__thumb--upper:focus::before {
40398
- inline-size: 100%;
40399
- }
40400
-
40401
- .cds--slider__thumb--upper {
40402
- transform: none;
40403
- }
40404
- .cds--slider__thumb--upper::before {
40405
- inset-inline-end: auto;
40406
- inset-inline-start: 0;
40407
- }
40408
- .cds--slider__thumb--upper:hover, .cds--slider__thumb--upper:active, .cds--slider__thumb--upper:focus {
40409
- transform: none;
40410
- }
40411
-
40412
- .cds--slider__input {
40413
- display: none;
40414
- }
40415
-
40416
- .cds--slider-text-input-wrapper {
40417
- position: relative;
40418
- }
40419
-
40420
- .cds--slider-text-input-wrapper--hidden {
40421
- display: none;
40422
- }
40423
-
40424
- .cds--slider-text-input,
40425
- .cds-slider-text-input {
40426
- -moz-appearance: textfield;
40427
- appearance: textfield;
40428
- block-size: 2.5rem;
40429
- inline-size: 4rem;
40430
- }
40431
- .cds--slider-text-input::-webkit-outer-spin-button, .cds--slider-text-input::-webkit-inner-spin-button,
40432
- .cds-slider-text-input::-webkit-outer-spin-button,
40433
- .cds-slider-text-input::-webkit-inner-spin-button {
40434
- display: none;
40435
- }
40436
-
40437
- .cds--slider__thumb:focus ~ .cds--slider__filled-track,
40438
- .cds--slider__thumb-wrapper:focus-within ~ .cds--slider__filled-track {
40439
- background-color: var(--cds-border-interactive, #0f62fe);
40440
- }
40441
-
40442
- .cds--slider-text-input.cds--text-input--invalid,
40443
- .cds--slider-text-input--warn {
40444
- inline-size: 6rem;
40445
- padding-inline-end: 3rem;
40446
- }
40447
-
40448
- .cds--slider__invalid-icon {
40449
- position: absolute;
40450
- fill: var(--cds-support-error, #da1e28);
40451
- inset-block-start: 50%;
40452
- inset-inline-end: 1rem;
40453
- transform: translateY(-50%);
40454
- }
40455
-
40456
- .cds--slider__validation-msg.cds--form-requirement {
40457
- display: block;
40458
- overflow: visible;
40459
- max-block-size: 100%;
40460
- }
40461
-
40462
- .cds--slider__validation-msg--invalid {
40463
- color: var(--cds-text-error, #da1e28);
40464
- }
40465
-
40466
- .cds--slider__invalid-icon.cds--slider__invalid-icon--warning {
40467
- fill: var(--cds-support-warning, #f1c21b);
40468
- }
40469
-
40470
- .cds--slider__invalid-icon--warning path:first-of-type {
40471
- fill: #000000;
40472
- opacity: 1;
40473
- }
40474
-
40475
- .cds--label--disabled ~ .cds--slider-container > .cds--slider__range-label {
40476
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
40477
- }
40478
-
40479
- .cds--slider--disabled.cds--slider {
40480
- cursor: not-allowed;
40481
- }
40482
-
40483
- .cds--slider--disabled .cds--slider__thumb {
40484
- background-color: var(--cds-border-disabled, #c6c6c6);
40485
- }
40486
- .cds--slider--disabled .cds--slider__thumb:hover {
40487
- cursor: not-allowed;
40488
- transform: translate(-50%, -50%);
40489
- }
40490
- .cds--slider--disabled .cds--slider__thumb:focus {
40491
- background-color: var(--cds-border-disabled, #c6c6c6);
40492
- box-shadow: none;
40493
- outline: none;
40494
- transform: translate(-50%, -50%);
40495
- }
40496
- .cds--slider--disabled .cds--slider__thumb:active {
40497
- background: var(--cds-border-disabled, #c6c6c6);
40498
- transform: translate(-50%, -50%);
40499
- }
40500
-
40501
- .cds--slider--disabled .cds--slider__track,
40502
- .cds--slider--disabled .cds--slider__filled-track,
40503
- .cds--slider--disabled .cds--slider__thumb:focus ~ .cds--slider__filled-track {
40504
- background-color: var(--cds-border-disabled, #c6c6c6);
40505
- }
40506
-
40507
- .cds--slider--disabled ~ .cds--form-item .cds--slider-text-input,
40508
- .cds--slider--disabled ~ .cds--slider-text-input {
40509
- border: none;
40510
- background-color: var(--cds-field);
40511
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
40512
- cursor: not-allowed;
40513
- transition: none;
40514
- }
40515
- .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,
40516
- .cds--slider--disabled ~ .cds--slider-text-input:active,
40517
- .cds--slider--disabled ~ .cds--slider-text-input:focus,
40518
- .cds--slider--disabled ~ .cds--slider-text-input:hover {
40519
- color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
40520
- outline: none;
40521
- }
40522
-
40523
- .cds--slider--readonly {
40524
- cursor: default;
40525
- }
40526
-
40527
- .cds--slider-container--readonly .cds--slider__thumb {
40528
- block-size: 0;
40529
- inline-size: 0;
40530
- }
40531
- .cds--slider-container--readonly .cds--slider__thumb::before, .cds--slider-container--readonly .cds--slider__thumb::after {
40532
- display: none;
40533
- }
40534
-
40535
- .cds--slider-container--readonly .cds--slider-text-input {
40536
- background-color: transparent;
40537
- }
40538
-
40539
- .cds--slider__status-msg.cds--form-requirement {
40540
- display: block;
40541
- overflow: visible;
40542
- max-block-size: 100%;
40543
- }
40544
-
40545
- .cds--slider-container.cds--skeleton .cds--slider__range-label {
40546
- position: relative;
40547
- padding: 0;
40548
- border: none;
40549
- background: var(--cds-skeleton-background, #e8e8e8);
40550
- box-shadow: none;
40551
- pointer-events: none;
40552
- block-size: 0.75rem;
40553
- inline-size: 1.25rem;
40554
- }
40555
- .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 {
40556
- border: none;
40557
- cursor: default;
40558
- outline: none;
40559
- }
40560
- .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
40561
- position: absolute;
40562
- animation: 3000ms ease-in-out cds--skeleton infinite;
40563
- background: var(--cds-skeleton-element, #c6c6c6);
40564
- block-size: 100%;
40565
- content: "";
40566
- inline-size: 100%;
40567
- will-change: transform-origin, transform, opacity;
40568
- }
40569
- @media (prefers-reduced-motion: reduce) {
40570
- .cds--slider-container.cds--skeleton .cds--slider__range-label::before {
40571
- animation: none;
40572
- }
40573
- }
40574
-
40575
- .cds--slider-container.cds--skeleton .cds--slider__track {
40576
- cursor: default;
40577
- pointer-events: none;
40578
- }
40579
-
40580
- .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper {
40581
- inset-inline-start: 50%;
40582
- }
40583
- .cds--slider-container.cds--skeleton .cds--slider__thumb {
40584
- cursor: default;
40585
- pointer-events: none;
40586
- }
40587
- .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--lower {
40588
- inset-inline-start: 0;
40589
- }
40590
- .cds--slider-container.cds--skeleton .cds--slider__thumb-wrapper--upper {
40591
- inset-inline-start: 100%;
40592
- }
40593
-
40594
- .cds--popover-container.cds--slider__thumb-wrapper {
40595
- position: absolute;
40596
- }
40597
-
40598
- /* stylelint-disable */
40599
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
40600
- .cds--slider__thumb {
40601
- outline: 1px solid transparent;
40602
- }
40603
- }
40604
-
40605
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
40606
- .cds--slider__thumb:focus {
40607
- color: Highlight;
40608
- outline: 1px solid Highlight;
40609
- }
40610
- }
40611
-
40612
- @media screen and (-ms-high-contrast: active), (forced-colors: active) {
40613
- .cds--slider__track {
40614
- outline: 1px solid transparent;
40615
- }
40616
- }
40617
-
40618
- /* stylelint-enable */
40619
- .cds--toggletip-label {
40620
- font-size: var(--cds-body-01-font-size, 0.875rem);
40621
- font-weight: var(--cds-body-01-font-weight, 400);
40622
- line-height: var(--cds-body-01-line-height, 1.42857);
40623
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
40624
- color: var(--cds-text-secondary, #525252);
40625
- margin-inline-end: 0.5rem;
40626
- }
40627
-
40628
- .cds--toggletip-button {
40629
- box-sizing: border-box;
40630
- padding: 0;
40631
- border: 0;
40632
- margin: 0;
40633
- font-family: inherit;
40634
- font-size: 100%;
40635
- vertical-align: baseline;
40636
- display: inline-block;
40637
- padding: 0;
40638
- border: 0;
40639
- appearance: none;
40640
- background: none;
40641
- cursor: pointer;
40642
- text-align: start;
40643
- inline-size: 100%;
40644
- display: flex;
40645
- align-items: center;
40646
- }
40647
- .cds--toggletip-button *,
40648
- .cds--toggletip-button *::before,
40649
- .cds--toggletip-button *::after {
40650
- box-sizing: inherit;
40651
- }
40652
- .cds--toggletip-button::-moz-focus-inner {
40653
- border: 0;
40654
- }
40655
-
40656
- .cds--toggletip-button svg {
40657
- fill: var(--cds-icon-secondary, #525252);
40658
- }
40659
-
40660
- .cds--toggletip-button:hover svg,
40661
- .cds--toggletip--open .cds--toggletip-button svg {
40662
- fill: var(--cds-icon-primary, #161616);
40663
- }
40664
-
40665
- .cds--toggletip-button:focus {
40666
- outline: 1px solid var(--cds-focus, #0f62fe);
40667
- }
40668
- @media screen and (prefers-contrast) {
40669
- .cds--toggletip-button:focus {
40670
- outline-style: dotted;
40671
- }
40672
- }
40673
-
40674
- .cds--toggletip {
40675
- --cds-popover-offset: 0.8125rem;
40676
- }
40677
-
40678
- .cds--toggletip-content {
40679
- --cds-button-focus-color: var(--cds-focus-inverse, #ffffff);
40680
- --cds-link-text-color: var(--cds-link-inverse, #78a9ff);
40681
- --cds-link-hover-text-color: var(--cds-link-inverse-hover, #a6c8ff);
40682
- --cds-link-visited-text-color: var(--cds-link-inverse-visited, #be95ff);
40683
- --cds-link-focus-text-color: var(--cds-focus-inverse, #ffffff);
40684
- font-size: var(--cds-body-01-font-size, 0.875rem);
40685
- font-weight: var(--cds-body-01-font-weight, 400);
40686
- line-height: var(--cds-body-01-line-height, 1.42857);
40687
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
40688
- display: grid;
40689
- padding: 1rem;
40690
- max-inline-size: 18rem;
40691
- row-gap: 1rem;
40692
- }
40693
-
40694
- .cds--toggletip-content p {
40695
- font-size: var(--cds-body-01-font-size, 0.875rem);
40696
- font-weight: var(--cds-body-01-font-weight, 400);
40697
- line-height: var(--cds-body-01-line-height, 1.42857);
40698
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
40699
- }
40700
-
40701
- .cds--toggletip-actions {
40702
- display: flex;
40703
- align-items: center;
40704
- justify-content: space-between;
40705
- column-gap: 1rem;
40706
- }
40707
-
40708
- .cds--slug {
40709
- display: flex;
40710
- }
40711
-
40712
- .cds--slug:has(> .cds--popover--open) {
40713
- z-index: 2;
40714
- }
40715
-
40716
- .cds--slug .cds--slug__button {
40717
- position: relative;
40718
- display: flex;
40719
- align-items: center;
40720
- justify-content: center;
40721
- border: 1px solid var(--cds-border-inverse, #161616);
40722
- background: transparent;
40723
- color: var(--cds-text-primary, #161616);
40724
- font-weight: 600;
40725
- outline: none;
40726
- 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);
40727
- }
40728
- .cds--slug .cds--slug__button--mini {
40729
- height: 1rem;
40730
- width: 1rem;
40731
- font-size: 0.5625rem;
40732
- line-height: 0.75rem;
40733
- }
40734
- .cds--slug .cds--slug__button--2xs {
40735
- height: 1.25rem;
40736
- width: 1.25rem;
40737
- font-size: 0.75rem;
40738
- line-height: 1rem;
40739
- }
40740
- .cds--slug .cds--slug__button--xs {
40741
- height: 1.5rem;
40742
- width: 1.5rem;
40743
- font-size: 0.75rem;
40744
- line-height: 1rem;
40745
- }
40746
- .cds--slug .cds--slug__button--sm {
40747
- height: 2rem;
40748
- width: 2rem;
40749
- font-size: 1rem;
40750
- line-height: 1.3125rem;
40751
- }
40752
- .cds--slug .cds--slug__button--md {
40753
- height: 2.5rem;
40754
- width: 2.5rem;
40755
- font-size: 1rem;
40756
- line-height: 1.3125rem;
40757
- }
40758
- .cds--slug .cds--slug__button--lg {
40759
- height: 3rem;
40760
- width: 3rem;
40761
- font-size: 1rem;
40762
- line-height: 1.3125rem;
40763
- }
40764
- .cds--slug .cds--slug__button--xl {
40765
- height: 4rem;
40766
- width: 4rem;
40767
- font-size: 1.25rem;
40768
- line-height: 1.625rem;
40769
- }
40770
-
40771
- .cds--slug .cds--slug__button:focus {
40772
- border: 1px solid var(--cds-focus, #0f62fe);
40773
- box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
40774
- }
40775
-
40776
- .cds--slug .cds--slug__button.cds--slug__button--mini:focus,
40777
- .cds--slug .cds--slug__button.cds--slug__button--2xs:focus {
40778
- box-shadow: none;
40779
- }
40780
-
40781
- .cds--slug .cds--slug__button:hover {
40782
- background: var(--cds-border-inverse, #161616);
40783
- color: var(--cds-text-inverse, #ffffff);
40784
- }
40785
-
40786
- .cds--slug .cds--slug__button:hover:active {
40787
- background: var(--cds-border-inverse, #161616);
40788
- box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-focus-inset, #ffffff);
40789
- color: var(--cds-text-inverse, #ffffff);
40790
- }
40791
-
40792
- .cds--slug .cds--slug__button.cds--slug__button--mini:hover:active,
40793
- .cds--slug .cds--slug__button.cds--slug__button--2xs:hover:active {
40794
- box-shadow: inset 0 0 0 1px var(--cds-focus-inset, #ffffff);
40795
- }
40796
-
40797
- .cds--slug__text {
40798
- position: relative;
40799
- z-index: 1;
40800
- }
40801
-
40802
- .cds--slug .cds--slug__button--inline {
40803
- border: 1px solid transparent;
40804
- border-radius: 0.0625rem;
40805
- background: transparent;
40806
- block-size: initial;
40807
- color: var(--cds-text-primary, #161616);
40808
- font-size: 0.875rem;
40809
- inline-size: initial;
40810
- line-height: initial;
40811
- padding-inline: 0.25rem;
40812
- }
40813
-
40814
- .cds--slug__button--inline::before {
40815
- display: none;
40816
- }
40817
-
40818
- .cds--slug .cds--slug__button--inline:focus {
40819
- border-color: var(--cds-focus, #0f62fe);
40820
- box-shadow: none;
40821
- }
40822
-
40823
- .cds--slug .cds--slug__button--inline:hover,
40824
- .cds--slug .cds--slug__button--inline:hover:active {
40825
- border-color: var(--cds-icon-secondary, #525252);
40826
- background: transparent;
40827
- box-shadow: none;
40828
- color: var(--cds-text-secondary, #525252);
40829
- }
40830
-
40831
- .cds--slug .cds--slug__button--inline:focus:hover {
40832
- border-color: var(--cds-focus, #0f62fe);
40833
- }
40834
-
40835
- .cds--slug .cds--slug__button--inline:hover .cds--slug__text::before {
40836
- background: var(--cds-icon-secondary, #525252);
40837
- }
40838
-
40839
- .cds--slug__button--inline .cds--slug__text {
40840
- padding-inline-start: 0.5rem;
40841
- }
40842
-
40843
- .cds--slug__button--inline.cds--slug__button--lg .cds--slug__text,
40844
- .cds--slug__button--inline.cds--slug__button--xl .cds--slug__text {
40845
- padding-inline-start: 0.75rem;
40846
- }
40847
-
40848
- .cds--slug__button--inline .cds--slug__text::before {
40849
- position: absolute;
40850
- display: inline-block;
40851
- background: var(--cds-icon-primary, #161616);
40852
- block-size: 0.25rem;
40853
- content: "";
40854
- inline-size: 0.25rem;
40855
- inset-block-start: 50%;
40856
- inset-inline-start: 0;
40857
- opacity: 1;
40858
- transform: translateY(-50%);
40859
- 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;
40860
41077
  }
40861
41078
 
40862
- .cds--slug__button--lg .cds--slug__text::before,
40863
- .cds--slug__button--xl .cds--slug__text::before {
40864
- block-size: 0.5rem;
40865
- inline-size: 0.5rem;
41079
+ .cds--slider__thumb--lower:focus::before,
41080
+ .cds--slider__thumb--upper:focus::before {
41081
+ inline-size: 100%;
40866
41082
  }
40867
41083
 
40868
- .cds--slug__button--inline.cds--slug__button--mini,
40869
- .cds--slug__button--inline.cds--slug__button--mini .cds--slug__additional-text,
40870
- .cds--slug__button--inline.cds--slug__button--2xs,
40871
- .cds--slug__button--inline.cds--slug__button--2xs .cds--slug__additional-text,
40872
- .cds--slug__button--inline.cds--slug__button--xs,
40873
- .cds--slug__button--inline.cds--slug__button--xs .cds--slug__additional-text,
40874
- .cds--slug__button--inline.cds--slug__button--sm,
40875
- .cds--slug__button--inline.cds--slug__button--sm .cds--slug__additional-text {
40876
- font-size: 0.75rem;
41084
+ .cds--slider__thumb--upper {
41085
+ transform: none;
40877
41086
  }
40878
-
40879
- .cds--slug__button--inline.cds--slug__button--lg,
40880
- .cds--slug__button--inline.cds--slug__button--xl {
40881
- 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;
40882
41093
  }
40883
41094
 
40884
- .cds--slug .cds--slug__button--inline-with-content {
40885
- border: 1px solid var(--cds-border-inverse, #161616);
40886
- padding-block: 0.125rem;
40887
- padding-inline: 0.5rem;
41095
+ .cds--slider__input {
41096
+ display: none;
40888
41097
  }
40889
41098
 
40890
- .cds--slug__button--inline-with-content .cds--slug__additional-text {
40891
- font-size: var(--cds-body-compact-02-font-size, 1rem);
40892
- font-weight: var(--cds-body-compact-02-font-weight, 400);
40893
- line-height: var(--cds-body-compact-02-line-height, 1.375);
40894
- letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
40895
- padding-inline-start: 0.25rem;
41099
+ .cds--slider-text-input-wrapper {
41100
+ position: relative;
40896
41101
  }
40897
41102
 
40898
- .cds--slug__button--inline.cds--slug__button--md .cds--slug__additional-text {
40899
- font-size: 0.875rem;
41103
+ .cds--slider-text-input-wrapper--hidden {
41104
+ display: none;
40900
41105
  }
40901
41106
 
40902
- .cds--slug .cds--slug__button--inline-with-content:focus,
40903
- .cds--slug .cds--slug__button--inline-with-content:hover:focus {
40904
- 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;
40905
41118
  }
40906
41119
 
40907
- .cds--slug .cds--slug-content {
40908
- 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;
40909
- border: 1px solid transparent;
40910
- border-radius: 0.5rem;
40911
- 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));
40912
- color: var(--cds-text-primary, #161616);
40913
- 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);
40914
41123
  }
40915
41124
 
40916
- .cds--slug > .cds--toggletip > .cds--popover > .cds--popover-caret,
40917
- .cds--slug > .cds--toggletip.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
40918
- background: transparent;
40919
- 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;
40920
41129
  }
40921
41130
 
40922
- .cds--slug > .cds--toggletip:is(.cds--popover--top,
40923
- .cds--popover--top-right,
40924
- .cds--popover--top-left,
40925
- .cds--popover--top-end,
40926
- .cds--popover--top-start,
40927
- .cds--popover--bottom,
40928
- .cds--popover--bottom-right,
40929
- .cds--popover--bottom-left,
40930
- .cds--popover--bottom-start,
40931
- .cds--popover--bottom-end,
40932
- .cds--popover--left,
40933
- .cds--popover--left-top,
40934
- .cds--popover--left-bottom,
40935
- .cds--popover--left-start,
40936
- .cds--popover--left-end,
40937
- .cds--popover--right,
40938
- .cds--popover--right-top,
40939
- .cds--popover--right-bottom,
40940
- .cds--popover--right-start,
40941
- .cds--popover--right-end) > .cds--popover > .cds--popover-caret::before,
40942
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
40943
- .cds--popover--top-right,
40944
- .cds--popover--top-left,
40945
- .cds--popover--top-end,
40946
- .cds--popover--top-start,
40947
- .cds--popover--bottom,
40948
- .cds--popover--bottom-right,
40949
- .cds--popover--bottom-left,
40950
- .cds--popover--bottom-start,
40951
- .cds--popover--bottom-end,
40952
- .cds--popover--left,
40953
- .cds--popover--left-top,
40954
- .cds--popover--left-bottom,
40955
- .cds--popover--left-start,
40956
- .cds--popover--left-end,
40957
- .cds--popover--right,
40958
- .cds--popover--right-top,
40959
- .cds--popover--right-bottom,
40960
- .cds--popover--right-start,
40961
- .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41131
+ .cds--slider__invalid-icon {
40962
41132
  position: absolute;
40963
- display: block;
40964
- border: 1px solid var(--cds-ai-border-start, rgba(166, 200, 255, 0.64));
40965
- background: var(--cds-background, #ffffff);
40966
- block-size: 0.75rem;
40967
- clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
40968
- content: "";
40969
- inline-size: 0.75rem;
40970
- transform: rotate(45deg);
41133
+ fill: var(--cds-support-error, #da1e28);
41134
+ inset-block-start: 50%;
41135
+ inset-inline-end: 1rem;
41136
+ transform: translateY(-50%);
40971
41137
  }
40972
41138
 
40973
- .cds--slug > .cds--toggletip:is(.cds--popover--top,
40974
- .cds--popover--top-right,
40975
- .cds--popover--top-left,
40976
- .cds--popover--top-end,
40977
- .cds--popover--top-start,
40978
- .cds--popover--bottom,
40979
- .cds--popover--bottom-right,
40980
- .cds--popover--bottom-left,
40981
- .cds--popover--bottom-start,
40982
- .cds--popover--bottom-end,
40983
- .cds--popover--left,
40984
- .cds--popover--left-top,
40985
- .cds--popover--left-bottom,
40986
- .cds--popover--left-start,
40987
- .cds--popover--left-end,
40988
- .cds--popover--right,
40989
- .cds--popover--right-top,
40990
- .cds--popover--right-bottom,
40991
- .cds--popover--right-start,
40992
- .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
40993
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
40994
- .cds--popover--top-right,
40995
- .cds--popover--top-left,
40996
- .cds--popover--top-end,
40997
- .cds--popover--top-start,
40998
- .cds--popover--bottom,
40999
- .cds--popover--bottom-right,
41000
- .cds--popover--bottom-left,
41001
- .cds--popover--bottom-start,
41002
- .cds--popover--bottom-end,
41003
- .cds--popover--left,
41004
- .cds--popover--left-top,
41005
- .cds--popover--left-bottom,
41006
- .cds--popover--left-start,
41007
- .cds--popover--left-end,
41008
- .cds--popover--right,
41009
- .cds--popover--right-top,
41010
- .cds--popover--right-bottom,
41011
- .cds--popover--right-start,
41012
- .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41013
- position: absolute;
41139
+ .cds--slider__validation-msg.cds--form-requirement {
41014
41140
  display: block;
41015
- background: var(--cds-background, #ffffff);
41016
- block-size: 0.875rem;
41017
- content: "";
41018
- inline-size: 0.125rem;
41141
+ overflow: visible;
41142
+ max-block-size: 100%;
41019
41143
  }
41020
41144
 
41021
- .cds--slug > .cds--toggletip:is(.cds--popover--top,
41022
- .cds--popover--top-right,
41023
- .cds--popover--top-left,
41024
- .cds--popover--top-end,
41025
- .cds--popover--top-start) > .cds--popover > .cds--popover-caret::before,
41026
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
41027
- .cds--popover--top-right,
41028
- .cds--popover--top-left,
41029
- .cds--popover--top-end,
41030
- .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41031
- inset-block-end: 0.0625rem;
41032
- transform: rotate(-135deg);
41145
+ .cds--slider__validation-msg--invalid {
41146
+ color: var(--cds-text-error, #da1e28);
41033
41147
  }
41034
- .cds--slug > .cds--toggletip:is(.cds--popover--top,
41035
- .cds--popover--top-right,
41036
- .cds--popover--top-left,
41037
- .cds--popover--top-end,
41038
- .cds--popover--top-start) > .cds--popover > .cds--popover-caret::after,
41039
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
41040
- .cds--popover--top-right,
41041
- .cds--popover--top-left,
41042
- .cds--popover--top-end,
41043
- .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41044
- background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
41045
- block-size: 0.125rem;
41046
- border-end-end-radius: 50%;
41047
- border-end-start-radius: 50%;
41048
- inline-size: 0.875rem;
41049
- inset-block-start: -0.125rem;
41050
- inset-inline-start: -0.0625rem;
41148
+
41149
+ .cds--slider__invalid-icon.cds--slider__invalid-icon--warning {
41150
+ fill: var(--cds-support-warning, #f1c21b);
41051
41151
  }
41052
41152
 
41053
- .cds--slug > .cds--toggletip:is(.cds--popover--top,
41054
- .cds--popover--top-right,
41055
- .cds--popover--top-left,
41056
- .cds--popover--top-end,
41057
- .cds--popover--top-start) > .cds--popover > .cds--slug-content--with-actions + .cds--popover-caret::after {
41058
- display: none;
41153
+ .cds--slider__invalid-icon--warning path:first-of-type {
41154
+ fill: #000000;
41155
+ opacity: 1;
41059
41156
  }
41060
41157
 
41061
- .cds--slug > .cds--toggletip:is(.cds--popover--right,
41062
- .cds--popover--right-bottom,
41063
- .cds--popover--right-top,
41064
- .cds--popover--right-start,
41065
- .cds--popover--right-end) > .cds--popover > .cds--popover-caret::before,
41066
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right,
41067
- .cds--popover--right-bottom,
41068
- .cds--popover--right-top,
41069
- .cds--popover--right-start,
41070
- .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41071
- inset-inline-start: 0.0625rem;
41072
- 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));
41073
41160
  }
41074
- .cds--slug > .cds--toggletip:is(.cds--popover--right,
41075
- .cds--popover--right-bottom,
41076
- .cds--popover--right-top,
41077
- .cds--popover--right-start,
41078
- .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
41079
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right,
41080
- .cds--popover--right-bottom,
41081
- .cds--popover--right-top,
41082
- .cds--popover--right-start,
41083
- .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41084
- border-end-start-radius: 50%;
41085
- border-start-start-radius: 50%;
41086
- inset-block-start: -0.0625rem;
41087
- inset-inline-start: 0.375rem;
41161
+
41162
+ .cds--slider--disabled.cds--slider {
41163
+ cursor: not-allowed;
41088
41164
  }
41089
41165
 
41090
- .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
41091
- .cds--popover--bottom-left,
41092
- .cds--popover--bottom-right,
41093
- .cds--popover--bottom-start,
41094
- .cds--popover--bottom-end) > .cds--popover > .cds--popover-caret::before,
41095
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom,
41096
- .cds--popover--bottom-left,
41097
- .cds--popover--bottom-right,
41098
- .cds--popover--bottom-start,
41099
- .cds--popover--bottom-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41100
- inset-block-start: 0.0625rem;
41101
- transform: rotate(45deg);
41166
+ .cds--slider--disabled .cds--slider__thumb {
41167
+ background-color: var(--cds-border-disabled, #c6c6c6);
41102
41168
  }
41103
- .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
41104
- .cds--popover--bottom-left,
41105
- .cds--popover--bottom-right,
41106
- .cds--popover--bottom-start,
41107
- .cds--popover--bottom-end) > .cds--popover > .cds--popover-caret::after,
41108
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom,
41109
- .cds--popover--bottom-left,
41110
- .cds--popover--bottom-right,
41111
- .cds--popover--bottom-start,
41112
- .cds--popover--bottom-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41113
- block-size: 0.125rem;
41114
- border-start-end-radius: 50%;
41115
- border-start-start-radius: 50%;
41116
- inline-size: 0.875rem;
41117
- inset-block-end: -0.15625rem;
41118
- inset-inline-start: -0.0625rem;
41169
+ .cds--slider--disabled .cds--slider__thumb:hover {
41170
+ cursor: not-allowed;
41171
+ transform: translate(-50%, -50%);
41119
41172
  }
41120
-
41121
- .cds--slug > .cds--toggletip:is(.cds--popover--left,
41122
- .cds--popover--left-bottom,
41123
- .cds--popover--left-top,
41124
- .cds--popover--left-start,
41125
- .cds--popover--left-end) > .cds--popover > .cds--popover-caret::before,
41126
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
41127
- .cds--popover--left-bottom,
41128
- .cds--popover--left-top,
41129
- .cds--popover--left-start,
41130
- .cds--popover--left-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41131
- inset-inline-end: 0.0625rem;
41132
- 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%);
41133
41178
  }
41134
- .cds--slug > .cds--toggletip:is(.cds--popover--left,
41135
- .cds--popover--left-bottom,
41136
- .cds--popover--left-top,
41137
- .cds--popover--left-start,
41138
- .cds--popover--left-end) > .cds--popover > .cds--popover-caret::after,
41139
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
41140
- .cds--popover--left-bottom,
41141
- .cds--popover--left-top,
41142
- .cds--popover--left-start,
41143
- .cds--popover--left-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41144
- border-end-end-radius: 50%;
41145
- border-start-end-radius: 50%;
41146
- inset-block-start: -0.0625rem;
41147
- 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%);
41148
41182
  }
41149
41183
 
41150
- .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
41151
- .cds--popover--right-bottom,
41152
- .cds--popover--left-end,
41153
- .cds--popover--right-end) > .cds--popover > .cds--popover-caret::after,
41154
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
41155
- .cds--popover--right-bottom,
41156
- .cds--popover--left-end,
41157
- .cds--popover--right-end) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
41158
- 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);
41159
41188
  }
41160
41189
 
41161
- .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
41162
- .cds--popover--right-bottom,
41163
- .cds--popover--left-end,
41164
- .cds--popover--right-end,
41165
- .cds--popover--top,
41166
- .cds--popover--top-right,
41167
- .cds--popover--top-left,
41168
- .cds--popover--top-end,
41169
- .cds--popover--top-start) > .cds--popover > .cds--popover-caret::before,
41170
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
41171
- .cds--popover--right-bottom,
41172
- .cds--popover--left-end,
41173
- .cds--popover--right-end,
41174
- .cds--popover--top,
41175
- .cds--popover--top-right,
41176
- .cds--popover--top-left,
41177
- .cds--popover--top-end,
41178
- .cds--popover--top-start) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41179
- border-color: var(--cds-ai-popover-caret-bottom, #78a9ff);
41180
- 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;
41181
41204
  }
41182
41205
 
41183
- .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
41184
- .cds--popover--right-bottom,
41185
- .cds--popover--left-end,
41186
- .cds--popover--right-end,
41187
- .cds--popover--top,
41188
- .cds--popover--top-right,
41189
- .cds--popover--top-left,
41190
- .cds--popover--top-end,
41191
- .cds--popover--top-start) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before,
41192
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
41193
- .cds--popover--right-bottom,
41194
- .cds--popover--left-end,
41195
- .cds--popover--right-end,
41196
- .cds--popover--top,
41197
- .cds--popover--top-right,
41198
- .cds--popover--top-left,
41199
- .cds--popover--top-start,
41200
- .cds--popover--top-end) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-content > .cds--popover-caret::before {
41201
- background: var(--cds-ai-popover-caret-bottom-background-actions, #e9effa);
41206
+ .cds--slider--readonly {
41207
+ cursor: default;
41202
41208
  }
41203
41209
 
41204
- .cds--slug > .cds--toggletip:is(.cds--popover--left,
41205
- .cds--popover--right) > .cds--popover > .cds--popover-caret::before,
41206
- .cds--slug > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
41207
- .cds--popover--right) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
41208
- 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;
41209
41216
  }
41210
41217
 
41211
- .cds--slug .cds--toggletip-content {
41212
- padding-block-end: 5rem;
41213
- padding-block-start: 1.5rem;
41214
- padding-inline: 1.5rem;
41218
+ .cds--slider-container--readonly .cds--slider-text-input {
41219
+ background-color: transparent;
41215
41220
  }
41216
41221
 
41217
- .cds--slug .cds--slug-content .cds--toggletip-content {
41218
- max-inline-size: 20rem;
41222
+ .cds--slider__status-msg.cds--form-requirement {
41223
+ display: block;
41224
+ overflow: visible;
41225
+ max-block-size: 100%;
41219
41226
  }
41220
41227
 
41221
- .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 {
41222
41244
  position: absolute;
41223
- justify-content: flex-end;
41224
- backdrop-filter: blur(85px);
41225
- background: rgba(0, 0, 0, 0.01);
41226
- border-end-end-radius: 0.5rem;
41227
- border-end-start-radius: 0.5rem;
41228
- 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: "";
41229
41249
  inline-size: 100%;
41230
- inset-block-end: 0;
41231
- 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
+ }
41232
41256
  }
41233
41257
 
41234
- .cds--slug .cds--slug-actions .cds--btn:focus {
41235
- border-color: var(--cds-focus, #0f62fe);
41236
- 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;
41237
41261
  }
41238
41262
 
41239
- .cds--slug .cds--slug-actions .cds--btn--primary {
41240
- order: 1;
41241
- 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%;
41242
41275
  }
41243
41276
 
41244
- .cds--slug.cds--slug--revert {
41245
- transform: translate(0.5rem, -50%);
41277
+ .cds--popover-container.cds--slider__thumb-wrapper {
41278
+ position: absolute;
41246
41279
  }
41247
41280
 
41248
- .cds--slug--revert .cds--btn--icon-only {
41249
- align-items: center;
41250
- 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
+ }
41251
41286
  }
41252
41287
 
41253
- .cds--slug--revert .cds--btn--icon-only svg {
41254
- 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
+ }
41255
41293
  }
41256
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 */
41257
41302
  .cds--stack-horizontal {
41258
41303
  display: inline-grid;
41259
41304
  column-gap: var(--cds-stack-gap, 0);
@@ -42170,22 +42215,6 @@ span.cds--pagination__text.cds--pagination__items-count {
42170
42215
  .cds--tabs--contained ~ .cds--tab-content {
42171
42216
  background: var(--cds-layer);
42172
42217
  }
42173
- .cds--tabs--contained ~ .cds--tab-content > * {
42174
- --cds-layer: var(--cds-layer-02, #ffffff);
42175
- --cds-layer-active: var(--cds-layer-active-02, #c6c6c6);
42176
- --cds-layer-hover: var(--cds-layer-hover-02, #e8e8e8);
42177
- --cds-layer-selected: var(--cds-layer-selected-02, #e0e0e0);
42178
- --cds-layer-selected-hover: var(--cds-layer-selected-hover-02, #d1d1d1);
42179
- --cds-layer-accent: var(--cds-layer-accent-02, #e0e0e0);
42180
- --cds-layer-accent-hover: var(--cds-layer-accent-hover-02, #d1d1d1);
42181
- --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
42182
- --cds-field: var(--cds-field-02, #ffffff);
42183
- --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
42184
- --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
42185
- --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
42186
- --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
42187
- --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
42188
- }
42189
42218
 
42190
42219
  .cds--tabs--vertical ~ .cds--tab-content {
42191
42220
  grid-column: 3/-1;
@@ -43799,6 +43828,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
43799
43828
  border-inline-end: 1px solid var(--cds-border-subtle);
43800
43829
  border-inline-start: 1px solid var(--cds-border-subtle);
43801
43830
  inline-size: 16rem;
43831
+ overflow-y: auto;
43802
43832
  }
43803
43833
 
43804
43834
  .cds--side-nav {
@@ -44816,6 +44846,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
44816
44846
  border-inline-end: 1px solid var(--cds-border-subtle);
44817
44847
  border-inline-start: 1px solid var(--cds-border-subtle);
44818
44848
  inline-size: 16rem;
44849
+ overflow-y: auto;
44819
44850
  }
44820
44851
 
44821
44852
  .cds--side-nav {