Merge branch 'develop' into 7303-fix-radio-hitbox

Author: deleonio

.github/workflows/benchmark.monitoring.yml

@@ -31,7 +31,7 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          persist-credentials: false
+          token: ${{ steps.app-token.outputs.token }}
 
       - name: Install and execute benchmark
         uses: ./.github/actions/benchmark

.github/workflows/benchmark.pr-check.yml

@@ -15,7 +15,7 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          persist-credentials: false
+          persist-credentials: true
 
       - name: Install and execute benchmark
         uses: ./.github/actions/benchmark

packages/components/package.json

@@ -24,7 +24,7 @@
 	"unpkg": "dist/stencil/stencil.js",
 	"collection:main": "dist/collection/index.js",
 	"collection": "dist/collection/collection-manifest.json",
-	"sideEffects": false,
+	"sideEffects": true,
 	"description": "Contains all web components that belong to KoliBri - The accessible HTML-Standard.",
 	"keywords": [
 		"accessibility",
@@ -65,6 +65,7 @@
 		"lint:stylelint": "stylelint \"src/**/*.{css,scss}\"",
 		"lint:tsc": "tsc --noemit",
 		"dev": "cross-env NODE_ENV=development stencil build --prod --watch",
+		"prod": "stencil build --prod",
 		"test": "pnpm test:unit",
 		"test:e2e": "playwright test",
 		"test:unit": "cross-env NODE_ENV=test stencil test --spec --json --outputFile dist/jest-test-results.json",
@@ -84,6 +85,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-rc.7",
 		"wcag-contrast": "3.0.0"
 	},
 	"devDependencies": {

packages/components/src/components/alert/test/__snapshots__/snapshot.spec.tsx.snap

@@ -28,7 +28,7 @@ import KolInputContainerFc from '../../functional-component-wrappers/InputContai
 import CustomSuggestionsToggleFc from '../../functional-components/CustomSuggestionsToggle';
 import CustomSuggestionsOptionFc from '../../functional-components/CustomSuggestionsOption/CustomSuggestionsOption';
 import CustomSuggestionsOptionsGroupFc from '../../functional-components/CustomSuggestionsOptionsGroup';
-import { EventDetail } from '../../schema/interfaces/EventDetail';
+import type { EventDetail } from '../../schema/interfaces/EventDetail';
 
 /**
  * @slot - Die Beschriftung des Eingabefeldes.

packages/components/src/components/combobox/shadow.tsx

@@ -0,0 +1,32 @@
+import { generateBemClassNames } from 'typed-bem';
+
+type SCHEMA = {
+	'kol-icon': {
+		elements: {
+			icon: {
+				modifiers: null;
+			};
+		};
+		modifiers: null;
+	};
+};
+
+const bem = generateBemClassNames<SCHEMA>();
+
+const BEM: SCHEMA = {
+	'kol-icon': {
+		elements: {
+			icon: { modifiers: null },
+		},
+		modifiers: null,
+	},
+};
+
+/**
+ * Define the static BEM class names for the alert component.
+ */
+const BEM_CLASS_ICON = bem('kol-icon');
+const BEM_CLASS_ICON__ICON = bem('kol-icon', 'icon');
+
+export { bem as genBemAlert, BEM as BEM_ICON };
+export { BEM_CLASS_ICON, BEM_CLASS_ICON__ICON };

packages/components/src/components/icon/bem.ts

@@ -1,9 +1,11 @@
+import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 import type { IconAPI, IconStates, LabelPropType } from '../../schema';
 import { validateLabel, watchString } from '../../schema';
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
 import clsx from 'clsx';
+import { BEM_CLASS_ICON, BEM_CLASS_ICON__ICON } from './bem';
+
 /**
  * @part icon - Ermöglicht das Styling des inneren Icons.
  */
@@ -18,7 +20,7 @@ export class KolIcon implements IconAPI {
 	public render(): JSX.Element {
 		const ariaShow = this.state._label.length > 0;
 		return (
-			<Host exportparts="icon" class="kol-icon">
+			<Host exportparts="icon" class={BEM_CLASS_ICON}>
 				<i
 					aria-hidden={ariaShow ? undefined : 'true'}
 					/**
@@ -28,7 +30,7 @@ export class KolIcon implements IconAPI {
 					 * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden
 					 */
 					aria-label={ariaShow ? this.state._label : undefined}
-					class={clsx('kol-icon__icon', this.state._icons)}
+					class={clsx(BEM_CLASS_ICON__ICON, this.state._icons)}
 					part="icon"
 					role="img"
 				></i>

packages/components/src/components/icon/shadow.tsx

@@ -1,6 +1,6 @@
 import { KolProgress } from '../shadow';
 import { executeSnapshotTests } from '../../../utils/testing';
-import { ProgressProps } from '../../../schema';
+import type { ProgressProps } from '../../../schema';
 import { KolProgressTag } from '../../../core/component-names';
 
 executeSnapshotTests<ProgressProps>(

packages/components/src/components/progress/test/snapshot.spec.tsx

@@ -1,13 +1,13 @@
 import { type FunctionalComponent as FC, h } from '@stencil/core';
-import type { JSXBase } from '@stencil/core/internal';
+import { type JSXBase } from '@stencil/core/internal';
 import clsx from 'clsx';
 
-import { type InternalAlertProps } from '../../schema';
-import { translate } from '../../i18n';
 import { KolButtonWcTag } from '../../core/component-names';
-
+import { translate } from '../../i18n';
+import { type InternalAlertProps } from '../../schema';
 import AlertIcon from '../AlertIcon';
 import KolHeadingFc from '../Heading';
+import { genBemAlert as bem, BEM_CLASS_ALERT__CLOSER, BEM_CLASS_ALERT__CONTENT } from './bem';
 
 export type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &
 	Partial<Omit<InternalAlertProps, 'on'>> & {
@@ -16,7 +16,18 @@ export type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &
 	};
 
 const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
-	const { class: classNames = {}, type = 'default', variant = 'msg', label, hasCloser, alert, onAlertTimeout, onCloserClick, level, ...other } = props;
+	const {
+		class: classNames = {},
+		alert = false,
+		hasCloser = false,
+		label,
+		level = 0,
+		type = 'default',
+		variant = 'msg',
+		onAlertTimeout,
+		onCloserClick,
+		...other
+	} = props;
 
 	if (alert) {
 		/**
@@ -34,9 +45,21 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 		}, 10000);
 	}
 
+	/**
+	 * Define the dynamic BEM class names for the alert component.
+	 */
+	const BEM_CLASS_ROOT = bem('kol-alert', {
+		hasCloser: !!hasCloser,
+		[`type-${type}`]: true,
+		[`variant-${variant}`]: true,
+	});
+	const BEM_CLASS__HEADING = bem('kol-alert', 'heading', {
+		[`h${level}`]: true,
+	});
+
 	const rootProps: Partial<JSXBase.HTMLAttributes<HTMLDivElement>> = {
-		class: clsx('kol-alert', `kol-alert--${type}`, `kol-alert--${variant}`, { 'kol-alert--hasCloser': !!hasCloser }, classNames),
-		role: alert ? 'alert' : undefined,
+		class: clsx(classNames, BEM_CLASS_ROOT),
+		role: alert ? (type === 'error' ? 'alert' : 'status') : undefined,
 		...other,
 	};
 
@@ -45,16 +68,20 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 			<div class="kol-alert__container">
 				<AlertIcon label={label} type={type} />
 				<div class="kol-alert__container-content">
-					{label ? (
-						<KolHeadingFc class="kol-alert__heading" level={level}>
+					{label && (
+						<KolHeadingFc class={BEM_CLASS__HEADING} level={level} id="heading">
 							{label}
 						</KolHeadingFc>
-					) : null}
-					{variant === 'msg' && <div class="kol-alert__content">{children}</div>}
+					)}
+					{variant === 'msg' && (
+						<span class={BEM_CLASS_ALERT__CONTENT} aria-describedby={label ? 'heading' : undefined}>
+							{children}
+						</span>
+					)}
 				</div>
 				{hasCloser && (
 					<KolButtonWcTag
-						class="kol-alert__close-button close"
+						class={BEM_CLASS_ALERT__CLOSER}
 						data-testid="alert-close-button"
 						_ariaDescription={label?.trim() || ''}
 						_hideLabel
@@ -66,10 +93,14 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 						_label={translate('kol-close-alert')}
 						_on={{ onClick: onCloserClick }}
 						_tooltipAlign="left"
-					></KolButtonWcTag>
+					/>
 				)}
 			</div>
-			{variant === 'card' && <div class="kol-alert__content">{children}</div>}
+			{variant === 'card' && (
+				<div class={BEM_CLASS_ALERT__CONTENT} aria-describedby={label ? 'heading' : undefined}>
+					{children}
+				</div>
+			)}
 		</div>
 	);
 };

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

@@ -0,0 +1,76 @@
+import { generateBemClassNames } from 'typed-bem';
+
+/**
+ * This file defines the BEM schema for the kol-alert component.
+ */
+
+/**
+ * The schema defines the structure of the BEM class names
+ */
+type SCHEMA = {
+	'kol-alert': {
+		/**
+		 * Here we define the elements we needed
+		 * to realize a minimal full featured alert
+		 * component (DOM).
+		 */
+		elements: {
+			container: {
+				modifiers: null;
+			};
+			icon: {
+				modifiers: null;
+			};
+			heading: {
+				/**
+				 * Some elements needs modifiers to
+				 * style them properly.
+				 */
+				modifiers: Set<'h0' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+			};
+			content: {
+				modifiers: null;
+			};
+			closer: {
+				modifiers: null;
+			};
+		};
+		/**
+		 * Here we define the modifiers related to the
+		 * kol-alert component properties.
+		 */
+		modifiers: Set<'hasCloser' | 'type-default' | 'type-error' | 'type-info' | 'type-success' | 'type-warning' | 'variant-card' | 'variant-msg'>;
+	};
+};
+
+/**
+ * Define the generator function for the BEM class names.
+ */
+const bem = generateBemClassNames<SCHEMA>();
+
+/**
+ * Define a constants object that contains the BEM schema for
+ * reuse to generate SCSS files in themes.
+ */
+const BEM: SCHEMA = {
+	'kol-alert': {
+		elements: {
+			closer: { modifiers: null },
+			heading: { modifiers: new Set(['h0', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']) },
+			icon: { modifiers: null },
+			content: { modifiers: null },
+			container: { modifiers: null },
+		},
+		modifiers: new Set(['hasCloser', 'type-default', 'type-error', 'type-info', 'type-success', 'type-warning', 'variant-card', 'variant-msg']),
+	},
+};
+
+/**
+ * Define the static BEM class names for the alert component.
+ */
+const BEM_CLASS_ALERT__CLOSER = bem('kol-alert', 'closer');
+const BEM_CLASS_ALERT__CONTENT = bem('kol-alert', 'content');
+const BEM_CLASS_ALERT__ICON = bem('kol-alert', 'icon');
+
+export { bem as genBemAlert, BEM as BEM_ALERT };
+export { BEM_CLASS_ALERT__CLOSER, BEM_CLASS_ALERT__CONTENT, BEM_CLASS_ALERT__ICON };