@carbon/styles 1.29.0 → 1.30.0

package/scss/__tests__/spacing-test.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2018, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('@carbon/styles/scss/spacing', () => {
+  test('Public API', async () => {
+    const { get } = await render(`
+      @use 'sass:meta';
+      @use '../spacing';
+
+      $_: get('api', (
+        variables: meta.module-variables('spacing'),
+      ));
+    `);
+
+    const { value: api } = get('api');
+
+    expect(api).toMatchSnapshot();
+  });
+});

package/scss/__tests__/type-test.js

@@ -51,6 +51,8 @@ describe('@carbon/styles/scss/type', () => {
     });
     expect(api.variables).toMatchInlineSnapshot(`
       Array [
+        "caption-01",
+        "caption-02",
         "label-01",
         "label-02",
         "helper-text-01",

package/scss/_spacing.scss

@@ -8,4 +8,8 @@
 @forward '@carbon/layout/scss/spacing' show $spacing, $spacing-01, $spacing-02,
   $spacing-03, $spacing-04, $spacing-05, $spacing-06, $spacing-07, $spacing-08,
   $spacing-09, $spacing-10, $spacing-11, $spacing-12, $spacing-13,
-  $fluid-spacing-01, $fluid-spacing-02, $fluid-spacing-03, $fluid-spacing-04;
+  $fluid-spacing-01, $fluid-spacing-02, $fluid-spacing-03, $fluid-spacing-04,
+  // Deprecated
+  $layout,
+  $layout-01, $layout-02, $layout-03, $layout-04, $layout-05, $layout-06,
+  $layout-07;

package/scss/components/content-switcher/_content-switcher.scss

@@ -315,7 +315,9 @@
     + .#{$prefix}--content-switcher-popover__wrapper
     .#{$prefix}--content-switcher-btn::before,
   .#{$prefix}--content-switcher-btn:hover::before,
-  .#{$prefix}--content-switcher-popover__wrapper:not(.#{$prefix}--content-switcher-popover--disabled):hover
+  .#{$prefix}--content-switcher-popover__wrapper:not(
+      .#{$prefix}--content-switcher-popover--disabled
+    ):hover
     + .#{$prefix}--content-switcher-popover__wrapper
     .#{$prefix}--content-switcher-btn::before,
   .#{$prefix}--content-switcher--selected::before,
@@ -337,7 +339,9 @@
   }
 
   .#{$prefix}--content-switcher--icon-only
-    .#{$prefix}--content-switcher-btn[disabled]:not(.#{$prefix}--content-switcher--selected):hover,
+    .#{$prefix}--content-switcher-btn[disabled]:not(
+      .#{$prefix}--content-switcher--selected
+    ):hover,
   .#{$prefix}--content-switcher--icon-only
     .#{$prefix}--content-switcher-popover--selected
     + .#{$prefix}--content-switcher-popover--disabled

package/scss/components/data-table/_data-table.scss

@@ -673,8 +673,12 @@
       min-height: 3rem;
     }
 
-    &:not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--xl):not(.#{$prefix}--data-table--sm)
-      td:not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-column-checkbox) {
+    &:not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--xl):not(
+        .#{$prefix}--data-table--sm
+      )
+      td:not(.#{$prefix}--table-column-menu):not(
+        .#{$prefix}--table-column-checkbox
+      ) {
       padding-top: rem(14px);
     }
 
@@ -741,8 +745,12 @@
       border-bottom: 0;
     }
 
-    th:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon),
-    td:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) {
+    th:not(.#{$prefix}--table-column-checkbox):not(
+        .#{$prefix}--table-column-menu
+      ):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon),
+    td:not(.#{$prefix}--table-column-checkbox):not(
+        .#{$prefix}--table-column-menu
+      ):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) {
       width: 100%;
       min-width: 0;
     }

package/scss/components/data-table/_mixins.scss

@@ -25,8 +25,12 @@
     max-height: $max-height;
 
     @if $min-width {
-      th:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon),
-      td:not(.#{$prefix}--table-column-checkbox):not(.#{$prefix}--table-column-menu):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) {
+      th:not(.#{$prefix}--table-column-checkbox):not(
+          .#{$prefix}--table-column-menu
+        ):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon),
+      td:not(.#{$prefix}--table-column-checkbox):not(
+          .#{$prefix}--table-column-menu
+        ):not(.#{$prefix}--table-expand):not(.#{$prefix}--table-column-icon) {
         min-width: $min-width;
       }
     }

package/scss/components/data-table/action/_data-table-action.scss

@@ -94,7 +94,9 @@
     opacity: 0;
   }
 
-  .#{$prefix}--toolbar-search-container-expandable:not(.#{$prefix}--toolbar-search-container-active)
+  .#{$prefix}--toolbar-search-container-expandable:not(
+      .#{$prefix}--toolbar-search-container-active
+    )
     .#{$prefix}--search-input {
     padding: 0;
   }
@@ -144,7 +146,9 @@
 
   // sm expandable icon spacing
   .#{$prefix}--table-toolbar.#{$prefix}--table-toolbar--sm
-    .#{$prefix}--search--sm:not(.#{$prefix}--toolbar-search-container-active):not(.#{$prefix}--toolbar-search-container-persistent)
+    .#{$prefix}--search--sm:not(
+      .#{$prefix}--toolbar-search-container-active
+    ):not(.#{$prefix}--toolbar-search-container-persistent)
     .#{$prefix}--search-magnifier-icon {
     left: 0;
   }

package/scss/components/data-table/expandable/_data-table-expandable.scss

@@ -334,7 +334,9 @@
   }
 
   // Parent collapsed hover
-  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(.#{$prefix}--expandable-row):hover
+  tr.#{$prefix}--parent-row.#{$prefix}--data-table--selected:not(
+      .#{$prefix}--expandable-row
+    ):hover
     td {
     border-top: 1px solid $layer-selected-hover;
     border-bottom: 1px solid $border-subtle;

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -90,7 +90,9 @@
     justify-content: space-between;
   }
 
-  .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--xs):not(.#{$prefix}--data-table--sm):not(.#{$prefix}--data-table--md):not(.#{$prefix}--data-table--xl)
+  .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--xs):not(
+      .#{$prefix}--data-table--sm
+    ):not(.#{$prefix}--data-table--md):not(.#{$prefix}--data-table--xl)
     th
     .#{$prefix}--table-sort__flex {
     /* IE11 workaround for align-items: center and min-height

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

@@ -64,9 +64,6 @@
     display: inline-block;
     width: 100%;
     max-width: rem(320px);
-    @if not enabled('enable-v11-release') {
-      margin-bottom: $spacing-03;
-    }
 
     color: $link-primary;
     cursor: pointer;

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -79,7 +79,9 @@
 
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--simple
-    .#{$prefix}--date-picker__input:not(.#{$prefix}--date-picker__input--invalid):not(.#{$prefix}--date-picker__input--warn),
+    .#{$prefix}--date-picker__input:not(
+      .#{$prefix}--date-picker__input--invalid
+    ):not(.#{$prefix}--date-picker__input--warn),
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--simple
     .#{$prefix}--date-picker--fluid--warn {
@@ -103,15 +105,21 @@
 
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--single
-    .#{$prefix}--date-picker__input:not(.#{$prefix}--date-picker__input--invalid),
+    .#{$prefix}--date-picker__input:not(
+      .#{$prefix}--date-picker__input--invalid
+    ),
   .#{$prefix}--date-picker--single .#{$prefix}--date-picker--fluid--warn {
     border-bottom: 1px solid $border-strong;
   }
 
   // Range
-  .#{$prefix}--date-picker--fluid:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+  .#{$prefix}--date-picker--fluid:not(
+      .#{$prefix}--date-picker--fluid--invalid
+    ):not(.#{$prefix}--date-picker--fluid--warn)
     .#{$prefix}--date-picker--range
-    .#{$prefix}--date-picker-container:not(.#{$prefix}--date-picker--fluid--invalid) {
+    .#{$prefix}--date-picker-container:not(
+      .#{$prefix}--date-picker--fluid--invalid
+    ) {
     border-bottom: 1px solid $border-strong;
   }
 
@@ -362,16 +370,22 @@
   }
 
   // Readonly
-  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(
+      .#{$prefix}--date-picker--fluid--invalid
+    ):not(.#{$prefix}--date-picker--fluid--warn)
     .#{$prefix}--date-picker
     > .#{$prefix}--date-picker-container,
-  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(
+      .#{$prefix}--date-picker--fluid--invalid
+    ):not(.#{$prefix}--date-picker--fluid--warn)
     .#{$prefix}--date-picker
     .#{$prefix}--date-picker__input {
     border-bottom-color: $border-subtle;
   }
 
-  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(
+      .#{$prefix}--date-picker--fluid--invalid
+    ):not(.#{$prefix}--date-picker--fluid--warn)
     .#{$prefix}--date-picker--range
     > .#{$prefix}--date-picker-container:last-child
     .#{$prefix}--date-picker__input {

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -71,12 +71,16 @@
     height: 1rem;
   }
 
-  .#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box__wrapper--fluid--condensed)
+  .#{$prefix}--list-box__wrapper--fluid:not(
+      .#{$prefix}--list-box__wrapper--fluid--condensed
+    )
     .#{$prefix}--list-box__menu-item {
     height: $spacing-10;
   }
 
-  .#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box__wrapper--fluid--condensed)
+  .#{$prefix}--list-box__wrapper--fluid:not(
+      .#{$prefix}--list-box__wrapper--fluid--condensed
+    )
     .#{$prefix}--list-box__menu-item__selected-icon {
     top: rem(20px);
   }
@@ -122,7 +126,9 @@
   }
 
   // Invalid / Warning styles
-  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:not(.#{$prefix}--list-box__wrapper--fluid--focus) {
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:not(
+      .#{$prefix}--list-box__wrapper--fluid--focus
+    ) {
     @include focus-outline('invalid');
 
     z-index: 2;

package/scss/components/fluid-multiselect/_fluid-multiselect.scss

@@ -19,7 +19,9 @@
 @use '../fluid-combo-box';
 
 @mixin fluid-multiselect {
-  .#{$prefix}--multi-select__wrapper.#{$prefix}--list-box__wrapper--fluid--focus:not(.#{$prefix}--multi-select--filterable__wrapper)
+  .#{$prefix}--multi-select__wrapper.#{$prefix}--list-box__wrapper--fluid--focus:not(
+      .#{$prefix}--multi-select--filterable__wrapper
+    )
     .#{$prefix}--list-box__field--wrapper--input-focused {
     outline: none;
   }

package/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -84,18 +84,26 @@
   }
 
   // Weird overrides (needed to override focus borders on stepper buttons when hovered while input has focus)
-  .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+  .#{$prefix}--number-input--fluid:not(
+      .#{$prefix}--number-input--fluid--invalid
+    )
     .#{$prefix}--number
-    .#{$prefix}--number__input-wrapper:not(.#{$prefix}--number__input-wrapper--warning)
+    .#{$prefix}--number__input-wrapper:not(
+      .#{$prefix}--number__input-wrapper--warning
+    )
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
     outline: 2px solid transparent;
   }
 
-  .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+  .#{$prefix}--number-input--fluid:not(
+      .#{$prefix}--number-input--fluid--invalid
+    )
     .#{$prefix}--number
-    .#{$prefix}--number__input-wrapper:not(.#{$prefix}--number__input-wrapper--warning)
+    .#{$prefix}--number__input-wrapper:not(
+      .#{$prefix}--number__input-wrapper--warning
+    )
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover::before {
@@ -108,8 +116,12 @@
   }
   // End weirdness
 
-  .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
-    .#{$prefix}--number-input-wrapper:not(.#{$prefix}--number-input-wrapper__warning)
+  .#{$prefix}--number-input--fluid:not(
+      .#{$prefix}--number-input--fluid--invalid
+    )
+    .#{$prefix}--number-input-wrapper:not(
+      .#{$prefix}--number-input-wrapper__warning
+    )
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
@@ -208,7 +220,9 @@
     margin: 0;
   }
 
-  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid:not(.#{$prefix}--number-input--fluid--focus)
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid:not(
+      .#{$prefix}--number-input--fluid--focus
+    )
     .#{$prefix}--number {
     @include focus-outline('invalid');
   }
@@ -263,7 +277,9 @@
   }
 
   // Disabled states
-  .#{$prefix}--number-input--fluid--disabled:not(.#{$prefix}--number-input--fluid--invalid)
+  .#{$prefix}--number-input--fluid--disabled:not(
+      .#{$prefix}--number-input--fluid--invalid
+    )
     .#{$prefix}--number {
     border-bottom: 1px solid $border-subtle;
   }

package/scss/components/form/_form.scss

@@ -125,7 +125,9 @@ $input-label-weight: 400 !default;
     > .#{$prefix}--text-area--invalid:not(:focus),
   .#{$prefix}--select-input__wrapper[data-invalid]
     .#{$prefix}--select-input:not(:focus),
-  .#{$prefix}--list-box[data-invalid]:not(.#{$prefix}--multi-select--invalid--focused),
+  .#{$prefix}--list-box[data-invalid]:not(
+      .#{$prefix}--multi-select--invalid--focused
+    ),
   .#{$prefix}--combo-box[data-invalid]:not(.#{$prefix}--multi-select--selected)
     .#{$prefix}--text-input:not(:focus) {
     @include focus-outline('invalid');
@@ -177,12 +179,6 @@ $input-label-weight: 400 !default;
     display: block;
   }
 
-  @if not enabled('enable-v11-release') {
-    .#{$prefix}--form--fluid .#{$prefix}--fieldset {
-      margin: 0;
-    }
-  }
-
   .#{$prefix}--form--fluid input[data-invalid] {
     outline: none;
   }

package/scss/components/multiselect/_multiselect.scss

@@ -95,7 +95,9 @@
     padding-left: 0;
   }
 
-  .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover:not(.#{$prefix}--multi-select--filterable)
+  .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover:not(
+      .#{$prefix}--multi-select--filterable
+    )
     .#{$prefix}--text-input {
     background-color: $field;
   }

package/scss/components/notification/_actionable-notification.scss

@@ -36,10 +36,6 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    @if not enabled('enable-v11-release') {
-      margin-top: $spacing-05;
-      margin-bottom: $spacing-05;
-    }
 
     color: $text-inverse;
 
@@ -64,7 +60,9 @@
     box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
   }
 
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     a {
     color: $link-inverse;
   }
@@ -90,7 +88,9 @@
     color: $text-primary;
   }
 
-  .#{$prefix}--actionable-notification--low-contrast:not(.#{$prefix}--actionable-notification--toast)::before {
+  .#{$prefix}--actionable-notification--low-contrast:not(
+      .#{$prefix}--actionable-notification--toast
+    )::before {
     position: absolute;
     top: 0;
     left: 0;
@@ -182,7 +182,10 @@
 
   .#{$prefix}--actionable-notification--warning
     .#{$prefix}--toast-notification__icon
-    path[opacity='0'] {
+    path[opacity='0'],
+  .#{$prefix}--actionable-notification--warning-alt
+    .#{$prefix}--toast-notification__icon
+    path:first-of-type {
     fill: $black-100;
     opacity: 1;
   }
@@ -193,7 +196,9 @@
     margin: 0 $spacing-09 0 rem(13px);
   }
 
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--toast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--toast
+    )
     .#{$prefix}--actionable-notification__details {
     @include breakpoint(md) {
       margin: 0 rem(13px);
@@ -272,7 +277,9 @@
     }
   }
 
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
     color: $link-inverse;
   }
@@ -324,7 +331,9 @@
   // btn-tertiary g10 theme button styles should become g90 button styles
   // btn-tertiary g90 theme button styles should become g10 button styles
   // btn-tertiary g100 theme button styles should become white button styles
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary {
     @include button-mixins.button-theme(
       transparent,
@@ -336,12 +345,16 @@
     );
   }
 
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover {
     color: $notification-action-tertiary-inverse-text;
   }
 
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus {
     border-color: $focus-inverse;
     background-color: $notification-action-tertiary-inverse;
@@ -350,24 +363,38 @@
     color: $notification-action-tertiary-inverse-text;
   }
 
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:active {
     border-color: transparent;
     background-color: $notification-action-tertiary-inverse-active;
     color: $notification-action-tertiary-inverse-text;
   }
 
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:disabled,
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:hover:disabled,
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus:disabled,
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled,
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled:hover,
-  .#{$prefix}--actionable-notification:not(.#{$prefix}--actionable-notification--low-contrast)
+  .#{$prefix}--actionable-notification:not(
+      .#{$prefix}--actionable-notification--low-contrast
+    )
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled:focus {
     background: transparent;
     color: $notification-action-tertiary-inverse-text-on-color-disabled;

package/scss/components/notification/_inline-notification.scss

@@ -51,7 +51,9 @@
     }
   }
 
-  .#{$prefix}--inline-notification:not(.#{$prefix}--inline-notification--low-contrast)
+  .#{$prefix}--inline-notification:not(
+      .#{$prefix}--inline-notification--low-contrast
+    )
     a {
     color: $link-inverse;
   }
@@ -169,7 +171,10 @@
 
   .#{$prefix}--inline-notification--warning
     .#{$prefix}--inline-notification__icon
-    path[opacity='0'] {
+    path[opacity='0'],
+  .#{$prefix}--inline-notification--warning-alt
+    .#{$prefix}--inline-notification__icon
+    path:first-of-type {
     fill: $black-100;
     opacity: 1;
   }
@@ -218,7 +223,9 @@
     }
   }
 
-  .#{$prefix}--inline-notification:not(.#{$prefix}--inline-notification--low-contrast)
+  .#{$prefix}--inline-notification:not(
+      .#{$prefix}--inline-notification--low-contrast
+    )
     .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
     color: $link-inverse;
   }

package/scss/components/notification/_toast-notification.scss

@@ -41,7 +41,9 @@
     }
   }
 
-  .#{$prefix}--toast-notification:not(.#{$prefix}--toast-notification--low-contrast)
+  .#{$prefix}--toast-notification:not(
+      .#{$prefix}--toast-notification--low-contrast
+    )
     a {
     color: $link-inverse;
   }
@@ -129,7 +131,10 @@
 
   .#{$prefix}--toast-notification--warning
     .#{$prefix}--toast-notification__icon
-    path[opacity='0'] {
+    path[opacity='0'],
+  .#{$prefix}--toast-notification--warning-alt
+    .#{$prefix}--toast-notification__icon
+    path:first-of-type {
     fill: $black-100;
     opacity: 1;
   }

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

@@ -136,7 +136,9 @@
     background-color: $layer;
   }
 
-  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not(.#{$prefix}--breadcrumb-menu-options)::after {
+  .#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']:not(
+      .#{$prefix}--breadcrumb-menu-options
+    )::after {
     top: rem(-3px);
     left: 0;
     width: rem(40px);

package/scss/components/popover/_popover.scss

@@ -130,7 +130,9 @@ $popover-caret-height: custom-property.get-var(
     pointer-events: auto;
   }
 
-  .#{$prefix}--popover--open .#{$prefix}--popover-content {
+  .#{$prefix}--popover--open
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
     display: block;
   }
 
@@ -144,7 +146,9 @@ $popover-caret-height: custom-property.get-var(
     content: '';
   }
 
-  .#{$prefix}--popover--open .#{$prefix}--popover-content::before {
+  .#{$prefix}--popover--open
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content::before {
     display: block;
   }
 
@@ -160,11 +164,18 @@ $popover-caret-height: custom-property.get-var(
     will-change: transform;
   }
 
-  .#{$prefix}--popover--open.#{$prefix}--popover--caret
-    .#{$prefix}--popover-caret {
+  .#{$prefix}--popover--open
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
     display: block;
   }
 
+  .#{$prefix}--popover--tab-tip
+    .#{$prefix}--popover
+    .#{$prefix}--popover-caret {
+    display: none;
+  }
+
   //-----------------------------------------------------------------------------
   // Bottom
   //-----------------------------------------------------------------------------

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

@@ -111,7 +111,9 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     margin-right: 0.75rem;
   }
 
-  .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable) {
+  .#{$prefix}--progress-step-button:not(
+      .#{$prefix}--progress-step-button--unclickable
+    ) {
     &:focus {
       outline: none;
     }