@carbon/styles 1.53.1 → 1.54.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/css/styles.css CHANGED
@@ -4028,10 +4028,13 @@ li.cds--accordion__item--disabled:last-of-type {
4028
4028
  }
4029
4029
 
4030
4030
  .cds--popover-container {
4031
- position: relative;
4032
4031
  display: inline-block;
4033
4032
  }
4034
4033
 
4034
+ .cds--popover-container:not(.cds--popover--auto-align) {
4035
+ position: relative;
4036
+ }
4037
+
4035
4038
  .cds--popover--high-contrast .cds--popover {
4036
4039
  --cds-popover-background-color: var(--cds-background-inverse, #393939);
4037
4040
  --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
@@ -4104,7 +4107,8 @@ li.cds--accordion__item--disabled:last-of-type {
4104
4107
  display: block;
4105
4108
  }
4106
4109
 
4107
- .cds--popover-caret {
4110
+ .cds--popover-caret,
4111
+ .cds--popover--auto-align.cds--popover-caret {
4108
4112
  position: absolute;
4109
4113
  z-index: 6000;
4110
4114
  display: none;
@@ -4116,44 +4120,54 @@ li.cds--accordion__item--disabled:last-of-type {
4116
4120
  display: block;
4117
4121
  }
4118
4122
 
4123
+ .cds--popover--auto-align.cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-content > .cds--popover-caret {
4124
+ display: block;
4125
+ }
4126
+
4119
4127
  .cds--popover--tab-tip > .cds--popover > .cds--popover-caret {
4120
4128
  display: none;
4121
4129
  }
4122
4130
 
4123
- .cds--popover--bottom > .cds--popover > .cds--popover-content {
4131
+ .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4124
4132
  inset-block-end: 0;
4125
4133
  inset-inline-start: 50%;
4126
4134
  transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
4127
4135
  }
4128
4136
 
4129
- [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-content {
4137
+ [dir=rtl] .cds--popover--bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4130
4138
  transform: translate(50%, calc(100% + var(--cds-popover-offset, 0rem)));
4131
4139
  }
4132
4140
 
4133
- .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
4141
+ .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4142
+ .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4134
4143
  inset-block-end: 0;
4135
4144
  inset-inline-start: 0;
4136
4145
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
4137
4146
  }
4138
4147
 
4139
- [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-content {
4148
+ [dir=rtl] .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4149
+ [dir=rtl] .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4140
4150
  inset-inline-end: 0;
4141
4151
  inset-inline-start: initial;
4142
4152
  }
4143
4153
 
4144
- .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
4154
+ .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4155
+ .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4145
4156
  inset-block-end: 0;
4146
4157
  inset-inline-end: 0;
4147
4158
  transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
4148
4159
  }
4149
4160
 
4150
- [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-content {
4161
+ [dir=rtl] .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4162
+ [dir=rtl] .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4151
4163
  inset-inline-start: 0;
4152
4164
  }
4153
4165
 
4154
4166
  .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
4155
4167
  .cds--popover--bottom-left > .cds--popover > .cds--popover-content::before,
4156
- .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before {
4168
+ .cds--popover--bottom-start > .cds--popover > .cds--popover-content::before,
4169
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-content::before,
4170
+ .cds--popover--bottom-end > .cds--popover > .cds--popover-content::before {
4157
4171
  block-size: var(--cds-popover-offset, 0rem);
4158
4172
  inset-block-start: 0;
4159
4173
  inset-inline-end: 0;
@@ -4163,7 +4177,9 @@ li.cds--accordion__item--disabled:last-of-type {
4163
4177
 
4164
4178
  .cds--popover--bottom > .cds--popover > .cds--popover-caret,
4165
4179
  .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
4166
- .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
4180
+ .cds--popover--bottom-start > .cds--popover > .cds--popover-caret,
4181
+ .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
4182
+ .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
4167
4183
  block-size: var(--cds-popover-caret-height, 0.375rem);
4168
4184
  -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
4169
4185
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
@@ -4175,44 +4191,63 @@ li.cds--accordion__item--disabled:last-of-type {
4175
4191
 
4176
4192
  [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret,
4177
4193
  [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
4178
- [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret {
4194
+ [dir=rtl] .cds--popover--bottom-start > .cds--popover > .cds--popover-caret,
4195
+ [dir=rtl] .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
4196
+ [dir=rtl] .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
4179
4197
  transform: translate(50%, var(--cds-popover-offset, 0rem));
4180
4198
  }
4181
4199
 
4182
- .cds--popover--top > .cds--popover > .cds--popover-content {
4200
+ .cds--popover--bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4201
+ .cds--popover--bottom-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4202
+ .cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4203
+ .cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4204
+ .cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
4205
+ block-size: var(--cds-popover-caret-height, 0.375rem);
4206
+ -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
4207
+ clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
4208
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
4209
+ }
4210
+
4211
+ .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4183
4212
  inset-block-start: 0;
4184
4213
  inset-inline-start: 50%;
4185
4214
  transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
4186
4215
  }
4187
4216
 
4188
- [dir=rtl] .cds--popover--top > .cds--popover > .cds--popover-content {
4217
+ [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4189
4218
  transform: translate(50%, calc(-100% - var(--cds-popover-offset, 0rem)));
4190
4219
  }
4191
4220
 
4192
- .cds--popover--top-left > .cds--popover > .cds--popover-content {
4221
+ .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4222
+ .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4193
4223
  inset-block-start: 0;
4194
4224
  inset-inline-start: 0;
4195
4225
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
4196
4226
  }
4197
4227
 
4198
- [dir=rtl] .cds--popover--top-left > .cds--popover > .cds--popover-content {
4228
+ [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4229
+ [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4199
4230
  inset-inline-end: 0;
4200
4231
  inset-inline-start: initial;
4201
4232
  }
4202
4233
 
4203
- .cds--popover--top-right > .cds--popover > .cds--popover-content {
4234
+ .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4235
+ .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4204
4236
  inset-block-start: 0;
4205
4237
  inset-inline-end: 0;
4206
4238
  transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
4207
4239
  }
4208
4240
 
4209
- [dir=rtl] .cds--popover--top-right > .cds--popover > .cds--popover-content {
4241
+ [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4242
+ [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4210
4243
  inset-inline-start: 0;
4211
4244
  }
4212
4245
 
4213
4246
  .cds--popover--top > .cds--popover > .cds--popover-content::before,
4214
4247
  .cds--popover--top-left > .cds--popover > .cds--popover-content::before,
4215
- .cds--popover--top-right > .cds--popover > .cds--popover-content::before {
4248
+ .cds--popover--top-start > .cds--popover > .cds--popover-content::before,
4249
+ .cds--popover--top-right > .cds--popover > .cds--popover-content::before,
4250
+ .cds--popover--top-end > .cds--popover > .cds--popover-content::before {
4216
4251
  block-size: var(--cds-popover-offset, 0rem);
4217
4252
  inset-block-end: 0;
4218
4253
  inset-inline-end: 0;
@@ -4222,7 +4257,9 @@ li.cds--accordion__item--disabled:last-of-type {
4222
4257
 
4223
4258
  .cds--popover--top > .cds--popover > .cds--popover-caret,
4224
4259
  .cds--popover--top-left > .cds--popover > .cds--popover-caret,
4225
- .cds--popover--top-right > .cds--popover > .cds--popover-caret {
4260
+ .cds--popover--top-start > .cds--popover > .cds--popover-caret,
4261
+ .cds--popover--top-right > .cds--popover > .cds--popover-caret,
4262
+ .cds--popover--top-end > .cds--popover > .cds--popover-caret {
4226
4263
  block-size: var(--cds-popover-caret-height, 0.375rem);
4227
4264
  -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
4228
4265
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
@@ -4232,40 +4269,59 @@ li.cds--accordion__item--disabled:last-of-type {
4232
4269
  transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
4233
4270
  }
4234
4271
 
4235
- [dir=rtl] .cds--popover--top > .cds--popover > .cds--popover-caret,
4236
- [dir=rtl] .cds--popover--top-left > .cds--popover > .cds--popover-caret,
4237
- [dir=rtl] .cds--popover--top-right > .cds--popover > .cds--popover-caret {
4272
+ [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4273
+ [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4274
+ [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4275
+ [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4276
+ [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
4238
4277
  transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
4239
4278
  }
4240
4279
 
4241
- .cds--popover--right > .cds--popover > .cds--popover-content {
4280
+ .cds--popover--top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4281
+ .cds--popover--top-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4282
+ .cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4283
+ .cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4284
+ .cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
4285
+ block-size: var(--cds-popover-caret-height, 0.375rem);
4286
+ -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
4287
+ clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
4288
+ inline-size: var(--cds-popover-caret-width, 0.75rem);
4289
+ }
4290
+
4291
+ .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4242
4292
  inset-block-start: 50%;
4243
4293
  inset-inline-start: 100%;
4244
4294
  transform: translate(var(--cds-popover-offset, 0rem), -50%);
4245
4295
  }
4246
4296
 
4247
- .cds--popover--right-top > .cds--popover > .cds--popover-content {
4297
+ .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4298
+ .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4248
4299
  inset-block-start: 50%;
4249
4300
  inset-inline-start: 100%;
4250
4301
  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
4251
4302
  }
4252
4303
 
4253
- .cds--popover--right-bottom > .cds--popover > .cds--popover-content {
4304
+ .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4305
+ .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4254
4306
  inset-block-end: 50%;
4255
4307
  inset-inline-start: 100%;
4256
4308
  transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
4257
4309
  }
4258
4310
 
4259
- [dir=rtl] .cds--popover--right > .cds--popover > .cds--popover-content,
4260
- [dir=rtl] .cds--popover--right-bottom > .cds--popover > .cds--popover-content,
4261
- [dir=rtl] .cds--popover--right-top > .cds--popover > .cds--popover-content {
4311
+ [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4312
+ [dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4313
+ [dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4314
+ [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4315
+ [dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4262
4316
  inset-inline-end: 100%;
4263
4317
  inset-inline-start: initial;
4264
4318
  }
4265
4319
 
4266
4320
  .cds--popover--right > .cds--popover > .cds--popover-content::before,
4267
4321
  .cds--popover--right-top > .cds--popover > .cds--popover-content::before,
4268
- .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before {
4322
+ .cds--popover--right-start > .cds--popover > .cds--popover-content::before,
4323
+ .cds--popover--right-bottom > .cds--popover > .cds--popover-content::before,
4324
+ .cds--popover--right-end > .cds--popover > .cds--popover-content::before {
4269
4325
  inline-size: var(--cds-popover-offset, 0rem);
4270
4326
  inset-block-end: 0;
4271
4327
  inset-block-start: 0;
@@ -4273,9 +4329,11 @@ li.cds--accordion__item--disabled:last-of-type {
4273
4329
  transform: translateX(-100%);
4274
4330
  }
4275
4331
 
4276
- .cds--popover--right > .cds--popover > .cds--popover-caret,
4277
- .cds--popover--right-top > .cds--popover > .cds--popover-caret,
4278
- .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
4332
+ .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4333
+ .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4334
+ .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4335
+ .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4336
+ .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
4279
4337
  block-size: var(--cds-popover-caret-width, 0.75rem);
4280
4338
  -webkit-clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
4281
4339
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
@@ -4285,41 +4343,60 @@ li.cds--accordion__item--disabled:last-of-type {
4285
4343
  transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
4286
4344
  }
4287
4345
 
4288
- [dir=rtl] .cds--popover--right > .cds--popover > .cds--popover-caret,
4289
- [dir=rtl] .cds--popover--right-top > .cds--popover > .cds--popover-caret,
4290
- [dir=rtl] .cds--popover--right-bottom > .cds--popover > .cds--popover-caret {
4346
+ [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4347
+ [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4348
+ [dir=rtl] .cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4349
+ [dir=rtl] .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4350
+ [dir=rtl] .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
4291
4351
  inset-inline-end: 100%;
4292
4352
  inset-inline-start: initial;
4293
4353
  }
4294
4354
 
4295
- .cds--popover--left > .cds--popover > .cds--popover-content {
4355
+ .cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4356
+ .cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4357
+ .cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4358
+ .cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4359
+ .cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
4360
+ block-size: var(--cds-popover-caret-width, 0.75rem);
4361
+ -webkit-clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
4362
+ clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
4363
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
4364
+ }
4365
+
4366
+ .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4296
4367
  inset-block-start: 50%;
4297
4368
  inset-inline-end: 100%;
4298
4369
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
4299
4370
  }
4300
4371
 
4301
- .cds--popover--left-top > .cds--popover > .cds--popover-content {
4372
+ .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4373
+ .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4302
4374
  inset-block-start: 50%;
4303
4375
  inset-inline-end: 100%;
4304
4376
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) - 16px));
4305
4377
  }
4306
4378
 
4307
- .cds--popover--left-bottom > .cds--popover > .cds--popover-content {
4379
+ .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4380
+ .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4308
4381
  inset-block-end: 50%;
4309
4382
  inset-inline-end: 100%;
4310
4383
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
4311
4384
  }
4312
4385
 
4313
- [dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-content,
4314
- [dir=rtl] .cds--popover--left-bottom > .cds--popover > .cds--popover-content,
4315
- [dir=rtl] .cds--popover--left-top > .cds--popover > .cds--popover-content {
4386
+ [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4387
+ [dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4388
+ [dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4389
+ [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
4390
+ [dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
4316
4391
  inset-inline-end: initial;
4317
4392
  inset-inline-start: 100%;
4318
4393
  }
4319
4394
 
4320
4395
  .cds--popover--left > .cds--popover > .cds--popover-content::before,
4321
4396
  .cds--popover--left-top > .cds--popover > .cds--popover-content::before,
4322
- .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before {
4397
+ .cds--popover--left-start > .cds--popover > .cds--popover-content::before,
4398
+ .cds--popover--left-bottom > .cds--popover > .cds--popover-content::before,
4399
+ .cds--popover--left-end > .cds--popover > .cds--popover-content::before {
4323
4400
  inline-size: var(--cds-popover-offset, 0rem);
4324
4401
  inset-block-end: 0;
4325
4402
  inset-block-start: 0;
@@ -4327,9 +4404,11 @@ li.cds--accordion__item--disabled:last-of-type {
4327
4404
  transform: translateX(100%);
4328
4405
  }
4329
4406
 
4330
- .cds--popover--left > .cds--popover > .cds--popover-caret,
4331
- .cds--popover--left-top > .cds--popover > .cds--popover-caret,
4332
- .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
4407
+ .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4408
+ .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4409
+ .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4410
+ .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4411
+ .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
4333
4412
  block-size: var(--cds-popover-caret-width, 0.75rem);
4334
4413
  -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
4335
4414
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
@@ -4339,13 +4418,26 @@ li.cds--accordion__item--disabled:last-of-type {
4339
4418
  transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
4340
4419
  }
4341
4420
 
4342
- [dir=rtl] .cds--popover--left > .cds--popover > .cds--popover-caret,
4343
- [dir=rtl] .cds--popover--left-top > .cds--popover > .cds--popover-caret,
4344
- [dir=rtl] .cds--popover--left-bottom > .cds--popover > .cds--popover-caret {
4421
+ [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4422
+ [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4423
+ [dir=rtl] .cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4424
+ [dir=rtl] .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
4425
+ [dir=rtl] .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
4345
4426
  inset-inline-end: initial;
4346
4427
  inset-inline-start: 100%;
4347
4428
  }
4348
4429
 
4430
+ .cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4431
+ .cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4432
+ .cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4433
+ .cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
4434
+ .cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
4435
+ block-size: var(--cds-popover-caret-width, 0.75rem);
4436
+ -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
4437
+ clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
4438
+ inline-size: var(--cds-popover-caret-height, 0.375rem);
4439
+ }
4440
+
4349
4441
  .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
4350
4442
  border-radius: 0;
4351
4443
  }
@@ -5597,10 +5689,10 @@ a.cds--overflow-menu-options__btn::before {
5597
5689
  }
5598
5690
  }
5599
5691
  .cds--link:visited {
5600
- color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
5692
+ color: var(--cds-link-text-color, var(--cds-link-primary, #0f62fe));
5601
5693
  }
5602
5694
  .cds--link:visited:hover {
5603
- color: var(--cds-link-visited-text-color, var(--cds-link-visited, #8a3ffc));
5695
+ color: var(--cds-link-hover-text-color, var(--cds-link-primary-hover, #0043ce));
5604
5696
  }
5605
5697
 
5606
5698
  .cds--link--disabled,
@@ -9174,11 +9266,11 @@ fieldset[disabled] .cds--form__helper-text {
9174
9266
  }
9175
9267
 
9176
9268
  .cds--list-box__wrapper--slug:has(.cds--multi-select) .cds--list-box__menu-icon {
9177
- inset-inline-end: calc(0.75rem - 4px);
9269
+ inset-inline-end: 0.75rem;
9178
9270
  }
9179
9271
 
9180
9272
  .cds--list-box__wrapper--slug:has(.cds--dropdown) .cds--list-box__menu-icon {
9181
- inset-inline-end: calc(0.75rem - 4px);
9273
+ inset-inline-end: 0.75rem;
9182
9274
  }
9183
9275
 
9184
9276
  .cds--combo-box:hover {
@@ -11810,8 +11902,9 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
11810
11902
  background-color: var(--cds-field-hover);
11811
11903
  }
11812
11904
 
11905
+ .cds--toolbar-action[aria-expanded=true],
11813
11906
  .cds--toolbar-action:hover[aria-expanded=true] {
11814
- background-color: var(--cds-layer);
11907
+ background-color: var(--cds-layer-02, #ffffff);
11815
11908
  }
11816
11909
 
11817
11910
  .cds--toolbar-action[disabled] {
@@ -11856,6 +11949,11 @@ tr.cds--parent-row:not(.cds--expandable-row):not(:first-of-type) td.cds--table-c
11856
11949
  max-inline-size: 1rem;
11857
11950
  }
11858
11951
 
11952
+ .cds--toolbar-action__menu,
11953
+ .cds--toolbar-action__menu.cds--overflow-menu-options::after {
11954
+ background-color: var(--cds-layer-02, #ffffff);
11955
+ }
11956
+
11859
11957
  .cds--toolbar-search-container-persistent {
11860
11958
  position: relative;
11861
11959
  block-size: 3rem;
@@ -13588,6 +13686,7 @@ th .cds--table-sort__flex {
13588
13686
 
13589
13687
  .cds--date-picker__input:disabled ~ .cds--date-picker__icon {
13590
13688
  cursor: not-allowed;
13689
+ fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
13591
13690
  }
13592
13691
 
13593
13692
  .cds--date-picker--range > .cds--date-picker-container:first-child {
@@ -21230,7 +21329,8 @@ span.cds--pagination__text.cds--pagination__items-count {
21230
21329
  min-inline-size: 17.5rem;
21231
21330
  }
21232
21331
 
21233
- .cds--slug > .cds--toggletip > .cds--popover > .cds--popover-caret {
21332
+ .cds--slug > .cds--toggletip > .cds--popover > .cds--popover-caret,
21333
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
21234
21334
  background: transparent;
21235
21335
  -webkit-clip-path: none;
21236
21336
  clip-path: none;
@@ -21247,7 +21347,19 @@ span.cds--pagination__text.cds--pagination__items-count {
21247
21347
  .cds--popover--left-bottom,
21248
21348
  .cds--popover--right,
21249
21349
  .cds--popover--right-top,
21250
- .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::before {
21350
+ .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::before,
21351
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
21352
+ .cds--popover--top-right,
21353
+ .cds--popover--top-left,
21354
+ .cds--popover--bottom,
21355
+ .cds--popover--bottom-right,
21356
+ .cds--popover--bottom-left,
21357
+ .cds--popover--left,
21358
+ .cds--popover--left-top,
21359
+ .cds--popover--left-bottom,
21360
+ .cds--popover--right,
21361
+ .cds--popover--right-top,
21362
+ .cds--popover--right-bottom) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
21251
21363
  position: absolute;
21252
21364
  display: block;
21253
21365
  border: 1px solid var(--cds-ai-border-start, rgba(166, 200, 255, 0.64));
@@ -21271,7 +21383,19 @@ span.cds--pagination__text.cds--pagination__items-count {
21271
21383
  .cds--popover--left-bottom,
21272
21384
  .cds--popover--right,
21273
21385
  .cds--popover--right-top,
21274
- .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
21386
+ .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after,
21387
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
21388
+ .cds--popover--top-right,
21389
+ .cds--popover--top-left,
21390
+ .cds--popover--bottom,
21391
+ .cds--popover--bottom-right,
21392
+ .cds--popover--bottom-left,
21393
+ .cds--popover--left,
21394
+ .cds--popover--left-top,
21395
+ .cds--popover--left-bottom,
21396
+ .cds--popover--right,
21397
+ .cds--popover--right-top,
21398
+ .cds--popover--right-bottom) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
21275
21399
  position: absolute;
21276
21400
  display: block;
21277
21401
  background: var(--cds-background, #ffffff);
@@ -21282,13 +21406,19 @@ span.cds--pagination__text.cds--pagination__items-count {
21282
21406
 
21283
21407
  .cds--slug > .cds--toggletip:is(.cds--popover--top,
21284
21408
  .cds--popover--top-right,
21285
- .cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
21409
+ .cds--popover--top-left) > .cds--popover > .cds--popover-caret::before,
21410
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
21411
+ .cds--popover--top-right,
21412
+ .cds--popover--top-left) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
21286
21413
  inset-block-end: 0.0625rem;
21287
21414
  transform: rotate(-135deg);
21288
21415
  }
21289
21416
  .cds--slug > .cds--toggletip:is(.cds--popover--top,
21290
21417
  .cds--popover--top-right,
21291
- .cds--popover--top-left) > .cds--popover > .cds--popover-caret::after {
21418
+ .cds--popover--top-left) > .cds--popover > .cds--popover-caret::after,
21419
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--top,
21420
+ .cds--popover--top-right,
21421
+ .cds--popover--top-left) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
21292
21422
  background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
21293
21423
  block-size: 0.125rem;
21294
21424
  border-end-end-radius: 50%;
@@ -21306,13 +21436,19 @@ span.cds--pagination__text.cds--pagination__items-count {
21306
21436
 
21307
21437
  .cds--slug > .cds--toggletip:is(.cds--popover--right,
21308
21438
  .cds--popover--right-bottom,
21309
- .cds--popover--right-top) > .cds--popover > .cds--popover-caret::before {
21439
+ .cds--popover--right-top) > .cds--popover > .cds--popover-caret::before,
21440
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right,
21441
+ .cds--popover--right-bottom,
21442
+ .cds--popover--right-top) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
21310
21443
  inset-inline-start: 0.0625rem;
21311
21444
  transform: rotate(-45deg);
21312
21445
  }
21313
21446
  .cds--slug > .cds--toggletip:is(.cds--popover--right,
21314
21447
  .cds--popover--right-bottom,
21315
- .cds--popover--right-top) > .cds--popover > .cds--popover-caret::after {
21448
+ .cds--popover--right-top) > .cds--popover > .cds--popover-caret::after,
21449
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--right,
21450
+ .cds--popover--right-bottom,
21451
+ .cds--popover--right-top) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
21316
21452
  border-end-start-radius: 50%;
21317
21453
  border-start-start-radius: 50%;
21318
21454
  inset-block-start: -0.0625rem;
@@ -21321,13 +21457,19 @@ span.cds--pagination__text.cds--pagination__items-count {
21321
21457
 
21322
21458
  .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
21323
21459
  .cds--popover--bottom-left,
21324
- .cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::before {
21460
+ .cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::before,
21461
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom,
21462
+ .cds--popover--bottom-left,
21463
+ .cds--popover--bottom-right) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
21325
21464
  inset-block-start: 0.0625rem;
21326
21465
  transform: rotate(45deg);
21327
21466
  }
21328
21467
  .cds--slug > .cds--toggletip:is(.cds--popover--bottom,
21329
21468
  .cds--popover--bottom-left,
21330
- .cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::after {
21469
+ .cds--popover--bottom-right) > .cds--popover > .cds--popover-caret::after,
21470
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--bottom,
21471
+ .cds--popover--bottom-left,
21472
+ .cds--popover--bottom-right) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
21331
21473
  block-size: 0.125rem;
21332
21474
  border-start-end-radius: 50%;
21333
21475
  border-start-start-radius: 50%;
@@ -21338,13 +21480,19 @@ span.cds--pagination__text.cds--pagination__items-count {
21338
21480
 
21339
21481
  .cds--slug > .cds--toggletip:is(.cds--popover--left,
21340
21482
  .cds--popover--left-bottom,
21341
- .cds--popover--left-top) > .cds--popover > .cds--popover-caret::before {
21483
+ .cds--popover--left-top) > .cds--popover > .cds--popover-caret::before,
21484
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
21485
+ .cds--popover--left-bottom,
21486
+ .cds--popover--left-top) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
21342
21487
  inset-inline-end: 0.0625rem;
21343
21488
  transform: rotate(135deg);
21344
21489
  }
21345
21490
  .cds--slug > .cds--toggletip:is(.cds--popover--left,
21346
21491
  .cds--popover--left-bottom,
21347
- .cds--popover--left-top) > .cds--popover > .cds--popover-caret::after {
21492
+ .cds--popover--left-top) > .cds--popover > .cds--popover-caret::after,
21493
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
21494
+ .cds--popover--left-bottom,
21495
+ .cds--popover--left-top) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
21348
21496
  border-end-end-radius: 50%;
21349
21497
  border-start-end-radius: 50%;
21350
21498
  inset-block-start: -0.0625rem;
@@ -21352,7 +21500,9 @@ span.cds--pagination__text.cds--pagination__items-count {
21352
21500
  }
21353
21501
 
21354
21502
  .cds--slug > .cds--toggletip:is(.cds--popover--left-bottom,
21355
- .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after {
21503
+ .cds--popover--right-bottom) > .cds--popover > .cds--popover-caret::after,
21504
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
21505
+ .cds--popover--right-bottom) > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
21356
21506
  background: transparent;
21357
21507
  }
21358
21508
 
@@ -21360,7 +21510,12 @@ span.cds--pagination__text.cds--pagination__items-count {
21360
21510
  .cds--popover--right-bottom,
21361
21511
  .cds--popover--top,
21362
21512
  .cds--popover--top-right,
21363
- .cds--popover--top-left) > .cds--popover > .cds--popover-caret::before {
21513
+ .cds--popover--top-left) > .cds--popover > .cds--popover-caret::before,
21514
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
21515
+ .cds--popover--right-bottom,
21516
+ .cds--popover--top,
21517
+ .cds--popover--top-right,
21518
+ .cds--popover--top-left) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
21364
21519
  border-color: var(--cds-ai-popover-caret-bottom, #78a9ff);
21365
21520
  background: var(--cds-ai-popover-caret-bottom-background, #eaf1ff);
21366
21521
  }
@@ -21369,12 +21524,19 @@ span.cds--pagination__text.cds--pagination__items-count {
21369
21524
  .cds--popover--right-bottom,
21370
21525
  .cds--popover--top,
21371
21526
  .cds--popover--top-right,
21372
- .cds--popover--top-left) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before {
21527
+ .cds--popover--top-left) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-caret::before,
21528
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left-bottom,
21529
+ .cds--popover--right-bottom,
21530
+ .cds--popover--top,
21531
+ .cds--popover--top-right,
21532
+ .cds--popover--top-left) > .cds--popover:has(.cds--slug-content--with-actions) > .cds--popover-content > .cds--popover-caret::before {
21373
21533
  background: var(--cds-ai-popover-caret-bottom-background-actions, #e9effa);
21374
21534
  }
21375
21535
 
21376
21536
  .cds--slug > .cds--toggletip:is(.cds--popover--left,
21377
- .cds--popover--right) > .cds--popover > .cds--popover-caret::before {
21537
+ .cds--popover--right) > .cds--popover > .cds--popover-caret::before,
21538
+ .cds--slug.cds--slug--enabled > .cds--toggletip.cds--popover--auto-align:is(.cds--popover--left,
21539
+ .cds--popover--right) > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
21378
21540
  border-color: var(--cds-ai-popover-caret-center, #a0c3ff);
21379
21541
  }
21380
21542
 
@@ -23290,7 +23452,8 @@ span.cds--pagination__text.cds--pagination__items-count {
23290
23452
  will-change: margin-left;
23291
23453
  }
23292
23454
 
23293
- .cds--header ~ .cds--content {
23455
+ .cds--header ~ .cds--content,
23456
+ div:has(.cds--header) ~ .cds--content {
23294
23457
  margin-block-start: 3rem;
23295
23458
  }
23296
23459
 
@@ -23748,8 +23911,8 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
23748
23911
  inset-block-start: 0;
23749
23912
  inset-inline-start: 0;
23750
23913
  max-inline-size: 16rem;
23751
- transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
23752
- will-change: width;
23914
+ transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
23915
+ will-change: inline-size;
23753
23916
  }
23754
23917
 
23755
23918
  .cds--side-nav--ux {
@@ -24318,7 +24481,8 @@ a.cds--side-nav__link--current::before {
24318
24481
  will-change: margin-left;
24319
24482
  }
24320
24483
 
24321
- .cds--header ~ .cds--content {
24484
+ .cds--header ~ .cds--content,
24485
+ div:has(.cds--header) ~ .cds--content {
24322
24486
  margin-block-start: 3rem;
24323
24487
  }
24324
24488
 
@@ -24776,8 +24940,8 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
24776
24940
  inset-block-start: 0;
24777
24941
  inset-inline-start: 0;
24778
24942
  max-inline-size: 16rem;
24779
- transition: width 0.11s cubic-bezier(0.2, 0, 1, 0.9);
24780
- will-change: width;
24943
+ transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9), transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
24944
+ will-change: inline-size;
24781
24945
  }
24782
24946
 
24783
24947
  .cds--side-nav--ux {