@carbon/web-components 2.51.1 → 2.52.0-rc.0

package/scss/components/contained-list/contained-list.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2025
+// Copyright IBM Corp. 2025, 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.
@@ -20,11 +20,14 @@ $css--plex: true !default;
   // CSS custom properties for slotted search component
   --cds-search-background: #{$background};
   --cds-search-border-bottom: 1px solid #{$border-subtle};
+
+  display: block;
 }
 
 :host(#{$prefix}-contained-list-item) {
   display: block;
 }
+
 :host(#{$prefix}-contained-list-description) {
   @include type-style('label-01');
 
@@ -36,6 +39,10 @@ $css--plex: true !default;
   vertical-align: baseline;
 }
 
+:host(#{$prefix}-contained-list-item:not(:first-of-type)) {
+  margin-block-start: -1px;
+}
+
 :host(#{$prefix}-contained-list-item:not(:last-of-type)) {
   .#{$prefix}--contained-list-item::before {
     position: absolute;
@@ -46,3 +53,8 @@ $css--plex: true !default;
     inset-inline: 0;
   }
 }
+
+:host(#{$prefix}-contained-list-item) ::slotted([slot='icon']) {
+  display: inline-flex;
+  margin-block-start: $spacing-01;
+}

package/scss/components/fluid-dropdown/fluid-dropdown.scss

@@ -0,0 +1,234 @@
+/**
+ * Copyright IBM Corp.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.
+ */
+
+$css--plex: true !default;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/fluid-dropdown/index';
+@use '@carbon/styles/scss/components/dropdown' as *;
+@use '@carbon/styles/scss/components/list-box' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/skeleton' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/utilities/convert' as *;
+
+:host(#{$prefix}-fluid-dropdown) {
+  @extend .#{$prefix}--list-box__wrapper;
+  @extend .#{$prefix}--list-box__wrapper--fluid;
+
+  @include emit-layout-tokens();
+
+  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
+    inset-inline-start: -100%;
+  }
+
+  .#{$prefix}--label[hidden] {
+    display: none;
+  }
+
+  .#{$prefix}--list-box__menu {
+    inset-block-start: 100%;
+    margin-block-start: 1px;
+    outline: none;
+  }
+
+  .#{$prefix}--list-box--disabled {
+    border-block-end-color: transparent;
+    pointer-events: none;
+  }
+
+  // Parity styles for non-condensed menu items
+  .#{$prefix}--list-box__menu-item__selected-icon {
+    inset-block-start: to-rem(20px);
+  }
+
+  .#{$prefix}--list-box__divider {
+    display: block;
+    border: none;
+    margin: 0 1rem;
+    border-block-end: 1px solid $border-subtle;
+  }
+}
+
+// Target dropdown items inside fluid dropdown for non-condensed height
+:host(#{$prefix}-fluid-dropdown:not([is-condensed])) {
+  ::slotted(#{$prefix}-dropdown-item) {
+    block-size: $spacing-10;
+  }
+}
+
+:host(#{$prefix}-fluid-dropdown[invalid]) {
+  @extend .#{$prefix}--list-box__wrapper--fluid--invalid;
+  @include focus-outline('invalid');
+
+  outline-offset: 0;
+}
+
+// Direction top
+:host(#{$prefix}-fluid-dropdown[direction='top']) {
+  @extend .#{$prefix}--list-box--up;
+
+  .#{$prefix}--list-box__menu {
+    inset-block-start: auto;
+  }
+}
+
+// AI Label styles
+:host(#{$prefix}-fluid-dropdown[ai-label]) {
+  @extend .#{$prefix}--list-box__wrapper--slug;
+
+  ::slotted(#{$prefix}-ai-label),
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 70%;
+    inset-inline-end: $spacing-09;
+  }
+
+  ::slotted(#{$prefix}-ai-label:not([revert-active])),
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-70%);
+  }
+
+  .#{$prefix}--list-box__wrapper--decorator {
+    @include ai-gradient;
+  }
+}
+
+// AI label dividers - always present
+:host(#{$prefix}-fluid-dropdown[ai-label]) ::slotted(#{$prefix}-ai-label) {
+  &::after {
+    position: absolute;
+    background-color: $border-subtle-01;
+    block-size: to-rem(16px);
+    content: '';
+    inline-size: to-rem(1px);
+    inset-inline-start: calc(#{$spacing-06} - to-rem(1px));
+  }
+}
+
+:host(#{$prefix}-fluid-dropdown[ai-label][read-only]),
+:host(#{$prefix}-fluid-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;
+  }
+}
+
+// Condensed styles
+:host(#{$prefix}-fluid-dropdown[is-condensed]) {
+  @extend .#{$prefix}--list-box__wrapper--fluid--condensed;
+
+  .#{$prefix}--list-box__menu-item__selected-icon {
+    inset-block-start: auto;
+  }
+
+  // Reset menu item height for condensed mode
+  ::slotted(#{$prefix}-dropdown-item) {
+    block-size: auto;
+  }
+}
+
+// Disabled state
+:host(#{$prefix}-fluid-dropdown[disabled]) {
+  cursor: not-allowed;
+
+  svg {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__selection {
+    pointer-events: none;
+  }
+
+  .#{$prefix}--list-box__field:focus,
+  .#{$prefix}--list-box__selection:focus {
+    outline: none;
+  }
+
+  .#{$prefix}--label {
+    color: $text-disabled;
+    cursor: not-allowed;
+  }
+}
+
+:host(#{$prefix}-fluid-dropdown[read-only]) {
+  @extend .#{$prefix}--dropdown--readonly;
+
+  .#{$prefix}--dropdown {
+    border-block-end-color: $border-subtle;
+  }
+  .#{$prefix}--label {
+    color: inherit;
+  }
+  .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__selection {
+    pointer-events: none;
+  }
+}
+
+:host(#{$prefix}-fluid-dropdown[invalid]:not([disabled]):not([read-only])),
+:host(#{$prefix}-fluid-dropdown[warn]:not([disabled]):not([read-only])) {
+  .#{$prefix}--form__helper-text {
+    padding: to-rem(8px) 4rem to-rem(8px) $spacing-05;
+    inline-size: auto;
+    margin-block-start: 0;
+  }
+
+  .#{$prefix}--list-box {
+    border-block-end: 1px solid transparent;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__invalid-icon--warning {
+    inset-block-start: to-rem(81px);
+    inset-inline-end: $spacing-05;
+    pointer-events: none;
+  }
+}
+
+:host(#{$prefix}-fluid-dropdown[warn]:not([disabled]):not([read-only])) {
+  .#{$prefix}--form__helper-text {
+    color: $text-primary;
+  }
+}
+
+:host(#{$prefix}-fluid-dropdown[invalid]:not([disabled]):not([read-only])) {
+  .#{$prefix}--form__helper-text {
+    color: $text-error;
+  }
+}
+
+// Skeleton
+:host(#{$prefix}-fluid-dropdown-skeleton) {
+  @extend .#{$prefix}--list-box__wrapper--fluid;
+
+  display: block;
+}

package/telemetry.yml

@@ -322,6 +322,8 @@ collect:
         - error-subject
         - oncds-file-uploader-item-beingdeleted
         - oncds-file-uploader-item-deleted
+        # cds-fluid-dropdown
+        - is-condensed
         # cds-fluid-time-picker-skeleton
         - is-only-two
         # cds-form-group