@db-ux/react-core-components 4.0.3 → 4.1.0

package/CHANGELOG.md

@@ -1,17 +1,42 @@
 # @db-ux/react-core-components
 
+## 4.1.0
+
+### Minor Changes
+
+- refactor(notification): update and simplify grid layout for block link variant - [see commit cb83f96](https://github.com/db-ux-design-system/core-web/commit/cb83f966eaf29c85b4cf0079750bdd563f216d6e)
+
+- fix(DBCustomSelect): properly announce selected options - [see commit 773edeb](https://github.com/db-ux-design-system/core-web/commit/773edeb943a085eb79e1c8d59059137b2830fbf0):
+  - feat(DBCustomSelect): introduce new property `selectedPrefix`
+
+### Patch Changes
+
+- fix(DBCustomSelect): automatically handle form reset events - [see commit 6af5246](https://github.com/db-ux-design-system/core-web/commit/6af5246b3b2e6febdc6ff6342ba1a8eb10184d14):
+  - An event listener is now added for every form component (input, custom-select, etc.) when a `form` property is passed.
+  - This listener detects form resets and updates the component's internal value/checked state accordingly.
+  - > **Note**: This does not work for `ngModel` in Angular.
+
+- fix(button): Replace fixed height with min-height for buttons to allow dynamic height adjustment when text wraps - [see commit d1fd2c4](https://github.com/db-ux-design-system/core-web/commit/d1fd2c4e58a5ed6f75fab44700cd2d93c7232474)
+
+## 4.0.4
+
+### Patch Changes
+
+- fix: hide-animation for drawer - [see commit d4a73fa](https://github.com/db-ux-design-system/core-web/commit/d4a73fa9faba38b6f20fda6f7c85d5c6617793fe)
+
 ## 4.0.3
 
-_version bump_
+### Patch Changes
 
+- chore: generate Amazon Q rule file with [`@db-ux/agent-cli` node package](https://www.npmjs.com/package/@db-ux/agent-cli) - [see commit b61c8b1](https://github.com/db-ux-design-system/core-web/commit/b61c8b14992f5a5b3615c6bff74018d5682aa0cc)
 
 ## 4.0.2
 
 ### Patch Changes
 
-- fix(card): Remove the obsolete but harmful declaration regarding wrapping button and link styles. - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e)
+- fix(card): Remove the obsolete but harmful declaration regarding wrapping button and link styles. - [see commit 34c78df](https://github.com/db-ux-design-system/core-web/commit/34c78dffd4f43b0ac740574358b426a562e05cd0)
 
-- Set border of select, textarea, custom select and input to corresponding color when in/valid state is set. - [see commit 797a114](https://github.com/db-ux-design-system/core-web/commit/797a114d7abc680667276f8ffc2f7f4482d89d3e)
+- Set border of select, textarea, custom select and input to corresponding color when in/valid state is set. - [see commit 2a02263](https://github.com/db-ux-design-system/core-web/commit/2a022632f8fea7445e77fb632f109d6cd093e2d3)
 
 ## 4.0.1
 
@@ -54,25 +79,17 @@ _version bump_
 
 ### Patch Changes
 
-- 0c20c00: fix: color mode for textarea resizer control set by color-mode-switch documentation UI component
-- 0c20c00: refactor: enabling `hidden` HTML attribute in every context in which we need to set overwriting styling declarations (`display`)
-- Updated dependencies [0c20c00]
-- Updated dependencies [0c20c00]
-  - @db-ux/core-components@3.1.17
-  - @db-ux/core-foundations@3.1.17
+- fix: color mode for textarea resizer control set by color-mode-switch documentation UI component - [see commit 354e270](https://github.com/db-ux-design-system/core-web/commit/354e27029a4378288a97ed5e31b75c11758f0c01)
+- refactor: enabling `hidden` HTML attribute in every context in which we need to set overwriting styling declarations (`display`) - [see commit 4826455](https://github.com/db-ux-design-system/core-web/commit/4826455637590b6ae780afb93abb9effe9380342)
 
 ## 3.1.16
 
 ### Patch Changes
 
-- a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode:
+- a28eb71: fix(custom-select): keyboard navigation for option groups in single-select mode - [see commit 6d60bab](https://github.com/db-ux-design-system/core-web/commit/6d60bab2eb87f16a9ffa942085bffd658564769c):
   - Fixes a keyboard accessibility issue where users could not navigate to options in subsequent option groups using arrow keys in single-select mode.
   - Now, all options are accessible via keyboard regardless of group boundaries.
-- a28eb71: fix: JS framework core-components packages are missing `@db-ux` dependencies
-- Updated dependencies [a28eb71]
-- Updated dependencies [a28eb71]
-  - @db-ux/core-components@3.1.16
-  - @db-ux/core-foundations@3.1.16
+- fix: JS framework core-components packages are missing `@db-ux` dependencies - [see commit 49df866](https://github.com/db-ux-design-system/core-web/commit/49df866e753a9459f5acdca4ad1e19141b477471)
 
 ## 3.1.15
 

package/README.md

@@ -59,17 +59,22 @@ import { DBButton } from '@db-ux/react-core-components';
 ...
 ```
 
-## Documentation for AI Agents
+## AI Agent Support
 
-We provide a documentation for every component in the DB UX Design System via `docs` folder.
-To consume those documentation for AI Agents (currently GitHub Copilot) the best way is to copy the `docs` folder into your project.
+For developers using AI coding assistants like GitHub Copilot or Amazon Q, we provide the [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) tool that automatically adds DB UX Design System documentation to your repository.
 
-We provide a [CLI tool (`@db-ux/agent-cli`)](https://www.npmjs.com/package/@db-ux/agent-cli) to do this automatically, which you can run with:
+### Quick Start
+
+Run this command in your repository:
 
 ```shell
 npx @db-ux/agent-cli
 ```
 
+This will create or update `.github/copilot-instructions.md` with component documentation based on your installed `@db-ux` packages, helping AI agents provide better suggestions.
+
+📖 **[Learn more about `@db-ux/agent-cli` node package](packages/agent-cli/README.md)**
+
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.

package/dist/components/checkbox/checkbox.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 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 { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { addCheckedResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 function DBCheckboxFn(props, component) {
     var _a;
@@ -16,6 +17,7 @@ function DBCheckboxFn(props, component) {
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -49,7 +51,7 @@ function DBCheckboxFn(props, component) {
             set_descByIds(undefined);
         }
     }
-    function handleChange(event) {
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -111,6 +113,27 @@ function DBCheckboxFn(props, component) {
             setInitialized(false);
         }
     }, [initialized, _ref.current, props.checked]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultChecked = props.defaultChecked;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addCheckedResetEventListener(_ref.current, {
+                checked: props.checked,
+                defaultChecked,
+            }, (event) => {
+                handleChange(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     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-asterisk": getHideProp(props.showRequiredAsterisk), "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: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_a = props.ariaDescribedBy) !== null && _a !== void 0 ? _a : _descByIds })),

package/dist/components/custom-select/custom-select.js

@@ -7,6 +7,7 @@ import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey,
 import { DocumentClickListener } from "../../utils/document-click-listener";
 import { DocumentScrollListener } from "../../utils/document-scroll-listener";
 import { handleFixedDropdown } from "../../utils/floating-components";
+import { addResetEventListener, } from "../../utils/form-components";
 import DBButton from "../button/button";
 import DBCustomSelectDropdown from "../custom-select-dropdown/custom-select-dropdown";
 import DBCustomSelectListItem from "../custom-select-list-item/custom-select-list-item";
@@ -35,6 +36,7 @@ function DBCustomSelectFn(props, component) {
     const [_infoTextId, set_infoTextId] = useState(() => undefined);
     const [_validity, set_validity] = useState(() => "no-validation");
     const [_userInteraction, set_userInteraction] = useState(() => false);
+    const [abortController, setAbortController] = useState(() => undefined);
     const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_selectedLabels, set_selectedLabels] = useState(() => "");
     const [_selectedLabelsId, set_selectedLabelsId] = useState(() => undefined);
@@ -69,7 +71,7 @@ function DBCustomSelectFn(props, component) {
         }
         /* For a11y reasons we need to map the correct message with the select */
         if (!((_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.validity.valid) || props.validation === "invalid") {
-            set_descByIds(_invalidMessageId);
+            setDescById(_invalidMessageId);
             set_invalidMessage(props.invalidMessage ||
                 ((_b = selectRef.current) === null || _b === void 0 ? void 0 : _b.validationMessage) ||
                 DEFAULT_INVALID_MESSAGE);
@@ -84,7 +86,7 @@ function DBCustomSelectFn(props, component) {
         else if (hasValidState() &&
             ((_d = selectRef.current) === null || _d === void 0 ? void 0 : _d.validity.valid) &&
             props.required) {
-            set_descByIds(_validMessageId);
+            setDescById(_validMessageId);
             if (hasVoiceOver()) {
                 set_voiceOverFallback((_e = props.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE);
                 delay(() => set_voiceOverFallback(""), 1000);
@@ -92,11 +94,11 @@ function DBCustomSelectFn(props, component) {
             set_validity((_f = props.validation) !== null && _f !== void 0 ? _f : "valid");
         }
         else if (stringPropVisible(props.message, props.showMessage)) {
-            set_descByIds(_messageId);
+            setDescById(_messageId);
             set_validity((_g = props.validation) !== null && _g !== void 0 ? _g : "no-validation");
         }
         else {
-            set_descByIds(_placeholderId);
+            setDescById(_placeholderId);
             set_validity((_h = props.validation) !== null && _h !== void 0 ? _h : "no-validation");
         }
     }
@@ -547,6 +549,25 @@ function DBCustomSelectFn(props, component) {
             handleValidation();
         }
     }, [_values, selectRef.current]);
+    useEffect(() => {
+        if (selectRef.current) {
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            const initialValues = props.values;
+            addResetEventListener(selectRef.current, () => {
+                const resetValue = initialValues
+                    ? initialValues
+                    : selectRef.current.value
+                        ? [selectRef.current.value]
+                        : [];
+                handleOptionSelected(resetValue);
+                handleValidation();
+            }, controller.signal);
+        }
+    }, [selectRef.current]);
     useEffect(() => {
         set_validity(props.validation);
     }, [props.validation]);
@@ -635,6 +656,11 @@ function DBCustomSelectFn(props, component) {
             ((_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.validationMessage) ||
             DEFAULT_INVALID_MESSAGE);
     }, [selectRef.current, props.invalidMessage]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     return (React.createElement("div", Object.assign({ 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", "onOptionSelected", "onAmountChange", "onDropdownToggle"]), 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-custom-select", props.className), "aria-invalid": _validity === "invalid", "data-custom-validity": _validity, "data-width": props.formFieldWidth, "data-variant": props.variant === "floating" &&
             props.selectedType === "tag" &&
             props.multiple
@@ -646,7 +672,9 @@ function DBCustomSelectFn(props, component) {
             props.children,
             props.options ? (React.createElement(React.Fragment, null,
                 React.createElement("summary", { className: "db-custom-select-form-field", id: _summaryId, "aria-disabled": getBooleanAsString(props.disabled), "aria-labelledby": _labelId },
-                    (_selectedLabels === null || _selectedLabels === void 0 ? void 0 : _selectedLabels.length) ? (React.createElement("span", { "data-visually-hidden": getBooleanAsString(props.selectedType === "tag"), id: _selectedLabelsId }, _selectedLabels)) : null,
+                    (_selectedLabels === null || _selectedLabels === void 0 ? void 0 : _selectedLabels.length) ? (React.createElement("span", { "data-visually-hidden": getBooleanAsString(props.selectedType === "tag"), id: _selectedLabelsId },
+                        props.selectedPrefix ? (React.createElement("span", { "data-visually-hidden": "true" }, props.selectedPrefix)) : null,
+                        _selectedLabels)) : null,
                     props.selectedType === "tag" ? (React.createElement("div", null, _selectedOptions === null || _selectedOptions === void 0 ? void 0 : _selectedOptions.map((option, index) => (React.createElement(DBTag, { emphasis: "strong", behavior: "removable", removeButton: getTagRemoveLabel(option), onRemove: (event) => handleTagRemove(option, event), key: getOptionKey(option, "tag-") }, getOptionLabel(option)))))) : null),
                 React.createElement(DBCustomSelectDropdown, { width: props.dropdownWidth },
                     searchEnabled ? (React.createElement("div", null,

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

@@ -140,6 +140,11 @@ export type DBCustomSelectDefaultProps = {
      * You need to define the empty state as well based on selected options.
      */
     selectedLabels?: string;
+    /**
+     * Optional: Prefix text announced by screen readers before the selection
+     * (e.g., "Ausgewählt" or "Selected").
+     */
+    selectedPrefix?: string;
     /**
      * Change the selected type for values shown in multi select
      */

package/dist/components/input/input.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 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 { cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, hasVoiceOver, isArrayOfStrings, isIOSSafari, stringPropVisible, uuid, } from "../../utils";
+import { addValueResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 function DBInputFn(props, component) {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -17,6 +18,7 @@ function DBInputFn(props, component) {
     const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_value, set_value] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -50,13 +52,13 @@ function DBInputFn(props, component) {
             set_descByIds(undefined);
         }
     }
-    function handleInput(event) {
+    function handleInput(event, reset) {
         if (props.onInput) {
             props.onInput(event);
         }
         handleValidation();
     }
-    function handleChange(event) {
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -114,6 +116,28 @@ function DBInputFn(props, component) {
     useEffect(() => {
         set_value(props.value);
     }, [props.value]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultValue = props.defaultValue;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addValueResetEventListener(_ref.current, {
+                value: props.value,
+                defaultValue,
+            }, (event) => {
+                handleChange(event, true);
+                handleInput(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     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-show-icon": getBooleanAsString((_a = props.showIconLeading) !== null && _a !== void 0 ? _a : props.showIcon), "data-icon": (_b = props.iconLeading) !== null && _b !== void 0 ? _b : props.icon, "data-icon-trailing": props.iconTrailing, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing) }),
         React.createElement("label", { htmlFor: _id }, (_c = props.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL),
         React.createElement("input", 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"]), { id: _id, name: props.name, type: props.type || "text", multiple: getBoolean(props.multiple, "multiple"), placeholder: (_d = props.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getNumber(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getInputValue(props.max, props.type), min: getInputValue(props.min, props.type), readOnly: getBoolean(props.readOnly, "readOnly") ||

package/dist/components/notification/notification.js

@@ -16,7 +16,7 @@ function DBNotificationFn(props, component) {
             props.onClose(event);
         }
     }
-    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-show-icon": getBooleanAsString(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": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(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/radio/model.d.ts

@@ -1,5 +1,5 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, InputEventProps, InputEventState, SizeProps } from '../../shared/model';
 export type DBRadioDefaultProps = {};
-export type DBRadioProps = DBRadioDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & SizeProps;
+export type DBRadioProps = DBRadioDefaultProps & GlobalProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & SizeProps;
 export type DBRadioDefaultState = {};
-export type DBRadioState = DBRadioDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;
+export type DBRadioState = DBRadioDefaultState & GlobalState & InputEventState<HTMLInputElement> & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel"> & import("../../shared/model").GlobalProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<any>>;
+declare const DBRadio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "value" | "size" | "checked" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").FocusEventProps<HTMLInputElement> | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | keyof import("../../shared/model").InputEventProps<HTMLInputElement>> & import("../../shared/model").GlobalProps & import("../../shared/model").InputEventProps<HTMLInputElement> & import("../../shared/model").ChangeEventProps<HTMLInputElement> & import("../../shared/model").FocusEventProps<HTMLInputElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").SizeProps & React.RefAttributes<any>>;
 export default DBRadio;

package/dist/components/radio/radio.js

@@ -2,12 +2,19 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBoolean, getHideProp, uuid } from "../../utils";
+import { cls, delay, getBoolean, getHideProp, uuid } from "../../utils";
+import { addResetEventListener, } from "../../utils/form-components";
 function DBRadioFn(props, component) {
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [_id, set_id] = useState(() => undefined);
-    function handleChange(event) {
+    const [abortController, setAbortController] = useState(() => undefined);
+    function handleInput(event, reset) {
+        if (props.onInput) {
+            props.onInput(event);
+        }
+    }
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -32,8 +39,35 @@ function DBRadioFn(props, component) {
             _ref.current.checked = true;
         }
     }, [initialized, _ref.current, props.checked]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultChecked = props.defaultChecked;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addResetEventListener(_ref.current, (event) => {
+                void delay(() => {
+                    const resetChecked = props.checked
+                        ? props.checked
+                        : defaultChecked
+                            ? defaultChecked
+                            : _ref.current.checked;
+                    const valueEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: "", checked: resetChecked }) });
+                    handleChange(valueEvent, true);
+                    handleInput(valueEvent, true);
+                }, 1);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     return (React.createElement("label", Object.assign({ "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk) }, 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: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
+        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: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), onInput: (event) => handleInput(event), 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 DBRadio = forwardRef(DBRadioFn);

package/dist/components/select/select.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 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 { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { addValueResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 function DBSelectFn(props, component) {
     var _a, _b, _c, _d;
@@ -18,6 +19,7 @@ function DBSelectFn(props, component) {
     const [_value, set_value] = useState(() => "");
     const [initialized, setInitialized] = useState(() => false);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -59,13 +61,13 @@ function DBSelectFn(props, component) {
             props.onClick(event);
         }
     }
-    function handleInput(event) {
+    function handleInput(event, reset) {
         if (props.onInput) {
             props.onInput(event);
         }
         handleValidation();
     }
-    function handleChange(event) {
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -126,6 +128,28 @@ function DBSelectFn(props, component) {
     useEffect(() => {
         set_value(props.value);
     }, [props.value]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultValue = props.defaultValue;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addValueResetEventListener(_ref.current, {
+                value: props.value,
+                defaultValue,
+            }, (event) => {
+                handleChange(event, true);
+                handleInput(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     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-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-icon": props.icon, "data-show-icon": getBooleanAsString(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: getBoolean(props.required, "required"), disabled: getBoolean(props.disabled, "disabled"), id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds }),

package/dist/components/switch/switch.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 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 { cls, delay, getBoolean, getBooleanAsString, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { addCheckedResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 function DBSwitchFn(props, component) {
     var _a, _b, _c;
@@ -15,6 +16,7 @@ function DBSwitchFn(props, component) {
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -50,7 +52,7 @@ function DBSwitchFn(props, component) {
         }
         set_descByIds(undefined);
     }
-    function handleChange(event) {
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -85,6 +87,27 @@ function DBSwitchFn(props, component) {
         props.invalidMessage,
         props.checked,
     ]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultChecked = props.defaultChecked;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addCheckedResetEventListener(_ref.current, {
+                checked: props.checked,
+                defaultChecked,
+            }, (event) => {
+                handleChange(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     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"]), { 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"]), { 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) })),

package/dist/components/textarea/textarea.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 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";
 import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { addValueResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 function DBTextareaFn(props, component) {
     var _a, _b, _c, _d;
@@ -16,6 +17,7 @@ function DBTextareaFn(props, component) {
     const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_value, set_value] = useState(() => "");
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
     function hasValidState() {
         var _a;
         return !!((_a = props.validMessage) !== null && _a !== void 0 ? _a : props.validation === "valid");
@@ -49,13 +51,13 @@ function DBTextareaFn(props, component) {
             set_descByIds(undefined);
         }
     }
-    function handleInput(event) {
+    function handleInput(event, reset) {
         if (props.onInput) {
             props.onInput(event);
         }
         handleValidation();
     }
-    function handleChange(event) {
+    function handleChange(event, reset) {
         if (props.onChange) {
             props.onChange(event);
         }
@@ -101,6 +103,28 @@ function DBTextareaFn(props, component) {
     useEffect(() => {
         set_value(props.value);
     }, [props.value]);
+    useEffect(() => {
+        if (_ref.current) {
+            const defaultValue = props.defaultValue;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addValueResetEventListener(_ref.current, {
+                value: props.value,
+                defaultValue,
+            }, (event) => {
+                handleChange(event, true);
+                handleInput(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController === null || abortController === void 0 ? void 0 : abortController.abort();
+        };
+    }, []);
     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-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"]), { 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") ||

package/dist/shared/model.d.ts

@@ -365,6 +365,10 @@ export type FormState = {
      * This is an internal Fallback
      */
     _voiceOverFallback?: string;
+    /**
+     * We use this to remove form event listener
+     */
+    abortController?: AbortController;
 };
 export type InitializedState = {
     initialized: boolean;
@@ -461,7 +465,7 @@ export type InputEventProps<T> = {
     onInput?: (event: InputEvent<T>) => void;
 };
 export type InputEventState<T> = {
-    handleInput: (event: InputEvent<T> | any) => void;
+    handleInput: (event: InputEvent<T> | any, reset?: boolean) => void;
 };
 export type ChangeEvent<T> = React.ChangeEvent<T>;
 export type ChangeEventProps<T> = {
@@ -469,7 +473,7 @@ export type ChangeEventProps<T> = {
     onChange?: (event: ChangeEvent<T>) => void;
 };
 export type ChangeEventState<T> = {
-    handleChange: (event: ChangeEvent<T> | any) => void;
+    handleChange: (event: ChangeEvent<T> | any, reset?: boolean) => void;
 };
 export type InteractionEvent<T> = React.FocusEvent<T>;
 export type FocusEventProps<T> = {

package/dist/utils/form-components.d.ts

@@ -1,2 +1,11 @@
 export declare const handleFrameworkEventAngular: (component: any, event: any, modelValue?: string) => void;
 export declare const handleFrameworkEventVue: (emit: (event: string, ...args: any[]) => void, event: any, modelValue?: string) => void;
+export declare const addResetEventListener: (element: any, resetFunction: (event: Event) => void, signal: AbortSignal) => void;
+export declare const addCheckedResetEventListener: (element: any, props: {
+    checked?: boolean | string;
+    defaultChecked?: boolean;
+}, resetFunction: (event: any) => void, signal: AbortSignal) => void;
+export declare const addValueResetEventListener: (element: any, props: {
+    value?: string;
+    defaultValue?: string;
+}, resetFunction: (event: any) => void, signal: AbortSignal) => void;

package/dist/utils/form-components.js

@@ -1,8 +1,39 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { delay } from './index';
 export const handleFrameworkEventAngular = (component, event, modelValue = 'value') => {
     component.propagateChange(event.target[modelValue]);
+    component.writeValue(event.target[modelValue]);
 };
 export const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
     // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
     emit(`update:${modelValue}`, event.target[modelValue]);
 };
+export const addResetEventListener = (element, resetFunction, signal) => {
+    if (element.form && !element._dbFormResetListenerAdded) {
+        element.form.addEventListener('reset', (event) => {
+            resetFunction(event);
+        }, {
+            signal
+        });
+        // Mark as added to avoid duplicate listeners
+        element._dbFormResetListenerAdded = true;
+    }
+};
+export const addCheckedResetEventListener = (element, props, resetFunction, signal) => {
+    addResetEventListener(element, (event) => {
+        void delay(() => {
+            const resetValue = props.checked ? props.checked : props.defaultChecked ? props.defaultChecked : element.checked;
+            const valueEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { checked: resetValue }) });
+            resetFunction(valueEvent);
+        }, 1);
+    }, signal);
+};
+export const addValueResetEventListener = (element, props, resetFunction, signal) => {
+    addResetEventListener(element, (event) => {
+        void delay(() => {
+            const resetValue = props.value ? props.value : props.defaultValue ? props.defaultValue : element.value;
+            const valueEvent = Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: resetValue }) });
+            resetFunction(valueEvent);
+        }, 1);
+    }, signal);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "tsc": "tsc --project . --sourceMap false"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.56.0",
+    "@playwright/experimental-ct-react": "1.56.1",
     "@types/react": "18.3.13",
     "react": "18.3.1",
     "react-dom": "18.3.1"
@@ -42,7 +42,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.0.3",
-    "@db-ux/core-foundations": "4.0.3"
+    "@db-ux/core-components": "4.1.0",
+    "@db-ux/core-foundations": "4.1.0"
   }
 }