chore: rename main-navigation to navigation

docs/migration/alpha-beta.md

@@ -34,6 +34,7 @@
 | Name                                                                                                           | Description                                                                                                                             | Action                                                                                                                                                                                                     |
 | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | 🔄 renamed `db-alert` to `db-notification`                                                                     | renamed `alert` to `notification` and add/changed some additional properties                                                            | 1. Replace `DBAlert`, `db-alert` by `DBNotification` / `db-notification`<br/>2. `Link` was removed, add a normal `a` or `DBLink` to the `slotLink`<br/>3. `props.type` has been changed to `props.variant` |
+| 🔄 renamed `db-main-navigation` to `db-navigation`                                                             | renamed `main-navigation` to `navigation`                                                                                               | Replace `DBMainNavigation`, `db-main-navigation` by `DBNavigation` / `db-navigation`                                                                                                                       |
 | 🔄 changed `db-button` variants                                                                                | We renamed the variants for the button                                                                                                  | `primary` ➡ `brand`<br/>`solid` ➡ `filled`<br/>`text` ➡ `ghost`                                                                                                                                         |
 | 🔄 changed `db-card` elevation                                                                                 | We replaced the box-shadow elevation with bg-level                                                                                      | 1. `props.elevation` ➡ `props.elevationLevel` (1,2,3) <br/>2. `props.variant` ➡ `props.behaviour` <br/>3. Removed card-image                                                                             |
 | 🆕 valid/invalid message form-components                                                                       | We add additional messages for `required` form-components like `DBInput` etc.                                                           | Use `validMessage="XXX"` and `invalidMessage="XXX"` to display the required information for form-components. Otherwise you will see a default message with a `TODO: ...`                                   |

packages/components/overrides/angular/src/components/navigation/index.ts

@@ -0,0 +1 @@
+export { DBNavigation } from './navigation';

packages/components/scripts/post-build/components.js

@@ -114,7 +114,7 @@ const getComponents = () => [
 	},
 
 	{
-		name: 'main-navigation'
+		name: 'navigation'
 	},
 	{
 		name: 'navigation-item',

packages/components/src/components/header/docs/Angular.md

@@ -61,9 +61,9 @@ export class AppComponent {
 <!-- app.component.html -->
 <db-header [drawerOpen]="drawerOpen" (onToggle)="toggleDrawer($event)">
 	<db-brand brand>My Awesome App</db-brand>
-	<db-main-navigation *dbNavigation>
-		<!-- https://github.com/db-ui/mono/blob/main/packages/components/src/components/main-navigation/docs/Angular.md -->
-	</db-main-navigation>
+	<db-navigation *dbNavigation>
+		<!-- https://github.com/db-ui/mono/blob/main/packages/components/src/components/navigation/docs/Angular.md -->
+	</db-navigation>
 	<ng-container *dbMetaNavigation>
 		<DBLink href="#">Imprint</DBLink>
 		<DBLink href="#">Help</DBLink>

packages/components/src/components/header/docs/React.md

@@ -54,10 +54,10 @@ const App = () => (
 			</>
 		}
 	>
-		<DBMainNavigation>
+		<DBNavigation>
 			//
-			https://github.com/db-ui/mono/blob/main/packages/components/src/components/main-navigation/docs/React.md
-		</DBMainNavigation>
+			https://github.com/db-ui/mono/blob/main/packages/components/src/components/navigation/docs/React.md
+		</DBNavigation>
 	</DBHeader>
 );
 

packages/components/src/components/header/docs/Vue.md

@@ -60,10 +60,10 @@ const toggleDrawer = (open: boolean) => {
 			<DBLink href="#">Help</DBLink>
 		</template>
 
-		<DBMainNavigation>
+		<DBNavigation>
 			//
-			https://github.com/db-ui/mono/blob/main/packages/components/src/components/main-navigation/docs/Vue.md
-		</DBMainNavigation>
+			https://github.com/db-ui/mono/blob/main/packages/components/src/components/navigation/docs/Vue.md
+		</DBNavigation>
 	</DBHeader>
 </template>
 ```

packages/components/src/components/main-navigation/docs/Angular.md → packages/components/src/components/navigation/docs/Angular.md

@@ -6,15 +6,12 @@ For general installation and configuration look at the [ngx-components](https://
 
 ```ts app.component.ts
 // app.component.ts
-import { DBMainNavigation } from '@db-ui/ngx-components';
+import { DBNavigation } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [
-	// ...,
-    DBMainNavigation
-  ],
+  imports: [..., DBNavigation],
   // ...
 })
 ```
@@ -24,7 +21,7 @@ import { DBMainNavigation } from '@db-ui/ngx-components';
 ```html app.component.html
 <!-- app.component.html -->
 
-<db-main-navigation>
+<db-navigation>
 	<db-navigation-item [active]="true">
 		<ng-container sub-navigation>
 			<db-navigation-item [active]="true">
@@ -62,7 +59,7 @@ import { DBMainNavigation } from '@db-ui/ngx-components';
 			<a href="#">Navi-Item 3</a>
 		</ng-container>
 	</db-navigation-item>
-</db-main-navigation>
+</db-navigation>
 ```
 
 ### Angular Router and active state handling

packages/components/src/components/main-navigation/docs/HTML.md → packages/components/src/components/navigation/docs/HTML.md

@@ -8,7 +8,7 @@ For general installation and configuration look at the [components](https://www.
 <!-- index.html -->
 ...
 <body>
-	<nav class="db-main-navigation">
+	<nav class="db-navigation">
 		<menu>
 			<li class="db-navigation-item" aria-current="page">
 				<button

packages/components/src/components/main-navigation/docs/Migration.md → packages/components/src/components/navigation/docs/Migration.md

@@ -7,9 +7,9 @@
 
 ### class
 
-| Before               | Status | After                | Description |
-| -------------------- | :----: | -------------------- | ----------- |
-| `cmp-mainnavigation` |   🔁   | `db-main-navigation` |             |
+| Before               | Status | After           | Description |
+| -------------------- | :----: | --------------- | ----------- |
+| `cmp-mainnavigation` |   🔁   | `db-navigation` |             |
 
 ### children
 

packages/components/src/components/main-navigation/docs/React.md → packages/components/src/components/navigation/docs/React.md

@@ -6,10 +6,10 @@ For general installation and configuration look at the [react-components](https:
 
 ```tsx App.tsx
 // App.tsx
-import { DBMainNavigation } from "@db-ui/react-components";
+import { DBNavigation } from "@db-ui/react-components";
 
 const App = () => (
-	<DBMainNavigation>
+	<DBNavigation>
 		<DBNavigationItem
 			active
 			slotSubNavigation={
@@ -43,7 +43,7 @@ const App = () => (
 		<DBNavigationItem disabled>
 			<a href="#">Navi-Item 3</a>
 		</DBNavigationItem>
-	</DBMainNavigation>
+	</DBNavigation>
 );
 
 export default App;

packages/components/src/components/main-navigation/docs/Vue.md → packages/components/src/components/navigation/docs/Vue.md

@@ -7,11 +7,11 @@ For general installation and configuration look at the [v-components](https://ww
 ```vue App.vue
 <!-- App.vue -->
 <script>
-import { DBMainNavigation, DBNavigationItem } from "@db-ui/v-components";
+import { DBNavigation, DBNavigationItem } from "@db-ui/v-components";
 </script>
 
 <template>
-	<DBMainNavigation>
+	<DBNavigation>
 		<DBNavigationItem :active="true">
 			Navi-Item 1
 			<template v-slot:sub-navigation>
@@ -38,7 +38,7 @@ import { DBMainNavigation, DBNavigationItem } from "@db-ui/v-components";
 		<DBNavigationItem :disabled="true">
 			<a href="#">Navi-Item 3</a>
 		</DBNavigationItem>
-	</DBMainNavigation>
+	</DBNavigation>
 </template>
 ```
 

packages/components/src/components/navigation/index.ts

@@ -0,0 +1 @@
+export { default as DBNavigation } from './navigation';

packages/components/src/components/navigation/model.ts

@@ -0,0 +1,9 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+
+export interface DBNavigationDefaultProps {}
+
+export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps;
+
+export interface DBNavigationDefaultState {}
+
+export type DBNavigationState = DBNavigationDefaultState & GlobalState;

packages/components/src/components/navigation/navigation-web-component.scss

@@ -0,0 +1 @@
+@forward "navigation";

packages/components/src/components/navigation/navigation.lite.tsx

@@ -0,0 +1,31 @@
+import { onMount, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import { DBNavigationProps, DBNavigationState } from './model';
+import { cls, uuid } from '../../utils';
+import { DEFAULT_ID } from '../../shared/constants';
+
+useMetadata({
+	isAttachedToShadowDom: true
+});
+
+export default function DBNavigation(props: DBNavigationProps) {
+	const ref = useRef<HTMLDivElement>(null);
+	// jscpd:ignore-start
+	const state = useStore<DBNavigationState>({
+		_id: DEFAULT_ID
+	});
+
+	onMount(() => {
+		state._id = props.id || 'navigation-' + uuid();
+	});
+
+	// jscpd:ignore-end
+
+	return (
+		<nav
+			ref={ref}
+			id={state._id}
+			class={cls('db-navigation', props.className)}>
+			<menu>{props.children}</menu>
+		</nav>
+	);
+}

packages/components/src/components/main-navigation/main-navigation.scss → packages/components/src/components/navigation/navigation.scss

@@ -4,7 +4,7 @@
 @use "../../styles/form-components";
 @use "../../styles/db-puls";
 
-.db-main-navigation {
+.db-navigation {
 	-webkit-tap-highlight-color: transparent; /* for removing the highlight */
 	inline-size: 100%;
 
@@ -29,7 +29,7 @@
 
 			.db-navigation-item-expand-button:is(button),
 			.db-navigation-item-expand-button > button {
-				// overwrite for main-navigation items
+				// overwrite for navigation items
 				@include screen-sizes.screen("md") {
 					&::after {
 						--db-icon-margin-start: #{variables.$db-spacing-fixed-sm};
@@ -49,7 +49,7 @@
 				}
 			}
 
-			// re overwrite for non main-navigation items
+			// re overwrite for non navigation items
 			& > menu {
 				.db-navigation-item-expand-button:is(button),
 				.db-navigation-item-expand-button > button {
@@ -75,7 +75,7 @@
 			&:has([aria-current="page"]),
 			&[aria-current="page"] {
 				menu {
-					// hide puls for non main-navigation items
+					// hide puls for non navigation items
 					:has([aria-current="page"]),
 					[aria-current="page"] {
 						&::after {

packages/components/src/components/main-navigation/main-navigation.spec.tsx → packages/components/src/components/navigation/navigation.spec.tsx

@@ -1,13 +1,13 @@
 import { test, expect } from '@playwright/experimental-ct-react';
 import AxeBuilder from '@axe-core/playwright';
 
-import { DBMainNavigation } from './index';
+import { DBNavigation } from './index';
 // @ts-ignore - vue can only find it with .ts as file ending
 import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
 import { DBNavigationItem } from '../navigation-item';
 
 const comp = (
-	<DBMainNavigation>
+	<DBNavigation>
 		<DBNavigationItem>
 			<a href="#">Test1</a>
 		</DBNavigationItem>
@@ -17,7 +17,7 @@ const comp = (
 		<DBNavigationItem>
 			<a href="#">Test3</a>
 		</DBNavigationItem>
-	</DBMainNavigation>
+	</DBNavigation>
 );
 
 const testComponent = () => {
@@ -27,19 +27,19 @@ const testComponent = () => {
 	});
 };
 
-test.describe('DBMainNavigation', () => {
+test.describe('DBNavigation', () => {
 	test.use({ viewport: DEFAULT_VIEWPORT });
 	testComponent();
 });
 
-test.describe('DBMainNavigation component A11y', () => {
-	test('DBMainNavigation should not have any automatically detectable accessibility issues', async ({
+test.describe('DBNavigation component A11y', () => {
+	test('DBNavigation should not have any automatically detectable accessibility issues', async ({
 		page,
 		mount
 	}) => {
 		await mount(comp);
 		const accessibilityScanResults = await new AxeBuilder({ page })
-			.include('.db-main-navigation')
+			.include('.db-navigation')
 			.analyze();
 
 		expect(accessibilityScanResults.violations).toEqual([]);

packages/components/src/index.ts

@@ -21,7 +21,7 @@ export * from './components/textarea';
 export * from './components/navigation-item';
 export * from './components/accordion';
 export * from './components/accordion-item';
-export * from './components/main-navigation';
+export * from './components/navigation';
 export * from './components/badge';
 export * from './components/popover';
 export * from './components/tooltip';

packages/components/src/styles/db-ui-components.scss

@@ -24,7 +24,7 @@
 @forward "../components/accordion/accordion";
 
 @forward "../components/accordion-item/accordion-item";
-@forward "../components/main-navigation/main-navigation";
+@forward "../components/navigation/navigation";
 
 @forward "../components/popover/popover";
 @forward "../components/tooltip/tooltip";
@@ -55,8 +55,8 @@ dbpopover,
 db-popover,
 dbtextarea,
 db-textarea,
-dbmain-navigation,
-db-main-navigation,
+dbnavigation,
+db-navigation,
 dbaccordion-item,
 db-accordion-item,
 dbaccordion,

showcases/angular-showcase/src/app/app.component.html

@@ -18,11 +18,11 @@
 			>
 				Showcase
 			</db-brand>
-			<db-main-navigation *dbNavigation>
+			<db-navigation *dbNavigation>
 				@for (item of navigationItems; track item.label) {
 					<app-nav-item [navItem]="item"> </app-nav-item>
 				}
-			</db-main-navigation>
+			</db-navigation>
 			<ng-container *dbMetaNavigation>
 				<db-select
 					variant="floating"