@carbon/styles 1.92.0 → 1.93.0

package/css/styles.css

@@ -4152,6 +4152,11 @@ li.cds--accordion__item--disabled:last-of-type {
   filter: var(--cds-popover-drop-shadow, drop-shadow(0 0.125rem 0.125rem rgba(0, 0, 0, 0.2)));
 }
 
+.cds--popover--border .cds--popover > .cds--popover-content {
+  outline: 1px solid var(--cds-popover-border-color, var(--cds-border-subtle));
+  outline-offset: -1px;
+}
+
 .cds--popover--caret {
   --cds-popover-offset: 0.625rem;
 }
@@ -4204,6 +4209,10 @@ li.cds--accordion__item--disabled:last-of-type {
   display: block;
 }
 
+.cds--popover--background-token__background .cds--popover-content {
+  background-color: var(--cds-background, #ffffff);
+}
+
 .cds--popover-content::before {
   position: absolute;
   display: none;
@@ -4219,9 +4228,31 @@ li.cds--accordion__item--disabled:last-of-type {
   position: absolute;
   z-index: 6000;
   display: none;
-  background-color: var(--cds-popover-background-color, var(--cds-layer));
   will-change: transform;
 }
+.cds--popover-caret::after,
+.cds--popover--auto-align.cds--popover-caret::after {
+  position: absolute;
+  display: block;
+  background-color: var(--cds-popover-background-color, var(--cds-layer));
+  content: "";
+}
+.cds--popover-caret::before,
+.cds--popover--auto-align.cds--popover-caret::before {
+  position: absolute;
+  display: none;
+  background-color: var(--cds-popover-border-color, var(--cds-border-subtle));
+  content: "";
+}
+
+.cds--popover--background-token__background .cds--popover-caret::after {
+  background-color: var(--cds-background, #ffffff);
+}
+
+.cds--popover--border .cds--popover-caret::before,
+.cds--popover--border .cds--popover--auto-align.cds--popover-caret::before {
+  display: block;
+}
 
 .cds--popover--caret.cds--popover--open > .cds--popover > .cds--popover-caret {
   display: block;
@@ -4265,22 +4296,6 @@ li.cds--accordion__item--disabled:last-of-type {
   transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
-.cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
-  inset-block-end: 0;
-  inset-inline-end: 0;
-}
-
-.cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
-  inset-block-end: 0;
-  inset-inline-end: auto;
-}
-
-.cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
-  inset-block-end: 0;
-  inset-inline-end: 0;
-}
-
 [dir=rtl] .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
 [dir=rtl] .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
   inset-inline-start: calc(50% - var(--cds-popover-offset, 0rem));
@@ -4303,12 +4318,39 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--bottom-right > .cds--popover > .cds--popover-caret,
 .cds--popover--bottom-end > .cds--popover > .cds--popover-caret {
   block-size: var(--cds-popover-caret-height, 0.375rem);
-  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
   inline-size: var(--cds-popover-caret-width, 0.75rem);
   inset-block-end: 0;
   inset-inline-start: 50%;
   transform: translate(-50%, var(--cds-popover-offset, 0rem));
 }
+.cds--popover--bottom > .cds--popover > .cds--popover-caret::after,
+.cds--popover--bottom-left > .cds--popover > .cds--popover-caret::after,
+.cds--popover--bottom-start > .cds--popover > .cds--popover-caret::after,
+.cds--popover--bottom-right > .cds--popover > .cds--popover-caret::after,
+.cds--popover--bottom-end > .cds--popover > .cds--popover-caret::after {
+  block-size: var(--cds-popover-caret-height, 0.375rem);
+  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+  inline-size: var(--cds-popover-caret-width, 0.75rem);
+}
+
+.cds--popover--border.cds--popover--bottom > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--bottom-left > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--bottom-start > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--bottom-right > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--bottom-end > .cds--popover > .cds--popover-caret::before {
+  block-size: var(--cds-popover-caret-height, 0.375rem);
+  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+  inline-size: var(--cds-popover-caret-width, 0.75rem);
+}
+.cds--popover--border.cds--popover--bottom > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--bottom-left > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--bottom-start > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--bottom-right > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--bottom-end > .cds--popover > .cds--popover-caret::after {
+  inline-size: calc(var(--cds-popover-caret-width, 0.75rem) - 1px);
+  inset-block-start: 1px;
+  inset-inline-start: 0.5px;
+}
 
 [dir=rtl] .cds--popover--bottom > .cds--popover > .cds--popover-caret,
 [dir=rtl] .cds--popover--bottom-left > .cds--popover > .cds--popover-caret,
@@ -4323,11 +4365,38 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
+  block-size: var(--cds-popover-caret-height, 0.375rem);
+  inline-size: var(--cds-popover-caret-width, 0.75rem);
+}
+.cds--popover--bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--bottom-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
   block-size: var(--cds-popover-caret-height, 0.375rem);
   clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
   inline-size: var(--cds-popover-caret-width, 0.75rem);
 }
 
+.cds--popover--border.cds--popover--bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--bottom-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
+  block-size: var(--cds-popover-caret-height, 0.375rem);
+  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+  inline-size: var(--cds-popover-caret-width, 0.75rem);
+}
+.cds--popover--border.cds--popover--bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--bottom-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--bottom-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--bottom-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--bottom-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
+  inline-size: calc(var(--cds-popover-caret-width, 0.75rem) - 1px);
+  inset-block-start: 1px;
+  inset-inline-start: 0.5px;
+}
+
 .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
   inset-block-start: 0;
   inset-inline-start: 50%;
@@ -4380,12 +4449,39 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--top-right > .cds--popover > .cds--popover-caret,
 .cds--popover--top-end > .cds--popover > .cds--popover-caret {
   block-size: var(--cds-popover-caret-height, 0.375rem);
-  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
   inline-size: var(--cds-popover-caret-width, 0.75rem);
   inset-block-start: 0;
   inset-inline-start: 50%;
   transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
 }
+.cds--popover--top > .cds--popover > .cds--popover-caret::after,
+.cds--popover--top-left > .cds--popover > .cds--popover-caret::after,
+.cds--popover--top-start > .cds--popover > .cds--popover-caret::after,
+.cds--popover--top-right > .cds--popover > .cds--popover-caret::after,
+.cds--popover--top-end > .cds--popover > .cds--popover-caret::after {
+  block-size: var(--cds-popover-caret-height, 0.375rem);
+  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+  inline-size: var(--cds-popover-caret-width, 0.75rem);
+}
+
+.cds--popover--border.cds--popover--top > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--top-left > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--top-start > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--top-right > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--top-end > .cds--popover > .cds--popover-caret::before {
+  block-size: var(--cds-popover-caret-height, 0.375rem);
+  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+  inline-size: var(--cds-popover-caret-width, 0.75rem);
+}
+.cds--popover--border.cds--popover--top > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--top-left > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--top-start > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--top-right > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--top-end > .cds--popover > .cds--popover-caret::after {
+  inline-size: calc(var(--cds-popover-caret-width, 0.75rem) - 1px);
+  inset-block-start: -1px;
+  inset-inline-start: 0.5px;
+}
 
 [dir=rtl] .cds--popover--top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
 [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
@@ -4400,11 +4496,38 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
+  block-size: var(--cds-popover-caret-height, 0.375rem);
+  inline-size: var(--cds-popover-caret-width, 0.75rem);
+}
+.cds--popover--top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--top-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
   block-size: var(--cds-popover-caret-height, 0.375rem);
   clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
   inline-size: var(--cds-popover-caret-width, 0.75rem);
 }
 
+.cds--popover--border.cds--popover--top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--top-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
+  block-size: var(--cds-popover-caret-height, 0.375rem);
+  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+  inline-size: var(--cds-popover-caret-width, 0.75rem);
+}
+.cds--popover--border.cds--popover--top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--top-left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--top-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--top-right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--top-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
+  inline-size: calc(var(--cds-popover-caret-width, 0.75rem) - 1px);
+  inset-block-start: -1px;
+  inset-inline-start: 0.5px;
+}
+
 .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
   inset-block-start: 50%;
   inset-inline-start: 100%;
@@ -4451,12 +4574,20 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
 .cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
   block-size: var(--cds-popover-caret-width, 0.75rem);
-  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
   inline-size: var(--cds-popover-caret-height, 0.375rem);
   inset-block-start: 50%;
   inset-inline-start: 100%;
   transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
 }
+.cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after {
+  block-size: var(--cds-popover-caret-width, 0.75rem);
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  inline-size: var(--cds-popover-caret-height, 0.375rem);
+}
 
 [dir=rtl] .cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
 [dir=rtl] .cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
@@ -4467,16 +4598,81 @@ li.cds--accordion__item--disabled:last-of-type {
   inset-inline-start: initial;
 }
 
+.cds--popover--border.cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::before {
+  block-size: var(--cds-popover-caret-width, 0.75rem);
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  inline-size: var(--cds-popover-caret-height, 0.375rem);
+}
+.cds--popover--border.cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after {
+  inset-inline-start: 1px;
+}
+
+[dir=rtl] .cds--popover--border.cds--popover--right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--right-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--right-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--right-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--right-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after {
+  inset-inline-start: -1px;
+}
+
 .cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
+  block-size: var(--cds-popover-caret-width, 0.75rem);
+  inline-size: var(--cds-popover-caret-height, 0.375rem);
+}
+.cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
   block-size: var(--cds-popover-caret-width, 0.75rem);
   clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
   inline-size: var(--cds-popover-caret-height, 0.375rem);
 }
 
+.cds--popover--border.cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
+  block-size: var(--cds-popover-caret-width, 0.75rem);
+  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+  inline-size: var(--cds-popover-caret-height, 0.375rem);
+}
+.cds--popover--border.cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
+  inset-inline-start: 1px;
+}
+
+[dir=rtl] .cds--popover--border.cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+[dir=rtl] .cds--popover--border.cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+[dir=rtl] .cds--popover--border.cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+[dir=rtl] .cds--popover--border.cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+[dir=rtl] .cds--popover--border.cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
+  margin-inline-start: 1px;
+}
+[dir=rtl] .cds--popover--border.cds--popover--right.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--right-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--right-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--right-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--right-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
+  inset-inline-start: 0;
+}
+
 .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
   inset-block-start: 50%;
   inset-inline-end: 100%;
@@ -4523,12 +4719,20 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
 .cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
   block-size: var(--cds-popover-caret-width, 0.75rem);
-  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
   inline-size: var(--cds-popover-caret-height, 0.375rem);
   inset-block-start: 50%;
   inset-inline-end: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
 }
+.cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after {
+  block-size: var(--cds-popover-caret-width, 0.75rem);
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  inline-size: var(--cds-popover-caret-height, 0.375rem);
+}
 
 [dir=rtl] .cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
 [dir=rtl] .cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
@@ -4539,15 +4743,80 @@ li.cds--accordion__item--disabled:last-of-type {
   inset-inline-start: 100%;
 }
 
+.cds--popover--border.cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::before {
+  block-size: var(--cds-popover-caret-width, 0.75rem);
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  inline-size: var(--cds-popover-caret-height, 0.375rem);
+}
+.cds--popover--border.cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after {
+  inset-inline-start: -1px;
+}
+
+[dir=rtl] .cds--popover--border.cds--popover--left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--left-top:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--left-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--left-bottom:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--left-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret::after {
+  inset-inline-start: 1px;
+}
+
 .cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret,
 .cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret {
+  block-size: var(--cds-popover-caret-width, 0.75rem);
+  inline-size: var(--cds-popover-caret-height, 0.375rem);
+}
+.cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
+  block-size: var(--cds-popover-caret-width, 0.75rem);
+  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+  inline-size: var(--cds-popover-caret-height, 0.375rem);
+}
+
+.cds--popover--border.cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+.cds--popover--border.cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
   block-size: var(--cds-popover-caret-width, 0.75rem);
   clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
   inline-size: var(--cds-popover-caret-height, 0.375rem);
 }
+.cds--popover--border.cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+.cds--popover--border.cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
+  inset-inline-start: -1px;
+}
+
+[dir=rtl] .cds--popover--border.cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+[dir=rtl] .cds--popover--border.cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+[dir=rtl] .cds--popover--border.cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+[dir=rtl] .cds--popover--border.cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before,
+[dir=rtl] .cds--popover--border.cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::before {
+  margin-inline-start: -1px;
+}
+[dir=rtl] .cds--popover--border.cds--popover--left.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--left-top.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--left-start.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--left-bottom.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after,
+[dir=rtl] .cds--popover--border.cds--popover--left-end.cds--popover--auto-align > .cds--popover > .cds--popover-content > .cds--popover-caret::after {
+  inset-inline-start: 0;
+}
 
 .cds--popover--tab-tip > .cds--popover > .cds--popover-content {
   border-radius: 0;
@@ -22193,6 +22462,8 @@ optgroup.cds--select-optgroup:disabled,
   justify-content: space-between;
   background-color: var(--cds-layer);
   border-block-start: 1px solid var(--cds-border-subtle);
+  container-name: pagination;
+  container-type: inline-size;
   inline-size: calc(100% - 1px);
   min-block-size: 2.5rem;
   overflow-x: auto;
@@ -22202,7 +22473,7 @@ optgroup.cds--select-optgroup:disabled,
 .cds--pagination *::after {
   box-sizing: inherit;
 }
-@media (min-width: 42rem) {
+@container pagination (min-width: 42rem) {
   .cds--pagination {
     overflow: initial;
   }
@@ -22210,7 +22481,7 @@ optgroup.cds--select-optgroup:disabled,
     display: flex;
   }
 }
-@media (max-width: 41.98rem) {
+@container pagination (max-width: 42rem) {
   .cds--pagination .cds--pagination__left > *,
   .cds--pagination .cds--pagination__right > * {
     display: none;
@@ -22251,6 +22522,12 @@ optgroup.cds--select-optgroup:disabled,
   line-height: 2.5rem;
   min-inline-size: auto;
 }
+@-moz-document url-prefix() {
+  .cds--pagination .cds--select-input {
+    padding-inline-end: 1rem;
+    text-overflow: clip;
+  }
+}
 
 .cds--pagination .cds--select--inline .cds--select-input {
   padding-inline: 1rem 2.25rem;
@@ -22327,13 +22604,13 @@ optgroup.cds--select-optgroup:disabled,
 .cds--pagination__left {
   padding: 0 1rem 0 0;
 }
-@media (min-width: 42rem) {
+@container pagination (min-width: 42rem) {
   .cds--pagination__left {
     padding: 0 1rem;
   }
 }
 
-@media (min-width: 42rem) {
+@container pagination (min-width: 42rem) {
   .cds--pagination__text {
     display: inline-block;
   }
@@ -22470,6 +22747,8 @@ span.cds--pagination__text.cds--pagination__items-count {
   background-color: var(--cds-layer);
   border-block-end: 1px solid transparent;
   border-block-start: 1px solid var(--cds-border-subtle);
+  container-name: pagination;
+  container-type: inline-size;
   inline-size: 100%;
   min-block-size: 2.5rem;
 }
@@ -22483,7 +22762,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   margin: 0 1rem;
   color: var(--cds-text-secondary, #525252);
 }
-@media (min-width: 42rem) {
+@container pagination (min-width: 42rem) {
   .cds--unstable-pagination__text {
     display: inline-block;
   }
@@ -22614,7 +22893,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   inset-block-start: 50%;
   transform: translateY(-50%);
 }
-@media (min-width: 42rem) {
+@container pagination (min-width: 42rem) {
   .cds--unstable-pagination__page-selector .cds--select__arrow,
   .cds--unstable-pagination__page-sizer .cds--select__arrow {
     inset-inline-end: 1rem;
@@ -25070,10 +25349,6 @@ span.cds--pagination__text.cds--pagination__items-count {
   }
 }
 
-.cds--tab-content--interactive:focus {
-  outline: none;
-}
-
 .cds--tabs.cds--skeleton {
   cursor: default;
   pointer-events: none;
@@ -25528,6 +25803,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tile.cds--tile--selectable.cds--tile--radio > .cds--slug {
   inset-inline-end: 1rem;
   transition: inset-inline-end 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  inset-inline-end: 2.5rem;
 }
 
 .cds--tile.cds--tile--selectable.cds--tile--radio.cds--tile--is-selected > .cds--tile--inner-decorator > *,