@db-ux/react-core-components 4.4.3 → 4.5.1

package/dist/components/switch/switch.js

@@ -81,14 +81,25 @@ function DBSwitchFn(props, component) {
             }
         }
     }
+    function resetIds() {
+        var _a, _b, _c;
+        const mId = (_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `switch-${uuid}`;
+        set_id(mId);
+        set_messageId(`${mId}${DEFAULT_MESSAGE_ID_SUFFIX}`);
+        set_validMessageId(`${mId}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`);
+        set_invalidMessageId(`${mId}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`);
+    }
     useEffect(() => {
-        var _a;
-        set_id((_a = props.id) !== null && _a !== void 0 ? _a : `switch-${uuid}`);
-        set_messageId(`${_id}${DEFAULT_MESSAGE_ID_SUFFIX}`);
-        set_validMessageId(`${_id}${DEFAULT_VALID_MESSAGE_ID_SUFFIX}`);
-        set_invalidMessageId(`${_id}${DEFAULT_INVALID_MESSAGE_ID_SUFFIX}`);
+        resetIds();
         handleValidation();
+        set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
     }, []);
+    useEffect(() => {
+        var _a, _b;
+        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            resetIds();
+        }
+    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
     useEffect(() => {
         handleValidation();
     }, [
@@ -100,6 +111,12 @@ function DBSwitchFn(props, component) {
         props.invalidMessage,
         props.checked,
     ]);
+    useEffect(() => {
+        var _a;
+        set_invalidMessage(props.invalidMessage ||
+            ((_a = _ref.current) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
+            DEFAULT_INVALID_MESSAGE);
+    }, [_ref.current, props.invalidMessage]);
     useEffect(() => {
         if (_ref.current) {
             const defaultChecked = props.defaultChecked;
@@ -123,11 +140,11 @@ function DBSwitchFn(props, component) {
     }, []);
     return (React.createElement("div", Object.assign({ "data-visual-aid": getBooleanAsString(props.visualAid), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-variant": props.variant, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-custom-validity": props.validation }, 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-switch", props.className) }),
         React.createElement("label", { htmlFor: _id },
-            React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, 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"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-invalid": props.validation === "invalid" ? "true" : undefined, "aria-describedby": _descByIds, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-aid-icon-trailing": props.iconTrailing, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), onKeyDown: (event) => handleKeyDown(event) })),
+            React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, 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"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-invalid": props.validation === "invalid" ? "true" : undefined, "aria-describedby": _descByIds, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": (_b = props.iconLeading) !== null && _b !== void 0 ? _b : props.icon, "data-aid-icon-trailing": props.iconTrailing, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), onKeyDown: (event) => handleKeyDown(event) })),
             props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", semantic: "adaptive", id: _messageId, icon: props.messageIcon }, props.message)) : null,
-        hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_b = props.validMessage) !== null && _b !== void 0 ? _b : DEFAULT_VALID_MESSAGE)) : null,
-        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, (_c = _invalidMessage !== null && _invalidMessage !== void 0 ? _invalidMessage : props.invalidMessage) !== null && _c !== void 0 ? _c : DEFAULT_INVALID_MESSAGE),
+        hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, (_c = props.validMessage) !== null && _c !== void 0 ? _c : DEFAULT_VALID_MESSAGE)) : null,
+        React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),
         React.createElement("span", { "data-visually-hidden": "true", role: "status" }, _voiceOverFallback)));
 }
 const DBSwitch = forwardRef(DBSwitchFn);

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTabItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "name" | keyof import("../..").GlobalProps | "icon" | "showIcon" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | keyof import("../..").ChangeEventProps<HTMLInputElement> | "active" | keyof import("./model").DBTabItemDefaultProps> & import("../..").GlobalProps & import("./model").DBTabItemDefaultProps & import("../..").IconProps & import("../..").IconTrailingProps & import("../..").IconLeadingProps & import("../..").ShowIconLeadingProps & import("../..").ShowIconTrailingProps & import("../..").ActiveProps & import("../..").ChangeEventProps<HTMLInputElement> & import("../..").ShowIconProps & import("../..").NameProps & React.RefAttributes<any>>;
+declare const DBTabItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, keyof import("../..").GlobalProps | "name" | "icon" | "showIcon" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | keyof import("../..").ChangeEventProps<HTMLInputElement> | "active" | keyof import("./model").DBTabItemDefaultProps> & import("../..").GlobalProps & import("./model").DBTabItemDefaultProps & import("../..").IconProps & import("../..").IconTrailingProps & import("../..").IconLeadingProps & import("../..").ShowIconLeadingProps & import("../..").ShowIconTrailingProps & import("../..").ActiveProps & import("../..").ChangeEventProps<HTMLInputElement> & import("../..").ShowIconProps & import("../..").NameProps & React.RefAttributes<any>>;
 export default DBTabItem;

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

@@ -4,7 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, getBoolean, getBooleanAsString } from "../../utils";
 function DBTabItemFn(props, component) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const _ref = component || useRef(component);
     const [_selected, set_selected] = useState(() => false);
     const [_name, set_name] = useState(() => undefined);
@@ -69,8 +69,8 @@ function DBTabItemFn(props, component) {
         };
     }, []);
     return (React.createElement("li", Object.assign({ role: "none" }, 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-tab-item", props.className) }),
-        React.createElement("label", { htmlFor: props.id, "data-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-icon-trailing": props.iconTrailing, "data-show-icon": getBooleanAsString((_b = props.showIconLeading) !== null && _b !== void 0 ? _b : props.showIcon), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-no-text": getBooleanAsString(props.noText) },
-            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: getBoolean(props.disabled, "disabled"), "aria-selected": _selected, checked: getBoolean(props.checked, "checked"), 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"]), { name: _name, id: props.id, onInput: (event) => handleChange(event) })),
+        React.createElement("label", { htmlFor: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-icon-trailing": props.iconTrailing, "data-show-icon": getBooleanAsString((_d = props.showIconLeading) !== null && _d !== void 0 ? _d : props.showIcon), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-no-text": getBooleanAsString(props.noText) },
+            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: getBoolean(props.disabled, "disabled"), "aria-selected": _selected, checked: getBoolean(props.checked, "checked"), 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"]), { name: _name, id: (_e = props.id) !== null && _e !== void 0 ? _e : (_f = props.propOverrides) === null || _f === void 0 ? void 0 : _f.id, onInput: (event) => handleChange(event) })),
             props.label ? React.createElement(React.Fragment, null, props.label) : null,
             props.children)));
 }

package/dist/components/tab-list/tab-list.js

@@ -4,8 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBTabListFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
-    return (React.createElement("div", 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: props.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-tab-list", props.className) }),
+    return (React.createElement("div", 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-tab-list", props.className) }),
         React.createElement("ul", { role: "tablist" }, props.children)));
 }
 const DBTabList = forwardRef(DBTabListFn);

package/dist/components/tab-panel/tab-panel.js

@@ -4,9 +4,10 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, useEffect, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBTabPanelFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
     useEffect(() => { }, []);
-    return (React.createElement("section", Object.assign({ role: "tabpanel", 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"]), 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-tab-panel", props.className), id: props.id }),
+    return (React.createElement("section", Object.assign({ role: "tabpanel", 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"]), 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-tab-panel", props.className), id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }),
         props.content ? React.createElement(React.Fragment, null, props.content) : null,
         props.children));
 }

package/dist/components/tabs/tabs.js

@@ -9,7 +9,7 @@ import DBTabList from "../tab-list/tab-list";
 import DBTabPanel from "../tab-panel/tab-panel";
 import { useId } from "react";
 function DBTabsFn(props, component) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [_name, set_name] = useState(() => "");
@@ -168,11 +168,11 @@ function DBTabsFn(props, component) {
             set_resizeObserver(undefined);
         };
     }, []);
-    return (React.createElement("div", 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", "onTabSelect", "onIndexChange"]), { id: props.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-tabs", props.className), "data-orientation": props.orientation, "data-scroll-behavior": props.behavior, "data-alignment": (_a = props.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = props.width) !== null && _b !== void 0 ? _b : "auto", onInput: (event) => handleChange(event), onChange: (event) => handleChange(event) }),
+    return (React.createElement("div", 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", "onTabSelect", "onIndexChange"]), { 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-tabs", props.className), "data-orientation": props.orientation, "data-scroll-behavior": props.behavior, "data-alignment": (_c = props.alignment) !== null && _c !== void 0 ? _c : "start", "data-width": (_d = props.width) !== null && _d !== void 0 ? _d : "auto", onInput: (event) => handleChange(event), onChange: (event) => handleChange(event) }),
         showScrollLeft ? (React.createElement(DBButton, { className: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
         props.tabs ? (React.createElement(React.Fragment, null,
-            React.createElement(DBTabList, null, (_c = convertTabs()) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_d = convertTabs()) === null || _d === void 0 ? void 0 :
-            _d.map((tab, index) => (React.createElement(DBTabPanel, { key: props.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null,
+            React.createElement(DBTabList, null, (_e = convertTabs()) === null || _e === void 0 ? void 0 : _e.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_f = convertTabs()) === null || _f === void 0 ? void 0 :
+            _f.map((tab, index) => (React.createElement(DBTabPanel, { key: props.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null,
         showScrollRight ? (React.createElement(DBButton, { className: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: (event) => scroll() }, "Scroll right")) : null,
         props.children));
 }

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

@@ -1,4 +1,4 @@
-import { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
+import { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, NoTextProps, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
 export declare const TagBehaviorList: readonly ["static", "removable"];
 export type TagBehaviorType = (typeof TagBehaviorList)[number];
 export type DBTagEventsProps = {
@@ -18,10 +18,6 @@ export type DBTagDefaultProps = {
      *  - removable: add a remove button at the end of the tag
      */
     behavior?: TagBehaviorType | string;
-    /**
-     * Define the text next to the icon specified via the icon Property to get hidden.
-     */
-    noText?: boolean | string;
     /**
      * The removeButton attribute shows the cancel button.
      */
@@ -39,7 +35,7 @@ export type DBTagDefaultProps = {
      */
     value?: string;
 };
-export type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & EmphasisProps & ShowIconProps & ContentSlotProps & DBTagEventsProps;
+export type DBTagProps = DBTagDefaultProps & GlobalProps & IconProps & SemanticProps & OverflowProps & EmphasisProps & ShowIconProps & ContentSlotProps & DBTagEventsProps & NoTextProps;
 export type DBTagDefaultState = {
     getRemoveButtonText: () => string;
     handleRemove: (event?: ClickEvent<HTMLButtonElement> | void) => void;

package/dist/components/tag/tag.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | "semantic" | keyof import("../../shared/model").GlobalProps | "emphasis" | "icon" | "showIcon" | keyof import("./model").DBTagDefaultProps | "overflow" | keyof import("./model").DBTagEventsProps> & import("./model").DBTagDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").OverflowProps & import("../../shared/model").EmphasisProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ContentSlotProps & import("./model").DBTagEventsProps & React.RefAttributes<any>>;
+declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | keyof import("../../shared/model").GlobalProps | "semantic" | "emphasis" | "icon" | "showIcon" | "noText" | keyof import("./model").DBTagDefaultProps | "overflow" | keyof import("./model").DBTagEventsProps> & import("./model").DBTagDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").OverflowProps & import("../../shared/model").EmphasisProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ContentSlotProps & import("./model").DBTagEventsProps & import("../../shared/model").NoTextProps & React.RefAttributes<any>>;
 export default DBTag;

package/dist/components/tag/tag.js

@@ -6,7 +6,7 @@ import { DEFAULT_REMOVE } from "../../shared/constants";
 import { cls, getBooleanAsString } from "../../utils";
 import DBTooltip from "../tooltip/tooltip";
 function DBTagFn(props, component) {
-    var _a;
+    var _a, _b, _c;
     const _ref = component || useRef(component);
     function handleRemove(event) {
         if (!event)
@@ -23,7 +23,7 @@ function DBTagFn(props, component) {
         // TODO: We should think this through again, if we would really like to have default and especially english, instead of german labels in here
         return DEFAULT_REMOVE;
     }
-    return (React.createElement("div", 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", "onRemove"]), { id: props.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-tag", props.className), "data-semantic": props.semantic, "data-emphasis": props.emphasis, "data-icon": props.icon, "data-show-check-state": getBooleanAsString((_a = props.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": getBooleanAsString(props.showIcon), "data-no-text": getBooleanAsString(props.noText), "data-overflow": getBooleanAsString(props.overflow) }),
+    return (React.createElement("div", 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", "onRemove"]), { 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-tag", props.className), "data-semantic": props.semantic, "data-emphasis": props.emphasis, "data-icon": props.icon, "data-show-check-state": getBooleanAsString((_c = props.showCheckState) !== null && _c !== void 0 ? _c : true), "data-show-icon": getBooleanAsString(props.showIcon), "data-no-text": getBooleanAsString(props.noText), "data-overflow": getBooleanAsString(props.overflow) }),
         React.createElement(React.Fragment, null, props.content),
         props.children,
         props.text ? React.createElement(React.Fragment, null, props.text) : null,

package/dist/components/textarea/textarea.js

@@ -8,7 +8,7 @@ import { addValueResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 import { useId } from "react";
 function DBTextareaFn(props, component) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
@@ -75,15 +75,24 @@ function DBTextareaFn(props, component) {
             props.onFocus(event);
         }
     }
-    useEffect(() => {
-        var _a;
-        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `textarea-${uuid}`;
+    function resetIds() {
+        var _a, _b, _c;
+        const mId = (_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `textarea-${uuid}`;
         set_id(mId);
         set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
         set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
         set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+    }
+    useEffect(() => {
+        resetIds();
         set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
     }, []);
+    useEffect(() => {
+        var _a, _b;
+        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            resetIds();
+        }
+    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
     useEffect(() => {
         var _a;
         set_invalidMessage(props.invalidMessage ||
@@ -133,9 +142,9 @@ function DBTextareaFn(props, component) {
         };
     }, []);
     return (React.createElement("div", Object.assign({}, 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-textarea", props.className), "data-variant": props.variant, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-hide-label": getHideProp(props.showLabel) }),
-        React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("textarea", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, 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: _id, "data-resize": props.resize, "data-hide-resizer": getHideProp((_b = props.showResizer) !== null && _b !== void 0 ? _b : true), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||
-                getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds, placeholder: (_d = props.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) })),
+        React.createElement("label", { htmlFor: _id }, (_b = props.label) !== null && _b !== void 0 ? _b : DEFAULT_LABEL),
+        React.createElement("textarea", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, 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: _id, "data-resize": props.resize, "data-hide-resizer": getHideProp((_c = props.showResizer) !== null && _c !== void 0 ? _c : true), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||
+                getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": (_d = props.ariaDescribedBy) !== null && _d !== void 0 ? _d : _descByIds, placeholder: (_e = props.placeholder) !== null && _e !== void 0 ? _e : DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) })),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
         React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),

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

@@ -1,4 +1,4 @@
-import { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState } from '../../shared/model';
+import { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, ResetIdState, WrapProps } from '../../shared/model';
 export declare const TooltipVariantList: readonly ["description", "label"];
 export type TooltipVariantType = (typeof TooltipVariantList)[number];
 export type DBTooltipDefaultProps = {
@@ -13,8 +13,8 @@ export type DBTooltipDefaultProps = {
      */
     variant?: TooltipVariantType;
 };
-export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps;
+export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps & WrapProps;
 export type DBTooltipDefaultState = {
     getParent: () => HTMLElement;
 };
-export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState & DocumentScrollState;
+export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState & DocumentScrollState & ResetIdState;

package/dist/components/tooltip/tooltip.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "placement" | "emphasis" | keyof import("./model").DBTooltipDefaultProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & React.RefAttributes<any>>;
+declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "placement" | "emphasis" | "wrap" | keyof import("./model").DBTooltipDefaultProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & import("../../shared/model").WrapProps & React.RefAttributes<any>>;
 export default DBTooltip;

package/dist/components/tooltip/tooltip.js

@@ -8,7 +8,7 @@ import { DocumentScrollListener } from "../../utils/document-scroll-listener";
 import { handleFixedPopover } from "../../utils/floating-components";
 import { useId } from "react";
 function DBTooltipFn(props, component) {
-    var _a, _b;
+    var _a, _b, _c;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => DEFAULT_ID);
@@ -64,15 +64,20 @@ function DBTooltipFn(props, component) {
         handleAutoPlacement(parent);
         _observer === null || _observer === void 0 ? void 0 : _observer.observe(getParent());
     }
+    function resetIds() {
+        var _a, _b, _c;
+        set_id((_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : "tooltip-" + uuid);
+    }
     useEffect(() => {
-        set_id(props.id || "tooltip-" + uuid);
+        resetIds();
         setInitialized(true);
     }, []);
     useEffect(() => {
-        if (props.id) {
-            set_id(props.id);
+        var _a, _b;
+        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            resetIds();
         }
-    }, [props.id]);
+    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
     useEffect(() => {
         if (_ref.current && initialized && _id) {
             const parent = getParent();
@@ -104,7 +109,7 @@ function DBTooltipFn(props, component) {
             setInitialized(false);
         }
     }, [_ref.current, initialized, _id]);
-    return (React.createElement("i", Object.assign({ role: "tooltip", "aria-hidden": "true", "data-gap": "true", 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"]), 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-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-animation": getBooleanAsString((_a = props.animation) !== null && _a !== void 0 ? _a : true), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString((_b = props.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": props.placement, onClick: (event) => handleClick(event) }), props.children));
+    return (React.createElement("i", Object.assign({ role: "tooltip", "aria-hidden": "true", "data-gap": "true", 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"]), 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-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-wrap": getBooleanAsString(props.wrap), "data-animation": getBooleanAsString((_b = props.animation) !== null && _b !== void 0 ? _b : true), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString((_c = props.showArrow) !== null && _c !== void 0 ? _c : true), "data-placement": props.placement, onClick: (event) => handleClick(event) }), props.children));
 }
 const DBTooltip = forwardRef(DBTooltipFn);
 export default DBTooltip;

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export * from './components/card';
 export * from './components/card/model';
 export * from './components/checkbox';
 export * from './components/checkbox/model';
+export * from './components/custom-button';
+export * from './components/custom-button/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
 export * from './components/custom-select-dropdown/model';

package/dist/index.js

@@ -12,6 +12,8 @@ export * from './components/card';
 export * from './components/card/model';
 export * from './components/checkbox';
 export * from './components/checkbox/model';
+export * from './components/custom-button';
+export * from './components/custom-button/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
 export * from './components/custom-select-dropdown/model';

package/dist/shared/model.d.ts

@@ -21,7 +21,12 @@ export interface GlobalProps {
      * Before using please check for the [accessibility concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_concerns)
      */
     autofocus?: boolean | string;
+    /**
+     * Allows overriding specific props on nested elements or internal component structure.
+     */
+    propOverrides?: PropOverridesType;
 }
+export type PropOverridesType = Pick<GlobalProps, 'id'>;
 export type GlobalState = {
     _id?: string;
 };
@@ -352,6 +357,9 @@ export type FromValidState = {
     handleValidation: () => void;
     _invalidMessage?: string;
 };
+export type ResetIdState = {
+    resetIds: () => void;
+};
 export type FormState = {
     _messageId?: string;
     _validMessageId?: string;
@@ -369,7 +377,7 @@ export type FormState = {
      * We use this to remove form event listener
      */
     abortController?: AbortController;
-};
+} & ResetIdState;
 export type InitializedState = {
     initialized: boolean;
 };
@@ -520,6 +528,12 @@ export type AriaControlsProps = {
      */
     controls?: string;
 };
+export type NoTextProps = {
+    /**
+     * Define the text next to the icon specified via the icon Property to get hidden.
+     */
+    noText?: boolean | string;
+};
 export type ValueLabelType = {
     value: string;
     label?: string;

package/dist/utils/floating-components.js

@@ -60,6 +60,8 @@ export const handleDataOutside = (el) => {
     return dataOutsidePair;
 };
 export const handleFixedDropdown = (element, parent, placement) => {
+    if (!element || !parent)
+        return;
     // We skip this if we are in mobile it's already fixed
     if (getComputedStyle(element).zIndex === '9999')
         return;
@@ -249,6 +251,8 @@ const getAncestorHasCorrectedPlacement = (element) => {
 };
 export const handleFixedPopover = (element, parent, placement) => {
     var _a, _b;
+    if (!element || !parent)
+        return;
     const parentComputedStyles = getComputedStyle(parent);
     const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
     const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);

package/dist/utils/index.js

@@ -70,15 +70,15 @@ export const getBooleanAsString = (originBool) => {
     if (originBool === undefined || originBool === null)
         return;
     if (typeof originBool === 'string') {
-        return String(Boolean(originBool));
+        return String(originBool === 'true');
     }
     return String(originBool);
 };
 export const getBoolean = (originBool, propertyName) => {
     if (originBool === undefined || originBool === null)
         return;
-    if (typeof originBool === 'string' && propertyName) {
-        return Boolean(propertyName === originBool || originBool);
+    if (typeof originBool === 'string') {
+        return Boolean(propertyName === originBool || originBool === 'true');
     }
     return Boolean(originBool);
 };
@@ -119,20 +119,19 @@ export const getStep = (step) => {
 export const getInputValue = (value, inputType) => {
     return inputType && ['number', 'range'].includes(inputType) ? getNumber(value) : value;
 };
+const toBool = (value) => typeof value === 'string' ? value === 'true' : value;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getHideProp = (show) => {
     if (show === undefined || show === null) {
         return undefined;
     }
-    return getBooleanAsString(!Boolean(show));
+    return getBooleanAsString(!toBool(show));
 };
 export const stringPropVisible = (givenString, showString) => {
     if (showString === undefined) {
         return !!givenString;
     }
-    else {
-        return Boolean(showString) && Boolean(givenString);
-    }
+    return toBool(showString) && Boolean(givenString);
 };
 export const getSearchInput = (element) => element.querySelector(`input[type="search"]`);
 export const getOptionKey = (option, prefix) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.4.3",
+  "version": "4.5.1",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.4.3",
-    "@db-ux/core-foundations": "4.4.3"
+    "@db-ux/core-components": "4.5.1",
+    "@db-ux/core-foundations": "4.5.1"
   }
 }

package/agent/Accordion.md

@@ -1,47 +0,0 @@
-
-
-# Accordion Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBAccordion } from "@db-ux/react-react-core-components";
-
-function Accordion(props: any) {
-  function getItems() {
-    return [
-      {
-        text: "Item 1 Content",
-        headlinePlain: "Item 1",
-        disabled: false,
-      },
-      {
-        text: "Item 2 Content",
-        headlinePlain: "Item 2",
-        disabled: true,
-      },
-    ];
-  }
-
-  return (
-    <>
-      <h1>DBAccordion Documentation Examples</h1>
-      <h2>1. Default Accordion</h2>
-      <DBAccordion>Default Accordion</DBAccordion>
-      <h2>2. Behavior Variants</h2>
-      <DBAccordion behavior="multiple">Multiple Behavior</DBAccordion>
-      <DBAccordion behavior="single">Single Behavior</DBAccordion>
-      <h2>3. Initial Open Index</h2>
-      <DBAccordion initOpenIndex={[0, 1]}>Initial Open Index</DBAccordion>
-      <h2>4. Items</h2>
-      <DBAccordion items={getItems()}>Accordion with Items</DBAccordion>
-      <h2>5. Name Attribute</h2>
-      <DBAccordion name="accordion-name">With Name</DBAccordion>
-      <h2>6. Variant Types</h2>
-      <DBAccordion variant="divider">Divider Variant</DBAccordion>
-      <DBAccordion variant="card">Card Variant</DBAccordion>
-    </>
-  );
-}
-
-export default Accordion;
-```

package/agent/AccordionItem.md

@@ -1,36 +0,0 @@
-
-
-# AccordionItem Examples (react)
-
-```tsx
-import * as React from "react";
-import { DBAccordionItem } from "@db-ux/react-react-core-components";
-
-function AccordionItem(props: any) {
-  return (
-    <>
-      <h1>DBAccordionItem Documentation Examples</h1>
-      <h2>1. Default Accordion Item</h2>
-      <DBAccordionItem>Default Accordion Item</DBAccordionItem>
-      <h2>2. Initial State</h2>
-      <DBAccordionItem defaultOpen>Initially Open</DBAccordionItem>
-      <DBAccordionItem defaultOpen={false}>Initially Closed</DBAccordionItem>
-      <h2>3. Disabled State</h2>
-      <DBAccordionItem disabled>Disabled Accordion Item</DBAccordionItem>
-      <h2>4. Headline Variants</h2>
-      <DBAccordionItem headline={<strong>Custom Headline</strong>}>
-        With Custom Headline
-      </DBAccordionItem>
-      <DBAccordionItem headlinePlain="Plain Headline">
-        With Plain Headline
-      </DBAccordionItem>
-      <h2>5. Toggle Event</h2>
-      <DBAccordionItem onToggle={(open) => console.log("Toggled:", open)}>
-        With Toggle Event
-      </DBAccordionItem>
-    </>
-  );
-}
-
-export default AccordionItem;
-```