Merge branch 'main' into 2776-optimizing-scss-code

output/vue/package.json

@@ -38,7 +38,7 @@
     "test:components": "playwright test -c playwright.config.ts"
   },
   "dependencies": {
-    "vue": "^3.4.29"
+    "vue": "^3.4.30"
   },
   "devDependencies": {
     "@playwright/experimental-ct-vue": "1.44.1",

packages/components/src/components/badge/badge.lite.tsx

@@ -1,14 +1,45 @@
-import { useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+	onMount,
+	onUpdate,
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { DBBadgeProps, DBBadgeState } from './model';
 import { cls } from '../../utils';
+import { DEFAULT_LABEL } from '../../shared/constants';
 
 useMetadata({
 	isAttachedToShadowDom: true
 });
 
 export default function DBBadge(props: DBBadgeProps) {
 	const ref = useRef<HTMLSpanElement>(null);
-	const state = useStore<DBBadgeState>({});
+	const state = useStore<DBBadgeState>({
+		initialized: false
+	});
+
+	onMount(() => {
+		state.initialized = true;
+	});
+
+	onUpdate(() => {
+		if (ref && state.initialized) {
+			if (props.placement?.startsWith('corner')) {
+				let parent = ref.parentElement;
+
+				if (parent && parent.localName.includes('badge')) {
+					// Angular workaround
+					parent = parent.parentElement;
+				}
+
+				if (parent) {
+					parent.setAttribute('data-has-badge', 'true');
+				}
+			}
+		}
+	}, [ref, state.initialized]);
 
 	return (
 		<span
@@ -18,7 +49,11 @@ export default function DBBadge(props: DBBadgeProps) {
 			data-semantic={props.semantic}
 			data-size={props.size}
 			data-emphasis={props.emphasis}
-			data-placement={props.placement}>
+			data-placement={props.placement}
+			data-label={
+				props.placement?.startsWith('corner') &&
+				(props.label ?? DEFAULT_LABEL)
+			}>
 			{props.children}
 		</span>
 	);