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

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

@@ -1,17 +1,76 @@
 "use client";
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
-import { useRef, forwardRef } from "react";
-import { DEFAULT_LABEL } from "../../shared/constants";
-import { cls, getBooleanAsString } from "../../utils";
-import DBTooltip from "../tooltip/tooltip";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_BACK } from "../../shared/constants";
+import { cls, delay, getBoolean, getBooleanAsString, uuid } from "../../utils";
+import { NavigationItemSafeTriangle } from "../../utils/navigation";
+import DBButton from "../button/button";
 function DBNavigationItemFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
-    return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: 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-navigation-item", props.className), "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-active": getBooleanAsString(props.active), "aria-disabled": getBooleanAsString(props.disabled) }),
-        props.children,
-        React.createElement(React.Fragment, null, props.additionalInformation),
-        React.createElement(DBTooltip, { placement: "right", delay: "slow" }, (_a = props.tooltip) !== null && _a !== void 0 ? _a : DEFAULT_LABEL)));
+    const [initialized, setInitialized] = useState(() => false);
+    const [hasAreaPopup, setHasAreaPopup] = useState(() => false);
+    const [hasSubNavigation, setHasSubNavigation] = useState(() => true);
+    const [isSubNavigationExpanded, setIsSubNavigationExpanded] = useState(() => false);
+    const [autoClose, setAutoClose] = useState(() => false);
+    const [subNavigationId, setSubNavigationId] = useState(() => "sub-navigation-" + uuid());
+    const [navigationItemSafeTriangle, setNavigationItemSafeTriangle] = useState(() => undefined);
+    function handleNavigationItemClick(event) {
+        var _a;
+        if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "A") {
+            setAutoClose(true);
+            void delay(() => {
+                setAutoClose(false);
+            }, 1000);
+        }
+    }
+    function handleClick(event) {
+        if (props.onClick) {
+            event.stopPropagation();
+            props.onClick(event);
+        }
+        if (hasAreaPopup) {
+            setIsSubNavigationExpanded(true);
+        }
+    }
+    function handleBackClick(event) {
+        event.stopPropagation();
+        setIsSubNavigationExpanded(false);
+    }
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (props.subNavigationExpanded !== undefined) {
+            setIsSubNavigationExpanded(!!getBoolean(props.subNavigationExpanded, "subNavigationExpanded"));
+        }
+    }, [props.subNavigationExpanded]);
+    useEffect(() => {
+        var _a;
+        if (initialized && _ref.current) {
+            const subNavigationSlot = _ref.current.querySelector("menu");
+            if (subNavigationSlot) {
+                if (((_a = subNavigationSlot.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    setHasAreaPopup(true);
+                    if (!navigationItemSafeTriangle) {
+                        setNavigationItemSafeTriangle(new NavigationItemSafeTriangle(_ref.current, subNavigationSlot));
+                    }
+                }
+                else {
+                    setHasSubNavigation(false);
+                }
+            }
+        }
+    }, [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-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)),
+            React.createElement("menu", { className: "db-sub-navigation", "data-force-close": autoClose, id: subNavigationId, onClick: (event) => handleNavigationItemClick(event) },
+                hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
+                    React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_a = props.backButtonText) !== null && _a !== void 0 ? _a : DEFAULT_BACK))) : null,
+                React.createElement(React.Fragment, null, props.subNavigation)))) : null));
 }
 const DBNavigationItem = forwardRef(DBNavigationItemFn);
 export default DBNavigationItem;

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

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

package/dist/components/page/index.js

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

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

@@ -0,0 +1,36 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export declare const PageVariantList: readonly ["auto", "fixed"];
+export type PageVariantType = (typeof PageVariantList)[number];
+export declare const PageDocumentOverflowList: readonly ["hidden", "auto"];
+export type PageDocumentOverflowType = (typeof PageDocumentOverflowList)[number];
+export type DBPageDefaultProps = {
+    /**
+     * The documentOverflow sets the overflow:hidden/auto to the root document
+     */
+    documentOverflow?: PageDocumentOverflowType;
+    /**
+     * Set this to have a transition with opacity to avoid layout-shifts https://simonhearne.com/2021/layout-shifts-webfonts/
+     */
+    fadeIn?: boolean | string;
+    /**
+     * The slot can be used for React to set a footer.
+     */
+    footer?: any;
+    /**
+     * The slot can be used for React to set a header.
+     */
+    header?: any;
+    /**
+     * Adds `class` to `<main>` element
+     */
+    mainClass?: string;
+    /**
+     * The variant=fixed uses flex-box to make header and footer static
+     */
+    variant?: PageVariantType;
+};
+export type DBPageProps = DBPageDefaultProps & GlobalProps;
+export type DBPageDefaultState = {
+    fontsLoaded?: boolean;
+};
+export type DBPageState = DBPageDefaultState & GlobalState;

package/dist/components/page/model.js

@@ -0,0 +1,2 @@
+export const PageVariantList = ['auto', 'fixed'];
+export const PageDocumentOverflowList = ['hidden', 'auto'];

package/dist/components/page/page.d.ts

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

package/dist/components/{shell/shell.js → page/page.js}

@@ -3,10 +3,21 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, getBooleanAsString } from "../../utils";
-function DBShellFn(props, component) {
-    var _a, _b, _c, _d;
+function DBPageFn(props, component) {
     const _ref = component || useRef(component);
     const [fontsLoaded, setFontsLoaded] = useState(() => false);
+    const hasInitialized = useRef(false);
+    if (!hasInitialized.current) {
+        if (typeof window !== "undefined" &&
+            document &&
+            (props.documentOverflow === "hidden" ||
+                (props.variant === "fixed" && props.documentOverflow !== "auto"))) {
+            // We need to set this to `html` element that the flex-box solution works
+            // See https://stackoverflow.com/a/43710216 - Approach 1 - flexbox
+            document.documentElement.classList.add("db-page-document");
+        }
+        hasInitialized.current = true;
+    }
     useEffect(() => {
         setFontsLoaded(!props.fadeIn);
         if (document && props.fadeIn) {
@@ -18,11 +29,19 @@ function DBShellFn(props, component) {
             setFontsLoaded(true);
         }
     }, []);
-    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-shell", props.className), "data-control-panel-desktop-position": (_a = props.controlPanelDesktopPosition) !== null && _a !== void 0 ? _a : "top", "data-control-panel-mobile-position": (_b = props.controlPanelMobilePosition) !== null && _b !== void 0 ? _b : "top", "data-sub-navigation-desktop-position": (_c = props.subNavigationDesktopPosition) !== null && _c !== void 0 ? _c : "top", "data-sub-navigation-mobile-position": (_d = props.subNavigationMobilePosition) !== null && _d !== void 0 ? _d : "top", "data-show-sub-navigation": getBooleanAsString(props.showSubNavigation), "data-fade-in": getBooleanAsString(props.fadeIn), "data-fonts-loaded": getBooleanAsString(fontsLoaded) }),
-        React.createElement(React.Fragment, null, props.controlPanelDesktop),
-        React.createElement(React.Fragment, null, props.controlPanelMobile),
-        React.createElement(React.Fragment, null, props.subNavigation),
-        React.createElement("main", { className: cls("db-main", props.mainClass) }, props.children)));
+    useEffect(() => {
+        return () => {
+            if (typeof window !== "undefined" &&
+                document.documentElement.classList.contains("db-page-document")) {
+                // remove document styles set by this
+                document.documentElement.classList.remove("db-page-document");
+            }
+        };
+    }, []);
+    return (React.createElement("div", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { id: props.id }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font"]), { className: cls("db-page", props.className), "data-variant": props.variant, "data-fade-in": getBooleanAsString(props.fadeIn), "data-fonts-loaded": getBooleanAsString(fontsLoaded) }),
+        React.createElement(React.Fragment, null, props.header),
+        React.createElement("main", { className: cls("db-main", props.mainClass) }, props.children),
+        React.createElement(React.Fragment, null, props.footer)));
 }
-const DBShell = forwardRef(DBShellFn);
-export default DBShell;
+const DBPage = forwardRef(DBPageFn);
+export default DBPage;

package/dist/components/popover/popover.js

@@ -27,7 +27,8 @@ function DBPopoverFn(props, component) {
         if (article) {
             // This is a workaround for angular
             utilsDelay(() => {
-                handleFixedPopover(article, _ref.current);
+                var _a;
+                handleFixedPopover(article, _ref.current, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
             }, 1);
         }
     }

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

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

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

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

package/dist/components/select/select.js

@@ -32,7 +32,7 @@ function DBSelectFn(props, component) {
                 DEFAULT_INVALID_MESSAGE);
             if (hasVoiceOver()) {
                 set_voiceOverFallback(_invalidMessage);
-                void delay(() => set_voiceOverFallback(""), 1000);
+                delay(() => set_voiceOverFallback(""), 1000);
             }
         }
         else if (hasValidState() &&
@@ -41,7 +41,7 @@ function DBSelectFn(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/switch/switch.d.ts

@@ -1,6 +1,3 @@
 import * as React from "react";
-declare const DBSwitch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<any>, "name" | "value" | "label" | "disabled" | "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").RequiredProps | "showLabel" | "visualAid"> & import("./model").DBSwitchDefaultProps & 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").EmphasisProps & import("../../shared/model").SizeProps & import("../../shared/model").IconProps & import("../../shared/model").IconTrailingProps & import("../../shared/model").IconLeadingProps & 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/tabs/model.d.ts

@@ -1,4 +1,4 @@
-import { AlignmentProps, GlobalProps, GlobalState, InitializedState, InputEvent, OrientationProps, OverflowScrollButtonProps, OverflowScrollButtonState, WidthProps } from '../../shared/model';
+import { AlignmentProps, GlobalProps, GlobalState, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model';
 import { DBTabItemProps } from '../tab-item/model';
 import { DBTabPanelProps } from '../tab-panel/model';
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
@@ -7,6 +7,10 @@ export declare const TabsInitialSelectedModeList: readonly ["auto", "manually"];
 export type TabsInitialSelectedModeType = (typeof TabsInitialSelectedModeList)[number];
 export type DBSimpleTabProps = DBTabItemProps & DBTabPanelProps;
 export type DBTabsDefaultProps = {
+    /**
+     * Change amount of distance if you click on an arrow, only available with behavior="arrows"
+     */
+    arrowScrollDistance?: number | string;
     /**
      * Show a scrollbar or buttons with arrows to navigate for horizontal tabs with overflow visible
      */
@@ -46,13 +50,17 @@ export type DBTabsEventProps = {
      */
     tabSelect?: (event?: InputEvent<HTMLElement>) => void;
 };
-export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps & OverflowScrollButtonProps & AlignmentProps & DBTabsEventProps;
+export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps & DBTabsEventProps;
 export type DBTabsDefaultState = {
     _name: string;
     scrollContainer?: Element | null;
+    scroll: (left?: boolean) => void;
+    showScrollLeft?: boolean;
+    showScrollRight?: boolean;
+    evaluateScrollButtons: (tabList: Element) => void;
     convertTabs: () => DBSimpleTabProps[];
     initTabList: () => void;
     initTabs: (init?: boolean) => void;
     handleChange: (event: InputEvent<HTMLElement>) => void;
 };
-export type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState & OverflowScrollButtonState;
+export type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState;

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

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

package/dist/components/tabs/tabs.js

@@ -64,7 +64,7 @@ function DBTabsFn(props, component) {
     }
     function initTabs(init) {
         if (_ref.current) {
-            const tabItems = Array.from(_ref.current.querySelectorAll(":is(:scope > db-tab-list .db-tab-item, :scope > .db-tab-list .db-tab-item)"));
+            const tabItems = Array.from(_ref.current.getElementsByClassName("db-tab-item"));
             const tabPanels = Array.from(_ref.current.querySelectorAll(":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"));
             for (const tabItem of tabItems) {
                 const index = tabItems.indexOf(tabItem);
@@ -154,11 +154,11 @@ function DBTabsFn(props, component) {
         }
     }, [_ref.current, initialized]);
     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), onChange: (event) => handleChange(event) }),
-        showScrollLeft ? (React.createElement(DBButton, { className: "overflow-scroll-left-button", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
+        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, 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: "overflow-scroll-right-button", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: (event) => scroll() }, "Scroll right")) : 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));
 }
 const DBTabs = forwardRef(DBTabsFn);

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

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

package/dist/components/textarea/textarea.js

@@ -30,7 +30,7 @@ function DBTextareaFn(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 DBTextareaFn(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/tooltip/tooltip.js

@@ -36,8 +36,9 @@ function DBTooltipFn(props, component) {
             return;
         if (_ref.current) {
             // This is a workaround for angular
-            void utilsDelay(() => {
-                handleFixedPopover(_ref.current, parent);
+            utilsDelay(() => {
+                var _a;
+                handleFixedPopover(_ref.current, parent, (_a = props.placement) !== null && _a !== void 0 ? _a : "bottom");
             }, 1);
         }
     }

package/dist/index.d.ts

@@ -4,24 +4,14 @@ 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/control-panel-brand';
-export * from './components/control-panel-brand/model';
-export * from './components/control-panel-desktop';
-export * from './components/control-panel-desktop/model';
-export * from './components/control-panel-meta-navigation';
-export * from './components/control-panel-meta-navigation/model';
-export * from './components/control-panel-mobile';
-export * from './components/control-panel-mobile/model';
-export * from './components/control-panel-primary-actions';
-export * from './components/control-panel-primary-actions/model';
-export * from './components/control-panel-secondary-actions';
-export * from './components/control-panel-secondary-actions/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
 export * from './components/custom-select-dropdown/model';
@@ -36,6 +26,8 @@ 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';
@@ -46,12 +38,12 @@ export * from './components/link';
 export * from './components/link/model';
 export * from './components/navigation';
 export * from './components/navigation-item';
-export * from './components/navigation-item-group';
-export * from './components/navigation-item-group/model';
 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';
@@ -60,8 +52,6 @@ export * from './components/section';
 export * from './components/section/model';
 export * from './components/select';
 export * from './components/select/model';
-export * from './components/shell';
-export * from './components/shell/model';
 export * from './components/stack';
 export * from './components/stack/model';
 export * from './components/switch';
@@ -87,6 +77,3 @@ export * from './utils/document-scroll-listener';
 export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';
-export * from './components/shell-sub-navigation';
-export * from "./components/control-panel-flat-icon-navigation";
-export * from "./components/control-panel-flat-icon-navigation/model";

package/dist/index.js

@@ -4,24 +4,14 @@ 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/control-panel-brand';
-export * from './components/control-panel-brand/model';
-export * from './components/control-panel-desktop';
-export * from './components/control-panel-desktop/model';
-export * from './components/control-panel-meta-navigation';
-export * from './components/control-panel-meta-navigation/model';
-export * from './components/control-panel-mobile';
-export * from './components/control-panel-mobile/model';
-export * from './components/control-panel-primary-actions';
-export * from './components/control-panel-primary-actions/model';
-export * from './components/control-panel-secondary-actions';
-export * from './components/control-panel-secondary-actions/model';
 export * from './components/custom-select';
 export * from './components/custom-select-dropdown';
 export * from './components/custom-select-dropdown/model';
@@ -36,6 +26,8 @@ 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';
@@ -46,12 +38,12 @@ export * from './components/link';
 export * from './components/link/model';
 export * from './components/navigation';
 export * from './components/navigation-item';
-export * from './components/navigation-item-group';
-export * from './components/navigation-item-group/model';
 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';
@@ -60,8 +52,6 @@ export * from './components/section';
 export * from './components/section/model';
 export * from './components/select';
 export * from './components/select/model';
-export * from './components/shell';
-export * from './components/shell/model';
 export * from './components/stack';
 export * from './components/stack/model';
 export * from './components/switch';
@@ -87,6 +77,3 @@ export * from './utils/document-scroll-listener';
 export * from './utils/floating-components';
 export * from './utils/index';
 export * from './utils/navigation';
-export * from './components/shell-sub-navigation';
-export * from "./components/control-panel-flat-icon-navigation";
-export * from "./components/control-panel-flat-icon-navigation/model";

package/dist/shared/constants.d.ts

@@ -14,8 +14,6 @@ export declare const DEFAULT_INVALID_MESSAGE: string;
 export declare const DEFAULT_REMOVE: string;
 export declare const DEFAULT_BACK: string;
 export declare const DEFAULT_SELECTED: string;
-export declare const DEFAULT_EXPAND: string;
-export declare const DEFAULT_COLLAPSE: string;
 export declare const DEFAULT_BURGER_MENU: string;
 export declare const DEFAULT_ICON: string;
 export declare const DEFAULT_ROWS: number;
@@ -66,7 +64,6 @@ export declare enum COLOR {
 export declare const COLORS: COLOR[];
 export declare const COLORS_SIMPLE: COLOR_SIMPLE[];
 export declare enum SEMANTIC {
-    'NEUTRAL' = "neutral",
     'CRITICAL' = "critical",
     'INFORMATIONAL' = "informational",
     'WARNING' = "warning",

package/dist/shared/constants.js

@@ -14,8 +14,6 @@ export const DEFAULT_INVALID_MESSAGE = 'TODO: Add an invalidMessage';
 export const DEFAULT_REMOVE = 'Remove';
 export const DEFAULT_BACK = 'Back';
 export const DEFAULT_SELECTED = 'Selected';
-export const DEFAULT_EXPAND = 'Expand';
-export const DEFAULT_COLLAPSE = 'Collapse';
 export const DEFAULT_BURGER_MENU = 'BurgerMenu';
 export const DEFAULT_ICON = 'brand';
 export const DEFAULT_ROWS = 4;
@@ -70,7 +68,6 @@ export const COLORS = Object.entries(COLOR).map(([, value]) => value);
 export const COLORS_SIMPLE = Object.entries(COLOR_SIMPLE).map(([, value]) => value);
 export var SEMANTIC;
 (function (SEMANTIC) {
-    SEMANTIC["NEUTRAL"] = "neutral";
     SEMANTIC["CRITICAL"] = "critical";
     SEMANTIC["INFORMATIONAL"] = "informational";
     SEMANTIC["WARNING"] = "warning";