@carbon/styles 0.15.0-rc.0 → 0.16.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.15.0-rc.0",
+  "version": "0.16.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.37.0-rc.0",
+    "@carbon/colors": "^10.37.0",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^10.42.0-rc.0",
-    "@carbon/layout": "^10.37.0-rc.0",
-    "@carbon/motion": "^10.29.0-rc.0",
-    "@carbon/themes": "^10.52.0-rc.0",
-    "@carbon/type": "^10.42.0-rc.0",
+    "@carbon/grid": "^10.42.0",
+    "@carbon/layout": "^10.37.0",
+    "@carbon/motion": "^10.29.0",
+    "@carbon/themes": "^10.52.0",
+    "@carbon/type": "^10.42.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
     "@carbon/test-utils": "^10.21.0",
     "css": "^3.0.0"
   },
-  "gitHead": "e41618f5aaa9a10ce93edd844f1a280dc29eaf50"
+  "gitHead": "4cb0cf93101e8a4a6a67a950518793e006ed8a07"
 }

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -97,6 +97,10 @@
       content: '';
       opacity: 0;
       transition: opacity $duration-fast-01 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

package/scss/components/code-snippet/_code-snippet.scss

@@ -68,17 +68,17 @@ $copy-btn-feedback: $background-inverse !default;
     display: inline;
     padding: 0;
     border: 2px solid transparent;
-    background-color: $field;
+    background-color: $layer;
     border-radius: 4px;
     color: $text-primary;
     cursor: pointer;
 
     &:hover {
-      background-color: $layer-accent;
+      background-color: $layer-hover;
     }
 
     &:active {
-      background-color: $copy-active;
+      background-color: $layer-active;
     }
 
     &:focus {
@@ -131,13 +131,13 @@ $copy-btn-feedback: $background-inverse !default;
     display: inline-block;
 
     &:hover {
-      background-color: $field;
+      background-color: $layer;
       cursor: auto;
     }
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline.#{$prefix}--snippet--no-copy:hover {
-    background-color: $field-02;
+    background-color: $layer-hover;
     cursor: auto;
   }
 
@@ -241,7 +241,7 @@ $copy-btn-feedback: $background-inverse !default;
     width: rem(16px);
     height: 100%;
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($field, 0), $field);
+    background-image: linear-gradient(to right, rgba($layer, 0), $layer);
     content: '';
   }
 
@@ -271,7 +271,7 @@ $copy-btn-feedback: $background-inverse !default;
     justify-content: center;
     padding: 0;
     border: none;
-    background-color: $field;
+    background-color: $layer;
     cursor: pointer;
     outline: none;
 
@@ -290,7 +290,7 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet-button:hover {
-    background: $field-hover;
+    background: $layer-hover;
   }
 
   .#{$prefix}--snippet-button:active {
@@ -340,7 +340,7 @@ $copy-btn-feedback: $background-inverse !default;
 
     padding: $spacing-03 $spacing-05;
     border: 0;
-    background-color: $field;
+    background-color: $layer;
     color: $text-primary;
   }
 
@@ -361,12 +361,12 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet-btn--expand:hover {
-    background: $field-hover;
+    background: $layer-hover;
     color: $text-primary;
   }
 
   .#{$prefix}--snippet-btn--expand:active {
-    background-color: $copy-active;
+    background-color: $layer-active;
   }
 
   .#{$prefix}--snippet-btn--expand:focus {
@@ -387,7 +387,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light .#{$prefix}--snippet-button,
   .#{$prefix}--snippet--light .#{$prefix}--btn.#{$prefix}--snippet-btn--expand,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:hover,
@@ -395,7 +395,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn:hover {
-    background-color: $layer-hover-02;
+    background-color: $layer-hover;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--inline:active,
@@ -403,7 +403,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--light
     .#{$prefix}--btn.#{$prefix}--snippet-btn--expand:active,
   .#{$prefix}--snippet--light .#{$prefix}--copy-btn:active {
-    background-color: $layer-active-02;
+    background-color: $layer-active;
   }
 
   .#{$prefix}--snippet--light.#{$prefix}--snippet--single::after,
@@ -411,7 +411,7 @@ $copy-btn-feedback: $background-inverse !default;
     .#{$prefix}--snippet-container
     pre::after {
     // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to right, rgba($field-02, 0), $field-02);
+    background-image: linear-gradient(to right, rgba($layer, 0), $layer);
   }
 
   // Skeleton State
@@ -469,13 +469,13 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet__overflow-indicator--left {
     order: 0;
     margin-right: -$spacing-05;
-    background-image: linear-gradient(to left, transparent, $field);
+    background-image: linear-gradient(to left, transparent, $layer);
   }
 
   .#{$prefix}--snippet__overflow-indicator--right {
     order: 2;
     margin-left: -$spacing-05;
-    background-image: linear-gradient(to right, transparent, $field);
+    background-image: linear-gradient(to right, transparent, $layer);
   }
 
   .#{$prefix}--snippet--single .#{$prefix}--snippet__overflow-indicator--right,
@@ -507,11 +507,11 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--left {
-    background-image: linear-gradient(to left, transparent, $field-02);
+    background-image: linear-gradient(to left, transparent, $layer);
   }
 
   .#{$prefix}--snippet--light .#{$prefix}--snippet__overflow-indicator--right {
-    background-image: linear-gradient(to right, transparent, $field-02);
+    background-image: linear-gradient(to right, transparent, $layer);
   }
 
   // Safari-only media query
@@ -520,11 +520,11 @@ $copy-btn-feedback: $background-inverse !default;
   @media not all and (min-resolution: 0.001dpcm) {
     @supports (-webkit-appearance: none) and (stroke-color: transparent) {
       .#{$prefix}--snippet__overflow-indicator--left {
-        background-image: linear-gradient(to left, rgba($field, 0), $field);
+        background-image: linear-gradient(to left, rgba($layer, 0), $layer);
       }
 
       .#{$prefix}--snippet__overflow-indicator--right {
-        background-image: linear-gradient(to right, rgba($field, 0), $field);
+        background-image: linear-gradient(to right, rgba($layer, 0), $layer);
       }
     }
   }

package/scss/components/code-snippet/_mixins.scss

@@ -7,6 +7,7 @@
 
 @use '../../theme' as *;
 @use '../../type' as *;
+@use '../../utilities/convert' as *;
 
 /// Code snippet base styles
 /// @access private
@@ -17,5 +18,5 @@
   position: relative;
   width: 100%;
   max-width: rem(768px);
-  background-color: $field;
+  background-color: $layer;
 }

package/scss/components/combo-box/_combo-box.scss

@@ -19,7 +19,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--combo-box.#{$prefix}--list-box--light:hover {
-    background-color: $field-02;
+    background-color: $field;
   }
 
   .#{$prefix}--combo-box .#{$prefix}--text-input::-ms-clear {

package/scss/components/date-picker/_date-picker.scss

@@ -125,8 +125,6 @@
   }
 
   // Size variant styles
-  // TODO V11: Remove xl selector
-  .#{$prefix}--date-picker__input--xl,
   .#{$prefix}--date-picker__input--lg {
     height: rem(48px);
   }

package/scss/components/date-picker/_flatpickr.scss

@@ -138,6 +138,10 @@
 
   .flatpickr-calendar.animate.open {
     animation: fp-fade-in-down $duration-fast-02 motion(entrance, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 
   .flatpickr-calendar.inline {
@@ -230,8 +234,12 @@
     // Windows HCM fix
     @include high-contrast-mode('icon-fill');
 
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
     &:hover {
-      background-color: $background-hover;
+      background-color: $layer-hover;
     }
   }
 
@@ -261,7 +269,7 @@
     margin-left: $spacing-02;
 
     &:hover {
-      background-color: $background-hover;
+      background-color: $layer-hover;
     }
   }
 
@@ -437,7 +445,7 @@
     transition: all $duration-fast-01 motion(standard, productive);
 
     &:hover {
-      background: $background-hover;
+      background: $layer-hover;
     }
 
     &:focus {

package/scss/components/dropdown/_dropdown.scss

@@ -132,10 +132,10 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--dropdown--light {
-    background-color: $field-02;
+    background-color: $field;
 
     &:hover {
-      background-color: $layer-hover-02;
+      background-color: $field-hover;
     }
   }
 
@@ -202,7 +202,7 @@
 
   // V11: Possibly deprecate
   .#{$prefix}--dropdown--light .#{$prefix}--dropdown-list {
-    background-color: $field-02;
+    background-color: $layer;
   }
 
   .#{$prefix}--dropdown:not(.#{$prefix}--dropdown--open)
@@ -354,7 +354,7 @@
 
     // V11: Possibly deprecate
     &.#{$prefix}--dropdown--light:hover {
-      background-color: $field-02;
+      background-color: $field;
     }
   }
 
@@ -377,7 +377,7 @@
     transition: background $duration-fast-01 motion(entrance, productive);
 
     &:hover {
-      background-color: $field-hover;
+      background-color: $layer-hover;
     }
 
     &.#{$prefix}--dropdown--disabled {
@@ -433,11 +433,11 @@
 
   .#{$prefix}--dropdown--show-selected .#{$prefix}--dropdown--selected {
     display: block;
-    background-color: $layer-hover;
+    background-color: $layer-selected;
     color: $text-primary;
 
     &:hover {
-      background-color: $layer-selected;
+      background-color: $layer-selected-hover;
     }
 
     .#{$prefix}--dropdown-link {

package/scss/components/file-uploader/_file-uploader.scss

@@ -10,6 +10,7 @@
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
+
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
@@ -170,8 +171,6 @@
     }
   }
 
-  // V11: Remove --field
-  .#{$prefix}--file__selected-file--field,
   .#{$prefix}--file__selected-file--md {
     min-height: rem(40px);
     gap: $spacing-03 $spacing-05;
@@ -202,8 +201,6 @@
     padding: $spacing-02 0;
   }
 
-  // V11: Remove --field
-  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field,
   .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md {
     padding: $spacing-03 0;
   }
@@ -218,9 +215,6 @@
     padding-top: rem(7px);
   }
 
-  // V11: Remove --field
-  .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--field
-    .#{$prefix}--form-requirement,
   .#{$prefix}--file__selected-file--invalid.#{$prefix}--file__selected-file--md
     .#{$prefix}--form-requirement {
     padding-top: rem(11px);
@@ -330,6 +324,7 @@
     justify-content: space-between;
     padding: $spacing-05;
     border: 1px dashed $border-strong;
+    @include type-style('body-compact-01');
   }
 
   .#{$prefix}--file__drop-container--drag-over {

package/scss/components/form/_form.scss

@@ -21,16 +21,6 @@ $input-label-weight: 400 !default;
 @mixin form {
   .#{$prefix}--fieldset {
     @include reset;
-
-    @if not enabled('enable-v11-release') {
-      margin-bottom: $spacing-07;
-    }
-  }
-
-  @if not enabled('enable-v11-release') {
-    .#{$prefix}--fieldset--no-margin {
-      margin-bottom: 0;
-    }
   }
 
   .#{$prefix}--form-item {
@@ -57,10 +47,8 @@ $input-label-weight: 400 !default;
     vertical-align: baseline;
   }
 
-  @if enabled('enable-v11-release') {
-    .#{$prefix}--label--no-margin {
-      margin-bottom: 0;
-    }
+  .#{$prefix}--label--no-margin {
+    margin-bottom: 0;
   }
 
   .#{$prefix}--label .#{$prefix}--tooltip__trigger {

package/scss/components/list-box/_list-box.scss

@@ -156,13 +156,13 @@ $list-box-menu-width: rem(300px);
     background-color: $field;
 
     &:hover {
-      background-color: $layer-hover;
+      background-color: $field-hover;
     }
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
-    background: $field;
+    background: $layer;
   }
 
   // V11: Possibly deprecate
@@ -237,7 +237,7 @@ $list-box-menu-width: rem(300px);
     background-color: transparent;
 
     &:hover {
-      background-color: $field-hover;
+      background-color: $layer-hover;
     }
   }
 
@@ -477,7 +477,7 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection--multi {
-    @include tag-theme($text-disabled, $field);
+    @include tag-theme($text-disabled, $layer);
 
     > svg {
       fill: $icon-disabled;
@@ -701,7 +701,7 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box__menu-item--highlighted {
     border-color: transparent;
-    background-color: $layer-hover;
+    background-color: $layer-selected;
     color: $text-primary;
   }
 
@@ -730,8 +730,7 @@ $list-box-menu-width: rem(300px);
     background-color: $layer-selected;
   }
 
-  .#{$prefix}--list-box__menu-item--active:hover,
-  .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted {
+  .#{$prefix}--list-box__menu-item--active:hover {
     border-bottom-color: $layer-selected-hover;
     background-color: $layer-selected-hover;
   }

package/scss/components/loading/_animation.scss

@@ -20,6 +20,10 @@
     animation-duration: 10ms;
     animation-name: init-stroke;
     animation-timing-function: motion.$standard-easing;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }
 
@@ -35,5 +39,9 @@
     animation-fill-mode: forwards;
     animation-name: stroke-end;
     animation-timing-function: motion.$ease-out;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 }

package/scss/components/modal/_modal.scss

@@ -45,6 +45,10 @@
       transition: opacity $duration-moderate-02 motion(entrance, expressive),
         visibility 0ms linear;
       visibility: inherit;
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     // V11: Question for design: do we have an updated tokens for fields that exist on `layer`?

package/scss/components/number-input/_number-input.scss

@@ -79,8 +79,6 @@
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl.#{$prefix}--number input[type='number'],
   .#{$prefix}--number--lg.#{$prefix}--number input[type='number'] {
     padding-right: rem(144px);
   }
@@ -307,8 +305,6 @@
     fill: $support-error;
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__invalid,
   .#{$prefix}--number--lg .#{$prefix}--number__invalid {
     right: rem(112px);
   }
@@ -322,10 +318,6 @@
     right: rem(80px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl
-    .#{$prefix}--number__invalid
-    + .#{$prefix}--number__rule-divider,
   .#{$prefix}--number--lg
     .#{$prefix}--number__invalid
     + .#{$prefix}--number__rule-divider {
@@ -391,20 +383,14 @@
   }
 
   // Size Variant styles
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl input[type='number'],
   .#{$prefix}--number--lg input[type='number'] {
     height: rem(48px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__controls,
   .#{$prefix}--number--lg .#{$prefix}--number__controls {
     width: rem(96px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--number--xl .#{$prefix}--number__control-btn,
   .#{$prefix}--number--lg .#{$prefix}--number__control-btn {
     width: rem(48px);
 

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -52,8 +52,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu--xl,
   .#{$prefix}--overflow-menu--lg {
     width: rem(48px);
     height: rem(48px);
@@ -111,6 +109,10 @@
       content: '';
       transition: background-color $duration-fast-02
         motion(entrance, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 
@@ -130,7 +132,7 @@
     background-color: $field-02;
   }
 
-  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
+  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not(.#{$prefix}--breadcrumb-menu-options)::after {
     top: rem(-3px);
     left: 0;
     width: rem(40px);
@@ -170,8 +172,6 @@
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu-options--xl.#{$prefix}--overflow-menu-options,
   .#{$prefix}--overflow-menu-options--lg.#{$prefix}--overflow-menu-options {
     &[data-floating-menu-direction='bottom']::after,
     &[data-floating-menu-direction='top']::after {
@@ -221,9 +221,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--overflow-menu-options--xl
-    .#{$prefix}--overflow-menu-options__option,
   .#{$prefix}--overflow-menu-options--lg
     .#{$prefix}--overflow-menu-options__option {
     height: rem(48px);

package/scss/components/pagination/_pagination.scss

@@ -182,6 +182,10 @@
 
   span.#{$prefix}--pagination__text {
     margin-left: $spacing-05;
+    color: $text-primary;
+  }
+
+  span.#{$prefix}--pagination__text.#{$prefix}--pagination__items-count {
     color: $text-secondary;
   }
 

package/scss/components/pagination-nav/_mixins.scss

@@ -22,10 +22,14 @@
       display: block;
       width: 0;
       height: $spacing-02;
-      background-color: $background-brand;
+      background-color: $border-interactive;
       content: '';
       opacity: 0;
       transition: width $duration-fast-02 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
   }
 

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -32,8 +32,8 @@
 /// @param {Number} $select-icon-top-position [$spacing-05]
 /// @param {Number} $select-icon-left-position [$spacing-05]
 @mixin pagination-nav(
-  $color: $text-secondary,
-  $text-color-active: $text-secondary,
+  $color: $text-primary,
+  $text-color-active: $text-primary,
   $background-color-hover: $background-hover,
   $background-color-active: initial,
   $font-weight: 400,
@@ -78,7 +78,7 @@
     min-width: $button-min-width;
     padding: $button-padding;
     border-radius: 0;
-    color: $text-secondary;
+    color: $text-primary;
     font-weight: $font-weight;
     line-height: 1;
     outline: 0;
@@ -90,7 +90,7 @@
 
     &:hover {
       background-color: $background-color-hover;
-      color: $text-secondary;
+      color: $text-primary;
     }
 
     &:focus {

package/scss/components/progress-bar/_progress-bar.scss

@@ -45,7 +45,7 @@
     height: 100%;
     background-color: $interactive;
     transform: scaleX(0);
-    transform-origin: 0 50%;
+    transform-origin: 0 center #{'/*rtl:100% center*/'};
     transition: transform $duration-fast-02 motion(standard, productive);
   }
 

package/scss/components/search/_search.scss

@@ -151,6 +151,10 @@
       content: '';
       transition: background-color $duration-fast-02
         motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &:hover {

package/scss/components/tabs/_tabs.scss

@@ -40,29 +40,25 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     @include reset;
     @include type-style('body-compact-01');
 
+    position: relative;
     display: flex;
     width: 100%;
     height: auto;
     min-height: rem(40px);
+    max-height: 4rem;
     color: $text-primary;
 
     &.#{$prefix}--tabs--contained {
       min-height: rem(48px);
     }
 
-    .#{$prefix}--tabs__nav {
+    .#{$prefix}--tab--list {
       display: flex;
-      overflow: auto hidden;
-      width: auto;
-      max-width: 100%;
-      flex-direction: row;
-      padding: 0;
-      margin: 0;
-      list-style: none;
-      outline: 0;
-      // hide scroll bars
+      width: 100%;
+      overflow-x: auto;
+      scroll-behavior: smooth;
       scrollbar-width: none;
-      transition: max-height $duration-fast-01 motion(standard, productive);
+      will-change: scroll-position;
 
       &::-webkit-scrollbar {
         display: none;
@@ -72,37 +68,121 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     //-----------------------------
     // Overflow Nav Buttons
     //-----------------------------
-    .#{$prefix}--tabs__overflow-indicator--left,
-    .#{$prefix}--tabs__overflow-indicator--right {
+    .#{$prefix}--tab--overflow-nav-button {
+      @include button-reset.reset;
+
+      display: flex;
+      width: $spacing-08;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      background-color: $background;
+
+      &:focus {
+        @include focus-outline('outline');
+      }
+    }
+
+    .#{$prefix}--tab--overflow-nav-button--hidden {
+      display: none;
+    }
+
+    &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
+      width: $spacing-09;
+      margin: 0;
+      background-color: $layer-accent;
+    }
+
+    .#{$prefix}--tab--overflow-nav-button svg {
+      fill: $icon-primary;
+    }
+
+    .#{$prefix}--tab--overflow-nav-button--next {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    .#{$prefix}--tab--overflow-nav-button--next::before {
+      position: absolute;
       z-index: 1;
+      left: -$spacing-03;
       width: $spacing-03;
-      flex: 1 0 auto;
+      height: 100%;
+      background: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $background
+      );
+      content: '';
     }
 
-    .#{$prefix}--tabs__overflow-indicator--left {
-      margin-right: -$spacing-03;
-      background-image: linear-gradient(to left, transparent, $background);
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tab--overflow-nav-button--next::before {
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
-    .#{$prefix}--tabs__overflow-indicator--right {
-      margin-left: -$spacing-03;
-      background-image: linear-gradient(to right, transparent, $background);
+    .#{$prefix}--tab--overflow-nav-button--previous {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+    }
+
+    .#{$prefix}--tab--overflow-nav-button--previous::before {
+      position: absolute;
+      z-index: 1;
+      right: -$spacing-03;
+      width: $spacing-03;
+      height: 100%;
+      background: linear-gradient(to left, rgba(255, 255, 255, 0), $background);
+      content: '';
+    }
+
+    &.#{$prefix}--tabs--contained
+      .#{$prefix}--tab--overflow-nav-button--previous::before {
+      background-image: linear-gradient(
+        to left,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
     .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--left {
-      background-image: linear-gradient(to left, transparent, $layer);
+      background-image: linear-gradient(
+        to left,
+        rgba(255, 255, 255, 0),
+        $layer
+      );
     }
 
     .#{$prefix}--tabs--light .#{$prefix}--tabs__overflow-indicator--right {
-      background-image: linear-gradient(to right, transparent, $layer);
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $layer
+      );
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--left {
-      background-image: linear-gradient(to left, transparent, $layer-accent);
+      background-image: linear-gradient(
+        to left,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__overflow-indicator--right {
-      background-image: linear-gradient(to right, transparent, $layer-accent);
+      background-image: linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0),
+        $layer-accent
+      );
     }
 
     // Safari-only media query
@@ -146,34 +226,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
     }
 
-    .#{$prefix}--tab--overflow-nav-button {
-      @include button-reset.reset;
-
-      display: flex;
-      width: $spacing-08;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-
-      &:focus {
-        @include focus-outline('outline');
-      }
-    }
-
-    .#{$prefix}--tab--overflow-nav-button--hidden {
-      display: none;
-    }
-
-    &.#{$prefix}--tabs--contained .#{$prefix}--tab--overflow-nav-button {
-      width: $spacing-09;
-      margin: 0;
-      background-color: $layer-accent;
-    }
-
-    .#{$prefix}--tab--overflow-nav-button svg {
-      fill: $icon-primary;
-    }
-
     //-----------------------------
     // Item
     //-----------------------------
@@ -181,6 +233,7 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       @include reset;
 
       display: flex;
+      flex: 1 0 auto;
       padding: 0;
       cursor: pointer;
       transition: background-color $duration-fast-01

package/scss/components/text-input/_text-input.scss

@@ -96,15 +96,19 @@
     width: 100%;
   }
 
-  .#{$prefix}--text-input__invalid-icon {
+  .#{$prefix}--text-input__invalid-icon,
+  .#{$prefix}--text-input__readonly-icon {
     position: absolute;
     // top/transform used to center invalid icon in IE11
     top: 50%;
     right: $spacing-05;
-    fill: $support-error;
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--text-input__invalid-icon {
+    fill: $support-error;
+  }
+
   .#{$prefix}--text-input__invalid-icon--warning {
     fill: $support-warning;
   }
@@ -175,7 +179,8 @@
   }
 
   .#{$prefix}--text-input--invalid,
-  .#{$prefix}--text-input--warning {
+  .#{$prefix}--text-input--warning,
+  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
     padding-right: $spacing-08;
   }
 
@@ -381,6 +386,15 @@
     flex-direction: column;
   }
 
+  //-----------------------------
+  // Readonly
+  //-----------------------------
+
+  .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--readonly,
+  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
+    background: transparent;
+  }
+
   // Windows HCM fix
   .#{$prefix}--text-input--password__visibility,
     // TODO: remove selector above

package/scss/components/tile/_tile.scss

@@ -144,6 +144,10 @@
       transform-origin: center;
       transition: $duration-fast-02 motion(standard, productive);
 
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
       // Windows, Firefox HCM Fix
       @media screen and (-ms-high-contrast: active),
         screen and (prefers-contrast) {

package/scss/components/toggle/_toggle.scss

@@ -64,6 +64,10 @@
         border-radius: 50%;
         content: '';
         transition: transform $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -199,6 +203,10 @@
         transition: box-shadow $duration-fast-01 motion(exit, productive),
           background-color $duration-fast-01 motion(exit, productive);
         will-change: box-shadow;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       // Toggle circle
@@ -215,6 +223,10 @@
         content: '';
         cursor: pointer;
         transition: transform $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -313,6 +325,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 
@@ -432,6 +448,10 @@
         transition: box-shadow $duration-fast-01 motion(exit, productive),
           background-color $duration-fast-01 motion(exit, productive);
         will-change: box-shadow;
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
 
       // Toggle circle
@@ -531,6 +551,10 @@
       &::after {
         cursor: not-allowed;
         transition: $duration-fast-01 motion(exit, productive);
+
+        @media screen and (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
       }
     }
 

package/scss/utilities/_tooltip.scss

@@ -127,6 +127,10 @@
   &::before,
   &::after {
     transition: opacity $duration-fast-01 motion(standard, productive);
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &.#{$prefix}--tooltip--a11y::before,