BEM example with elements, not just block?

[nemanjam]

There is a BEM example in docs but it shows just block with modifiers:

https://cva.style/docs/examples/bem

What if I have nested elements that also depend of variant prop? Should I call cva() multiple times or use object map?

Here is my incomplete example in Astro and BEM:

Alert.astro:

---
import { Icon } from 'astro-icon/components';

import { cva } from 'class-variance-authority';

import { capitalizeFirstLetter } from '@/utils/strings';
import { cn } from '@/utils/styles';

import type { HTMLAttributes } from 'astro/types';
import type { VariantProps } from 'class-variance-authority';

const alertVariants = cva('alert', {
  variants: {
    variant: {
      note: 'alert-note',
      info: 'alert-info',
      tip: 'alert-tip',
      warning: 'alert-warning',
      danger: 'alert-danger',
    },
  },
});

// is this ok or I should call cva() again? what about eventual compoundVariants?
const alertTitleVariants = {
  note: 'alert__title--note',
  info: 'alert__title--info',
  tip: 'alert__title--tip',
  warning: 'alert__title--warning',
  danger: 'alert__title--danger',
};

export interface Props extends HTMLAttributes<'aside'>, VariantProps<typeof alertVariants> {
  title?: string;
}

const { title: titleProp, class: className, variant: variantProp, ...props } = Astro.props;

// defailts
const variant = variantProp ?? 'note';
const title = titleProp ?? capitalizeFirstLetter(variant);
---

<aside class={alertVariants({ variant, className })} aria-label={title} {...props}>
  <h4 aria-hidden="true" class={cn('alert__title', alertTitleVariants[variant])}>
    <Icon name={variant} class="inline h-6 w-6" />
    {title}
  </h4>

  <div>
    <slot />
  </div>
</aside>

components.css:

  .alert {
    @apply mb-4 mx-8 md:mx-auto px-4 py-1 rounded-button;
  }
  .alert--note {
    @apply bg-slate-100 border border-slate-200 dark:border-slate-800 dark:bg-slate-900;
  }
  .alert--info {
    @apply bg-blue-100 border border-blue-200 dark:border-blue-800 dark:bg-blue-900;
  }
  .alert--tip {
    @apply bg-green-100 border border-green-200 dark:border-green-800 dark:bg-green-900;
  }
  .alert--warning {
    @apply bg-orange-100 border border-orange-200 dark:border-orange-900 dark:bg-orange-950;
  }
  .alert--danger {
    @apply bg-red-100 border border-red-200 dark:border-red-800 dark:bg-red-900;
  }

  .alert__title {
    @apply flex items-center gap-1;
  }
  .alert__title--note {
    @apply text-slate-900 dark:text-slate-100;
  }
  .alert__title--info {
    @apply text-blue-900 dark:text-blue-100;
  }
  .alert__title--tip {
    @apply text-green-900 dark:text-green-100;
  }
  .alert__title--warning {
    @apply text-orange-900dark:text-orange-100;
  }
  .alert__title--danger {
    @apply text-red-900dark:text-red-100;
  }