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

package/dist/components/header/header.js

@@ -8,7 +8,7 @@ import { isEventTargetNavigationItem } from "../../utils/navigation";
 import DBButton from "../button/button";
 import DBDrawer from "../drawer/drawer";
 function DBHeaderFn(props, component) {
-    var _a;
+    var _a, _b, _c;
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [forcedToMobile, setForcedToMobile] = useState(() => false);
@@ -40,7 +40,7 @@ function DBHeaderFn(props, component) {
             setForcedToMobile(true);
         }
     }, [initialized, _ref.current]);
-    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", "data-density", "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", "data-density"]), { className: cls("db-header", props.className), id: props.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", "data-density", "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", "data-density"]), { className: cls("db-header", props.className), id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
         React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: props.closeButtonId, closeButtonText: props.closeButtonText, open: getBoolean(props.drawerOpen), onClose: (event) => handleToggle() },
             React.createElement("div", { className: "db-header-drawer-navigation" },
                 React.createElement("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event) }, props.children),
@@ -59,7 +59,7 @@ function DBHeaderFn(props, component) {
                     React.createElement(React.Fragment, null, props.primaryAction))),
             React.createElement("div", { className: "db-header-action-container" },
                 React.createElement("div", { className: "db-header-burger-menu-container" },
-                    React.createElement(DBButton, { icon: "menu", variant: "ghost", noText: true, onClick: (event) => handleToggle() }, (_a = props.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)),
+                    React.createElement(DBButton, { icon: "menu", variant: "ghost", noText: true, onClick: (event) => handleToggle() }, (_c = props.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)),
                 React.createElement("div", { className: "db-header-secondary-action" },
                     React.createElement(React.Fragment, null, props.secondaryAction))))));
 }

package/dist/components/icon/icon.d.ts

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

package/dist/components/icon/icon.js

@@ -4,8 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBIconFn(props, component) {
+    var _a, _b;
     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", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-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)));
+    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", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-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)));
 }
 const DBIcon = forwardRef(DBIconFn);
 export default DBIcon;

package/dist/components/infotext/infotext.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBInfotext: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "semantic" | "text" | keyof import("../..").GlobalProps | "size" | "icon" | "showIcon"> & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").IconProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
+declare const DBInfotext: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "semantic" | "text" | "size" | "wrap" | "icon" | "showIcon"> & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").IconProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").WrapProps & React.RefAttributes<any>>;
 export default DBInfotext;

package/dist/components/infotext/infotext.js

@@ -4,9 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls, getBooleanAsString } from "../../utils";
 function DBInfotextFn(props, component) {
-    var _a;
+    var _a, _b, _c;
     const _ref = component || useRef(component);
-    return (React.createElement("span", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-infotext", props.className), "data-icon": props.icon, "data-semantic": props.semantic, "data-size": props.size, "data-show-icon-leading": getBooleanAsString((_a = props.showIcon) !== null && _a !== void 0 ? _a : true) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("span", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-infotext", props.className), "data-icon": props.icon, "data-semantic": props.semantic, "data-size": props.size, "data-wrap": getBooleanAsString(props.wrap), "data-show-icon-leading": getBooleanAsString((_c = props.showIcon) !== null && _c !== void 0 ? _c : true) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBInfotext = forwardRef(DBInfotextFn);
 export default DBInfotext;

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

@@ -1,5 +1,5 @@
-import { GlobalProps, GlobalState, IconProps, SemanticProps, ShowIconProps, SizeProps, TextProps } from '../../shared/model';
+import { GlobalProps, GlobalState, IconProps, SemanticProps, ShowIconProps, SizeProps, TextProps, WrapProps } from '../../shared/model';
 export type DBInfotextDefaultProps = {};
-export type DBInfotextProps = DBInfotextDefaultProps & GlobalProps & SemanticProps & IconProps & SizeProps & ShowIconProps & TextProps;
+export type DBInfotextProps = DBInfotextDefaultProps & GlobalProps & SemanticProps & IconProps & SizeProps & ShowIconProps & TextProps & WrapProps;
 export type DBInfotextDefaultState = {};
 export type DBInfotextState = DBInfotextDefaultState & GlobalState;

package/dist/components/input/input.js

@@ -8,7 +8,7 @@ import { addValueResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 import { useId } from "react";
 function DBInputFn(props, component) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
@@ -85,16 +85,25 @@ function DBInputFn(props, component) {
             }))
             : _list) || []);
     }
-    useEffect(() => {
-        var _a;
-        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `input-${uuid}`;
+    function resetIds() {
+        var _a, _b, _c;
+        const mId = (_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `input-${uuid}`;
         set_id(mId);
         set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
         set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
         set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
         set_dataListId(mId + DEFAULT_DATALIST_ID_SUFFIX);
+    }
+    useEffect(() => {
+        resetIds();
         set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
     }, []);
+    useEffect(() => {
+        var _a, _b;
+        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            resetIds();
+        }
+    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
     useEffect(() => {
         var _a;
         set_invalidMessage(props.invalidMessage ||
@@ -145,13 +154,13 @@ function DBInputFn(props, component) {
             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", "data-density"]), { 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", "data-density"]), { id: _id, name: props.name, type: props.type || "text", multiple: getBoolean(props.multiple, "multiple"), accept: props.accept, placeholder: (_d = props.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getStep(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") ||
-                getBoolean(props.readonly, "readonly"), form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: getBoolean(props.autofocus, "autofocus"), enterKeyHint: props.enterkeyhint, inputMode: props.inputmode, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": (_e = props.ariaDescribedBy) !== null && _e !== void 0 ? _e : _descByIds, role: ["datetime-local", "date", "time", "week", "month", "color"].includes((_f = props.type) !== null && _f !== void 0 ? _f : "") && isIOSSafari()
+    return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-input", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-show-icon": getBooleanAsString((_b = props.showIconLeading) !== null && _b !== void 0 ? _b : props.showIcon), "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : 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 }, (_d = props.label) !== null && _d !== void 0 ? _d : 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", "data-density"]), { id: _id, name: props.name, type: props.type || "text", multiple: getBoolean(props.multiple, "multiple"), accept: props.accept, placeholder: (_e = props.placeholder) !== null && _e !== void 0 ? _e : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getStep(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") ||
+                getBoolean(props.readonly, "readonly"), form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: getBoolean(props.autofocus, "autofocus"), enterKeyHint: props.enterkeyhint, inputMode: props.inputmode, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": (_f = props.ariaDescribedBy) !== null && _f !== void 0 ? _f : _descByIds, role: ["datetime-local", "date", "time", "week", "month", "color"].includes((_g = props.type) !== null && _g !== void 0 ? _g : "") && isIOSSafari()
                 ? "textbox"
                 : undefined })),
-        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_g = getDataList()) === null || _g === void 0 ? void 0 : _g.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
+        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_h = getDataList()) === null || _h === void 0 ? void 0 : _h.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: props.messageSize || "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { semantic: "successful", id: _validMessageId, size: props.validMessageSize || "small" }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,

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

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

package/dist/components/link/link.js

@@ -4,9 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls, getBooleanAsString } from "../../utils";
 function DBLinkFn(props, component) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const _ref = component || useRef(component);
-    return (React.createElement("a", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, referrerPolicy: (_a = props.referrerpolicy) !== null && _a !== void 0 ? _a : props.referrerPolicy, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "data-size": props.size, "data-show-icon-trailing": getBooleanAsString((_b = props.showIcon) !== null && _b !== void 0 ? _b : true), "data-variant": props.variant, "data-content": props.content || "internal", "data-wrap": getBooleanAsString(props.wrap) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("a", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, referrerPolicy: (_c = props.referrerpolicy) !== null && _c !== void 0 ? _c : props.referrerPolicy, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "data-size": props.size, "data-show-icon-trailing": getBooleanAsString((_d = props.showIcon) !== null && _d !== void 0 ? _d : true), "data-variant": props.variant, "data-content": props.content || "internal", "data-wrap": getBooleanAsString(props.wrap) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBLink = forwardRef(DBLinkFn);
 export default DBLink;

package/dist/components/navigation/navigation.js

@@ -4,8 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBNavigationFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
-    return (React.createElement("nav", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-navigation", props.className) }),
+    return (React.createElement("nav", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-navigation", props.className) }),
         React.createElement("menu", null, props.children)));
 }
 const DBNavigation = forwardRef(DBNavigationFn);

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBNavigationItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | keyof import("../../shared/model").GlobalProps | "icon" | "showIcon" | keyof import("../../shared/model").ClickEventProps<HTMLButtonElement> | "width" | "wrap" | keyof import("./model").DBNavigationItemDefaultProps | keyof import("../../shared/model").NavigationBackButtonProps> & import("./model").DBNavigationItemDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").WrapProps & import("../../shared/model").NavigationBackButtonProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+declare const DBNavigationItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "text" | "wrap" | "icon" | "showIcon" | keyof import("../../shared/model").ClickEventProps<HTMLButtonElement> | "width" | keyof import("./model").DBNavigationItemDefaultProps | keyof import("../../shared/model").NavigationBackButtonProps> & import("./model").DBNavigationItemDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").WrapProps & import("../../shared/model").NavigationBackButtonProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
 export default DBNavigationItem;

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

@@ -7,7 +7,7 @@ import { cls, delay, getBoolean, getBooleanAsString } from "../../utils";
 import { NavigationItemSafeTriangle } from "../../utils/navigation";
 import DBButton from "../button/button";
 function DBNavigationItemFn(props, component) {
-    var _a;
+    var _a, _b, _c;
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [hasAreaPopup, setHasAreaPopup] = useState(() => false);
@@ -62,13 +62,13 @@ function DBNavigationItemFn(props, component) {
             }
         }
     }, [initialized, _ref.current]);
-    return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap), "aria-disabled": getBooleanAsString(props.disabled) }),
+    return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap), "aria-disabled": getBooleanAsString(props.disabled) }),
         !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: getBoolean(props.disabled, "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", "data-force-close": autoClose, 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(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_c = props.backButtonText) !== null && _c !== void 0 ? _c : DEFAULT_BACK))) : null,
                 React.createElement(React.Fragment, null, props.subNavigation)))) : null));
 }
 const DBNavigationItem = forwardRef(DBNavigationItemFn);

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

@@ -1,4 +1,4 @@
-import { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, RoleProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
+import { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, RoleProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
 export declare const NotificationVariantList: readonly ["docked", "standalone", "overlay"];
 export type NotificationVariantType = (typeof NotificationVariantList)[number];
 export declare const NotificationLinkVariantList: readonly ["block", "inline"];
@@ -52,6 +52,6 @@ export type DBNotificationDefaultProps = {
      */
     variant?: NotificationVariantType;
 };
-export type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & RoleProps & CloseEventProps<ClickEvent<HTMLButtonElement>> & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;
+export type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & RoleProps & CloseEventProps<ClickEvent<HTMLButtonElement>> & IconProps & SemanticProps & InnerCloseButtonProps & ShowIconProps & TextProps;
 export type DBNotificationDefaultState = {};
 export type DBNotificationState = DBNotificationDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement>>;

package/dist/components/notification/notification.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import { ClickEvent } from "../../shared/model";
-declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "role" | "semantic" | "text" | keyof import("../../shared/model").GlobalProps | "icon" | "showIcon" | keyof import("../../shared/model").PopoverProps | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("./model").DBNotificationDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>>> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").RoleProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>> & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").InnerCloseButtonProps & import("../../shared/model").PopoverProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "role" | keyof import("../../shared/model").GlobalProps | "semantic" | "text" | "icon" | "showIcon" | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("./model").DBNotificationDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>>> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").RoleProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>> & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").InnerCloseButtonProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
 export default DBNotification;

package/dist/components/notification/notification.js

@@ -6,7 +6,7 @@ import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
 import { cls, getBoolean, getBooleanAsString, getNotificationRole, stringPropVisible, } from "../../utils";
 import DBButton from "../button/button";
 function DBNotificationFn(props, component) {
-    var _a;
+    var _a, _b, _c;
     const _ref = component || useRef(component);
     function handleClose(event) {
         if (!event)
@@ -16,7 +16,7 @@ function DBNotificationFn(props, component) {
             props.onClose(event);
         }
     }
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "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", "data-density"]), { className: cls("db-notification", props.className), role: getNotificationRole({
+    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onClose"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-notification", props.className), role: getNotificationRole({
             semantic: props.semantic,
             role: props.role,
             ariaLive: props.ariaLive,
@@ -26,7 +26,7 @@ function DBNotificationFn(props, component) {
         React.createElement("p", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
         stringPropVisible(props.timestamp, props.showTimestamp) ? (React.createElement("span", null, props.timestamp)) : null,
         React.createElement(React.Fragment, null, props.link),
-        getBoolean(props.closeable, "closeable") ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event) }, (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)) : null));
+        getBoolean(props.closeable, "closeable") ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event) }, (_c = props.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));
 }
 const DBNotification = forwardRef(DBNotificationFn);
 export default DBNotification;

package/dist/components/page/page.js

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, getBooleanAsString } from "../../utils";
 function DBPageFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
     const [fontsLoaded, setFontsLoaded] = useState(() => false);
     const hasInitialized = useRef(false);
@@ -38,7 +39,7 @@ function DBPageFn(props, component) {
             }
         };
     }, []);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-page", props.className), "data-variant": props.variant, "data-fade-in": getBooleanAsString(props.fadeIn), "data-fonts-loaded": getBooleanAsString(fontsLoaded) }),
+    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-page", props.className), "data-variant": props.variant, "data-fade-in": getBooleanAsString(props.fadeIn), "data-fonts-loaded": getBooleanAsString(fontsLoaded) }),
         React.createElement(React.Fragment, null, props.header),
         React.createElement("main", { className: cls("db-main", props.mainClass) }, props.children),
         React.createElement(React.Fragment, null, props.footer)));

package/dist/components/popover/popover.js

@@ -6,7 +6,7 @@ import { cls, getBooleanAsString, delay as utilsDelay } from "../../utils";
 import { DocumentScrollListener } from "../../utils/document-scroll-listener";
 import { handleFixedPopover } from "../../utils/floating-components";
 function DBPopoverFn(props, component) {
-    var _a;
+    var _a, _b, _c;
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [isExpanded, setIsExpanded] = useState(() => false);
@@ -119,9 +119,9 @@ function DBPopoverFn(props, component) {
             }
         }
     }, [_ref.current, isExpanded]);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-popover", props.className) }),
+    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-popover", props.className) }),
         React.createElement(React.Fragment, null, props.trigger),
-        React.createElement("article", { className: "db-popover-content", "data-spacing": props.spacing, "data-gap": getBooleanAsString(props.gap), "data-animation": getBooleanAsString((_a = props.animation) !== null && _a !== void 0 ? _a : true), "data-open": getBooleanAsString(props.open), "data-delay": props.delay, "data-width": props.width, "data-placement": props.placement }, props.children)));
+        React.createElement("article", { className: "db-popover-content", "data-spacing": props.spacing, "data-gap": getBooleanAsString(props.gap), "data-animation": getBooleanAsString((_c = props.animation) !== null && _c !== void 0 ? _c : true), "data-open": getBooleanAsString(props.open), "data-delay": props.delay, "data-width": props.width, "data-placement": props.placement }, props.children)));
 }
 const DBPopover = forwardRef(DBPopoverFn);
 export default DBPopover;

package/dist/components/radio/radio.js

@@ -6,6 +6,7 @@ import { cls, delay, getBoolean, getHideProp } from "../../utils";
 import { addResetEventListener, } from "../../utils/form-components";
 import { useId } from "react";
 function DBRadioFn(props, component) {
+    var _a;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
@@ -31,11 +32,20 @@ function DBRadioFn(props, component) {
             props.onFocus(event);
         }
     }
+    function resetIds() {
+        var _a, _b, _c;
+        set_id((_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `radio-${uuid}`);
+    }
     useEffect(() => {
-        var _a;
         setInitialized(true);
-        set_id((_a = props.id) !== null && _a !== void 0 ? _a : `radio-${uuid}`);
+        resetIds();
     }, []);
+    useEffect(() => {
+        var _a, _b;
+        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            resetIds();
+        }
+    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
     useEffect(() => {
         if (props.checked && initialized && _ref.current) {
             _ref.current.checked = true;

package/dist/components/section/section.js

@@ -4,8 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBSectionFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
-    return (React.createElement("section", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-section", props.className), "data-spacing": props.spacing || "medium", "data-width": props.width }), props.children));
+    return (React.createElement("section", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-section", props.className), "data-spacing": props.spacing || "medium", "data-width": props.width }), props.children));
 }
 const DBSection = forwardRef(DBSectionFn);
 export default DBSection;

package/dist/components/select/select.js

@@ -8,7 +8,7 @@ import { addValueResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 import { useId } from "react";
 function DBSelectFn(props, component) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
@@ -100,17 +100,26 @@ function DBSelectFn(props, component) {
         // Default: show empty option for non-required selects
         return !props.required;
     }
-    useEffect(() => {
-        var _a;
-        setInitialized(true);
-        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `select-${uuid}`;
+    function resetIds() {
+        var _a, _b, _c;
+        const mId = (_c = (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : `select-${uuid}`;
         set_id(mId);
         set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
         set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
         set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
         set_placeholderId(mId + DEFAULT_PLACEHOLDER_ID_SUFFIX);
+    }
+    useEffect(() => {
+        setInitialized(true);
+        resetIds();
         set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
     }, []);
+    useEffect(() => {
+        var _a, _b;
+        if ((_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id) {
+            resetIds();
+        }
+    }, [props.id, (_a = props.propOverrides) === null || _a === void 0 ? void 0 : _a.id]);
     useEffect(() => {
         var _a;
         set_invalidMessage(props.invalidMessage ||
@@ -167,10 +176,10 @@ function DBSelectFn(props, component) {
         };
     }, []);
     return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-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", "data-density"]), { 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 }),
+        React.createElement("label", { htmlFor: _id }, (_b = props.label) !== null && _b !== void 0 ? _b : 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", "data-density"]), { 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": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds }),
             props.variant === "floating" || !!props.placeholder ? (React.createElement("option", { className: "placeholder", value: "", "data-show-empty-option": getBooleanAsString(shouldShowEmptyOption()) })) : null,
-            ((_c = props.options) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(React.Fragment, null, (_d = props.options) === null || _d === void 0 ? void 0 : _d.map((option) => {
+            ((_d = props.options) === null || _d === void 0 ? void 0 : _d.length) ? (React.createElement(React.Fragment, null, (_e = props.options) === null || _e === void 0 ? void 0 : _e.map((option) => {
                 var _a;
                 return option.options ? (React.createElement("optgroup", { label: getOptionLabel(option), key: getOptionKey(option, "select-optgroup-") }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { value: optgroupOption.value, disabled: optgroupOption.disabled, key: getOptionKey(optgroupOption, "select-optgroup-option-") }, getOptionLabel(optgroupOption)))))) : (React.createElement("option", { value: option.value, disabled: option.disabled, key: getOptionKey(option, "select-option-") }, getOptionLabel(option)));
             }))) : (React.createElement(React.Fragment, null, props.children))),

package/dist/components/stack/stack.js

@@ -4,8 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls, getBooleanAsString } from "../../utils";
 function DBStackFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-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));
+    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-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));
 }
 const DBStack = forwardRef(DBStackFn);
 export default DBStack;

package/dist/components/switch/switch.js

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

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

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