@db-ux/react-core-components 3.0.2-copilot2-e7bf98b → 3.0.2-shell2-badc28f

package/dist/components/drawer/model.js

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

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

@@ -1,3 +1,6 @@
 import * as React from "react";
-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>>;
+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>>;
 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);
-                delay(() => set_voiceOverFallback(""), 1000);
+                void 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);
-                delay(() => set_voiceOverFallback(""), 1000);
+                void delay(() => set_voiceOverFallback(""), 1000);
             }
         }
         else if (stringPropVisible(props.message, props.showMessage)) {

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

@@ -1,5 +1,14 @@
-import { GlobalProps, GlobalState } from '../../shared/model';
-export type DBNavigationDefaultProps = {};
-export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps;
-export type DBNavigationDefaultState = {};
-export type DBNavigationState = DBNavigationDefaultState & GlobalState;
+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;

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

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

package/dist/components/navigation/navigation.js

@@ -2,16 +2,106 @@
 import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
-import { DEFAULT_ID } from "../../shared/constants";
-import { cls, uuid } from "../../utils";
+import { cls, delay, getBooleanAsString } from "../../utils";
+import { handleSubNavigationPosition } from "../../utils/navigation";
+import DBButton from "../button/button";
 function DBNavigationFn(props, component) {
+    var _a;
     const _ref = component || useRef(component);
-    const [_id, set_id] = useState(() => DEFAULT_ID);
+    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);
+    }
     useEffect(() => {
-        set_id(props.id || "navigation-" + uuid());
+        setInitialized(true);
     }, []);
-    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)));
+    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));
 }
 const DBNavigation = forwardRef(DBNavigationFn);
 export default DBNavigation;

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

@@ -1,34 +1,19 @@
-import { ClickEvent, ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, NavigationBehaviorState, ShowIconProps, TextProps, WidthProps, WrapProps } from '../../shared/model';
-import { NavigationItemSafeTriangle } from '../../utils/navigation';
+import { AdditionalInformationSlotProps, DisabledProps, GlobalProps, GlobalState, IconProps, ShowIconProps } from '../../shared/model';
 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;
     /**
-     * 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).
+     * If you use DBShell with controlPanelDesktopPosition="left" you need
+     * to add a tooltip for collapsed navigation
      */
-    disabled?: boolean | string;
+    tooltip?: string;
     /**
-     * React-specific property to pass in a slot for sub-navigation
+     * Set the text for the navigation-item
      */
-    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;
+    text?: string;
 };
-export type DBNavigationItemState = DBNavigationItemDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & InitializedState & NavigationBehaviorState;
+export type DBNavigationItemProps = DBNavigationItemDefaultProps & GlobalProps & IconProps & ShowIconProps & DisabledProps & AdditionalInformationSlotProps;
+export type DBNavigationItemDefaultState = {};
+export type DBNavigationItemState = DBNavigationItemDefaultState & GlobalState;

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" | "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>>;
+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>>;
 export default DBNavigationItem;

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

@@ -1,76 +1,17 @@
 "use client";
 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, uuid } from "../../utils";
-import { NavigationItemSafeTriangle } from "../../utils/navigation";
-import DBButton from "../button/button";
+import { useRef, forwardRef } from "react";
+import { DEFAULT_LABEL } from "../../shared/constants";
+import { cls, getBooleanAsString } from "../../utils";
+import DBTooltip from "../tooltip/tooltip";
 function DBNavigationItemFn(props, component) {
     var _a;
     const _ref = component || useRef(component);
-    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));
+    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 DBNavigationItem = forwardRef(DBNavigationItemFn);
 export default DBNavigationItem;

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

@@ -0,0 +1 @@
+export { default as DBNavigationItemGroup } from './navigation-item-group';

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

@@ -0,0 +1 @@
+export { default as DBNavigationItemGroup } from './navigation-item-group';

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

@@ -0,0 +1,26 @@
+import { AdditionalInformationSlotProps, ClickEvent, ClickEventProps, ClickEventState, DisabledProps, GlobalProps, GlobalState, IconProps, InitializedState, NavigationBackButtonProps, NavigationBehaviorState, NavigationItemGroupVariant, ShowIconProps } from '../../shared/model';
+import { NavigationItemSafeTriangle } from '../../utils/navigation';
+import { DBNavigationItemDefaultProps } from '../navigation-item/model';
+export type DBNavigationItemGroupDefaultProps = {
+    /**
+     * This is for mobile navigation only, if it is set the sub-navigation is a static overlay
+     */
+    expanded?: boolean | string;
+};
+export type DBNavigationItemGroupProps = DBNavigationItemGroupDefaultProps & NavigationBackButtonProps & ClickEventProps<HTMLButtonElement> & GlobalProps & IconProps & ShowIconProps & DBNavigationItemDefaultProps & DisabledProps & NavigationItemGroupVariant & AdditionalInformationSlotProps;
+export type DBNavigationItemGroupDefaultState = {
+    handleBackClick: (event: ClickEvent<HTMLButtonElement>) => void;
+    isSubNavigationExpanded: boolean;
+    subNavigationId: string;
+    /**
+     * Internal state property to show/hide sub-navigation button
+     */
+    hasSubNavigation?: boolean;
+    hasPopup?: boolean;
+    navigationItemSafeTriangle?: NavigationItemSafeTriangle;
+    autoClose?: boolean;
+    onScroll: () => void;
+    handleEscape: (event: any) => void;
+    forceClose: () => void;
+};
+export type DBNavigationItemGroupState = DBNavigationItemGroupDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & NavigationBehaviorState & InitializedState;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const DBNavigationItemGroup: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "variant" | "expanded" | "disabled" | "icon" | "onClick" | keyof import("../../shared/model").GlobalProps | "showIcon" | "additionalInformation" | keyof import("../..").DBNavigationItemDefaultProps | keyof import("../../shared/model").NavigationBackButtonProps> & import("./model").DBNavigationItemGroupDefaultProps & import("../../shared/model").NavigationBackButtonProps & import("../../shared/model").ClickEventProps<HTMLButtonElement> & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").ShowIconProps & import("../..").DBNavigationItemDefaultProps & import("../../shared/model").DisabledProps & import("../../shared/model").NavigationItemGroupVariant & import("../../shared/model").AdditionalInformationSlotProps & React.RefAttributes<any>>;
+export default DBNavigationItemGroup;

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

@@ -0,0 +1,100 @@
+"use client";
+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 { handleSubNavigationPosition, NavigationItemSafeTriangle, } from "../../utils/navigation";
+import DBButton from "../button/button";
+function DBNavigationItemGroupFn(props, component) {
+    var _a;
+    const _ref = component || useRef(undefined);
+    const _menuRef = useRef(undefined);
+    const _buttonRef = useRef(undefined);
+    const [hasSubNavigation, setHasSubNavigation] = useState(() => true);
+    const [isSubNavigationExpanded, setIsSubNavigationExpanded] = useState(() => false);
+    const [autoClose, setAutoClose] = useState(() => false);
+    const [hasPopup, setHasPopup] = useState(() => false);
+    const [initialized, setInitialized] = useState(() => false);
+    const [subNavigationId, setSubNavigationId] = useState(() => "db-navigation-item-group-menu-" + uuid());
+    const [navigationItemSafeTriangle, setNavigationItemSafeTriangle] = useState(() => undefined);
+    function onScroll() {
+        if (hasPopup) {
+            handleSubNavigationPosition(_ref.current);
+        }
+    }
+    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") {
+            forceClose();
+        }
+    }
+    function forceClose() {
+        setAutoClose(true);
+        void delay(() => {
+            setAutoClose(false);
+        }, 300);
+    }
+    function handleClick(event) {
+        if (props.onClick) {
+            event.stopPropagation();
+            props.onClick(event);
+        }
+        setIsSubNavigationExpanded(!isSubNavigationExpanded);
+    }
+    function handleBackClick(event) {
+        event.stopPropagation();
+        setIsSubNavigationExpanded(false);
+    }
+    function handleEscape(event) {
+        if (!event || event.key === "Escape") {
+            forceClose();
+            _buttonRef.current.blur();
+        }
+    }
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (props.expanded !== undefined) {
+            setIsSubNavigationExpanded(!!getBoolean(props.expanded, "subNavigationExpanded"));
+        }
+    }, [props.expanded]);
+    useEffect(() => {
+        if (_ref.current && initialized) {
+            setInitialized(false);
+            // We delay this because the navigation variant check is delayed as well
+            void delay(() => {
+                const element = _ref.current;
+                const nav = element.closest(".db-navigation");
+                setHasPopup(!nav ||
+                    !nav.dataset["variant"] ||
+                    nav.dataset["variant"] === "popover");
+            }, 200);
+        }
+    }, [_ref.current, initialized]);
+    useEffect(() => {
+        if (_ref.current &&
+            _buttonRef.current &&
+            _menuRef.current &&
+            hasPopup &&
+            !navigationItemSafeTriangle) {
+            void delay(() => {
+                setNavigationItemSafeTriangle(new NavigationItemSafeTriangle(_ref.current, _menuRef.current));
+            }, 1);
+            ["mouseenter", "focusin"].forEach((event) => {
+                _ref.current.addEventListener(event, () => handleSubNavigationPosition(_menuRef.current));
+            });
+        }
+    }, [_ref.current, _menuRef.current, _buttonRef.current, hasPopup]);
+    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), onKeyDown: (event) => handleEscape(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-group", props.className), "data-icon": props.icon, "data-hide-icon": getHideProp(props.showIcon), "data-active": props.active, "aria-disabled": getBooleanAsString(props.disabled) }),
+        React.createElement("button", { type: "button", className: "db-navigation-item-group-expand-button", ref: _buttonRef, "aria-haspopup": getBooleanAsString(hasPopup ? true : undefined), "aria-owns": hasPopup ? undefined : subNavigationId, "aria-expanded": getBooleanAsString(isSubNavigationExpanded), disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event) },
+            props.text,
+            React.createElement(React.Fragment, null, props.additionalInformation)),
+        React.createElement("menu", { className: "db-navigation-item-group-menu", role: "group", ref: _menuRef, "data-force-close": getBooleanAsString(autoClose), id: subNavigationId, onScroll: (event) => onScroll(), onClick: (event) => handleNavigationItemClick(event) },
+            React.createElement("div", { className: "db-navigation-item-group-back-button" },
+                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)),
+            props.children)));
+}
+const DBNavigationItemGroup = forwardRef(DBNavigationItemGroupFn);
+export default DBNavigationItemGroup;

package/dist/components/popover/popover.js

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

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

@@ -1,3 +1,6 @@
 import * as React from "react";
-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>>;
+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>>;
 export default DBRadio;

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

@@ -1,3 +1,6 @@
 import * as React from "react";
-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>>;
+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>>;
 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);
-                delay(() => set_voiceOverFallback(""), 1000);
+                void 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);
-                delay(() => set_voiceOverFallback(""), 1000);
+                void delay(() => set_voiceOverFallback(""), 1000);
             }
         }
         else if (stringPropVisible(props.message, props.showMessage)) {

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

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

package/dist/components/shell/index.js

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

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

@@ -0,0 +1,50 @@
+import { GlobalProps, GlobalState, ShellControlPanelDesktopPositionType, ShellControlPanelMobilePositionType } from '../../shared/model';
+export declare const ShellSubNavigationMobilePosition: readonly ["top", "bottom"];
+export type ShellSubNavigationMobilePositionType = (typeof ShellSubNavigationMobilePosition)[number];
+export type DBShellDefaultProps = {
+    /**
+     * The slot can be used for React to set a desktopControlPanel.
+     */
+    controlPanelDesktop?: any;
+    /**
+     * Change the position of the desktop content panel
+     */
+    controlPanelDesktopPosition?: ShellControlPanelDesktopPositionType;
+    /**
+     * The slot can be used for React to set a mobileControlPanel.
+     */
+    controlPanelMobile?: any;
+    /**
+     * Change the position of the mobile content panel
+     */
+    controlPanelMobilePosition?: ShellControlPanelMobilePositionType;
+    /**
+     * Set this to have a transition with opacity to avoid layout-shifts https://simonhearne.com/2021/layout-shifts-webfonts/
+     */
+    fadeIn?: boolean | string;
+    /**
+     * Adds `class` to `<main>` element
+     */
+    mainClass?: string;
+    /**
+     * The slot can be used for React to set a subNavigation.
+     */
+    subNavigation?: any;
+    /**
+     * Change the position of the optional sub navigation for desktop
+     */
+    subNavigationDesktopPosition?: ShellControlPanelDesktopPositionType;
+    /**
+     * Change the position of the optional sub navigation for mobile
+     */
+    subNavigationMobilePosition?: ShellSubNavigationMobilePositionType;
+    /**
+     * Shows sub-navigation
+     */
+    showSubNavigation?: boolean | string;
+};
+export type DBShellProps = DBShellDefaultProps & GlobalProps;
+export type DBShellDefaultState = {
+    fontsLoaded?: boolean;
+};
+export type DBShellState = DBShellDefaultState & GlobalState;

package/dist/components/shell/model.js

@@ -0,0 +1 @@
+export const ShellSubNavigationMobilePosition = ['top', 'bottom'];

package/dist/components/shell/shell.d.ts

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