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

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;
@@ -14,7 +14,7 @@ function DBSelectFn(props, component) {
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
     const [_placeholderId, set_placeholderId] = useState(() => "");
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_value, set_value] = useState(() => "");
     const [initialized, setInitialized] = useState(() => false);
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
@@ -113,13 +113,14 @@ function DBSelectFn(props, component) {
             else {
                 set_descByIds(placeholderId);
             }
+            handleValidation();
             setInitialized(false);
         }
     }, [_id, initialized]);
     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/components/textarea/textarea.js

@@ -13,7 +13,7 @@ function DBTextareaFn(props, component) {
     const [_validMessageId, set_validMessageId] = useState(() => undefined);
     const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
     const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
-    const [_descByIds, set_descByIds] = useState(() => "");
+    const [_descByIds, set_descByIds] = useState(() => undefined);
     const [_value, set_value] = useState(() => "");
     const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
     function hasValidState() {
@@ -46,7 +46,7 @@ function DBTextareaFn(props, component) {
             set_descByIds(_messageId);
         }
         else {
-            set_descByIds("");
+            set_descByIds(undefined);
         }
     }
     function handleInput(event) {
@@ -95,6 +95,7 @@ function DBTextareaFn(props, component) {
             if (stringPropVisible(props.message, props.showMessage)) {
                 set_descByIds(messageId);
             }
+            handleValidation();
         }
     }, [_id]);
     useEffect(() => {

package/dist/index.d.ts

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

package/dist/index.js

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