@db-ux/react-core-components 2.4.0-0-af2a02f → 2.4.0

package/dist/components/accordion/accordion.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_ID } from "../../shared/constants";
 import { cls, uuid } from "../../utils";
 import DBAccordionItem from "../accordion-item/accordion-item";
-import { DEFAULT_ID } from "../../shared/constants";
 function DBAccordionFn(props, component) {
     var _a;
     const _ref = component || useRef(component);

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" | "disabled" | keyof import("../../shared/model").GlobalProps | "headline" | keyof import("../../shared/model").ToggleEventProps | "defaultOpen" | "headlinePlain"> & {
+declare const DBAccordionItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "name" | "text" | "disabled" | "defaultOpen" | "headline" | "headlinePlain" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").ToggleEventProps> & {
     defaultOpen?: boolean;
     disabled?: boolean | string;
     headline?: any;

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

@@ -2,8 +2,8 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, uuid } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
+import { cls, getBooleanAsString, uuid } from "../../utils";
 function DBAccordionItemFn(props, component) {
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => DEFAULT_ID);

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>, "text" | "size" | keyof import("../..").GlobalProps | "semantic" | keyof import("./model").DBBadgeDefaultProps | "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>, "text" | "size" | keyof import("../..").GlobalProps | keyof import("./model").DBBadgeDefaultProps | "semantic" | "emphasis"> & import("./model").DBBadgeDefaultProps & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").SizeProps & import("../..").EmphasisProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBBadge;

package/dist/components/badge/badge.js

@@ -2,8 +2,8 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls } from "../../utils";
 import { DEFAULT_LABEL } from "../../shared/constants";
+import { cls } from "../../utils";
 function DBBadgeFn(props, component) {
     var _a, _b;
     const _ref = component || useRef(component);
@@ -21,7 +21,7 @@ function DBBadgeFn(props, component) {
                     parent = parent.parentElement;
                 }
                 if (parent) {
-                    parent.setAttribute("data-has-badge", "true");
+                    parent.dataset["hasBadge"] = "true";
                 }
             }
         }

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

@@ -1,4 +1,4 @@
-import { GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, EmphasisProps, TextProps } from '../../shared/model';
+import { EmphasisProps, GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TextProps } 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 = {

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" | "icon" | keyof import("../..").GlobalProps | "showIcon" | "hideLogo"> & import("./model").DBBrandDefaultProps & import("../..").GlobalProps & import("../..").IconProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
+declare const DBBrand: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | "icon" | keyof import("../..").GlobalProps | "hideLogo" | "showIcon"> & import("./model").DBBrandDefaultProps & import("../..").GlobalProps & import("../..").IconProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBBrand;

package/dist/components/brand/brand.js

@@ -2,8 +2,8 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, getHideProp } from "../../utils";
 import { DEFAULT_ICON } from "../../shared/constants";
+import { cls, getHideProp } from "../../utils";
 function DBBrandFn(props, component) {
     var _a;
     const _ref = component || useRef(component);

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>, "width" | "text" | "size" | "icon" | "onClick" | keyof import("./model").DBButtonDefaultProps | keyof import("../../shared/model").GlobalProps | "showIcon"> & import("./model").DBButtonDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").IconProps & import("../../shared/model").WidthProps & import("../../shared/model").SizeProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+declare const DBButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<any>, "width" | "text" | "size" | "icon" | "onClick" | keyof import("../..").GlobalProps | "showIcon" | keyof import("./model").DBButtonDefaultProps> & import("./model").DBButtonDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLButtonElement> & import("../..").IconProps & import("../..").WidthProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBButton;

package/dist/components/button/button.js

@@ -5,12 +5,7 @@ import { useRef, forwardRef } from "react";
 import { cls, getBoolean, getBooleanAsString, getHideProp } from "../../utils";
 function DBButtonFn(props, component) {
     const _ref = component || useRef(component);
-    function handleClick(event) {
-        if (props.onClick) {
-            props.onClick(event);
-        }
-    }
-    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"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-button", props.className), type: props.type || "button", disabled: getBoolean(props.disabled, "disabled"), "aria-label": props.label, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-size": props.size, "data-state": props.state, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value, "aria-describedby": props.describedbyid, "aria-expanded": props.ariaexpanded, "aria-pressed": props.ariapressed, onClick: (event) => handleClick(event) }), 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"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-button", props.className), type: props.type || "button", disabled: getBoolean(props.disabled, "disabled"), "aria-label": props.label, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-size": props.size, "data-state": props.state, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value, "aria-describedby": props.describedbyid, "aria-expanded": props.ariaexpanded, "aria-pressed": props.ariapressed }), 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/checkbox/checkbox.d.ts

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

package/dist/components/checkbox/checkbox.js

@@ -3,8 +3,8 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import DBInfotext from "../infotext/infotext";
 import { cls, delay, getBoolean, getHideProp, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import DBInfotext from "../infotext/infotext";
 function DBCheckboxFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
@@ -112,7 +112,7 @@ function DBCheckboxFn(props, component) {
     }, [initialized, _ref.current, props.checked]);
     return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-checkbox", props.className), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel) }),
         React.createElement("label", { htmlFor: _id },
-            React.createElement("input", Object.assign({ type: "checkbox", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, checked: 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"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, required: getBoolean(props.required, "required"), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_a = props.ariaDescribedBy) !== null && _a !== void 0 ? _a : _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-select/custom-select.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBCustomSelect: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "required" | "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBCustomSelectDefaultProps | keyof import("./model").DBCustomSelectEvents> & import("../../shared/model").GlobalProps & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").FormMessageProps & import("./model").DBCustomSelectDefaultProps & import("./model").DBCustomSelectEvents & import("../../shared/model").IconProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ShowLabelProps & React.RefAttributes<any>>;
+declare const DBCustomSelect: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("./model").DBCustomSelectDefaultProps | keyof import("./model").DBCustomSelectEvents> & import("../../shared/model").GlobalProps & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").FormMessageProps & import("./model").DBCustomSelectDefaultProps & import("./model").DBCustomSelectEvents & import("../../shared/model").IconProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ShowLabelProps & React.RefAttributes<any>>;
 export default DBCustomSelect;

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

@@ -2,19 +2,19 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, getSearchInput, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_CLOSE_BUTTON, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_SELECTED, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import DBCustomSelectList from "../custom-select-list/custom-select-list";
-import DBCustomSelectListItem from "../custom-select-list-item/custom-select-list-item";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, getSearchInput, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import { DocumentClickListener } from "../../utils/document-click-listener";
+import { DocumentScrollListener } from "../../utils/document-scroll-listener";
+import { handleFixedDropdown } from "../../utils/floating-components";
+import DBButton from "../button/button";
 import DBCustomSelectDropdown from "../custom-select-dropdown/custom-select-dropdown";
+import DBCustomSelectListItem from "../custom-select-list-item/custom-select-list-item";
+import DBCustomSelectList from "../custom-select-list/custom-select-list";
 import DBInfotext from "../infotext/infotext";
+import DBInput from "../input/input";
 import DBTag from "../tag/tag";
-import DBButton from "../button/button";
 import DBTooltip from "../tooltip/tooltip";
-import DBInput from "../input/input";
-import { DocumentClickListener } from "../../utils/document-click-listener";
-import { DocumentScrollListener } from "../../utils/document-scroll-listener";
-import { handleFixedDropdown } from "../../utils/floating-components";
 function DBCustomSelectFn(props, component) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     props = Object.assign({ clearSelectionText: "Clear selection", showClearSelection: true }, props);
@@ -597,7 +597,7 @@ function DBCustomSelectFn(props, component) {
             props.selectedType === "tag" &&
             props.multiple
             ? "above"
-            : props.variant, "data-required": getBooleanAsString(props.required), "data-placement": props.placement, "data-selected-type": props.multiple ? props.selectedType : "text", "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon) }),
+            : 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-hide-icon": getHideProp(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, 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("details", { ref: detailsRef, open: props.open, onToggle: (event) => handleDropdownToggle(event), onKeyDown: (event) => handleKeyboardPress(event) },

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

@@ -1,6 +1,6 @@
 import { BaseFormProps, ClickEvent, CloseEventState, CustomFormProps, DocumentScrollState, FormMessageProps, FormState, FromValidState, GeneralEvent, GlobalProps, GlobalState, IconProps, InputEvent, InteractionEvent, PlacementVerticalType, RequiredProps, ShowIconProps, ShowLabelProps, ValidationType, WidthType } from '../../shared/model';
-import { DBCustomSelectFormFieldDefaultProps } from '../custom-select-form-field/model';
 import { CustomSelectDropdownWidthType } from '../custom-select-dropdown/model';
+import { DBCustomSelectFormFieldDefaultProps } from '../custom-select-form-field/model';
 import { DBCustomSelectListItemExtraProps } from '../custom-select-list-item/model';
 export type CustomSelectOptionType = {
     /**

package/dist/components/drawer/drawer.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import { ClickEvent, GeneralKeyboardEvent } from "../../shared/model";
-declare const DBDrawer: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "width" | "spacing" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("./model").DBDrawerDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>>> & import("./model").DBDrawerDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & import("../../shared/model").InnerCloseButtonProps & import("../../shared/model").WidthProps & import("../../shared/model").SpacingProps & React.RefAttributes<any>>;
+declare const DBDrawer: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "width" | "spacing" | keyof import("../../shared/model").GlobalProps | keyof import("./model").DBDrawerDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> | keyof import("../../shared/model").InnerCloseButtonProps> & import("./model").DBDrawerDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & import("../../shared/model").InnerCloseButtonProps & import("../../shared/model").WidthProps & import("../../shared/model").SpacingProps & React.RefAttributes<any>>;
 export default DBDrawer;

package/dist/components/drawer/drawer.js

@@ -1,14 +1,15 @@
 "use client";
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, useEffect, forwardRef } from "react";
-import DBButton from "../button/button";
+import { useState, useRef, useEffect, forwardRef } from "react";
 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;
     const _ref = component || useRef(component);
     const dialogContainerRef = useRef(null);
+    const [initialized, setInitialized] = useState(() => false);
     function handleClose(event, forceClose) {
         var _a;
         if (!event)
@@ -44,7 +45,9 @@ function DBDrawerFn(props, component) {
                 if (dialogContainerRef.current) {
                     dialogContainerRef.current.hidden = false;
                 }
-                if (props.backdrop === "none" || props.variant === "inside") {
+                if (props.position === "absolute" ||
+                    props.backdrop === "none" ||
+                    props.variant === "inside") {
                     _ref.current.show();
                 }
                 else {
@@ -67,11 +70,21 @@ function DBDrawerFn(props, component) {
     }
     useEffect(() => {
         handleDialogOpen();
+        setInitialized(true);
     }, []);
     useEffect(() => {
         handleDialogOpen();
     }, [props.open]);
-    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", "onClose"]), { onClick: (event) => handleClose(event), onKeyDown: (event) => handleClose(event), "data-backdrop": props.backdrop, "data-variant": props.variant }),
+    useEffect(() => {
+        if (_ref.current && initialized && props.position === "absolute") {
+            const refElement = _ref.current;
+            const parent = refElement.parentElement;
+            if (parent) {
+                parent.style.position = "relative";
+            }
+        }
+    }, [_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", "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"]), { 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" },

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

@@ -1,10 +1,12 @@
-import { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
+import { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
 export declare const DrawerBackdropList: readonly ["none", "strong", "weak", "invisible"];
 export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
 export declare const DrawerDirectionList: readonly ["left", "right", "up", "down"];
 export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
 export declare const DrawerVariantList: readonly ["modal", "inside"];
 export type DrawerVariantType = (typeof DrawerVariantList)[number];
+export declare const DrawerPositionList: readonly ["fixed", "absolute"];
+export type DrawerPositionType = (typeof DrawerPositionList)[number];
 export type DBDrawerDefaultProps = {
     /**
      * The backdrop attribute changes the opacity of the backdrop.
@@ -33,9 +35,16 @@ export type DBDrawerDefaultProps = {
      * Set the variant modal|inside. Defaults to modal.
      */
     variant?: DrawerVariantType;
+    /**
+     * The position attribute changes the css-position (fixed or absolute) of the drawer.
+     *
+     * - `fixed` (default): Renders with `showModal()`, creating a true modal with a focus trap.
+     * - `absolute`: Renders with `show()`, acting as a simple overlay **without** a focus trap.
+     */
+    position?: DrawerPositionType;
 };
 export type DBDrawerProps = DBDrawerDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InnerCloseButtonProps & WidthProps & SpacingProps;
 export type DBDrawerDefaultState = {
     handleDialogOpen: () => void;
 };
-export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>>;
+export type DBDrawerState = DBDrawerDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement | HTMLDialogElement> | GeneralKeyboardEvent<HTMLDialogElement>> & InitializedState;

package/dist/components/drawer/model.js

@@ -1,3 +1,4 @@
 export const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'];
 export const DrawerDirectionList = ['left', 'right', 'up', 'down'];
 export const DrawerVariantList = ['modal', 'inside'];
+export const DrawerPositionList = ['fixed', 'absolute'];

package/dist/components/header/header.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBHeader: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "width" | keyof import("../..").GlobalProps | keyof import("./model").DBHeaderDefaultProps | keyof import("../..").ToggleEventProps> & import("./model").DBHeaderDefaultProps & import("../..").GlobalProps & import("../..").ToggleEventProps & import("../..").ContainerWidthProps & React.RefAttributes<any>>;
+declare const DBHeader: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "width" | keyof import("../..").GlobalProps | keyof import("../..").ToggleEventProps | keyof import("./model").DBHeaderDefaultProps> & import("./model").DBHeaderDefaultProps & import("../..").GlobalProps & import("../..").ToggleEventProps & import("../..").ContainerWidthProps & React.RefAttributes<any>>;
 export default DBHeader;

package/dist/components/header/header.js

@@ -2,11 +2,11 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_BURGER_MENU, DEFAULT_ID } from "../../shared/constants";
 import { addAttributeToChildren, cls, getBoolean, uuid } from "../../utils";
+import { isEventTargetNavigationItem } from "../../utils/navigation";
 import DBButton from "../button/button";
 import DBDrawer from "../drawer/drawer";
-import { DEFAULT_BURGER_MENU, DEFAULT_ID } from "../../shared/constants";
-import { isEventTargetNavigationItem } from "../../utils/navigation";
 function DBHeaderFn(props, component) {
     var _a;
     const _ref = component || useRef(component);

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

@@ -6,20 +6,20 @@ export type DBHeaderDefaultProps = {
     brand?: any;
     /**
      * Slot to pass in a meta navigation.
-     * Desktop: Above the regular header
-     * Mobile: Inside the drawer
+     * - Desktop: Above the regular header
+     * - Mobile: Inside the drawer
      */
     metaNavigation?: any;
     /**
      * Slot to pass one or more elements like DBButton (e.g. search) as primary action.
-     * Desktop: Shown next to the main-navigation
-     * Mobile: Shown next to the brand
+     * - Desktop: Shown next to the main-navigation
+     * - Mobile: Shown next to the brand
      */
     primaryAction?: any;
     /**
      * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.
-     * Desktop: Shown seperated by divider at the end of the header
-     * Mobile: Shown inside the drawer at the bottom.
+     * - Desktop: Shown separated by divider at the end of the header
+     * - Mobile: Shown inside the drawer at the bottom.
      */
     secondaryAction?: any;
     /**

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>, "text" | "size" | "icon" | keyof import("../..").GlobalProps | "showIcon" | "semantic"> & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").IconProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
+declare const DBInfotext: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | "size" | "icon" | keyof import("../..").GlobalProps | "semantic" | "showIcon"> & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").IconProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBInfotext;

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

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

package/dist/components/input/input.js

@@ -2,8 +2,8 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, getInputValue, } from "../../utils";
 import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
+import { cls, delay, getBoolean, getHideProp, getInputValue, getNumber, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, } from "../../utils";
 import DBInfotext from "../infotext/infotext";
 function DBInputFn(props, component) {
     var _a, _b, _c, _d;
@@ -115,9 +115,9 @@ function DBInputFn(props, component) {
     }, [props.value]);
     return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-input", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-icon": getHideProp(props.showIcon), "data-icon": props.icon, "data-icon-after": props.iconAfter, "data-hide-icon-after": getHideProp(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getNumber(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getInputValue(props.max, props.type), min: getInputValue(props.min, props.type), readOnly: getBoolean(props.readOnly, "readOnly") ||
+        React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, type: props.type || "text", placeholder: (_b = props.placeholder) !== null && _b !== void 0 ? _b : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), step: getNumber(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getInputValue(props.max, props.type), min: getInputValue(props.min, props.type), readOnly: getBoolean(props.readOnly, "readOnly") ||
                 getBoolean(props.readonly, "readonly"), form: props.form, pattern: props.pattern, size: props.size, autoComplete: props.autocomplete, autoFocus: getBoolean(props.autofocus, "autofocus"), onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), list: props.dataList && _dataListId, "aria-describedby": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds })),
-        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_d = getDataList()) === null || _d === void 0 ? void 0 : _d.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value, "data-value": option.hiddenValue }, option.label))))) : null,
+        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_d = getDataList()) === null || _d === void 0 ? void 0 : _d.map((option) => (React.createElement("option", { key: _dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null,
         props.children,
         stringPropVisible(props.message, props.showMessage) ? (React.createElement(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId }, props.message)) : null,
         hasValidState() ? (React.createElement(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId }, 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>, "text" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../../shared/model").LinkProps> & import("./model").DBLinkDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").ClickEventProps<HTMLAnchorElement> & import("../../shared/model").LinkProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<any>, "text" | "onClick" | keyof import("../..").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../..").LinkProps> & import("./model").DBLinkDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLAnchorElement> & import("../..").LinkProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBLink;

package/dist/components/link/link.js

@@ -6,12 +6,7 @@ import { cls, getBooleanAsString, getHideProp } from "../../utils";
 function DBLinkFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
-    function handleClick(event) {
-        if (props.onClick) {
-            props.onClick(event);
-        }
-    }
-    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"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "aria-selected": getBooleanAsString(props.selected), "aria-label": props.label, "aria-current": props.current, "data-size": props.size, "data-hide-icon-after": getHideProp((_a = props.showIcon) !== null && _a !== void 0 ? _a : true), "data-variant": props.variant, "data-content": props.content || "internal", onClick: (event) => handleClick(event) }), 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"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-link", props.className), href: props.href, target: props.target, rel: props.rel, role: props.role, hrefLang: props.hreflang, "aria-disabled": getBooleanAsString(props.disabled), tabIndex: props.disabled ? -1 : 0, "aria-selected": getBooleanAsString(props.selected), "aria-label": props.label, "aria-current": props.current, "data-size": props.size, "data-hide-icon-after": getHideProp((_a = props.showIcon) !== null && _a !== void 0 ? _a : true), "data-variant": props.variant, "data-content": props.content || "internal" }), 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

@@ -2,8 +2,8 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, uuid } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
+import { cls, uuid } from "../../utils";
 function DBNavigationFn(props, component) {
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => DEFAULT_ID);

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

@@ -2,10 +2,10 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import DBButton from "../button/button";
+import { DEFAULT_BACK } from "../../shared/constants";
 import { cls, delay, getBoolean, getBooleanAsString, getHideProp, uuid, } from "../../utils";
 import { isEventTargetNavigationItem, NavigationItemSafeTriangle, } from "../../utils/navigation";
-import { DEFAULT_BACK } from "../../shared/constants";
+import DBButton from "../button/button";
 function DBNavigationItemFn(props, component) {
     var _a;
     const _ref = component || useRef(component);

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

@@ -46,9 +46,9 @@ export type DBNotificationDefaultProps = {
     showTimestamp?: boolean | string;
     /**
      * The variant attribute changes the styling of the notification.
-     * The docked notifications are used e.g. between header and main content to show a global alert.
-     * The standalone notifications are used  e.g. inside a form to show an alert for a specific field.
-     * The overlay notifications are used for absolute and floating notifications like snackbars etc.
+     * - The docked notifications are used e.g. between header and main content to show a global alert.
+     * - The standalone notifications are used  e.g. inside a form to show an alert for a specific field.
+     * - The overlay notifications are used for absolute and floating notifications like snackbars etc.
      */
     variant?: NotificationVariantType;
 };

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>, "text" | "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("./model").DBNotificationDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>> | "semantic" | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & 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>, "text" | "icon" | keyof import("../../shared/model").GlobalProps | "semantic" | "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").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>>;
 export default DBNotification;

package/dist/components/notification/notification.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import DBButton from "../button/button";
 import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
 import { cls, getBoolean, getHideProp, stringPropVisible } from "../../utils";
+import DBButton from "../button/button";
 function DBNotificationFn(props, component) {
     var _a;
     const _ref = component || useRef(component);

package/dist/components/popover/popover.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBPopover: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "gap" | "spacing" | keyof import("../..").GlobalProps | keyof import("../..").PopoverProps | "placement" | keyof import("./model").DBPopoverDefaultProps> & import("./model").DBPopoverDefaultProps & import("../..").GlobalProps & import("../..").SpacingProps & import("../..").PlacementProps & import("../..").GapProps & import("../..").PopoverProps & React.RefAttributes<any>>;
+declare const DBPopover: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "gap" | "spacing" | keyof import("../..").GlobalProps | "placement" | keyof import("../..").PopoverProps | keyof import("./model").DBPopoverDefaultProps> & import("./model").DBPopoverDefaultProps & import("../..").GlobalProps & import("../..").SpacingProps & import("../..").PlacementProps & import("../..").GapProps & import("../..").PopoverProps & React.RefAttributes<any>>;
 export default DBPopover;

package/dist/components/popover/popover.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay as utilsDelay, getBooleanAsString } from "../../utils";
-import { handleFixedPopover } from "../../utils/floating-components";
+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;
     const _ref = component || useRef(component);

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

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

package/dist/components/radio/radio.js

@@ -34,7 +34,7 @@ function DBRadioFn(props, component) {
         }
     }, [initialized, _ref.current, props.checked]);
     return (React.createElement("label", Object.assign({ "data-size": props.size, "data-hide-label": getHideProp(props.showLabel) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-radio", props.className), htmlFor: _id }),
-        React.createElement("input", Object.assign({ type: "radio", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), "aria-describedby": (_a = props.describedbyid) !== null && _a !== void 0 ? _a : props.ariaDescribedBy, value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
+        React.createElement("input", Object.assign({ type: "radio", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), "aria-describedby": (_a = props.describedbyid) !== null && _a !== void 0 ? _a : props.ariaDescribedBy, value: props.value, required: getBoolean(props.required, "required"), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
         props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBRadio = forwardRef(DBRadioFn);

package/dist/components/section/section.js

@@ -2,8 +2,8 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, uuid } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
+import { cls, uuid } from "../../utils";
 function DBSectionFn(props, component) {
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => DEFAULT_ID);

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

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

package/dist/components/select/select.js

@@ -2,8 +2,8 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getBoolean, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
+import { cls, delay, getBoolean, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import DBInfotext from "../infotext/infotext";
 function DBSelectFn(props, component) {
     var _a, _b, _c, _d, _e;
@@ -121,7 +121,7 @@ function DBSelectFn(props, component) {
     }, [props.value]);
     return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { required: 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("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { required: getBoolean(props.required, "required"), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), 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("option", { hidden: true }),
             ((_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) => {
                 var _a;

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

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

package/dist/components/switch/switch.js

@@ -36,7 +36,7 @@ function DBSwitchFn(props, component) {
         }
     }, [props.checked]);
     return (React.createElement("label", Object.assign({ "data-visual-aid": getBooleanAsString(props.visualAid), "data-size": props.size, "data-hide-label": getHideProp(props.showLabel), "data-emphasis": props.emphasis, htmlFor: _id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-switch", props.className) }),
-        React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, "aria-checked": getBooleanAsString(_checked), ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-describedby": (_a = props.describedbyid) !== null && _a !== void 0 ? _a : props.ariaDescribedBy, "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": props.icon, "data-aid-icon-after": props.iconAfter, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
+        React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, "aria-checked": getBooleanAsString(_checked), ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-describedby": (_a = props.describedbyid) !== null && _a !== void 0 ? _a : props.ariaDescribedBy, "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, name: props.name, required: getBoolean(props.required, "required"), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-aid-icon": props.icon, "data-aid-icon-after": props.iconAfter, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
         props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBSwitch = forwardRef(DBSwitchFn);

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

@@ -2,8 +2,8 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, uuid } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
+import { cls, uuid } from "../../utils";
 function DBTabListFn(props, component) {
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => DEFAULT_ID);

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

@@ -1,4 +1,4 @@
-import { AlignmentProps, InputEvent, GlobalProps, GlobalState, InitializedState, OrientationProps, WidthProps } from '../../shared/model';
+import { AlignmentProps, GlobalProps, GlobalState, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model';
 import { DBTabItemProps } from '../tab-item/model';
 import { DBTabPanelProps } from '../tab-panel/model';
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTabs: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "width" | "orientation" | keyof import("../../shared/model").GlobalProps | keyof import("./model").DBTabsDefaultProps | "alignment" | keyof import("./model").DBTabsEventProps> & import("./model").DBTabsDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").OrientationProps & import("../../shared/model").WidthProps & import("../../shared/model").AlignmentProps & import("./model").DBTabsEventProps & React.RefAttributes<any>>;
+declare const DBTabs: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "width" | "orientation" | keyof import("../../shared/model").GlobalProps | "alignment" | keyof import("./model").DBTabsDefaultProps | keyof import("./model").DBTabsEventProps> & import("./model").DBTabsDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").OrientationProps & import("../../shared/model").WidthProps & import("../../shared/model").AlignmentProps & import("./model").DBTabsEventProps & React.RefAttributes<any>>;
 export default DBTabs;

package/dist/components/tabs/tabs.js

@@ -4,8 +4,8 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, uuid } from "../../utils";
 import DBButton from "../button/button";
-import DBTabList from "../tab-list/tab-list";
 import DBTabItem from "../tab-item/tab-item";
+import DBTabList from "../tab-list/tab-list";
 import DBTabPanel from "../tab-panel/tab-panel";
 function DBTabsFn(props, component) {
     var _a, _b, _c, _d;

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

@@ -1,4 +1,4 @@
-import { ClickEvent, ContentSlotProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps, EmphasisProps } from '../../shared/model';
+import { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
 export declare const TagBehaviorList: readonly ["static", "removable"];
 export type TagBehaviorType = (typeof TagBehaviorList)[number];
 export type DBTagEventsProps = {

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

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

package/dist/components/tag/tag.js

@@ -2,8 +2,8 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBooleanAsString, getHideProp } from "../../utils";
 import { DEFAULT_REMOVE } from "../../shared/constants";
+import { cls, getBooleanAsString, getHideProp } from "../../utils";
 import DBTooltip from "../tooltip/tooltip";
 function DBTagFn(props, component) {
     var _a;

package/dist/components/textarea/textarea.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<any>, "required" | "value" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").FormTextProps | keyof import("./model").DBTextareaDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").InputEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").FocusEventProps<HTMLTextAreaElement>> & import("./model").DBTextareaDefaultProps & import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> & import("../../shared/model").InputEventProps<HTMLTextAreaElement> & import("../../shared/model").FocusEventProps<HTMLTextAreaElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").FormMessageProps & React.RefAttributes<any>>;
+declare const DBTextarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<any>, "value" | keyof import("../../shared/model").GlobalProps | keyof import("../../shared/model").CustomFormProps | keyof import("../../shared/model").BaseFormProps | keyof import("../../shared/model").RequiredProps | "showLabel" | keyof import("../../shared/model").FormMessageProps | keyof import("../../shared/model").FormTextProps | keyof import("./model").DBTextareaDefaultProps | keyof import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").InputEventProps<HTMLTextAreaElement> | keyof import("../../shared/model").FocusEventProps<HTMLTextAreaElement>> & import("./model").DBTextareaDefaultProps & import("../../shared/model").ChangeEventProps<HTMLTextAreaElement> & import("../../shared/model").InputEventProps<HTMLTextAreaElement> & import("../../shared/model").FocusEventProps<HTMLTextAreaElement> & import("../../shared/model").CustomFormProps & import("../../shared/model").BaseFormProps & import("../../shared/model").RequiredProps & import("../../shared/model").ShowLabelProps & import("../../shared/model").ValueProps & import("../../shared/model").GlobalProps & import("../../shared/model").FormTextProps & import("../../shared/model").FormMessageProps & React.RefAttributes<any>>;
 export default DBTextarea;

package/dist/components/textarea/textarea.js

@@ -2,9 +2,9 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import DBInfotext from "../infotext/infotext";
-import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_ROWS, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
+import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
+import DBInfotext from "../infotext/infotext";
 function DBTextareaFn(props, component) {
     var _a, _b, _c, _d;
     const _ref = component || useRef(component);
@@ -102,7 +102,7 @@ function DBTextareaFn(props, component) {
     }, [props.value]);
     return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-textarea", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
-        React.createElement("textarea", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, "data-resize": props.resize, "data-hide-resizer": getHideProp((_b = props.showResizer) !== null && _b !== void 0 ? _b : true), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||
+        React.createElement("textarea", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, "data-resize": props.resize, "data-hide-resizer": getHideProp((_b = props.showResizer) !== null && _b !== void 0 ? _b : true), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), readOnly: getBoolean(props.readOnly, "readOnly") ||
                 getBoolean(props.readonly, "readonly"), form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": (_c = props.ariaDescribedBy) !== null && _c !== void 0 ? _c : _descByIds, placeholder: (_d = props.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) })),
         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/tooltip/tooltip.d.ts

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

package/dist/components/tooltip/tooltip.js

@@ -2,10 +2,10 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay as utilsDelay, getBooleanAsString, uuid, } from "../../utils";
 import { DEFAULT_ID } from "../../shared/constants";
-import { handleFixedPopover } from "../../utils/floating-components";
+import { cls, getBooleanAsString, delay as utilsDelay, uuid, } from "../../utils";
 import { DocumentScrollListener } from "../../utils/document-scroll-listener";
+import { handleFixedPopover } from "../../utils/floating-components";
 function DBTooltipFn(props, component) {
     var _a, _b;
     const _ref = component || useRef(component);
@@ -74,7 +74,7 @@ function DBTooltipFn(props, component) {
                 ["mouseleave", "focusout"].forEach((event) => {
                     parent.addEventListener(event, () => handleLeave());
                 });
-                parent.setAttribute("data-has-tooltip", "true");
+                parent.dataset["hasTooltip"] = "true";
                 if (props.variant === "label") {
                     parent.setAttribute("aria-labelledby", _id);
                 }

package/dist/index.d.ts

@@ -1,9 +1,15 @@
-export * from './components/notification';
+export * from './components/accordion';
+export * from './components/accordion-item';
 export * from './components/badge';
 export * from './components/brand';
 export * from './components/button';
 export * from './components/card';
 export * from './components/checkbox';
+export * from './components/custom-select';
+export * from './components/custom-select-dropdown';
+export * from './components/custom-select-form-field';
+export * from './components/custom-select-list';
+export * from './components/custom-select-list-item';
 export * from './components/divider';
 export * from './components/drawer';
 export * from './components/header';
@@ -11,31 +17,24 @@ export * from './components/icon';
 export * from './components/infotext';
 export * from './components/input';
 export * from './components/link';
+export * from './components/navigation';
+export * from './components/navigation-item';
+export * from './components/notification';
 export * from './components/page';
+export * from './components/popover';
 export * from './components/radio';
 export * from './components/section';
 export * from './components/select';
+export * from './components/stack';
 export * from './components/switch';
 export * from './components/tab-item';
+export * from './components/tab-list';
+export * from './components/tab-panel';
+export * from './components/tabs';
 export * from './components/tag';
 export * from './components/textarea';
-export * from './components/navigation-item';
-export * from './components/accordion';
-export * from './components/accordion-item';
-export * from './components/navigation';
-export * from './components/badge';
-export * from './components/popover';
 export * from './components/tooltip';
-export * from './components/tab-list';
-export * from './components/tabs';
-export * from './components/tab-panel';
 export * from './shared/constants';
 export * from './shared/model';
 export * from './utils/index';
 export * from './utils/navigation';
-export * from './components/stack';
-export * from './components/custom-select';
-export * from './components/custom-select-form-field';
-export * from './components/custom-select-dropdown';
-export * from './components/custom-select-list';
-export * from './components/custom-select-list-item';

package/dist/index.js

@@ -1,9 +1,15 @@
-export * from './components/notification';
+export * from './components/accordion';
+export * from './components/accordion-item';
 export * from './components/badge';
 export * from './components/brand';
 export * from './components/button';
 export * from './components/card';
 export * from './components/checkbox';
+export * from './components/custom-select';
+export * from './components/custom-select-dropdown';
+export * from './components/custom-select-form-field';
+export * from './components/custom-select-list';
+export * from './components/custom-select-list-item';
 export * from './components/divider';
 export * from './components/drawer';
 export * from './components/header';
@@ -11,31 +17,24 @@ export * from './components/icon';
 export * from './components/infotext';
 export * from './components/input';
 export * from './components/link';
+export * from './components/navigation';
+export * from './components/navigation-item';
+export * from './components/notification';
 export * from './components/page';
+export * from './components/popover';
 export * from './components/radio';
 export * from './components/section';
 export * from './components/select';
+export * from './components/stack';
 export * from './components/switch';
 export * from './components/tab-item';
+export * from './components/tab-list';
+export * from './components/tab-panel';
+export * from './components/tabs';
 export * from './components/tag';
 export * from './components/textarea';
-export * from './components/navigation-item';
-export * from './components/accordion';
-export * from './components/accordion-item';
-export * from './components/navigation';
-export * from './components/badge';
-export * from './components/popover';
 export * from './components/tooltip';
-export * from './components/tab-list';
-export * from './components/tabs';
-export * from './components/tab-panel';
 export * from './shared/constants';
 export * from './shared/model';
 export * from './utils/index';
 export * from './utils/navigation';
-export * from './components/stack';
-export * from './components/custom-select';
-export * from './components/custom-select-form-field';
-export * from './components/custom-select-dropdown';
-export * from './components/custom-select-list';
-export * from './components/custom-select-list-item';

package/dist/shared/model.d.ts

@@ -184,11 +184,21 @@ export type EmphasisProps = {
 };
 export declare const ValidationList: readonly ["invalid", "valid", "no-validation"];
 export type ValidationType = (typeof ValidationList)[number];
+/**
+ * Properties to control the required state and its visual annotation for input components.
+ */
 export type RequiredProps = {
     /**
      * When the required attribute specified, the user will be required to fill the form element before submitting the form.
+     * The form element will be marked semantically as required and by default also visually with an asterisk '*' next to the label (unless the property `showRequiredAsterisk` is also set with the value `false`).
      */
     required?: boolean | string;
+    /**
+     * This attribute allows to specify whether a form field which is marked as required will show a visual indicator (an asterisk '*').
+     * It allows to prevent adding the visual indicator but still keep the field semantically required by setting its value to `false`.
+     * By default, its value is `true`, so the asterisk is shown when `required` is set.
+     */
+    showRequiredAsterisk?: boolean | string;
 };
 export type ShowLabelProps = {
     /**
@@ -485,20 +495,19 @@ export type NavigationBackButtonProps = {
 };
 export type AriaLabelledByProps = {
     /**
-     * Pass aria-labelledby to inner element
+     * Pass `aria-labelledby` to inner element
      */
     labelledBy?: string;
 };
 export type AriaControlsProps = {
     /**
-     * Pass aria-controls to inner element
+     * Pass `aria-controls` to inner element
      */
     controls?: string;
 };
 export type ValueLabelType = {
     value: string;
     label?: string;
-    hiddenValue?: string;
 };
 export type DocumentScrollState = {
     _documentScrollListenerCallbackId?: string;

package/dist/utils/floating-components.js

@@ -301,5 +301,5 @@ export const handleFixedPopover = (element, parent, placement) => {
         element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
     element.style.position = 'fixed';
-    element.setAttribute('data-corrected-placement', correctedPlacement);
+    element.dataset['correctedPlacement'] = correctedPlacement;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "2.4.0-0-af2a02f",
+  "version": "2.4.0",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
     "tsc": "tsc -p . --sourceMap false"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.51.1",
+    "@playwright/experimental-ct-react": "1.53.2",
     "@types/react": "^18.3.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
@@ -38,7 +38,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "2.4.0-0-af2a02f",
-    "@db-ux/core-foundations": "2.4.0-0-af2a02f"
+    "@db-ux/core-components": "2.4.0",
+    "@db-ux/core-foundations": "2.4.0"
   }
 }