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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @db-ux/react-core-components
 
+## 4.5.0
+
+### Minor Changes
+
+- feat: add `wrap` property for possible inline components (badge, button, infotext, tooltip) besides link and navigation-item, which already have the `wrap` property - [see commit c08970c](https://github.com/db-ux-design-system/core-web/commit/c08970c640f24abee93ed17de258f4e15fa7cb7f)
+
+- feat: add `propOverrides` property for components to provide a possibility for avoiding duplicated `id` property on Angular and Web Components - [see commit 9720ebb](https://github.com/db-ux-design-system/core-web/commit/9720ebb9c47302ed0d9939ce219a7d876ba0155c)
+
+- feat: add DBCustomButton for development to style `<a>` or `<label><input/>` children - [see commit a50323b](https://github.com/db-ux-design-system/core-web/commit/a50323b21363981c02bbabf7828a6f2d94f11e4d)
+
 ## 4.4.3
 
 ### Patch Changes

package/dist/components/accordion/accordion.js

@@ -6,7 +6,7 @@ import { cls } from "../../utils";
 import DBAccordionItem from "../accordion-item/accordion-item";
 import { useId } from "react";
 function DBAccordionFn(props, component) {
-    var _a;
+    var _a, _b, _c;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [_name, set_name] = useState(() => "");
@@ -80,9 +80,9 @@ function DBAccordionFn(props, component) {
             set_initOpenIndexDone(false);
         }
     }, [_ref.current, _initOpenIndexDone, props.initOpenIndex]);
-    return (React.createElement("ul", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: 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-accordion", props.className), "data-variant": props.variant }),
+    return (React.createElement("ul", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-accordion", props.className), "data-variant": props.variant }),
         !props.items ? React.createElement(React.Fragment, null, props.children) : null,
-        props.items ? (React.createElement(React.Fragment, null, (_a = convertItems()) === null || _a === void 0 ? void 0 : _a.map((item, index) => (React.createElement(DBAccordionItem, { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text }))))) : null));
+        props.items ? (React.createElement(React.Fragment, null, (_c = convertItems()) === null || _c === void 0 ? void 0 : _c.map((item, index) => (React.createElement(DBAccordionItem, { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text }))))) : null));
 }
 const DBAccordion = forwardRef(DBAccordionFn);
 export default DBAccordion;

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

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

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

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, getBooleanAsString } from "../../utils";
 function DBAccordionItemFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
     const [_open, set_open] = useState(() => false);
     const [_name, set_name] = useState(() => undefined);
@@ -44,7 +45,7 @@ function DBAccordionItemFn(props, component) {
             set_name(props.name);
         }
     }, [props.name]);
-    return (React.createElement("li", Object.assign({ 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-accordion-item", props.className) }),
+    return (React.createElement("li", Object.assign({ id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-accordion-item", props.className) }),
         React.createElement("details", Object.assign({ "aria-disabled": getBooleanAsString(props.disabled), ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density", "onToggle"]), { name: _name, open: _open }),
             React.createElement("summary", { onClick: (event) => handleToggle(event) },
                 props.headlinePlain ? React.createElement(React.Fragment, null, props.headlinePlain) : null,

package/dist/components/badge/badge.d.ts

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

package/dist/components/badge/badge.js

@@ -3,9 +3,9 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_LABEL } from "../../shared/constants";
-import { cls } from "../../utils";
+import { cls, getBooleanAsString } from "../../utils";
 function DBBadgeFn(props, component) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     useEffect(() => {
@@ -26,7 +26,7 @@ function DBBadgeFn(props, component) {
             }
         }
     }, [_ref.current, initialized]);
-    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-badge", props.className), "data-semantic": props.semantic, "data-size": props.size, "data-emphasis": props.emphasis, "data-placement": props.placement, "data-label": ((_a = props.placement) === null || _a === void 0 ? void 0 : _a.startsWith("corner")) && ((_b = props.label) !== null && _b !== void 0 ? _b : DEFAULT_LABEL) }), 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-badge", props.className), "data-semantic": props.semantic, "data-size": props.size, "data-emphasis": props.emphasis, "data-placement": props.placement, "data-wrap": getBooleanAsString(props.wrap), "data-label": ((_c = props.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = props.label) !== null && _d !== void 0 ? _d : DEFAULT_LABEL) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBBadge = forwardRef(DBBadgeFn);
 export default DBBadge;

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

@@ -1,4 +1,4 @@
-import { EmphasisProps, GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TextProps } from '../../shared/model';
+import { EmphasisProps, GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TextProps, WrapProps } from '../../shared/model';
 export declare const BadgePlacementList: readonly ["inline", "corner-top-left", "corner-top-right", "corner-center-left", "corner-center-right", "corner-bottom-left", "corner-bottom-right"];
 export type BadgePlacementType = (typeof BadgePlacementList)[number];
 export type DBBadgeDefaultProps = {
@@ -11,6 +11,6 @@ export type DBBadgeDefaultProps = {
      */
     label?: string;
 };
-export type DBBadgeProps = DBBadgeDefaultProps & GlobalProps & SemanticProps & SizeProps & EmphasisProps & TextProps;
+export type DBBadgeProps = DBBadgeDefaultProps & GlobalProps & SemanticProps & SizeProps & EmphasisProps & TextProps & WrapProps;
 export type DBBadgeDefaultState = {};
 export type DBBadgeState = DBBadgeDefaultState & GlobalState & InitializedState;

package/dist/components/brand/brand.d.ts

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

package/dist/components/brand/brand.js

@@ -5,9 +5,9 @@ import { useRef, forwardRef } from "react";
 import { DEFAULT_ICON } from "../../shared/constants";
 import { cls, getBooleanAsString } from "../../utils";
 function DBBrandFn(props, component) {
-    var _a;
+    var _a, _b, _c;
     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"]), { "data-icon": props.hideLogo ? "none" : (_a = props.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(props.showIcon), 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-brand", props.className) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, 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"]), { "data-icon": props.hideLogo ? "none" : (_a = props.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(props.showIcon), id: (_b = props.id) !== null && _b !== void 0 ? _b : (_c = props.propOverrides) === null || _c === void 0 ? void 0 : _c.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-brand", props.className) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBBrand = forwardRef(DBBrandFn);
 export default DBBrand;

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<any>, "text" | keyof import("../..").GlobalProps | "size" | "icon" | "showIcon" | keyof import("./model").DBButtonDefaultProps | keyof import("../..").ClickEventProps<HTMLButtonElement> | "width" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing"> & import("./model").DBButtonDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLButtonElement> & import("../..").IconProps & import("../..").WidthProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").ShowIconLeadingProps & import("../..").ShowIconTrailingProps & import("../..").IconLeadingProps & import("../..").IconTrailingProps & React.RefAttributes<any>>;
+declare const DBButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<any>, keyof import("../..").GlobalProps | "text" | "variant" | "size" | "wrap" | "icon" | "showIcon" | keyof import("./model").DBButtonDefaultProps | keyof import("../..").ClickEventProps<HTMLButtonElement> | "width" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | "noText"> & import("./model").DBButtonDefaultProps & import("./model").DBButtonSharedProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLButtonElement> & import("../..").IconProps & import("../..").WidthProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").ShowIconLeadingProps & import("../..").ShowIconTrailingProps & import("../..").IconLeadingProps & import("../..").IconTrailingProps & import("../..").WrapProps & import("../..").NoTextProps & React.RefAttributes<any>>;
 export default DBButton;

package/dist/components/button/button.js

@@ -4,7 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls, getBoolean, getBooleanAsString } from "../../utils";
 function DBButtonFn(props, component) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const _ref = component || useRef(component);
     function getButtonType() {
         if (props.type) {
@@ -15,7 +15,7 @@ function DBButtonFn(props, component) {
         }
         return "submit";
     }
-    return (React.createElement("button", 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-button", props.className), type: getButtonType(), disabled: getBoolean(props.disabled, "disabled"), "data-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-show-icon": getBooleanAsString((_b = props.showIconLeading) !== null && _b !== void 0 ? _b : props.showIcon), "data-icon-trailing": props.iconTrailing, "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-size": props.size, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("button", 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-button", props.className), type: getButtonType(), disabled: getBoolean(props.disabled, "disabled"), "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-show-icon": getBooleanAsString((_d = props.showIconLeading) !== null && _d !== void 0 ? _d : props.showIcon), "data-icon-trailing": props.iconTrailing, "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-size": props.size, "data-width": props.width, "data-variant": props.variant, "data-wrap": getBooleanAsString(props.wrap), "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBButton = forwardRef(DBButtonFn);
 export default DBButton;

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

@@ -1,8 +1,14 @@
-import { ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeProps, TextProps, WidthProps } from '../../shared/model';
+import { ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, NoTextProps, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeProps, TextProps, WidthProps, WrapProps } from '../../shared/model';
 export declare const ButtonVariantList: readonly ["outlined", "brand", "filled", "ghost"];
 export type ButtonVariantType = (typeof ButtonVariantList)[number];
 export declare const ButtonTypeList: readonly ["button", "reset", "submit"];
 export type ButtonTypeType = (typeof ButtonTypeList)[number];
+export type DBButtonSharedProps = {
+    /**
+     * Variant of the button. Only use one primary button as a CTA on a page; otherwise, use one of the adaptive buttons.
+     */
+    variant?: ButtonVariantType | string;
+};
 export type DBButtonDefaultProps = {
     /**
      * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
@@ -16,10 +22,6 @@ export type DBButtonDefaultProps = {
      * The name attribute specifies a [name attributes value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name) for the button.
      */
     name?: string;
-    /**
-     * Define the text next to the icon specified via the icon Property to get hidden.
-     */
-    noText?: boolean | string;
     /**
      * The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).
      */
@@ -28,12 +30,8 @@ export type DBButtonDefaultProps = {
      * The value attribute specifies an initial [value for the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value).
      */
     value?: string;
-    /**
-     * Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons.
-     */
-    variant?: ButtonVariantType | string;
 };
-export type DBButtonProps = DBButtonDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & SizeProps & ShowIconProps & TextProps & ShowIconLeadingProps & ShowIconTrailingProps & IconLeadingProps & IconTrailingProps;
+export type DBButtonProps = DBButtonDefaultProps & DBButtonSharedProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & SizeProps & ShowIconProps & TextProps & ShowIconLeadingProps & ShowIconTrailingProps & IconLeadingProps & IconTrailingProps & WrapProps & NoTextProps;
 export type DBButtonDefaultState = {
     getButtonType: () => ButtonTypeType;
 };

package/dist/components/card/card.js

@@ -4,13 +4,14 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBCardFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
     function handleClick(event) {
         if (props.onClick) {
             props.onClick(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"]), { 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-card", props.className), "data-behavior": props.behavior, "data-elevation-level": props.elevationLevel, "data-spacing": props.spacing, onClick: (event) => handleClick(event) }), 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-card", props.className), "data-behavior": props.behavior, "data-elevation-level": props.elevationLevel, "data-spacing": props.spacing, onClick: (event) => handleClick(event) }), props.children));
 }
 const DBCard = forwardRef(DBCardFn);
 export default DBCard;

package/dist/components/checkbox/checkbox.js

@@ -8,7 +8,7 @@ import { addCheckedResetEventListener, } from "../../utils/form-components";
 import DBInfotext from "../infotext/infotext";
 import { useId } from "react";
 function DBCheckboxFn(props, component) {
-    var _a;
+    var _a, _b;
     const uuid = useId();
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
@@ -69,16 +69,25 @@ function DBCheckboxFn(props, component) {
             props.onFocus(event);
         }
     }
-    useEffect(() => {
-        var _a;
-        setInitialized(true);
-        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `checkbox-${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 : `checkbox-${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(() => {
+        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 ||
@@ -138,7 +147,7 @@ function DBCheckboxFn(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-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", "data-density"]), { 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 })),
+            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", "data-density"]), { 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": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds })),
             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", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBCustomButton: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("../..").GlobalProps | "variant" | "size" | "wrap" | "icon" | "showIcon" | "width" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | "noText"> & import("../..").DBButtonSharedProps & import("../..").GlobalProps & import("../..").IconProps & import("../..").WidthProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").ShowIconLeadingProps & import("../..").ShowIconTrailingProps & import("../..").IconLeadingProps & import("../..").IconTrailingProps & import("../..").NoTextProps & import("../..").WrapProps & React.RefAttributes<HTMLDivElement>>;
+export default DBCustomButton;

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

@@ -0,0 +1,12 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls, getBooleanAsString } from "../../utils";
+function DBCustomButtonFn(props, component) {
+    var _a, _b, _c, _d;
+    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: (_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-custom-button", props.className), "data-icon": (_c = props.iconLeading) !== null && _c !== void 0 ? _c : props.icon, "data-show-icon": getBooleanAsString((_d = props.showIconLeading) !== null && _d !== void 0 ? _d : props.showIcon), "data-icon-trailing": props.iconTrailing, "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-size": props.size, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText) }), props.children));
+}
+const DBCustomButton = forwardRef(DBCustomButtonFn);
+export default DBCustomButton;

package/dist/components/custom-button/index.d.ts

@@ -0,0 +1 @@
+export { default as DBCustomButton } from './custom-button';

package/dist/components/custom-button/index.js

@@ -0,0 +1 @@
+export { default as DBCustomButton } from './custom-button';

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

@@ -0,0 +1,6 @@
+import { GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, NoTextProps, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeProps, WidthProps, WrapProps } from '../../shared/model';
+import { DBButtonSharedProps } from '../button/model';
+export type DBCustomButtonDefaultProps = {};
+export type DBCustomButtonProps = DBCustomButtonDefaultProps & DBButtonSharedProps & GlobalProps & IconProps & WidthProps & SizeProps & ShowIconProps & ShowIconLeadingProps & ShowIconTrailingProps & IconLeadingProps & IconTrailingProps & NoTextProps & WrapProps;
+export type DBCustomButtonDefaultState = {};
+export type DBCustomButtonState = DBCustomButtonDefaultState & GlobalState;

package/dist/components/custom-button/model.js

@@ -0,0 +1 @@
+export {};

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

@@ -18,7 +18,7 @@ import DBTag from "../tag/tag";
 import DBTooltip from "../tooltip/tooltip";
 import { useId } from "react";
 function DBCustomSelectFn(props, component) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     props = Object.assign({ clearSelectionText: "Clear selection", showClearSelection: true }, props);
     const uuid = useId();
     const _ref = component || useRef(component);
@@ -468,13 +468,9 @@ function DBCustomSelectFn(props, component) {
     }
     const [selectAllChecked, setSelectAllChecked] = useState(() => false);
     const [selectAllIndeterminate, setSelectAllIndeterminate] = useState(() => false);
-    function satisfyReact(event) {
-        // This is a function to satisfy React
-        event.stopPropagation();
-    }
-    useEffect(() => {
-        var _a;
-        const mId = (_a = props.id) !== null && _a !== void 0 ? _a : `custom-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 : `custom-select-${uuid}`;
         set_id(mId);
         set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
         set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
@@ -485,6 +481,13 @@ function DBCustomSelectFn(props, component) {
         set_placeholderId(mId + DEFAULT_PLACEHOLDER_ID_SUFFIX);
         set_selectedLabelsId(mId + "-selected-labels");
         set_infoTextId(mId + "-info");
+    }
+    function satisfyReact(event) {
+        // This is a function to satisfy React
+        event.stopPropagation();
+    }
+    useEffect(() => {
+        resetIds();
         set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
         if (typeof window !== "undefined" && "IntersectionObserver" in window) {
             set_observer(new IntersectionObserver((payload) => {
@@ -497,6 +500,12 @@ function DBCustomSelectFn(props, component) {
             }));
         }
     }, []);
+    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 (detailsRef.current) {
             detailsRef.current.addEventListener("focusout", (event) => handleClose(event));
@@ -676,8 +685,8 @@ function DBCustomSelectFn(props, component) {
             props.multiple
             ? "above"
             : props.variant, "data-required": getBooleanAsString(props.required), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-placement": props.placement, "data-selected-type": props.multiple ? props.selectedType : "text", "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon) }),
-        React.createElement("label", { id: _labelId }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL,
-            React.createElement("select", { role: "none", hidden: true, id: _selectId, tabIndex: -1, ref: selectRef, form: props.form, name: props.name, "data-custom-validity": _validity, multiple: getBoolean(props.multiple, "multiple"), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), onChange: (event) => satisfyReact(event) }, ((_b = props.options) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(React.Fragment, null, (_c = props.options) === null || _c === void 0 ? void 0 : _c.map((option) => (React.createElement("option", { disabled: option.disabled, value: option.value, key: getOptionKey(option, "native-select-option-") }, getOptionLabel(option)))))) : null)),
+        React.createElement("label", { id: _labelId }, (_b = props.label) !== null && _b !== void 0 ? _b : DEFAULT_LABEL,
+            React.createElement("select", { role: "none", hidden: true, id: _selectId, tabIndex: -1, ref: selectRef, form: props.form, name: props.name, "data-custom-validity": _validity, multiple: getBoolean(props.multiple, "multiple"), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), onChange: (event) => satisfyReact(event) }, ((_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) => (React.createElement("option", { disabled: option.disabled, value: option.value, key: getOptionKey(option, "native-select-option-") }, getOptionLabel(option)))))) : null)),
         React.createElement("details", { ref: detailsRef, open: props.open, onToggle: (event) => handleDropdownToggle(event), onKeyDown: (event) => handleKeyboardPress(event) },
             props.children,
             props.options ? (React.createElement(React.Fragment, null,
@@ -688,25 +697,25 @@ function DBCustomSelectFn(props, component) {
                     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,
-                        React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_d = props.searchLabel) !== null && _d !== void 0 ? _d : DEFAULT_LABEL, placeholder: (_e = props.searchPlaceholder) !== null && _e !== void 0 ? _e : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
+                        React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_e = props.searchLabel) !== null && _e !== void 0 ? _e : DEFAULT_LABEL, placeholder: (_f = props.searchPlaceholder) !== null && _f !== void 0 ? _f : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
                                 ? _infoTextId
                                 : undefined, onInput: (event) => handleSearch(event) }))) : null,
-                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: props.showLoading ? "circular_arrows" : undefined, semantic: props.showLoading ? "informational" : "warning" }, (_f = (props.showLoading
+                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: props.showLoading ? "circular_arrows" : undefined, semantic: props.showLoading ? "informational" : "warning" }, (_g = (props.showLoading
                         ? props.loadingText
-                        : props.noResultsText)) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
+                        : props.noResultsText)) !== null && _g !== void 0 ? _g : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
                         React.createElement(React.Fragment, null,
                             selectAllEnabled ? (React.createElement("div", null,
                                 React.createElement("div", { className: "db-checkbox db-custom-select-list-item" },
                                     React.createElement("label", null,
                                         React.createElement("input", { type: "checkbox", value: "select-all", ref: selectAllRef, form: _id, checked: selectAllChecked, onChange: (event) => handleSelectAll(event) }),
                                         getSelectAllLabel())))) : null,
-                            React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_h = (_g = props.listLabel) !== null && _g !== void 0 ? _g : props.label) !== null && _h !== void 0 ? _h : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: getOptionKey(option, "custom-select-list-item-") }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
+                            React.createElement(DBCustomSelectList, { multiple: getBoolean(props.multiple, "multiple"), label: (_j = (_h = props.listLabel) !== null && _h !== void 0 ? _h : props.label) !== null && _j !== void 0 ? _j : DEFAULT_LABEL }, _options === null || _options === void 0 ? void 0 : _options.map((option) => (React.createElement(DBCustomSelectListItem, { type: props.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: getOptionLabel(option), name: _id, checked: getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: (event) => handleSelect(option.value), key: getOptionKey(option, "custom-select-list-item-") }, !option.isGroupTitle ? (React.createElement(React.Fragment, null, getOptionLabel(option))) : null))))))),
                     React.createElement("div", null,
-                        React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose(undefined, true) }, (_j = props.mobileCloseButtonText) !== null && _j !== void 0 ? _j : DEFAULT_CLOSE_BUTTON))))) : null),
-        ((_k = props.showClearSelection) !== null && _k !== void 0 ? _k : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClearAll(event) },
+                        React.createElement(DBButton, { variant: "ghost", width: "full", icon: "cross", size: "small", name: _id, form: _id, onClick: (event) => handleClose(undefined, true) }, (_k = props.mobileCloseButtonText) !== null && _k !== void 0 ? _k : DEFAULT_CLOSE_BUTTON))))) : null),
+        ((_l = props.showClearSelection) !== null && _l !== void 0 ? _l : true) && (_values === null || _values === void 0 ? void 0 : _values.length) ? (React.createElement(DBButton, { icon: "cross", variant: "ghost", size: "small", noText: true, name: _id, form: _id, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClearAll(event) },
             props.clearSelectionText,
             React.createElement(DBTooltip, { placement: "top" }, props.clearSelectionText))) : null,
-        React.createElement("span", { className: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_l = props.placeholder) !== null && _l !== void 0 ? _l : props.label),
+        React.createElement("span", { className: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: _placeholderId }, (_m = props.placeholder) !== null && _m !== void 0 ? _m : props.label),
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, props.validMessage || DEFAULT_VALID_MESSAGE)) : null,
         React.createElement(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId }, _invalidMessage),

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

@@ -4,9 +4,10 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBCustomSelectDropdownFn(props, component) {
+    var _a, _b;
     props = Object.assign({ width: "fixed" }, props);
     const _ref = component || useRef(component);
-    return (React.createElement("article", Object.assign({ "data-spacing": "none", 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-custom-select-dropdown db-card", props.className), "data-width": props.width }), props.children));
+    return (React.createElement("article", Object.assign({ "data-spacing": "none", 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-custom-select-dropdown db-card", props.className), "data-width": props.width }), props.children));
 }
 const DBCustomSelectDropdown = forwardRef(DBCustomSelectDropdownFn);
 export default DBCustomSelectDropdown;

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

@@ -4,8 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBCustomSelectFormFieldFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
-    return (React.createElement("summary", 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-custom-select-form-field", props.className) }), props.children));
+    return (React.createElement("summary", 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-custom-select-form-field", props.className) }), props.children));
 }
 const DBCustomSelectFormField = forwardRef(DBCustomSelectFormFieldFn);
 export default DBCustomSelectFormField;

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

@@ -4,8 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBCustomSelectListFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
-    return (React.createElement("div", Object.assign({ role: props.multiple ? "group" : "radiogroup", "aria-label": props.label, 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-custom-select-list", props.className) }),
+    return (React.createElement("div", Object.assign({ role: props.multiple ? "group" : "radiogroup", "aria-label": props.label, 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-custom-select-list", props.className) }),
         React.createElement("ul", null, props.children)));
 }
 const DBCustomSelectList = forwardRef(DBCustomSelectListFn);

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

@@ -4,6 +4,7 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, getBoolean, getBooleanAsString } from "../../utils";
 function DBCustomSelectListItemFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
     const [hasDivider, setHasDivider] = useState(() => false);
     function handleChange(event) {
@@ -21,7 +22,7 @@ function DBCustomSelectListItemFn(props, component) {
     useEffect(() => {
         setHasDivider(Boolean(props.isGroupTitle || props.showDivider));
     }, [props.isGroupTitle, props.showDivider]);
-    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 }, 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-custom-select-list-item", props.className, {
+    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 }, 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-custom-select-list-item", props.className, {
             "db-checkbox": props.type === "checkbox" && !props.isGroupTitle,
             "db-radio": props.type !== "checkbox" && !props.isGroupTitle,
         }), "data-divider": getBooleanAsString(hasDivider) }), !props.isGroupTitle ? (React.createElement("label", { "data-icon": props.type !== "checkbox" && props.icon ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-icon-trailing": getIconTrailing() },

package/dist/components/divider/divider.js

@@ -4,8 +4,9 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { cls } from "../../utils";
 function DBDividerFn(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, "data-margin": props.margin, "data-variant": props.variant, "data-emphasis": props.emphasis, "data-width": props.width }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-divider", 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, "data-margin": props.margin, "data-variant": props.variant, "data-emphasis": props.emphasis, "data-width": props.width }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-divider", props.className) })));
 }
 const DBDivider = forwardRef(DBDividerFn);
 export default DBDivider;

package/dist/components/drawer/drawer.js

@@ -6,7 +6,7 @@ import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
 import { cls, delay, getBooleanAsString, isKeyboardEvent } from "../../utils";
 import DBButton from "../button/button";
 function DBDrawerFn(props, component) {
-    var _a;
+    var _a, _b, _c;
     const _ref = component || useRef(component);
     const dialogContainerRef = useRef(null);
     const [initialized, setInitialized] = useState(() => false);
@@ -87,12 +87,12 @@ function DBDrawerFn(props, component) {
             }
         }
     }, [_ref.current, initialized, props.position]);
-    return (React.createElement("dialog", Object.assign({ className: "db-drawer", id: props.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", "onClose"]), { onClick: (event) => handleClose(event), onKeyDown: (event) => handleClose(event), "data-position": props.position, "data-backdrop": props.backdrop, "data-direction": props.direction, "data-variant": props.variant }),
+    return (React.createElement("dialog", Object.assign({ className: "db-drawer", id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.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", "onClose"]), { onClick: (event) => handleClose(event), onKeyDown: (event) => handleClose(event), "data-position": props.position, "data-backdrop": props.backdrop, "data-direction": props.direction, "data-variant": props.variant }),
         React.createElement("article", Object.assign({ ref: dialogContainerRef }, 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-drawer-container", props.className), "data-spacing": props.spacing, "data-width": props.width, "data-direction": props.direction, "data-rounded": getBooleanAsString(props.rounded) }),
             React.createElement("header", { className: "db-drawer-header" },
                 React.createElement("div", { className: "db-drawer-header-text" },
                     React.createElement(React.Fragment, null, props.drawerHeader)),
-                React.createElement(DBButton, { className: "button-close-drawer", icon: "cross", variant: "ghost", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event, true) }, (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)),
+                React.createElement(DBButton, { className: "button-close-drawer", icon: "cross", variant: "ghost", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event, true) }, (_c = props.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)),
             React.createElement("div", { className: "db-drawer-content" }, props.children))));
 }
 const DBDrawer = forwardRef(DBDrawerFn);