@db-ux/react-core-components 3.0.2-shell4-bdb351c → 3.0.3

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

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

package/dist/components/brand/brand.js

@@ -0,0 +1,13 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { DEFAULT_ICON } from "../../shared/constants";
+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-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/brand/index.d.ts

@@ -0,0 +1 @@
+export { default as DBBrand } from './brand';

package/dist/components/brand/index.js

@@ -0,0 +1 @@
+export { default as DBBrand } from './brand';

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

@@ -0,0 +1,10 @@
+import { GlobalProps, GlobalState, IconProps, ShowIconProps, TextProps } from '../../shared/model';
+export type DBBrandDefaultProps = {
+    /**
+     * @deprecated: Disable the default logo svg to pass in a custom `img`
+     */
+    hideLogo?: boolean;
+};
+export type DBBrandProps = DBBrandDefaultProps & GlobalProps & IconProps & ShowIconProps & TextProps;
+export type DBBrandDefaultState = {};
+export type DBBrandState = DBBrandDefaultState & GlobalState;

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 | keyof import("./model").DBButtonDefaultProps | "showIcon" | "showIconLeading" | "showIconTrailing" | "iconLeading" | "iconTrailing"> & import("./model").DBButtonDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLButtonElement> & import("../..").IconProps & import("../..").WidthProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").ShowIconLeadingProps & import("../..").ShowIconTrailingProps & import("../..").IconLeadingProps & import("../..").IconTrailingProps & React.RefAttributes<any>>;
+declare const DBButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<any>, "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/checkbox/checkbox.d.ts

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

package/dist/components/checkbox/checkbox.js

@@ -30,7 +30,7 @@ function DBCheckboxFn(props, component) {
                 DEFAULT_INVALID_MESSAGE);
             if (hasVoiceOver()) {
                 set_voiceOverFallback(_invalidMessage);
-                void delay(() => set_voiceOverFallback(""), 1000);
+                delay(() => set_voiceOverFallback(""), 1000);
             }
         }
         else if (hasValidState() &&
@@ -39,7 +39,7 @@ function DBCheckboxFn(props, component) {
             set_descByIds(_validMessageId);
             if (hasVoiceOver()) {
                 set_voiceOverFallback((_d = props.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE);
-                void delay(() => set_voiceOverFallback(""), 1000);
+                delay(() => set_voiceOverFallback(""), 1000);
             }
         }
         else if (stringPropVisible(props.message, props.showMessage)) {

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

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

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

@@ -75,7 +75,7 @@ function DBCustomSelectFn(props, component) {
                 DEFAULT_INVALID_MESSAGE);
             if (hasVoiceOver()) {
                 set_voiceOverFallback(_invalidMessage);
-                void delay(() => set_voiceOverFallback(""), 1000);
+                delay(() => set_voiceOverFallback(""), 1000);
             }
             if (_userInteraction) {
                 set_validity((_c = props.validation) !== null && _c !== void 0 ? _c : "invalid");
@@ -87,7 +87,7 @@ function DBCustomSelectFn(props, component) {
             set_descByIds(_validMessageId);
             if (hasVoiceOver()) {
                 set_voiceOverFallback((_e = props.validMessage) !== null && _e !== void 0 ? _e : DEFAULT_VALID_MESSAGE);
-                void delay(() => set_voiceOverFallback(""), 1000);
+                delay(() => set_voiceOverFallback(""), 1000);
             }
             set_validity((_f = props.validation) !== null && _f !== void 0 ? _f : "valid");
         }
@@ -176,7 +176,7 @@ function DBCustomSelectFn(props, component) {
             const dropdown = detailsRef.current.querySelector("article");
             if (dropdown) {
                 // This is a workaround for Angular
-                void delay(() => {
+                delay(() => {
                     var _a;
                     handleFixedDropdown(dropdown, detailsRef.current, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
                 }, 1);
@@ -217,7 +217,7 @@ function DBCustomSelectFn(props, component) {
                                 // or to the last checkbox
                                 const search = getSearchInput(detailsRef.current);
                                 if (search) {
-                                    void delay(() => {
+                                    delay(() => {
                                         search.focus();
                                     }, 100);
                                 }
@@ -282,7 +282,7 @@ function DBCustomSelectFn(props, component) {
                     if (!detailsRef.current.contains(relatedTarget)) {
                         // We need to use delay here because the combination of `contains`
                         // and changing the DOM element causes a race condition inside browser
-                        void delay(() => (detailsRef.current.open = false), 1);
+                        delay(() => (detailsRef.current.open = false), 1);
                     }
                 }
             }
@@ -355,7 +355,7 @@ function DBCustomSelectFn(props, component) {
                     ? checkboxes.at(1)
                     : first;
                 if (checkbox) {
-                    void delay(() => {
+                    delay(() => {
                         // Takes some time until element can be focused
                         checkbox.focus();
                     }, 1);
@@ -368,7 +368,7 @@ function DBCustomSelectFn(props, component) {
             // Focus search if possible
             const search = getSearchInput(detailsRef.current);
             if (search) {
-                void delay(() => {
+                delay(() => {
                     // Takes some time until element can be focused
                     search.focus();
                 }, 1);

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

@@ -189,9 +189,6 @@ export type DBCustomSelectDefaultState = {
     _infoTextId?: string;
     _internalChangeTimestamp: number;
     _documentClickListenerCallbackId?: string;
-    _documentScrollListenerCallbackId?: string;
-    handleDocumentScroll: (event: any) => void;
-    _observer?: IntersectionObserver;
     _searchValue?: string;
     _userInteraction?: boolean;
     getNativeSelectValue: () => string;
@@ -202,7 +199,7 @@ export type DBCustomSelectDefaultState = {
     searchEnabled: boolean;
     amountOptions: number;
     setDescById: (descId?: string) => void;
-    handleTagRemove: (option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void | any) => void;
+    handleTagRemove: (option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void) => void;
     handleSummaryFocus: () => void;
     handleSelect: (value?: string) => void;
     handleSelectAll: (event: any) => void;

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

@@ -1,8 +1,5 @@
 import * as React from "react";
-declare const DBCustomSelectListItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "name" | "value" | "label" | "disabled" | "icon" | "checked" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("./model").DBCustomSelectListItemDefaultProps | "isGroupTitle" | "showDivider"> & import("./model").DBCustomSelectListItemDefaultProps & import("../../shared/model").GlobalProps & {
-    label?: string;
-    name?: string;
-} & import("../../shared/model").DisabledProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & {
+declare const DBCustomSelectListItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "value" | "icon" | "checked" | keyof import("../../shared/model").GlobalProps | "showIcon" | keyof import("../../shared/model").ChangeEventProps<HTMLInputElement> | keyof import("../../shared/model").BaseFormProps | keyof import("./model").DBCustomSelectListItemDefaultProps | "isGroupTitle" | "showDivider"> & import("./model").DBCustomSelectListItemDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").BaseFormProps & import("../../shared/model").ValueProps & import("../../shared/model").FormCheckProps & import("../../shared/model").ChangeEventProps<HTMLInputElement> & {
     isGroupTitle?: boolean;
     showDivider?: boolean;
 } & import("../../shared/model").IconProps & import("../../shared/model").ShowIconProps & React.RefAttributes<any>>;

package/dist/components/drawer/drawer.js

@@ -58,7 +58,7 @@ function DBDrawerFn(props, component) {
                 if (dialogContainerRef.current) {
                     dialogContainerRef.current.hidden = true;
                 }
-                void delay(() => {
+                delay(() => {
                     var _a;
                     if (dialogContainerRef.current) {
                         dialogContainerRef.current.hidden = false;
@@ -87,9 +87,9 @@ function DBDrawerFn(props, component) {
     return (React.createElement("dialog", Object.assign({ className: "db-drawer", id: props.id, ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "onClose"]), { onClick: (event) => handleClose(event), onKeyDown: (event) => handleClose(event), "data-position": props.position, "data-backdrop": props.backdrop, "data-direction": props.direction, "data-variant": props.variant }),
         React.createElement("article", Object.assign({ ref: dialogContainerRef }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-drawer-container", props.className), "data-spacing": props.spacing, "data-width": props.width, "data-direction": props.direction, "data-rounded": getBooleanAsString(props.rounded) }),
             React.createElement("header", { className: "db-drawer-header" },
-                React.createElement("div", { className: "db-drawer-header-text" }, props.drawerHeaderPlain ? (React.createElement(React.Fragment, null, props.drawerHeaderPlain)) : (React.createElement(React.Fragment, null,
-                    React.createElement(React.Fragment, null, props.drawerHeader)))),
-                React.createElement(DBButton, { className: "button-close-drawer", icon: "cross", variant: "ghost", type: "button", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event, true) }, (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)),
+                React.createElement("div", { className: "db-drawer-header-text" },
+                    React.createElement(React.Fragment, null, props.drawerHeader)),
+                React.createElement(DBButton, { className: "button-close-drawer", icon: "cross", variant: "ghost", id: props.closeButtonId, noText: true, onClick: (event) => handleClose(event, true) }, (_a = props.closeButtonText) !== null && _a !== void 0 ? _a : DEFAULT_CLOSE_BUTTON)),
             React.createElement("div", { className: "db-drawer-content" }, props.children))));
 }
 const DBDrawer = forwardRef(DBDrawerFn);

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

@@ -1,7 +1,7 @@
 import { ClickEvent, CloseEventProps, CloseEventState, GeneralKeyboardEvent, GlobalProps, GlobalState, InitializedState, InnerCloseButtonProps, SpacingProps, WidthProps } from '../../shared/model';
 export declare const DrawerBackdropList: readonly ["none", "strong", "weak", "invisible"];
 export type DrawerBackdropType = (typeof DrawerBackdropList)[number];
-export declare const DrawerDirectionList: readonly ["custom", "left", "right", "up", "down"];
+export declare const DrawerDirectionList: readonly ["left", "right", "up", "down"];
 export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
 export declare const DrawerVariantList: readonly ["modal", "inside"];
 export type DrawerVariantType = (typeof DrawerVariantList)[number];
@@ -22,10 +22,6 @@ export type DBDrawerDefaultProps = {
      * Slot for changing the header of the drawer.
      */
     drawerHeader?: any;
-    /**
-     * Text for changing the header of the drawer.
-     */
-    drawerHeaderPlain?: string;
     /**
      * The open attribute opens or closes the drawer based on the state.
      */

package/dist/components/drawer/model.js

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

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

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

package/dist/components/header/header.js

@@ -0,0 +1,67 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_BURGER_MENU } from "../../shared/constants";
+import { addAttributeToChildren, cls, getBoolean } from "../../utils";
+import { isEventTargetNavigationItem } from "../../utils/navigation";
+import DBButton from "../button/button";
+import DBDrawer from "../drawer/drawer";
+function DBHeaderFn(props, component) {
+    var _a;
+    const _ref = component || useRef(component);
+    const [initialized, setInitialized] = useState(() => false);
+    const [forcedToMobile, setForcedToMobile] = useState(() => false);
+    function handleToggle(event) {
+        if (event && event.stopPropagation) {
+            event.stopPropagation();
+        }
+        const open = !getBoolean(props.drawerOpen, "drawerOpen");
+        if (props.onToggle) {
+            props.onToggle(open);
+        }
+    }
+    function handleNavigationItemClick(event) {
+        if (isEventTargetNavigationItem(event)) {
+            handleToggle();
+        }
+    }
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (initialized && _ref.current && props.forceMobile) {
+            // Adds this attribute to the header to enable all styling which would have
+            // @media screen and (min-width: $db-screens-m) to show mobile navigation on a desktop device
+            addAttributeToChildren(_ref.current, {
+                key: "data-force-mobile",
+                value: "true",
+            });
+            setForcedToMobile(true);
+        }
+    }, [initialized, _ref.current]);
+    return (React.createElement("header", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "onToggle"]), getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-header", props.className), id: props.id, "data-width": props.width, "data-on-forcing-mobile": props.forceMobile && !forcedToMobile }),
+        React.createElement(DBDrawer, { className: "db-header-drawer", spacing: "small", rounded: true, open: getBoolean(props.drawerOpen), onClose: (event) => handleToggle() },
+            React.createElement("div", { className: "db-header-drawer-navigation" },
+                React.createElement("div", { className: "db-header-navigation", onClick: (event) => handleNavigationItemClick(event) }, props.children),
+                React.createElement("div", { className: "db-header-meta-navigation" },
+                    React.createElement(React.Fragment, null, props.metaNavigation))),
+            React.createElement("div", { className: "db-header-secondary-action" },
+                React.createElement(React.Fragment, null, props.secondaryAction))),
+        React.createElement("div", { className: "db-header-meta-navigation" },
+            React.createElement(React.Fragment, null, props.metaNavigation)),
+        React.createElement("div", { className: "db-header-navigation-bar" },
+            React.createElement("div", { className: "db-header-brand-container" },
+                React.createElement(React.Fragment, null, props.brand)),
+            React.createElement("div", { className: "db-header-navigation-container" },
+                React.createElement("div", { className: "db-header-navigation" }, props.children),
+                React.createElement("div", { className: "db-header-primary-action" },
+                    React.createElement(React.Fragment, null, props.primaryAction))),
+            React.createElement("div", { className: "db-header-action-container" },
+                React.createElement("div", { className: "db-header-burger-menu-container" },
+                    React.createElement(DBButton, { icon: "menu", variant: "ghost", noText: true, onClick: (event) => handleToggle() }, (_a = props.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)),
+                React.createElement("div", { className: "db-header-secondary-action" },
+                    React.createElement(React.Fragment, null, props.secondaryAction))))));
+}
+const DBHeader = forwardRef(DBHeaderFn);
+export default DBHeader;

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

@@ -0,0 +1 @@
+export { default as DBHeader } from './header';

package/dist/components/header/index.js

@@ -0,0 +1 @@
+export { default as DBHeader } from './header';

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

@@ -0,0 +1,44 @@
+import { ContainerWidthProps, GlobalProps, GlobalState, InitializedState, NavigationBehaviorState, ToggleEventProps, ToggleEventState } from '../../shared/model';
+export type DBHeaderDefaultProps = {
+    /**
+     * Slot to pass in the DBBrand component
+     */
+    brand?: any;
+    /**
+     * Slot to pass in a meta navigation.
+     * - Desktop: Above the regular header
+     * - Mobile: Inside the drawer
+     */
+    metaNavigation?: any;
+    /**
+     * Slot to pass one or more elements like DBButton (e.g. search) as primary action.
+     * - Desktop: Shown next to the main-navigation
+     * - Mobile: Shown next to the brand
+     */
+    primaryAction?: any;
+    /**
+     * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.
+     * - Desktop: Shown separated by divider at the end of the header
+     * - Mobile: Shown inside the drawer at the bottom.
+     */
+    secondaryAction?: any;
+    /**
+     * Open/closes the drawer for mobile header or if `forceMobile` is true.
+     */
+    drawerOpen?: boolean | string;
+    /**
+     * Forces the header to use mobile layout for desktop as well.
+     * You should only use this setting if you really can't provide a smaller navigation.
+     * Overwrite size of the drawer with '--db-drawer-max-width: xxx'
+     */
+    forceMobile?: boolean | string;
+    /**
+     * This attribute sets the label for the burger menu button for mobile headers.
+     */
+    burgerMenuLabel?: string;
+};
+export type DBHeaderProps = DBHeaderDefaultProps & GlobalProps & ToggleEventProps & ContainerWidthProps;
+export type DBHeaderDefaultState = {
+    forcedToMobile?: boolean;
+};
+export type DBHeaderState = DBHeaderDefaultState & GlobalState & ToggleEventState<HTMLElement> & InitializedState & NavigationBehaviorState;

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

@@ -1,6 +1,3 @@
 import * as React from "react";
-declare const DBInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "name" | "value" | "label" | "disabled" | "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").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 & {
-    label?: string;
-    name?: string;
-} & import("../../shared/model").DisabledProps & 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>>;
+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

@@ -31,7 +31,7 @@ function DBInputFn(props, component) {
                 DEFAULT_INVALID_MESSAGE);
             if (hasVoiceOver()) {
                 set_voiceOverFallback(_invalidMessage);
-                void delay(() => set_voiceOverFallback(""), 1000);
+                delay(() => set_voiceOverFallback(""), 1000);
             }
         }
         else if (hasValidState() &&
@@ -40,7 +40,7 @@ function DBInputFn(props, component) {
             set_descByIds(_validMessageId);
             if (hasVoiceOver()) {
                 set_voiceOverFallback((_d = props.validMessage) !== null && _d !== void 0 ? _d : DEFAULT_VALID_MESSAGE);
-                void delay(() => set_voiceOverFallback(""), 1000);
+                delay(() => set_voiceOverFallback(""), 1000);
             }
         }
         else if (stringPropVisible(props.message, props.showMessage)) {

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

@@ -1,14 +1,5 @@
-import { GlobalProps, GlobalState, InitializedState, NavigationItemGroupVariant, NavigationItemGroupVariantType, OverflowScrollButtonProps, OverflowScrollButtonState } from '../../shared/model';
-export type DBNavigationDefaultProps = {
-    showTreeLine?: boolean | string;
-};
-export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps & OverflowScrollButtonProps & NavigationItemGroupVariant;
-export type DBNavigationDefaultState = {
-    onScroll: () => void;
-    _variant?: NavigationItemGroupVariantType;
-    _shellDesktopPosition?: string | null;
-    _subNavigationDesktopPosition?: string | null;
-    _handleSubNavigation: () => void;
-    _isSubNavigation?: boolean;
-};
-export type DBNavigationState = DBNavigationDefaultState & GlobalState & OverflowScrollButtonState & InitializedState;
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBNavigationDefaultProps = {};
+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>, "variant" | keyof import("../..").GlobalProps | "showTreeLine" | "arrowScrollDistance"> & import("./model").DBNavigationDefaultProps & import("../..").GlobalProps & import("../..").OverflowScrollButtonProps & import("../..").NavigationItemGroupVariant & 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

@@ -2,106 +2,16 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { cls, delay, getBooleanAsString } from "../../utils";
-import { handleSubNavigationPosition } from "../../utils/navigation";
-import DBButton from "../button/button";
+import { DEFAULT_ID } from "../../shared/constants";
+import { cls, uuid } from "../../utils";
 function DBNavigationFn(props, component) {
-    var _a;
     const _ref = component || useRef(component);
-    const menuRef = useRef(null);
-    const [showScrollLeft, setShowScrollLeft] = useState(() => false);
-    const [showScrollRight, setShowScrollRight] = useState(() => false);
-    const [_shellDesktopPosition, set_shellDesktopPosition] = useState(() => undefined);
-    const [_subNavigationDesktopPosition, set_subNavigationDesktopPosition] = useState(() => undefined);
-    const [_variant, set_variant] = useState(() => undefined);
-    const [initialized, setInitialized] = useState(() => false);
-    const [_isSubNavigation, set_isSubNavigation] = useState(() => false);
-    function evaluateScrollButtons(tList) {
-        const needsScroll = tList.scrollWidth > tList.clientWidth;
-        const scrollLeft = Math.ceil(tList.scrollLeft);
-        setShowScrollLeft(needsScroll && scrollLeft > 1);
-        setShowScrollRight(needsScroll && scrollLeft < tList.scrollWidth - tList.clientWidth);
-    }
-    function scroll(left) {
-        var _a;
-        let step = Number(props.arrowScrollDistance) || 100;
-        if (left) {
-            step *= -1;
-        }
-        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({
-            top: 0,
-            left: step,
-            behavior: "smooth",
-        });
-    }
-    function onScroll() {
-        evaluateScrollButtons(menuRef.current);
-        _handleSubNavigation();
-    }
-    function _handleSubNavigation() {
-        handleSubNavigationPosition(menuRef.current, _shellDesktopPosition === "left" ||
-            (_shellDesktopPosition === "top" &&
-                _subNavigationDesktopPosition === "left" &&
-                _isSubNavigation)
-            ? 1
-            : 0);
-    }
+    const [_id, set_id] = useState(() => DEFAULT_ID);
     useEffect(() => {
-        setInitialized(true);
+        set_id(props.id || "navigation-" + uuid());
     }, []);
-    useEffect(() => {
-        if (_ref.current && initialized) {
-            void delay(() => {
-                var _a, _b, _c, _d, _e;
-                const element = _ref.current;
-                if (!element)
-                    return;
-                let endVariant = (_a = props.variant) !== null && _a !== void 0 ? _a : "popover";
-                const parentClassList = ((_b = element.parentElement) === null || _b === void 0 ? void 0 : _b.nodeName.startsWith("DB"))
-                    ? (_d = (_c = element.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.classList
-                    : (_e = element.parentElement) === null || _e === void 0 ? void 0 : _e.classList;
-                const shell = element.closest(".db-shell");
-                const shellDesktopPosition = shell === null || shell === void 0 ? void 0 : shell.getAttribute("data-control-panel-desktop-position");
-                const shellSubNaviDesktopPosition = shell === null || shell === void 0 ? void 0 : shell.getAttribute("data-sub-navigation-desktop-position");
-                set_shellDesktopPosition(shellDesktopPosition);
-                set_subNavigationDesktopPosition(shellSubNaviDesktopPosition);
-                const isSubNavigation = parentClassList === null || parentClassList === void 0 ? void 0 : parentClassList.contains("db-shell-sub-navigation");
-                set_isSubNavigation(isSubNavigation);
-                const requiresPopover = (shellDesktopPosition === "top" &&
-                    (parentClassList === null || parentClassList === void 0 ? void 0 : parentClassList.contains("db-control-panel-desktop-scroll-container"))) ||
-                    ((shellSubNaviDesktopPosition === "top" ||
-                        shellDesktopPosition === "left") &&
-                        isSubNavigation);
-                if (requiresPopover) {
-                    endVariant = "popover";
-                }
-                set_variant(endVariant);
-            }, 1);
-        }
-    }, [_ref.current, props.variant, initialized]);
-    useEffect(() => {
-        var _a;
-        if (menuRef.current && _variant) {
-            if (!_variant || _variant === "popover") {
-                _handleSubNavigation();
-            }
-            else if (_variant === "tree") {
-                for (const menu of Array.from(menuRef.current.querySelectorAll(".db-navigation-item-group-menu"))) {
-                    menu.style.position = "";
-                }
-                for (const navItem of Array.from(menuRef.current.querySelectorAll(".db-navigation-item, .db-navigation-item-group"))) {
-                    // TODO: Add keyboard navigation support
-                    navItem.setAttribute("role", "none");
-                    (_a = navItem.querySelector("a, button")) === null || _a === void 0 ? void 0 : _a.setAttribute("role", "treeitem");
-                }
-            }
-            evaluateScrollButtons(menuRef.current);
-        }
-    }, [menuRef.current, _variant, _shellDesktopPosition]);
-    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: props.id, "data-variant": _variant, "data-show-tree-line": getBooleanAsString((_a = props.showTreeLine) !== null && _a !== void 0 ? _a : "true"), onScroll: (event) => onScroll() }, 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) }),
-        showScrollLeft ? (React.createElement(DBButton, { className: "overflow-scroll-left-button", variant: "filled", icon: "chevron_left", type: "button", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
-        React.createElement("menu", { role: _variant === "tree" ? "tree" : undefined, ref: menuRef, onScroll: (event) => onScroll() }, props.children),
-        showScrollRight ? (React.createElement(DBButton, { className: "overflow-scroll-right-button", variant: "filled", icon: "chevron_right", type: "button", noText: true, onClick: (event) => scroll() }, "Scroll right")) : null));
+    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);
 export default DBNavigation;

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

@@ -1,19 +1,34 @@
-import { AdditionalInformationSlotProps, DisabledProps, GlobalProps, GlobalState, IconProps, ShowIconProps } 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 = {
     /**
      * Alternative indicator for active navigation item (bold font). In contrast to the use of aria-current="page" on the contained anchor, this does not guarantee correct a11y.
      */
     active?: boolean;
     /**
-     * If you use DBShell with controlPanelDesktopPosition="left" you need
-     * to add a tooltip for collapsed navigation
+     * The disabled attribute can be set to [keep a user from clicking on the item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
      */
-    tooltip?: string;
+    disabled?: boolean | string;
     /**
-     * Set the text for the navigation-item
+     * React-specific property to pass in a slot for sub-navigation
      */
-    text?: string;
+    subNavigation?: any;
+    /**
+     * This is for mobile navigation only, if it is set the sub-navigation is a static overlay
+     */
+    subNavigationExpanded?: boolean | string;
+};
+export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & WrapProps & NavigationBackButtonProps & ShowIconProps & TextProps;
+export type DBNavigationItemDefaultState = {
+    handleBackClick: (event: ClickEvent<HTMLButtonElement>) => void;
+    hasAreaPopup: boolean;
+    isSubNavigationExpanded: boolean;
+    subNavigationId: string;
+    /**
+     * Internal state property to show/hide sub-navigation button
+     */
+    hasSubNavigation?: boolean;
+    navigationItemSafeTriangle?: NavigationItemSafeTriangle;
+    autoClose?: boolean;
 };
-export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & IconProps & ShowIconProps & DisabledProps & AdditionalInformationSlotProps;
-export type DBNavigationItemDefaultState = {};
-export type DBNavigationItemState = DBNavigationItemDefaultState & GlobalState;
+export type DBNavigationItemState = DBNavigationItemDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & InitializedState & NavigationBehaviorState;

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>, "disabled" | "icon" | keyof import("../..").GlobalProps | "showIcon" | "additionalInformation" | keyof import("./model").DBNavigationItemDefaultProps> & import("./model").DBNavigationItemDefaultProps & import("../..").GlobalProps & import("../..").IconProps & import("../..").ShowIconProps & import("../..").DisabledProps & import("../..").AdditionalInformationSlotProps & 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;