@viasat/beam-styles 2.71.0 → 2.72.1

package/styles.css

@@ -1602,6 +1602,42 @@
     --bm-sem-color-border-info-secondary,
     rgba(87, 103, 117, 0.4)
   );
+  --bm-comp-badge-color-accent-strong-bg: var(
+    --bm-alias-color-ramp-accent-base,
+    #00768f
+  );
+  --bm-comp-badge-color-accent-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-accent-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-subtler,
+    #d7f4f9
+  );
+  --bm-comp-badge-color-accent-medium-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #00768f
+  );
+  --bm-comp-badge-color-accent-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #00768f
+  );
+  --bm-comp-badge-color-accent-subtle-border: var(
+    --bm-alias-color-ramp-accent-muter,
+    #8cd8e6
+  );
   --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
   --bm-comp-badge-space-x: var(--bm-alias-badge-space-x, 0.75rem);
   --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
@@ -1687,6 +1723,52 @@
     --bm-sem-typo-compact-label-md,
     600 1rem/1.25rem "Source Sans Pro"
   );
+  --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-badge-indicator-size-marker-sm: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-badge-indicator-size-marker-md: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
+  --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-badge-indicator-typo-sm: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-typo-md: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-mute,
+    #00a2c0
+  );
+  --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
+    --bm-alias-color-ramp-blue-mute,
+    #0095e0
+  );
+  --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
+    --bm-alias-color-ramp-gray-mute,
+    #8697a5
+  );
+  --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
+    --bm-alias-color-ramp-green-mute,
+    #24a148
+  );
+  --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
+    --bm-alias-color-ramp-orange-mute,
+    #eb6200
+  );
+  --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
+    --bm-alias-color-ramp-red-mute,
+    #ed464c
+  );
 }
 
 :host,
@@ -1878,6 +1960,42 @@
     --bm-sem-color-border-info-secondary,
     rgba(209, 218, 224, 0.4)
   );
+  --bm-comp-badge-color-accent-strong-bg: var(
+    --bm-alias-color-ramp-accent-base,
+    #43bfd6
+  );
+  --bm-comp-badge-color-accent-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-accent-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-subtler,
+    #00414d
+  );
+  --bm-comp-badge-color-accent-medium-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #43bfd6
+  );
+  --bm-comp-badge-color-accent-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #43bfd6
+  );
+  --bm-comp-badge-color-accent-subtle-border: var(
+    --bm-alias-color-ramp-accent-muter,
+    #00768f
+  );
   --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
   --bm-comp-badge-space-x: var(--bm-alias-badge-space-x, 0.75rem);
   --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
@@ -1963,6 +2081,52 @@
     --bm-sem-typo-compact-label-md,
     600 1rem/1.25rem "Source Sans Pro"
   );
+  --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-badge-indicator-size-marker-sm: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-badge-indicator-size-marker-md: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
+  --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-badge-indicator-typo-sm: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-typo-md: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-mute,
+    #00a2c0
+  );
+  --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
+    --bm-alias-color-ramp-blue-mute,
+    #0095e0
+  );
+  --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
+    --bm-alias-color-ramp-gray-mute,
+    #8697a5
+  );
+  --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
+    --bm-alias-color-ramp-green-mute,
+    #24a148
+  );
+  --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
+    --bm-alias-color-ramp-orange-mute,
+    #eb6200
+  );
+  --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
+    --bm-alias-color-ramp-red-mute,
+    #ed464c
+  );
 }
 
 .bm-badge {
@@ -2069,6 +2233,21 @@
   color: var(--bm-comp-badge-color-info-secondary-subtle-fg);
   border: var(--bm-comp-badge-border-width) solid var(--bm-comp-badge-color-info-secondary-subtle-border);
 }
+.bm-badge--accent-strong {
+  background-color: var(--bm-comp-badge-color-accent-strong-bg);
+  color: var(--bm-comp-badge-color-accent-strong-fg);
+  border: var(--bm-comp-badge-border-width) solid var(--bm-comp-badge-color-accent-strong-border);
+}
+.bm-badge--accent-medium {
+  background-color: var(--bm-comp-badge-color-accent-medium-bg);
+  color: var(--bm-comp-badge-color-accent-medium-fg);
+  border: var(--bm-comp-badge-border-width) solid var(--bm-comp-badge-color-accent-medium-border);
+}
+.bm-badge--accent-subtle {
+  background-color: var(--bm-comp-badge-color-accent-subtle-bg);
+  color: var(--bm-comp-badge-color-accent-subtle-fg);
+  border: var(--bm-comp-badge-border-width) solid var(--bm-comp-badge-color-accent-subtle-border);
+}
 
 :root,
 :host,
@@ -2297,6 +2476,1050 @@
   font: var(--bm-comp-badge-dot-typo-strong);
 }
 
+/**
+ * Styles for the BadgeIndicator component — a compact badge for communicating
+ * count, status, or category. Supports three kinds: count (displays a number,
+ * truncated at maxCount), marker (a plain status indicator), and icon (renders
+ * a Beam icon inside the badge). Used across tabs, side navigation, notification
+ * icons, avatars, and buttons.
+ */
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~=bm-dark] .bm-inverse,
+[data-bm-theme~=bm-dark].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
+[data-bm-theme~=bm-light] {
+  --bm-comp-badge-color-positive-strong-bg: var(
+    --bm-sem-color-surface-positive-strong,
+    #187c36
+  );
+  --bm-comp-badge-color-positive-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-positive-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-medium-bg: var(
+    --bm-sem-color-surface-positive,
+    #daf7cf
+  );
+  --bm-comp-badge-color-positive-medium-fg: var(
+    --bm-sem-color-text-positive,
+    #187c36
+  );
+  --bm-comp-badge-color-positive-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-subtle-fg: var(
+    --bm-sem-color-text-positive,
+    #187c36
+  );
+  --bm-comp-badge-color-positive-subtle-border: var(
+    --bm-sem-color-border-positive,
+    rgba(24, 124, 54, 0.4)
+  );
+  --bm-comp-badge-color-warning-strong-bg: var(
+    --bm-sem-color-surface-warning-strong,
+    #ac4902
+  );
+  --bm-comp-badge-color-warning-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-warning-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-medium-bg: var(
+    --bm-sem-color-surface-warning,
+    #ffe4c9
+  );
+  --bm-comp-badge-color-warning-medium-fg: var(
+    --bm-sem-color-text-warning,
+    #ac4902
+  );
+  --bm-comp-badge-color-warning-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-subtle-fg: var(
+    --bm-sem-color-text-warning,
+    #ac4902
+  );
+  --bm-comp-badge-color-warning-subtle-border: var(
+    --bm-sem-color-border-warning,
+    rgba(172, 73, 2, 0.4)
+  );
+  --bm-comp-badge-color-negative-strong-bg: var(
+    --bm-sem-color-surface-negative-strong,
+    #cc2429
+  );
+  --bm-comp-badge-color-negative-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-negative-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-medium-bg: var(
+    --bm-sem-color-surface-negative,
+    #fee6e7
+  );
+  --bm-comp-badge-color-negative-medium-fg: var(
+    --bm-sem-color-text-negative,
+    #cc2429
+  );
+  --bm-comp-badge-color-negative-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-subtle-fg: var(
+    --bm-sem-color-text-negative,
+    #cc2429
+  );
+  --bm-comp-badge-color-negative-subtle-border: var(
+    --bm-sem-color-border-negative,
+    rgba(204, 36, 41, 0.4)
+  );
+  --bm-comp-badge-color-info-primary-strong-bg: var(
+    --bm-sem-color-surface-info-primary-strong,
+    #006ead
+  );
+  --bm-comp-badge-color-info-primary-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-info-primary-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-medium-bg: var(
+    --bm-sem-color-surface-info-primary,
+    #ccf0ff
+  );
+  --bm-comp-badge-color-info-primary-medium-fg: var(
+    --bm-sem-color-text-info-primary,
+    #006ead
+  );
+  --bm-comp-badge-color-info-primary-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-subtle-fg: var(
+    --bm-sem-color-text-info-primary,
+    #006ead
+  );
+  --bm-comp-badge-color-info-primary-subtle-border: var(
+    --bm-sem-color-border-info-primary,
+    rgba(0, 110, 173, 0.4)
+  );
+  --bm-comp-badge-color-info-secondary-strong-bg: var(
+    --bm-sem-color-surface-info-secondary-strong,
+    #576775
+  );
+  --bm-comp-badge-color-info-secondary-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-info-secondary-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-medium-bg: var(
+    --bm-sem-color-surface-info-secondary,
+    #dfe7ec
+  );
+  --bm-comp-badge-color-info-secondary-medium-fg: var(
+    --bm-sem-color-text-info-secondary,
+    #465967
+  );
+  --bm-comp-badge-color-info-secondary-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-subtle-fg: var(
+    --bm-sem-color-text-info-secondary,
+    #465967
+  );
+  --bm-comp-badge-color-info-secondary-subtle-border: var(
+    --bm-sem-color-border-info-secondary,
+    rgba(87, 103, 117, 0.4)
+  );
+  --bm-comp-badge-color-accent-strong-bg: var(
+    --bm-alias-color-ramp-accent-base,
+    #00768f
+  );
+  --bm-comp-badge-color-accent-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #ffffff
+  );
+  --bm-comp-badge-color-accent-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-subtler,
+    #d7f4f9
+  );
+  --bm-comp-badge-color-accent-medium-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #00768f
+  );
+  --bm-comp-badge-color-accent-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #00768f
+  );
+  --bm-comp-badge-color-accent-subtle-border: var(
+    --bm-alias-color-ramp-accent-muter,
+    #8cd8e6
+  );
+  --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-space-x: var(--bm-alias-badge-space-x, 0.75rem);
+  --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-badge-size-sm-height: var(--bm-primitive-dimension-150, 1.5rem);
+  --bm-comp-badge-size-md-height: var(--bm-primitive-dimension-175, 1.75rem);
+  --bm-comp-badge-radius: var(--bm-alias-badge-radius, 624.938rem);
+  --bm-comp-badge-border-width: var(--bm-sem-border-width-action, 0.063rem);
+  --bm-comp-badge-typo-sm: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-typo-md: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-shadow: var(--bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0));
+  --bm-comp-badge-dot-color-positive-bg: var(
+    --bm-sem-color-icon-positive,
+    #24a148
+  );
+  --bm-comp-badge-dot-color-positive-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-positive-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-warning-bg: var(
+    --bm-sem-color-icon-warning,
+    #eb6200
+  );
+  --bm-comp-badge-dot-color-warning-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-badge-dot-color-warning-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-negative-bg: var(
+    --bm-sem-color-icon-negative,
+    #ed464c
+  );
+  --bm-comp-badge-dot-color-negative-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-negative-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-info-primary-bg: var(
+    --bm-sem-color-icon-info-primary,
+    #0095e0
+  );
+  --bm-comp-badge-dot-color-info-primary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-primary-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-color-info-secondary-bg: var(
+    --bm-sem-color-icon-info-secondary,
+    #576775
+  );
+  --bm-comp-badge-dot-color-info-secondary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-secondary-text: var(
+    --bm-sem-color-text-primary,
+    #141d24
+  );
+  --bm-comp-badge-dot-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-badge-dot-size: 0.625rem;
+  --bm-comp-badge-dot-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-dot-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-badge-dot-typo-subtle: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-dot-typo-strong: var(
+    --bm-sem-typo-compact-label-md,
+    600 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-badge-indicator-size-marker-sm: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-badge-indicator-size-marker-md: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
+  --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-badge-indicator-typo-sm: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-typo-md: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-mute,
+    #00a2c0
+  );
+  --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
+    --bm-alias-color-ramp-blue-mute,
+    #0095e0
+  );
+  --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
+    --bm-alias-color-ramp-gray-mute,
+    #8697a5
+  );
+  --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
+    --bm-alias-color-ramp-green-mute,
+    #24a148
+  );
+  --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
+    --bm-alias-color-ramp-orange-mute,
+    #eb6200
+  );
+  --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
+    --bm-alias-color-ramp-red-mute,
+    #ed464c
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~=bm-light] .bm-inverse,
+[data-bm-theme~=bm-light].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
+[data-bm-theme~=bm-dark] {
+  --bm-comp-badge-color-positive-strong-bg: var(
+    --bm-sem-color-surface-positive-strong,
+    #b3eb9e
+  );
+  --bm-comp-badge-color-positive-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-positive-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-medium-bg: var(
+    --bm-sem-color-surface-positive,
+    #02310e
+  );
+  --bm-comp-badge-color-positive-medium-fg: var(
+    --bm-sem-color-text-positive,
+    #b3eb9e
+  );
+  --bm-comp-badge-color-positive-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-positive-subtle-fg: var(
+    --bm-sem-color-text-positive,
+    #b3eb9e
+  );
+  --bm-comp-badge-color-positive-subtle-border: var(
+    --bm-sem-color-border-positive,
+    rgba(179, 235, 158, 0.4)
+  );
+  --bm-comp-badge-color-warning-strong-bg: var(
+    --bm-sem-color-surface-warning-strong,
+    #ffd4a8
+  );
+  --bm-comp-badge-color-warning-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-warning-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-medium-bg: var(
+    --bm-sem-color-surface-warning,
+    #3e1a00
+  );
+  --bm-comp-badge-color-warning-medium-fg: var(
+    --bm-sem-color-text-warning,
+    #ffd4a8
+  );
+  --bm-comp-badge-color-warning-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-warning-subtle-fg: var(
+    --bm-sem-color-text-warning,
+    #ffd4a8
+  );
+  --bm-comp-badge-color-warning-subtle-border: var(
+    --bm-sem-color-border-warning,
+    rgba(255, 212, 168, 0.4)
+  );
+  --bm-comp-badge-color-negative-strong-bg: var(
+    --bm-sem-color-surface-negative-strong,
+    #f67378
+  );
+  --bm-comp-badge-color-negative-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-negative-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-medium-bg: var(
+    --bm-sem-color-surface-negative,
+    #520f11
+  );
+  --bm-comp-badge-color-negative-medium-fg: var(
+    --bm-sem-color-text-negative,
+    #f67378
+  );
+  --bm-comp-badge-color-negative-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-negative-subtle-fg: var(
+    --bm-sem-color-text-negative,
+    #f67378
+  );
+  --bm-comp-badge-color-negative-subtle-border: var(
+    --bm-sem-color-border-negative,
+    rgba(253, 203, 205, 0.4)
+  );
+  --bm-comp-badge-color-info-primary-strong-bg: var(
+    --bm-sem-color-surface-info-primary-strong,
+    #64cefb
+  );
+  --bm-comp-badge-color-info-primary-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-info-primary-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-medium-bg: var(
+    --bm-sem-color-surface-info-primary,
+    #002f57
+  );
+  --bm-comp-badge-color-info-primary-medium-fg: var(
+    --bm-sem-color-text-info-primary,
+    #9be1ff
+  );
+  --bm-comp-badge-color-info-primary-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-primary-subtle-fg: var(
+    --bm-sem-color-text-info-primary,
+    #9be1ff
+  );
+  --bm-comp-badge-color-info-primary-subtle-border: var(
+    --bm-sem-color-border-info-primary,
+    rgba(155, 225, 255, 0.4)
+  );
+  --bm-comp-badge-color-info-secondary-strong-bg: var(
+    --bm-sem-color-surface-info-secondary-strong,
+    #d1dae0
+  );
+  --bm-comp-badge-color-info-secondary-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-info-secondary-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-medium-bg: var(
+    --bm-sem-color-surface-info-secondary,
+    #3d4953
+  );
+  --bm-comp-badge-color-info-secondary-medium-fg: var(
+    --bm-sem-color-text-info-secondary,
+    #c3cdd5
+  );
+  --bm-comp-badge-color-info-secondary-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-info-secondary-subtle-fg: var(
+    --bm-sem-color-text-info-secondary,
+    #c3cdd5
+  );
+  --bm-comp-badge-color-info-secondary-subtle-border: var(
+    --bm-sem-color-border-info-secondary,
+    rgba(209, 218, 224, 0.4)
+  );
+  --bm-comp-badge-color-accent-strong-bg: var(
+    --bm-alias-color-ramp-accent-base,
+    #43bfd6
+  );
+  --bm-comp-badge-color-accent-strong-fg: var(
+    --bm-sem-color-text-primary-inverse,
+    #141d24
+  );
+  --bm-comp-badge-color-accent-strong-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-subtler,
+    #00414d
+  );
+  --bm-comp-badge-color-accent-medium-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #43bfd6
+  );
+  --bm-comp-badge-color-accent-medium-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-bg: var(
+    --bm-primitive-color-transparent,
+    #ffffff00
+  );
+  --bm-comp-badge-color-accent-subtle-fg: var(
+    --bm-alias-color-ramp-accent-base,
+    #43bfd6
+  );
+  --bm-comp-badge-color-accent-subtle-border: var(
+    --bm-alias-color-ramp-accent-muter,
+    #00768f
+  );
+  --bm-comp-badge-space-gap: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-space-x: var(--bm-alias-badge-space-x, 0.75rem);
+  --bm-comp-badge-size-icon: var(--bm-sem-size-icon-sm, 1rem);
+  --bm-comp-badge-size-sm-height: var(--bm-primitive-dimension-150, 1.5rem);
+  --bm-comp-badge-size-md-height: var(--bm-primitive-dimension-175, 1.75rem);
+  --bm-comp-badge-radius: var(--bm-alias-badge-radius, 624.938rem);
+  --bm-comp-badge-border-width: var(--bm-sem-border-width-action, 0.063rem);
+  --bm-comp-badge-typo-sm: var(
+    --bm-sem-typo-label-xs,
+    600 0.75rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-typo-md: var(
+    --bm-sem-typo-label-sm,
+    600 0.875rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-shadow: var(--bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0));
+  --bm-comp-badge-dot-color-positive-bg: var(
+    --bm-sem-color-icon-positive,
+    #71d963
+  );
+  --bm-comp-badge-dot-color-positive-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-positive-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-warning-bg: var(
+    --bm-sem-color-icon-warning,
+    #ffb17a
+  );
+  --bm-comp-badge-dot-color-warning-border: var(--bm-sem-color-none, #ffffff00);
+  --bm-comp-badge-dot-color-warning-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-negative-bg: var(
+    --bm-sem-color-icon-negative,
+    #ed464c
+  );
+  --bm-comp-badge-dot-color-negative-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-negative-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-info-primary-bg: var(
+    --bm-sem-color-icon-info-primary,
+    #64cefb
+  );
+  --bm-comp-badge-dot-color-info-primary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-primary-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-color-info-secondary-bg: var(
+    --bm-sem-color-icon-info-secondary,
+    #9fafbc
+  );
+  --bm-comp-badge-dot-color-info-secondary-border: var(
+    --bm-sem-color-none,
+    #ffffff00
+  );
+  --bm-comp-badge-dot-color-info-secondary-text: var(
+    --bm-sem-color-text-primary,
+    #ffffff
+  );
+  --bm-comp-badge-dot-space-gap: var(--bm-sem-space-50, 0.5rem);
+  --bm-comp-badge-dot-size: 0.625rem;
+  --bm-comp-badge-dot-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-dot-border-width: var(--bm-sem-border-width-md, 0.063rem);
+  --bm-comp-badge-dot-typo-subtle: var(
+    --bm-sem-typo-compact-body-md,
+    400 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-dot-typo-strong: var(
+    --bm-sem-typo-compact-label-md,
+    600 1rem/1.25rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-badge-indicator-size-marker-sm: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-badge-indicator-size-marker-md: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
+  --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-badge-indicator-typo-sm: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-typo-md: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-mute,
+    #00a2c0
+  );
+  --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
+    --bm-alias-color-ramp-blue-mute,
+    #0095e0
+  );
+  --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
+    --bm-alias-color-ramp-gray-mute,
+    #8697a5
+  );
+  --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
+    --bm-alias-color-ramp-green-mute,
+    #24a148
+  );
+  --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
+    --bm-alias-color-ramp-orange-mute,
+    #eb6200
+  );
+  --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
+    --bm-alias-color-ramp-red-mute,
+    #ed464c
+  );
+}
+
+:root,
+:host,
+.bm-light,
+.bm-dark .bm-inverse,
+.bm-dark.bm-inverse,
+[data-bm-theme~=bm-dark] .bm-inverse,
+[data-bm-theme~=bm-dark].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
+[data-bm-theme~=bm-light] {
+  --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-badge-indicator-size-marker-sm: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-badge-indicator-size-marker-md: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
+  --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-badge-indicator-typo-sm: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-typo-md: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-mute,
+    #00a2c0
+  );
+  --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
+    --bm-alias-color-ramp-blue-mute,
+    #0095e0
+  );
+  --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
+    --bm-alias-color-ramp-gray-mute,
+    #8697a5
+  );
+  --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
+    --bm-alias-color-ramp-green-mute,
+    #24a148
+  );
+  --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
+    --bm-alias-color-ramp-orange-mute,
+    #eb6200
+  );
+  --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
+    --bm-alias-color-ramp-red-mute,
+    #ed464c
+  );
+}
+
+:host,
+.bm-dark,
+.bm-light .bm-inverse,
+.bm-light.bm-inverse,
+[data-bm-theme~=bm-light] .bm-inverse,
+[data-bm-theme~=bm-light].bm-inverse,
+.bm-enterprise,
+.bm-consumer,
+[data-bm-theme~=bm-dark] {
+  --bm-comp-badge-indicator-radius: var(--bm-sem-radius-round, 624.938rem);
+  --bm-comp-badge-indicator-space-x: var(--bm-sem-space-25, 0.25rem);
+  --bm-comp-badge-indicator-size-sm: var(--bm-primitive-dimension-100, 1rem);
+  --bm-comp-badge-indicator-size-md: var(--bm-primitive-dimension-125, 1.25rem);
+  --bm-comp-badge-indicator-size-marker-sm: var(
+    --bm-primitive-dimension-50,
+    0.5rem
+  );
+  --bm-comp-badge-indicator-size-marker-md: var(
+    --bm-primitive-dimension-75,
+    0.75rem
+  );
+  --bm-comp-badge-indicator-size-icon-sm: 0.625rem;
+  --bm-comp-badge-indicator-size-icon-md: var(--bm-sem-size-icon-xs, 0.75rem);
+  --bm-comp-badge-indicator-typo-sm: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-typo-md: var(
+    --bm-sem-typo-compact-label-xs,
+    600 0.75rem/1rem "Source Sans Pro"
+  );
+  --bm-comp-badge-indicator-color-marker-accent-medium-bg: var(
+    --bm-alias-color-ramp-accent-mute,
+    #00a2c0
+  );
+  --bm-comp-badge-indicator-color-marker-info-primary-medium-bg: var(
+    --bm-alias-color-ramp-blue-mute,
+    #0095e0
+  );
+  --bm-comp-badge-indicator-color-marker-info-secondary-medium-bg: var(
+    --bm-alias-color-ramp-gray-mute,
+    #8697a5
+  );
+  --bm-comp-badge-indicator-color-marker-positive-medium-bg: var(
+    --bm-alias-color-ramp-green-mute,
+    #24a148
+  );
+  --bm-comp-badge-indicator-color-marker-warning-medium-bg: var(
+    --bm-alias-color-ramp-orange-mute,
+    #eb6200
+  );
+  --bm-comp-badge-indicator-color-marker-negative-medium-bg: var(
+    --bm-alias-color-ramp-red-mute,
+    #ed464c
+  );
+}
+
+.bm-badge-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--bm-comp-badge-indicator-radius);
+  border-style: solid;
+  border-width: var(--bm-comp-badge-border-width);
+  padding-inline: var(--bm-comp-badge-indicator-space-x);
+  overflow: hidden;
+  white-space: nowrap;
+  outline: var(--bm-sem-border-width-lg) solid var(--bm-comp-badge-indicator-ring-color, transparent);
+  outline-offset: 0;
+}
+.bm-badge-indicator--sm {
+  height: var(--bm-comp-badge-indicator-size-sm);
+  min-width: var(--bm-comp-badge-indicator-size-sm);
+  font: var(--bm-comp-badge-indicator-typo-sm);
+}
+.bm-badge-indicator--sm .bm-badge-indicator__icon {
+  width: var(--bm-comp-badge-indicator-size-icon-sm);
+  height: var(--bm-comp-badge-indicator-size-icon-sm);
+}
+.bm-badge-indicator--sm.bm-badge-indicator--marker {
+  width: var(--bm-comp-badge-indicator-size-marker-sm);
+  height: var(--bm-comp-badge-indicator-size-marker-sm);
+  min-width: unset;
+}
+.bm-badge-indicator--sm.bm-badge-indicator--icon {
+  width: var(--bm-comp-badge-indicator-size-sm);
+  min-width: unset;
+}
+.bm-badge-indicator--md {
+  height: var(--bm-comp-badge-indicator-size-md);
+  min-width: var(--bm-comp-badge-indicator-size-md);
+  font: var(--bm-comp-badge-indicator-typo-md);
+}
+.bm-badge-indicator--md .bm-badge-indicator__icon {
+  width: var(--bm-comp-badge-indicator-size-icon-md);
+  height: var(--bm-comp-badge-indicator-size-icon-md);
+}
+.bm-badge-indicator--md.bm-badge-indicator--marker {
+  width: var(--bm-comp-badge-indicator-size-marker-md);
+  height: var(--bm-comp-badge-indicator-size-marker-md);
+  min-width: unset;
+}
+.bm-badge-indicator--md.bm-badge-indicator--icon {
+  width: var(--bm-comp-badge-indicator-size-md);
+  min-width: unset;
+}
+.bm-badge-indicator--marker, .bm-badge-indicator--icon {
+  padding: 0;
+}
+.bm-badge-indicator--marker {
+  font: unset;
+  overflow: visible;
+}
+.bm-badge-indicator--marker.bm-badge-indicator--positive.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-indicator-color-marker-positive-medium-bg);
+  border-color: transparent;
+}
+.bm-badge-indicator--marker.bm-badge-indicator--warning.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-indicator-color-marker-warning-medium-bg);
+  border-color: transparent;
+}
+.bm-badge-indicator--marker.bm-badge-indicator--negative.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-indicator-color-marker-negative-medium-bg);
+  border-color: transparent;
+}
+.bm-badge-indicator--marker.bm-badge-indicator--infoPrimary.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-indicator-color-marker-info-primary-medium-bg);
+  border-color: transparent;
+}
+.bm-badge-indicator--marker.bm-badge-indicator--infoSecondary.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-indicator-color-marker-info-secondary-medium-bg);
+  border-color: transparent;
+}
+.bm-badge-indicator--marker.bm-badge-indicator--accent.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-indicator-color-marker-accent-medium-bg);
+  border-color: transparent;
+}
+.bm-badge-indicator__icon {
+  display: inline-flex;
+}
+.bm-badge-indicator__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.bm-badge-indicator--collapsible {
+  transition: all 0s 0s, transform 0.1s ease, opacity 0.1s ease;
+}
+.bm-badge-indicator--collapsible.bm-badge-indicator--hide-zero {
+  transition: all 0s 0.1s, transform 0.1s ease, opacity 0.1s ease;
+}
+.bm-badge-indicator--hide-zero {
+  transform: scale(0);
+  opacity: 0;
+  width: 0;
+  min-width: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  border-width: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .bm-badge-indicator--collapsible, .bm-badge-indicator--collapsible.bm-badge-indicator--hide-zero {
+    transition: none;
+  }
+}
+.bm-badge-indicator--positive.bm-badge-indicator--strong {
+  background-color: var(--bm-comp-badge-color-positive-strong-bg);
+  color: var(--bm-comp-badge-color-positive-strong-fg);
+  border-color: var(--bm-comp-badge-color-positive-strong-border);
+}
+.bm-badge-indicator--positive.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-color-positive-medium-bg);
+  color: var(--bm-comp-badge-color-positive-medium-fg);
+  border-color: var(--bm-comp-badge-color-positive-medium-border);
+}
+.bm-badge-indicator--positive.bm-badge-indicator--subtle {
+  background-color: var(--bm-comp-badge-color-positive-subtle-bg);
+  color: var(--bm-comp-badge-color-positive-subtle-fg);
+  border-color: var(--bm-comp-badge-color-positive-subtle-border);
+}
+.bm-badge-indicator--warning.bm-badge-indicator--strong {
+  background-color: var(--bm-comp-badge-color-warning-strong-bg);
+  color: var(--bm-comp-badge-color-warning-strong-fg);
+  border-color: var(--bm-comp-badge-color-warning-strong-border);
+}
+.bm-badge-indicator--warning.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-color-warning-medium-bg);
+  color: var(--bm-comp-badge-color-warning-medium-fg);
+  border-color: var(--bm-comp-badge-color-warning-medium-border);
+}
+.bm-badge-indicator--warning.bm-badge-indicator--subtle {
+  background-color: var(--bm-comp-badge-color-warning-subtle-bg);
+  color: var(--bm-comp-badge-color-warning-subtle-fg);
+  border-color: var(--bm-comp-badge-color-warning-subtle-border);
+}
+.bm-badge-indicator--negative.bm-badge-indicator--strong {
+  background-color: var(--bm-comp-badge-color-negative-strong-bg);
+  color: var(--bm-comp-badge-color-negative-strong-fg);
+  border-color: var(--bm-comp-badge-color-negative-strong-border);
+}
+.bm-badge-indicator--negative.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-color-negative-medium-bg);
+  color: var(--bm-comp-badge-color-negative-medium-fg);
+  border-color: var(--bm-comp-badge-color-negative-medium-border);
+}
+.bm-badge-indicator--negative.bm-badge-indicator--subtle {
+  background-color: var(--bm-comp-badge-color-negative-subtle-bg);
+  color: var(--bm-comp-badge-color-negative-subtle-fg);
+  border-color: var(--bm-comp-badge-color-negative-subtle-border);
+}
+.bm-badge-indicator--infoPrimary.bm-badge-indicator--strong {
+  background-color: var(--bm-comp-badge-color-info-primary-strong-bg);
+  color: var(--bm-comp-badge-color-info-primary-strong-fg);
+  border-color: var(--bm-comp-badge-color-info-primary-strong-border);
+}
+.bm-badge-indicator--infoPrimary.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-color-info-primary-medium-bg);
+  color: var(--bm-comp-badge-color-info-primary-medium-fg);
+  border-color: var(--bm-comp-badge-color-info-primary-medium-border);
+}
+.bm-badge-indicator--infoPrimary.bm-badge-indicator--subtle {
+  background-color: var(--bm-comp-badge-color-info-primary-subtle-bg);
+  color: var(--bm-comp-badge-color-info-primary-subtle-fg);
+  border-color: var(--bm-comp-badge-color-info-primary-subtle-border);
+}
+.bm-badge-indicator--infoSecondary.bm-badge-indicator--strong {
+  background-color: var(--bm-comp-badge-color-info-secondary-strong-bg);
+  color: var(--bm-comp-badge-color-info-secondary-strong-fg);
+  border-color: var(--bm-comp-badge-color-info-secondary-strong-border);
+}
+.bm-badge-indicator--infoSecondary.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-color-info-secondary-medium-bg);
+  color: var(--bm-comp-badge-color-info-secondary-medium-fg);
+  border-color: var(--bm-comp-badge-color-info-secondary-medium-border);
+}
+.bm-badge-indicator--infoSecondary.bm-badge-indicator--subtle {
+  background-color: var(--bm-comp-badge-color-info-secondary-subtle-bg);
+  color: var(--bm-comp-badge-color-info-secondary-subtle-fg);
+  border-color: var(--bm-comp-badge-color-info-secondary-subtle-border);
+}
+.bm-badge-indicator--accent.bm-badge-indicator--strong {
+  background-color: var(--bm-comp-badge-color-accent-strong-bg);
+  color: var(--bm-comp-badge-color-accent-strong-fg);
+  border-color: var(--bm-comp-badge-color-accent-strong-border);
+}
+.bm-badge-indicator--accent.bm-badge-indicator--medium {
+  background-color: var(--bm-comp-badge-color-accent-medium-bg);
+  color: var(--bm-comp-badge-color-accent-medium-fg);
+  border-color: var(--bm-comp-badge-color-accent-medium-border);
+}
+.bm-badge-indicator--accent.bm-badge-indicator--subtle {
+  background-color: var(--bm-comp-badge-color-accent-subtle-bg);
+  color: var(--bm-comp-badge-color-accent-subtle-fg);
+  border-color: var(--bm-comp-badge-color-accent-subtle-border);
+}
+
 .bm-box--border-width-none {
   border-width: var(--bm-sem-border-width-none);
   border-style: solid;