@carbon/styles 1.26.0 → 1.27.0-rc.0

package/css/styles.css

@@ -2697,7 +2697,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2714,7 +2714,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -2731,7 +2731,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-02, #a8a8a8);
   --cds-field: var(--cds-field-02, #ffffff);
   --cds-field-hover: var(--cds-field-hover-02, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
+  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-02, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-02, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-02, #a8a8a8);
@@ -2748,7 +2748,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-03, #a8a8a8);
   --cds-field: var(--cds-field-03, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-03, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-03, #c6c6c6);
+  --cds-border-subtle: var(--cds-border-subtle-02, #e0e0e0);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-03, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-03, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-03, #c6c6c6);
@@ -2867,7 +2867,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -3041,7 +3041,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -3215,7 +3215,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -3388,7 +3388,7 @@ em {
   --cds-layer-accent-active: var(--cds-layer-accent-active-01, #a8a8a8);
   --cds-field: var(--cds-field-01, #f4f4f4);
   --cds-field-hover: var(--cds-field-hover-01, #e8e8e8);
-  --cds-border-subtle: var(--cds-border-subtle-01, #c6c6c6);
+  --cds-border-subtle: var(--cds-border-subtle-00, #e0e0e0);
   --cds-border-subtle-selected: var(--cds-border-subtle-selected-01, #c6c6c6);
   --cds-border-strong: var(--cds-border-strong-01, #8d8d8d);
   --cds-border-tile: var(--cds-border-tile-01, #c6c6c6);
@@ -4365,7 +4365,7 @@ li.cds--accordion__item--disabled:last-of-type {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  padding: calc(0.875rem - 3px) 63px calc(0.875rem - 3px) 15px;
+  padding: calc(0.875rem - 3px) calc(4rem - 1px) calc(0.875rem - 3px) calc(1rem - 1px);
   margin: 0;
   border-radius: 0;
   cursor: pointer;
@@ -4504,7 +4504,7 @@ li.cds--accordion__item--disabled:last-of-type {
   border-color: transparent;
   background-color: transparent;
   color: var(--cds-link-primary, #0f62fe);
-  padding: calc(0.875rem - 3px) 16px;
+  padding: calc(0.875rem - 3px) 1rem;
 }
 .cds--btn--ghost:hover {
   background-color: var(--cds-layer-hover);
@@ -4538,10 +4538,10 @@ li.cds--accordion__item--disabled:last-of-type {
   outline: none;
 }
 .cds--btn--ghost.cds--btn--sm {
-  padding: calc(0.375rem - 3px) 16px;
+  padding: calc(0.375rem - 3px) 1rem;
 }
 .cds--btn--ghost.cds--btn--field, .cds--btn--ghost.cds--btn--md {
-  padding: calc(0.675rem - 3px) 16px;
+  padding: calc(0.675rem - 3px) 1rem;
 }
 .cds--btn--ghost:not([disabled]) svg {
   fill: var(--cds-icon-primary, #161616);
@@ -4663,7 +4663,7 @@ li.cds--accordion__item--disabled:last-of-type {
   border-color: transparent;
   background-color: transparent;
   color: var(--cds-button-danger-secondary, #da1e28);
-  padding: calc(0.875rem - 3px) 16px;
+  padding: calc(0.875rem - 3px) 1rem;
 }
 .cds--btn--danger--ghost:hover {
   background-color: var(--cds-button-danger-hover, #b81921);
@@ -4694,15 +4694,15 @@ li.cds--accordion__item--disabled:last-of-type {
   outline: none;
 }
 .cds--btn--danger--ghost.cds--btn--sm {
-  padding: calc(0.375rem - 3px) 16px;
+  padding: calc(0.375rem - 3px) 1rem;
 }
 .cds--btn--danger--ghost.cds--btn--field, .cds--btn--danger--ghost.cds--btn--md {
-  padding: calc(0.675rem - 3px) 16px;
+  padding: calc(0.675rem - 3px) 1rem;
 }
 
 .cds--btn--sm {
   min-height: 2rem;
-  padding: calc(0.375rem - 3px) 60px calc(0.375rem - 3px) 12px;
+  padding: calc(0.375rem - 3px) calc(4rem - 4px) calc(0.375rem - 3px) calc(1rem - 4px);
 }
 
 .cds--btn--2xl:not(.cds--btn--icon-only) {
@@ -4728,7 +4728,7 @@ li.cds--accordion__item--disabled:last-of-type {
 .cds--btn--field,
 .cds--btn--md {
   min-height: 2.5rem;
-  padding: calc(0.675rem - 3px) 60px calc(0.675rem - 3px) 12px;
+  padding: calc(0.675rem - 3px) calc(4rem - 4px) calc(0.675rem - 3px) calc(1rem - 4px);
 }
 
 .cds--btn--expressive {
@@ -5176,6 +5176,23 @@ fieldset[disabled] .cds--form__helper-text {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--checkbox-group html {
+  font-size: 100%;
+}
+.cds--checkbox-group body {
+  font-weight: 400;
+  font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+.cds--checkbox-group code {
+  font-family: 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace;
+}
+.cds--checkbox-group strong {
+  font-weight: 600;
+}
+
 .cds--form-item.cds--checkbox-wrapper {
   position: relative;
   margin-bottom: 0.25rem;
@@ -5332,10 +5349,76 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--checkbox-group[data-invalid] .cds--checkbox-label::before,
+.cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
+.cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
+  border: 1px solid var(--cds-support-error, #da1e28);
+}
+
+.cds--checkbox-group .cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
+.cds--checkbox-group .cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg,
+.cds--checkbox-group .cds--checkbox-wrapper > .cds--form__helper-text {
+  display: none;
+}
+
+.cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,
+.cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox:checked + .cds--checkbox-label::before {
+  border: 1px solid var(--cds-icon-primary, #161616);
+}
+
+.cds--checkbox-group__validation-msg,
+.cds--checkbox__validation-msg {
+  display: none;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  margin-top: 0.25rem;
+}
+
+.cds--checkbox__invalid-icon {
+  margin: 0 0.0625rem 0 0.1875rem;
+  fill: var(--cds-support-error, #da1e28);
+}
+
+.cds--checkbox__invalid-icon--warning {
+  fill: var(--cds-support-warning, #f1c21b);
+}
+
+.cds--checkbox__invalid-icon--warning path:first-of-type {
+  fill: #000000;
+}
+
+.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg,
+.cds--checkbox-group--warning .cds--checkbox-group__validation-msg,
+.cds--checkbox-wrapper--invalid > .cds--checkbox__validation-msg,
+.cds--checkbox-wrapper--warning > .cds--checkbox__validation-msg {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
+.cds--checkbox-group--warning .cds--checkbox-group__validation-msg .cds--form-requirement,
+.cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement,
+.cds--checkbox-wrapper--warning .cds--checkbox__validation-msg .cds--form-requirement {
+  display: block;
+  overflow: visible;
+  max-height: 100%;
+  margin-top: 0;
+  margin-left: 0.5rem;
+}
+
+.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,
+.cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement {
+  color: var(--cds-text-error, #da1e28);
+}
+
+.cds--checkbox-group--readonly .cds--checkbox-label,
 .cds--checkbox-wrapper--readonly .cds--checkbox-label {
   cursor: default;
 }
 
+.cds--checkbox-group--readonly .cds--checkbox-label-text,
 .cds--checkbox-wrapper--readonly .cds--checkbox-label-text {
   cursor: text;
   -webkit-user-select: text;
@@ -5344,15 +5427,18 @@ fieldset[disabled] .cds--form__helper-text {
           user-select: text;
 }
 
+.cds--checkbox-group--readonly .cds--checkbox + .cds--checkbox-label::before,
 .cds--checkbox-wrapper--readonly .cds--checkbox + .cds--checkbox-label::before {
   border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::before,
 .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::before {
   border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
   background: transparent;
 }
 
+.cds--checkbox-group--readonly .cds--checkbox:checked + .cds--checkbox-label::after,
 .cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
   border-color: var(--cds-text-primary, #161616);
 }
@@ -6881,6 +6967,7 @@ fieldset[disabled] .cds--form__helper-text {
 
 .cds--form--fluid .cds--text-input-wrapper--readonly,
 .cds--text-input-wrapper--readonly .cds--text-input {
+  border-bottom-color: var(--cds-border-subtle);
   background: transparent;
 }
 
@@ -7789,10 +7876,12 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--list-box .cds--list-box__field[aria-expanded=false] + .cds--list-box__menu {
+  display: none;
   max-height: 0;
 }
 
 .cds--list-box--expanded .cds--list-box__menu {
+  display: block;
   max-height: 13.75rem;
 }
 
@@ -8110,6 +8199,10 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: transparent;
 }
 
+.cds--combo-box--readonly .cds--text-input {
+  border-bottom-color: var(--cds-border-subtle);
+}
+
 .cds--combo-box--readonly .cds--list-box__menu-icon,
 .cds--combo-box--readonly .cds--list-box__selection {
   cursor: default;
@@ -8158,7 +8251,6 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--contained-list__header {
-  position: -webkit-sticky;
   position: sticky;
   z-index: 1;
   top: 0;
@@ -8507,21 +8599,29 @@ fieldset[disabled] .cds--form__helper-text {
   border-color: var(--cds-border-disabled, #c6c6c6);
 }
 
-.cds--content-switcher-btn:first-child {
+.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
   border-left: 0.0625rem solid var(--cds-border-inverse, #161616);
   border-bottom-left-radius: 0.25rem;
   border-top-left-radius: 0.25rem;
 }
+.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child:disabled {
+  border-color: var(--cds-border-disabled, #c6c6c6);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
 
-.cds--content-switcher-btn:last-child {
+.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
   border-right: 0.0625rem solid var(--cds-border-inverse, #161616);
   border-bottom-right-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
 }
+.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child:disabled {
+  border-color: var(--cds-border-disabled, #c6c6c6);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+}
 
-.cds--content-switcher--selected,
-.cds--content-switcher--selected:first-child,
-.cds--content-switcher--selected:last-child {
+.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected,
+.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:first-child,
+.cds--content-switcher .cds--content-switcher-btn.cds--content-switcher--selected:last-child {
   border: 0;
 }
 
@@ -8536,7 +8636,7 @@ fieldset[disabled] .cds--form__helper-text {
   content: "";
 }
 
-.cds--content-switcher-btn:first-of-type::before {
+.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-of-type::before {
   display: none;
 }
 
@@ -8607,6 +8707,87 @@ fieldset[disabled] .cds--form__helper-text {
   }
 }
 
+.cds--content-switcher--icon-only {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
+  border-left: 0.0625rem solid var(--cds-border-inverse, #161616);
+  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: 0.25rem;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher--selected[disabled],
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher--selected[disabled] {
+  border-color: var(--cds-layer-selected-disabled, #8d8d8d);
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
+  border-right: 0.0625rem solid var(--cds-border-inverse, #161616);
+  border-bottom-right-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn.cds--content-switcher--selected,
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn.cds--content-switcher--selected {
+  border-color: var(--cds-background, #ffffff);
+}
+
+.cds--content-switcher--lg .cds--content-switcher-btn {
+  padding-right: 0.875rem;
+  padding-left: 0.875rem;
+}
+
+.cds--content-switcher--lg .cds--content-switcher-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-btn svg {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-btn.cds--content-switcher--selected svg {
+  z-index: 1;
+  fill: var(--cds-icon-inverse, #ffffff);
+}
+
+.cds--content-switcher--icon-only.cds--content-switcher--sm .cds--btn--sm {
+  height: 2rem;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-of-type .cds--content-switcher-btn::before {
+  display: none;
+}
+
+.cds--content-switcher-btn:focus::before,
+.cds--content-switcher-popover__wrapper:focus-within + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
+.cds--content-switcher-btn:hover::before,
+.cds--content-switcher-popover__wrapper:not(.cds--content-switcher-popover--disabled):hover + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before,
+.cds--content-switcher--selected::before,
+.cds--content-switcher-popover--selected + .cds--content-switcher-popover__wrapper .cds--content-switcher-btn::before {
+  background-color: transparent;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] {
+  border-color: var(--cds-border-inverse, #161616);
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled] svg {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:not(.cds--content-switcher--selected):hover,
+.cds--content-switcher--icon-only .cds--content-switcher-popover--selected + .cds--content-switcher-popover--disabled .cds--content-switcher-btn[disabled]:hover::before {
+  background-color: transparent;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-btn[disabled]:hover::before {
+  background-color: var(--cds-border-subtle);
+}
+
 .cds--data-table-container {
   position: relative;
   padding-top: 0.125rem;
@@ -9113,7 +9294,6 @@ tr.cds--data-table--selected:last-of-type td {
   display: flex;
 }
 .cds--data-table--sticky-header thead {
-  position: -webkit-sticky;
   position: sticky;
   z-index: 1;
   top: 0;
@@ -9720,7 +9900,7 @@ tr.cds--data-table--selected:last-of-type td {
 }
 
 .cds--action-list .cds--btn {
-  padding: calc(0.875rem - 3px) 16px;
+  padding: calc(0.875rem - 3px) 1rem;
   color: var(--cds-text-on-color, #ffffff);
   white-space: nowrap;
 }
@@ -9785,7 +9965,6 @@ tr.cds--data-table--selected:last-of-type td {
 }
 
 .cds--batch-summary {
-  position: -webkit-sticky;
   position: sticky;
   z-index: 100000;
   left: 0;
@@ -11618,6 +11797,7 @@ th .cds--table-sort__flex {
 }
 
 .cds--date-picker__input[readonly] {
+  border-bottom-color: var(--cds-border-subtle);
   background: transparent;
   cursor: text;
 }
@@ -12136,6 +12316,7 @@ button.cds--dropdown-text:focus {
 
 .cds--dropdown--readonly,
 .cds--dropdown--readonly:hover {
+  border-bottom-color: var(--cds-border-subtle);
   background-color: transparent;
 }
 
@@ -13287,6 +13468,15 @@ button.cds--dropdown-text:focus {
   bottom: 0.5rem;
 }
 
+.cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker > .cds--date-picker-container,
+.cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker .cds--date-picker__input {
+  border-bottom-color: var(--cds-border-subtle);
+}
+
+.cds--date-picker--fluid.cds--date-picker--fluid--readonly:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input {
+  border-left-color: var(--cds-border-subtle);
+}
+
 .cds--multi-select__wrapper.cds--list-box__wrapper--fluid--focus:not(.cds--multi-select--filterable__wrapper) .cds--list-box__field--wrapper--input-focused {
   outline: none;
 }
@@ -13555,12 +13745,11 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn {
-  border-bottom-width: 0;
+  border-bottom-color: transparent;
 }
 .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
-  border: 0;
 }
 @media screen and (prefers-contrast) {
   .cds--number input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
@@ -13569,7 +13758,7 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--number input[type=number][data-invalid] ~ .cds--number__controls .cds--number__control-btn {
-  border-bottom-width: 0;
+  border-bottom-color: transparent;
 }
 
 .cds--number input[type=number][data-invalid]:not(:focus) ~ .cds--number__controls .cds--number__control-btn:hover {
@@ -13744,6 +13933,7 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--number--readonly input[type=number] {
+  border-bottom-color: var(--cds-border-subtle);
   background: transparent;
 }
 
@@ -14924,6 +15114,7 @@ optgroup.cds--select-optgroup:disabled,
 }
 
 .cds--select--readonly .cds--select-input {
+  border-bottom-color: var(--cds-border-subtle);
   background-color: transparent;
   cursor: default;
 }
@@ -16175,6 +16366,7 @@ optgroup.cds--select-optgroup:disabled,
   font-weight: var(--cds-heading-03-font-weight, 400);
   line-height: var(--cds-heading-03-line-height, 1.4);
   letter-spacing: var(--cds-heading-03-letter-spacing, 0);
+  padding-right: calc(20% - 3rem);
   color: var(--cds-text-primary, #161616);
 }
 
@@ -16488,6 +16680,7 @@ optgroup.cds--select-optgroup:disabled,
 
 .cds--multi-select.cds--multi-select--readonly,
 .cds--multi-select.cds--multi-select--readonly:hover {
+  border-bottom-color: var(--cds-border-subtle);
   background-color: transparent;
 }
 
@@ -20612,35 +20805,51 @@ span.cds--pagination__text.cds--pagination__items-count {
 
 .cds--structured-list-row {
   display: table-row;
-  border-bottom: 1px solid var(--cds-border-subtle);
+  border-top: 1px solid var(--cds-border-subtle);
   -webkit-transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
+.cds--structured-list-tbody .cds--structured-list-row:last-child {
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+.cds--structured-list-row--header-row {
+  border: none;
+}
+
 .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) {
-  border-bottom: 1px solid var(--cds-background-hover, rgba(141, 141, 141, 0.12));
-  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
+  border-color: var(--cds-layer-hover);
+  background-color: var(--cds-layer-hover);
   cursor: pointer;
 }
 
-.cds--structured-list-row.cds--structured-list-row--selected {
-  background-color: var(--cds-background-selected, rgba(141, 141, 141, 0.2));
+.cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) + .cds--structured-list-row {
+  border-color: var(--cds-layer-hover);
+}
+
+.cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected {
+  border-color: var(--cds-layer-selected);
+  background-color: var(--cds-layer-selected);
+}
+
+.cds--structured-list--selection .cds--structured-list-row--selected + .cds--structured-list-row {
+  border-color: var(--cds-layer-selected);
+}
+
+.cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected .cds--structured-list-td {
+  color: var(--cds-text-primary, #161616);
 }
 
 .cds--structured-list-row.cds--structured-list-row--header-row {
-  border-bottom: 1px solid var(--cds-background-selected, rgba(141, 141, 141, 0.2));
   cursor: inherit;
 }
 
 .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row) > .cds--structured-list-td,
-.cds--structured-list-row.cds--structured-list-row--selected > .cds--structured-list-td {
+.cds--structured-list--selection .cds--structured-list-row.cds--structured-list-row--selected > .cds--structured-list-td {
   color: var(--cds-text-primary, #161616);
 }
 
-.cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row) > .cds--structured-list-td {
-  border-top: 1px solid var(--cds-border-subtle);
-}
-
 .cds--structured-list-thead {
   display: table-header-group;
   vertical-align: middle;
@@ -20692,7 +20901,6 @@ span.cds--pagination__text.cds--pagination__items-count {
   display: table-cell;
   max-width: 36rem;
   color: var(--cds-text-secondary, #525252);
-  border-top: 1px solid var(--cds-border-subtle);
   -webkit-transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
@@ -21433,6 +21641,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--text-area__wrapper--readonly .cds--text-area {
+  border-bottom-color: var(--cds-border-subtle);
   background: transparent;
 }
 
@@ -21972,10 +22181,12 @@ span.cds--pagination__text.cds--pagination__items-count {
 }
 
 .cds--time-picker--readonly .cds--time-picker__input-field {
+  border-bottom-color: var(--cds-border-subtle);
   background-color: transparent;
 }
 
 .cds--time-picker--readonly .cds--select-input {
+  border-bottom-color: var(--cds-border-subtle);
   background-color: transparent;
   cursor: default;
 }