carbon-addons-iot-react 4.2.0 → 4.2.2

package/css/carbon-addons-iot-react.css

@@ -2028,7 +2028,6 @@ fieldset[disabled] .cds--form__helper-text {
   align-items: center;
   justify-content: center;
   border-radius: 1rem;
-  margin: 0.25rem;
   cursor: default;
   max-inline-size: 13rem;
   min-block-size: var(--cds-layout-size-height-local);
@@ -5497,8 +5496,13 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
   --cds-popover-text-color: var(--cds-text-inverse, #ffffff);
 }
 
-.cds--popover--drop-shadow .cds--popover > .cds--popover-content {
-  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
+.cds--popover--drop-shadow .cds--popover {
+  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 {
@@ -5508,7 +5512,6 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
 .cds--popover {
   position: absolute;
   z-index: 6000;
-  filter: var(--cds-popover-drop-shadow, none);
   inset: 0;
   pointer-events: none;
 }
@@ -5554,6 +5557,10 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
   display: block;
 }
 
+.cds--popover--background-token__background .cds--popover-content {
+  background-color: var(--cds-background, #f4f4f4);
+}
+
 .cds--popover-content::before {
   position: absolute;
   display: none;
@@ -5569,9 +5576,31 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
   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, #f4f4f4);
+}
+
+.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;
@@ -5598,47 +5627,26 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
 .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
 .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
   inset-block-end: 0;
-  inset-inline-start: 0;
+  inset-inline-start: calc(50% - var(--cds-popover-offset, 0rem));
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
 [dir=rtl] .cds--popover--bottom-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
 [dir=rtl] .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
-  inset-inline-end: 0;
+  inset-inline-end: calc(50% - var(--cds-popover-offset, 0rem));
   inset-inline-start: initial;
 }
 
 .cds--popover--bottom-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
 .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
   inset-block-end: 0;
-  inset-inline-end: 0;
+  inset-inline-end: calc(50% - var(--cds-popover-offset, 0rem));
   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;
-  inset-inline-start: auto;
-}
-
-.cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
-  inset-block-end: 0;
-  inset-inline-end: auto;
-  inset-inline-start: 0;
-  transform: translate(50%, calc(var(--cds-popover-offset, 0rem)));
-}
-
-.cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret {
-  inset-block-end: 0;
-  inset-inline-end: auto;
-  inset-inline-start: 0;
-  transform: translate(50%, calc(-1 * var(--cds-popover-offset, 0rem)));
-}
-
 [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: 0;
+  inset-inline-start: calc(50% - var(--cds-popover-offset, 0rem));
 }
 
 .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
@@ -5658,12 +5666,39 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
 .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,
@@ -5678,11 +5713,38 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
 .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%;
@@ -5696,26 +5758,26 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
 .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
 .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
   inset-block-start: 0;
-  inset-inline-start: 0;
+  inset-inline-start: calc(50% - var(--cds-popover-offset, 0rem));
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
 [dir=rtl] .cds--popover--top-left:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
 [dir=rtl] .cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
-  inset-inline-end: 0;
+  inset-inline-end: calc(50% - var(--cds-popover-offset, 0rem));
   inset-inline-start: initial;
 }
 
 .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
 .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
   inset-block-start: 0;
-  inset-inline-end: 0;
+  inset-inline-end: calc(50% - var(--cds-popover-offset, 0rem));
   transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
 [dir=rtl] .cds--popover--top-right:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
 [dir=rtl] .cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
-  inset-inline-start: 0;
+  inset-inline-start: calc(50% - var(--cds-popover-offset, 0rem));
 }
 
 .cds--popover--top > .cds--popover > .cds--popover-content::before,
@@ -5735,12 +5797,39 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
 .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,
@@ -5755,11 +5844,38 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
 .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%;
@@ -5806,12 +5922,20 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
 .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,
@@ -5822,15 +5946,80 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
   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%;
@@ -5878,12 +6067,20 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
 .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,
@@ -5894,20 +6091,100 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
   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;
 }
 
+.cds--popover--tab-tip.cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
+.cds--popover--tab-tip.cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
+[dir=rtl] .cds--popover--tab-tip.cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
+[dir=rtl] .cds--popover--tab-tip.cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
+  inset-inline-start: 0;
+}
+
+.cds--popover--tab-tip.cds--popover--top-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
+.cds--popover--tab-tip.cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
+[dir=rtl] .cds--popover--tab-tip.cds--popover--top-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content,
+[dir=rtl] .cds--popover--tab-tip.cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
+  inset-inline-end: 0;
+  inset-inline-start: initial;
+}
+
 .cds--popover--tab-tip .cds--popover {
   will-change: filter;
 }
@@ -7245,6 +7522,7 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
   background-color: transparent;
 }
 .cds--content-switcher-btn.cds--content-switcher--selected:disabled {
+  border-radius: 0.25rem;
   background-color: var(--cds-button-disabled, #c6c6c6);
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
@@ -8669,6 +8947,12 @@ li.cds--accordion__item--disabled:last-of-type {
   margin-block-start: 0;
 }
 
+.cds--overflow-menu--xs {
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  min-block-size: 1.5rem;
+}
+
 .cds--overflow-menu--sm {
   block-size: 2rem;
   inline-size: 2rem;
@@ -8731,7 +9015,7 @@ li.cds--accordion__item--disabled:last-of-type {
   align-items: flex-start;
   background-color: var(--cds-layer);
   inline-size: 10rem;
-  inset-block-start: 32px;
+  inset-block-start: 2rem;
   inset-inline-start: 0;
   list-style: none;
 }
@@ -8796,6 +9080,13 @@ li.cds--accordion__item--disabled:last-of-type {
   inset-inline-start: -0.375rem;
 }
 
+.cds--overflow-menu-options--xs.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--xs.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
+  inline-size: 1.5rem;
+}
+.cds--overflow-menu-options--xs.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--xs.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
+  block-size: 1.5rem;
+}
+
 .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
   inline-size: 2rem;
 }
@@ -8850,6 +9141,10 @@ li.cds--accordion__item--disabled:last-of-type {
   box-sizing: inherit;
 }
 
+.cds--overflow-menu-options--xs .cds--overflow-menu-options__option {
+  block-size: 1.5rem;
+}
+
 .cds--overflow-menu-options--sm .cds--overflow-menu-options__option {
   block-size: 2rem;
 }
@@ -10140,6 +10435,7 @@ html[dir=rtl] .iot--data-state-grid > *:first-child {
 .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 > *,
@@ -19840,7 +20136,7 @@ div.iot--card-edit-form--data-item-list .iot--list-item--content--values--value_
   font-weight: var(--cds-code-01-font-weight, 400);
   line-height: var(--cds-code-01-line-height, 1.33333);
   letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
-  padding-inline-end: 0.5rem;
+  padding-inline-end: 2rem;
 }
 
 .cds--snippet--single pre,
@@ -19892,23 +20188,15 @@ div.iot--card-edit-form--data-item-list .iot--list-item--content--values--value_
 }
 
 .cds--snippet--multi .cds--snippet-container pre {
-  padding-inline-end: 2.5rem;
+  overflow: auto;
+  padding-block-end: 1.5rem;
+  padding-inline-end: 1.5rem;
 }
 
 .cds--snippet--multi.cds--snippet--no-copy .cds--snippet-container pre {
   padding-inline-end: 0;
 }
 
-.cds--snippet--multi.cds--snippet--has-right-overflow::after {
-  position: absolute;
-  background-image: linear-gradient(to right, transparent, var(--cds-layer));
-  block-size: 100%;
-  content: "";
-  inline-size: 1rem;
-  inset-block-start: 0;
-  inset-inline-end: 1rem;
-}
-
 [dir=rtl] .cds--snippet--multi.cds--snippet--has-right-overflow::after {
   background-image: linear-gradient(to left, transparent, var(--cds-layer));
 }
@@ -20075,11 +20363,6 @@ div.iot--card-edit-form--data-item-list .iot--list-item--content--values--value_
   background-color: var(--cds-layer-active);
 }
 
-.cds--snippet--light.cds--snippet--single::after,
-.cds--snippet--light.cds--snippet--multi::after {
-  background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
-}
-
 .cds--snippet.cds--skeleton .cds--snippet-container {
   block-size: 100%;
   inline-size: 100%;
@@ -20105,72 +20388,41 @@ div.iot--card-edit-form--data-item-list .iot--list-item--content--values--value_
   inset-inline: 50% auto;
 }
 
-.cds--snippet__overflow-indicator--left,
-.cds--snippet__overflow-indicator--right {
-  z-index: 1;
-  flex: 1 0 auto;
-  inline-size: 1rem;
-}
-
-.cds--snippet__overflow-indicator--left {
-  order: 0;
-  background-image: linear-gradient(to left, transparent, var(--cds-layer));
-  margin-inline-end: -1rem;
-}
-
-.cds--snippet__overflow-indicator--right {
-  order: 2;
-  background-image: linear-gradient(to right, transparent, var(--cds-layer));
-  margin-inline-start: -1rem;
-}
-
-[dir=rtl] .cds--snippet__overflow-indicator--left {
-  background-image: linear-gradient(to right, transparent, var(--cds-layer));
-}
-
-[dir=rtl] .cds--snippet__overflow-indicator--right {
-  background-image: linear-gradient(to left, transparent, var(--cds-layer));
-}
-
-.cds--snippet--single .cds--snippet__overflow-indicator--right,
-.cds--snippet--single .cds--snippet__overflow-indicator--left {
-  position: absolute;
-  block-size: calc(100% - 0.25rem);
-  inline-size: 2rem;
-}
-
-.cds--snippet--single .cds--snippet__overflow-indicator--right {
-  inset-inline-end: 2.5rem;
+.cds--snippet--single .cds--snippet-container {
+  -webkit-mask-image: linear-gradient(to right, #000000 calc(100% - 2rem), transparent 100%);
+          mask-image: linear-gradient(to right, #000000 calc(100% - 2rem), transparent 100%);
+  pointer-events: auto;
 }
 
-.cds--snippet--single.cds--snippet--no-copy .cds--snippet__overflow-indicator--right {
-  inset-inline-end: 0;
+.cds--snippet--multi {
+  position: relative;
 }
 
-.cds--snippet--single .cds--snippet-container:focus ~ .cds--snippet__overflow-indicator--right {
-  inset-inline-end: calc(2.5rem + 0.125rem);
+.cds--snippet--multi .cds--snippet-container {
+  inline-size: 100%;
+  -webkit-mask-composite: source-in, xor;
+          mask-composite: intersect;
+  -webkit-mask-image: linear-gradient(to right, #000000 calc(100% - 2rem), transparent 100%), linear-gradient(to bottom, #000000 calc(100% - 1rem), transparent 100%);
+          mask-image: linear-gradient(to right, #000000 calc(100% - 2rem), transparent 100%), linear-gradient(to bottom, #000000 calc(100% - 1rem), transparent 100%);
+  pointer-events: auto;
 }
 
-.cds--snippet--single .cds--snippet-container:focus + .cds--snippet__overflow-indicator--left {
-  inset-inline-start: 0.125rem;
+[dir=rtl] .cds--snippet--single .cds--snippet-container {
+  -webkit-mask-image: linear-gradient(to left, #000000 calc(100% - 2rem), transparent 100%);
+          mask-image: linear-gradient(to left, #000000 calc(100% - 2rem), transparent 100%);
 }
 
-.cds--snippet--light .cds--snippet__overflow-indicator--left {
-  background-image: linear-gradient(to left, transparent, var(--cds-layer));
+[dir=rtl] .cds--snippet--multi .cds--snippet-container {
+  -webkit-mask-image: linear-gradient(to left, #000000 calc(100% - 2rem), transparent 100%), linear-gradient(to bottom, #000000 calc(100% - 1rem), transparent 100%);
+          mask-image: linear-gradient(to left, #000000 calc(100% - 2rem), transparent 100%), linear-gradient(to bottom, #000000 calc(100% - 1rem), transparent 100%);
 }
 
-.cds--snippet--light .cds--snippet__overflow-indicator--right {
-  background-image: linear-gradient(to right, transparent, var(--cds-layer));
+.cds--snippet--single:focus-within .cds--snippet-container,
+.cds--snippet--multi:focus-within .cds--snippet-container {
+  -webkit-mask-image: none;
+          mask-image: none;
 }
 
-@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
-  .cds--snippet__overflow-indicator--left {
-    background-image: linear-gradient(to left, rgba(var(--cds-layer), 0), var(--cds-layer));
-  }
-  .cds--snippet__overflow-indicator--right {
-    background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
-  }
-}
 .cds--snippet--multi.cds--skeleton {
   block-size: 6.125rem;
 }
@@ -26448,17 +26700,51 @@ button.iot--overflow-menu-icon.cds--btn--icon-only.cds--tooltip__trigger:hover s
   inline-size: 100vw;
   inset-block-start: 0;
   inset-inline-start: 0;
+}
+.cds--modal.cds--modal--enable-presence {
+  animation: cds--presence-modal__enter 240ms cubic-bezier(0, 0, 0.3, 1) forwards;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .cds--modal.cds--modal--enable-presence {
+    animation: none;
+  }
+}
+.cds--modal.cds--modal--enable-presence[data-exiting] {
+  animation: cds--presence-modal__exit 240ms cubic-bezier(0.4, 0.14, 1, 1) forwards;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .cds--modal.cds--modal--enable-presence[data-exiting] {
+    animation: none;
+  }
+}
+@keyframes cds--presence-modal__enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes cds--presence-modal__exit {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.cds--modal:not(.cds--modal--enable-presence) {
   opacity: 0;
   transition: opacity 240ms cubic-bezier(0.4, 0.14, 1, 1), visibility 0ms linear 240ms;
   visibility: hidden;
 }
-.cds--modal.is-visible {
+.cds--modal:not(.cds--modal--enable-presence).is-visible {
   opacity: 1;
   transition: opacity 240ms cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear;
   visibility: inherit;
 }
 @media screen and (prefers-reduced-motion: reduce) {
-  .cds--modal.is-visible {
+  .cds--modal:not(.cds--modal--enable-presence).is-visible {
     transition: none;
   }
 }
@@ -26498,10 +26784,47 @@ button.iot--overflow-menu-icon.cds--btn--icon-only.cds--tooltip__trigger:hover s
   border-inline-start: 2px solid var(--cds-focus, #0f62fe);
 }
 
-.cds--modal.is-visible .cds--modal-container {
+.cds--modal--enable-presence[data-exiting] .cds--modal-container {
+  animation: cds--presence-modal-container__exit 240ms cubic-bezier(0.4, 0.14, 1, 1) forwards;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .cds--modal--enable-presence[data-exiting] .cds--modal-container {
+    animation: none;
+  }
+}
+.cds--modal--enable-presence .cds--modal-container {
+  animation: cds--presence-modal-container__enter 240ms cubic-bezier(0, 0, 0.3, 1) forwards;
+}
+@media screen and (prefers-reduced-motion: reduce) {
+  .cds--modal--enable-presence .cds--modal-container {
+    animation: none;
+  }
+}
+@keyframes cds--presence-modal-container__enter {
+  from {
+    transform: translate3d(0, -24px, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes cds--presence-modal-container__exit {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(0, -24px, 0);
+  }
+}
+
+:not(.cds--modal--enable-presence).is-visible .cds--modal-container {
   transform: translate3d(0, 0, 0);
   transition: transform 240ms cubic-bezier(0, 0, 0.3, 1);
 }
+:not(.cds--modal--enable-presence) .cds--modal-container {
+  transform: translate3d(0, -24px, 0);
+  transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
+}
 
 .cds--modal-container {
   position: fixed;
@@ -26515,13 +26838,11 @@ button.iot--overflow-menu-icon.cds--btn--icon-only.cds--tooltip__trigger:hover s
   max-block-size: 100%;
   outline: 3px solid transparent;
   outline-offset: -3px;
-  transform: translate3d(0, -24px, 0);
   transform-origin: top center;
-  transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
 }
 @media (min-width: 42rem) {
   .cds--modal-container {
-    position: static;
+    position: relative;
     block-size: auto;
     inline-size: 84%;
     max-block-size: 90%;
@@ -26708,6 +27029,14 @@ button.iot--overflow-menu-icon.cds--btn--icon-only.cds--tooltip__trigger:hover s
           mask-image: linear-gradient(to bottom, var(--cds-layer) calc(100% - 80px), transparent calc(100% - 48px), transparent 100%), linear-gradient(to left, var(--cds-layer) 0, 16px, transparent 16px), linear-gradient(to right, var(--cds-layer) 0, 2px, transparent 2px), linear-gradient(to top, var(--cds-layer) 0, 2px, transparent 2px);
 }
 
+.cds--modal--slug .cds--modal-content.cds--modal-scroll-content.cds--modal-scroll-content--no-fade,
+.cds--modal--decorator .cds--modal-content.cds--modal-scroll-content.cds--modal-scroll-content--no-fade,
+.cds--modal-scroll-content.cds--modal-scroll-content--no-fade,
+.cds--modal-scroll-content--no-fade {
+  -webkit-mask-image: none;
+          mask-image: none;
+}
+
 .cds--modal-scroll-content:has(.cds--autoalign) {
   -webkit-mask-image: none;
           mask-image: none;
@@ -30334,7 +30663,6 @@ html[dir=rtl] .iot--menu-button__menu .cds--menu-option__info {
 .cds--number input[type=number]:disabled,
 .cds--number input[type=text]:disabled {
   background-color: var(--cds-field);
-  border-block-end-color: transparent;
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   cursor: not-allowed;
 }
@@ -31489,11 +31817,14 @@ html[dir=rtl] .cds--number .cds--number__controls {
 }
 
 .cds--progress-bar--error .cds--progress-bar__bar,
-.cds--progress-bar--error .cds--progress-bar__status-icon,
-.cds--progress-bar--error .cds--progress-bar__helper-text {
+.cds--progress-bar--error .cds--progress-bar__status-icon {
   color: var(--cds-support-error, #da1e28);
 }
 
+.cds--progress-bar--error .cds--progress-bar__helper-text {
+  color: var(--cds-text-error, #da1e28);
+}
+
 .cds--progress-bar--finished .cds--progress-bar__bar,
 .cds--progress-bar--error .cds--progress-bar__bar {
   transform: scaleX(1);
@@ -31683,6 +32014,8 @@ html[dir=rtl] .cds--number .cds--number__controls {
   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;
@@ -31692,7 +32025,7 @@ html[dir=rtl] .cds--number .cds--number__controls {
 .cds--pagination *::after {
   box-sizing: inherit;
 }
-@media (min-width: 42rem) {
+@container pagination (min-width: 42rem) {
   .cds--pagination {
     overflow: initial;
   }
@@ -31700,7 +32033,7 @@ html[dir=rtl] .cds--number .cds--number__controls {
     display: flex;
   }
 }
-@media (max-width: 41.98rem) {
+@container pagination (max-width: 42rem) {
   .cds--pagination .cds--pagination__left > *,
   .cds--pagination .cds--pagination__right > * {
     display: none;
@@ -31741,6 +32074,12 @@ html[dir=rtl] .cds--number .cds--number__controls {
   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;
@@ -31817,13 +32156,13 @@ html[dir=rtl] .cds--number .cds--number__controls {
 .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;
   }
@@ -31960,6 +32299,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;
 }
@@ -31973,7 +32314,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;
   }
@@ -32104,7 +32445,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;
@@ -33402,6 +33743,11 @@ html[dir=rtl] .iot--rule-builder-rule--group:after {
 .cds--search-input::-ms-clear {
   display: none;
 }
+.cds--search-input::-webkit-search-decoration, .cds--search-input::-webkit-search-cancel-button, .cds--search-input::-webkit-search-results-button, .cds--search-input::-webkit-search-results-decoration {
+  display: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
 
 .cds--search-input[disabled] {
   background-color: var(--cds-field);
@@ -35833,6 +36179,13 @@ html[dir=rtl] .iot--row-actions-container__background .iot--row-actions-cell--ov
   margin-inline-end: 0.5rem;
 }
 
+:host([slot=label-text]) .cds--toggletip-label {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+}
+
 .cds--toggletip-button {
   box-sizing: border-box;
   padding: 0;
@@ -39691,10 +40044,6 @@ button.cds--btn.iot--tooltip-svg-wrapper.cds--btn--ghost.iot--table-toolbar__adv
   }
 }
 
-.cds--tab-content--interactive:focus {
-  outline: none;
-}
-
 .cds--tabs.cds--skeleton {
   cursor: default;
   pointer-events: none;
@@ -40743,7 +41092,7 @@ html[dir=rtl] .cds--tile__checkmark {
   background-color: transparent;
 }
 .cds--toggle--readonly .cds--toggle__switch::before {
-  background-color: var(--cds-text-primary, #161616);
+  background-color: var(--cds-icon-primary, #161616);
   inset-block-start: 0.125rem;
   inset-inline-start: 0.125rem;
 }