@db-ux/react-core-components 2.4.4 → 3.0.1

package/dist/components/brand/brand.js

@@ -3,11 +3,11 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { DEFAULT_ICON } from "../../shared/constants";
-import { cls, getHideProp } from "../../utils";
+import { cls, getBooleanAsString } from "../../utils";
 function DBBrandFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { "data-icon": props.hideLogo ? "none" : (_a = props.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-hide-icon": getHideProp(props.showIcon), id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-brand", props.className) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { "data-icon": props.hideLogo ? "none" : (_a = props.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(props.showIcon), id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-brand", props.className) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBBrand = forwardRef(DBBrandFn);
 export default DBBrand;

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

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

package/dist/components/button/button.js

@@ -2,10 +2,20 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, getBoolean, getBooleanAsString, getHideProp } from "../../utils";
+import { cls, getBoolean, getBooleanAsString } from "../../utils";
 function DBButtonFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
-    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)));
+    function getButtonType() {
+        if (props.type) {
+            return props.type;
+        }
+        else if (props.onClick) {
+            return "button";
+        }
+        return "submit";
+    }
+    return (React.createElement("button", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { 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: getButtonType(), disabled: getBoolean(props.disabled, "disabled"), "data-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-show-icon": getBooleanAsString((_b = props.showIconLeading) !== null && _b !== void 0 ? _b : props.showIcon), "data-icon-trailing": props.iconTrailing, "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-size": props.size, "data-width": props.width, "data-variant": props.variant, "data-no-text": getBooleanAsString(props.noText), name: props.name, form: props.form, value: props.value }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBButton = forwardRef(DBButtonFn);
 export default DBButton;

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

@@ -1,19 +1,9 @@
-import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, ShowIconProps, SizeProps, TextProps, WidthProps } from '../../shared/model';
+import { ClickEventProps, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeProps, TextProps, WidthProps } from '../../shared/model';
 export declare const ButtonVariantList: readonly ["outlined", "brand", "filled", "ghost"];
 export type ButtonVariantType = (typeof ButtonVariantList)[number];
 export declare const ButtonTypeList: readonly ["button", "reset", "submit"];
 export type ButtonTypeType = (typeof ButtonTypeList)[number];
-export declare const ButtonStateList: readonly ["loading"];
-export type ButtonStateType = (typeof ButtonStateList)[number];
 export type DBButtonDefaultProps = {
-    /**
-     * If the button controls a grouping of other elements, the ariaexpanded state [indicates whether the controlled grouping is currently expanded or collapsed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded).
-     */
-    ariaexpanded?: boolean;
-    /**
-     * Defines the button as a toggle button. The value of [ariapressed describes the state of the button](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
-     */
-    ariapressed?: boolean;
     /**
      * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
      */
@@ -22,10 +12,6 @@ export type DBButtonDefaultProps = {
      * 	Associates the control with a form element
      */
     form?: string;
-    /**
-     * The label represents the [aria-label attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) value of the button
-     */
-    label?: string;
     /**
      * The name attribute specifies a [name attributes value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name) for the button.
      */
@@ -34,10 +20,6 @@ export type DBButtonDefaultProps = {
      * Define the text next to the icon specified via the icon Property to get hidden.
      */
     noText?: boolean | string;
-    /**
-     * Show loading progress inside button.
-     */
-    state?: ButtonStateType;
     /**
      * The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).
      */
@@ -51,6 +33,8 @@ export type DBButtonDefaultProps = {
      */
     variant?: ButtonVariantType | string;
 };
-export type DBButtonProps = DBButtonDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & SizeProps & ShowIconProps & TextProps;
-export type DBButtonDefaultState = {};
-export type DBButtonState = DBButtonDefaultState & GlobalState & ClickEventState<HTMLButtonElement>;
+export type DBButtonProps = DBButtonDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & SizeProps & ShowIconProps & TextProps & ShowIconLeadingProps & ShowIconTrailingProps & IconLeadingProps & IconTrailingProps;
+export type DBButtonDefaultState = {
+    getButtonType: () => ButtonTypeType;
+};
+export type DBButtonState = DBButtonDefaultState & GlobalState;

package/dist/components/button/model.js

@@ -1,3 +1,2 @@
 export const ButtonVariantList = ['outlined', 'brand', 'filled', 'ghost'];
 export const ButtonTypeList = ['button', 'reset', 'submit'];
-export const ButtonStateList = ['loading'];

package/dist/components/card/card.js

@@ -10,7 +10,7 @@ function DBCardFn(props, component) {
             props.onClick(event);
         }
     }
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { 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-card", props.className), "data-behavior": props.behavior, "data-elevation-level": props.elevationLevel, "data-spacing": props.spacing, role: props.behavior === "interactive" ? "button" : undefined, tabIndex: props.behavior === "interactive" ? 0 : undefined, onClick: (event) => handleClick(event) }), props.children));
+    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { 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-card", props.className), "data-behavior": props.behavior, "data-elevation-level": props.elevationLevel, "data-spacing": props.spacing, onClick: (event) => handleClick(event) }), props.children));
 }
 const DBCard = forwardRef(DBCardFn);
 export default DBCard;

package/dist/components/checkbox/checkbox.js

@@ -14,7 +14,7 @@ function DBCheckboxFn(props, component) {
     const [_validMessageId, set_validMessageId] = useState(() => undefined);
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
     function hasValidState() {
         var _a;
@@ -46,7 +46,7 @@ function DBCheckboxFn(props, component) {
             set_descByIds(_messageId);
         }
         else {
-            set_descByIds("");
+            set_descByIds(undefined);
         }
     }
     function handleChange(event) {
@@ -90,6 +90,7 @@ function DBCheckboxFn(props, component) {
             if (stringPropVisible(props.message, props.showMessage)) {
                 set_descByIds(messageId);
             }
+            handleValidation();
         }
     }, [_id]);
     useEffect(() => {

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

@@ -34,7 +34,8 @@ function DBCustomSelectFn(props, component) {
     const [_placeholderId, set_placeholderId] = useState(() => undefined);
     const [_infoTextId, set_infoTextId] = useState(() => undefined);
     const [_validity, set_validity] = useState(() => "no-validation");
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_userInteraction, set_userInteraction] = useState(() => false);
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_selectedLabels, set_selectedLabels] = useState(() => "");
     const [_selectedLabelsId, set_selectedLabelsId] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
@@ -76,7 +77,9 @@ function DBCustomSelectFn(props, component) {
                 set_voiceOverFallback(_invalidMessage);
                 delay(() => set_voiceOverFallback(""), 1000);
             }
-            set_validity((_c = props.validation) !== null && _c !== void 0 ? _c : "invalid");
+            if (_userInteraction) {
+                set_validity((_c = props.validation) !== null && _c !== void 0 ? _c : "invalid");
+            }
         }
         else if (hasValidState() &&
             ((_d = selectRef.current) === null || _d === void 0 ? void 0 : _d.validity.valid) &&
@@ -300,6 +303,7 @@ function DBCustomSelectFn(props, component) {
         if (skip)
             return;
         set_values(values);
+        set_userInteraction(true);
         if (props.onOptionSelected) {
             props.onOptionSelected(values !== null && values !== void 0 ? values : []);
         }
@@ -485,7 +489,7 @@ function DBCustomSelectFn(props, component) {
         else if (_options) {
             set_hasNoOptions(_options.length === 0);
         }
-    }, [props.showNoResults, _options]);
+    }, [props.showNoResults, props.showLoading, _options]);
     useEffect(() => {
         var _a;
         setSelectAllEnabled(Boolean(props.multiple && ((_a = props.showSelectAll) !== null && _a !== void 0 ? _a : amountOptions > 5)));
@@ -503,8 +507,10 @@ function DBCustomSelectFn(props, component) {
         }
     }, [props.values]);
     useEffect(() => {
-        handleValidation();
-    }, [_values]);
+        if (selectRef.current) {
+            handleValidation();
+        }
+    }, [_values, selectRef.current]);
     useEffect(() => {
         set_validity(props.validation);
     }, [props.validation]);
@@ -597,7 +603,7 @@ function DBCustomSelectFn(props, component) {
             props.selectedType === "tag" &&
             props.multiple
             ? "above"
-            : props.variant, "data-required": getBooleanAsString(props.required), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-placement": props.placement, "data-selected-type": props.multiple ? props.selectedType : "text", "data-hide-label": getHideProp(props.showLabel), "data-icon": props.icon, "data-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-show-icon": getBooleanAsString(props.showIcon) }),
         React.createElement("label", { id: _labelId }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL,
             React.createElement("select", { role: "none", hidden: true, id: _selectId, tabIndex: -1, ref: selectRef, form: props.form, name: props.name, 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) },
@@ -611,7 +617,9 @@ function DBCustomSelectFn(props, component) {
                         React.createElement(DBInput, { type: "search", ref: searchInputRef, name: _id, form: _id, showLabel: false, value: _searchValue, label: (_d = props.searchLabel) !== null && _d !== void 0 ? _d : DEFAULT_LABEL, placeholder: (_e = props.searchPlaceholder) !== null && _e !== void 0 ? _e : props.searchLabel, ariaDescribedBy: _hasNoOptions || props.showLoading
                                 ? _infoTextId
                                 : undefined, onInput: (event) => handleSearch(event) }))) : null,
-                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: _hasNoOptions ? undefined : "circular_arrows", semantic: _hasNoOptions ? "warning" : "informational" }, (_f = (_hasNoOptions ? props.noResultsText : props.loadingText)) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
+                    _hasNoOptions || props.showLoading ? (React.createElement(DBInfotext, { id: _infoTextId, icon: props.showLoading ? "circular_arrows" : undefined, semantic: props.showLoading ? "informational" : "warning" }, (_f = (props.showLoading
+                        ? props.loadingText
+                        : props.noResultsText)) !== null && _f !== void 0 ? _f : DEFAULT_MESSAGE)) : (React.createElement(React.Fragment, null,
                         React.createElement(React.Fragment, null,
                             selectAllEnabled ? (React.createElement("div", null,
                                 React.createElement("div", { className: "db-checkbox db-custom-select-list-item" },

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

@@ -190,6 +190,7 @@ export type DBCustomSelectDefaultState = {
     _internalChangeTimestamp: number;
     _documentClickListenerCallbackId?: string;
     _searchValue?: string;
+    _userInteraction?: boolean;
     getNativeSelectValue: () => string;
     getOptionLabel: (option: CustomSelectOptionType) => string;
     getOptionChecked: (value?: string) => boolean;

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

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBoolean, getBooleanAsString, getHideProp, uuid, } from "../../utils";
+import { cls, getBoolean, getBooleanAsString, uuid } from "../../utils";
 function DBCustomSelectListItemFn(props, component) {
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
@@ -13,7 +13,7 @@ function DBCustomSelectListItemFn(props, component) {
             props.onChange(event);
         }
     }
-    function getIconAfter() {
+    function getIconTrailing() {
         if (props.isGroupTitle || props.type === "checkbox") {
             return;
         }
@@ -29,7 +29,7 @@ function DBCustomSelectListItemFn(props, component) {
     return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-custom-select-list-item", props.className, {
             "db-checkbox": props.type === "checkbox" && !props.isGroupTitle,
             "db-radio": props.type !== "checkbox" && !props.isGroupTitle,
-        }), "data-divider": getBooleanAsString(hasDivider) }), !props.isGroupTitle ? (React.createElement("label", { "data-icon": props.type !== "checkbox" && props.icon ? props.icon : undefined, "data-hide-icon": getHideProp(props.showIcon), "data-icon-after": getIconAfter() },
+        }), "data-divider": getBooleanAsString(hasDivider) }), !props.isGroupTitle ? (React.createElement("label", { "data-icon": props.type !== "checkbox" && props.icon ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-icon-trailing": getIconTrailing() },
         React.createElement("input", { className: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: props.type, name: props.name, form: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), value: props.value, onChange: (event) => handleChange(event) }),
         props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children))) : (React.createElement("span", null, props.groupTitle))));
 }

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

@@ -23,7 +23,7 @@ export type DBCustomSelectListItemDefaultProps = {
 };
 export type DBCustomSelectListItemProps = DBCustomSelectListItemDefaultProps & GlobalProps & BaseFormProps & ValueProps & FormCheckProps & ChangeEventProps<HTMLInputElement> & DBCustomSelectListItemExtraProps;
 export type DBCustomSelectListItemDefaultState = {
-    getIconAfter: () => string | undefined;
+    getIconTrailing: () => string | undefined;
     hasDivider?: boolean;
 };
 export type DBCustomSelectListItemState = DBCustomSelectListItemDefaultState & ChangeEventState<HTMLInputElement> & GlobalState;

package/dist/components/header/header.js

@@ -2,15 +2,14 @@
 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 { DEFAULT_BURGER_MENU } from "../../shared/constants";
+import { addAttributeToChildren, cls, getBoolean } from "../../utils";
 import { isEventTargetNavigationItem } from "../../utils/navigation";
 import DBButton from "../button/button";
 import DBDrawer from "../drawer/drawer";
 function DBHeaderFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
-    const [_id, set_id] = useState(() => DEFAULT_ID);
     const [initialized, setInitialized] = useState(() => false);
     const [forcedToMobile, setForcedToMobile] = useState(() => false);
     function handleToggle(event) {
@@ -29,23 +28,19 @@ function DBHeaderFn(props, component) {
     }
     useEffect(() => {
         setInitialized(true);
-        set_id(props.id || "header-" + uuid());
     }, []);
     useEffect(() => {
-        if (initialized && document && _id && props.forceMobile) {
-            const headerElement = document.getElementById(_id !== null && _id !== void 0 ? _id : "");
-            if (headerElement) {
-                // Adds this attribute to the header to enable all styling which would have
-                // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
-                addAttributeToChildren(headerElement, {
-                    key: "data-force-mobile",
-                    value: "true",
-                });
-            }
+        if (initialized && _ref.current && props.forceMobile) {
+            // Adds this attribute to the header to enable all styling which would have
+            // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
+            addAttributeToChildren(_ref.current, {
+                key: "data-force-mobile",
+                value: "true",
+            });
             setForcedToMobile(true);
         }
-    }, [initialized]);
-    return (React.createElement("header", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "onToggle"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-header", props.className), id: _id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
+    }, [initialized, _ref.current]);
+    return (React.createElement("header", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "onToggle"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-header", props.className), id: props.id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
         React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, open: getBoolean(props.drawerOpen), onClose: (event) => handleToggle() },
             React.createElement("div", { className: "db-header-drawer-navigation" },
                 React.createElement("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event) }, props.children),
@@ -64,7 +59,7 @@ function DBHeaderFn(props, component) {
                     React.createElement(React.Fragment, null, props.primaryAction))),
             React.createElement("div", { className: "db-header-action-container" },
                 React.createElement("div", { className: "db-header-burger-menu-container" },
-                    React.createElement(DBButton, { icon: "menu", variant: "ghost", id: _id + "-burger-menu", noText: true, onClick: (event) => handleToggle() }, (_a = props.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)),
+                    React.createElement(DBButton, { icon: "menu", variant: "ghost", noText: true, onClick: (event) => handleToggle() }, (_a = props.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)),
                 React.createElement("div", { className: "db-header-secondary-action" },
                     React.createElement(React.Fragment, null, props.secondaryAction))))));
 }

package/dist/components/infotext/infotext.js

@@ -2,11 +2,11 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, getHideProp } from "../../utils";
+import { cls, getBooleanAsString } from "../../utils";
 function DBInfotextFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
-    return (React.createElement("span", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { 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-infotext", props.className), "data-icon": props.icon, "data-semantic": props.semantic, "data-size": props.size, "data-hide-icon-before": getHideProp((_a = props.showIcon) !== null && _a !== void 0 ? _a : true) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
+    return (React.createElement("span", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { 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-infotext", props.className), "data-icon": props.icon, "data-semantic": props.semantic, "data-size": props.size, "data-show-icon-leading": getBooleanAsString((_a = props.showIcon) !== null && _a !== void 0 ? _a : true) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBInfotext = forwardRef(DBInfotextFn);
 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>, "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>>;
+declare const DBInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "value" | "size" | "icon" | keyof import("../../shared/model").GlobalProps | "showIcon" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing" | 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>> & 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").IconTrailingProps & import("../../shared/model").FormMessageProps & import("../../shared/model").ShowIconProps & import("../../shared/model").IconLeadingProps & import("../../shared/model").ShowIconLeadingProps & import("../../shared/model").ShowIconTrailingProps & import("../../shared/model").FormSizeProps & React.RefAttributes<any>>;
 export default DBInput;

package/dist/components/input/input.js

@@ -3,10 +3,10 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import { cls, delay, getBoolean, getHideProp, getInputValue, getNumber, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, hasVoiceOver, isArrayOfStrings, stringPropVisible, uuid, } from "../../utils";
 import DBInfotext from "../infotext/infotext";
 function DBInputFn(props, component) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const _ref = component || useRef(component);
     const [_id, set_id] = useState(() => undefined);
     const [_messageId, set_messageId] = useState(() => undefined);
@@ -14,8 +14,8 @@ function DBInputFn(props, component) {
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_dataListId, set_dataListId] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => "");
-    const [_value, set_value] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
+    const [_value, set_value] = useState(() => undefined);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
     function hasValidState() {
         var _a;
@@ -47,7 +47,7 @@ function DBInputFn(props, component) {
             set_descByIds(_messageId);
         }
         else {
-            set_descByIds("");
+            set_descByIds(undefined);
         }
     }
     function handleInput(event) {
@@ -108,16 +108,17 @@ function DBInputFn(props, component) {
             if (stringPropVisible(props.message, props.showMessage)) {
                 set_descByIds(messageId);
             }
+            handleValidation();
         }
     }, [_id]);
     useEffect(() => {
         set_value(props.value);
     }, [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-asterisk": getHideProp(props.showRequiredAsterisk), "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") ||
-                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 }, option.label))))) : null,
+    return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-input", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-show-icon": getBooleanAsString((_a = props.showIconLeading) !== null && _a !== void 0 ? _a : props.showIcon), "data-icon": (_b = props.iconLeading) !== null && _b !== void 0 ? _b : props.icon, "data-icon-trailing": props.iconTrailing, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing) }),
+        React.createElement("label", { htmlFor: _id }, (_c = props.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL),
+        React.createElement("input", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, type: props.type || "text", multiple: getBoolean(props.multiple, "multiple"), placeholder: (_d = props.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), step: getNumber(props.step), value: props.value, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), max: getInputValue(props.max, props.type), min: getInputValue(props.min, props.type), readOnly: getBoolean(props.readOnly, "readOnly") ||
+                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": (_e = props.ariaDescribedBy) !== null && _e !== void 0 ? _e : _descByIds })),
+        props.dataList ? (React.createElement("datalist", { id: _dataListId }, (_f = getDataList()) === null || _f === void 0 ? void 0 : _f.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/input/model.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconAfterProps, IconProps, InputEventProps, InputEventState, ShowIconProps, ValueLabelType } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InputEventProps, InputEventState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, ValueLabelType } from '../../shared/model';
 export declare const InputTypeList: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"];
 export type InputTypeType = (typeof InputTypeList)[number];
 export type DBInputDefaultProps = {
@@ -10,6 +10,10 @@ export type DBInputDefaultProps = {
      * Add a custom id to [data list](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) if you're using `dataList` attribute.
      */
     dataListId?: string;
+    /**
+     * Allow selecting multiple files. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#multiple
+     */
+    multiple?: boolean | string;
     /**
      * Maximum value
      */
@@ -31,7 +35,7 @@ export type DBInputDefaultProps = {
      */
     step?: number | string;
 };
-export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconAfterProps & FormMessageProps & ShowIconProps & FormSizeProps;
+export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconTrailingProps & FormMessageProps & ShowIconProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & FormSizeProps;
 export type DBInputDefaultState = {
     _dataListId?: string;
     getDataList: () => ValueLabelType[];

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("../..").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>>;
+declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<any>, "text" | "wrap" | "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 & import("../..").WrapProps & React.RefAttributes<any>>;
 export default DBLink;

package/dist/components/link/link.js

@@ -2,11 +2,11 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
-import { cls, getBooleanAsString, getHideProp } from "../../utils";
+import { cls, getBooleanAsString } from "../../utils";
 function DBLinkFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
-    return (React.createElement("a", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { 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)));
+    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, "data-size": props.size, "data-show-icon-trailing": getBooleanAsString((_a = props.showIcon) !== null && _a !== void 0 ? _a : true), "data-variant": props.variant, "data-content": props.content || "internal", "data-wrap": getBooleanAsString(props.wrap) }), props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBLink = forwardRef(DBLinkFn);
 export default DBLink;

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

@@ -1,5 +1,5 @@
-import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, ShowIconProps, TextProps } from '../../shared/model';
-export declare const LinkVariantList: readonly ["adaptive", "brand"];
+import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, ShowIconProps, TextProps, WrapProps } from '../../shared/model';
+export declare const LinkVariantList: readonly ["adaptive", "brand", "inline"];
 export type LinkVariantType = (typeof LinkVariantList)[number];
 export declare const LinkSizeList: readonly ["medium", "small"];
 export type LinkSizeType = (typeof LinkSizeList)[number];
@@ -19,6 +19,6 @@ export type DBLinkDefaultProps = {
      */
     variant?: LinkVariantType;
 };
-export type DBLinkProps = DBLinkDefaultProps & GlobalProps & ClickEventProps<HTMLAnchorElement> & LinkProps & ShowIconProps & TextProps;
+export type DBLinkProps = DBLinkDefaultProps & GlobalProps & ClickEventProps<HTMLAnchorElement> & LinkProps & ShowIconProps & TextProps & WrapProps;
 export type DBLinkDefaultState = {};
 export type DBLinkState = DBLinkDefaultState & GlobalState & ClickEventState<HTMLAnchorElement>;

package/dist/components/link/model.js

@@ -1,3 +1,3 @@
-export const LinkVariantList = ['adaptive', 'brand'];
+export const LinkVariantList = ['adaptive', 'brand', 'inline'];
 export const LinkSizeList = ['medium', 'small'];
 export const LinkContentList = ['external', 'internal'];

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

@@ -1,5 +1,5 @@
-import { AriaLabelledByProps, GlobalProps, GlobalState } from '../../shared/model';
+import { GlobalProps, GlobalState } from '../../shared/model';
 export type DBNavigationDefaultProps = {};
-export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps & AriaLabelledByProps;
+export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps;
 export type DBNavigationDefaultState = {};
 export type DBNavigationState = DBNavigationDefaultState & GlobalState;

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBNavigation: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps | "labelledBy"> & import("../..").GlobalProps & import("../..").AriaLabelledByProps & React.RefAttributes<any>>;
+declare const DBNavigation: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../..").GlobalProps> & import("../..").GlobalProps & React.RefAttributes<any>>;
 export default DBNavigation;

package/dist/components/navigation/navigation.js

@@ -10,7 +10,7 @@ function DBNavigationFn(props, component) {
     useEffect(() => {
         set_id(props.id || "navigation-" + uuid());
     }, []);
-    return (React.createElement("nav", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, "aria-labelledby": props.labelledBy }, 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-navigation", props.className) }),
+    return (React.createElement("nav", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-navigation", props.className) }),
         React.createElement("menu", null, props.children)));
 }
 const DBNavigation = forwardRef(DBNavigationFn);

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

@@ -1,4 +1,4 @@
-import { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, NavigationBehaviorState, ShowIconProps, TextProps, WidthProps } from '../../shared/model';
+import { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, NavigationBehaviorState, ShowIconProps, TextProps, WidthProps, WrapProps } from '../../shared/model';
 import { NavigationItemSafeTriangle } from '../../utils/navigation';
 export type DBNavigationItemDefaultProps = {
     /**
@@ -17,12 +17,8 @@ export type DBNavigationItemDefaultProps = {
      * This is for mobile navigation only, if it is set the sub-navigation is a static overlay
      */
     subNavigationExpanded?: boolean | string;
-    /**
-     * Determines whether the text should wrap when its parent container is too small, preventing overflow.
-     */
-    wrap?: boolean | string;
 };
-export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & NavigationBackButtonProps & ShowIconProps & TextProps;
+export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & WrapProps & NavigationBackButtonProps & ShowIconProps & TextProps;
 export type DBNavigationItemDefaultState = {
     handleBackClick: (event: ClickEvent<HTMLButtonElement>) => void;
     hasAreaPopup: boolean;