@carbon/styles 1.34.1 → 1.35.0-rc.0

package/css/styles.css

@@ -2612,21 +2612,6 @@ em {
   --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
 }
 
-:root {
-  --cds-layout-size-height-xs: 1.5rem;
-  --cds-layout-size-height-sm: 2rem;
-  --cds-layout-size-height-md: 2.5rem;
-  --cds-layout-size-height-lg: 3rem;
-  --cds-layout-size-height-xl: 4rem;
-  --cds-layout-size-height-2xl: 5rem;
-  --cds-layout-size-height-min: 0px;
-  --cds-layout-size-height-max: 999999999px;
-  --cds-layout-density-padding-inline-condensed: 0.5rem;
-  --cds-layout-density-padding-inline-normal: 1rem;
-  --cds-layout-density-padding-inline-min: 0px;
-  --cds-layout-density-padding-inline-max: 999999999px;
-}
-
 .cds--layout--size-xs {
   --cds-layout-size-height-context: var(--cds-layout-size-height-xs, 1.5rem);
   --cds-layout-size-height: var(--cds-layout-size-height-context);
@@ -2763,6 +2748,21 @@ em {
   --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
 }
 
+:root {
+  --cds-layout-size-height-xs: 1.5rem;
+  --cds-layout-size-height-sm: 2rem;
+  --cds-layout-size-height-md: 2.5rem;
+  --cds-layout-size-height-lg: 3rem;
+  --cds-layout-size-height-xl: 4rem;
+  --cds-layout-size-height-2xl: 5rem;
+  --cds-layout-size-height-min: 0px;
+  --cds-layout-size-height-max: 999999999px;
+  --cds-layout-density-padding-inline-condensed: 0.5rem;
+  --cds-layout-density-padding-inline-normal: 1rem;
+  --cds-layout-density-padding-inline-min: 0px;
+  --cds-layout-density-padding-inline-max: 999999999px;
+}
+
 .cds--white {
   background: var(--cds-background);
   color: var(--cds-text-primary);
@@ -3948,31 +3948,31 @@ li.cds--accordion__item--disabled:last-of-type {
   display: block;
 }
 
-.cds--popover--tab-tip .cds--popover .cds--popover-caret {
+.cds--popover--tab-tip > .cds--popover .cds--popover-caret {
   display: none;
 }
 
-.cds--popover--bottom .cds--popover-content {
+.cds--popover--bottom > .cds--popover .cds--popover-content {
   bottom: 0;
   left: 50%;
   transform: translate(-50%, calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--bottom-left .cds--popover-content {
+.cds--popover--bottom-left > .cds--popover .cds--popover-content {
   bottom: 0;
   left: 0;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--bottom-right .cds--popover-content {
+.cds--popover--bottom-right > .cds--popover .cds--popover-content {
   right: 0;
   bottom: 0;
   transform: translate(var(--cds-popover-offset, 0rem), calc(100% + var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--bottom .cds--popover-content::before,
-.cds--popover--bottom-left .cds--popover-content::before,
-.cds--popover--bottom-right .cds--popover-content::before {
+.cds--popover--bottom > .cds--popover .cds--popover-content::before,
+.cds--popover--bottom-left > .cds--popover .cds--popover-content::before,
+.cds--popover--bottom-right > .cds--popover .cds--popover-content::before {
   top: 0;
   right: 0;
   left: 0;
@@ -3980,9 +3980,9 @@ li.cds--accordion__item--disabled:last-of-type {
   transform: translateY(-100%);
 }
 
-.cds--popover--bottom .cds--popover-caret,
-.cds--popover--bottom-left .cds--popover-caret,
-.cds--popover--bottom-right .cds--popover-caret {
+.cds--popover--bottom > .cds--popover .cds--popover-caret,
+.cds--popover--bottom-left > .cds--popover .cds--popover-caret,
+.cds--popover--bottom-right > .cds--popover .cds--popover-caret {
   bottom: 0;
   left: 50%;
   width: var(--cds-popover-caret-width, 0.75rem);
@@ -3992,27 +3992,27 @@ li.cds--accordion__item--disabled:last-of-type {
   transform: translate(-50%, var(--cds-popover-offset, 0rem));
 }
 
-.cds--popover--top .cds--popover-content {
+.cds--popover--top > .cds--popover .cds--popover-content {
   top: 0;
   left: 50%;
   transform: translate(-50%, calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--top-left .cds--popover-content {
+.cds--popover--top-left > .cds--popover .cds--popover-content {
   top: 0;
   left: 0;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--top-right .cds--popover-content {
+.cds--popover--top-right > .cds--popover .cds--popover-content {
   top: 0;
   right: 0;
   transform: translate(var(--cds-popover-offset, 0rem), calc(-100% - var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--top .cds--popover-content::before,
-.cds--popover--top-left .cds--popover-content::before,
-.cds--popover--top-right .cds--popover-content::before {
+.cds--popover--top > .cds--popover .cds--popover-content::before,
+.cds--popover--top-left > .cds--popover .cds--popover-content::before,
+.cds--popover--top-right > .cds--popover .cds--popover-content::before {
   right: 0;
   bottom: 0;
   left: 0;
@@ -4020,9 +4020,9 @@ li.cds--accordion__item--disabled:last-of-type {
   transform: translateY(100%);
 }
 
-.cds--popover--top .cds--popover-caret,
-.cds--popover--top-left .cds--popover-caret,
-.cds--popover--top-right .cds--popover-caret {
+.cds--popover--top > .cds--popover .cds--popover-caret,
+.cds--popover--top-left > .cds--popover .cds--popover-caret,
+.cds--popover--top-right > .cds--popover .cds--popover-caret {
   top: 0;
   left: 50%;
   width: var(--cds-popover-caret-width, 0.75rem);
@@ -4032,27 +4032,27 @@ li.cds--accordion__item--disabled:last-of-type {
   transform: translate(-50%, calc(-1 * var(--cds-popover-offset, 0rem)));
 }
 
-.cds--popover--right .cds--popover-content {
+.cds--popover--right > .cds--popover .cds--popover-content {
   top: 50%;
   left: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), -50%);
 }
 
-.cds--popover--right-top .cds--popover-content {
+.cds--popover--right-top > .cds--popover .cds--popover-content {
   top: 50%;
   left: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) * -1 - 16px));
 }
 
-.cds--popover--right-bottom .cds--popover-content {
+.cds--popover--right-bottom > .cds--popover .cds--popover-content {
   bottom: 50%;
   left: 100%;
   transform: translate(var(--cds-popover-offset, 0rem), calc(0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
-.cds--popover--right .cds--popover-content::before,
-.cds--popover--right-top .cds--popover-content::before,
-.cds--popover--right-bottom .cds--popover-content::before {
+.cds--popover--right > .cds--popover .cds--popover-content::before,
+.cds--popover--right-top > .cds--popover .cds--popover-content::before,
+.cds--popover--right-bottom > .cds--popover .cds--popover-content::before {
   top: 0;
   bottom: 0;
   left: 0;
@@ -4060,9 +4060,9 @@ li.cds--accordion__item--disabled:last-of-type {
   transform: translateX(-100%);
 }
 
-.cds--popover--right .cds--popover-caret,
-.cds--popover--right-top .cds--popover-caret,
-.cds--popover--right-bottom .cds--popover-caret {
+.cds--popover--right > .cds--popover .cds--popover-caret,
+.cds--popover--right-top > .cds--popover .cds--popover-caret,
+.cds--popover--right-bottom > .cds--popover .cds--popover-caret {
   top: 50%;
   left: 100%;
   width: var(--cds-popover-caret-height, 0.375rem);
@@ -4072,27 +4072,27 @@ li.cds--accordion__item--disabled:last-of-type {
   transform: translate(calc(var(--cds-popover-offset, 0rem) - 100%), -50%);
 }
 
-.cds--popover--left .cds--popover-content {
+.cds--popover--left > .cds--popover .cds--popover-content {
   top: 50%;
   right: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 0.1px), -50%);
 }
 
-.cds--popover--left-top .cds--popover-content {
+.cds--popover--left-top > .cds--popover .cds--popover-content {
   top: -50%;
   right: 100%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
-.cds--popover--left-bottom .cds--popover-content {
+.cds--popover--left-bottom > .cds--popover .cds--popover-content {
   right: 100%;
   bottom: -50%;
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
 }
 
-.cds--popover--left .cds--popover-content::before,
-.cds--popover--left-top .cds--popover-content::before,
-.cds--popover--left-bottom .cds--popover-content::before {
+.cds--popover--left > .cds--popover .cds--popover-content::before,
+.cds--popover--left-top > .cds--popover .cds--popover-content::before,
+.cds--popover--left-bottom > .cds--popover .cds--popover-content::before {
   top: 0;
   right: 0;
   bottom: 0;
@@ -4100,9 +4100,9 @@ li.cds--accordion__item--disabled:last-of-type {
   transform: translateX(100%);
 }
 
-.cds--popover--left .cds--popover-caret,
-.cds--popover--left-top .cds--popover-caret,
-.cds--popover--left-bottom .cds--popover-caret {
+.cds--popover--left > .cds--popover .cds--popover-caret,
+.cds--popover--left-top > .cds--popover .cds--popover-caret,
+.cds--popover--left-bottom > .cds--popover .cds--popover-caret {
   top: 50%;
   right: 100%;
   width: var(--cds-popover-caret-height, 0.375rem);
@@ -4112,7 +4112,7 @@ li.cds--accordion__item--disabled:last-of-type {
   transform: translate(calc(-1 * var(--cds-popover-offset, 0rem) + 100%), -50%);
 }
 
-.cds--popover--tab-tip .cds--popover-content {
+.cds--popover--tab-tip > .cds--popover .cds--popover-content {
   border-radius: 0;
 }
 
@@ -4304,10 +4304,8 @@ li.cds--accordion__item--disabled:last-of-type {
   cursor: pointer;
   outline: none;
   padding-block: min((var(--cds-layout-size-height-local) - var(--temp-1lh)) / 2 - 0.0625rem, var(--temp-padding-block-max));
-  -webkit-padding-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
-          padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
-  -webkit-padding-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
-          padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
+  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 3 + 1rem - 0.0625rem);
+  padding-inline-start: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
   text-align: left;
   text-decoration: none;
   transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
@@ -4332,8 +4330,7 @@ li.cds--accordion__item--disabled:last-of-type {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
-  -webkit-margin-before: 0.0625rem;
-          margin-block-start: 0.0625rem;
+  margin-block-start: 0.0625rem;
 }
 
 .cds--btn::-moz-focus-inner {
@@ -4436,8 +4433,7 @@ li.cds--accordion__item--disabled:last-of-type {
   border-color: transparent;
   background-color: transparent;
   color: var(--cds-link-primary, #0f62fe);
-  -webkit-padding-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
-          padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
+  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
 }
 .cds--btn--ghost:hover {
   background-color: var(--cds-layer-hover);
@@ -4478,13 +4474,11 @@ li.cds--accordion__item--disabled:last-of-type {
   height: var(--cds-layout-size-height-local);
   justify-content: center;
   padding: 0;
-  -webkit-padding-before: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
-          padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
+  padding-block-start: min((var(--cds-layout-size-height-local) - 1rem) / 2 - 0.0625rem, var(--temp-padding-block-max));
 }
 .cds--btn--icon-only > :first-child {
   min-width: 1rem;
-  -webkit-margin-before: 0.0625rem;
-          margin-block-start: 0.0625rem;
+  margin-block-start: 0.0625rem;
 }
 .cds--btn--icon-only .cds--btn__icon {
   position: static;
@@ -4593,8 +4587,7 @@ li.cds--accordion__item--disabled:last-of-type {
   border-color: transparent;
   background-color: transparent;
   color: var(--cds-button-danger-secondary, #da1e28);
-  -webkit-padding-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
-          padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
+  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
 }
 .cds--btn--danger--ghost:hover {
   background-color: var(--cds-button-danger-hover, #b81921);
@@ -4808,8 +4801,7 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 
 .cds--overflow-menu > :first-child {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
+  margin-block-start: 0;
 }
 
 .cds--overflow-menu--sm {
@@ -6414,8 +6406,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--btn > .cds--snippet__icon {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
+  margin-block-start: 0;
 }
 
 .cds--copy-btn {
@@ -8799,8 +8790,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--contained-list--on-page + .cds--contained-list--on-page {
-  -webkit-margin-before: 1rem;
-          margin-block-start: 1rem;
+  margin-block-start: 1rem;
 }
 
 .cds--contained-list--on-page .cds--contained-list__header {
@@ -8834,6 +8824,7 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--contained-list-item {
   position: relative;
+  display: list-item;
   list-style: none;
 }
 
@@ -8935,8 +8926,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--contained-list-item--with-action .cds--contained-list-item__content {
-  -webkit-padding-end: 4rem;
-          padding-inline-end: 4rem;
+  padding-inline-end: 4rem;
 }
 
 .cds--contained-list__action,
@@ -10656,6 +10646,7 @@ tr.cds--data-table--selected:last-of-type td {
 
 .cds--table-toolbar {
   position: relative;
+  z-index: 1;
   display: flex;
   width: 100%;
   min-height: 3rem;
@@ -11018,6 +11009,7 @@ tr.cds--data-table--selected:last-of-type td {
   background-color: var(--cds-background-brand, #0f62fe);
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
           clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+  opacity: 0;
   pointer-events: none;
   transform: translate3d(0, 48px, 0);
   transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), -webkit-clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -11036,8 +11028,10 @@ tr.cds--data-table--selected:last-of-type td {
 }
 
 .cds--batch-actions--active {
-  -webkit-clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
-          clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
+  z-index: 1;
+  -webkit-clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%);
+          clip-path: polygon(0 0, 300% 0, 300% 300%, 0 300%);
+  opacity: 1;
   pointer-events: all;
   transform: translate3d(0, 0, 0);
 }
@@ -11277,7 +11271,7 @@ tr.cds--parent-row.cds--expandable-row + tr[data-child-row] {
 }
 
 tr.cds--parent-row.cds--expandable-row + tr[data-child-row] td {
-  padding-left: 4rem;
+  padding-left: 3.5rem;
   border-bottom: 1px solid var(--cds-border-subtle);
   transition: padding-bottom 110ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
@@ -18154,8 +18148,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--pagination__button > svg,
 .cds--btn--ghost.cds--pagination__button > svg {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
+  margin-block-start: 0;
 }
 
 .cds--pagination--sm .cds--pagination__button,
@@ -18622,8 +18615,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   min-width: 3rem;
   justify-content: space-between;
   color: var(--cds-text-primary, #161616);
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 
 .cds--progress-bar__label-text {
@@ -18682,8 +18674,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--progress-bar__status-icon {
   flex-shrink: 0;
-  -webkit-margin-start: var(--cds-layout-density-padding-inline-local);
-          margin-inline-start: var(--cds-layout-density-padding-inline-local);
+  margin-inline-start: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--progress-bar--finished .cds--progress-bar__bar,
@@ -18720,8 +18711,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--progress-bar--error.cds--progress-bar--inline .cds--progress-bar__label {
   flex-shrink: 1;
   justify-content: flex-start;
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
+  margin-inline-end: 0;
 }
 
 @keyframes progress-bar-indeterminate {
@@ -18740,8 +18730,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--progress-bar--inline .cds--progress-bar__label {
   flex-shrink: 0;
   margin-bottom: 0;
-  -webkit-margin-end: var(--cds-layout-density-padding-inline-local);
-          margin-inline-end: var(--cds-layout-density-padding-inline-local);
+  margin-inline-end: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--progress-bar--inline .cds--progress-bar__track {
@@ -20041,8 +20030,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   margin-top: -2px;
 }
 .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
-  -webkit-padding-start: var(--cds-layout-density-padding-inline-local);
-          padding-inline-start: var(--cds-layout-density-padding-inline-local);
+  padding-inline-start: var(--cds-layout-density-padding-inline-local);
 }
 .cds--tabs .cds--tabs__nav-link {
   box-sizing: border-box;
@@ -20413,8 +20401,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--tile--selectable {
   border: 1px solid transparent;
-  -webkit-padding-end: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
-          padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
+  padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
 }
 
 .cds--tile__checkmark {
@@ -21391,8 +21378,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--header__action > :first-child {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
+  margin-block-start: 0;
 }
 
 .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
@@ -22416,8 +22402,7 @@ a.cds--side-nav__link--current::before {
 }
 
 .cds--header__action > :first-child {
-  -webkit-margin-before: 0;
-          margin-block-start: 0;
+  margin-block-start: 0;
 }
 
 .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,