@carbon/styles 1.35.0 → 1.36.0

package/css/styles.css

@@ -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 .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 .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 .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 .cds--popover-content::before,
-.cds--popover--bottom-left > .cds--popover .cds--popover-content::before,
-.cds--popover--bottom-right > .cds--popover .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 .cds--popover-caret,
-.cds--popover--bottom-left > .cds--popover .cds--popover-caret,
-.cds--popover--bottom-right > .cds--popover .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 .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 .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 .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 .cds--popover-content::before,
-.cds--popover--top-left > .cds--popover .cds--popover-content::before,
-.cds--popover--top-right > .cds--popover .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 .cds--popover-caret,
-.cds--popover--top-left > .cds--popover .cds--popover-caret,
-.cds--popover--top-right > .cds--popover .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 .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 .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 .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 .cds--popover-content::before,
-.cds--popover--right-top > .cds--popover .cds--popover-content::before,
-.cds--popover--right-bottom > .cds--popover .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 .cds--popover-caret,
-.cds--popover--right-top > .cds--popover .cds--popover-caret,
-.cds--popover--right-bottom > .cds--popover .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 .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 .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 .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 .cds--popover-content::before,
-.cds--popover--left-top > .cds--popover .cds--popover-content::before,
-.cds--popover--left-bottom > .cds--popover .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 .cds--popover-caret,
-.cds--popover--left-top > .cds--popover .cds--popover-caret,
-.cds--popover--left-bottom > .cds--popover .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 .cds--popover-content {
+.cds--popover--tab-tip > .cds--popover > .cds--popover-content {
   border-radius: 0;
 }
 
@@ -4436,14 +4436,14 @@ li.cds--accordion__item--disabled:last-of-type {
   padding-inline-end: calc(var(--cds-layout-density-padding-inline-local) - 0.0625rem);
 }
 .cds--btn--ghost:hover {
-  background-color: var(--cds-layer-hover);
+  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
 }
 .cds--btn--ghost:focus {
   border-color: var(--cds-button-focus-color, var(--cds-focus, #0f62fe));
   box-shadow: inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, #0f62fe)), inset 0 0 0 2px var(--cds-background, #ffffff);
 }
 .cds--btn--ghost:active {
-  background-color: var(--cds-layer-active);
+  background-color: var(--cds-background-active, rgba(141, 141, 141, 0.5));
 }
 .cds--btn--ghost .cds--btn__icon,
 .cds--btn--ghost .cds--btn__icon path:not([data-icon-path]):not([fill=none]) {
@@ -10167,7 +10167,7 @@ tr.cds--data-table--selected:last-of-type td {
 }
 
 .cds--data-table--sticky-header {
-  max-height: rem(300px);
+  max-height: 18.75rem;
 }
 
 .cds--data-table .cds--form-item.cds--checkbox-wrapper:last-of-type {
@@ -11221,8 +11221,8 @@ tr.cds--data-table--selected:last-of-type td {
 .cds--table-toolbar--sm .cds--btn--primary {
   height: 2rem;
   min-height: auto;
-  padding-top: calc(0.375rem - 3px);
-  padding-bottom: calc(0.375rem - 3px);
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
 }
 
 .cds--table-toolbar--sm .cds--btn--primary.cds--batch-summary__cancel::before {
@@ -14433,6 +14433,8 @@ button.cds--dropdown-text:focus {
   border: 0;
   border-bottom: 0.0625rem solid var(--cds-border-strong);
   -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+          appearance: textfield;
   background-color: var(--cds-field);
   border-radius: 0;
   color: var(--cds-text-primary, #161616);
@@ -16478,6 +16480,9 @@ optgroup.cds--select-optgroup:disabled,
 .cds--modal .cds--number__control-btn::after {
   background-color: var(--cds-field-02, #ffffff);
 }
+.cds--modal .cds--list-box__menu {
+  background-color: var(--cds-layer-02, #ffffff);
+}
 .cds--modal .cds--number__rule-divider {
   background-color: var(--cds-border-subtle-02, #e0e0e0);
 }
@@ -16485,10 +16490,10 @@ optgroup.cds--select-optgroup:disabled,
   border-top-color: var(--cds-border-subtle-02, #e0e0e0);
 }
 .cds--modal .cds--list-box__menu-item:hover .cds--list-box__menu-item__option {
-  border-top-color: var(--cds-layer-hover);
+  border-top-color: var(--cds-layer-hover-02, #e8e8e8);
 }
 .cds--modal .cds--list-box__menu-item--active:hover .cds--list-box__menu-item__option {
-  border-top-color: var(--cds-layer-selected-hover);
+  border-top-color: var(--cds-layer-selected-hover-02, #d1d1d1);
 }
 .cds--modal .cds--text-input--fluid .cds--text-input,
 .cds--modal .cds--text-area--fluid .cds--text-area__wrapper,
@@ -16504,6 +16509,18 @@ optgroup.cds--select-optgroup:disabled,
 .cds--modal .cds--date-picker--fluid .ccdsds--date-picker-input__wrapper .cds--date-picker__input {
   background-color: var(--cds-field-01, #f4f4f4);
 }
+.cds--modal .cds--list-box__wrapper--fluid .cds--list-box__menu {
+  background-color: var(--cds-layer-01, #f4f4f4);
+}
+.cds--modal .cds--list-box__menu-item:hover {
+  background-color: var(--cds-layer-hover-02, #e8e8e8);
+}
+.cds--modal .cds--list-box__menu-item--active {
+  background-color: var(--cds-layer-selected-02, #e0e0e0);
+}
+.cds--modal .cds--list-box__menu-item--active:hover {
+  background-color: var(--cds-layer-selected-hover-02, #d1d1d1);
+}
 .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::before,
 .cds--modal .cds--number-input--fluid .cds--number__control-btn:hover::after {
   background-color: var(--cds-field-hover);
@@ -17807,7 +17824,9 @@ optgroup.cds--select-optgroup:disabled,
   padding-right: 1rem;
   padding-left: 1rem;
   margin-bottom: 1rem;
-  margin-left: calc(2rem + 1.25rem - 0.125rem);
+  margin-left: calc(
+      2rem + 1.25rem - 0.125rem
+    );
 }
 
 .cds--actionable-notification:not(.cds--actionable-notification--low-contrast) .cds--actionable-notification__action-button.cds--btn--tertiary {
@@ -19281,6 +19300,8 @@ span.cds--pagination__text.cds--pagination__items-count {
   width: 4rem;
   height: 2.5rem;
   -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+          appearance: textfield;
 }
 .cds--slider-text-input::-webkit-outer-spin-button, .cds--slider-text-input::-webkit-inner-spin-button,
 .cds-slider-text-input::-webkit-outer-spin-button,
@@ -20384,8 +20405,8 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--tile--clickable .cds--tile--icon,
 .cds--tile--clickable.cds--link--disabled .cds--tile--disabled-icon {
   position: absolute;
-  right: var(--cds-layout-density-padding-inline-local);
-  bottom: var(--cds-layout-density-padding-inline-local);
+  inset-block-end: var(--cds-layout-density-padding-inline-local);
+  inset-inline-end: var(--cds-layout-density-padding-inline-local);
 }
 
 .cds--tile--clickable .cds--tile--icon {
@@ -20407,11 +20428,11 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--tile__checkmark {
   position: absolute;
-  top: var(--cds-layout-density-padding-inline-local);
-  right: var(--cds-layout-density-padding-inline-local);
   height: 1rem;
   border: none;
   background: transparent;
+  inset-block-start: var(--cds-layout-density-padding-inline-local);
+  inset-inline-end: var(--cds-layout-density-padding-inline-local);
   opacity: 0;
   transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
@@ -20435,13 +20456,13 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--tile__chevron {
   position: absolute;
-  right: 0;
-  bottom: 0;
   display: flex;
   width: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
   height: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
   align-items: center;
   justify-content: center;
+  inset-block-end: 0;
+  inset-inline-end: 0;
 }
 .cds--tile__chevron svg {
   fill: var(--cds-icon-primary, #161616);
@@ -20478,13 +20499,13 @@ span.cds--pagination__text.cds--pagination__items-count {
   text-align: start;
   width: 100%;
   position: absolute;
-  right: 0;
-  bottom: 0;
   display: flex;
   width: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
   height: calc(var(--cds-layout-density-padding-inline-local) * 2 + 1rem);
   align-items: center;
   justify-content: center;
+  inset-block-end: 0;
+  inset-inline-end: 0;
 }
 .cds--tile__chevron--interactive *,
 .cds--tile__chevron--interactive *::before,
@@ -20512,7 +20533,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   cursor: pointer;
   font-family: inherit;
   font-size: inherit;
-  text-align: left;
+  text-align: start;
   transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);