diff --git a/packages/components/src/components/accordion/model.ts b/packages/components/src/components/accordion/model.ts
index 3a7c1aebb15b..6569d4c8e951 100644
--- a/packages/components/src/components/accordion/model.ts
+++ b/packages/components/src/components/accordion/model.ts
@@ -1,7 +1,7 @@
 import { GlobalProps, GlobalState, InitializedState } from '../../shared/model';
 import { DBAccordionItemDefaultProps } from '../accordion-item/model';
 
-export const AccordionVariantList = ['default', 'card'] as const;
+export const AccordionVariantList = ['divider', 'card'] as const;
 export type AccordionVariantType = (typeof AccordionVariantList)[number];
 
 export const AccordionBehaviourList = ['multiple', 'single'] as const;
@@ -34,7 +34,7 @@ export type DBAccordionDefaultProps = {
 
 	/**
 	 * Defines the display of the accordion and the items:
-	 * "default": with a dividing line between the items
+	 * "divider": with a dividing line between the items
 	 * "card": w/o dividing line, but items are shown in the card variant
 	 */
 	variant?: AccordionVariantType;
diff --git a/packages/components/src/components/card/model.ts b/packages/components/src/components/card/model.ts
index 24b430615780..2c02e82b9db6 100644
--- a/packages/components/src/components/card/model.ts
+++ b/packages/components/src/components/card/model.ts
@@ -6,7 +6,7 @@ import {
 	SpacingProps
 } from '../../shared/model';
 
-export const CardBehaviourList = ['default', 'interactive'] as const;
+export const CardBehaviourList = ['static', 'interactive'] as const;
 export type CardBehaviourType = (typeof CardBehaviourList)[number];
 
 export const CardElevationLevelList = ['1', '2', '3'] as const;
diff --git a/packages/components/src/components/header/header.scss b/packages/components/src/components/header/header.scss
index cbf125493cbd..3a6916a26e5f 100644
--- a/packages/components/src/components/header/header.scss
+++ b/packages/components/src/components/header/header.scss
@@ -18,6 +18,11 @@
 		--db-drawer-max-width: #{screen-sizes.$db-breakpoint-sm};
 	}
 
+	&[data-width="small"] {
+		margin-inline: auto;
+		max-inline-size: screen-sizes.$db-breakpoint-sm;
+	}
+
 	&[data-width="medium"] {
 		margin-inline: auto;
 		max-inline-size: screen-sizes.$db-breakpoint-md;
diff --git a/packages/components/src/components/popover/popover.lite.tsx b/packages/components/src/components/popover/popover.lite.tsx
index 1f3a51875ea0..e024ef8ec2ab 100644
--- a/packages/components/src/components/popover/popover.lite.tsx
+++ b/packages/components/src/components/popover/popover.lite.tsx
@@ -97,7 +97,7 @@ export default function DBPopover(props: DBPopoverProps) {
 				class="db-popover-content"
 				data-spacing={props.spacing}
 				data-gap={getBooleanAsString(props.gap)}
-				data-animation={props.animation}
+				data-animation={getBooleanAsString(props.animation ?? true)}
 				data-open={props.open}
 				data-delay={props.delay}
 				data-width={props.width}
diff --git a/packages/components/src/components/section/section.scss b/packages/components/src/components/section/section.scss
index 012f4bacf69e..ea30027a6c24 100644
--- a/packages/components/src/components/section/section.scss
+++ b/packages/components/src/components/section/section.scss
@@ -10,6 +10,16 @@ $default-section-padding-inline: variables.$db-spacing-fixed-md;
 		padding-inline: $default-section-padding-inline;
 	}
 
+	&[data-width="small"] {
+		padding-inline: max(
+			calc(
+				#{$default-section-padding-inline} +
+					(100vw - #{screen-sizes.$db-breakpoint-sm}) / 2
+			),
+			#{$default-section-padding-inline}
+		);
+	}
+
 	&[data-width="medium"] {
 		padding-inline: max(
 			calc(
diff --git a/packages/components/src/components/tooltip/model.ts b/packages/components/src/components/tooltip/model.ts
index 918d2cc03fdc..f548477d274e 100644
--- a/packages/components/src/components/tooltip/model.ts
+++ b/packages/components/src/components/tooltip/model.ts
@@ -9,11 +9,8 @@ import {
 	PopoverState
 } from '../../shared/model';
 
-export const TooltipVariantList = ['with arrow', 'basic'] as const;
-export type TooltipVariantType = (typeof TooltipVariantList)[number];
-
 export type DBTooltipDefaultProps = {
-	variant?: TooltipVariantType;
+	showArrow?: boolean;
 };
 
 export type DBTooltipProps = DBTooltipDefaultProps &
diff --git a/packages/components/src/components/tooltip/tooltip.lite.tsx b/packages/components/src/components/tooltip/tooltip.lite.tsx
index 21a4177a3fcc..f8484a1d72a3 100644
--- a/packages/components/src/components/tooltip/tooltip.lite.tsx
+++ b/packages/components/src/components/tooltip/tooltip.lite.tsx
@@ -6,7 +6,7 @@ import {
 	useStore
 } from '@builder.io/mitosis';
 import { DBTooltipProps, DBTooltipState } from './model';
-import { cls, handleDataOutside, uuid } from '../../utils';
+import { cls, getBooleanAsString, handleDataOutside, uuid } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 import { DEFAULT_ID } from '../../shared/constants';
 
@@ -65,10 +65,10 @@ export default function DBTooltip(props: DBTooltipProps) {
 			class={cls('db-tooltip', props.className)}
 			id={state._id}
 			data-emphasis={props.emphasis}
-			data-animation={props.animation}
+			data-animation={getBooleanAsString(props.animation ?? true)}
 			data-delay={props.delay}
 			data-width={props.width}
-			data-variant={props.variant}
+			data-show-arrow={getBooleanAsString(props.showArrow ?? true)}
 			data-placement={props.placement}
 			// TODO: clarify this attribute and we need to set it statically
 			data-gap="true"
diff --git a/packages/components/src/components/tooltip/tooltip.scss b/packages/components/src/components/tooltip/tooltip.scss
index f5f0b5e19994..7b686606211c 100644
--- a/packages/components/src/components/tooltip/tooltip.scss
+++ b/packages/components/src/components/tooltip/tooltip.scss
@@ -35,7 +35,7 @@ $tooltip-arrow-shadow-size: variables.$db-sizing-2xs;
 	}
 
 	// Arrow
-	&:not([data-variant="basic"]) {
+	&[data-show-arrow="true"] {
 		&::after {
 			@extend %component-border;
 
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
index f9d21fe07e90..bf2a2b346eae 100644
--- a/packages/components/src/shared/model.ts
+++ b/packages/components/src/shared/model.ts
@@ -174,7 +174,7 @@ export type WidthProps = {
 	width?: WidthType;
 };
 
-export const MaxWidthList = ['full', 'medium', 'large'] as const;
+export const MaxWidthList = ['full', 'medium', 'large', 'small'] as const;
 export type MaxWidthType = (typeof MaxWidthList)[number];
 
 export type ContainerWidthProps = {
@@ -186,8 +186,6 @@ export type ContainerWidthProps = {
 
 export const PopoverDelayList = ['none', 'slow', 'fast'] as const;
 export type PopoverDelayType = (typeof PopoverDelayList)[number];
-export const PopoverAnimationList = ['enabled', 'disabled'] as const;
-export type PopoverAnimationType = (typeof PopoverAnimationList)[number];
 export const PopoverWidthList = ['auto', 'fixed'] as const;
 export type PopoverWidthType = (typeof PopoverWidthList)[number];
 export type PopoverProps = {
@@ -198,7 +196,7 @@ export type PopoverProps = {
 	/**
 	 * Disable animation
 	 */
-	animation?: PopoverAnimationType;
+	animation?: boolean;
 	/**
 	 * Use fixed with for default max-width
 	 */
diff --git a/packages/components/src/styles/internal/_popover-component.scss b/packages/components/src/styles/internal/_popover-component.scss
index b1a0090a9359..24690ed4ba3a 100644
--- a/packages/components/src/styles/internal/_popover-component.scss
+++ b/packages/components/src/styles/internal/_popover-component.scss
@@ -132,7 +132,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 }
 
 @mixin get-popover-show() {
-	&[data-animation="disabled"] {
+	&[data-animation="false"] {
 		opacity: 1;
 		transform: translate(
 			var(--db-popover-center-x, 0),
@@ -141,7 +141,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 	}
 
 	@media screen and (prefers-reduced-motion: no-preference) {
-		&:not([data-animation="disabled"]) {
+		&[data-animation="true"] {
 			animation: popover-animation
 				#{variables.$db-transition-straight-emotional} normal both;
 
diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
index 3e8195f0a8ca..d4d27f9ca9c4 100644
--- a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
+++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
@@ -13,6 +13,7 @@
 		<ul>
 			<db-navigation-item
 				[icon]="exampleProps?.icon"
+				[showIcon]="exampleProps?.showIcon"
 				[width]="exampleProps?.width"
 				[disabled]="exampleProps?.disabled"
 				[active]="exampleProps?.active"
diff --git a/showcases/react-showcase/src/components/navigation-item/index.tsx b/showcases/react-showcase/src/components/navigation-item/index.tsx
index c0aebf164d94..e2813b872bd2 100644
--- a/showcases/react-showcase/src/components/navigation-item/index.tsx
+++ b/showcases/react-showcase/src/components/navigation-item/index.tsx
@@ -11,7 +11,8 @@ const getNavigationItem = ({
 	disabled,
 	active,
 	width,
-	areaPopup
+	areaPopup,
+	showIcon
 }: DBNavigationItemProps & { areaPopup: boolean }) => (
 	<ul>
 		<DBNavigationItem
@@ -23,6 +24,7 @@ const getNavigationItem = ({
 				// eslint-disable-next-line no-alert
 				alert(children.toString());
 			}}
+			showIcon={showIcon}
 			subNavigation={
 				areaPopup && (
 					<ul>
diff --git a/showcases/react-showcase/src/components/tooltip/index.tsx b/showcases/react-showcase/src/components/tooltip/index.tsx
index 04eb996fd38b..9745a8bac324 100644
--- a/showcases/react-showcase/src/components/tooltip/index.tsx
+++ b/showcases/react-showcase/src/components/tooltip/index.tsx
@@ -13,7 +13,7 @@ const getTooltip = ({
 	delay,
 	content,
 	animation,
-	variant
+	showArrow
 }: DBTooltipProps & { content: string }) => (
 	<DBButton>
 		{children}
@@ -23,7 +23,7 @@ const getTooltip = ({
 			placement={placement}
 			animation={animation}
 			delay={delay}
-			variant={variant}>
+			showArrow={showArrow}>
 			{content}
 		</DBTooltip>
 	</DBButton>
diff --git a/showcases/shared/accordion-item.json b/showcases/shared/accordion-item.json
index adf9cae7c37c..68ab339539e3 100644
--- a/showcases/shared/accordion-item.json
+++ b/showcases/shared/accordion-item.json
@@ -26,36 +26,38 @@
 		]
 	},
 	{
-		"name": "Interaction States",
+		"name": "Disabled",
 		"examples": [
 			{
-				"name": "Enabled (Default)/Hover/Pressed",
+				"name": "(Default) False",
 				"props": {
-					"headlinePlain": "Enabled (Default)/Hover/Pressed"
+					"headlinePlain": "(Default) False",
+					"disabled": false
 				}
 			},
 			{
-				"name": "Disabled",
+				"name": "True",
 				"props": {
-					"headlinePlain": "Disabled",
+					"headlinePlain": "True",
 					"disabled": true
 				}
 			}
 		]
 	},
 	{
-		"name": "Content States",
+		"name": "Open",
 		"examples": [
 			{
-				"name": "(Default) Collapsed",
+				"name": "(Default) False",
 				"props": {
-					"headlinePlain": "(Default) Collapsed"
+					"headlinePlain": "(Default) False",
+					"open": false
 				}
 			},
 			{
-				"name": "Open",
+				"name": "True",
 				"props": {
-					"headlinePlain": "Open",
+					"headlinePlain": "True",
 					"open": true
 				}
 			}
diff --git a/showcases/shared/accordion.json b/showcases/shared/accordion.json
index 79da28bcecf3..97ef18216352 100644
--- a/showcases/shared/accordion.json
+++ b/showcases/shared/accordion.json
@@ -70,10 +70,13 @@
 		],
 		"examples": [
 			{
-				"name": "background (default)"
+				"name": "(Default) Divider",
+				"props": {
+					"variant": "divider"
+				}
 			},
 			{
-				"name": "card",
+				"name": "Card",
 				"props": {
 					"variant": "card"
 				}
diff --git a/showcases/shared/card.json b/showcases/shared/card.json
index 8dc03d1cc67b..ccb581dd26ca 100644
--- a/showcases/shared/card.json
+++ b/showcases/shared/card.json
@@ -23,19 +23,19 @@
 		"name": "Elevation Level",
 		"examples": [
 			{
-				"name": "(Default) Level 1 - Adaptive",
+				"name": "(Default) Level 1",
 				"props": {
 					"elevationLevel": "1"
 				}
 			},
 			{
-				"name": "Level 2 - Adaptive",
+				"name": "Level 2",
 				"props": {
 					"elevationLevel": "2"
 				}
 			},
 			{
-				"name": "Level 3 - Adaptive",
+				"name": "Level 3",
 				"props": {
 					"elevationLevel": "3"
 				}
@@ -75,7 +75,10 @@
 		"name": "Behaviour",
 		"examples": [
 			{
-				"name": "(Default) Non interactive"
+				"name": "(Default) Static",
+				"props": {
+					"behaviour": "static"
+				}
 			},
 			{
 				"name": "Interactive",
diff --git a/showcases/shared/navigation-item.json b/showcases/shared/navigation-item.json
index 9974c4a25eed..7a83347cdac8 100644
--- a/showcases/shared/navigation-item.json
+++ b/showcases/shared/navigation-item.json
@@ -50,10 +50,13 @@
 		]
 	},
 	{
-		"name": "Interaction-States",
+		"name": "Disabled",
 		"examples": [
 			{
-				"name": "Enabled (Default)/Hover/Pressed",
+				"name": "(Default) False",
+				"props": {
+					"disabled": false
+				},
 				"children": [
 					{
 						"name": "a",
@@ -61,14 +64,14 @@
 						"props": {
 							"href": "#"
 						},
-						"content": "Enabled (Default)/Hover/Pressed"
+						"content": "(Default) False"
 					}
 				]
 			},
 			{
-				"name": "Active",
+				"name": "True",
 				"props": {
-					"active": true
+					"disabled": true
 				},
 				"children": [
 					{
@@ -77,14 +80,35 @@
 						"props": {
 							"href": "#"
 						},
-						"content": "Active"
+						"content": "True"
+					}
+				]
+			}
+		]
+	},
+	{
+		"name": "Active",
+		"examples": [
+			{
+				"name": "(Default) False",
+				"props": {
+					"active": false
+				},
+				"children": [
+					{
+						"name": "a",
+						"native": true,
+						"props": {
+							"href": "#"
+						},
+						"content": "(Default) False"
 					}
 				]
 			},
 			{
-				"name": "Disabled",
+				"name": "True",
 				"props": {
-					"disabled": true
+					"active": true
 				},
 				"children": [
 					{
@@ -93,17 +117,17 @@
 						"props": {
 							"href": "#"
 						},
-						"content": "Disabled"
+						"content": "True"
 					}
 				]
 			}
 		]
 	},
 	{
-		"name": "Content",
+		"name": "Expanded",
 		"examples": [
 			{
-				"name": "(Default) Text",
+				"name": "(Default) False",
 				"props": {
 					"areaPopup": false
 				},
@@ -114,14 +138,14 @@
 						"props": {
 							"href": "#"
 						},
-						"content": "(Default) Text"
+						"content": "(Default) False"
 					}
 				]
 			},
 			{
-				"name": "Text - Icon (Leading)",
+				"name": "True",
 				"props": {
-					"icon": "x_placeholder"
+					"areaPopup": true
 				},
 				"children": [
 					{
@@ -130,15 +154,20 @@
 						"props": {
 							"href": "#"
 						},
-						"content": "Text - Icon (Leading)"
+						"content": "True"
 					}
 				]
-			},
+			}
+		]
+	},
+	{
+		"name": "Show Icon",
+		"examples": [
 			{
-				"name": "Text - Icons (Leading, Chevron)",
+				"name": "(Default) False",
 				"props": {
 					"icon": "x_placeholder",
-					"areaPopup": true
+					"showIcon": false
 				},
 				"children": [
 					{
@@ -147,14 +176,15 @@
 						"props": {
 							"href": "#"
 						},
-						"content": "Text - Icons (Leading, Chevron)"
+						"content": "(Default) False"
 					}
 				]
 			},
 			{
-				"name": "Text - Icon (Chevron)",
+				"name": "True",
 				"props": {
-					"areaPopup": true
+					"icon": "x_placeholder",
+					"showIcon": true
 				},
 				"children": [
 					{
@@ -163,7 +193,7 @@
 						"props": {
 							"href": "#"
 						},
-						"content": "Text - Icon (Chevron)"
+						"content": "True"
 					}
 				]
 			}
diff --git a/showcases/shared/popover.json b/showcases/shared/popover.json
index 92155958e9be..c3c7b783efaf 100644
--- a/showcases/shared/popover.json
+++ b/showcases/shared/popover.json
@@ -206,7 +206,7 @@
 		]
 	},
 	{
-		"name": "Animations",
+		"name": "Animation",
 		"children": [
 			{
 				"name": "button",
@@ -219,30 +219,53 @@
 		],
 		"examples": [
 			{
-				"name": "(Default) Animation no delay",
+				"name": "(Default) True",
 				"props": {
-					"id": "popover-13"
+					"id": "popover-13",
+					"animation": true
 				}
 			},
 			{
-				"name": "Delay slow",
+				"name": "False",
 				"props": {
-					"delay": "slow",
-					"id": "popover-14"
+					"animation": false,
+					"id": "popover-16"
+				}
+			}
+		]
+	},
+	{
+		"name": "Delay",
+		"children": [
+			{
+				"name": "button",
+				"slot": "trigger"
+			},
+			{
+				"name": "button",
+				"content": "Inside Popover"
+			}
+		],
+		"examples": [
+			{
+				"name": "(Default) None",
+				"props": {
+					"id": "popover-133",
+					"delay": "none"
 				}
 			},
 			{
-				"name": "Delay fast",
+				"name": "Slow",
 				"props": {
-					"delay": "fast",
-					"id": "popover-15"
+					"delay": "slow",
+					"id": "popover-14"
 				}
 			},
 			{
-				"name": "No animation",
+				"name": "Fast",
 				"props": {
-					"animation": "disabled",
-					"id": "popover-16"
+					"delay": "fast",
+					"id": "popover-15"
 				}
 			}
 		]
diff --git a/showcases/shared/tooltip.json b/showcases/shared/tooltip.json
index 5ab3d8cfd652..e009d4dc9699 100644
--- a/showcases/shared/tooltip.json
+++ b/showcases/shared/tooltip.json
@@ -34,7 +34,7 @@
 		]
 	},
 	{
-		"name": "Variant",
+		"name": "Show Arrow",
 		"children": [
 			{
 				"name": "button"
@@ -42,17 +42,18 @@
 		],
 		"examples": [
 			{
-				"name": "(Default) With arrow",
+				"name": "(Default) True",
 				"props": {
 					"content": "Tooltip",
-					"id": "tooltip-04"
+					"id": "tooltip-04",
+					"showArrow": false
 				}
 			},
 			{
-				"name": "Basic",
+				"name": "False",
 				"props": {
 					"content": "Tooltip",
-					"variant": "basic",
+					"showArrow": false,
 					"id": "tooltip-05"
 				}
 			}
@@ -215,7 +216,7 @@
 		]
 	},
 	{
-		"name": "Animations",
+		"name": "Animation",
 		"children": [
 			{
 				"name": "button"
@@ -223,34 +224,53 @@
 		],
 		"examples": [
 			{
-				"name": "(Default) Animation no delay",
+				"name": "(Default) True",
 				"props": {
 					"content": "Tooltip",
-					"id": "tooltip-14"
+					"id": "tooltip-14",
+					"animation": true
 				}
 			},
 			{
-				"name": "Delay slow",
+				"name": "False",
 				"props": {
 					"content": "Tooltip",
-					"delay": "slow",
-					"id": "tooltip-15"
+					"animation": false,
+					"id": "tooltip-17"
+				}
+			}
+		]
+	},
+	{
+		"name": "Delay",
+		"children": [
+			{
+				"name": "button"
+			}
+		],
+		"examples": [
+			{
+				"name": "(Default) None",
+				"props": {
+					"content": "Tooltip",
+					"id": "tooltip-144",
+					"delay": "none"
 				}
 			},
 			{
-				"name": "Delay fast",
+				"name": "Slow",
 				"props": {
 					"content": "Tooltip",
-					"delay": "fast",
-					"id": "tooltip-16"
+					"delay": "slow",
+					"id": "tooltip-15"
 				}
 			},
 			{
-				"name": "No animation",
+				"name": "Fast",
 				"props": {
 					"content": "Tooltip",
-					"animation": "disabled",
-					"id": "tooltip-17"
+					"delay": "fast",
+					"id": "tooltip-16"
 				}
 			}
 		]
diff --git a/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue b/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
index ba7506e57237..de5ea1de77d0 100644
--- a/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
+++ b/showcases/vue-showcase/src/components/navigation-item/NavigationItem.vue
@@ -20,6 +20,7 @@ const log = (exampleName?: string) => {
 			<ul>
 				<DBNavigationItem
 					:icon="exampleProps?.icon"
+					:showIcon="exampleProps?.showIcon"
 					:width="exampleProps?.width"
 					:disabled="exampleProps?.disabled"
 					:active="exampleProps?.active"