@db-ux/react-core-components 4.9.1 → 4.10.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/react-core-components
 
+## 4.10.0
+
+### Minor Changes
+
+- feat(`DBAccordionItem`): add `open` prop to control the expanded state of an accordion item programmatically. - [see commit 8e7c85d](https://github.com/db-ux-design-system/core-web/commit/8e7c85dfba9e0b013fce9db2151545b8f336a29a)
+
+- refactor(form components): replace hard 25ch label width limit with customizable CSS variable `--db-label-max-size` (defaults to `100%`). To restore the previous behavior, set `--db-label-max-size: 25ch;` in your project styles. - [see commit 08b1234](https://github.com/db-ux-design-system/core-web/commit/08b1234342e3c0d622116d528a979ff53d7e2356)
+
 ## 4.9.1
 
 ### Patch Changes
@@ -207,7 +215,7 @@ _version bump_
 
 - fix: set DBTabItem internal state `_selected` correctly - [see commit f7625cb](https://github.com/db-ux-design-system/core-web/commit/f7625cbd9d64513527e826c9d2c1ef42b2734a4b):
 
-                    - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
+                              - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
 
 ## 4.2.1
 

package/README.md

@@ -6,49 +6,83 @@
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)
 
 A React library containing all styles & components of [DB UX Design System (technical components)](https://github.com/db-ux-design-system/core-web).
-
-> **Note:** Find more information about specific components [here](https://design-system.deutschebahn.com/core-web/review/main)
+We also provide more information about specific components. This information is in our [Design System documentation](https://design-system.deutschebahn.com/documentation/get-started/).
 
 ## Install
 
 ```shell
-npm i @db-ux/react-core-components
+pnpm add @db-ux/react-core-components @db-ux/core-components @db-ux/core-foundations --save-dev
 ```
 
-> **Note:** This will install [`@db-ux/core-foundations`](https://www.npmjs.com/package/@db-ux/core-foundations) and [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) as well which contains the `css`/`scss` files
-
 ## Styling Dependencies
 
-Import the styles in scss or css. Based on your technology the file names could be different.
+### Vite Plugin
+
+If you're using Vite, you can use the [`@db-ux/core-vite-plugin`](https://www.npmjs.com/package/@db-ux/core-vite-plugin) which simplifies the CSS setup to a single import.
+
+```shell
+pnpm add @db-ux/core-vite-plugin --save-dev
+```
 
-- Default (relative): points to `../assets`
-- Rollup (rollup): points to `@db-ux/core-foundations/assets`
-- Webpack (webpack): points to `~@db-ux/core-foundations/assets`
+Add the plugin to your `vite.config.ts`:
 
-<details>
-  <summary><strong>SCSS</strong></summary>
+```ts
+import { defineConfig } from "vite";
+import dbUxPlugin from "@db-ux/core-vite-plugin";
 
-```scss
-// index.scss
-@forward "@db-ux/core-foundations/build/styles/theme/rollup"; // Palette tokens
-@forward "@db-ux/core-foundations/build/styles/bundle"; // Semantic tokens
-@forward "@db-ux/core-foundations/build/styles/icons/rollup"; // Icon fonts
-@forward "@db-ux/core-components/build/styles/rollup"; // Component styling
+export default defineConfig({
+	plugins: [dbUxPlugin()]
+});
 ```
 
-</details>
-<details>
-  <summary><strong>CSS</strong></summary>
+Then import the plugin in your CSS file:
 
-```tsx
-// main.tsx — order matters!
-import "@db-ux/core-foundations/build/styles/theme/rollup.css"; // Palette tokens
-import "@db-ux/core-foundations/build/styles/bundle.css"; // Semantic tokens
-import "@db-ux/core-foundations/build/styles/icons/rollup.css"; // Icon fonts
-import "@db-ux/core-components/build/styles/rollup.css"; // Component styling
+```css
+/* index.css */
+@import "@db-ux/core-vite-plugin/index.css";
+```
+
+📖 **[Learn more about `@db-ux/core-vite-plugin` node package](https://www.npmjs.com/package/@db-ux/core-vite-plugin)**
+
+### PostCSS Plugin (recommended)
+
+We recommend using the [`@db-ux/core-postcss-plugin`](https://www.npmjs.com/package/@db-ux/core-postcss-plugin) to reduce your bundle size. It flattens CSS custom properties by resolving `var()`, `calc()`, `color-mix()`, and `light-dark()` at build time, removing unused declarations.
+
+```shell
+pnpm add @db-ux/core-postcss-plugin --save-dev
+```
+
+Configure it in `vite.config.ts`:
+
+```ts
+import { defineConfig } from "vite";
+import { dbUxFlatten } from "@db-ux/core-postcss-plugin";
+
+export default defineConfig({
+	css: {
+		transformer: "postcss", // required for Vite 8+ (default: 'lightningcss')
+		postcss: {
+			plugins: [dbUxFlatten()]
+		}
+	}
+});
 ```
 
-</details>
+📖 **[Learn more about `@db-ux/core-postcss-plugin` node package](https://www.npmjs.com/package/@db-ux/core-postcss-plugin)**
+
+### Manual CSS Setup
+
+If you're not using Vite or prefer manual setup, import the styles in your main CSS file:
+
+```css
+/* index.css */
+@layer whitelabel-theme, db-ux;
+/* You may want to include another theme here, this is a whitelabel theme! So instead of including the following line of code, please have a look at the DB Theme section */
+@import "@db-ux/core-foundations/build/styles/theme/rollup.css"
+	layer(whitelabel-theme);
+
+@import "@db-ux/core-components/build/styles/bundle.css" layer(db-ux);
+```
 
 ### Vite 8
 
@@ -86,8 +120,6 @@ export default defineConfig({
 });
 ```
 
-> **Note:** The `@db-ux/core-components/build/styles/relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
-
 ### Next 16
 
 Starting with Next 16, the default CSS minifier was changed to [LightningCSS](https://lightningcss.dev/), which provides buggy transformations for modern CSS features used by the DB UX Design System (e.g. `light-dark()` CSS function). We might provide a specific configuration necessary to mitigate those problems in the near future. To keep CSS output stable in the meantime, configure `next.config.ts` like this:
@@ -116,10 +148,11 @@ In case that you're building a website or application for Deutsche Bahn, you'll
 ## Usage
 
 ```tsx
-import { DBButton } from '@db-ux/react-core-components';
-...
-<DBButton icon="x_placeholder" onClick={()=>{console.log("Test")}}>Test</DBButton>
-...
+import { DBButton } from "@db-ux/react-core-components";
+
+<DBButton variant="brand" onClick={() => console.log("clicked")}>
+	Add item to cart
+</DBButton>;
 ```
 
 ## AI Agent Support
@@ -136,7 +169,7 @@ npx @db-ux/agent-cli
 
 This will create or update `.github/copilot-instructions.md` with component documentation based on your installed `@db-ux` packages, helping AI agents provide better suggestions.
 
-📖 **[Learn more about `@db-ux/agent-cli` node package](packages/agent-cli/README.md)**
+📖 **[Learn more about `@db-ux/agent-cli` node package](https://www.npmjs.com/package/@db-ux/agent-cli)**
 
 ## Code Quality
 
@@ -145,7 +178,7 @@ To enforce correct usage of DB UX Design System components in your React project
 ### Installation
 
 ```shell
-npm install eslint @db-ux/core-eslint-plugin @typescript-eslint/parser --save-dev
+pnpm add eslint @db-ux/core-eslint-plugin @typescript-eslint/parser --save-dev
 ```
 
 ### Setup
@@ -176,6 +209,35 @@ export default [
 
 📖 **[Learn more about `@db-ux/core-eslint-plugin` node package](https://www.npmjs.com/package/@db-ux/core-eslint-plugin)**
 
+## Stylelint
+
+To validate correct usage of DB UX Design System tokens in your CSS/SCSS, use the [`@db-ux/core-stylelint`](https://www.npmjs.com/package/@db-ux/core-stylelint) plugin.
+
+### Installation
+
+```shell
+pnpm add stylelint @db-ux/core-stylelint --save-dev
+```
+
+### Setup
+
+Add to your `.stylelintrc.json`:
+
+```json
+{
+	"plugins": ["@db-ux/core-stylelint"],
+	"rules": {
+		"db-ux/use-spacings": [true],
+		"db-ux/use-sizing": [true],
+		"db-ux/use-border-width": [true],
+		"db-ux/use-border-radius": [true],
+		"db-ux/use-border-color": [true]
+	}
+}
+```
+
+📖 **[Learn more about `@db-ux/core-stylelint` node package](https://www.npmjs.com/package/@db-ux/core-stylelint)**
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.

package/dist/components/accordion/accordion.js

@@ -1,88 +1,104 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls } from "../../utils";
-import DBAccordionItem from "../accordion-item/accordion-item";
-import { useId } from "react";
-function DBAccordionFn(props, component) {
-    var _a, _b, _c;
-    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) {
-            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 !== null && _name !== void 0 ? _name : "";
-                    }
-                }
-            }
-        }
-    }, [_ref.current, _name]);
-    useEffect(() => {
-        if (_ref.current && _initOpenIndexDone) {
-            if ((props === null || props === void 0 ? void 0 : 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 === null || initOpenIndex === void 0 ? void 0 : initOpenIndex.includes(index)) {
-                            details.open = true;
-                        }
-                    });
-                }
-            }
-            set_initOpenIndexDone(false);
-        }
-    }, [_ref.current, _initOpenIndexDone, props.initOpenIndex]);
-    return (React.createElement("ul", Object.assign({ 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: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.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 }),
-        !props.items ? React.createElement(React.Fragment, null, props.children) : null,
-        props.items ? (React.createElement(React.Fragment, null, (_c = convertItems()) === null || _c === void 0 ? void 0 : _c.map((item, index) => (React.createElement(DBAccordionItem, { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text }))))) : null));
+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]
+	});
 }
-const DBAccordion = forwardRef(DBAccordionFn);
-export default DBAccordion;
+var p = i(f);
+//#endregion
+export { p as default };

package/dist/components/accordion/model.js

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

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

@@ -1,6 +1,7 @@
 import * as React from "react";
-declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "name" | "text" | "defaultOpen" | "disabled" | "headline" | "headlinePlain" | keyof import("../../shared/model").ToggleEventProps> & {
+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> & {
     defaultOpen?: boolean;
+    open?: boolean | string;
     disabled?: boolean | string;
     headline?: any;
     headlinePlain?: string;

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

@@ -1,58 +1,91 @@
 "use client";
-import * as React from "react";
-import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString } from "../../utils";
-function DBAccordionItemFn(props, component) {
-    var _a, _b;
-    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 === null || event === void 0 ? void 0 : event.preventDefault();
-        const newStateOpen = !_open;
-        if (props.onToggle) {
-            props.onToggle(newStateOpen);
-        }
-        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]);
-    return (React.createElement("li", Object.assign({ id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.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) }),
-        React.createElement("details", Object.assign({ "aria-disabled": getBooleanAsString(props.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 }),
-            React.createElement("summary", { onClick: (event) => handleToggle(event) },
-                props.headlinePlain ? React.createElement(React.Fragment, null, props.headlinePlain) : null,
-                !props.headlinePlain ? React.createElement(React.Fragment, null, props.headline) : null),
-            React.createElement("div", null,
-                props.text ? React.createElement(React.Fragment, null, props.text) : null,
-                props.children))));
+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),
+			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] })]
+		})
+	});
 }
-const DBAccordionItem = forwardRef(DBAccordionItemFn);
-export default DBAccordionItem;
+var p = a(f);
+//#endregion
+export { p as default };

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

@@ -4,6 +4,10 @@ export type DBAccordionItemDefaultProps = {
      * Initial state for the accordion item
      */
     defaultOpen?: boolean;
+    /**
+     * State for the accordion item
+     */
+    open?: boolean | string;
     /**
      * The disabled attribute can be set to keep a user from clicking on the element.
      */