@db-ux/react-core-components 4.11.1 → 4.12.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @db-ux/react-core-components
 
+## 4.12.1
+
+### Patch Changes
+
+- fix(custom-select): dropdown with `dropdownWidth="auto"` now correctly sizes to content width and respects the trigger minimum width. Long option labels no longer get truncated: `auto` keeps them on a single line (dropdown grows to the longest option), while `fixed` and `full` wrap long labels onto new lines. - [see commit 68dedc3](https://github.com/db-ux-design-system/core-web/commit/68dedc33c324b48339d5bb73a85fdff3045ed059)
+
+- fix(drawer): prevent backdrop drag-close when selection starts inside content - [see commit b53ff8a](https://github.com/db-ux-design-system/core-web/commit/b53ff8a4f0a5350c5be41fad072e14797676bba7)
+
+## 4.12.0
+
+### Minor Changes
+
+- feat: emit spec-compliant ESM with explicit import extensions - [see commit 73808d6](https://github.com/db-ux-design-system/core-web/commit/73808d6ec80085451d72e5ad73eb154198a60558):
+
+    - The generated React, Vue and Web Component outputs now produce standards-compliant
+    - ESM: every relative import/export carries an explicit `.js` / `/index.js` (or `.vue`)
+    - extension, added during Mitosis generation. This resolves `ERR_UNSUPPORTED_DIR_IMPORT`
+    - in strict ESM environments such as Node.js native ESM and Vitest 4.
+    - The React output additionally compiles with `module`/`moduleResolution: "node16"`
+    - (plus `jsx: "react-jsx"` and `target: "es2022"`), so missing extensions are caught at
+    - compile time. As a result the emitted React JS uses the `react/jsx-runtime` transform
+    - and es2022 syntax (React 19 compatible).
+
 ## 4.11.1
 
 ### Patch Changes

package/dist/components/accordion/accordion.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBAccordion: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | keyof import("./model").DBAccordionDefaultProps> & import("./model").DBAccordionDefaultProps & import("../..").GlobalProps & React.RefAttributes<any>>;
+declare const DBAccordion: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../index.js").GlobalProps | keyof import("./model.js").DBAccordionDefaultProps> & import("./model.js").DBAccordionDefaultProps & import("../../index.js").GlobalProps & React.RefAttributes<any>>;
 export default DBAccordion;

package/dist/components/accordion/accordion.js

@@ -1,104 +1,85 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n } from "../../utils/index.js";
-import r from "../accordion-item/accordion-item.js";
-import { forwardRef as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-//#region src/components/accordion/accordion.tsx
-function f(i, f) {
-	let p = o(), m = f || s(f), [h, g] = c(() => ""), [_, v] = c(() => !1), [y, b] = c(() => !1);
-	function x() {
-		try {
-			return typeof i.items == "string" ? JSON.parse(i.items) : i.items;
-		} catch (e) {
-			console.error(e);
-		}
-		return [];
-	}
-	return a(() => {
-		v(!0), b(!0);
-	}, []), a(() => {
-		_ && m.current && (i.behavior === "single" ? i.name ? h !== i.name && g(i.name) : g(`accordion-${p}`) : g(""));
-	}, [
-		_,
-		i.name,
-		i.behavior
-	]), a(() => {
-		if (m.current) {
-			let e = m.current.getElementsByTagName("details");
-			if (e) for (let t of Array.from(e)) h === "" ? t.removeAttribute("name") : t.name = h ?? "";
-		}
-	}, [m.current, h]), a(() => {
-		if (m.current && y) {
-			if (i?.initOpenIndex && i.initOpenIndex.length > 0) {
-				let e = m.current.getElementsByTagName("details");
-				if (e) {
-					let t = i.behavior === "single" && i.initOpenIndex.length > 1 ? [i.initOpenIndex[0]] : i.initOpenIndex;
-					Array.from(e).forEach((e, n) => {
-						t?.includes(n) && (e.open = !0);
-					});
-				}
-			}
-			b(!1);
-		}
-	}, [
-		m.current,
-		y,
-		i.initOpenIndex
-	]), /* @__PURE__ */ d("ul", {
-		ref: m,
-		...e(i, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		id: i.id ?? i.propOverrides?.id,
-		...t(i, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		className: n("db-accordion", i.className),
-		"data-variant": i.variant,
-		children: [i.items ? null : /* @__PURE__ */ u(l, { children: i.children }), i.items ? /* @__PURE__ */ u(l, { children: x()?.map((e, t) => /* @__PURE__ */ u(r, {
-			headlinePlain: e.headlinePlain,
-			disabled: e.disabled,
-			text: e.text
-		}, `accordion-item-${t}`)) }) : null]
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls } from "../../utils/index.js";
+import DBAccordionItem from "../accordion-item/accordion-item.js";
+import { useId } from "react";
+function DBAccordionFn(props, component) {
+    const uuid = useId();
+    const _ref = component || useRef(component);
+    const [_name, set_name] = useState(() => "");
+    const [initialized, setInitialized] = useState(() => false);
+    const [_initOpenIndexDone, set_initOpenIndexDone] = useState(() => false);
+    function convertItems() {
+        try {
+            if (typeof props.items === "string") {
+                return JSON.parse(props.items);
+            }
+            return props.items;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        return [];
+    }
+    useEffect(() => {
+        setInitialized(true);
+        set_initOpenIndexDone(true);
+    }, []);
+    useEffect(() => {
+        // If we have a single behavior we first check for
+        // props.name otherwise for state_id
+        if (initialized && _ref.current) {
+            if (props.behavior === "single") {
+                if (props.name) {
+                    if (_name !== props.name) {
+                        set_name(props.name);
+                    }
+                }
+                else {
+                    set_name(`accordion-${uuid}`);
+                }
+            }
+            else {
+                set_name("");
+            }
+        }
+    }, [initialized, props.name, props.behavior]);
+    useEffect(() => {
+        if (_ref.current) {
+            const childDetails = _ref.current.getElementsByTagName("details");
+            if (childDetails) {
+                for (const details of Array.from(childDetails)) {
+                    if (_name === "") {
+                        details.removeAttribute("name");
+                    }
+                    else {
+                        details.name = _name ?? "";
+                    }
+                }
+            }
+        }
+    }, [_ref.current, _name]);
+    useEffect(() => {
+        if (_ref.current && _initOpenIndexDone) {
+            if (props?.initOpenIndex && props.initOpenIndex.length > 0) {
+                const childDetails = _ref.current.getElementsByTagName("details");
+                if (childDetails) {
+                    const initOpenIndex = props.behavior === "single" && props.initOpenIndex.length > 1
+                        ? [props.initOpenIndex[0]] // use only one index for behavior=single
+                        : props.initOpenIndex;
+                    Array.from(childDetails).forEach((details, index) => {
+                        if (initOpenIndex?.includes(index)) {
+                            details.open = true;
+                        }
+                    });
+                }
+            }
+            set_initOpenIndexDone(false);
+        }
+    }, [_ref.current, _initOpenIndexDone, props.initOpenIndex]);
+    return (_jsxs("ul", { ref: _ref, ...filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), id: props.id ?? props.propOverrides?.id, ...getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), className: cls("db-accordion", props.className), "data-variant": props.variant, children: [!props.items ? _jsx(_Fragment, { children: props.children }) : null, props.items ? (_jsx(_Fragment, { children: convertItems()?.map((item, index) => (_jsx(DBAccordionItem, { headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text }, `accordion-item-${index}`))) })) : null] }));
 }
-var p = i(f);
-//#endregion
-export { p as default };
+const DBAccordion = forwardRef(DBAccordionFn);
+export default DBAccordion;

package/dist/components/accordion/index.d.ts

@@ -1 +1 @@
-export { default as DBAccordion } from './accordion';
+export { default as DBAccordion } from './accordion.js';

package/dist/components/accordion/index.js

@@ -0,0 +1 @@
+export { default as DBAccordion } from './accordion.js';

package/dist/components/accordion/model.d.ts

@@ -1,5 +1,5 @@
-import type { GlobalProps, InitializedState } from '../../shared/model';
-import type { DBAccordionItemDefaultProps } from '../accordion-item/model';
+import type { GlobalProps, InitializedState } from '../../shared/model.js';
+import type { DBAccordionItemDefaultProps } from '../accordion-item/model.js';
 export declare const AccordionVariantList: readonly ["divider", "card"];
 export type AccordionVariantType = (typeof AccordionVariantList)[number];
 export declare const AccordionBehaviorList: readonly ["multiple", "single"];

package/dist/components/accordion/model.js

@@ -1,4 +1,2 @@
-//#region src/components/accordion/model.ts
-var e = ["divider", "card"], t = ["multiple", "single"];
-//#endregion
-export { t as AccordionBehaviorList, e as AccordionVariantList };
+export const AccordionVariantList = ['divider', 'card'];
+export const AccordionBehaviorList = ['multiple', 'single'];

package/dist/components/accordion-item/accordion-item.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "name" | "text" | "defaultOpen" | "open" | "disabled" | "headline" | "headlinePlain" | keyof import("../../shared/model").ToggleEventProps> & {
+declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "name" | "text" | "defaultOpen" | "open" | "disabled" | "headline" | "headlinePlain" | keyof import("../../shared/model.js").ToggleEventProps> & {
     defaultOpen?: boolean;
     open?: boolean | string;
     disabled?: boolean | string;
     headline?: any;
     headlinePlain?: string;
-} & import("../../shared/model").TextProps & import("../../shared/model").GlobalProps & import("../../shared/model").ToggleEventProps & import("../../shared/model").NameProps & React.RefAttributes<any>>;
+} & import("../../shared/model.js").TextProps & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").ToggleEventProps & import("../../shared/model.js").NameProps & React.RefAttributes<any>>;
 export default DBAccordionItem;

package/dist/components/accordion-item/accordion-item.js

@@ -1,91 +1,58 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, getBoolean as r, getBooleanAsString as i } from "../../utils/index.js";
-import { forwardRef as a, useEffect as o, useRef as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-//#region src/components/accordion-item/accordion-item.tsx
-function f(a, f) {
-	let p = f || s(f), [m, h] = c(() => !1), [g, _] = c(() => void 0), [v, y] = c(() => !1);
-	function b() {
-		if (p.current) {
-			let e = p.current.setAttribute;
-			p.current.setAttribute = (t, n) => {
-				e.call(p.current, t, n), t === "name" && _(n);
-			};
-		}
-	}
-	function x(e) {
-		e?.preventDefault();
-		let t = !m;
-		a.onToggle && a.onToggle(t), a.open === void 0 && h(t);
-	}
-	return o(() => {
-		a.defaultOpen && h(a.defaultOpen), y(!0);
-	}, []), o(() => {
-		p.current && v && b();
-	}, [p.current, v]), o(() => {
-		a.name && _(a.name);
-	}, [a.name]), o(() => {
-		let e = r(a.open, "open");
-		e !== void 0 && h(e);
-	}, [a.open]), /* @__PURE__ */ u("li", {
-		id: a.id ?? a.propOverrides?.id,
-		...t(a, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		className: n("db-accordion-item", a.className),
-		children: /* @__PURE__ */ d("details", {
-			"aria-disabled": i(a.disabled, "disabled"),
-			ref: p,
-			...e(a, [
-				"data-icon-variant",
-				"data-icon-variant-before",
-				"data-icon-variant-after",
-				"data-icon-weight",
-				"data-icon-weight-before",
-				"data-icon-weight-after",
-				"data-interactive",
-				"data-force-mobile",
-				"data-color",
-				"data-container-color",
-				"data-bg-color",
-				"data-on-bg-color",
-				"data-color-scheme",
-				"data-font-size",
-				"data-headline-size",
-				"data-divider",
-				"data-focus",
-				"data-font",
-				"data-density",
-				"onToggle"
-			]),
-			name: g,
-			open: m,
-			children: [/* @__PURE__ */ d("summary", {
-				onClick: (e) => x(e),
-				children: [a.headlinePlain ? /* @__PURE__ */ u(l, { children: a.headlinePlain }) : null, a.headlinePlain ? null : /* @__PURE__ */ u(l, { children: a.headline })]
-			}), /* @__PURE__ */ d("div", { children: [a.text ? /* @__PURE__ */ u(l, { children: a.text }) : null, a.children] })]
-		})
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBoolean, getBooleanAsString } from "../../utils/index.js";
+function DBAccordionItemFn(props, component) {
+    const _ref = component || useRef(component);
+    const [_open, set_open] = useState(() => false);
+    const [_name, set_name] = useState(() => undefined);
+    const [initialized, setInitialized] = useState(() => false);
+    function handleNameAttribute() {
+        if (_ref.current) {
+            const setAttribute = _ref.current.setAttribute;
+            _ref.current.setAttribute = (attribute, value) => {
+                setAttribute.call(_ref.current, attribute, value);
+                if (attribute === "name") {
+                    set_name(value);
+                }
+            };
+        }
+    }
+    function handleToggle(event) {
+        // We need this for react https://github.com/facebook/react/issues/15486#issuecomment-488028431
+        event?.preventDefault();
+        const newStateOpen = !_open;
+        if (props.onToggle) {
+            props.onToggle(newStateOpen);
+        }
+        if (props.open === undefined) {
+            set_open(newStateOpen);
+        }
+    }
+    useEffect(() => {
+        if (props.defaultOpen) {
+            set_open(props.defaultOpen);
+        }
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (_ref.current && initialized) {
+            handleNameAttribute();
+        }
+    }, [_ref.current, initialized]);
+    useEffect(() => {
+        if (props.name) {
+            set_name(props.name);
+        }
+    }, [props.name]);
+    useEffect(() => {
+        const nextOpen = getBoolean(props.open, "open");
+        if (nextOpen !== undefined) {
+            set_open(nextOpen);
+        }
+    }, [props.open]);
+    return (_jsx("li", { id: props.id ?? props.propOverrides?.id, ...getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), className: cls("db-accordion-item", props.className), children: _jsxs("details", { "aria-disabled": getBooleanAsString(props.disabled, "disabled"), ref: _ref, ...filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onToggle"]), name: _name, open: _open, children: [_jsxs("summary", { onClick: (event) => handleToggle(event), children: [props.headlinePlain ? _jsx(_Fragment, { children: props.headlinePlain }) : null, !props.headlinePlain ? _jsx(_Fragment, { children: props.headline }) : null] }), _jsxs("div", { children: [props.text ? _jsx(_Fragment, { children: props.text }) : null, props.children] })] }) }));
 }
-var p = a(f);
-//#endregion
-export { p as default };
+const DBAccordionItem = forwardRef(DBAccordionItemFn);
+export default DBAccordionItem;

package/dist/components/accordion-item/index.d.ts

@@ -1 +1 @@
-export { default as DBAccordionItem } from './accordion-item';
+export { default as DBAccordionItem } from './accordion-item.js';

package/dist/components/accordion-item/index.js

@@ -0,0 +1 @@
+export { default as DBAccordionItem } from './accordion-item.js';

package/dist/components/accordion-item/model.d.ts

@@ -1,4 +1,4 @@
-import type { GlobalProps, InitializedState, NameProps, NameState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model';
+import type { GlobalProps, InitializedState, NameProps, NameState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model.js';
 export type DBAccordionItemDefaultProps = {
     /**
      * Initial state for the accordion item

package/dist/components/accordion-item/model.js

@@ -0,0 +1 @@
+export {};

package/dist/components/badge/badge.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBBadge: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "semantic" | "text" | keyof import("./model").DBBadgeDefaultProps | "size" | "emphasis" | "wrap"> & import("./model").DBBadgeDefaultProps & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").SizeProps & import("../..").EmphasisProps & import("../..").TextProps & import("../..").WrapProps & React.RefAttributes<any>>;
+declare const DBBadge: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../index.js").GlobalProps | "semantic" | "text" | keyof import("./model.js").DBBadgeDefaultProps | "size" | "emphasis" | "wrap"> & import("./model.js").DBBadgeDefaultProps & import("../../index.js").GlobalProps & import("../../index.js").SemanticProps & import("../../index.js").SizeProps & import("../../index.js").EmphasisProps & import("../../index.js").TextProps & import("../../index.js").WrapProps & React.RefAttributes<any>>;
 export default DBBadge;

package/dist/components/badge/badge.js

@@ -1,74 +1,30 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, getBooleanAsString as r } from "../../utils/index.js";
-import "../../shared/constants.js";
-import { forwardRef as i, useEffect as a, useRef as o, useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-//#region src/components/badge/badge.tsx
-function d(i, d) {
-	let f = d || o(d), [p, m] = s(() => !1);
-	return a(() => {
-		m(!0);
-	}, []), a(() => {
-		if (f.current && p && i.placement?.startsWith("corner")) {
-			let e = f.current.parentElement;
-			e && e.localName.includes("badge") && (e = e.parentElement), e && (e.dataset.hasBadge = "true");
-		}
-	}, [f.current, p]), /* @__PURE__ */ u("span", {
-		ref: f,
-		...e(i, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		id: i.id ?? i.propOverrides?.id,
-		...t(i, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		className: n("db-badge", i.className),
-		"data-semantic": i.semantic,
-		"data-size": i.size,
-		"data-emphasis": i.emphasis,
-		"data-placement": i.placement,
-		"data-wrap": r(i.wrap, "wrap"),
-		"data-label": i.placement?.startsWith("corner") && (i.label ?? "LABEL SHOULD BE SET"),
-		children: [i.text ? /* @__PURE__ */ l(c, { children: i.text }) : null, i.children]
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_LABEL } from "../../shared/constants.js";
+import { cls, getBooleanAsString } from "../../utils/index.js";
+function DBBadgeFn(props, component) {
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (_ref.current && initialized) {
+            if (props.placement?.startsWith("corner")) {
+                let parent = _ref.current.parentElement;
+                if (parent && parent.localName.includes("badge")) {
+                    // Angular workaround
+                    parent = parent.parentElement;
+                }
+                if (parent) {
+                    parent.dataset["hasBadge"] = "true";
+                }
+            }
+        }
+    }, [_ref.current, initialized]);
+    return (_jsxs("span", { ref: _ref, ...filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), id: props.id ?? props.propOverrides?.id, ...getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), className: cls("db-badge", props.className), "data-semantic": props.semantic, "data-size": props.size, "data-emphasis": props.emphasis, "data-placement": props.placement, "data-wrap": getBooleanAsString(props.wrap, "wrap"), "data-label": props.placement?.startsWith("corner") && (props.label ?? DEFAULT_LABEL), children: [props.text ? _jsx(_Fragment, { children: props.text }) : null, props.children] }));
 }
-var f = i(d);
-//#endregion
-export { f as default };
+const DBBadge = forwardRef(DBBadgeFn);
+export default DBBadge;

package/dist/components/badge/index.d.ts

@@ -1 +1 @@
-export { default as DBBadge } from './badge';
+export { default as DBBadge } from './badge.js';

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export { default as DBBadge } from './badge.js';

package/dist/components/badge/model.d.ts

@@ -1,4 +1,4 @@
-import type { EmphasisProps, GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TextProps, WrapProps } from '../../shared/model';
+import type { EmphasisProps, GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TextProps, WrapProps } from '../../shared/model.js';
 export declare const BadgePlacementList: readonly ["inline", "corner-top-left", "corner-top-right", "corner-center-left", "corner-center-right", "corner-bottom-left", "corner-bottom-right"];
 export type BadgePlacementType = (typeof BadgePlacementList)[number];
 export type DBBadgeDefaultProps = {

package/dist/components/badge/model.js

@@ -1,12 +1 @@
-//#region src/components/badge/model.ts
-var e = [
-	"inline",
-	"corner-top-left",
-	"corner-top-right",
-	"corner-center-left",
-	"corner-center-right",
-	"corner-bottom-left",
-	"corner-bottom-right"
-];
-//#endregion
-export { e as BadgePlacementList };
+export const BadgePlacementList = ['inline', 'corner-top-left', 'corner-top-right', 'corner-center-left', 'corner-center-right', 'corner-bottom-left', 'corner-bottom-right'];

package/dist/components/brand/brand.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBBrand: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "text" | "hideLogo" | "icon" | "showIcon"> & import("./model").DBBrandDefaultProps & import("../..").GlobalProps & import("../..").IconProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
+declare const DBBrand: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../index.js").GlobalProps | "text" | "hideLogo" | "icon" | "showIcon"> & import("./model.js").DBBrandDefaultProps & import("../../index.js").GlobalProps & import("../../index.js").IconProps & import("../../index.js").ShowIconProps & import("../../index.js").TextProps & React.RefAttributes<any>>;
 export default DBBrand;