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

package/README.md

@@ -59,17 +59,6 @@ import { DBButton } from '@db-ux/react-core-components';
 ...
 ```
 
-## Documentation for AI Agents
-
-We provide a documentation for every component in the DB UX Design System via `docs` folder.
-To consume those documentation for AI Agents the best way is to copy the `docs` folder into your project.
-
-We provide a CLI tool to do this automatically, which you can run with:
-
-```shell
-npx @db-ux/agent-cli
-```
-
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even if being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.

package/dist/components/button/button.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<any>, "width" | "text" | "size" | "icon" | "onClick" | keyof import("../..").GlobalProps | "showIcon" | keyof import("./model").DBButtonDefaultProps | "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 | 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>>;
 export default DBButton;

package/dist/components/checkbox/checkbox.d.ts

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

package/dist/components/control-panel-brand/control-panel-brand.d.ts

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

package/dist/components/control-panel-brand/control-panel-brand.js

@@ -0,0 +1,15 @@
+"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 DBControlPanelBrandFn(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": (_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-control-panel-brand", props.className) }),
+        props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children),
+        React.createElement(React.Fragment, null, props.additionalInformation)));
+}
+const DBControlPanelBrand = forwardRef(DBControlPanelBrandFn);
+export default DBControlPanelBrand;

package/dist/components/control-panel-brand/index.d.ts

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

package/dist/components/control-panel-brand/index.js

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

package/dist/components/control-panel-brand/model.d.ts

@@ -0,0 +1,5 @@
+import { AdditionalInformationSlotProps, GlobalProps, GlobalState, IconProps, ShowIconProps, TextProps } from '../../shared/model';
+export type DBControlPanelBrandDefaultProps = {};
+export type DBControlPanelBrandProps = DBControlPanelBrandDefaultProps & GlobalProps & IconProps & ShowIconProps & TextProps & AdditionalInformationSlotProps;
+export type DBControlPanelBrandDefaultState = {};
+export type DBControlPanelBrandState = DBControlPanelBrandDefaultState & GlobalState;

package/dist/components/control-panel-desktop/control-panel-desktop.d.ts

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

package/dist/components/control-panel-desktop/control-panel-desktop.js

@@ -0,0 +1,62 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useState, useRef, forwardRef } from "react";
+import { DEFAULT_COLLAPSE, DEFAULT_EXPAND } from "../../shared/constants";
+import { cls, getBoolean, getBooleanAsString, uuid } from "../../utils";
+import { handleSubNavigationPosition } from "../../utils/navigation";
+import DBButton from "../button/button";
+import DBTooltip from "../tooltip/tooltip";
+function DBControlPanelDesktopFn(props, component) {
+    var _a, _b, _c;
+    const _ref = component || useRef(component);
+    const _scrollContainerRef = useRef(null);
+    const [_id, set_id] = useState(() => `db-control-panel-desktop-${uuid()}`);
+    const [_open, set_open] = useState(() => true);
+    function handleToggle(event) {
+        if (typeof event.detail !== "object") {
+            event.stopPropagation();
+            set_open(!_open);
+        }
+    }
+    function getToggleButtonText() {
+        if (props.onExpandButtonTooltipFn) {
+            const open = _open;
+            return props.onExpandButtonTooltipFn(open);
+        }
+        if (props.expandButtonTooltip) {
+            return props.expandButtonTooltip;
+        }
+        return _open ? DEFAULT_COLLAPSE : DEFAULT_EXPAND;
+    }
+    function onScroll() {
+        if (!_scrollContainerRef.current)
+            return;
+        const popoverNavigation = _scrollContainerRef.current.querySelector('.db-navigation[data-variant="popover"]');
+        if (!popoverNavigation)
+            return;
+        const navigationMenu = popoverNavigation.querySelector("menu");
+        if (navigationMenu) {
+            handleSubNavigationPosition(navigationMenu);
+        }
+    }
+    const hasInitialized = useRef(false);
+    if (!hasInitialized.current) {
+        if (props.expanded !== undefined) {
+            set_open((_a = getBoolean(props.expanded, "expanded")) !== null && _a !== void 0 ? _a : true);
+        }
+        hasInitialized.current = true;
+    }
+    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-control-panel-desktop", props.className), id: (_b = props.id) !== null && _b !== void 0 ? _b : _id, "data-width": props.width, "data-orientation": props.orientation, "data-open": getBooleanAsString(_open) }),
+        React.createElement(React.Fragment, null, props.brand),
+        React.createElement("div", { className: "db-control-panel-desktop-scroll-container", ref: _scrollContainerRef, onScroll: (event) => onScroll() },
+            props.children,
+            React.createElement(React.Fragment, null, props.metaNavigation)),
+        React.createElement(React.Fragment, null, props.primaryActions),
+        React.createElement(React.Fragment, null, props.secondaryActions),
+        React.createElement("div", { className: "db-control-panel-desktop-button" },
+            React.createElement(DBButton, { variant: "ghost", type: "button", icon: "double_chevron_left", onClick: (event) => handleToggle(event), "aria-controls": (_c = props.id) !== null && _c !== void 0 ? _c : _id, "aria-expanded": _open, noText: true },
+                React.createElement(DBTooltip, { variant: "label", placement: "right" }, getToggleButtonText())))));
+}
+const DBControlPanelDesktop = forwardRef(DBControlPanelDesktopFn);
+export default DBControlPanelDesktop;

package/dist/components/control-panel-desktop/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelDesktop } from './control-panel-desktop';

package/dist/components/control-panel-desktop/index.js

@@ -0,0 +1 @@
+export { default as DBControlPanelDesktop } from './control-panel-desktop';

package/dist/components/control-panel-desktop/model.d.ts

@@ -0,0 +1,7 @@
+import { ContainerWidthProps, ControlPanelProps, GlobalProps, GlobalState, OrientationProps, SidebarProps, SidebarState, ToggleEventState } from '../../shared/model';
+export type DBControlPanelDesktopDefaultProps = {};
+export type DBControlPanelDesktopProps = DBControlPanelDesktopDefaultProps & GlobalProps & ContainerWidthProps & ControlPanelProps & OrientationProps & SidebarProps;
+export type DBControlPanelDesktopDefaultState = {
+    onScroll: () => void;
+};
+export type DBControlPanelDesktopState = DBControlPanelDesktopDefaultState & GlobalState & ToggleEventState<HTMLButtonElement> & SidebarState;

package/dist/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.d.ts

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

package/dist/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.js

@@ -0,0 +1,26 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { cls, getBooleanAsString } from "../../utils";
+function DBControlPanelFlatIconNavigationFn(props, component) {
+    const _ref = component || useRef(undefined);
+    const [initialized, setInitialized] = useState(() => false);
+    useEffect(() => {
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (_ref.current && initialized) {
+            const tooltips = _ref.current.querySelectorAll(".db-tooltip");
+            if ((tooltips === null || tooltips === void 0 ? void 0 : tooltips.length) > 0) {
+                const array = Array.from(tooltips);
+                for (const tooltip of array) {
+                    tooltip.dataset["placement"] = "top";
+                }
+            }
+        }
+    }, [_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"]), { id: props.id, "data-no-text": getBooleanAsString(props.noText) }, 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-control-panel-flat-icon-navigation", props.className) }), props.children));
+}
+const DBControlPanelFlatIconNavigation = forwardRef(DBControlPanelFlatIconNavigationFn);
+export default DBControlPanelFlatIconNavigation;

package/dist/components/control-panel-flat-icon-navigation/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelFlatIconNavigation } from "./control-panel-flat-icon-navigation";

package/dist/components/control-panel-flat-icon-navigation/index.js

@@ -0,0 +1 @@
+export { default as DBControlPanelFlatIconNavigation } from "./control-panel-flat-icon-navigation";

package/dist/components/control-panel-flat-icon-navigation/model.d.ts

@@ -0,0 +1,7 @@
+import { GlobalProps, GlobalState, InitializedState } from '../../shared/model';
+export type DBControlPanelFlatIconNavigationDefaultProps = {
+    noText?: string | boolean;
+};
+export type DBControlPanelFlatIconNavigationProps = DBControlPanelFlatIconNavigationDefaultProps & GlobalProps;
+export type DBControlPanelFlatIconNavigationDefaultState = {};
+export type DBControlPanelFlatIconNavigationState = DBControlPanelFlatIconNavigationDefaultState & GlobalState & InitializedState;

package/dist/components/control-panel-flat-icon-navigation/model.js

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

package/dist/components/control-panel-meta-navigation/control-panel-meta-navigation.d.ts

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

package/dist/components/control-panel-meta-navigation/control-panel-meta-navigation.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils";
+function DBControlPanelMetaNavigationFn(props, component) {
+    const _ref = component || useRef(undefined);
+    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-control-panel-meta-navigation", props.className) }), props.children));
+}
+const DBControlPanelMetaNavigation = forwardRef(DBControlPanelMetaNavigationFn);
+export default DBControlPanelMetaNavigation;

package/dist/components/control-panel-meta-navigation/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelMetaNavigation } from './control-panel-meta-navigation';

package/dist/components/control-panel-meta-navigation/index.js

@@ -0,0 +1 @@
+export { default as DBControlPanelMetaNavigation } from './control-panel-meta-navigation';

package/dist/components/control-panel-meta-navigation/model.d.ts

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBControlPanelMetaNavigationDefaultProps = {};
+export type DBControlPanelMetaNavigationProps = DBControlPanelMetaNavigationDefaultProps & GlobalProps;
+export type DBControlPanelMetaNavigationDefaultState = {};
+export type DBControlPanelMetaNavigationState = DBControlPanelMetaNavigationDefaultState & GlobalState;

package/dist/components/control-panel-meta-navigation/model.js

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

package/dist/components/control-panel-mobile/control-panel-mobile.d.ts

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

package/dist/components/control-panel-mobile/control-panel-mobile.js

@@ -0,0 +1,41 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useState, useRef, forwardRef } from "react";
+import { DEFAULT_BURGER_MENU } from "../../shared/constants";
+import { cls } from "../../utils";
+import { isEventTargetNavigationItem } from "../../utils/navigation";
+import DBButton from "../button/button";
+import DBDrawer from "../drawer/drawer";
+function DBControlPanelMobileFn(props, component) {
+    var _a;
+    const _ref = component || useRef(undefined);
+    const [open, setOpen] = useState(() => false);
+    function handleToggle(event) {
+        if (event.stopPropagation) {
+            event.stopPropagation();
+        }
+        const reverseOpen = !open;
+        setOpen(reverseOpen);
+        if (props.onToggle) {
+            props.onToggle(reverseOpen);
+        }
+    }
+    function handleNavigationItemClick(event) {
+        if (isEventTargetNavigationItem(event)) {
+            handleToggle(event);
+        }
+    }
+    return (React.createElement("header", Object.assign({ "data-density": "regular", 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-width": props.width, "data-position": props.position, "data-variant": props.variant }, 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-control-panel-mobile", props.className) }),
+        React.createElement(DBDrawer, { direction: "custom", spacing: "small", drawerHeaderPlain: props.drawerHeadlinePlain, rounded: true, open: open, onClose: (event) => handleToggle(event) },
+            React.createElement("div", { className: "db-control-panel-mobile-drawer-scroll-container", onClick: (event) => handleNavigationItemClick(event) },
+                props.children,
+                React.createElement(React.Fragment, null, props.metaNavigation)),
+            React.createElement(React.Fragment, null, props.secondaryActions)),
+        React.createElement(React.Fragment, null, props.flatIconNavigation),
+        React.createElement(React.Fragment, null, props.brand),
+        React.createElement(React.Fragment, null, props.primaryActions),
+        React.createElement(DBButton, { className: "db-control-panel-mobile-button", icon: "menu", type: "button", variant: "ghost", noText: true, onClick: (event) => handleToggle(event) }, (_a = props.burgerMenuLabel) !== null && _a !== void 0 ? _a : DEFAULT_BURGER_MENU)));
+}
+const DBControlPanelMobile = forwardRef(DBControlPanelMobileFn);
+export default DBControlPanelMobile;

package/dist/components/control-panel-mobile/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelMobile } from './control-panel-mobile';

package/dist/components/control-panel-mobile/index.js

@@ -0,0 +1 @@
+export { default as DBControlPanelMobile } from './control-panel-mobile';

package/dist/components/control-panel-mobile/model.d.ts

@@ -0,0 +1,30 @@
+import { ContainerWidthProps, ControlPanelProps, GlobalProps, GlobalState, NavigationBehaviorState, ShellControlPanelMobilePositionType, ToggleEventProps, ToggleEventState } from '../../shared/model';
+export declare const ShellControlPanelMobileVariant: readonly ["drawer", "flat-icon"];
+export type ShellControlPanelMobileVariantType = (typeof ShellControlPanelMobileVariant)[number];
+export type DBControlPanelMobileDefaultProps = {
+    /**
+     * Text to pass in a headline for the drawer header.
+     */
+    drawerHeadlinePlain?: string;
+    /**
+     * This attribute sets the label for the burger menu button for mobile control-panel-desktops.
+     */
+    burgerMenuLabel?: string;
+    /**
+     * Change the position of the mobile content panel
+     */
+    position?: ShellControlPanelMobilePositionType;
+    /**
+     * Change the variant of the mobile content panel
+     */
+    variant?: ShellControlPanelMobileVariantType;
+    /**
+     * Optional flat icon navigation for a mobile app look. Only visible by using variant="flat-icon" as well.
+     */
+    flatIconNavigation?: any;
+};
+export type DBControlPanelMobileProps = DBControlPanelMobileDefaultProps & GlobalProps & ToggleEventProps & ContainerWidthProps & ControlPanelProps;
+export type DBControlPanelMobileDefaultState = {
+    open: boolean;
+};
+export type DBControlPanelMobileState = DBControlPanelMobileDefaultState & GlobalState & ToggleEventState<HTMLElement> & NavigationBehaviorState;

package/dist/components/control-panel-mobile/model.js

@@ -0,0 +1 @@
+export const ShellControlPanelMobileVariant = ['drawer', 'flat-icon'];

package/dist/components/control-panel-primary-actions/control-panel-primary-actions.d.ts

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

package/dist/components/control-panel-primary-actions/control-panel-primary-actions.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils";
+function DBControlPanelPrimaryActionsFn(props, component) {
+    const _ref = component || useRef(undefined);
+    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-control-panel-primary-actions", props.className) }), props.children));
+}
+const DBControlPanelPrimaryActions = forwardRef(DBControlPanelPrimaryActionsFn);
+export default DBControlPanelPrimaryActions;

package/dist/components/control-panel-primary-actions/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelPrimaryActions } from './control-panel-primary-actions';

package/dist/components/control-panel-primary-actions/index.js

@@ -0,0 +1 @@
+export { default as DBControlPanelPrimaryActions } from './control-panel-primary-actions';

package/dist/components/control-panel-primary-actions/model.d.ts

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBControlPanelPrimaryActionsDefaultProps = {};
+export type DBControlPanelPrimaryActionsProps = DBControlPanelPrimaryActionsDefaultProps & GlobalProps;
+export type DBControlPanelPrimaryActionsDefaultState = {};
+export type DBControlPanelPrimaryActionsState = DBControlPanelPrimaryActionsDefaultState & GlobalState;

package/dist/components/control-panel-primary-actions/model.js

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

package/dist/components/control-panel-secondary-actions/control-panel-secondary-actions.d.ts

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

package/dist/components/control-panel-secondary-actions/control-panel-secondary-actions.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+import { filterPassingProps, getRootProps } from "../../utils/react";
+import { useRef, forwardRef } from "react";
+import { cls } from "../../utils";
+function DBControlPanelSecondaryActionsFn(props, component) {
+    const _ref = component || useRef(undefined);
+    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-control-panel-secondary-actions", props.className) }), props.children));
+}
+const DBControlPanelSecondaryActions = forwardRef(DBControlPanelSecondaryActionsFn);
+export default DBControlPanelSecondaryActions;

package/dist/components/control-panel-secondary-actions/index.d.ts

@@ -0,0 +1 @@
+export { default as DBControlPanelSecondaryActions } from './control-panel-secondary-actions';

package/dist/components/control-panel-secondary-actions/index.js

@@ -0,0 +1 @@
+export { default as DBControlPanelSecondaryActions } from './control-panel-secondary-actions';

package/dist/components/control-panel-secondary-actions/model.d.ts

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState } from '../../shared/model';
+export type DBControlPanelSecondaryActionsDefaultProps = {};
+export type DBControlPanelSecondaryActionsProps = DBControlPanelSecondaryActionsDefaultProps & GlobalProps;
+export type DBControlPanelSecondaryActionsDefaultState = {};
+export type DBControlPanelSecondaryActionsState = DBControlPanelSecondaryActionsDefaultState & GlobalState;

package/dist/components/control-panel-secondary-actions/model.js

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

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

@@ -1,3 +1,6 @@
 import * as React from "react";
-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>>;
+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>>;
 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);
-                delay(() => set_voiceOverFallback(""), 1000);
+                void 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);
-                delay(() => set_voiceOverFallback(""), 1000);
+                void 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
-                delay(() => {
+                void 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) {
-                                    delay(() => {
+                                    void 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
-                        delay(() => (detailsRef.current.open = false), 1);
+                        void delay(() => (detailsRef.current.open = false), 1);
                     }
                 }
             }
@@ -355,7 +355,7 @@ function DBCustomSelectFn(props, component) {
                     ? checkboxes.at(1)
                     : first;
                 if (checkbox) {
-                    delay(() => {
+                    void 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) {
-                delay(() => {
+                void delay(() => {
                     // Takes some time until element can be focused
                     search.focus();
                 }, 1);

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

@@ -189,6 +189,9 @@ export type DBCustomSelectDefaultState = {
     _infoTextId?: string;
     _internalChangeTimestamp: number;
     _documentClickListenerCallbackId?: string;
+    _documentScrollListenerCallbackId?: string;
+    handleDocumentScroll: (event: any) => void;
+    _observer?: IntersectionObserver;
     _searchValue?: string;
     _userInteraction?: boolean;
     getNativeSelectValue: () => string;
@@ -199,7 +202,7 @@ export type DBCustomSelectDefaultState = {
     searchEnabled: boolean;
     amountOptions: number;
     setDescById: (descId?: string) => void;
-    handleTagRemove: (option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void) => void;
+    handleTagRemove: (option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void | any) => 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,5 +1,8 @@
 import * as React from "react";
-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> & {
+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> & {
     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;
                 }
-                delay(() => {
+                void 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" },
-                    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-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-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 ["left", "right", "up", "down"];
+export declare const DrawerDirectionList: readonly ["custom", "left", "right", "up", "down"];
 export type DrawerDirectionType = (typeof DrawerDirectionList)[number];
 export declare const DrawerVariantList: readonly ["modal", "inside"];
 export type DrawerVariantType = (typeof DrawerVariantList)[number];
@@ -22,6 +22,10 @@ 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.
      */