@carbon/web-components 2.43.0 → 2.44.0

package/scss/components/dropdown/dropdown.scss

@@ -17,6 +17,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/checkbox';
 @use '@carbon/styles/scss/components/tag';
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
+@use '@carbon/styles/scss/utilities/convert' as convert;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include list-box;
@@ -24,6 +25,14 @@ $css--plex: true !default;
 :host(#{$prefix}-dropdown) {
   outline: none;
 
+  .#{$prefix}--list-box {
+    box-sizing: border-box;
+  }
+
+  .#{$prefix}--list-box--expanded {
+    border-block-end-color: $border-subtle;
+  }
+
   .#{$prefix}--assistive-text {
     inset-block-start: -100%;
     // Hides screen reader cursor
@@ -37,28 +46,17 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu {
     inset-block-start: 100%;
     margin-block-start: 1px;
-    outline: 1px solid $focus;
-  }
-}
-
-:host(#{$prefix}-dropdown[open]) {
-  .#{$prefix}--list-box__field {
     outline: none;
   }
 }
+
 :host(#{$prefix}-dropdown[ai-label]) .#{$prefix}--list-box__wrapper--decorator {
   @include ai-gradient;
 }
 
-:host(#{$prefix}-dropdown[invalid]) {
-  .#{$prefix}--list-box__field {
-    outline: none;
-  }
-}
-
 :host(#{$prefix}-dropdown[invalid]:not([disabled]):not([read-only])) {
   .#{$prefix}--form__helper-text {
-    color: $text-error;
+    color: $text-error !important; /* stylelint-disable-line declaration-no-important */
   }
 }
 
@@ -71,6 +69,21 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-dropdown[ai-label][read-only]),
+:host(#{$prefix}-dropdown[ai-label][disabled]) {
+  .#{$prefix}--list-box {
+    border-block-end-color: $ai-border-strong;
+  }
+
+  .#{$prefix}--list-box__field {
+    border-block-end: 1px solid $ai-border-strong;
+  }
+
+  ::slotted(#{$prefix}-ai-label)::before {
+    display: none;
+  }
+}
+
 :host(#{$prefix}-combo-box[direction='top']),
 :host(#{$prefix}-dropdown[direction='top']) {
   @extend .#{$prefix}--list-box--up;
@@ -84,10 +97,67 @@ $css--plex: true !default;
   @extend .#{$prefix}--list-box__wrapper--inline;
 
   grid-gap: 0 $spacing-06;
+
+  .#{$prefix}--list-box__menu {
+    margin-block-start: 0;
+  }
 }
 
-:host(#{$prefix}-dropdown[type='inline'][warn]) .#{$prefix}--list-box__field {
-  padding-inline: $spacing-05 calc(#{$spacing-08} + #{$spacing-05});
+:host(#{$prefix}-dropdown[type='inline']) {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-block: 0;
+    padding-inline-end: $spacing-09;
+    padding-inline-start: $spacing-05;
+  }
+}
+
+:host(
+    #{$prefix}-dropdown[type='inline'][warn]:not([disabled]):not([read-only])
+  ),
+:host(
+    #{$prefix}-dropdown[type='inline'][invalid]:not([disabled]):not([read-only])
+  ) {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline'])
+  .#{$prefix}--list-box__expanded {
+  border-block-end: 1px solid $ai-border-strong;
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline']:not([invalid]):not([warn]))
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+  .#{$prefix}--list-box__field {
+  padding-inline-end: $spacing-10;
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline']:not([invalid])),
+:host(#{$prefix}-dropdown[ai-label][type='inline'][read-only]),
+:host(#{$prefix}-dropdown[ai-label][type='inline'][disabled])
+  .#{$prefix}--list-box__field {
+  border-block-end: 1px solid $ai-border-strong;
+}
+
+:host(#{$prefix}-dropdown[ai-label][type='inline'][warn]),
+:host(#{$prefix}-dropdown[ai-label][type='inline'][invalid]) {
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-12;
+  }
+}
+
+:host(#{$prefix}-dropdown[type='inline']) .#{$prefix}--list-box__menu-icon {
+  inset-inline-end: $spacing-04;
+}
+
+:host(#{$prefix}-dropdown[warn]:not([disabled]):not([read-only])) {
+  .#{$prefix}--form__helper-text {
+    color: $text-primary;
+  }
 }
 
 :host(#{$prefix}-dropdown[warn]),
@@ -95,6 +165,15 @@ $css--plex: true !default;
   .#{$prefix}--form__helper-text {
     grid-column: 2;
   }
+
+  .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__invalid-icon--warning {
+    inset-inline-end: $spacing-08;
+  }
 }
 
 :host(#{$prefix}-dropdown-item) {
@@ -107,13 +186,13 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-dropdown-item:first-child) {
+:host(#{$prefix}-dropdown-item:first-of-type) {
   .#{$prefix}--list-box__menu-item__option {
-    border-block-start-width: 0;
+    border-block-start-color: transparent;
   }
 }
 
-:host(#{$prefix}-dropdown-item:hover) {
+:host(#{$prefix}-dropdown-item:not([disabled]):hover) {
   background-color: $layer-hover;
 }
 
@@ -121,6 +200,11 @@ $css--plex: true !default;
   @extend .#{$prefix}--list-box__menu-item--highlighted;
 }
 
+:host(#{$prefix}-dropdown-item[highlighted-next-sibling])
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
 :host(#{$prefix}-dropdown-item[disabled])
   .#{$prefix}--list-box__menu-item__option {
   color: $text-disabled;
@@ -128,11 +212,28 @@ $css--plex: true !default;
   text-decoration: none;
 }
 
+:host(#{$prefix}-dropdown[disabled][warn]),
+:host(#{$prefix}-dropdown[disabled][invalid]) {
+  .#{$prefix}--list-box__field {
+    padding-inline-end: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-dropdown-item[disabled][highlighted-next-sibling]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle;
+}
+
+:host(#{$prefix}-dropdown-item[disabled]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle-01;
+}
+
 :host(#{$prefix}-dropdown-item[selected]) {
   @extend .#{$prefix}--list-box__menu-item--active;
-  @extend .#{$prefix}--list-box__menu-item--highlighted;
 
   .#{$prefix}--list-box__menu-item__option {
+    border-block-start-color: transparent;
     color: $text-primary;
   }
 
@@ -141,6 +242,20 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-dropdown-item[selected-next-sibling])
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: transparent;
+}
+
+:host(#{$prefix}-dropdown-item[disabled][selected-next-sibling]:hover)
+  .#{$prefix}--list-box__menu-item__option {
+  border-block-start-color: $border-subtle;
+}
+
+:host(#{$prefix}-dropdown-item[selected][highlighted]) {
+  @extend .#{$prefix}--list-box__menu-item--highlighted;
+}
+
 :host(#{$prefix}-dropdown-item[size='sm']) {
   block-size: $spacing-07;
 
@@ -158,10 +273,14 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-dropdown-skeleton) {
+  @extend .#{$prefix}--form-item;
+
   .#{$prefix}--skeleton {
     @include skeleton;
   }
 }
+// AILabel styles
+$divider-width: 1px;
 
 :host(#{$prefix}-dropdown[ai-label]) {
   @extend .#{$prefix}--list-box__wrapper--slug;
@@ -173,22 +292,55 @@ $css--plex: true !default;
     inset-inline-end: $spacing-08;
   }
 
+  ::slotted(#{$prefix}-ai-label) {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-end: convert.to-rem(9px);
+  }
+
+  ::slotted(#{$prefix}-ai-label)::after {
+    position: absolute;
+    display: block;
+    background-color: $border-subtle-01;
+    block-size: $spacing-05;
+    content: '';
+    inline-size: convert.to-rem(1px);
+    inset-block-start: convert.to-rem(1px);
+    inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});
+  }
+
   ::slotted(#{$prefix}-ai-label:not([revert-active])),
   ::slotted(#{$prefix}-slug:not([revert-active])) {
     transform: translateY(-50%);
   }
+
+  .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__invalid-icon--warning {
+    inset-inline-end: convert.to-rem(81px);
+  }
 }
 
-:host(#{$prefix}-dropdown[ai-label][warn]),
-:host(#{$prefix}-dropdown[ai-label][invalid]) {
+:host(#{$prefix}-dropdown[ai-label][warn]:not([disabled]):not([read-only])),
+:host(#{$prefix}-dropdown[ai-label][invalid]:not([disabled]):not([read-only])) {
   .#{$prefix}--list-box {
     .#{$prefix}--list-box__field {
       padding-inline-end: $spacing-12;
     }
   }
 
+  ::slotted(#{$prefix}-ai-label)::before {
+    position: absolute;
+    display: block;
+    background-color: $border-subtle-01;
+    block-size: $spacing-05;
+    content: '';
+    inline-size: convert.to-rem(1px);
+    inset-block-start: convert.to-rem(1px);
+    inset-inline-start: calc(-#{$spacing-03} - #{$divider-width});
+  }
+
   ::slotted(#{$prefix}-ai-label),
   ::slotted(#{$prefix}-slug) {
-    inset-inline-end: $spacing-10;
+    inset-inline-end: $spacing-08;
   }
 }

package/scss/components/menu/menu-variables.scss

@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-$css--plex: true !default;
-
 @use '@carbon/styles/scss/config' as *;
 
 .#{$prefix}--menu--with-icons {

package/scss/components/menu/menu.scss

@@ -13,7 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/motion' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/menu' as *;
-@import './menu-variables';
+@use './menu-variables' as *;
 
 :host(#{$prefix}-menu) {
   position: fixed;

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

@@ -207,6 +207,13 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-multi-select[ai-label][warn]),
+:host(#{$prefix}-multi-select[ai-label][invalid]) {
+  .#{$prefix}--list-box__invalid-icon {
+    inset-inline-end: convert.to-rem(81px);
+  }
+}
+
 :host(#{$prefix}-multi-select[ai-label]) ::slotted(#{$prefix}-ai-label)::after {
   position: absolute;
   display: block;

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

@@ -5,8 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-$css--plex: true !default;
-
 @use '@carbon/styles/scss/config' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;

package/scss/components/popover/popover.scss

@@ -283,13 +283,21 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-slug[alignment='bottom-start']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 0;
-    inset-inline-start: 0;
+    inset-inline-start: calc(50% - $popover-offset);
     transform: translate(
       calc(-1 * $popover-offset),
       calc(100% + $popover-offset)
     );
   }
 }
+:host(#{$prefix}-popover-content[tabTip][align='bottom-left']:not([autoalign])),
+:host(
+    #{$prefix}-popover-content[tabTip][align='bottom-start']:not([autoalign])
+  ) {
+  .#{$prefix}--popover-content {
+    inset-inline-start: 0;
+  }
+}
 
 // rtl
 :host(
@@ -311,11 +319,26 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom-start']:not([autoalign])),
 :host(#{$prefix}-slug:dir(rtl)[alignment='bottom-start']:not([autoalign])) {
   .#{$prefix}--popover-content {
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     inset-inline-start: initial;
   }
 }
 
+:host(
+    #{$prefix}-popover-content:dir(rtl)[tabTip][align='bottom-left']:not(
+        [autoalign]
+      )
+  ),
+:host(
+    #{$prefix}-popover-content:dir(rtl)[tabTip][align='bottom-start']:not(
+        [autoalign]
+      )
+  ) {
+  .#{$prefix}--popover-content {
+    inset-inline-end: 0;
+  }
+}
+
 :host(#{$prefix}-tooltip-content[align='bottom-right']:not([autoalign])),
 :host(#{$prefix}-popover-content[align='bottom-right']:not([autoalign])),
 :host(#{$prefix}-toggletip[alignment='bottom-right']:not([autoalign])),
@@ -328,10 +351,18 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-slug[alignment='bottom-end']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 0;
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     transform: translate($popover-offset, calc(100% + $popover-offset));
   }
 }
+:host(
+    #{$prefix}-popover-content[tabTip][align='bottom-right']:not([autoalign])
+  ),
+:host(#{$prefix}-popover-content[tabTip][align='bottom-end']:not([autoalign])) {
+  .#{$prefix}--popover-content {
+    inset-inline-end: 0;
+  }
+}
 
 // rtl
 :host(
@@ -348,6 +379,21 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-toggletip:dir(rtl)[alignment='bottom-end']:not([autoalign])),
 :host(#{$prefix}-ai-label:dir(rtl)[alignment='bottom-end']:not([autoalign])),
 :host(#{$prefix}-slug:dir(rtl)[alignment='bottom-end']:not([autoalign])) {
+  .#{$prefix}--popover-content {
+    inset-inline-start: calc(50% - $popover-offset);
+  }
+}
+
+:host(
+    #{$prefix}-popover-content:dir(rtl)[tabTip][align='bottom-right']:not(
+        [autoalign]
+      )
+  ),
+:host(
+    #{$prefix}-popover-content:dir(rtl)[tabTip][align='bottom-end']:not(
+        [autoalign]
+      )
+  ) {
   .#{$prefix}--popover-content {
     inset-inline-start: 0;
   }
@@ -697,7 +743,7 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-slug[alignment='top-start']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 0;
-    inset-inline-start: 0;
+    inset-inline-start: calc(50% - $popover-offset);
     transform: translate(
       calc(-1 * $popover-offset),
       calc(-100% - $popover-offset)
@@ -717,7 +763,7 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-ai-label:dir(rtl)[alignment='top-start']:not([autoalign])),
 :host(#{$prefix}-slug[alignment='top-start']:not([autoalign])) {
   .#{$prefix}--popover-content {
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     inset-inline-start: initial;
   }
 }
@@ -734,7 +780,7 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-slug[alignment='top-end']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 0;
-    inset-inline-end: 0;
+    inset-inline-end: calc(50% - $popover-offset);
     transform: translate($popover-offset, calc(-100% - $popover-offset));
   }
 }
@@ -751,7 +797,7 @@ $popover-border-color: custom-property.get-var(
 :host(#{$prefix}-ai-label:dir(rtl)[alignment='top-end']:not([autoalign])),
 :host(#{$prefix}-slug[alignment='top-end']:not([autoalign])) {
   .#{$prefix}--popover-content {
-    inset-inline-start: 0;
+    inset-inline-start: calc(50% - $popover-offset);
   }
 }
 
@@ -780,7 +826,8 @@ $popover-border-color: custom-property.get-var(
 //-----------------------------------------------------------------------------
 
 // autoalign caret
-:host(#{$prefix}-popover-content[open][caret][autoalign]) {
+:host(#{$prefix}-popover-content[open][caret][autoalign]),
+:host(#{$prefix}-tooltip-content[open][caret][autoalign]) {
   .#{$prefix}--popover-caret {
     &::before {
       block-size: 8px;
@@ -809,8 +856,8 @@ $popover-border-color: custom-property.get-var(
 
   .#{$prefix}--popover-content[align^='bottom'] > .#{$prefix}--popover-caret {
     &::after {
-      inset-block-end: -1px;
-      inset-inline-start: 0.5px;
+      inset-block-start: 1px;
+      inset-inline-start: 1px;
     }
   }
 
@@ -823,7 +870,7 @@ $popover-border-color: custom-property.get-var(
   .#{$prefix}--popover-content[align^='right'] > .#{$prefix}--popover-caret {
     &::after {
       inset-block-start: -1px;
-      inset-inline-end: 0.5px;
+      inset-inline-start: 1px;
     }
   }
 }

package/scss/components/tooltip/tooltip-story.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 2025
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -10,6 +10,7 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme';
 @use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/utilities/focus-outline';
 
 // This is a utility class to make sure that tooltip stories have a minimum
 // height when used in MDX docs
@@ -27,9 +28,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid theme.$border-subtle;
-  block-size: $spacing-07;
-  inline-size: $spacing-07;
+  block-size: $spacing-05;
+  inline-size: $spacing-05;
+}
+
+.sb-tooltip-trigger:focus {
+  @include focus-outline.focus-outline;
 }
 
 .sb-tooltip-trigger svg {

package/telemetry.yml

@@ -260,7 +260,6 @@ collect:
         - oncds-combo-box-selected
         - oncds-combo-box-toggled
         - should-filter-item
-        - typeahead
         # cds-copy-button
         - autoAlign
         # cds-date-picker