@carbon/styles 1.53.0 → 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.
Files changed (16) hide show
  1. package/css/styles.css +383 -300
  2. package/css/styles.min.css +1 -1
  3. package/package.json +4 -4
  4. package/scss/__tests__/theme-test.js +3 -7
  5. package/scss/components/data-table/_data-table.scss +1 -1
  6. package/scss/components/data-table/action/_data-table-action.scss +10 -1
  7. package/scss/components/date-picker/_date-picker.scss +1 -0
  8. package/scss/components/link/_link.scss +2 -2
  9. package/scss/components/list-box/_list-box.scss +2 -2
  10. package/scss/components/modal/_modal.scss +3 -2
  11. package/scss/components/popover/_popover.scss +296 -41
  12. package/scss/components/slug/_slug.scss +182 -143
  13. package/scss/components/tile/_tile.scss +1 -1
  14. package/scss/components/ui-shell/content/_content.scss +2 -1
  15. package/scss/components/ui-shell/side-nav/_side-nav.scss +3 -2
  16. package/scss/utilities/_ai-gradient.scss +8 -5
package/scss/components/popover/_popover.scss CHANGED
@@ -80,10 +80,16 @@ $popover-caret-height: custom-property.get-var(
80
80
  @mixin popover {
81
81
  // Container
82
82
  .#{$prefix}--popover-container {
83
- position: relative;
84
83
  display: inline-block;
85
84
  }
86
85
 
86
+ // Do not set position: relative on autoAlign popovers.
87
+ // Without this, autoAlign popovers will be clipped by containing elements
88
+ // (using overflow: hidden, etc) if position: relative is set on the container.
89
+ .#{$prefix}--popover-container:not(.#{$prefix}--popover--auto-align) {
90
+ position: relative;
91
+ }
92
+
87
93
  /// Modifiers
88
94
 
89
95
  // High contrast modifier
@@ -173,7 +179,8 @@ $popover-caret-height: custom-property.get-var(
173
179
  }
174
180
 
175
181
  // Popover caret
176
- .#{$prefix}--popover-caret {
182
+ .#{$prefix}--popover-caret,
183
+ .#{$prefix}--popover--auto-align.#{$prefix}--popover-caret {
177
184
  position: absolute;
178
185
  z-index: z('floating');
179
186
  display: none;
@@ -190,6 +197,14 @@ $popover-caret-height: custom-property.get-var(
190
197
  display: block;
191
198
  }
192
199
 
200
+ // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
201
+ .#{$prefix}--popover--auto-align.#{$prefix}--popover--caret.#{$prefix}--popover--open
202
+ > .#{$prefix}--popover
203
+ > .#{$prefix}--popover-content
204
+ > .#{$prefix}--popover-caret {
205
+ display: block;
206
+ }
207
+
193
208
  .#{$prefix}--popover--tab-tip
194
209
  > .#{$prefix}--popover
195
210
  > .#{$prefix}--popover-caret {
@@ -201,7 +216,7 @@ $popover-caret-height: custom-property.get-var(
201
216
  //-----------------------------------------------------------------------------
202
217
 
203
218
  // Popover content placement
204
- .#{$prefix}--popover--bottom
219
+ .#{$prefix}--popover--bottom:not(.#{$prefix}--popover--auto-align)
205
220
  > .#{$prefix}--popover
206
221
  > .#{$prefix}--popover-content {
207
222
  inset-block-end: 0;
@@ -210,13 +225,16 @@ $popover-caret-height: custom-property.get-var(
210
225
  }
211
226
 
212
227
  [dir='rtl']
213
- .#{$prefix}--popover--bottom
228
+ .#{$prefix}--popover--bottom:not(.#{$prefix}--popover--auto-align)
214
229
  > .#{$prefix}--popover
215
230
  > .#{$prefix}--popover-content {
216
231
  transform: translate(50%, calc(100% + $popover-offset));
217
232
  }
218
233
 
219
- .#{$prefix}--popover--bottom-left
234
+ .#{$prefix}--popover--bottom-left:not(.#{$prefix}--popover--auto-align)
235
+ > .#{$prefix}--popover
236
+ > .#{$prefix}--popover-content,
237
+ .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--auto-align)
220
238
  > .#{$prefix}--popover
221
239
  > .#{$prefix}--popover-content {
222
240
  inset-block-end: 0;
@@ -228,14 +246,21 @@ $popover-caret-height: custom-property.get-var(
228
246
  }
229
247
 
230
248
  [dir='rtl']
231
- .#{$prefix}--popover--bottom-left
249
+ .#{$prefix}--popover--bottom-left:not(.#{$prefix}--popover--auto-align)
250
+ > .#{$prefix}--popover
251
+ > .#{$prefix}--popover-content,
252
+ [dir='rtl']
253
+ .#{$prefix}--popover--bottom-start:not(.#{$prefix}--popover--auto-align)
232
254
  > .#{$prefix}--popover
233
255
  > .#{$prefix}--popover-content {
234
256
  inset-inline-end: 0;
235
257
  inset-inline-start: initial;
236
258
  }
237
259
 
238
- .#{$prefix}--popover--bottom-right
260
+ .#{$prefix}--popover--bottom-right:not(.#{$prefix}--popover--auto-align)
261
+ > .#{$prefix}--popover
262
+ > .#{$prefix}--popover-content,
263
+ .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--auto-align)
239
264
  > .#{$prefix}--popover
240
265
  > .#{$prefix}--popover-content {
241
266
  inset-block-end: 0;
@@ -244,7 +269,11 @@ $popover-caret-height: custom-property.get-var(
244
269
  }
245
270
 
246
271
  [dir='rtl']
247
- .#{$prefix}--popover--bottom-right
272
+ .#{$prefix}--popover--bottom-right:not(.#{$prefix}--popover--auto-align)
273
+ > .#{$prefix}--popover
274
+ > .#{$prefix}--popover-content,
275
+ [dir='rtl']
276
+ .#{$prefix}--popover--bottom-end:not(.#{$prefix}--popover--auto-align)
248
277
  > .#{$prefix}--popover
249
278
  > .#{$prefix}--popover-content {
250
279
  inset-inline-start: 0;
@@ -257,7 +286,13 @@ $popover-caret-height: custom-property.get-var(
257
286
  .#{$prefix}--popover--bottom-left
258
287
  > .#{$prefix}--popover
259
288
  > .#{$prefix}--popover-content::before,
289
+ .#{$prefix}--popover--bottom-start
290
+ > .#{$prefix}--popover
291
+ > .#{$prefix}--popover-content::before,
260
292
  .#{$prefix}--popover--bottom-right
293
+ > .#{$prefix}--popover
294
+ > .#{$prefix}--popover-content::before,
295
+ .#{$prefix}--popover--bottom-end
261
296
  > .#{$prefix}--popover
262
297
  > .#{$prefix}--popover-content::before {
263
298
  block-size: $popover-offset;
@@ -274,7 +309,13 @@ $popover-caret-height: custom-property.get-var(
274
309
  .#{$prefix}--popover--bottom-left
275
310
  > .#{$prefix}--popover
276
311
  > .#{$prefix}--popover-caret,
312
+ .#{$prefix}--popover--bottom-start
313
+ > .#{$prefix}--popover
314
+ > .#{$prefix}--popover-caret,
277
315
  .#{$prefix}--popover--bottom-right
316
+ > .#{$prefix}--popover
317
+ > .#{$prefix}--popover-caret,
318
+ .#{$prefix}--popover--bottom-end
278
319
  > .#{$prefix}--popover
279
320
  > .#{$prefix}--popover-caret {
280
321
  block-size: $popover-caret-height;
@@ -293,19 +334,53 @@ $popover-caret-height: custom-property.get-var(
293
334
  .#{$prefix}--popover--bottom-left
294
335
  > .#{$prefix}--popover
295
336
  > .#{$prefix}--popover-caret,
337
+ [dir='rtl']
338
+ .#{$prefix}--popover--bottom-start
339
+ > .#{$prefix}--popover
340
+ > .#{$prefix}--popover-caret,
296
341
  [dir='rtl']
297
342
  .#{$prefix}--popover--bottom-right
298
343
  > .#{$prefix}--popover
344
+ > .#{$prefix}--popover-caret,
345
+ [dir='rtl']
346
+ .#{$prefix}--popover--bottom-end
347
+ > .#{$prefix}--popover
299
348
  > .#{$prefix}--popover-caret {
300
349
  transform: translate(50%, $popover-offset);
301
350
  }
302
351
 
352
+ // Caret placement for autoAlign
353
+ .#{$prefix}--popover--bottom.#{$prefix}--popover--auto-align
354
+ > .#{$prefix}--popover
355
+ > .#{$prefix}--popover-content
356
+ > .#{$prefix}--popover-caret,
357
+ .#{$prefix}--popover--bottom-left.#{$prefix}--popover--auto-align
358
+ > .#{$prefix}--popover
359
+ > .#{$prefix}--popover-content
360
+ > .#{$prefix}--popover-caret,
361
+ .#{$prefix}--popover--bottom-start.#{$prefix}--popover--auto-align
362
+ > .#{$prefix}--popover
363
+ > .#{$prefix}--popover-content
364
+ > .#{$prefix}--popover-caret,
365
+ .#{$prefix}--popover--bottom-right.#{$prefix}--popover--auto-align
366
+ > .#{$prefix}--popover
367
+ > .#{$prefix}--popover-content
368
+ > .#{$prefix}--popover-caret,
369
+ .#{$prefix}--popover--bottom-end.#{$prefix}--popover--auto-align
370
+ > .#{$prefix}--popover
371
+ > .#{$prefix}--popover-content
372
+ > .#{$prefix}--popover-caret {
373
+ block-size: $popover-caret-height;
374
+ clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
375
+ inline-size: $popover-caret-width;
376
+ }
377
+
303
378
  //-----------------------------------------------------------------------------
304
379
  // Top
305
380
  //-----------------------------------------------------------------------------
306
381
 
307
382
  // Popover content placement
308
- .#{$prefix}--popover--top
383
+ .#{$prefix}--popover--top:not(.#{$prefix}--popover--auto-align)
309
384
  > .#{$prefix}--popover
310
385
  > .#{$prefix}--popover-content {
311
386
  inset-block-start: 0;
@@ -314,13 +389,16 @@ $popover-caret-height: custom-property.get-var(
314
389
  }
315
390
 
316
391
  [dir='rtl']
317
- .#{$prefix}--popover--top
392
+ .#{$prefix}--popover--top:not(.#{$prefix}--popover--auto-align)
318
393
  > .#{$prefix}--popover
319
394
  > .#{$prefix}--popover-content {
320
395
  transform: translate(50%, calc(-100% - $popover-offset));
321
396
  }
322
397
 
323
- .#{$prefix}--popover--top-left
398
+ .#{$prefix}--popover--top-left:not(.#{$prefix}--popover--auto-align)
399
+ > .#{$prefix}--popover
400
+ > .#{$prefix}--popover-content,
401
+ .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--auto-align)
324
402
  > .#{$prefix}--popover
325
403
  > .#{$prefix}--popover-content {
326
404
  inset-block-start: 0;
@@ -332,14 +410,21 @@ $popover-caret-height: custom-property.get-var(
332
410
  }
333
411
 
334
412
  [dir='rtl']
335
- .#{$prefix}--popover--top-left
413
+ .#{$prefix}--popover--top-left:not(.#{$prefix}--popover--auto-align)
414
+ > .#{$prefix}--popover
415
+ > .#{$prefix}--popover-content,
416
+ [dir='rtl']
417
+ .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--auto-align)
336
418
  > .#{$prefix}--popover
337
419
  > .#{$prefix}--popover-content {
338
420
  inset-inline-end: 0;
339
421
  inset-inline-start: initial;
340
422
  }
341
423
 
342
- .#{$prefix}--popover--top-right
424
+ .#{$prefix}--popover--top-right:not(.#{$prefix}--popover--auto-align)
425
+ > .#{$prefix}--popover
426
+ > .#{$prefix}--popover-content,
427
+ .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--auto-align)
343
428
  > .#{$prefix}--popover
344
429
  > .#{$prefix}--popover-content {
345
430
  inset-block-start: 0;
@@ -348,7 +433,11 @@ $popover-caret-height: custom-property.get-var(
348
433
  }
349
434
 
350
435
  [dir='rtl']
351
- .#{$prefix}--popover--top-right
436
+ .#{$prefix}--popover--top-right:not(.#{$prefix}--popover--auto-align)
437
+ > .#{$prefix}--popover
438
+ > .#{$prefix}--popover-content,
439
+ [dir='rtl']
440
+ .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--auto-align)
352
441
  > .#{$prefix}--popover
353
442
  > .#{$prefix}--popover-content {
354
443
  inset-inline-start: 0;
@@ -361,7 +450,13 @@ $popover-caret-height: custom-property.get-var(
361
450
  .#{$prefix}--popover--top-left
362
451
  > .#{$prefix}--popover
363
452
  > .#{$prefix}--popover-content::before,
453
+ .#{$prefix}--popover--top-start
454
+ > .#{$prefix}--popover
455
+ > .#{$prefix}--popover-content::before,
364
456
  .#{$prefix}--popover--top-right
457
+ > .#{$prefix}--popover
458
+ > .#{$prefix}--popover-content::before,
459
+ .#{$prefix}--popover--top-end
365
460
  > .#{$prefix}--popover
366
461
  > .#{$prefix}--popover-content::before {
367
462
  block-size: $popover-offset;
@@ -376,7 +471,13 @@ $popover-caret-height: custom-property.get-var(
376
471
  .#{$prefix}--popover--top-left
377
472
  > .#{$prefix}--popover
378
473
  > .#{$prefix}--popover-caret,
474
+ .#{$prefix}--popover--top-start
475
+ > .#{$prefix}--popover
476
+ > .#{$prefix}--popover-caret,
379
477
  .#{$prefix}--popover--top-right
478
+ > .#{$prefix}--popover
479
+ > .#{$prefix}--popover-caret,
480
+ .#{$prefix}--popover--top-end
380
481
  > .#{$prefix}--popover
381
482
  > .#{$prefix}--popover-caret {
382
483
  block-size: $popover-caret-height;
@@ -388,26 +489,60 @@ $popover-caret-height: custom-property.get-var(
388
489
  }
389
490
 
390
491
  [dir='rtl']
391
- .#{$prefix}--popover--top
492
+ .#{$prefix}--popover--top:not(.#{$prefix}--popover--auto-align)
493
+ > .#{$prefix}--popover
494
+ > .#{$prefix}--popover-caret,
495
+ [dir='rtl']
496
+ .#{$prefix}--popover--top-left:not(.#{$prefix}--popover--auto-align)
497
+ > .#{$prefix}--popover
498
+ > .#{$prefix}--popover-caret,
499
+ [dir='rtl']
500
+ .#{$prefix}--popover--top-start:not(.#{$prefix}--popover--auto-align)
392
501
  > .#{$prefix}--popover
393
502
  > .#{$prefix}--popover-caret,
394
503
  [dir='rtl']
395
- .#{$prefix}--popover--top-left
504
+ .#{$prefix}--popover--top-right:not(.#{$prefix}--popover--auto-align)
396
505
  > .#{$prefix}--popover
397
506
  > .#{$prefix}--popover-caret,
398
507
  [dir='rtl']
399
- .#{$prefix}--popover--top-right
508
+ .#{$prefix}--popover--top-end:not(.#{$prefix}--popover--auto-align)
400
509
  > .#{$prefix}--popover
401
510
  > .#{$prefix}--popover-caret {
402
511
  transform: translate(50%, calc(-1 * $popover-offset));
403
512
  }
404
513
 
514
+ // Caret placement for autoAlign
515
+ .#{$prefix}--popover--top.#{$prefix}--popover--auto-align
516
+ > .#{$prefix}--popover
517
+ > .#{$prefix}--popover-content
518
+ > .#{$prefix}--popover-caret,
519
+ .#{$prefix}--popover--top-left.#{$prefix}--popover--auto-align
520
+ > .#{$prefix}--popover
521
+ > .#{$prefix}--popover-content
522
+ > .#{$prefix}--popover-caret,
523
+ .#{$prefix}--popover--top-start.#{$prefix}--popover--auto-align
524
+ > .#{$prefix}--popover
525
+ > .#{$prefix}--popover-content
526
+ > .#{$prefix}--popover-caret,
527
+ .#{$prefix}--popover--top-right.#{$prefix}--popover--auto-align
528
+ > .#{$prefix}--popover
529
+ > .#{$prefix}--popover-content
530
+ > .#{$prefix}--popover-caret,
531
+ .#{$prefix}--popover--top-end.#{$prefix}--popover--auto-align
532
+ > .#{$prefix}--popover
533
+ > .#{$prefix}--popover-content
534
+ > .#{$prefix}--popover-caret {
535
+ block-size: $popover-caret-height;
536
+ clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
537
+ inline-size: $popover-caret-width;
538
+ }
539
+
405
540
  //-----------------------------------------------------------------------------
406
541
  // Right
407
542
  //-----------------------------------------------------------------------------
408
543
 
409
544
  // Popover content placement
410
- .#{$prefix}--popover--right
545
+ .#{$prefix}--popover--right:not(.#{$prefix}--popover--auto-align)
411
546
  > .#{$prefix}--popover
412
547
  > .#{$prefix}--popover-content {
413
548
  inset-block-start: 50%;
@@ -417,7 +552,10 @@ $popover-caret-height: custom-property.get-var(
417
552
  transform: translate($popover-offset, -50%);
418
553
  }
419
554
 
420
- .#{$prefix}--popover--right-top
555
+ .#{$prefix}--popover--right-top:not(.#{$prefix}--popover--auto-align)
556
+ > .#{$prefix}--popover
557
+ > .#{$prefix}--popover-content,
558
+ .#{$prefix}--popover--right-start:not(.#{$prefix}--popover--auto-align)
421
559
  > .#{$prefix}--popover
422
560
  > .#{$prefix}--popover-content {
423
561
  inset-block-start: 50%;
@@ -428,7 +566,10 @@ $popover-caret-height: custom-property.get-var(
428
566
  );
429
567
  }
430
568
 
431
- .#{$prefix}--popover--right-bottom
569
+ .#{$prefix}--popover--right-bottom:not(.#{$prefix}--popover--auto-align)
570
+ > .#{$prefix}--popover
571
+ > .#{$prefix}--popover-content,
572
+ .#{$prefix}--popover--right-end:not(.#{$prefix}--popover--auto-align)
432
573
  > .#{$prefix}--popover
433
574
  > .#{$prefix}--popover-content {
434
575
  inset-block-end: 50%;
@@ -437,15 +578,23 @@ $popover-caret-height: custom-property.get-var(
437
578
  }
438
579
 
439
580
  [dir='rtl']
440
- .#{$prefix}--popover--right
581
+ .#{$prefix}--popover--right:not(.#{$prefix}--popover--auto-align)
582
+ > .#{$prefix}--popover
583
+ > .#{$prefix}--popover-content,
584
+ [dir='rtl']
585
+ .#{$prefix}--popover--right-bottom:not(.#{$prefix}--popover--auto-align)
586
+ > .#{$prefix}--popover
587
+ > .#{$prefix}--popover-content,
588
+ [dir='rtl']
589
+ .#{$prefix}--popover--right-end:not(.#{$prefix}--popover--auto-align)
441
590
  > .#{$prefix}--popover
442
591
  > .#{$prefix}--popover-content,
443
592
  [dir='rtl']
444
- .#{$prefix}--popover--right-bottom
593
+ .#{$prefix}--popover--right-top:not(.#{$prefix}--popover--auto-align)
445
594
  > .#{$prefix}--popover
446
595
  > .#{$prefix}--popover-content,
447
596
  [dir='rtl']
448
- .#{$prefix}--popover--right-top
597
+ .#{$prefix}--popover--right-start:not(.#{$prefix}--popover--auto-align)
449
598
  > .#{$prefix}--popover
450
599
  > .#{$prefix}--popover-content {
451
600
  inset-inline-end: 100%;
@@ -459,7 +608,13 @@ $popover-caret-height: custom-property.get-var(
459
608
  .#{$prefix}--popover--right-top
460
609
  > .#{$prefix}--popover
461
610
  > .#{$prefix}--popover-content::before,
611
+ .#{$prefix}--popover--right-start
612
+ > .#{$prefix}--popover
613
+ > .#{$prefix}--popover-content::before,
462
614
  .#{$prefix}--popover--right-bottom
615
+ > .#{$prefix}--popover
616
+ > .#{$prefix}--popover-content::before,
617
+ .#{$prefix}--popover--right-end
463
618
  > .#{$prefix}--popover
464
619
  > .#{$prefix}--popover-content::before {
465
620
  inline-size: $popover-offset;
@@ -470,13 +625,19 @@ $popover-caret-height: custom-property.get-var(
470
625
  }
471
626
 
472
627
  // Caret placement
473
- .#{$prefix}--popover--right
628
+ .#{$prefix}--popover--right:not(.#{$prefix}--popover--auto-align)
474
629
  > .#{$prefix}--popover
475
630
  > .#{$prefix}--popover-caret,
476
- .#{$prefix}--popover--right-top
631
+ .#{$prefix}--popover--right-top:not(.#{$prefix}--popover--auto-align)
477
632
  > .#{$prefix}--popover
478
633
  > .#{$prefix}--popover-caret,
479
- .#{$prefix}--popover--right-bottom
634
+ .#{$prefix}--popover--right-start:not(.#{$prefix}--popover--auto-align)
635
+ > .#{$prefix}--popover
636
+ > .#{$prefix}--popover-caret,
637
+ .#{$prefix}--popover--right-bottom:not(.#{$prefix}--popover--auto-align)
638
+ > .#{$prefix}--popover
639
+ > .#{$prefix}--popover-caret,
640
+ .#{$prefix}--popover--right-end:not(.#{$prefix}--popover--auto-align)
480
641
  > .#{$prefix}--popover
481
642
  > .#{$prefix}--popover-caret {
482
643
  block-size: $popover-caret-width;
@@ -488,27 +649,61 @@ $popover-caret-height: custom-property.get-var(
488
649
  }
489
650
 
490
651
  [dir='rtl']
491
- .#{$prefix}--popover--right
652
+ .#{$prefix}--popover--right:not(.#{$prefix}--popover--auto-align)
653
+ > .#{$prefix}--popover
654
+ > .#{$prefix}--popover-caret,
655
+ [dir='rtl']
656
+ .#{$prefix}--popover--right-top:not(.#{$prefix}--popover--auto-align)
492
657
  > .#{$prefix}--popover
493
658
  > .#{$prefix}--popover-caret,
494
659
  [dir='rtl']
495
- .#{$prefix}--popover--right-top
660
+ .#{$prefix}--popover--right-start:not(.#{$prefix}--popover--auto-align)
496
661
  > .#{$prefix}--popover
497
662
  > .#{$prefix}--popover-caret,
498
663
  [dir='rtl']
499
- .#{$prefix}--popover--right-bottom
664
+ .#{$prefix}--popover--right-bottom:not(.#{$prefix}--popover--auto-align)
665
+ > .#{$prefix}--popover
666
+ > .#{$prefix}--popover-caret,
667
+ [dir='rtl']
668
+ .#{$prefix}--popover--right-end:not(.#{$prefix}--popover--auto-align)
500
669
  > .#{$prefix}--popover
501
670
  > .#{$prefix}--popover-caret {
502
671
  inset-inline-end: 100%;
503
672
  inset-inline-start: initial;
504
673
  }
505
674
 
675
+ // Caret placement for autoAlign
676
+ .#{$prefix}--popover--right.#{$prefix}--popover--auto-align
677
+ > .#{$prefix}--popover
678
+ > .#{$prefix}--popover-content
679
+ > .#{$prefix}--popover-caret,
680
+ .#{$prefix}--popover--right-top.#{$prefix}--popover--auto-align
681
+ > .#{$prefix}--popover
682
+ > .#{$prefix}--popover-content
683
+ > .#{$prefix}--popover-caret,
684
+ .#{$prefix}--popover--right-start.#{$prefix}--popover--auto-align
685
+ > .#{$prefix}--popover
686
+ > .#{$prefix}--popover-content
687
+ > .#{$prefix}--popover-caret,
688
+ .#{$prefix}--popover--right-bottom.#{$prefix}--popover--auto-align
689
+ > .#{$prefix}--popover
690
+ > .#{$prefix}--popover-content
691
+ > .#{$prefix}--popover-caret,
692
+ .#{$prefix}--popover--right-end.#{$prefix}--popover--auto-align
693
+ > .#{$prefix}--popover
694
+ > .#{$prefix}--popover-content
695
+ > .#{$prefix}--popover-caret {
696
+ block-size: $popover-caret-width;
697
+ clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
698
+ inline-size: $popover-caret-height;
699
+ }
700
+
506
701
  //-----------------------------------------------------------------------------
507
702
  // Left
508
703
  //-----------------------------------------------------------------------------
509
704
 
510
705
  // Popover content placement
511
- .#{$prefix}--popover--left
706
+ .#{$prefix}--popover--left:not(.#{$prefix}--popover--auto-align)
512
707
  > .#{$prefix}--popover
513
708
  > .#{$prefix}--popover-content {
514
709
  inset-block-start: 50%;
@@ -518,7 +713,10 @@ $popover-caret-height: custom-property.get-var(
518
713
  transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
519
714
  }
520
715
 
521
- .#{$prefix}--popover--left-top
716
+ .#{$prefix}--popover--left-top:not(.#{$prefix}--popover--auto-align)
717
+ > .#{$prefix}--popover
718
+ > .#{$prefix}--popover-content,
719
+ .#{$prefix}--popover--left-start:not(.#{$prefix}--popover--auto-align)
522
720
  > .#{$prefix}--popover
523
721
  > .#{$prefix}--popover-content {
524
722
  inset-block-start: 50%;
@@ -531,7 +729,10 @@ $popover-caret-height: custom-property.get-var(
531
729
  );
532
730
  }
533
731
 
534
- .#{$prefix}--popover--left-bottom
732
+ .#{$prefix}--popover--left-bottom:not(.#{$prefix}--popover--auto-align)
733
+ > .#{$prefix}--popover
734
+ > .#{$prefix}--popover-content,
735
+ .#{$prefix}--popover--left-end:not(.#{$prefix}--popover--auto-align)
535
736
  > .#{$prefix}--popover
536
737
  > .#{$prefix}--popover-content {
537
738
  inset-block-end: 50%;
@@ -545,15 +746,23 @@ $popover-caret-height: custom-property.get-var(
545
746
  }
546
747
 
547
748
  [dir='rtl']
548
- .#{$prefix}--popover--left
749
+ .#{$prefix}--popover--left:not(.#{$prefix}--popover--auto-align)
750
+ > .#{$prefix}--popover
751
+ > .#{$prefix}--popover-content,
752
+ [dir='rtl']
753
+ .#{$prefix}--popover--left-bottom:not(.#{$prefix}--popover--auto-align)
549
754
  > .#{$prefix}--popover
550
755
  > .#{$prefix}--popover-content,
551
756
  [dir='rtl']
552
- .#{$prefix}--popover--left-bottom
757
+ .#{$prefix}--popover--left-end:not(.#{$prefix}--popover--auto-align)
553
758
  > .#{$prefix}--popover
554
759
  > .#{$prefix}--popover-content,
555
760
  [dir='rtl']
556
- .#{$prefix}--popover--left-top
761
+ .#{$prefix}--popover--left-top:not(.#{$prefix}--popover--auto-align)
762
+ > .#{$prefix}--popover
763
+ > .#{$prefix}--popover-content,
764
+ [dir='rtl']
765
+ .#{$prefix}--popover--left-start:not(.#{$prefix}--popover--auto-align)
557
766
  > .#{$prefix}--popover
558
767
  > .#{$prefix}--popover-content {
559
768
  inset-inline-end: initial;
@@ -567,7 +776,13 @@ $popover-caret-height: custom-property.get-var(
567
776
  .#{$prefix}--popover--left-top
568
777
  > .#{$prefix}--popover
569
778
  > .#{$prefix}--popover-content::before,
779
+ .#{$prefix}--popover--left-start
780
+ > .#{$prefix}--popover
781
+ > .#{$prefix}--popover-content::before,
570
782
  .#{$prefix}--popover--left-bottom
783
+ > .#{$prefix}--popover
784
+ > .#{$prefix}--popover-content::before,
785
+ .#{$prefix}--popover--left-end
571
786
  > .#{$prefix}--popover
572
787
  > .#{$prefix}--popover-content::before {
573
788
  inline-size: $popover-offset;
@@ -578,13 +793,19 @@ $popover-caret-height: custom-property.get-var(
578
793
  }
579
794
 
580
795
  // Caret placement
581
- .#{$prefix}--popover--left
796
+ .#{$prefix}--popover--left:not(.#{$prefix}--popover--auto-align)
582
797
  > .#{$prefix}--popover
583
798
  > .#{$prefix}--popover-caret,
584
- .#{$prefix}--popover--left-top
799
+ .#{$prefix}--popover--left-top:not(.#{$prefix}--popover--auto-align)
585
800
  > .#{$prefix}--popover
586
801
  > .#{$prefix}--popover-caret,
587
- .#{$prefix}--popover--left-bottom
802
+ .#{$prefix}--popover--left-start:not(.#{$prefix}--popover--auto-align)
803
+ > .#{$prefix}--popover
804
+ > .#{$prefix}--popover-caret,
805
+ .#{$prefix}--popover--left-bottom:not(.#{$prefix}--popover--auto-align)
806
+ > .#{$prefix}--popover
807
+ > .#{$prefix}--popover-caret,
808
+ .#{$prefix}--popover--left-end:not(.#{$prefix}--popover--auto-align)
588
809
  > .#{$prefix}--popover
589
810
  > .#{$prefix}--popover-caret {
590
811
  block-size: $popover-caret-width;
@@ -596,21 +817,55 @@ $popover-caret-height: custom-property.get-var(
596
817
  }
597
818
 
598
819
  [dir='rtl']
599
- .#{$prefix}--popover--left
820
+ .#{$prefix}--popover--left:not(.#{$prefix}--popover--auto-align)
821
+ > .#{$prefix}--popover
822
+ > .#{$prefix}--popover-caret,
823
+ [dir='rtl']
824
+ .#{$prefix}--popover--left-top:not(.#{$prefix}--popover--auto-align)
825
+ > .#{$prefix}--popover
826
+ > .#{$prefix}--popover-caret,
827
+ [dir='rtl']
828
+ .#{$prefix}--popover--left-start:not(.#{$prefix}--popover--auto-align)
600
829
  > .#{$prefix}--popover
601
830
  > .#{$prefix}--popover-caret,
602
831
  [dir='rtl']
603
- .#{$prefix}--popover--left-top
832
+ .#{$prefix}--popover--left-bottom:not(.#{$prefix}--popover--auto-align)
604
833
  > .#{$prefix}--popover
605
834
  > .#{$prefix}--popover-caret,
606
835
  [dir='rtl']
607
- .#{$prefix}--popover--left-bottom
836
+ .#{$prefix}--popover--left-end:not(.#{$prefix}--popover--auto-align)
608
837
  > .#{$prefix}--popover
609
838
  > .#{$prefix}--popover-caret {
610
839
  inset-inline-end: initial;
611
840
  inset-inline-start: 100%;
612
841
  }
613
842
 
843
+ // Caret placement for autoAlign
844
+ .#{$prefix}--popover--left.#{$prefix}--popover--auto-align
845
+ > .#{$prefix}--popover
846
+ > .#{$prefix}--popover-content
847
+ > .#{$prefix}--popover-caret,
848
+ .#{$prefix}--popover--left-top.#{$prefix}--popover--auto-align
849
+ > .#{$prefix}--popover
850
+ > .#{$prefix}--popover-content
851
+ > .#{$prefix}--popover-caret,
852
+ .#{$prefix}--popover--left-start.#{$prefix}--popover--auto-align
853
+ > .#{$prefix}--popover
854
+ > .#{$prefix}--popover-content
855
+ > .#{$prefix}--popover-caret,
856
+ .#{$prefix}--popover--left-bottom.#{$prefix}--popover--auto-align
857
+ > .#{$prefix}--popover
858
+ > .#{$prefix}--popover-content
859
+ > .#{$prefix}--popover-caret,
860
+ .#{$prefix}--popover--left-end.#{$prefix}--popover--auto-align
861
+ > .#{$prefix}--popover
862
+ > .#{$prefix}--popover-content
863
+ > .#{$prefix}--popover-caret {
864
+ block-size: $popover-caret-width;
865
+ clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
866
+ inline-size: $popover-caret-height;
867
+ }
868
+
614
869
  //-----------------------------------------------------------------------------
615
870
  // Tab Tip Variant
616
871
  //-----------------------------------------------------------------------------