@carbon/styles 1.114.0 → 1.115.0

package/scss/components/multiselect/_multiselect.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2016, 2025
+// Copyright IBM Corp. 2016, 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.
@@ -14,6 +14,8 @@
 @use '../../utilities/convert';
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/layout';
+@use '../../border-radius' as *;
+@use '../../feature-flags' as *;
 
 /// Multi select styles
 /// @access public
@@ -51,24 +53,37 @@
     min-inline-size: auto;
   }
 
-  // When select all is turned on, the first item in the listbox
-  // is always the "Select all" option and gets special border
-  // treatment
-  .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
-    .#{$prefix}--list-box__menu-item:first-child
-    .#{$prefix}--list-box__menu-item__option {
-    padding: calc((layout.size('height') - 1lh) / 2 - 1px) $spacing-05;
-    margin: 0;
-    border-block-end: 1px solid $border-subtle-01;
-  }
-
-  // When select all is turned on, the second item in the list
-  // has special treatment to look correct against the "Select all"
-  // border treatment
-  .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
-    .#{$prefix}--list-box__menu-item:nth-child(2)
-    .#{$prefix}--list-box__menu-item__option {
-    border-block-start: none;
+  @if enabled('enable-v12-release') {
+    // When select all is turned on, the "Select all" option is separated
+    // from the rest of the options by a divider element
+    .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
+      .#{$prefix}--list-box__menu-divider {
+      display: block;
+      background-color: $border-subtle;
+      block-size: convert.to-rem(1px);
+      margin-block: $spacing-02;
+      margin-inline: -$spacing-02;
+    }
+  } @else {
+    // When select all is turned on, the first item in the listbox
+    // is always the "Select all" option and gets special border
+    // treatment
+    .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
+      .#{$prefix}--list-box__menu-item:first-child
+      .#{$prefix}--list-box__menu-item__option {
+      padding: calc((layout.size('height') - 1lh) / 2 - 1px) $spacing-05;
+      margin: 0;
+      border-block-end: 1px solid $border-subtle-01;
+    }
+
+    // When select all is turned on, the second item in the list
+    // has special treatment to look correct against the "Select all"
+    // border treatment
+    .#{$prefix}--multi-select.#{$prefix}--multi-select--selectall
+      .#{$prefix}--list-box__menu-item:nth-child(2)
+      .#{$prefix}--list-box__menu-item__option {
+      border-block-start: none;
+    }
   }
 
   .#{$prefix}--multi-select
@@ -133,16 +148,35 @@
     outline: none;
   }
 
-  .#{$prefix}--multi-select--filterable--input-focused,
-  .#{$prefix}--multi-select
-    .#{$prefix}--list-box__field--wrapper--input-focused:has(
-      button[aria-expanded='false']
-    ),
-  .#{$prefix}--multi-select
-    .#{$prefix}--list-box__field--wrapper--input-focused:has(
-      button[aria-expanded='true']
-    ) {
-    @include focus-outline('outline');
+  @if not enabled('enable-v12-release') {
+    .#{$prefix}--multi-select--filterable--input-focused,
+    .#{$prefix}--multi-select
+      .#{$prefix}--list-box__field--wrapper--input-focused:has(
+        button[aria-expanded='false']
+      ),
+    .#{$prefix}--multi-select
+      .#{$prefix}--list-box__field--wrapper--input-focused:has(
+        button[aria-expanded='true']
+      ) {
+      @include focus-outline('outline');
+    }
+  } @else {
+    .#{$prefix}--multi-select--filterable--input-focused,
+    .#{$prefix}--multi-select:has(
+        .#{$prefix}--list-box__field--wrapper--input-focused
+      ):has(button[aria-expanded='false']),
+    .#{$prefix}--multi-select:has(
+        .#{$prefix}--list-box__field--wrapper--input-focused
+      ):has(button[aria-expanded='true']) {
+      @include focus-outline('outline');
+    }
+
+    .#{$prefix}--multi-select.#{$prefix}--list-box--expanded:has(
+        button[aria-activedescendant]:not([aria-activedescendant=''])
+      ) {
+      outline-offset: convert.to-rem(-1px);
+      outline-width: convert.to-rem(1px);
+    }
   }
 
   .#{$prefix}--multi-select.#{$prefix}--list-box--expanded
@@ -156,25 +190,26 @@
     outline-width: convert.to-rem(1px);
   }
 
-  .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
-    .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted::before,
-  .#{$prefix}--multi-select.#{$prefix}--multi-select--selected
-    .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted::before {
-    position: absolute;
-    border: 2px solid $focus;
-    block-size: 100%;
-    border-block-start: 1px solid $focus;
-    content: '';
-    inline-size: 100%;
-  }
-
-  .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
-    .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted,
-  .#{$prefix}--multi-select.#{$prefix}--multi-select--selected
-    .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted {
-    @include focus-outline('reset');
+  @if not enabled('enable-v12-release') {
+    .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
+      .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted::before,
+    .#{$prefix}--multi-select.#{$prefix}--multi-select--selected
+      .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted::before {
+      position: absolute;
+      border: 2px solid $focus;
+      block-size: 100%;
+      border-block-start: 1px solid $focus;
+      content: '';
+      inline-size: 100%;
+    }
+
+    .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
+      .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted,
+    .#{$prefix}--multi-select.#{$prefix}--multi-select--selected
+      .#{$prefix}--list-box__menu-item:first-child.#{$prefix}--list-box__menu-item--highlighted {
+      @include focus-outline('reset');
+    }
   }
-
   .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
     .#{$prefix}--text-input,
   .#{$prefix}--multi-select.#{$prefix}--multi-select--selected

package/scss/components/notifications-panel/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+@forward 'notifications-panel';
+@use 'notifications-panel';
+
+@include notifications-panel.notifications-panel;

package/scss/components/notifications-panel/_notifications-panel.scss

@@ -0,0 +1,459 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+
+@use '../../config' as *;
+@use '../../theme' as *;
+@use '../../spacing' as *;
+@use '../../motion' as *;
+@use '../../type';
+@use '@carbon/type/scss/font-family' as *;
+@use '../../utilities';
+@use '../../config' as carbon-config;
+
+/// NotificationsPanel styles
+/// @access public
+/// @group notifications-panel
+@mixin notifications-panel {
+  $block-class: #{$prefix}--notifications-panel;
+  $block-size: 38.5rem;
+
+  @keyframes notifications-panel-fade-in {
+    0% {
+      opacity: 0;
+      transform: translateY(-$block-size);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes notifications-panel-fade-out {
+    0% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translateY(-$block-size);
+    }
+  }
+
+  @keyframes notifications-panel-entrance-reduced {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes notifications-panel-exit-reduced {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .#{$block-class}__entrance {
+    animation: notifications-panel-fade-in $duration-moderate-02
+      motion(standard);
+  }
+
+  .#{$block-class}__exit {
+    animation: notifications-panel-fade-out $duration-moderate-02
+      motion(standard) forwards;
+  }
+
+  @media (prefers-reduced-motion) {
+    .#{$block-class}__entrance {
+      animation: notifications-panel-entrance-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+    }
+
+    .#{$block-class}__exit {
+      animation: notifications-panel-exit-reduced $duration-moderate-01
+        motion(exit, productive) forwards;
+    }
+  }
+
+  .#{$block-class}__container {
+    position: fixed;
+    z-index: 2;
+    overflow: auto;
+    background-color: $layer-01;
+    border-block-end: 1px solid $border-subtle-02;
+    border-inline-start: 1px solid $border-subtle-02;
+    box-shadow: 0 $spacing-01 $spacing-02 $overlay;
+    clip-path: inset(
+      0 calc(-1 * var(--#{$prefix}-spacing-01))
+        calc(-1 * var(--#{$prefix}-spacing-02))
+        calc(-1 * var(--#{$prefix}-spacing-01))
+    );
+    color: $text-primary;
+    inset-block-start: $spacing-09;
+    inset-inline-end: 0;
+    max-block-size: $block-size;
+    max-inline-size: 22.75rem;
+    min-block-size: $block-size;
+    min-inline-size: 20rem;
+    transition: transform $duration-fast-02 motion(standard);
+  }
+
+  .#{$block-class}__header-container {
+    position: sticky;
+    z-index: 2;
+    padding: $spacing-03 $spacing-05;
+    background-color: $layer-01;
+    border-block-end: 1px solid $border-subtle-01;
+    inset-block-start: 0;
+  }
+
+  .#{$block-class}__header-flex {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .#{$block-class}__do-not-disturb-toggle {
+    padding-block-end: $spacing-03;
+
+    .#{$prefix}--toggle__label-text {
+      @include utilities.visually-hidden;
+    }
+  }
+
+  .#{$block-class}__dismiss-button {
+    color: $text-primary;
+  }
+
+  .#{$block-class}__header {
+    @include type.type-style('heading-compact-01');
+
+    margin: 0;
+  }
+
+  .#{$block-class}__time-section-label {
+    @include type.type-style('label-01');
+    @include font-weight('semibold');
+
+    position: sticky;
+    z-index: 2;
+    padding: $spacing-03 $spacing-05;
+    background-color: $layer-01;
+    color: $text-secondary;
+    inset-block-start: 3.0625rem;
+  }
+
+  .#{$block-class}__notification:hover,
+  .#{$block-class}__notification:focus {
+    background-color: $layer-accent-01;
+
+    .#{$block-class}__dismiss-single-button {
+      opacity: 1;
+    }
+  }
+
+  .#{$block-class}__notification:focus {
+    border-color: $focus;
+    box-shadow:
+      inset 0 0 0 2px $focus,
+      inset 0 0 0 2px $background;
+    outline: 0;
+  }
+
+  .#{$block-class}__notification {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    padding: $spacing-05;
+    border: 0;
+    background-color: $layer-01;
+    cursor: pointer;
+    inline-size: 100%;
+    min-block-size: 6.25rem;
+    text-align: start;
+    transition: background-color $duration-moderate-02 motion(standard);
+  }
+
+  .#{$block-class}__notification-title {
+    @include type.type-style('heading-01');
+
+    color: $text-secondary;
+    margin-block-end: $spacing-02;
+    @include font-weight('regular');
+  }
+
+  .#{$block-class}__notification-title.#{$block-class}__notification-title-unread {
+    color: $text-secondary;
+    margin-block-end: $spacing-02;
+    @include font-weight('semibold');
+  }
+
+  .#{$block-class}__notifications-link {
+    @include type.type-style('label-01');
+  }
+
+  .#{$block-class}__notification-status-icon {
+    margin-inline-end: $spacing-03;
+    min-inline-size: 1rem;
+
+    &.#{$block-class}__notification-status-icon-error {
+      fill: $support-error;
+    }
+
+    &.#{$block-class}__notification-status-icon-success {
+      fill: $support-success;
+    }
+
+    &.#{$block-class}__notification-status-icon-warning {
+      fill: $support-warning;
+    }
+
+    &.#{$block-class}__notification-status-icon-informational {
+      fill: $support-info;
+    }
+  }
+
+  .#{$block-class}__notification-content {
+    .#{$block-class}__notification-time-label {
+      margin-block-end: $spacing-03;
+    }
+
+    .#{$block-class}__notification-time-label,
+    .#{$block-class}__notification-description {
+      @include type.type-style('label-01');
+
+      color: $text-secondary;
+    }
+
+    .#{$block-class}__notification-description {
+      &.#{$block-class}__notification-short-description {
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+      }
+
+      &.#{$block-class}__notification-long-description {
+        display: block;
+        overflow: initial;
+        -webkit-line-clamp: initial;
+        line-clamp: initial;
+      }
+    }
+
+    .#{$block-class}__notification-read-more-button,
+    .#{$block-class}__notification-read-less-button {
+      @include type.type-style('label-01');
+
+      display: flex;
+      align-items: center;
+      padding: 0;
+      min-inline-size: 5.5rem;
+
+      .#{$prefix}--btn__icon {
+        transition: transform $duration-moderate-02 ease;
+
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
+      }
+
+      &.#{$block-class}__notification-read-more-button {
+        .#{$prefix}--btn__icon {
+          transform: rotate(0deg);
+        }
+      }
+
+      &.#{$block-class}__notification-read-less-button {
+        .#{$prefix}--btn__icon {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  .#{$block-class}__dismiss-single-button {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    color: $text-primary;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    min-inline-size: 2rem;
+    opacity: 0;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }
+
+  .#{$block-class}__notification:focus::before {
+    display: none;
+  }
+
+  .#{$block-class}__notification-today:not(:first-of-type)::before,
+  .#{$block-class}__notification-yesterday:not(:first-of-type)::before,
+  .#{$block-class}__notification-previous:not(:first-of-type)::before {
+    position: absolute;
+    margin: 0 auto;
+    background-color: $border-subtle-01;
+    block-size: 1px;
+    content: '';
+    inline-size: calc(100% - (2 * #{$spacing-05}));
+    inset-block-start: 0;
+    transition: background-color $duration-moderate-02 motion(standard);
+  }
+
+  .#{$block-class}__notification-today:hover
+    + .#{$block-class}__notification-today:not(:first-of-type)::before,
+  .#{$block-class}__notification-yesterday:hover
+    + .#{$block-class}__notification-yesterday:not(:first-of-type)::before,
+  .#{$block-class}__notification-previous:hover
+    + .#{$block-class}__notification-previous:not(:first-of-type)::before {
+    background-color: transparent;
+  }
+
+  .#{$block-class}__main-section-empty.#{$block-class}__main-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    block-size: 100%;
+    margin-block-start: $spacing-13;
+    min-block-size: initial;
+  }
+
+  .#{$block-class}__main-section {
+    min-block-size: 498px;
+  }
+
+  .#{$block-class}__bottom-actions {
+    position: sticky;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    background-color: $layer-01;
+    block-size: 2.5rem;
+    border-block-start: 1px solid $border-subtle-01;
+    inset-block-end: 0;
+    min-block-size: 2.5rem;
+  }
+
+  .#{$block-class}__view-all-button {
+    display: flex;
+    align-items: center;
+    block-size: 2.5rem;
+    border-inline-end: 1px solid $border-subtle-01;
+    color: $text-primary;
+    inline-size: 100%;
+    max-inline-size: calc(100% - 2.5rem);
+    min-block-size: 2.5rem;
+  }
+
+  .#{$block-class}__settings-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    block-size: 2.5rem;
+    color: $text-primary;
+    min-block-size: 2.5rem;
+    min-inline-size: 2.5rem;
+
+    .#{$prefix}--btn__icon {
+      margin: 0;
+    }
+  }
+
+  .#{$block-class}__header-container:has(
+      .#{$block-class}__do-not-disturb-toggle
+    ) {
+    + .#{$block-class}__main-section .#{$block-class}__time-section-label {
+      inset-block-start: 4.8125rem;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Inline empty-state styles — scoped to NotificationsPanel.
+  // NOTE: These styles exist solely to support the inline NotificationsEmptyState
+  // companion component. Remove when Carbon core provides its own empty-state
+  // pattern and NotificationsEmptyState.tsx is deleted.
+  // ---------------------------------------------------------------------------
+
+  .#{$prefix}--empty-state {
+    display: flex;
+    color: $text-primary;
+  }
+
+  .#{$prefix}--empty-state-position--top {
+    flex-direction: column;
+  }
+
+  .#{$prefix}--empty-state-position--right {
+    flex-direction: row-reverse;
+  }
+
+  .#{$prefix}--empty-state-position--bottom {
+    flex-direction: column-reverse;
+  }
+
+  .#{$prefix}--empty-state-position--left {
+    flex-direction: row;
+  }
+
+  .#{$prefix}--empty-state__illustration {
+    block-size: auto;
+    margin-block-end: $spacing-05;
+
+    &.#{$prefix}--empty-state__illustration--lg {
+      max-inline-size: $spacing-11;
+      min-inline-size: $spacing-11;
+    }
+
+    &.#{$prefix}--empty-state__illustration--sm {
+      max-inline-size: $spacing-10;
+      min-inline-size: $spacing-10;
+    }
+  }
+
+  .#{$prefix}--empty-state__content {
+    .#{$prefix}--empty-state__header {
+      @include type.type-style('heading-03');
+
+      margin: 0;
+      padding-block-end: $spacing-03;
+    }
+
+    .#{$prefix}--empty-state__header--small {
+      @include type.type-style('body-compact-02');
+
+      padding-block-end: $spacing-03;
+    }
+
+    .#{$prefix}--empty-state__subtitle {
+      @include type.type-style('body-01');
+
+      color: $text-secondary;
+      padding-block-end: $spacing-05;
+    }
+
+    .#{$prefix}--empty-state__subtitle--small {
+      @include type.type-style('label-01');
+    }
+  }
+}