@db-ux/react-core-components 2.4.3 → 3.0.0

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/custom-select/custom-select.js

@@ -597,7 +597,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) },

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/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);
@@ -113,11 +113,11 @@ function DBInputFn(props, component) {
     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;

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

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

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

@@ -3,7 +3,7 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { DEFAULT_BACK } from "../../shared/constants";
-import { cls, delay, getBoolean, getBooleanAsString, getHideProp, uuid, } from "../../utils";
+import { cls, delay, getBoolean, getBooleanAsString, uuid } from "../../utils";
 import { NavigationItemSafeTriangle } from "../../utils/navigation";
 import DBButton from "../button/button";
 function DBNavigationItemFn(props, component) {
@@ -63,7 +63,7 @@ function DBNavigationItemFn(props, component) {
             }
         }
     }, [initialized, _ref.current]);
-    return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: props.id, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap), "aria-disabled": getBooleanAsString(props.disabled) }),
+    return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: props.id, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap), "aria-disabled": getBooleanAsString(props.disabled) }),
         !hasSubNavigation ? (React.createElement(React.Fragment, null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children))) : null,
         hasSubNavigation ? (React.createElement(React.Fragment, null,
             React.createElement("button", { className: "db-navigation-item-expand-button", "aria-haspopup": hasAreaPopup, "aria-expanded": isSubNavigationExpanded, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),

package/dist/components/notification/notification.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, getBoolean, getHideProp, stringPropVisible } from "../../utils";
+import { cls, getBoolean, getBooleanAsString, stringPropVisible, } from "../../utils";
 import DBButton from "../button/button";
 function DBNotificationFn(props, component) {
     var _a;
@@ -16,7 +16,7 @@ function DBNotificationFn(props, component) {
             props.onClose(event);
         }
     }
-    return (React.createElement("article", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "onClose"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-notification", props.className), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-link-variant": props.linkVariant }),
+    return (React.createElement("article", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "onClose"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-notification", props.className), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
         React.createElement(React.Fragment, null, props.image),
         stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", null, props.headline)) : null,
         React.createElement("p", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),

package/dist/components/radio/radio.js

@@ -4,7 +4,6 @@ import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, getBoolean, getHideProp, uuid } from "../../utils";
 function DBRadioFn(props, component) {
-    var _a;
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [_id, set_id] = useState(() => undefined);
@@ -34,7 +33,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), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-radio", props.className), htmlFor: _id }),
-        React.createElement("input", Object.assign({ type: "radio", "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: _id, name: props.name, checked: getBoolean(props.checked, "checked"), disabled: getBoolean(props.disabled, "disabled"), "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"), value: props.value, required: getBoolean(props.required, "required"), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
         props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBRadio = forwardRef(DBRadioFn);

package/dist/components/select/select.js

@@ -3,7 +3,7 @@ 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_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 { cls, delay, getBoolean, getBooleanAsString, getHideProp, getOptionKey, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
 import DBInfotext from "../infotext/infotext";
 function DBSelectFn(props, component) {
     var _a, _b, _c, _d, _e;
@@ -119,7 +119,7 @@ function DBSelectFn(props, component) {
     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-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon) }),
+    return (React.createElement("div", Object.assign({}, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
         React.createElement("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { required: getBoolean(props.required, "required"), disabled: getBoolean(props.disabled, "disabled"), id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds }),
             React.createElement("option", { hidden: true }),

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

@@ -1,10 +1,10 @@
-import { ChangeEventProps, ChangeEventState, EmphasisProps, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, IconAfterProps, IconProps, SizeProps } from '../../shared/model';
+import { ChangeEventProps, ChangeEventState, EmphasisProps, FocusEventProps, FocusEventState, FormCheckProps, FormProps, FormState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, SizeProps } from '../../shared/model';
 export type DBSwitchDefaultProps = {
     /**
      * Add additional icons to indicate active/inactive state.
      */
     visualAid?: boolean | string;
 };
-export type DBSwitchProps = DBSwitchDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & EmphasisProps & SizeProps & IconProps & IconAfterProps;
+export type DBSwitchProps = DBSwitchDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & EmphasisProps & SizeProps & IconProps & IconTrailingProps & IconLeadingProps;
 export type DBSwitchDefaultState = {};
 export type DBSwitchState = DBSwitchDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState;

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>, "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>>;
+declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "value" | "size" | "icon" | "checked" | keyof import("../../shared/model").GlobalProps | "emphasis" | "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" | "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").IconTrailingProps & import("../../shared/model").IconLeadingProps & React.RefAttributes<any>>;
 export default DBSwitch;

package/dist/components/switch/switch.js

@@ -27,7 +27,7 @@ function DBSwitchFn(props, component) {
         set_id((_a = props.id) !== null && _a !== void 0 ? _a : `switch-${uuid()}`);
     }, []);
     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, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-switch", props.className) }),
-        React.createElement("input", Object.assign({ type: "checkbox", role: "switch", id: _id, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-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, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { checked: getBoolean(props.checked, "checked"), value: props.value, disabled: getBoolean(props.disabled, "disabled"), "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, name: props.name, required: getBoolean(props.required, "required"), "data-aid-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-aid-icon-trailing": props.iconTrailing, onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event) })),
         props.label ? React.createElement(React.Fragment, null, props.label) : React.createElement(React.Fragment, null, props.children)));
 }
 const DBSwitch = forwardRef(DBSwitchFn);

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

@@ -1,4 +1,4 @@
-import { ActiveProps, AriaControlsProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconAfterProps, IconProps, InitializedState, NameProps, NameState, ShowIconProps } from '../../shared/model';
+import { ActiveProps, ChangeEventProps, ChangeEventState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InitializedState, NameProps, NameState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps } from '../../shared/model';
 export type DBTabItemDefaultProps = {
     /**
      * To control the component
@@ -17,7 +17,7 @@ export type DBTabItemDefaultProps = {
      */
     noText?: boolean | string;
 };
-export type DBTabItemProps = GlobalProps & DBTabItemDefaultProps & IconProps & IconAfterProps & ActiveProps & AriaControlsProps & ChangeEventProps<HTMLInputElement> & ShowIconProps & NameProps;
+export type DBTabItemProps = GlobalProps & DBTabItemDefaultProps & IconProps & IconTrailingProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & ActiveProps & ChangeEventProps<HTMLInputElement> & ShowIconProps & NameProps;
 export type DBTabItemDefaultState = {
     _selected: boolean;
 };

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

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

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

@@ -2,8 +2,9 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, getBoolean, getBooleanAsString, getHideProp } from "../../utils";
+import { cls, getBoolean, getBooleanAsString } from "../../utils";
 function DBTabItemFn(props, component) {
+    var _a, _b;
     const _ref = component || useRef(component);
     const [_selected, set_selected] = useState(() => false);
     const [_name, set_name] = useState(() => undefined);
@@ -46,8 +47,8 @@ function DBTabItemFn(props, component) {
         }
     }, [props.name]);
     return (React.createElement("li", Object.assign({ role: "none" }, 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-tab-item", props.className) }),
-        React.createElement("label", { htmlFor: props.id, "data-icon": props.icon, "data-icon-after": props.iconAfter, "data-hide-icon": getHideProp(props.showIcon), "data-hide-icon-after": getHideProp(props.showIcon), "data-no-text": getBooleanAsString(props.noText) },
-            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: getBoolean(props.disabled, "disabled"), "aria-selected": _selected, "aria-controls": props.controls, checked: getBoolean(props.checked, "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"]), { name: _name, id: props.id, onInput: (event) => handleChange(event) })),
+        React.createElement("label", { htmlFor: props.id, "data-icon": (_a = props.iconLeading) !== null && _a !== void 0 ? _a : props.icon, "data-icon-trailing": props.iconTrailing, "data-show-icon": getBooleanAsString((_b = props.showIconLeading) !== null && _b !== void 0 ? _b : props.showIcon), "data-show-icon-trailing": getBooleanAsString(props.showIconTrailing), "data-no-text": getBooleanAsString(props.noText) },
+            React.createElement("input", Object.assign({ type: "radio", role: "tab", disabled: getBoolean(props.disabled, "disabled"), "aria-selected": _selected, checked: getBoolean(props.checked, "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"]), { name: _name, id: props.id, onInput: (event) => handleChange(event) })),
             props.label ? React.createElement(React.Fragment, null, props.label) : null,
             props.children)));
 }

package/dist/components/tab-panel/model.d.ts

@@ -1,10 +1,10 @@
-import { AriaLabelledByProps, GlobalProps, GlobalState } from '../../shared/model';
+import { GlobalProps, GlobalState } from '../../shared/model';
 export type DBTabPanelDefaultProps = {
     /**
      * The content if you don't want to use children.
      */
     content?: string;
 };
-export type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps & AriaLabelledByProps;
+export type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps;
 export type DBTabPanelDefaultState = {};
 export type DBTabPanelState = DBTabPanelDefaultState & GlobalState;

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

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

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

@@ -6,7 +6,7 @@ import { cls } from "../../utils";
 function DBTabPanelFn(props, component) {
     const _ref = component || useRef(component);
     useEffect(() => { }, []);
-    return (React.createElement("section", Object.assign({ role: "tabpanel", 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"]), 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-tab-panel", props.className), id: props.id, "aria-labelledby": props.labelledBy }),
+    return (React.createElement("section", Object.assign({ role: "tabpanel", 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"]), 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-tab-panel", props.className), id: props.id }),
         props.content ? React.createElement(React.Fragment, null, props.content) : null,
         props.children));
 }

package/dist/components/tabs/tabs.js

@@ -151,7 +151,7 @@ function DBTabsFn(props, component) {
     return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "onTabSelect", "onIndexChange"]), { 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-tabs", props.className), "data-orientation": props.orientation, "data-scroll-behavior": props.behavior, "data-alignment": (_a = props.alignment) !== null && _a !== void 0 ? _a : "start", "data-width": (_b = props.width) !== null && _b !== void 0 ? _b : "auto", onInput: (event) => handleChange(event) }),
         showScrollLeft ? (React.createElement(DBButton, { className: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
         props.tabs ? (React.createElement(React.Fragment, null,
-            React.createElement(DBTabList, null, (_c = convertTabs()) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, active: tab.active, label: tab.label, iconAfter: tab.iconAfter, icon: tab.icon, noText: tab.noText })))), (_d = convertTabs()) === null || _d === void 0 ? void 0 :
+            React.createElement(DBTabList, null, (_c = convertTabs()) === null || _c === void 0 ? void 0 : _c.map((tab, index) => (React.createElement(DBTabItem, { key: props.name + "tab-item" + index, active: tab.active, label: tab.label, iconTrailing: tab.iconTrailing, icon: tab.icon, noText: tab.noText })))), (_d = convertTabs()) === null || _d === void 0 ? void 0 :
             _d.map((tab, index) => (React.createElement(DBTabPanel, { key: props.name + "tab-panel" + index, content: tab.content }, tab.children))))) : null,
         showScrollRight ? (React.createElement(DBButton, { className: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: (event) => scroll() }, "Scroll right")) : null,
         props.children));

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

@@ -1,4 +1,4 @@
-import { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, InitializedState, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
+import { ClickEvent, ContentSlotProps, EmphasisProps, GlobalProps, GlobalState, IconProps, OverflowProps, SemanticProps, ShowIconProps } from '../../shared/model';
 export declare const TagBehaviorList: readonly ["static", "removable"];
 export type TagBehaviorType = (typeof TagBehaviorList)[number];
 export type DBTagEventsProps = {
@@ -18,10 +18,6 @@ export type DBTagDefaultProps = {
      *  - removable: add a remove button at the end of the tag
      */
     behavior?: TagBehaviorType | string;
-    /**
-     * @deprecated Disable tag
-     */
-    disabled?: boolean | string;
     /**
      * Define the text next to the icon specified via the icon Property to get hidden.
      */
@@ -48,4 +44,4 @@ export type DBTagDefaultState = {
     getRemoveButtonText: () => string;
     handleRemove: (event?: ClickEvent<HTMLButtonElement> | void) => void;
 };
-export type DBTagState = DBTagDefaultState & GlobalState & InitializedState;
+export type DBTagState = DBTagDefaultState & GlobalState;

package/dist/components/tag/tag.js

@@ -1,14 +1,13 @@
 "use client";
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useState, useRef, useEffect, forwardRef } from "react";
+import { useRef, forwardRef } from "react";
 import { DEFAULT_REMOVE } from "../../shared/constants";
-import { cls, getBooleanAsString, getHideProp } from "../../utils";
+import { cls, getBooleanAsString } from "../../utils";
 import DBTooltip from "../tooltip/tooltip";
 function DBTagFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
-    const [initialized, setInitialized] = useState(() => false);
     function handleRemove(event) {
         if (!event)
             return;
@@ -24,24 +23,7 @@ function DBTagFn(props, component) {
         // TODO: We should think this through again, if we would really like to have default and especially english, instead of german labels in here
         return DEFAULT_REMOVE;
     }
-    const hasInitialized = useRef(false);
-    if (!hasInitialized.current) {
-        setInitialized(true);
-        hasInitialized.current = true;
-    }
-    useEffect(() => {
-        var _a, _b;
-        if (initialized && _ref.current && props.disabled !== undefined) {
-            const button = (_a = _ref.current) === null || _a === void 0 ? void 0 : _a.querySelector("button:not(.db-tab-remove-button)");
-            const input = (_b = _ref.current) === null || _b === void 0 ? void 0 : _b.querySelector("input");
-            for (const element of [button, input]) {
-                if (element) {
-                    element.disabled = Boolean(props.disabled);
-                }
-            }
-        }
-    }, [initialized, props.disabled, _ref.current]);
-    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", "onRemove"]), { 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-tag", props.className), "data-disabled": getBooleanAsString(props.disabled), "data-semantic": props.semantic, "data-emphasis": props.emphasis, "data-icon": props.icon, "data-show-check-state": getBooleanAsString((_a = props.showCheckState) !== null && _a !== void 0 ? _a : true), "data-hide-icon": getHideProp(props.showIcon), "data-no-text": getBooleanAsString(props.noText), "data-overflow": getBooleanAsString(props.overflow) }),
+    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", "onRemove"]), { 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-tag", props.className), "data-semantic": props.semantic, "data-emphasis": props.emphasis, "data-icon": props.icon, "data-show-check-state": getBooleanAsString((_a = props.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": getBooleanAsString(props.showIcon), "data-no-text": getBooleanAsString(props.noText), "data-overflow": getBooleanAsString(props.overflow) }),
         React.createElement(React.Fragment, null, props.content),
         props.children,
         props.text ? React.createElement(React.Fragment, null, props.text) : null,

package/dist/shared/model.d.ts

@@ -13,11 +13,6 @@ export type GlobalProps = {
      * Workaround for TypeScript using class for all components.
      */
     class?: string | any;
-    /**
-     * @deprecated
-     * [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is used to link to the elements that describe the element with the set attribute.
-     */
-    describedbyid?: string;
     /**
      * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.
      */
@@ -51,11 +46,31 @@ export type ShowIconProps = {
      */
     showIcon?: boolean | string;
 };
-export type IconAfterProps = {
+export type ShowIconLeadingProps = {
+    /**
+     * Enables or disables the visibility of the leading icon.
+     * For many components this property is optional to reflect Figma properties.
+     */
+    showIconLeading?: boolean | string;
+};
+export type ShowIconTrailingProps = {
+    /**
+     * Enables or disables the visibility of the trailing icon.
+     * For many components this property is optional to reflect Figma properties.
+     */
+    showIconTrailing?: boolean | string;
+};
+export type IconLeadingProps = {
+    /**
+     * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
+     */
+    iconLeading?: IconTypes;
+};
+export type IconTrailingProps = {
     /**
      * Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
      */
-    iconAfter?: IconTypes;
+    iconTrailing?: IconTypes;
 };
 export declare const SpacingList: readonly ["medium", "small", "large", "none"];
 export type SpacingType = (typeof SpacingList)[number];
@@ -108,6 +123,12 @@ export type OverflowProps = {
      */
     overflow?: boolean | string;
 };
+export type WrapProps = {
+    /**
+     * Determines whether the text should wrap when its parent container is too small, preventing overflow.
+     */
+    wrap?: boolean | string;
+};
 export declare const OrientationList: readonly ["horizontal", "vertical"];
 export type OrientationType = (typeof OrientationList)[number];
 export type OrientationProps = {
@@ -346,17 +367,11 @@ export type FormState = {
 export type InitializedState = {
     initialized: boolean;
 };
-export declare const LinkCurrentList: readonly ["time", "true", "false", "date", "page", "step", "location"];
-export type LinkCurrentType = (typeof LinkCurrentList)[number];
 export declare const LinkTargetList: readonly ["_self", "_blank", "_parent", "_top"];
 export type LinkTargetType = (typeof LinkTargetList)[number];
 export declare const LinkReferrerPolicyList: readonly ["no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", "unsafe-url"];
 export type LinkReferrerPolicyType = (typeof LinkReferrerPolicyList)[number];
 export type LinkProps = {
-    /**
-     * Sets aria attribute based on [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current).
-     */
-    current?: boolean | LinkCurrentType;
     /**
      * Disables the link.
      */
@@ -369,10 +384,6 @@ export type LinkProps = {
      * Hints for the human [language of the linked page or document](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
      */
     hreflang?: string;
-    /**
-     * Sets aria attribute based on [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).
-     */
-    label?: string;
     /**
      * Where to open the linked URL, as the name for a [browsing context](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
      */
@@ -389,10 +400,6 @@ export type LinkProps = {
      * How much of the referrer to send when following the link.
      */
     referrerpolicy?: LinkReferrerPolicyType;
-    /**
-     * Sets aria role based on [`aria-selected`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected).
-     */
-    selected?: boolean | string;
 };
 export type TextProps = {
     /**
@@ -493,12 +500,6 @@ export type NavigationBackButtonProps = {
      */
     backButtonText?: string;
 };
-export type AriaLabelledByProps = {
-    /**
-     * Pass `aria-labelledby` to inner element
-     */
-    labelledBy?: string;
-};
 export type AriaControlsProps = {
     /**
      * Pass `aria-controls` to inner element

package/dist/shared/model.js

@@ -16,7 +16,6 @@ export const ValidationList = ['invalid', 'valid', 'no-validation'];
 export const FieldSizingList = ['fixed', 'content'];
 export const LabelVariantList = ['above', 'floating'];
 export const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'email', 'username', 'new-password', 'current-password', 'one-time-code', 'organization-title', 'organization', 'street-address', 'shipping', 'billing', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'bday', 'bday-day', 'bday-month', 'bday-year', 'sex', 'tel', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension', 'impp', 'url', 'photo', 'webauthn'];
-export const LinkCurrentList = ['time', 'true', 'false', 'date', 'page', 'step', 'location'];
 export const LinkTargetList = ['_self', '_blank', '_parent', '_top'];
 export const LinkReferrerPolicyList = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'];
 export const AlignmentList = ['start', 'center'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "2.4.3",
+  "version": "3.0.0",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "2.4.3",
-    "@db-ux/core-foundations": "2.4.3"
+    "@db-ux/core-components": "3.0.0",
+    "@db-ux/core-foundations": "3.0.0"
   }
 }