@db-ux/react-core-components 1.0.1 → 1.1.1

package/README.md

@@ -46,6 +46,10 @@ import "@db-ux/core-components/build/styles/rollup.css";
 
 > **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.
 
+### DB Theme
+
+In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) node package (even also available as an inner source node package, as described within that packages README).
+
 ## Usage
 
 ```tsx
@@ -60,7 +64,8 @@ import { DBButton } from '@db-ux/react-core-components';
 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 when being used with the code that we're provide 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.
 Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
 
-You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.
+For any usage outside of Deutsche Bahn websites and applications you aren't allowed to use any Deutsche Bahn brand and
+design assets as well as protected characteristics and trademarks, that for not including the DB Theme.
 
 ## Contributions
 

package/dist/components/accordion/accordion.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, uuid } from "../../utils";
 import DBAccordionItem from "../accordion-item/accordion-item";
 import { DEFAULT_ID } from "../../shared/constants";
 function DBAccordionFn(props, component) {

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

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getBooleanAsString, uuid } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
 function DBAccordionItemFn(props, component) {
     const _ref = component || useRef(component);
@@ -23,7 +24,7 @@ function DBAccordionItemFn(props, component) {
         }
     }, []);
     return (React.createElement("li", Object.assign({ id: _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"]), { 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"]), { open: _open }),
+        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", "onToggle"]), { open: _open }),
             React.createElement("summary", { onClick: (event) => toggle(event) },
                 props.headlinePlain ? React.createElement(React.Fragment, null, props.headlinePlain) : null,
                 !props.headlinePlain ? React.createElement(React.Fragment, null, props.headline) : null),

package/dist/components/badge/badge.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, filterPassingProps, getRootProps } from "../../utils";
+import { cls } from "../../utils";
 import { DEFAULT_LABEL } from "../../shared/constants";
 function DBBadgeFn(props, component) {
     var _a, _b;

package/dist/components/brand/brand.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getHideProp } from "../../utils";
 import { DEFAULT_ICON } from "../../shared/constants";
 function DBBrandFn(props, component) {
     var _a;

package/dist/components/button/button.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBButton: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement>, "width" | "text" | "size" | "icon" | "onClick" | keyof import("./model").DBButtonDefaultProps | keyof import("../../shared/model").GlobalProps | "showIcon"> & import("./model").DBButtonDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").SizeProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DBButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "width" | "text" | "size" | "icon" | "onClick" | keyof import("./model").DBButtonDefaultProps | keyof import("../../shared/model").GlobalProps | "showIcon"> & import("./model").DBButtonDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").SizeProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<HTMLButtonElement>>;
 export default DBButton;

package/dist/components/button/button.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, getBooleanAsString, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getBooleanAsString, getHideProp } from "../../utils";
 function DBButtonFn(props, component) {
     const _ref = component || useRef(component);
     function handleClick(event) {

package/dist/components/card/card.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, filterPassingProps, getRootProps } from "../../utils";
+import { cls } from "../../utils";
 function DBCardFn(props, component) {
     const _ref = component || useRef(component);
     function handleClick(event) {

package/dist/components/checkbox/checkbox.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBCheckbox: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "size" | "checked" | keyof import("../../shared/model").GlobalProps | "indeterminate" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps> & import("./model").DBCheckboxDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").FormMessageProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
+declare const DBCheckbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "checked" | keyof import("../../shared/model").GlobalProps | "indeterminate" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps> & import("./model").DBCheckboxDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").FormMessageProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
 export default DBCheckbox;

package/dist/components/checkbox/checkbox.js

@@ -1,9 +1,10 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, filterPassingProps, getRootProps } from "../../utils";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import DBInfotext from "../infotext/infotext";
+import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 function DBCheckboxFn(props, component) {
     var _a, _b, _c, _d;
     const _ref = component || useRef(component);
@@ -82,22 +83,23 @@ function DBCheckboxFn(props, component) {
         }
     }, [_id]);
     useEffect(() => {
-        if (initialized && document && _id) {
-            const checkboxElement = document === null || document === void 0 ? void 0 : document.getElementById(_id);
-            if (checkboxElement) {
-                // in angular this must be set via native element
-                if (props.checked != undefined) {
-                    checkboxElement.checked = props.checked;
-                }
-                if (props.indeterminate !== undefined) {
-                    // When indeterminate is set, the value of the checked prop only impacts the form submitted values.
-                    // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
-                    checkboxElement.indeterminate = props.indeterminate;
-                }
-                setInitialized(false);
+        if (_ref.current) {
+            if (props.indeterminate !== undefined) {
+                // When indeterminate is set, the value of the checked prop only impacts the form submitted values.
+                // It has no accessibility or UX implications. (https://mui.com/material-ui/react-checkbox/)
+                _ref.current.indeterminate = props.indeterminate;
             }
         }
-    }, [initialized, props.indeterminate, props.checked]);
+    }, [initialized, _ref.current, props.indeterminate]);
+    useEffect(() => {
+        if (initialized && _ref.current) {
+            // in angular this must be set via native element
+            if (props.checked != undefined) {
+                _ref.current.checked = props.checked;
+            }
+            setInitialized(false);
+        }
+    }, [initialized, _ref.current, props.checked]);
     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"]), { className: cls("db-checkbox", props.className), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel) }),
         React.createElement("label", { htmlFor: _id },
             React.createElement("input", Object.assign({ type: "checkbox", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { id: _id, name: props.name, checked: props.checked, disabled: props.disabled, value: props.value, required: props.required, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds })),

package/dist/components/divider/divider.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, filterPassingProps, getRootProps } from "../../utils";
+import { cls } from "../../utils";
 function DBDividerFn(props, component) {
     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"]), { id: props.id, "data-margin": props.margin, "data-variant": props.variant, "data-emphasis": props.emphasis, "data-width": props.width }, 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"]), { className: cls("db-divider", props.className) })));

package/dist/components/drawer/drawer.js

@@ -1,9 +1,10 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, useEffect, forwardRef } from "react";
 import DBButton from "../button/button";
 import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, delay, filterPassingProps, getRootProps } from "../../utils";
+import { cls, delay } from "../../utils";
 function DBDrawerFn(props, component) {
     var _a;
     const _ref = component || useRef(component);

package/dist/components/header/header.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { addAttributeToChildren, cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { addAttributeToChildren, cls, uuid } from "../../utils";
 import DBButton from "../button/button";
 import DBDrawer from "../drawer/drawer";
 import { DEFAULT_BURGER_MENU, DEFAULT_ID } from "../../shared/constants";
@@ -40,7 +41,7 @@ function DBHeaderFn(props, component) {
             setForcedToMobile(true);
         }
     }, [initialized]);
-    return (React.createElement("header", 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"]), 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"]), { className: cls("db-header", props.className), id: _id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
+    return (React.createElement("header", 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", "onToggle"]), 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"]), { className: cls("db-header", props.className), id: _id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
         React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, open: props.drawerOpen, onClose: () => toggle() },
             React.createElement("div", { className: "db-header-drawer-navigation" },
                 React.createElement("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event) }, props.children),

package/dist/components/icon/icon.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, filterPassingProps, getRootProps } from "../../utils";
+import { cls } from "../../utils";
 function DBIconFn(props, component) {
     const _ref = component || useRef(component);
     return (React.createElement("span", Object.assign({ "aria-hidden": "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"]), { 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"]), { className: cls("db-icon", props.className), "data-icon": props.icon, "data-icon-weight": props.weight, "data-icon-variant": props.variant }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));

package/dist/components/infotext/infotext.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getHideProp } from "../../utils";
 function DBInfotextFn(props, component) {
     var _a;
     const _ref = component || useRef(component);

package/dist/components/input/input.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBInput: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBInputDefaultProps | keyof import("../../shared/model").FormTextProps | keyof import("../../shared/model").InputEventProps<HTMLInputElement> | "iconAfter"> & import("./model").DBInputDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").InputEventProps<HTMLInputElement> & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & React.RefAttributes<HTMLInputElement>>;
+declare const DBInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBInputDefaultProps | keyof import("../../shared/model").FormTextProps | keyof import("../../shared/model").InputEventProps<HTMLInputElement> | "iconAfter"> & import("./model").DBInputDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").InputEventProps<HTMLInputElement> & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & import("../../shared/model").FormSizeProps & React.RefAttributes<HTMLInputElement>>;
 export default DBInput;

package/dist/components/input/input.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getHideProp, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, delay, getHideProp, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import DBInfotext from "../infotext/infotext";
 function DBInputFn(props, component) {
@@ -106,7 +107,7 @@ function DBInputFn(props, component) {
     }, [props.value]);
     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"]), { className: cls("db-input", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-icon": getHideProp(props.showIcon), "data-icon": props.icon, "data-icon-after": props.iconAfter, "data-hide-icon-after": getHideProp(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { id: _id, name: props.name, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: props.disabled, required: props.required, step: props.step, value: props.value, maxLength: props.maxLength, minLength: props.minLength, max: props.max, min: props.min, readOnly: props.readOnly, form: props.form, pattern: props.pattern, autoComplete: props.autocomplete, autoFocus: props.autofocus, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": _descByIds })),
+        React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { id: _id, name: props.name, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: props.disabled, required: props.required, step: props.step, value: props.value, maxLength: props.maxLength, minLength: props.minLength, max: props.max, min: props.min, readOnly: props.readOnly, form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: props.autofocus, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": _descByIds })),
         props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_c = getDataList(props.dataList)) === null || _c === void 0 ? void 0 : _c.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
         props.children,
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, FormTextProps, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';
 export declare const InputTypeList: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"];
 export type InputTypeType = (typeof InputTypeList)[number];
 export type DBInputDefaultProps = {
@@ -31,7 +31,7 @@ export type DBInputDefaultProps = {
      */
     step?: number | string;
 };
-export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps;
+export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps & FormSizeProps;
 export type DBInputDefaultState = {
     _dataListId?: string;
     getDataList: (_list?: string[] | ValueLabelType[]) => ValueLabelType[];

package/dist/components/link/link.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBLink: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLAnchorElement>, "text" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../../shared/model").LinkProps> & import("./model").DBLinkDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLAnchorElement> & import("../../shared/model").LinkProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "text" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../../shared/model").LinkProps> & import("./model").DBLinkDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLAnchorElement> & import("../../shared/model").LinkProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<HTMLAnchorElement>>;
 export default DBLink;

package/dist/components/link/link.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, getBooleanAsString, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getBooleanAsString, getHideProp } from "../../utils";
 function DBLinkFn(props, component) {
     var _a;
     const _ref = component || useRef(component);

package/dist/components/navigation/navigation.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, uuid } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
 function DBNavigationFn(props, component) {
     const _ref = component || useRef(component);

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

@@ -1,4 +1,4 @@
-import { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, ShowIconProps, TextProps, WidthProps } from '../../shared/model';
+import { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, NavigationBehaviorState, ShowIconProps, TextProps, WidthProps } from '../../shared/model';
 import { NavigationItemSafeTriangle } from '../../utils/navigation';
 export type DBNavigationItemDefaultProps = {
     /**
@@ -30,5 +30,6 @@ export type DBNavigationItemDefaultState = {
     hasSubNavigation?: boolean;
     updateSubNavigationState: () => void;
     navigationItemSafeTriangle?: NavigationItemSafeTriangle;
+    autoClose?: boolean;
 };
-export type DBNavigationItemState = DBNavigationItemDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & InitializedState;
+export type DBNavigationItemState = DBNavigationItemDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & InitializedState & NavigationBehaviorState;

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

@@ -1,9 +1,10 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import DBButton from "../button/button";
-import { cls, getBooleanAsString, getHideProp, uuid, filterPassingProps, getRootProps } from "../../utils";
-import { NavigationItemSafeTriangle } from "../../utils/navigation";
+import { cls, delay, getBooleanAsString, getHideProp, uuid } from "../../utils";
+import { isEventTargetNavigationItem, NavigationItemSafeTriangle, } from "../../utils/navigation";
 import { DEFAULT_BACK } from "../../shared/constants";
 function DBNavigationItemFn(props, component) {
     var _a;
@@ -12,8 +13,17 @@ function DBNavigationItemFn(props, component) {
     const [hasAreaPopup, setHasAreaPopup] = useState(() => false);
     const [hasSubNavigation, setHasSubNavigation] = useState(() => true);
     const [isSubNavigationExpanded, setIsSubNavigationExpanded] = useState(() => false);
+    const [autoClose, setAutoClose] = useState(() => false);
     const [subNavigationId, setSubNavigationId] = useState(() => "sub-navigation-" + uuid());
     const [navigationItemSafeTriangle, setNavigationItemSafeTriangle] = useState(() => undefined);
+    function handleNavigationItemClick(event) {
+        if (isEventTargetNavigationItem(event)) {
+            setAutoClose(true);
+            delay(() => {
+                setAutoClose(false);
+            }, 300);
+        }
+    }
     function handleClick(event) {
         if (props.onClick) {
             props.onClick(event);
@@ -58,7 +68,7 @@ function DBNavigationItemFn(props, component) {
         !hasSubNavigation ? (React.createElement(React.Fragment, null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children))) : null,
         hasSubNavigation ? (React.createElement(React.Fragment, null,
             React.createElement("button", { className: "db-navigation-item-expand-button", "aria-haspopup": hasAreaPopup, "aria-expanded": isSubNavigationExpanded, disabled: props.disabled, onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
-            React.createElement("menu", { className: "db-sub-navigation", id: subNavigationId },
+            React.createElement("menu", { className: "db-sub-navigation", "data-auto-close": autoClose, id: subNavigationId, onClick: (event) => handleNavigationItemClick(event) },
                 hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
                     React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_a = props.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK))) : null,
                 React.createElement(React.Fragment, null, props.subNavigation)))) : null));

package/dist/components/notification/notification.js

@@ -1,9 +1,10 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import DBButton from "../button/button";
 import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, getHideProp, stringPropVisible, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getHideProp, stringPropVisible } from "../../utils";
 function DBNotificationFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
@@ -12,7 +13,7 @@ function DBNotificationFn(props, component) {
             props.onClose();
         }
     }
-    return (React.createElement("article", 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"]), { 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"]), { className: cls("db-notification", props.className), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-link-variant": props.linkVariant }),
+    return (React.createElement("article", 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", "onClose"]), { 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"]), { className: cls("db-notification", props.className), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-link-variant": props.linkVariant }),
         React.createElement(React.Fragment, null, props.image),
         stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", null, props.headline)) : null,
         React.createElement("p", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),

package/dist/components/page/page.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getBooleanAsString } from "../../utils";
 function DBPageFn(props, component) {
     const _ref = component || useRef(component);
     const [fontsLoaded, setFontsLoaded] = useState(() => false);

package/dist/components/popover/popover.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, handleDataOutside, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getBooleanAsString, handleDataOutside } from "../../utils";
 function DBPopoverFn(props, component) {
     var _a;
     const _ref = component || useRef(component);

package/dist/components/radio/radio.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps> & import("./model").DBRadioDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
+declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps> & import("./model").DBRadioDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<HTMLInputElement>>;
 export default DBRadio;

package/dist/components/radio/radio.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getHideProp, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getHideProp, uuid } from "../../utils";
 function DBRadioFn(props, component) {
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
@@ -36,15 +37,10 @@ function DBRadioFn(props, component) {
         set_id((_a = props.id) !== null && _a !== void 0 ? _a : `radio-${uuid()}`);
     }, []);
     useEffect(() => {
-        if (props.checked && initialized && document && _id) {
-            const radioElement = document === null || document === void 0 ? void 0 : document.getElementById(_id);
-            if (radioElement) {
-                if (props.checked != undefined) {
-                    radioElement.checked = true;
-                }
-            }
+        if (props.checked && initialized && _ref.current) {
+            _ref.current.checked = true;
         }
-    }, [initialized, props.checked]);
+    }, [initialized, _ref.current, props.checked]);
     return (React.createElement("label", Object.assign({ "data-size": props.size, "data-hide-label": getHideProp(props.showLabel) }, 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"]), { className: cls("db-radio", props.className), htmlFor: _id }),
         React.createElement("input", Object.assign({ type: "radio", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { id: _id, name: props.name, checked: props.checked, disabled: props.disabled, "aria-describedby": props.describedbyid, value: props.value, required: props.required, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
         props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));

package/dist/components/section/section.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, uuid } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
 function DBSectionFn(props, component) {
     const _ref = component || useRef(component);

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, ClickEventProps, ClickEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, GlobalProps, GlobalState, IconProps, InitializedState, InputEventProps, InputEventState, ShowIconProps } from '../../shared/model';
 export type DBSelectDefaultProps = {
     /**
      * The description attribute will add a paragraph below the select.
@@ -35,7 +35,7 @@ export type DBSelectOptionType = {
      */
     value: string | string[] | number;
 };
-export type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps;
+export type DBSelectProps = DBSelectDefaultProps & GlobalProps & ClickEventProps<HTMLSelectElement> & ChangeEventProps<HTMLSelectElement> & FocusEventProps<HTMLSelectElement> & InputEventProps<HTMLSelectElement> & FormProps & IconProps & FormMessageProps & ShowIconProps & FormSizeProps;
 export type DBSelectDefaultState = {
     _placeholderId: string;
     getOptionLabel: (option: DBSelectOptionType) => string;

package/dist/components/select/select.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBSelect: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSelectElement>, "icon" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBSelectDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLSelectElement> | keyof import("../../shared/model").FocusEventProps<HTMLSelectElement> | keyof import("../../shared/model").InputEventProps<HTMLSelectElement>> & import("./model").DBSelectDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLSelectElement> & import("../../shared/model").ChangeEventProps<HTMLSelectElement> & import("../../shared/model").FocusEventProps<HTMLSelectElement> & import("../../shared/model").InputEventProps<HTMLSelectElement> & import("../../shared/model").FormProps & import("../../shared/model").IconProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & React.RefAttributes<HTMLSelectElement>>;
+declare const DBSelect: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size" | "icon" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBSelectDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLSelectElement> | keyof import("../../shared/model").FocusEventProps<HTMLSelectElement> | keyof import("../../shared/model").InputEventProps<HTMLSelectElement>> & import("./model").DBSelectDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLSelectElement> & import("../../shared/model").ChangeEventProps<HTMLSelectElement> & import("../../shared/model").FocusEventProps<HTMLSelectElement> & import("../../shared/model").InputEventProps<HTMLSelectElement> & import("../../shared/model").FormProps & import("../../shared/model").IconProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & import("../../shared/model").FormSizeProps & React.RefAttributes<HTMLSelectElement>>;
 export default DBSelect;

package/dist/components/select/select.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 import DBInfotext from "../infotext/infotext";
 function DBSelectFn(props, component) {
@@ -112,7 +113,7 @@ function DBSelectFn(props, component) {
     }, [props.value]);
     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"]), { className: cls("db-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { required: props.required, disabled: props.disabled, id: _id, name: props.name, value: props.value, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds }),
+        React.createElement("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { required: props.required, disabled: props.disabled, id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": _descByIds }),
             React.createElement("option", { hidden: true }),
             props.options ? (React.createElement(React.Fragment, { key: uuid() }, (_b = props.options) === null || _b === void 0 ? void 0 : _b.map((option) => {
                 var _a;

package/dist/components/stack/stack.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, getBooleanAsString, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getBooleanAsString } from "../../utils";
 function DBStackFn(props, component) {
     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"]), { 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"]), { className: cls("db-stack", props.className), "data-gap": props.gap, "data-variant": props.variant, "data-direction": props.direction, "data-alignment": props.alignment, "data-justify-content": props.justifyContent, "data-wrap": getBooleanAsString(props.wrap) }), props.children));

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

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, EmphasisProps, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, IconAfterProps, IconProps, InitializedState, SizeProps } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, EmphasisProps, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, IconAfterProps, IconProps, SizeProps } from '../../shared/model';
 export type DBSwitchDefaultProps = {
     /**
      * Add additional icons to indicate active/inactive state.
@@ -9,4 +9,4 @@ export type DBSwitchProps = DBSwitchDefaultProps & GlobalProps & ChangeEventProp
 export type DBSwitchDefaultState = {
     _checked: boolean;
 };
-export type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;
+export type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState;

package/dist/components/switch/switch.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLInputElement>, "size" | "icon" | "checked" | keyof import("../../shared/model").GlobalProps | "emphasis" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | "iconAfter" | "visualAid"> & import("./model").DBSwitchDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").EmphasisProps & import("../../shared/model").SizeProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & React.RefAttributes<HTMLInputElement>>;
+declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "icon" | "checked" | keyof import("../../shared/model").GlobalProps | "emphasis" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").FormProps | "iconAfter" | "visualAid"> & import("./model").DBSwitchDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").FormProps & import("../../shared/model").FormCheckProps & import("../../shared/model").EmphasisProps & import("../../shared/model").SizeProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & React.RefAttributes<HTMLInputElement>>;
 export default DBSwitch;

package/dist/components/switch/switch.js

@@ -1,12 +1,12 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, getHideProp, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getBooleanAsString, getHideProp, uuid } from "../../utils";
 function DBSwitchFn(props, component) {
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
-    const [_checked, set_checked] = useState(() => false);
-    const [initialized, setInitialized] = useState(() => false);
+    const [_checked, set_checked] = useState(() => { var _a; return (_a = props["defaultChecked"]) !== null && _a !== void 0 ? _a : false; });
     function handleChange(event) {
         var _a;
         if (props.onChange) {
@@ -38,8 +38,13 @@ function DBSwitchFn(props, component) {
         var _a;
         set_id((_a = props.id) !== null && _a !== void 0 ? _a : `switch-${uuid()}`);
     }, []);
+    useEffect(() => {
+        if (props.checked !== undefined && props.checked !== null) {
+            set_checked(!!props.checked);
+        }
+    }, [props.checked]);
     return (React.createElement("label", Object.assign({ "data-visual-aid": getBooleanAsString(props.visualAid), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-emphasis": props.emphasis, htmlFor: _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"]), { className: cls("db-switch", props.className) }),
-        React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, "aria-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"]), { checked: props.checked, disabled: props.disabled, "aria-describedby": props.describedbyid, "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, name: props.name, required: props.required, "data-aid-icon": props.icon, "data-aid-icon-after": props.iconAfter, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
+        React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, "aria-checked": getBooleanAsString(_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"]), { checked: props.checked, value: props.value, disabled: props.disabled, "aria-describedby": props.describedbyid, "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, name: props.name, required: props.required, "data-aid-icon": props.icon, "data-aid-icon-after": props.iconAfter, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
         props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
 }
 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.HTMLAttributes<HTMLInputElement>, "active" | "icon" | "controls" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | "iconAfter" | keyof import("./model").DBTabItemDefaultProps> & import("../../shared/model").GlobalProps & import("./model").DBTabItemDefaultProps & import("../../shared/model").IconProps & import("../../shared/model").IconAfterProps & import("../../shared/model").ActiveProps & import("../../shared/model").AriaControlsProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").ShowIconProps & React.RefAttributes<HTMLInputElement>>;
+declare const DBTabItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "active" | "icon" | "controls" | keyof import("../..").GlobalProps | "showIcon" | keyof import("../..").ChangeEventProps<HTMLInputElement> | "iconAfter" | keyof import("./model").DBTabItemDefaultProps> & import("../..").GlobalProps & import("./model").DBTabItemDefaultProps & import("../..").IconProps & import("../..").IconAfterProps & import("../..").ActiveProps & import("../..").AriaControlsProps & import("../..").ChangeEventProps<HTMLInputElement> & import("../..").ShowIconProps & React.RefAttributes<HTMLInputElement>>;
 export default DBTabItem;

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

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getHideProp } from "../../utils";
 function DBTabItemFn(props, component) {
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
@@ -28,7 +29,7 @@ function DBTabItemFn(props, component) {
     }, [_ref.current, initialized]);
     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"]), { className: cls("db-tab-item", props.className) }),
         React.createElement("label", { htmlFor: props.id, "data-icon": props.icon, "data-icon-after": props.iconAfter, "data-hide-icon": getHideProp(props.showIcon), "data-hide-icon-after": getHideProp(props.showIcon), "data-no-text": props.noText },
-            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: props.disabled, "aria-selected": _selected, "aria-controls": props.controls, checked: props.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"]), { id: props.id, onChange: (event) => handleChange(event) })),
+            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: props.disabled, "aria-selected": _selected, "aria-controls": props.controls, checked: props.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"]), { id: props.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

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, uuid } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
 function DBTabListFn(props, component) {
     const _ref = component || useRef(component);

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

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, useEffect, forwardRef } from "react";
-import { cls, filterPassingProps, getRootProps } from "../../utils";
+import { cls } from "../../utils";
 function DBTabPanelFn(props, component) {
     const _ref = component || useRef(component);
     useEffect(() => { }, []);

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

@@ -27,6 +27,14 @@ export type DBTabsDefaultProps = {
      * The name of the tab bar, is required for grouping multiple tabs together. Will overwrite names from children.
      */
     name?: string;
+    /**
+     * Informs the user if the current tab index has changed.
+     */
+    onIndexChange?: (index?: number) => void;
+    /**
+     * Informs the user if another tab has been selected.
+     */
+    onTabSelect?: (event?: Event) => void;
     /**
      * Provide simple tabs with label + text as content
      */
@@ -43,5 +51,6 @@ export type DBTabsDefaultState = {
     convertTabs: (tabs?: unknown[] | string | undefined) => DBSimpleTabProps[];
     initTabList: () => void;
     initTabs: (init?: boolean) => void;
+    handleChange: (event: any) => void;
 };
 export type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState;

package/dist/components/tabs/tabs.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, uuid } from "../../utils";
 import DBButton from "../button/button";
 import DBTabList from "../tab-list/tab-list";
 import DBTabItem from "../tab-item/tab-item";
@@ -98,6 +99,21 @@ function DBTabsFn(props, component) {
             }
         }
     }
+    function handleChange(event) {
+        var _a;
+        if (props.onIndexChange && event.target) {
+            const list = event.target.closest("ul");
+            const listItem = 
+            // db-tab-item for angular and stencil wrapping elements
+            (_a = event.target.closest("db-tab-item")) !== null && _a !== void 0 ? _a : event.target.closest("li");
+            if (list !== null && listItem !== null) {
+                props.onIndexChange(Array.from(list.childNodes).indexOf(listItem));
+            }
+        }
+        if (props.onTabSelect) {
+            props.onTabSelect(event);
+        }
+    }
     useEffect(() => {
         set_id(props.id || _id);
         set_name(`tabs-${props.name || uuid()}`);
@@ -125,12 +141,12 @@ function DBTabsFn(props, component) {
             setInitialized(false);
         }
     }, [_ref.current, initialized]);
-    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"]), { id: _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"]), { 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" }),
-        showScrollLeft ? (React.createElement(DBButton, { className: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
+    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", "onTabSelect", "onIndexChange"]), { id: _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"]), { 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) }),
+        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(props.tabs)) === 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, iconAfter: tab.iconAfter, icon: tab.icon, noText: tab.noText })))), (_d = convertTabs(props.tabs)) === 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,
-        showScrollRight ? (React.createElement(DBButton, { className: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", noText: true, onClick: (event) => scroll() }, "Scroll right")) : 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));
 }
 const DBTabs = forwardRef(DBTabsFn);

package/dist/components/tag/tag.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, getHideProp, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getBooleanAsString, getHideProp } from "../../utils";
 function DBTagFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
@@ -35,7 +36,7 @@ function DBTagFn(props, component) {
             }
         }
     }, [initialized, props.disabled, _ref.current]);
-    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"]), { 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"]), { className: cls("db-tag", props.className), "data-disabled": getBooleanAsString(props.disabled), "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-hide-icon": getHideProp(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", "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"]), { className: cls("db-tag", props.className), "data-disabled": getBooleanAsString(props.disabled), "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-hide-icon": getHideProp(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.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLTextAreaElement>, keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").FormTextProps | keyof import("./model").DBTextareaDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").InputEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").FocusEventProps<HTMLTextAreaElement>> & import("./model").DBTextareaDefaultProps & import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> & import("../../shared/model").InputEventProps<HTMLTextAreaElement> & import("../../shared/model").FocusEventProps<HTMLTextAreaElement> & import("../../shared/model").FormProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").FormMessageProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").FormProps | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").FormTextProps | keyof import("./model").DBTextareaDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").InputEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").FocusEventProps<HTMLTextAreaElement>> & import("./model").DBTextareaDefaultProps & import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> & import("../../shared/model").InputEventProps<HTMLTextAreaElement> & import("../../shared/model").FocusEventProps<HTMLTextAreaElement> & import("../../shared/model").FormProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").FormMessageProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default DBTextarea;

package/dist/components/textarea/textarea.js

@@ -1,8 +1,9 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import DBInfotext from "../infotext/infotext";
-import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, delay, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_ROWS, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
 function DBTextareaFn(props, component) {
     var _a, _b, _c, _d, _e, _f, _g;

package/dist/components/tooltip/tooltip.js

@@ -1,7 +1,8 @@
 "use client";
 import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, handleDataOutside, uuid, filterPassingProps, getRootProps } from "../../utils";
+import { cls, getBooleanAsString, handleDataOutside, uuid } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
 function DBTooltipFn(props, component) {
     var _a, _b;

package/dist/shared/model.d.ts

@@ -228,6 +228,12 @@ export type FormTextProps = {
      */
     readOnly?: boolean;
 };
+export type FormSizeProps = {
+    /**
+     * Size of the control
+     */
+    size?: number;
+};
 export type FormCheckProps = {
     /**
      * Define the radio or checkbox elements checked state

package/dist/utils/index.d.ts

@@ -7,8 +7,6 @@ export type ClassNameArg = string | {
     [key: string]: boolean | undefined;
 } | undefined;
 export declare const cls: (...args: ClassNameArg[]) => string;
-export declare const filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
-export declare const getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
 export declare const visibleInVX: (el: Element) => boolean;
 export declare const visibleInVY: (el: Element) => boolean;
 export declare const isInView: (el: Element) => {
@@ -34,8 +32,6 @@ export declare const getBooleanAsString: (originBool?: boolean) => any;
 export declare const getHideProp: (show?: boolean) => any;
 export declare const stringPropVisible: (givenString?: string, showString?: boolean) => string | boolean;
 declare const _default: {
-    getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
-    filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
     cls: (...args: ClassNameArg[]) => string;
     addAttributeToChildren: (element: Element, attribute: {
         key: string;

package/dist/utils/index.js

@@ -37,15 +37,6 @@ export const cls = (...args) => {
     }
     return result.trim();
 };
-const reactHtmlAttributes = ['suppressHydrationWarning', 'suppressContentEditableWarning', 'translate', 'title', 'tabIndex', 'style', 'spellCheck', 'nonce', 'lang', 'hidden', 'draggable', 'dir', 'contextMenu', 'contentEditable', 'autoFocus', 'accessKey', 'is', 'inputMode', 'unselectable', 'security', 'results', 'vocab', 'typeof', 'rev', 'resource', 'rel', 'property', 'inlist', 'datatype', 'content', 'about', 'role', 'radioGroup', 'color'];
-export const filterPassingProps = (props, propsPassingFilter) => Object.keys(props).filter(key => (key.startsWith('data-') || key.startsWith('aria-') || key.startsWith('default') || key.startsWith('auto') || key.startsWith('item') || key.startsWith('on') || reactHtmlAttributes.includes(key)) && !propsPassingFilter.includes(key)).reduce((obj, key) => {
-    return Object.assign(Object.assign({}, obj), { [key]: props[key] });
-}, {});
-export const getRootProps = (props, rooProps) => {
-    return Object.keys(props).filter(key => rooProps.includes(key)).reduce((obj, key) => {
-        return Object.assign(Object.assign({}, obj), { [key]: props[key] });
-    }, {});
-};
 export const visibleInVX = (el) => {
     const { left, right } = el.getBoundingClientRect();
     const { innerWidth } = window;
@@ -148,8 +139,6 @@ export const stringPropVisible = (givenString, showString) => {
     }
 };
 export default {
-    getRootProps,
-    filterPassingProps,
     cls,
     addAttributeToChildren,
     uuid,

package/dist/utils/react.d.ts

@@ -0,0 +1,7 @@
+export declare const filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
+export declare const getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
+declare const _default: {
+    getRootProps: (props: Record<string, unknown>, rooProps: string[]) => Record<string, unknown>;
+    filterPassingProps: (props: Record<string, unknown>, propsPassingFilter: string[]) => Record<string, unknown>;
+};
+export default _default;

package/dist/utils/react.js

@@ -0,0 +1,15 @@
+const reactHtmlAttributes = ['suppressHydrationWarning', 'suppressContentEditableWarning', 'translate', 'title', 'tabIndex', 'style', 'spellCheck', 'nonce', 'lang', 'hidden', 'draggable', 'dir', 'contextMenu', 'contentEditable', 'accessKey', 'is', 'inputMode', 'unselectable', 'security', 'results', 'vocab', 'typeof', 'rev', 'resource', 'rel', 'property', 'inlist', 'datatype', 'content', 'about', 'role', 'radioGroup', 'color',
+    // other attributes for button,input,etc.
+    'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'capture', 'dirName', 'download', 'ping'];
+export const filterPassingProps = (props, propsPassingFilter) => Object.keys(props).filter(key => (key.startsWith('data-') || key.startsWith('aria-') || key.startsWith('default') || key.startsWith('auto') || key.startsWith('item') || key.startsWith('on') || reactHtmlAttributes.includes(key)) && !propsPassingFilter.includes(key)).reduce((obj, key) => {
+    return Object.assign(Object.assign({}, obj), { [key]: props[key] });
+}, {});
+export const getRootProps = (props, rooProps) => {
+    return Object.keys(props).filter(key => rooProps.includes(key)).reduce((obj, key) => {
+        return Object.assign(Object.assign({}, obj), { [key]: props[key] });
+    }, {});
+};
+export default {
+    getRootProps,
+    filterPassingProps
+};

package/package.json

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