@carbon/web-components 2.46.0 → 2.47.0

package/scss/components/modal/modal.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -16,6 +16,7 @@
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/components/modal' as *;
 @use '@carbon/styles/scss/components/button' as *;
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
 
 :host(#{$prefix}-modal[open]) {
   @extend .#{$prefix}--modal;
@@ -53,11 +54,15 @@
   }
 }
 
-:host(#{$prefix}-modal[has-scrolling-content])
-  ::slotted(#{$prefix}-modal-body) {
+:host(#{$prefix}-modal[has-scrolling-content]) ::slotted(#{$prefix}-modal-body),
+:host(#{$prefix}-modal) ::slotted(#{$prefix}-modal-body[is-scrollable]) {
   @extend .#{$prefix}--modal-scroll-content;
 }
 
+:host(#{$prefix}-modal) ::slotted(#{$prefix}-modal-body[no-fade]) {
+  @extend .#{$prefix}--modal-scroll-content--no-fade;
+}
+
 :host(#{$prefix}-modal-header) {
   @extend .#{$prefix}--modal-header;
 }
@@ -68,6 +73,10 @@
   outline: none;
 }
 
+:host(#{$prefix}-modal-close-button) #{$prefix}-icon-button::part(button) {
+  border-width: 2px;
+}
+
 :host(#{$prefix}-modal-heading),
 :host(#{$prefix}-modal-label) {
   display: block;
@@ -92,10 +101,10 @@
   ::slotted(#{$prefix}-select:last-of-type) {
     padding-block-end: 0;
   }
+}
 
-  ::slotted(*:last-child) {
-    padding-block-end: $spacing-07;
-  }
+:host(#{$prefix}-modal-body:focus) {
+  @include focus-outline('outline');
 }
 
 :host(#{$prefix}-modal-body-content) {
@@ -119,6 +128,10 @@
   ::slotted(#{$prefix}-modal-footer-button) {
     flex: 0 1 25%;
   }
+
+  ::slotted(#{$prefix}-inline-loading) {
+    flex: 0 1 25%;
+  }
 }
 
 :host(#{$prefix}-modal-footer-button:first-of-type) .#{$prefix}--btn {
@@ -151,6 +164,13 @@
   max-inline-size: none;
 }
 
+:host(#{$prefix}-modal-footer) ::slotted(#{$prefix}-inline-loading) {
+  flex: 0 1 50%;
+  cursor: not-allowed;
+  padding-block: $spacing-05 $spacing-07;
+  padding-inline-start: $spacing-05;
+}
+
 // AI Label
 
 :host(#{$prefix}-modal[ai-label]) {
@@ -177,7 +197,7 @@
 }
 
 :host(#{$prefix}-modal[ai-label][has-scrolling-content]) {
-  ::slotted(#{$prefix}-modal-body) {
+  ::slotted(#{$prefix}-modal-body:not([no-fade])) {
     mask-image: linear-gradient(
         to bottom,
         $layer calc(100% - 80px),

package/scss/components/multi-select/multi-select.scss

@@ -89,7 +89,7 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-multi-select[invalid]) {
+:host(#{$prefix}-multi-select[invalid]:not([disabled]):not([read-only])) {
   .#{$prefix}--form__helper-text {
     color: $text-error;
   }
@@ -477,7 +477,7 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-multi-select[warn]) {
+:host(#{$prefix}-multi-select[warn]:not([disabled]):not([read-only])) {
   .#{$prefix}--form__helper-text {
     color: $text-primary;
   }

package/scss/components/notification/actionable-notification.scss

@@ -12,7 +12,6 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/components/notification/index' as *;
-@use '@carbon/styles/scss/components/notification/mixins' as *;
 @use '@carbon/styles/scss/components/button';
 @use '@carbon/styles/scss/components/button/mixins' as button-mixins;
 @use '@carbon/styles/scss/components/button/vars' as button-vars;
@@ -21,7 +20,7 @@ $css--plex: true !default;
 @include actionable-notification;
 
 :host(#{$prefix}-actionable-notification) {
-  @extend .#{$prefix}--actionable-notification;
+  @include actionable-notification-base;
   @include emit-layout-tokens();
 
   display: none;
@@ -90,75 +89,60 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-actionable-notification:not([inline])) {
-  @extend .#{$prefix}--actionable-notification--toast;
+  @include actionable-notification-toast-base;
+
+  .#{$prefix}--actionable-notification__content {
+    flex-direction: column;
+  }
 }
 
-:host(#{$prefix}-actionable-notification[inline][low-contrast])::before {
-  position: absolute;
-  box-sizing: border-box;
-  border-width: 1px 1px 1px 0;
-  border-style: solid;
-  block-size: 100%;
-  content: '';
-  filter: opacity(0.4);
-  inline-size: 100%;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  pointer-events: none;
+:host(#{$prefix}-actionable-notification[inline][low-contrast])::before,
+:host(#{$prefix}-callout-notification[inline][low-contrast])::before {
+  @include actionable-notification-low-contrast-inline-before;
+}
+
+:host(#{$prefix}-actionable-notification[low-contrast]),
+:host(#{$prefix}-callout-notification[low-contrast]) {
+  @include actionable-notification-low-contrast-base;
 }
 
 :host(#{$prefix}-actionable-notification[open]) {
   display: flex;
 }
 
+:host(#{$prefix}-actionable-notification:not([inline]))
+  .#{$prefix}--actionable-notification__close-button {
+  position: absolute;
+}
+
 :host(#{$prefix}-actionable-notification[hide-close-button])
   .#{$prefix}--actionable-notification__close-button {
   display: none;
 }
 
 :host(#{$prefix}-actionable-notification[kind='success']) {
-  @extend .#{$prefix}--actionable-notification--success;
+  @include actionable-notification-success-base;
 }
 
 :host(#{$prefix}-actionable-notification[kind='success'][low-contrast]) {
-  @extend .#{$prefix}--actionable-notification--low-contrast,
-    .#{$prefix}--actionable-notification--success;
-
-  @include notification--experimental(
-    $support-success,
-    $notification-background-success
-  );
-
-  &::before {
-    border-color: $support-success;
-  }
+  @include actionable-notification-low-contrast-success;
 }
 
 :host(#{$prefix}-actionable-notification[kind='info']) {
-  @extend .#{$prefix}--actionable-notification--info;
+  @include actionable-notification-info-base;
 }
 
 :host(#{$prefix}-actionable-notification[kind='info-square']) {
-  @extend .#{$prefix}--actionable-notification--info-square;
+  @include actionable-notification-info-base;
 }
 
 :host(#{$prefix}-actionable-notification[kind='info'][low-contrast]),
 :host(#{$prefix}-actionable-notification[kind='info-square'][low-contrast]) {
-  @extend .#{$prefix}--actionable-notification--low-contrast,
-    .#{$prefix}--actionable-notification--info;
-
-  @include notification--experimental(
-    $support-info,
-    $notification-background-info
-  );
-
-  &::before {
-    border-color: $support-info;
-  }
+  @include actionable-notification-low-contrast-info;
 }
 
 :host(#{$prefix}-actionable-notification[kind='warning']) {
-  @extend .#{$prefix}--actionable-notification--warning;
+  @include actionable-notification-warning-base;
 
   /* TODO: Remove this once the following issue with icon fill is resolved:
   ** https://github.com/carbon-design-system/carbon/issues/13616
@@ -170,7 +154,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-actionable-notification[kind='warning-alt']) {
-  @extend .#{$prefix}--actionable-notification--warning-alt;
+  @include actionable-notification-warning-base;
 
   /* TODO: Remove this once the following issue with icon fill is resolved:
   ** https://github.com/carbon-design-system/carbon/issues/13616
@@ -186,38 +170,18 @@ $css--plex: true !default;
 
 :host(#{$prefix}-actionable-notification[kind='warning'][low-contrast]),
 :host(#{$prefix}-actionable-notification[kind='warning-alt'][low-contrast]) {
-  @extend .#{$prefix}--actionable-notification--low-contrast,
-    .#{$prefix}--actionable-notification--warning;
-
-  @include notification--experimental(
-    $support-warning,
-    $notification-background-warning
-  );
-
-  &::before {
-    border-color: $support-warning;
-  }
+  @include actionable-notification-low-contrast-warning;
 }
 
 :host(#{$prefix}-actionable-notification[kind='error']) {
-  @extend .#{$prefix}--actionable-notification--error;
+  @include actionable-notification-error-base;
 }
 
 :host(#{$prefix}-actionable-notification[kind='error'][low-contrast]) {
-  @extend .#{$prefix}--actionable-notification--low-contrast,
-    .#{$prefix}--actionable-notification--error;
-
-  @include notification--experimental(
-    $support-error,
-    $notification-background-error
-  );
-
-  &::before {
-    border-color: $support-error;
-  }
+  @include actionable-notification-low-contrast-error;
 }
 :host(#{$prefix}-callout-notification) {
-  @extend .#{$prefix}--actionable-notification;
+  @include actionable-notification-base;
   @include emit-layout-tokens();
 
   display: flex;
@@ -229,63 +193,33 @@ $css--plex: true !default;
   display: none;
 }
 
-:host(#{$prefix}-callout-notification[low-contrast])::before {
-  position: absolute;
-  box-sizing: border-box;
-  border-width: 1px 1px 1px 0;
-  border-style: solid;
-  block-size: 100%;
-  content: '';
-  filter: opacity(0.4);
-  inline-size: 100%;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  pointer-events: none;
+:host(#{$prefix}-callout-notification[inline][low-contrast])::before {
+  @include actionable-notification-low-contrast-inline-before;
 }
 
 :host(#{$prefix}-callout-notification[kind='success']) {
-  @extend .#{$prefix}--actionable-notification--success;
+  @include actionable-notification-success-base;
 }
 
 :host(#{$prefix}-callout-notification[kind='success'][low-contrast]) {
-  @extend .#{$prefix}--actionable-notification--low-contrast,
-    .#{$prefix}--actionable-notification--success;
-
-  @include notification--experimental(
-    $support-success,
-    $notification-background-success
-  );
-
-  &::before {
-    border-color: $support-success;
-  }
+  @include actionable-notification-low-contrast-success;
 }
 
 :host(#{$prefix}-callout-notification[kind='info']) {
-  @extend .#{$prefix}--actionable-notification--info;
+  @include actionable-notification-info-base;
 }
 
 :host(#{$prefix}-callout-notification[kind='info-square']) {
-  @extend .#{$prefix}--actionable-notification--info-square;
+  @include actionable-notification-info-base;
 }
 
 :host(#{$prefix}-callout-notification[kind='info'][low-contrast]),
 :host(#{$prefix}-callout-notification[kind='info-square'][low-contrast]) {
-  @extend .#{$prefix}--actionable-notification--low-contrast,
-    .#{$prefix}--actionable-notification--info;
-
-  @include notification--experimental(
-    $support-info,
-    $notification-background-info
-  );
-
-  &::before {
-    border-color: $support-info;
-  }
+  @include actionable-notification-low-contrast-info;
 }
 
 :host(#{$prefix}-callout-notification[kind='warning']) {
-  @extend .#{$prefix}--actionable-notification--warning;
+  @include actionable-notification-warning-base;
 
   /* TODO: Remove this once the following issue with icon fill is resolved:
   ** https://github.com/carbon-design-system/carbon/issues/13616
@@ -297,7 +231,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-callout-notification[kind='warning-alt']) {
-  @extend .#{$prefix}--actionable-notification--warning-alt;
+  @include actionable-notification-warning-base;
 
   /* TODO: Remove this once the following issue with icon fill is resolved:
   ** https://github.com/carbon-design-system/carbon/issues/13616
@@ -310,35 +244,15 @@ $css--plex: true !default;
 
 :host(#{$prefix}-callout-notification[kind='warning'][low-contrast]),
 :host(#{$prefix}-callout-notification[kind='warning-alt'][low-contrast]) {
-  @extend .#{$prefix}--actionable-notification--low-contrast,
-    .#{$prefix}--actionable-notification--warning;
-
-  @include notification--experimental(
-    $support-warning,
-    $notification-background-warning
-  );
-
-  &::before {
-    border-color: $support-warning;
-  }
+  @include actionable-notification-low-contrast-warning;
 }
 
 :host(#{$prefix}-callout-notification[kind='error']) {
-  @extend .#{$prefix}--actionable-notification--error;
+  @include actionable-notification-error-base;
 }
 
 :host(#{$prefix}-callout-notification[kind='error'][low-contrast]) {
-  @extend .#{$prefix}--actionable-notification--low-contrast,
-    .#{$prefix}--actionable-notification--error;
-
-  @include notification--experimental(
-    $support-error,
-    $notification-background-error
-  );
-
-  &::before {
-    border-color: $support-error;
-  }
+  @include actionable-notification-low-contrast-error;
 }
 
 :host(#{$prefix}-callout-notification)

package/scss/components/notification/inline-notification.scss

@@ -12,7 +12,6 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities/focus-outline' as *;
 @use '@carbon/styles/scss/components/notification/index' as *;
-@use '@carbon/styles/scss/components/notification/mixins' as *;
 @use '@carbon/styles/scss/components/button';
 @use '@carbon/styles/scss/layout' as *;
 
@@ -20,7 +19,7 @@ $css--plex: true !default;
 @include inline-notification;
 
 :host(#{$prefix}-inline-notification) {
-  @extend .#{$prefix}--inline-notification;
+  @include inline-notification-base;
   @include emit-layout-tokens();
 
   display: none;
@@ -35,20 +34,14 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-inline-notification[low-contrast])::before {
-  position: absolute;
-  box-sizing: border-box;
-  border-width: 1px 1px 1px 0;
-  border-style: solid;
-  block-size: 100%;
-  content: '';
-  filter: opacity(0.4);
-  inline-size: 100%;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  pointer-events: none;
+:host(#{$prefix}-inline-notification[low-contrast]) {
+  @include inline-notification-low-contrast-base;
 }
 
+// :host(#{$prefix}-inline-notification[low-contrast])::before {
+//   @include inline-notification-low-contrast-before;
+// }
+
 :host(#{$prefix}-inline-notification[open]) {
   display: flex;
 }
@@ -59,57 +52,32 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-inline-notification[kind='success']) {
-  @extend .#{$prefix}--inline-notification--success;
+  @include inline-notification-success-base;
 }
 
 :host(#{$prefix}-inline-notification[kind='success'][low-contrast]) {
-  @extend .#{$prefix}--inline-notification--low-contrast,
-    .#{$prefix}--inline-notification--success;
-
-  @include notification--experimental(
-    $support-success,
-    $notification-background-success
-  );
-
-  &::before {
-    border-color: $support-success;
-  }
+  @include inline-notification-low-contrast-success;
 }
 
 :host(#{$prefix}-inline-notification[kind='info']) {
-  @extend .#{$prefix}--inline-notification--info;
+  @include inline-notification-info-base;
 }
 
 :host(#{$prefix}-inline-notification[kind='info-square']) {
-  @extend .#{$prefix}--inline-notification--info-square;
+  @include inline-notification-info-base;
 }
 
 :host(#{$prefix}-inline-notification[kind='info'][low-contrast]),
 :host(#{$prefix}-inline-notification[kind='info-square'][low-contrast]) {
-  @extend .#{$prefix}--inline-notification--low-contrast,
-    .#{$prefix}--inline-notification--info;
-
-  @include notification--experimental(
-    $support-info,
-    $notification-background-info
-  );
-
-  &::before {
-    border-color: $support-info;
-  }
+  @include inline-notification-low-contrast-info;
 }
 
 :host(#{$prefix}-inline-notification[kind='warning']) {
-  @extend .#{$prefix}--inline-notification--warning;
+  @include inline-notification-warning-base;
 }
 
 :host(#{$prefix}-inline-notification[kind='warning-alt']) {
-  @extend .#{$prefix}--inline-notification--warning-alt;
-
-  &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast,
-      .#{$prefix}--inline-notification--warning-alt;
-  }
+  @include inline-notification-warning-base;
 
   /* TODO: Remove this once the following issue with icon fill is resolved:
   ** https://github.com/carbon-design-system/carbon/issues/13616
@@ -121,33 +89,13 @@ $css--plex: true !default;
 
 :host(#{$prefix}-inline-notification[kind='warning'][low-contrast]),
 :host(#{$prefix}-inline-notification[kind='warning-alt'][low-contrast]) {
-  @extend .#{$prefix}--inline-notification--low-contrast,
-    .#{$prefix}--inline-notification--warning;
-
-  @include notification--experimental(
-    $support-warning,
-    $notification-background-warning
-  );
-
-  &::before {
-    border-color: $support-warning;
-  }
+  @include inline-notification-low-contrast-warning;
 }
 
 :host(#{$prefix}-inline-notification[kind='error']) {
-  @extend .#{$prefix}--inline-notification--error;
+  @include inline-notification-error-base;
 }
 
 :host(#{$prefix}-inline-notification[kind='error'][low-contrast]) {
-  @extend .#{$prefix}--inline-notification--low-contrast,
-    .#{$prefix}--inline-notification--error;
-
-  @include notification--experimental(
-    $support-error,
-    $notification-background-error
-  );
-
-  &::before {
-    border-color: $support-error;
-  }
+  @include inline-notification-low-contrast-error;
 }

package/scss/components/notification/toast-notification.scss

@@ -10,7 +10,6 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/colors' as *;
 @use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/components/notification/mixins' as *;
 @use '@carbon/styles/scss/components/notification/index' as *;
 @use '@carbon/styles/scss/components/button';
 @use '@carbon/styles/scss/layout' as *;
@@ -19,7 +18,7 @@ $css--plex: true !default;
 @include toast-notification;
 
 :host(#{$prefix}-toast-notification) {
-  @extend .#{$prefix}--toast-notification;
+  @include toast-notification-base;
   @include emit-layout-tokens();
 
   display: none;
@@ -36,46 +35,38 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-toast-notification[kind='success']) {
-  @extend .#{$prefix}--toast-notification--success;
+  @include toast-notification-success-base;
 }
 
-:host(#{$prefix}-toast-notification[kind='success'][low-contrast]) {
-  @extend .#{$prefix}--toast-notification--low-contrast,
-    .#{$prefix}--toast-notification--success;
+:host(#{$prefix}-toast-notification[low-contrast]) {
+  @include toast-notification-low-contrast-base;
+}
 
-  @include notification--experimental(
-    $support-success,
-    $notification-background-success
-  );
+:host(#{$prefix}-toast-notification[kind='success'][low-contrast]) {
+  @include toast-notification-low-contrast-success;
 }
 
 :host(#{$prefix}-toast-notification[kind='info']) {
-  @extend .#{$prefix}--toast-notification--info;
+  @include toast-notification-info-base;
 }
 
 :host(#{$prefix}-toast-notification[kind='info-square']) {
-  @extend .#{$prefix}--toast-notification--info-square;
+  @include toast-notification-info-base;
 }
 
 :host(#{$prefix}-toast-notification[kind='info'][low-contrast]),
 :host(#{$prefix}-toast-notification[kind='info-square'][low-contrast]) {
-  @extend .#{$prefix}--toast-notification--low-contrast,
-    .#{$prefix}--toast-notification--info;
-
-  @include notification--experimental(
-    $support-info,
-    $notification-background-info
-  );
+  @include toast-notification-low-contrast-info;
 }
 
 :host(#{$prefix}-toast-notification[kind='warning']) {
-  @extend .#{$prefix}--toast-notification--warning;
+  @include toast-notification-warning-base;
 }
 
 :host(#{$prefix}-toast-notification[kind='warning-alt']) {
-  @extend .#{$prefix}--toast-notification--warning-alt;
+  @include toast-notification-warning-base;
 
-  /* TODO: Remove this once the following issue with icon fill is resolved: 
+  /* TODO: Remove this once the following issue with icon fill is resolved:
   ** https://github.com/carbon-design-system/carbon/issues/13616
   */
   .#{$prefix}--toast-notification__icon path[data-icon-path='inner-path'] {
@@ -85,25 +76,13 @@ $css--plex: true !default;
 
 :host(#{$prefix}-toast-notification[kind='warning'][low-contrast]),
 :host(#{$prefix}-toast-notification[kind='warning-alt'][low-contrast]) {
-  @extend .#{$prefix}--toast-notification--low-contrast,
-    .#{$prefix}--toast-notification--warning;
-
-  @include notification--experimental(
-    $support-warning,
-    $notification-background-warning
-  );
+  @include toast-notification-low-contrast-warning;
 }
 
 :host(#{$prefix}-toast-notification[kind='error']) {
-  @extend .#{$prefix}--toast-notification--error;
+  @include toast-notification-error-base;
 }
 
 :host(#{$prefix}-toast-notification[kind='error'][low-contrast]) {
-  @extend .#{$prefix}--toast-notification--low-contrast,
-    .#{$prefix}--toast-notification--error;
-
-  @include notification--experimental(
-    $support-error,
-    $notification-background-error
-  );
+  @include toast-notification-low-contrast-error;
 }

package/scss/components/popover/popover.scss

@@ -13,7 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/breakpoint' as *;
-@use '@carbon/styles/scss/components/popover';
+@use '@carbon/styles/scss/components/popover' as *;
 
 // The distance between the popover container and the triggering element
 // Specify the distance between the popover and the trigger. This value must
@@ -45,7 +45,7 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-tooltip),
 :host(#{$prefix}-popover) {
   ::slotted(.#{$prefix}--popover--tab-tip__button) {
-    @extend .#{$prefix}--popover--tab-tip__button;
+    @include popover-tab-tip-button;
   }
 }
 
@@ -53,7 +53,7 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-popover[highContrast]) {
   ::slotted(#{$prefix}-tooltip-content),
   ::slotted(#{$prefix}-popover-content) {
-    @extend .#{$prefix}--popover;
+    @include popover-highcontrast-base;
   }
 }
 
@@ -86,7 +86,7 @@ $popover-border-color: custom-property.get-var(
 
 :host(#{$prefix}-tooltip-content),
 :host(#{$prefix}-popover-content) {
-  @extend .#{$prefix}--popover;
+  @include popover-base;
 }
 
 :host(#{$prefix}-tooltip-content[open]),