@carbon/styles 1.92.0-rc.0 → 1.92.0

package/css/styles.css

@@ -4148,8 +4148,8 @@ li.cds--accordion__item--disabled:last-of-type {
   --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--caret {
@@ -4159,7 +4159,6 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--popover {
   position: absolute;
   z-index: 6000;
-  filter: var(--cds-popover-drop-shadow, none);
   inset: 0;
   pointer-events: none;
 }
@@ -4249,20 +4248,20 @@ li.cds--accordion__item--disabled:last-of-type {
 .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)));
 }
 
@@ -4270,26 +4269,21 @@ li.cds--accordion__item--disabled:last-of-type {
 .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)));
+  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: 0;
+  inset-inline-start: calc(50% - var(--cds-popover-offset, 0rem));
 }
 
 .cds--popover--bottom > .cds--popover > .cds--popover-content::before,
@@ -4347,26 +4341,26 @@ li.cds--accordion__item--disabled:last-of-type {
 .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,
@@ -4559,6 +4553,21 @@ li.cds--accordion__item--disabled:last-of-type {
   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;
 }
@@ -8082,7 +8091,7 @@ fieldset[disabled] .cds--form__helper-text {
   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,
@@ -8134,23 +8143,15 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .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));
 }
@@ -8317,11 +8318,6 @@ fieldset[disabled] .cds--form__helper-text {
   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%;
@@ -8347,72 +8343,41 @@ fieldset[disabled] .cds--form__helper-text {
   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;
 }
@@ -26456,15 +26421,6 @@ div:has(.cds--header) ~ .cds--content {
   z-index: 8001;
 }
 
-.cds--header .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
-.cds--header .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
-  inset-inline-start: 1rem;
-}
-.cds--header .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
-.cds--header .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
-  inset-inline-end: 1rem;
-}
-
 .cds--header__action > :first-child {
   margin-block-start: 0;
 }
@@ -27481,15 +27437,6 @@ div:has(.cds--header) ~ .cds--content {
   z-index: 8001;
 }
 
-.cds--header .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
-.cds--header .cds--popover--bottom-start:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
-  inset-inline-start: 1rem;
-}
-.cds--header .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-caret,
-.cds--header .cds--popover--bottom-end:not(.cds--popover--auto-align) > .cds--popover > .cds--popover-content {
-  inset-inline-end: 1rem;
-}
-
 .cds--header__action > :first-child {
   margin-block-start: 0;
 }