fix: add typed-bem dependency to version 1.0.0-beta.2 and adjust BEM …

…configuration in Alert component

packages/components/package.json

@@ -82,6 +82,7 @@
 		"query-selector-all-shadow-root": "0.0.3",
 		"query-selector-shadow-root": "0.0.3",
 		"rgba-convert": "0.3.0",
+		"typed-bem": "1.0.0-beta.2",
 		"wcag-contrast": "3.0.0"
 	},
 	"devDependencies": {

packages/components/src/functional-components/Alert/Alert.tsx

@@ -8,13 +8,31 @@ import { KolButtonWcTag } from '../../core/component-names';
 
 import AlertIcon from '../AlertIcon';
 import KolHeadingFc from '../Heading';
+import typedBem from 'typed-bem';
+
+const bem = typedBem('kol-alert', ['msg', 'card	', 'hasCloser', 'default', 'error', 'info', 'warning', 'success', 'variant'] as const, {
+	container: ['content', 'heading'] as const,
+	'container-content': [''] as const,
+	'close-button': ['close'] as const,
+	content: [''] as const,
+	heading: [''] as const,
+});
 
 export type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &
 	Partial<Omit<InternalAlertProps, 'on'>> & {
 		onCloserClick?: () => void;
 		onAlertTimeout?: () => void;
 	};
 
+/**
+ * Define the static BEM class names for the alert component.
+ */
+const bemContainer = bem('container'); // kol-alert__container
+const bemContainerContent = bem('container-content'); // kol-alert__container-content
+const bemCloseButton = bem('close-button'); // kol-alert__close-button
+const bemContent = bem('content'); // kol-alert__content
+const bemHeading = bem('heading'); // kol-alert__heading
+
 const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 	const { class: classNames = {}, type = 'default', variant = 'msg', label, hasCloser, alert, onAlertTimeout, onCloserClick, level, ...other } = props;
 
@@ -34,27 +52,36 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 		}, 10000);
 	}
 
+	const bemRoot = bem({
+		[type]: true,
+		[variant]: true,
+		hasCloser: !!hasCloser,
+	});
+
+	/**
+	 * Define the dynamic BEM class names for the alert component.
+	 */
 	const rootProps: Partial<JSXBase.HTMLAttributes<HTMLDivElement>> = {
-		class: clsx('kol-alert', `kol-alert--${type}`, `kol-alert--${variant}`, { 'kol-alert--hasCloser': !!hasCloser }, classNames),
+		class: clsx(bemRoot, classNames),
 		role: alert ? 'alert' : undefined,
 		...other,
 	};
 
 	return (
 		<div {...rootProps}>
-			<div class="kol-alert__container">
+			<div class={bemContainer}>
 				<AlertIcon label={label} type={type} />
-				<div class="kol-alert__container-content">
+				<div class={bemContainerContent}>
 					{label ? (
-						<KolHeadingFc class="kol-alert__heading" level={level}>
+						<KolHeadingFc class={bemHeading} level={level}>
 							{label}
 						</KolHeadingFc>
 					) : null}
-					{variant === 'msg' && <div class="kol-alert__content">{children}</div>}
+					{variant === 'msg' && <div class={bemContent}>{children}</div>}
 				</div>
 				{hasCloser && (
 					<KolButtonWcTag
-						class="kol-alert__close-button close"
+						class={bemCloseButton}
 						_ariaDescription={label?.trim() || ''}
 						_hideLabel
 						_icons={{
@@ -68,7 +95,7 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 					></KolButtonWcTag>
 				)}
 			</div>
-			{variant === 'card' && <div class="kol-alert__content">{children}</div>}
+			{variant === 'card' && <div class={bemContent}>{children}</div>}
 		</div>
 	);
 };

packages/components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`ToastItemFc should render with basic props and status 1`] = `
           Test Toast
         </strong>
       </div>
-      <kol-button-wc _ariadescription="Test Toast" _hidelabel="" _label="kol-close-alert" _tooltipalign="left" class="close kol-alert__close-button"></kol-button-wc>
+      <kol-button-wc _ariadescription="Test Toast" _hidelabel="" _label="kol-close-alert" _tooltipalign="left" class="kol-alert__close-button"></kol-button-wc>
     </div>
     <div class="kol-alert__content">
       <div>