@carbon/web-components 2.51.1 → 2.52.0

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/scss/components/layout/layout.scss

@@ -0,0 +1,21 @@
+//
+// 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/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/layout' as *;
+
+:host(#{$prefix}-layout) {
+  @include emit-layout-tokens();
+
+  display: contents;
+}
+
+@include emit-layout-tokens-to-shadow-host('#{$prefix}-layout');

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
@@ -349,6 +351,12 @@ collect:
         - level
         - oncds-use-layer
         - with-background
+        # cds-layout
+        - density
+        # cds-layout-constraint
+        - size-default
+        - size-max
+        - size-min
         # cds-loading
         - inactive
         - overlay
@@ -785,6 +793,30 @@ collect:
         - primary
         - secondary
         - tertiary
+        # cds-layout - density
+        - condensed
+        - normal
+        # cds-layout-constraint - size-default
+        - 2xl
+        - lg
+        - md
+        - sm
+        - xl
+        - xs
+        # cds-layout-constraint - size-max
+        - 2xl
+        - lg
+        - md
+        - sm
+        - xl
+        - xs
+        # cds-layout-constraint - size-min
+        - 2xl
+        - lg
+        - md
+        - sm
+        - xl
+        - xs
         # cds-menu-button - menu-background-token
         - background
         - layer