@carbon/styles 1.14.0 → 1.15.0-rc.0

package/css/styles.css

@@ -3462,6 +3462,7 @@ em {
 }
 
 .cds--accordion__item {
+  display: list-item;
   overflow: visible;
   border-top: 1px solid var(--cds-border-subtle);
   -webkit-transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -3549,6 +3550,9 @@ em {
 
 .cds--accordion--lg .cds--accordion__heading {
   min-height: 3rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 
 .cds--accordion--sm .cds--accordion__heading {
@@ -3601,6 +3605,7 @@ li.cds--accordion__item--disabled:last-of-type {
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   z-index: 1;
   width: 100%;
+  padding-right: 1rem;
   margin: 0 0 0 1rem;
   text-align: left;
 }
@@ -7935,6 +7940,7 @@ fieldset[disabled] .cds--form__helper-text {
 .cds--list-box input[type=text] {
   min-width: 0;
   background-color: inherit;
+  text-overflow: ellipsis;
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
@@ -7986,6 +7992,192 @@ fieldset[disabled] .cds--form__helper-text {
   padding: 0;
 }
 
+.cds--contained-list__header {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding-inline: 1rem;
+}
+
+.cds--contained-list__label {
+  width: 100%;
+}
+
+.cds--contained-list--on-page + .cds--contained-list--on-page {
+  -webkit-margin-before: 1rem;
+          margin-block-start: 1rem;
+}
+
+.cds--contained-list--on-page .cds--contained-list__header {
+  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
+  font-weight: var(--cds-heading-compact-01-font-weight, 600);
+  line-height: var(--cds-heading-compact-01-line-height, 1.28572);
+  letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
+  height: 3rem;
+  border-bottom: 1px solid var(--cds-border-subtle);
+  background-color: var(--cds-background, #ffffff);
+  color: var(--cds-text-primary, #161616);
+}
+
+.cds--layer-two .cds--contained-list--on-page .cds--contained-list__header {
+  background-color: var(--cds-layer-01, #f4f4f4);
+}
+
+.cds--layer-three .cds--contained-list--on-page .cds--contained-list__header {
+  background-color: var(--cds-layer-02, #ffffff);
+}
+
+.cds--contained-list--disclosed .cds--contained-list__header {
+  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);
+  height: 2rem;
+  background-color: var(--cds-layer);
+  color: var(--cds-text-secondary, #525252);
+}
+
+.cds--contained-list-item {
+  position: relative;
+}
+
+.cds--contained-list-item:not(:first-of-type) {
+  margin-top: -1px;
+}
+
+.cds--contained-list-item--clickable .cds--contained-list-item__content {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+  width: 100%;
+  text-align: start;
+  -webkit-transition: background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+.cds--contained-list-item--clickable .cds--contained-list-item__content *,
+.cds--contained-list-item--clickable .cds--contained-list-item__content *::before,
+.cds--contained-list-item--clickable .cds--contained-list-item__content *::after {
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
+}
+.cds--contained-list-item--clickable .cds--contained-list-item__content::-moz-focus-inner {
+  border: 0;
+}
+
+.cds--contained-list-item__content,
+.cds--contained-list-item--clickable .cds--contained-list-item__content {
+  font-size: var(--cds-body-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-01-font-weight, 400);
+  line-height: var(--cds-body-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
+  padding: calc(1rem - 0.125rem) 1rem;
+  color: var(--cds-text-primary, #161616);
+}
+
+.cds--contained-list-item:not(:last-of-type)::before {
+  position: absolute;
+  right: 1rem;
+  bottom: 0;
+  left: 1rem;
+  height: 1px;
+  background-color: var(--cds-border-subtle);
+  content: "";
+}
+
+.cds--contained-list-item--clickable .cds--contained-list-item__content:not(:disabled):hover {
+  background-color: var(--cds-layer-hover);
+}
+
+.cds--contained-list-item--clickable .cds--contained-list-item__content:not(:disabled):active {
+  background-color: var(--cds-layer-active);
+}
+
+.cds--contained-list-item--clickable .cds--contained-list-item__content:disabled {
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  cursor: not-allowed;
+}
+
+.cds--contained-list-item--clickable .cds--contained-list-item__content:focus {
+  outline: none;
+}
+
+.cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+}
+@media screen and (prefers-contrast) {
+  .cds--contained-list-item--clickable .cds--contained-list-item__content:focus::after {
+    outline-style: dotted;
+  }
+}
+
+.cds--contained-list-item--with-action .cds--contained-list-item__content {
+  -webkit-padding-end: 4rem;
+          padding-inline-end: 4rem;
+}
+
+.cds--contained-list__action,
+.cds--contained-list-item__action {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  pointer-events: none;
+}
+
+.cds--contained-list__action > *,
+.cds--contained-list-item__action > * {
+  pointer-events: all;
+}
+
+.cds--contained-list-item--with-icon .cds--contained-list-item__content {
+  display: grid;
+  -webkit-column-gap: 0.75rem;
+     -moz-column-gap: 0.75rem;
+          column-gap: 0.75rem;
+  grid-template-columns: 1rem 1fr;
+}
+
+.cds--contained-list-item__icon {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  padding-top: 0.125rem;
+}
+
 .cds--content-switcher {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -8213,6 +8405,7 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--data-table-content {
+  display: block;
   overflow-x: auto;
 }
 
@@ -9335,7 +9528,10 @@ tr.cds--data-table--selected:last-of-type td {
 }
 
 .cds--action-list .cds--btn:disabled {
-  color: var(--cds-text-on-color-disabled, #8d8d8d);
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--cds-text-on-color, #ffffff);
+  opacity: 0.5;
 }
 
 .cds--action-list .cds--btn .cds--btn__icon {
@@ -12314,7 +12510,7 @@ button.cds--dropdown-text:focus {
 }
 
 /* stylelint-enable */
-.cds--text-input--fluid.cds--text-input-wrapper {
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper {
   position: relative;
   height: 100%;
   background: var(--cds-field);
@@ -12322,7 +12518,12 @@ button.cds--dropdown-text:focus {
   transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-.cds--text-input--fluid .cds--label {
+.cds--list-box__wrapper--fluid .cds--list-box {
+  min-height: 4rem;
+  padding: 0;
+}
+
+.cds--list-box__wrapper--fluid .cds--label {
   position: absolute;
   z-index: 1;
   top: 0.8125rem;
@@ -12337,101 +12538,147 @@ button.cds--dropdown-text:focus {
   margin: 0;
 }
 
-.cds--text-input--fluid .cds--form__helper-text {
-  display: none;
+.cds--list-box__wrapper--fluid .cds--list-box__field {
+  padding-top: 2.0625rem;
+  padding-bottom: 0.8125rem;
+  padding-left: 1rem;
 }
 
-.cds--text-input--fluid .cds--text-input {
-  min-height: 4rem;
-  padding: 2rem 1rem 0.8125rem;
+.cds--list-box__wrapper--fluid .cds--list-box__menu-icon {
+  width: 1rem;
+  height: 1rem;
 }
 
-.cds--text-input__divider,
-.cds--text-input--fluid .cds--text-input__divider {
-  display: none;
+.cds--list-box__wrapper--fluid:not(.cds--list-box__wrapper--fluid--condensed) .cds--list-box__menu-item {
+  height: 4rem;
 }
 
-.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid],
-.cds--text-input--fluid .cds--text-input__field-wrapper--warning {
-  display: block;
+.cds--list-box__wrapper--fluid:not(.cds--list-box__wrapper--fluid--condensed) .cds--list-box__menu-item__selected-icon {
+  top: 1.25rem;
 }
 
-.cds--text-input--fluid input[data-invalid] {
-  outline: none;
+.cds--list-box__wrapper--fluid .cds--label--disabled .cds--toggletip-label {
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
 
-.cds--text-input--fluid .cds--form-requirement {
-  padding: 0.5rem 2.5rem 0.5rem 1rem;
-  margin: 0;
+.cds--list-box__wrapper--fluid .cds--label--disabled .cds--toggletip-button {
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
-.cds--text-input--fluid .cds--text-input--invalid,
-.cds--text-input--fluid .cds--text-input--warning {
-  border-bottom: none;
+.cds--list-box__wrapper--fluid .cds--label--disabled .cds--toggletip-button svg {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
-.cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
-.cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
-  display: block;
-  border-style: solid;
-  border-color: var(--cds-border-subtle);
-  border-bottom: none;
-  margin: 0 1rem;
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  outline-offset: 0;
 }
-
-.cds--text-input--fluid .cds--text-input__invalid-icon {
-  top: 5rem;
+@media screen and (prefers-contrast) {
+  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus {
+    outline-style: dotted;
+  }
 }
 
-.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
-.cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
+.cds--list-box__wrapper--fluid .cds--list-box__field:focus {
   outline: none;
+  outline-offset: 0;
 }
 
-.cds--text-input--fluid .cds--text-input__field-wrapper--warning {
-  border-bottom: 1px solid var(--cds-border-strong);
-}
-
-.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
   outline: 2px solid var(--cds-support-error, #da1e28);
   outline-offset: -2px;
+  outline-offset: 0;
 }
 @media screen and (prefers-contrast) {
-  .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
+  .cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:not(.cds--list-box__wrapper--fluid--focus) {
     outline-style: dotted;
   }
 }
 
-.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
-.cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
-  outline: 2px solid var(--cds-focus, #0f62fe);
-  outline-offset: -2px;
-}
-@media screen and (prefers-contrast) {
-  .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
-.cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
-    outline-style: dotted;
-  }
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--focus .cds--list-box:not(.cds--list-box--invalid) {
+  border-bottom: 1px solid transparent;
 }
 
-.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
-.cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box,
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box__field:focus {
   outline: none;
+  outline-offset: 0;
 }
 
-.cds--text-input--fluid .cds--text-input.cds--password-input {
-  padding-right: 2.5rem;
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid:focus-within {
+  outline-offset: 0;
 }
 
-.cds--text-input--fluid.cds--password-input-wrapper .cds--text-input__invalid-icon {
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box,
+.cds--list-box__wrapper--fluid .cds--list-box--warning {
+  border-bottom: 1px solid transparent;
+}
+
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--form-requirement,
+.cds--list-box__wrapper--fluid .cds--list-box--warning ~ .cds--form-requirement {
+  padding: 0.5rem 4rem 0.5rem 1rem;
+  margin-top: 0;
+}
+
+.cds--list-box__wrapper--fluid.cds--list-box__wrapper--fluid--invalid .cds--list-box__invalid-icon,
+.cds--list-box__wrapper--fluid .cds--list-box--warning .cds--list-box__invalid-icon {
+  top: 5.0625rem;
   right: 1rem;
+  pointer-events: none;
 }
 
-.cds--text-input--fluid .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
-  top: 1.625rem;
-  right: 0.5rem;
-  width: 2rem;
-  height: 2rem;
+.cds--list-box__wrapper--fluid .cds--list-box__divider {
+  display: none;
+  -webkit-transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.cds--list-box__wrapper--fluid .cds--list-box--invalid ~ .cds--list-box__divider,
+.cds--list-box__wrapper--fluid .cds--list-box--warning ~ .cds--list-box__divider {
+  display: block;
+  border: none;
+  border-bottom: 1px solid var(--cds-border-subtle);
+  margin: 0 1rem;
+}
+
+.cds--list-box__wrapper--fluid .cds--list-box--invalid:hover ~ .cds--list-box__divider,
+.cds--list-box__wrapper--fluid .cds--list-box--warning:hover ~ .cds--list-box__divider {
+  border-color: transparent;
+}
+
+.cds--list-box__wrapper--fluid .cds--list-box--up .cds--list-box__menu {
+  bottom: 4rem;
+}
+
+.cds--list-box__wrapper--fluid .cds--skeleton {
+  border-bottom: 1px solid var(--cds-skeleton-element, #c6c6c6);
+  background: var(--cds-skeleton-background, #e8e8e8);
+}
+
+.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field {
+  position: absolute;
+  bottom: 0.8125rem;
+  left: 1rem;
+  width: 50%;
+  height: 1rem;
+  padding: 0;
+}
+
+.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
+  position: absolute;
+  top: 0.8125rem;
+  left: 1rem;
+  width: 25%;
+  height: 1rem;
+}
+
+.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field,
+.cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
+  -webkit-animation: 3000ms ease-in-out skeleton infinite;
+          animation: 3000ms ease-in-out skeleton infinite;
+  background: var(--cds-skeleton-element, #c6c6c6);
 }
 
 .cds--text-area--fluid .cds--text-area__wrapper {
@@ -12574,6 +12821,146 @@ button.cds--dropdown-text:focus {
   height: 4rem;
 }
 
+.cds--text-input--fluid.cds--text-input-wrapper {
+  position: relative;
+  height: 100%;
+  background: var(--cds-field);
+  -webkit-transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.cds--text-input--fluid .cds--label {
+  position: absolute;
+  z-index: 1;
+  top: 0.8125rem;
+  left: 1rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 1rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 0;
+}
+
+.cds--text-input--fluid .cds--form__helper-text {
+  display: none;
+}
+
+.cds--text-input--fluid .cds--text-input {
+  min-height: 4rem;
+  padding: 2rem 1rem 0.8125rem;
+}
+
+.cds--text-input__divider,
+.cds--text-input--fluid .cds--text-input__divider {
+  display: none;
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid],
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning {
+  display: block;
+}
+
+.cds--text-input--fluid input[data-invalid] {
+  outline: none;
+}
+
+.cds--text-input--fluid .cds--form-requirement {
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  margin: 0;
+}
+
+.cds--text-input--fluid .cds--text-input--invalid,
+.cds--text-input--fluid .cds--text-input--warning {
+  border-bottom: none;
+}
+
+.cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
+.cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
+  display: block;
+  border-style: solid;
+  border-color: var(--cds-border-subtle);
+  border-bottom: none;
+  margin: 0 1rem;
+}
+
+.cds--text-input--fluid .cds--text-input__invalid-icon {
+  top: 5rem;
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
+  outline: none;
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning {
+  border-bottom: 1px solid var(--cds-border-strong);
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
+  outline: 2px solid var(--cds-support-error, #da1e28);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
+    outline-style: dotted;
+  }
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
+    outline-style: dotted;
+  }
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
+  outline: none;
+}
+
+.cds--text-input--fluid .cds--text-input.cds--password-input {
+  padding-right: 2.5rem;
+}
+
+.cds--text-input--fluid.cds--password-input-wrapper .cds--text-input__invalid-icon {
+  right: 1rem;
+}
+
+.cds--text-input--fluid .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
+  top: 1.625rem;
+  right: 0.5rem;
+  width: 2rem;
+  height: 2rem;
+}
+
+.cds--text-input--fluid__skeleton {
+  position: relative;
+  height: 100%;
+  padding: 1rem;
+  border-bottom: 1px solid var(--cds-skeleton-element, #c6c6c6);
+  background: var(--cds-skeleton-background, #e8e8e8);
+}
+
+.cds--text-input--fluid__skeleton .cds--skeleton {
+  height: 0.5rem;
+}
+
+.cds--text-input--fluid__skeleton .cds--label {
+  margin-bottom: 0.75rem;
+}
+
+.cds--text-input--fluid__skeleton .cds--text-input {
+  width: 80%;
+}
+
 @-webkit-keyframes stroke {
   100% {
     stroke-dashoffset: 0;
@@ -12796,6 +13183,7 @@ button.cds--dropdown-text:focus {
 
 .cds--menu-option {
   position: relative;
+  display: list-item;
   height: 2rem;
   background-color: var(--cds-layer);
   color: var(--cds-text-primary, #161616);
@@ -12893,6 +13281,7 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--menu-divider {
+  display: list-item;
   width: 100%;
   height: 1px;
   margin: 0.25rem 0;
@@ -12952,9 +13341,14 @@ button.cds--dropdown-text:focus {
 .cds--modal .cds--dropdown-list,
 .cds--modal .cds--number input[type=number],
 .cds--modal .cds--date-picker__input,
-.cds--modal .cds--multi-select {
+.cds--modal .cds--multi-select,
+.cds--modal .cds--number__control-btn::before,
+.cds--modal .cds--number__control-btn::after {
   background-color: var(--cds-field-02, #ffffff);
 }
+.cds--modal .cds--number__rule-divider {
+  background-color: var(--cds-border-subtle-02, #e0e0e0);
+}
 
 .cds--modal.is-visible .cds--modal-container {
   -webkit-transform: translate3d(0, 0, 0);
@@ -13252,8 +13646,8 @@ button.cds--dropdown-text:focus {
   overflow: hidden;
 }
 
-.cds--body--with-modal-open .cds--tooltip,
-.cds--body--with-modal-open .cds--overflow-menu-options {
+.cds--body--with-modal-open .cds--modal .cds--tooltip,
+.cds--body--with-modal-open .cds--modal .cds--overflow-menu-options {
   z-index: 9000;
 }
 
@@ -17092,21 +17486,21 @@ span.cds--pagination__text.cds--pagination__items-count {
   cursor: pointer;
 }
 
-.cds--progress-label:focus {
-  -webkit-box-shadow: 0 0.1875rem 0 0 var(--cds-link-primary, #0f62fe);
-          box-shadow: 0 0.1875rem 0 0 var(--cds-link-primary, #0f62fe);
-  color: var(--cds-link-primary, #0f62fe);
-  outline: none;
-}
-
 .cds--progress--space-equal .cds--progress-label {
   max-width: 100%;
   margin-right: 0.75rem;
 }
 
+.cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus {
+  outline: none;
+}
+.cds--progress-step-button:not(.cds--progress-step-button--unclickable):focus-visible .cds--progress-label {
+  color: var(--cds-focus, #0f62fe);
+  outline: 0.0625rem solid var(--cds-focus, #0f62fe);
+}
 .cds--progress-step-button:not(.cds--progress-step-button--unclickable) .cds--progress-label:active {
-  -webkit-box-shadow: 0 0.1875rem 0 0 var(--cds-text-primary, #161616);
-          box-shadow: 0 0.1875rem 0 0 var(--cds-text-primary, #161616);
+  -webkit-box-shadow: 0 0.0625rem 0 0 var(--cds-text-primary, #161616);
+          box-shadow: 0 0.0625rem 0 0 var(--cds-text-primary, #161616);
   color: var(--cds-text-primary, #161616);
 }
 
@@ -17247,12 +17641,6 @@ span.cds--pagination__text.cds--pagination__items-count {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   cursor: not-allowed;
 }
-.cds--progress-step--disabled .cds--progress-label:focus,
-.cds--progress-step--disabled .cds--progress-label:active {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  outline: none;
-}
 .cds--progress-step--disabled .cds--progress-line {
   cursor: not-allowed;
 }
@@ -20030,6 +20418,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--toggle {
+  display: inline-block;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -20063,7 +20452,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--toggle__appearance {
-  display: grid;
+  display: inline-grid;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -20439,6 +20828,11 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--header__action::-moz-focus-inner {
   border: 0;
 }
+@media (max-width: 41.98rem) {
+  .cds--header__action {
+    min-width: 3rem;
+  }
+}
 
 .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
 .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
@@ -20544,6 +20938,11 @@ a.cds--header__name {
       -ms-user-select: none;
           user-select: none;
 }
+@media (max-width: 41.98rem) {
+  a.cds--header__name {
+    padding: 0 1rem;
+  }
+}
 
 a.cds--header__name:focus {
   border-color: var(--cds-focus, #0f62fe);
@@ -20698,7 +21097,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
 }
 
 .cds--header__menu-title[aria-expanded=true] {
-  z-index: 8001;
+  z-index: 8002;
   background-color: var(--cds-layer);
   color: var(--cds-text-secondary, #525252);
 }
@@ -20717,7 +21116,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
 
 .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
   position: absolute;
-  z-index: 8000;
+  z-index: 8001;
   bottom: 0;
   left: 0;
   display: -webkit-box;
@@ -21471,6 +21870,11 @@ a.cds--side-nav__link--current::before {
 .cds--header__action::-moz-focus-inner {
   border: 0;
 }
+@media (max-width: 41.98rem) {
+  .cds--header__action {
+    min-width: 3rem;
+  }
+}
 
 .cds--header__action > svg.cds--navigation-menu-panel-collapse-icon,
 .cds--header__action--active > svg.cds--navigation-menu-panel-expand-icon {
@@ -21576,6 +21980,11 @@ a.cds--header__name {
       -ms-user-select: none;
           user-select: none;
 }
+@media (max-width: 41.98rem) {
+  a.cds--header__name {
+    padding: 0 1rem;
+  }
+}
 
 a.cds--header__name:focus {
   border-color: var(--cds-focus, #0f62fe);
@@ -21730,7 +22139,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
 }
 
 .cds--header__menu-title[aria-expanded=true] {
-  z-index: 8001;
+  z-index: 8002;
   background-color: var(--cds-layer);
   color: var(--cds-text-secondary, #525252);
 }
@@ -21749,7 +22158,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
 
 .cds--header__menu-title[aria-expanded=true] + .cds--header__menu {
   position: absolute;
-  z-index: 8000;
+  z-index: 8001;
   bottom: 0;
   left: 0;
   display: -webkit-box;