@rossigee/clarity-ui 18.2.1-fixed

package/emphasis/label/_properties.label.scss

@@ -0,0 +1,105 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+
+@include mixins.exports('label.properties') {
+  @include mixins.root-or-host() {
+    --clr-label-border-width: #{tokens.$cds-alias-object-border-width-100};
+
+    &,
+    & [cds-theme] {
+      // COLOR
+      --clr-label-font-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-label-default-border-color: #{tokens.$cds-alias-utility-gray};
+      --clr-label-default-bg-color: #{tokens.$cds-alias-object-opacity-0};
+      --clr-label-font-solid-color: #{tokens.$cds-alias-typography-color-100};
+      --clr-label-default-solid-border-color: #{tokens.$cds-alias-utility-gray-shade};
+      --clr-label-default-solid-bg-color: #{tokens.$cds-alias-utility-gray};
+      --clr-label-bg-hover-color: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-label-hover-color: #{tokens.$cds-alias-object-interaction-color-hover};
+      --clr-label-bg-active-color: #{tokens.$cds-alias-object-interaction-background-active};
+      --clr-label-active-color: #{tokens.$cds-alias-object-interaction-color-active};
+      --clr-label-bg-disabled-color: #{tokens.$cds-alias-object-interaction-background-disabled};
+      --clr-label-disabled-color: #{tokens.$cds-alias-typography-disabled};
+      --clr-label-disabled-border-color: #{tokens.$cds-alias-status-disabled};
+
+      // gray
+      --clr-label-gray-bg-color: #{tokens.$cds-alias-object-opacity-0};
+      --clr-label-gray-border-color: #{tokens.$cds-alias-utility-gray};
+      --clr-label-gray-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-label-gray-solid-bg-color: #{tokens.$cds-alias-utility-gray};
+      --clr-label-gray-solid-border-color: #{tokens.$cds-alias-utility-gray-shade};
+      --clr-label-gray-solid-color: #{tokens.$cds-alias-typography-color-100};
+
+      // purple
+      --clr-label-purple-bg-color: #{tokens.$cds-alias-object-opacity-0};
+      --clr-label-purple-border-color: #{tokens.$cds-alias-utility-violet};
+      --clr-label-purple-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-label-purple-solid-bg-color: #{tokens.$cds-alias-utility-violet};
+      --clr-label-purple-solid-border-color: #{tokens.$cds-alias-utility-violet-shade};
+      --clr-label-purple-solid-color: #{tokens.$cds-alias-typography-color-100};
+
+      // blue
+      --clr-label-blue-bg-color: #{tokens.$cds-alias-object-opacity-0};
+      --clr-label-blue-border-color: #{tokens.$cds-alias-utility-dark-blue};
+      --clr-label-blue-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-label-blue-solid-bg-color: #{tokens.$cds-alias-utility-dark-blue};
+      --clr-label-blue-solid-border-color: #{tokens.$cds-alias-utility-dark-blue-shade};
+      --clr-label-blue-solid-color: #{tokens.$cds-alias-typography-color-100};
+
+      // orange
+      --clr-label-orange-bg-color: #{tokens.$cds-alias-object-opacity-0};
+      --clr-label-orange-border-color: #{tokens.$cds-alias-utility-tangerine};
+      --clr-label-orange-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-label-orange-solid-bg-color: #{tokens.$cds-alias-utility-tangerine};
+      --clr-label-orange-solid-border-color: #{tokens.$cds-alias-utility-tangerine-shade};
+      --clr-label-orange-solid-color: #{tokens.$cds-alias-typography-color-500};
+
+      // light-blue
+      --clr-label-light-blue-bg-color: #{tokens.$cds-alias-object-opacity-0};
+      --clr-label-light-blue-border-color: #{tokens.$cds-alias-utility-light-blue};
+      --clr-label-light-blue-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-label-light-blue-solid-bg-color: #{tokens.$cds-alias-utility-light-blue};
+      --clr-label-light-blue-solid-border-color: #{tokens.$cds-alias-utility-light-blue-shade};
+      --clr-label-light-blue-solid-color: #{tokens.$cds-alias-typography-color-500};
+
+      // info
+      --clr-label-info-bg-color: #{tokens.$cds-alias-utility-blue-tint};
+      --clr-label-info-font-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-label-info-border-color: #{tokens.$cds-alias-utility-blue};
+      --clr-label-info-solid-bg-color: #{tokens.$cds-alias-utility-blue};
+      --clr-label-info-solid-border-color: #{tokens.$cds-alias-utility-blue-shade};
+      --clr-label-info-solid-color: #{tokens.$cds-alias-typography-color-100};
+
+      // success
+      --clr-label-success-bg-color: #{tokens.$cds-alias-utility-green-tint};
+      --clr-label-success-font-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-label-success-border-color: #{tokens.$cds-alias-utility-green};
+      --clr-label-success-solid-bg-color: #{tokens.$cds-alias-utility-green};
+      --clr-label-success-solid-border-color: #{tokens.$cds-alias-utility-green-shade};
+      --clr-label-success-solid-color: #{tokens.$cds-alias-typography-color-100};
+
+      // warning
+      --clr-label-warning-bg-color: #{tokens.$cds-alias-utility-yellow-tint};
+      --clr-label-warning-font-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-label-warning-border-color: #{tokens.$cds-alias-utility-yellow};
+      --clr-label-warning-solid-bg-color: #{tokens.$cds-alias-utility-yellow};
+      --clr-label-warning-solid-border-color: #{tokens.$cds-alias-utility-yellow-shade};
+      --clr-label-warning-solid-color: #{tokens.$cds-global-color-black};
+
+      // danger
+      --clr-label-danger-bg-color: #{tokens.$cds-alias-utility-red-tint};
+      --clr-label-danger-font-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-label-danger-border-color: #{tokens.$cds-alias-utility-red};
+      --clr-label-danger-solid-bg-color: #{tokens.$cds-alias-utility-red};
+      --clr-label-danger-solid-border-color: #{tokens.$cds-alias-utility-red-shade};
+      --clr-label-danger-solid-color: #{tokens.$cds-alias-typography-color-100};
+    }
+  }
+}

package/emphasis/label/_variables.label.scss

@@ -0,0 +1,181 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/variables/variables';
+
+// Usage: ./_labels.clarity.scss
+$clr-label-borderwidth: var(--clr-label-border-width) !default;
+
+// COLOR
+// Usage:
+// - ./_labels.clarity.scss
+$clr-label-font-color: var(--clr-label-font-color) !default;
+$clr-label-default-border-color: var(--clr-label-default-border-color) !default;
+$clr-label-default-bg-color: var(--clr-label-default-bg-color) !default;
+$clr-label-font-solid-color: var(--clr-label-font-solid-color) !default;
+$clr-label-default-solid-border-color: var(--clr-label-default-solid-border-color) !default;
+$clr-label-default-solid-bg-color: var(--clr-label-default-solid-bg-color) !default;
+
+// TYPOGRAPHIC STYLES
+// Usage: ./_labels.clarity.scss
+$clr-label-bg-hover-color: var(--clr-label-bg-hover-color) !default;
+
+// gray
+$clr-label-gray-bg-color: var(--clr-label-gray-bg-color) !default;
+$clr-label-gray-border-color: var(--clr-label-gray-border-color) !default;
+$clr-label-gray-color: var(--clr-label-gray-color) !default;
+$clr-label-gray-solid-bg-color: var(--clr-label-gray-solid-bg-color) !default;
+$clr-label-gray-solid-border-color: var(--clr-label-gray-solid-border-color) !default;
+$clr-label-gray-solid-color: var(--clr-label-gray-solid-color) !default;
+
+// purple
+$clr-label-purple-bg-color: var(--clr-label-purple-bg-color) !default;
+$clr-label-purple-border-color: var(--clr-label-purple-border-color) !default;
+$clr-label-purple-color: var(--clr-label-purple-color) !default;
+$clr-label-purple-solid-bg-color: var(--clr-label-purple-solid-bg-color) !default;
+$clr-label-purple-solid-border-color: var(--clr-label-purple-solid-border-color) !default;
+$clr-label-purple-solid-color: var(--clr-label-purple-solid-color) !default;
+
+// blue
+$clr-label-blue-bg-color: var(--clr-label-blue-bg-color) !default;
+$clr-label-blue-border-color: var(--clr-label-blue-border-color) !default;
+$clr-label-blue-color: var(--clr-label-blue-color) !default;
+$clr-label-blue-solid-bg-color: var(--clr-label-blue-solid-bg-color) !default;
+$clr-label-blue-solid-border-color: var(--clr-label-blue-solid-border-color) !default;
+$clr-label-blue-solid-color: var(--clr-label-blue-solid-color) !default;
+
+// orange
+$clr-label-orange-bg-color: var(--clr-label-orange-bg-color) !default;
+$clr-label-orange-border-color: var(--clr-label-orange-border-color) !default;
+$clr-label-orange-color: var(--clr-label-orange-color) !default;
+$clr-label-orange-solid-bg-color: var(--clr-label-orange-solid-bg-color) !default;
+$clr-label-orange-solid-border-color: var(--clr-label-orange-solid-border-color) !default;
+$clr-label-orange-solid-color: var(--clr-label-orange-solid-color) !default;
+
+// light-blue
+$clr-label-light-blue-bg-color: var(--clr-label-light-blue-bg-color) !default;
+$clr-label-light-blue-border-color: var(--clr-label-light-blue-border-color) !default;
+$clr-label-light-blue-color: var(--clr-label-light-blue-color) !default;
+$clr-label-light-blue-solid-bg-color: var(--clr-label-light-blue-solid-bg-color) !default;
+$clr-label-light-blue-solid-border-color: var(--clr-label-light-blue-solid-border-color) !default;
+$clr-label-light-blue-solid-color: var(--clr-label-light-blue-solid-color) !default;
+
+// info
+$clr-label-info-bg-color: var(--clr-label-info-bg-color) !default;
+$clr-label-info-font-color: var(--clr-label-info-font-color) !default;
+$clr-label-info-border-color: var(--clr-label-info-border-color) !default;
+$clr-label-info-solid-bg-color: var(--clr-label-info-solid-bg-color) !default;
+$clr-label-info-solid-border-color: var(--clr-label-info-solid-border-color) !default;
+$clr-label-info-solid-color: var(--clr-label-info-solid-color) !default;
+
+// success
+$clr-label-success-bg-color: var(--clr-label-success-bg-color) !default;
+$clr-label-success-font-color: var(--clr-label-success-font-color) !default;
+$clr-label-success-border-color: var(--clr-label-success-border-color) !default;
+$clr-label-success-solid-bg-color: var(--clr-label-success-solid-bg-color) !default;
+$clr-label-success-solid-border-color: var(--clr-label-success-solid-border-color) !default;
+$clr-label-success-solid-color: var(--clr-label-success-solid-color) !default;
+
+// warning
+$clr-label-warning-bg-color: var(--clr-label-warning-bg-color) !default;
+$clr-label-warning-font-color: var(--clr-label-warning-font-color) !default;
+$clr-label-warning-border-color: var(--clr-label-warning-border-color) !default;
+$clr-label-warning-solid-bg-color: var(--clr-label-warning-solid-bg-color) !default;
+$clr-label-warning-solid-border-color: var(--clr-label-warning-solid-border-color) !default;
+$clr-label-warning-solid-color: var(--clr-label-warning-solid-color) !default;
+
+// danger
+$clr-label-danger-bg-color: var(--clr-label-danger-bg-color) !default;
+$clr-label-danger-font-color: var(--clr-label-danger-font-color) !default;
+$clr-label-danger-border-color: var(--clr-label-danger-border-color) !default;
+$clr-label-danger-solid-bg-color: var(--clr-label-danger-solid-bg-color) !default;
+$clr-label-danger-solid-border-color: var(--clr-label-danger-solid-border-color) !default;
+$clr-label-danger-solid-color: var(--clr-label-danger-solid-color) !default;
+
+// ACTION COLORS
+$clr-label-hover-color: var(--clr-label-hover-color) !default;
+$clr-label-active-color: var(--clr-label-active-color) !default;
+$clr-label-bg-active-color: var(--clr-label-bg-active-color) !default;
+$clr-label-box-shadow: var(--clr-label-box-shadow) !default;
+$clr-label-bg-disabled-color: var(--clr-label-bg-disabled-color) !default;
+$clr-label-disabled-color: var(--clr-label-disabled-color) !default;
+$clr-label-disabled-border-color: var(--clr-label-disabled-border-color) !default;
+
+$label-colors: (
+  gray: (
+    bg-color: $clr-label-gray-bg-color,
+    border-color: $clr-label-gray-border-color,
+    color: $clr-label-gray-color,
+    solid-bg-color: $clr-label-gray-solid-bg-color,
+    solid-border-color: $clr-label-gray-solid-border-color,
+    solid-color: $clr-label-gray-solid-color,
+  ),
+  purple: (
+    bg-color: $clr-label-purple-bg-color,
+    border-color: $clr-label-purple-border-color,
+    color: $clr-label-purple-color,
+    solid-bg-color: $clr-label-purple-solid-bg-color,
+    solid-border-color: $clr-label-purple-solid-border-color,
+    solid-color: $clr-label-purple-solid-color,
+  ),
+  blue: (
+    bg-color: $clr-label-blue-bg-color,
+    border-color: $clr-label-blue-border-color,
+    color: $clr-label-blue-color,
+    solid-bg-color: $clr-label-blue-solid-bg-color,
+    solid-border-color: $clr-label-blue-solid-border-color,
+    solid-color: $clr-label-blue-solid-color,
+  ),
+  orange: (
+    bg-color: $clr-label-orange-bg-color,
+    border-color: $clr-label-orange-border-color,
+    color: $clr-label-orange-color,
+    solid-bg-color: $clr-label-orange-solid-bg-color,
+    solid-border-color: $clr-label-orange-solid-border-color,
+    solid-color: $clr-label-orange-solid-color,
+  ),
+  light-blue: (
+    bg-color: $clr-label-light-blue-bg-color,
+    border-color: $clr-label-light-blue-border-color,
+    color: $clr-label-light-blue-color,
+    solid-bg-color: $clr-label-light-blue-solid-bg-color,
+    solid-border-color: $clr-label-light-blue-solid-border-color,
+    solid-color: $clr-label-light-blue-solid-color,
+  ),
+  success: (
+    bg-color: $clr-label-success-bg-color,
+    border-color: $clr-label-success-border-color,
+    color: $clr-label-success-font-color,
+    solid-bg-color: $clr-label-success-solid-bg-color,
+    solid-border-color: $clr-label-success-solid-border-color,
+    solid-color: $clr-label-success-solid-color,
+  ),
+  warning: (
+    bg-color: $clr-label-warning-bg-color,
+    border-color: $clr-label-warning-border-color,
+    color: $clr-label-warning-font-color,
+    solid-bg-color: $clr-label-warning-solid-bg-color,
+    solid-border-color: $clr-label-warning-solid-border-color,
+    solid-color: $clr-label-warning-solid-color,
+  ),
+  danger: (
+    bg-color: $clr-label-danger-bg-color,
+    border-color: $clr-label-danger-border-color,
+    color: $clr-label-danger-font-color,
+    solid-bg-color: $clr-label-danger-solid-bg-color,
+    solid-border-color: $clr-label-danger-solid-border-color,
+    solid-color: $clr-label-danger-solid-color,
+  ),
+  info: (
+    bg-color: $clr-label-info-bg-color,
+    border-color: $clr-label-info-border-color,
+    color: $clr-label-info-font-color,
+    solid-bg-color: $clr-label-info-solid-bg-color,
+    solid-border-color: $clr-label-info-solid-border-color,
+    solid-color: $clr-label-info-solid-color,
+  ),
+);

package/forms/combobox/_combobox.clarity.scss

@@ -0,0 +1,322 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use 'sass:meta';
+@use 'sass:map';
+@use '../../popover/dropdown/menu-mixins.clarity';
+@use '../../styles/mixins';
+@use '../styles/mixins.forms' as styles-mixins;
+@use '../styles/variables.forms' as forms-variables;
+@use '../../popover/dropdown/variables.dropdown' as dropdown-variables;
+@use 'variables.combobox' as combobox-variables;
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+@use '../../styles/variables/variables.global' as global;
+
+@include meta.load-css('properties.combobox');
+@include mixins.exports('combobox.clarity') {
+  // needed for the proper calculation of popover offset that we do to keep label always visible
+  .clr-combobox-form-control {
+    align-items: stretch;
+
+    .clr-error .clr-validate-icon {
+      margin-left: 0;
+    }
+  }
+
+  // Focus indicator, this is a custom implementation compared with other controls due to DOM structure and potential growth of height
+  .clr-focus-indicator {
+    background-color: forms-variables.$clr-forms-focused-color;
+    height: tokens.$cds-global-space-2;
+    width: 0;
+    transition: width 0.2s ease;
+    position: absolute;
+    bottom: calc(-1 * #{tokens.$cds-global-space-1});
+    left: 0;
+    border-bottom-left-radius: combobox-variables.$clr-combobox-border-radius;
+    border-bottom-right-radius: combobox-variables.$clr-combobox-border-radius;
+  }
+
+  .clr-focus {
+    width: 100%;
+  }
+
+  .clr-error .clr-focus-indicator {
+    background-color: forms-variables.$clr-forms-invalid-color;
+  }
+
+  .clr-combobox-wrapper {
+    position: relative;
+    flex-wrap: wrap;
+    gap: density.$clr-base-gap-xs;
+
+    //Dimensions
+    padding: calc(density.$clr-base-vertical-offset-xs - tokens.$cds-alias-object-border-width-100)
+      calc(
+        combobox-variables.$clr-combobox-caret-icon-size + combobox-variables.$clr-combobox-trigger-padding-left +
+          combobox-variables.$clr-combobox-trigger-padding-right
+      )
+      calc(density.$clr-base-vertical-offset-xs - tokens.$cds-alias-object-border-width-100)
+      combobox-variables.$clr-combobox-trigger-padding-left;
+    min-width: combobox-variables.$clr-combobox-min-width;
+
+    .clr-input {
+      padding: 0;
+      max-height: density.$clr-base-row-height-xs;
+
+      &:not(:disabled) {
+        color: combobox-variables.$clr-combobox-text-color;
+      }
+    }
+
+    font-size: combobox-variables.$clr-combobox-font-size;
+    font-weight: combobox-variables.$clr-combobox-font-weight;
+
+    .clr-combobox-pills {
+      display: flex;
+      flex-wrap: wrap;
+      gap: density.$clr-base-gap-xs;
+
+      &-calculation {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        visibility: hidden;
+        pointer-events: none;
+        z-index: -1;
+      }
+    }
+
+    &.multi {
+      min-width: calc(min(combobox-variables.$clr-combobox-multi-min-width, 100%));
+    }
+
+    //Mixins
+
+    @include styles-mixins.form-fields-appearance();
+
+    // override the above mixin for combobox-specific styles
+    background-color: combobox-variables.$clr-combobox-input-background-color;
+    border-width: tokens.$cds-alias-object-border-width-100;
+    border-style: solid;
+    border-color: combobox-variables.$clr-combobox-border-color;
+    border-radius: combobox-variables.$clr-combobox-border-radius;
+
+    // the border color is on the component; we don't want it on the input itself
+    .clr-input.clr-combobox-input:focus {
+      background: none;
+    }
+
+    &.invalid {
+      border-bottom-color: forms-variables.$clr-forms-invalid-color;
+    }
+
+    //Others
+    .clr-combobox-input {
+      background: none;
+      border-bottom: none;
+      vertical-align: middle;
+      height: density.$clr-base-row-height-xs;
+      line-height: density.$clr-base-typography-line-height-16;
+    }
+
+    .clr-combobox-remove-btn {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      padding: 0;
+      color: combobox-variables.$clr-combobox-pill-remove-icon-color;
+    }
+
+    .label-combobox-pill {
+      min-height: combobox-variables.$clr-combobox-pill-height;
+      height: combobox-variables.$clr-combobox-pill-height;
+      margin: 0;
+      background-color: combobox-variables.$clr-combobox-pill-background-color;
+      border-width: tokens.$cds-alias-object-border-width-100;
+      border-style: solid;
+      align-items: center;
+      border-radius: combobox-variables.$clr-combobox-pill-border-radius;
+      border-color: combobox-variables.$clr-combobox-pill-border-color;
+      padding: combobox-variables.$clr-combobox-pill-padding;
+      gap: density.$clr-base-gap-xs;
+
+      .clr-combobox-pill-content {
+        @include mixins.generate-typography-token('CAPTION-LG-11-CPT');
+
+        color: combobox-variables.$clr-combobox-pill-font-color;
+        padding: 0;
+      }
+
+      cds-icon[shape='window-close'],
+      clr-icon[shape='window-close'] {
+        color: combobox-variables.$clr-combobox-pill-font-color;
+      }
+    }
+
+    &:not(.disabled):hover,
+    &:focus-within {
+      background-color: combobox-variables.$clr-combobox-hover-background-color;
+    }
+
+    .clr-combobox-truncation-row {
+      background: none;
+      border: none;
+      padding: 0;
+
+      .clr-combobox-truncation-cell .clr-combobox-show-more-btn {
+        @include mixins.generate-typography-token(
+          'CAPTION-LG-11-CPT',
+          (
+            font-size: combobox-variables.$clr-combobox-font-size,
+          )
+        );
+
+        padding: 0;
+        border: 0;
+        text-transform: none;
+        height: auto;
+        min-width: unset;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  .clr-combobox-trigger {
+    &:disabled {
+      color: tokens.$cds-alias-object-interaction-color-disabled;
+
+      cds-icon[shape='angle'],
+      clr-icon[shape='angle'] {
+        color: tokens.$cds-alias-object-interaction-color-disabled;
+      }
+    }
+    //Dimensions
+    padding-left: combobox-variables.$clr-combobox-trigger-padding-left;
+    padding-right: combobox-variables.$clr-combobox-trigger-padding-right;
+    margin: auto;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    top: 0;
+    bottom: 0;
+    right: 0;
+
+    //Other
+    background: none;
+    border: none;
+    color: currentcolor;
+    cursor: pointer;
+    outline: none;
+
+    cds-icon[shape='angle'],
+    clr-icon[shape='angle'] {
+      color: combobox-variables.$clr-combobox-trigger-font-color;
+
+      &:not([size]) {
+        @include mixins.min-equilateral(combobox-variables.$clr-combobox-caret-icon-size);
+      }
+    }
+  }
+
+  .clr-combobox-options {
+    @include menu-mixins.generate-dropdown-menu();
+
+    position: static;
+    max-height: mixins.baselinePx(240);
+    overflow-y: auto;
+    visibility: visible;
+
+    &-multi:has(> .clr-combobox-select-all) {
+      padding-top: 0;
+    }
+
+    .clr-combobox-options-loading {
+      padding: 0 density.$clr-base-horizontal-offset-m;
+      display: flex;
+      gap: density.$clr-base-gap-s;
+
+      .spinner.spinner-inline {
+        margin-right: 0;
+      }
+
+      .clr-combobox-options-text {
+        overflow-wrap: anywhere;
+        word-break: normal;
+      }
+    }
+
+    .clr-combobox-options-empty-text {
+      padding: 0 density.$clr-base-horizontal-offset-l;
+    }
+
+    clr-option-group {
+      .clr-option-group-label {
+        @include menu-mixins.generate-dropdown-header();
+      }
+
+      & > .clr-combobox-option {
+        padding-left: density.$clr-base-horizontal-offset-2xl;
+      }
+    }
+
+    &-hidden {
+      opacity: 0;
+    }
+  }
+
+  .clr-combobox-option {
+    @include menu-mixins.generate-dropdown-item();
+    // Manual pseudo focus handling
+    &.clr-focus {
+      @include menu-mixins.dropdown-item-outline();
+    }
+  }
+
+  //NOTE: Adjust the height of the option only when it's in the options menu
+  .clr-combobox-options .clr-combobox-option {
+    @include menu-mixins.generate-dropdown-item-height();
+  }
+
+  .clr-combobox-disabled {
+    @include styles-mixins.disabled-form-fields();
+
+    .clr-combobox-input,
+    .clr-combobox-remove-btn,
+    .clr-combobox-trigger {
+      cursor: not-allowed;
+    }
+
+    .label-combobox-pill .clr-combobox-pill-content,
+    .clr-combobox-remove-btn > cds-icon,
+    .clr-combobox-remove-btn > clr-icon {
+      color: tokens.$cds-alias-typography-disabled;
+    }
+  }
+
+  .clr-filter-highlight b {
+    font-weight: tokens.$cds-alias-typography-font-weight-semibold;
+    color: combobox-variables.$clr-combobox-filter-highlight;
+  }
+
+  .clr-combobox-select-all {
+    position: sticky;
+    top: 0;
+    z-index: #{map.get(global.$clr-layers, dropdown-menu) + 1};
+    background-color: dropdown-variables.$clr-dropdown-bg-color;
+    border-bottom: tokens.$cds-alias-object-border-width-100 solid combobox-variables.$clr-combobox-border-color;
+
+    & > .clr-combobox-select-all-btn {
+      justify-content: start;
+    }
+  }
+}

package/forms/combobox/_properties.combobox.scss

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/mixins';
+@use '../../styles/core/tokens/variables.tokens' as tokens;
+@use '../../styles/variables/variables.density' as density;
+
+@include mixins.exports('combobox.properties') {
+  @include mixins.root-or-host() {
+    --clr-combobox-min-width: #{mixins.baselinePx(168)};
+    --clr-combobox-multi-min-width: #{mixins.baselinePx(360)};
+    --clr-combobox-font-weight: #{tokens.$cds-alias-typography-secondary-font-weight};
+
+    &,
+    & [clr-density] {
+      --clr-combobox-font-size: #{density.$clr-base-typography-font-size-inline};
+      --clr-combobox-border-radius: #{density.$clr-base-border-radius-s};
+      --clr-combobox-trigger-padding-left: #{density.$clr-base-horizontal-offset-m};
+      --clr-combobox-trigger-padding-right: #{density.$clr-base-horizontal-offset-m};
+      --clr-combobox-pill-padding: 0 #{density.$clr-base-horizontal-offset-xs};
+      --clr-combobox-pill-height: #{density.$clr-base-row-height-xs};
+      --clr-combobox-caret-icon-size: #{density.$clr-base-icon-size-s};
+      --clr-combobox-pill-border-radius: #{density.$clr-base-border-radius-s};
+    }
+
+    &,
+    & [cds-theme] {
+      --clr-combobox-border-color: #{tokens.$cds-alias-object-border-color};
+      --clr-combobox-input-background-color: #{tokens.$cds-alias-object-container-background-tint};
+      --clr-combobox-pill-background-color: #{tokens.$cds-alias-object-interaction-background};
+      --clr-combobox-pill-border-color: #{tokens.$cds-alias-object-border-color};
+      --clr-combobox-pill-font-color: #{tokens.$cds-alias-typography-color-500};
+      --clr-combobox-filter-highlight: #{tokens.$cds-alias-object-interaction-background-highlight};
+      --clr-combobox-text-color: #{tokens.$cds-alias-typography-color-400};
+      --clr-combobox-trigger-font-color: #{tokens.$cds-alias-object-interaction-color};
+      --clr-combobox-hover-background-color: #{tokens.$cds-alias-object-interaction-background-hover};
+      --clr-combobox-active-background-color: #{tokens.$cds-alias-object-interaction-background-active};
+      --clr-combobox-pill-remove-icon-color: #{tokens.$cds-alias-object-interaction-color};
+    }
+  }
+}

package/forms/combobox/_variables.combobox.scss

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+@use '../../styles/variables/variables';
+
+$clr-combobox-border-color: var(--clr-combobox-border-color);
+$clr-combobox-trigger-color: var(--clr-combobox-trigger-color);
+$clr-combobox-input-background-color: var(--clr-combobox-input-background-color);
+$clr-combobox-pill-background-color: var(--clr-combobox-pill-background-color);
+$clr-combobox-pill-border-color: var(--clr-combobox-pill-border-color);
+$clr-combobox-pill-font-color: var(--clr-combobox-pill-font-color);
+$clr-combobox-filter-highlight: var(--clr-combobox-filter-highlight);
+$clr-combobox-min-width: var(--clr-combobox-min-width);
+$clr-combobox-multi-min-width: var(--clr-combobox-multi-min-width);
+$clr-combobox-font-size: var(--clr-combobox-font-size);
+$clr-combobox-font-weight: var(--clr-combobox-font-weight);
+$clr-combobox-text-color: var(--clr-combobox-text-color);
+$clr-combobox-border-radius: var(--clr-combobox-border-radius);
+$clr-combobox-trigger-padding-left: var(--clr-combobox-trigger-padding-left);
+$clr-combobox-trigger-padding-right: var(--clr-combobox-trigger-padding-right);
+$clr-combobox-trigger-font-color: var(--clr-combobox-trigger-font-color);
+$clr-combobox-hover-background-color: var(--clr-combobox-hover-background-color);
+$clr-combobox-active-background-color: var(--clr-combobox-active-background-color);
+$clr-combobox-pill-padding: var(--clr-combobox-pill-padding);
+$clr-combobox-pill-height: var(--clr-combobox-pill-height);
+$clr-combobox-pill-remove-icon-color: var(--clr-combobox-pill-remove-icon-color);
+$clr-combobox-caret-icon-size: var(--clr-combobox-caret-icon-size);
+$clr-combobox-pill-border-radius: var(--clr-combobox-pill-border-radius);