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

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

@@ -3,21 +3,10 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useState, useRef, useEffect, forwardRef } from "react";
 import { cls, getBooleanAsString } from "../../utils";
-function DBPageFn(props, component) {
+function DBShellFn(props, component) {
+    var _a, _b, _c, _d;
     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) {
@@ -29,19 +18,11 @@ function DBPageFn(props, component) {
             setFontsLoaded(true);
         }
     }, []);
-    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)));
+    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)));
 }
-const DBPage = forwardRef(DBPageFn);
-export default DBPage;
+const DBShell = forwardRef(DBShellFn);
+export default DBShell;

package/dist/components/shell-sub-navigation/index.d.ts

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

package/dist/components/shell-sub-navigation/index.js

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

package/dist/components/shell-sub-navigation/model.d.ts

@@ -0,0 +1,5 @@
+import { GlobalProps, GlobalState, SidebarProps, SidebarState, ToggleEventState } from '../../shared/model';
+export type DBShellSubNavigationDefaultProps = {};
+export type DBShellSubNavigationProps = DBShellSubNavigationDefaultProps & GlobalProps & SidebarProps;
+export type DBShellSubNavigationDefaultState = {};
+export type DBShellSubNavigationState = DBShellSubNavigationDefaultState & GlobalState & ToggleEventState<HTMLButtonElement> & SidebarState;

package/dist/components/shell-sub-navigation/model.js

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

package/dist/components/shell-sub-navigation/shell-sub-navigation.d.ts

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

package/dist/components/shell-sub-navigation/shell-sub-navigation.js

@@ -0,0 +1,45 @@
+"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 DBButton from "../button/button";
+import DBTooltip from "../tooltip/tooltip";
+function DBShellSubNavigationFn(props, component) {
+    var _a, _b, _c;
+    const _ref = component || useRef(undefined);
+    const [_id, set_id] = useState(() => `db-shell-sub-navigation-${uuid()}`);
+    const [_open, set_open] = useState(() => true);
+    function handleToggle(event) {
+        event.stopPropagation();
+        set_open(!_open);
+    }
+    function getToggleButtonText() {
+        var _a;
+        if (props.expandButtonTooltip) {
+            return props.expandButtonTooltip;
+        }
+        const fnOutput = () => {
+            if (props.onExpandButtonTooltipFn) {
+                const open = _open;
+                return props.onExpandButtonTooltipFn(open);
+            }
+        };
+        return (_a = fnOutput()) !== null && _a !== void 0 ? _a : (_open ? DEFAULT_COLLAPSE : DEFAULT_EXPAND);
+    }
+    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("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: (_b = props.id) !== null && _b !== void 0 ? _b : _id, "data-open": getBooleanAsString(_open) }, 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-sub-navigation", props.className) }),
+        props.children,
+        React.createElement("div", { className: "db-shell-sub-navigation-button" },
+            React.createElement(DBButton, { variant: "ghost", icon: "double_chevron_left", onClick: (event) => handleToggle(event), "aria-controls": (_c = props.id) !== null && _c !== void 0 ? _c : _id, "aria-expanded": getBooleanAsString(_open), noText: true },
+                React.createElement(DBTooltip, { variant: "label", placement: "right" }, getToggleButtonText())))));
+}
+const DBShellSubNavigation = forwardRef(DBShellSubNavigationFn);
+export default DBShellSubNavigation;

package/dist/components/switch/switch.d.ts

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

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

@@ -1,4 +1,4 @@
-import { AlignmentProps, GlobalProps, GlobalState, InitializedState, InputEvent, OrientationProps, WidthProps } from '../../shared/model';
+import { AlignmentProps, GlobalProps, GlobalState, InitializedState, InputEvent, OrientationProps, OverflowScrollButtonProps, OverflowScrollButtonState, WidthProps } from '../../shared/model';
 import { DBTabItemProps } from '../tab-item/model';
 import { DBTabPanelProps } from '../tab-panel/model';
 export declare const TabsBehaviorList: readonly ["scrollbar", "arrows"];
@@ -7,10 +7,6 @@ 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
      */
@@ -50,17 +46,13 @@ export type DBTabsEventProps = {
      */
     tabSelect?: (event?: InputEvent<HTMLElement>) => void;
 };
-export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps & DBTabsEventProps;
+export type DBTabsProps = DBTabsDefaultProps & GlobalProps & OrientationProps & WidthProps & AlignmentProps & OverflowScrollButtonProps & 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;
+export type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState & OverflowScrollButtonState;

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 | "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>>;
+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>>;
 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.getElementsByClassName("db-tab-item"));
+            const tabItems = Array.from(_ref.current.querySelectorAll(":is(:scope > db-tab-list .db-tab-item, :scope > .db-tab-list .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: "tabs-scroll-left", variant: "ghost", icon: "chevron_left", type: "button", noText: true, onClick: (event) => scroll(true) }, "Scroll left")) : null,
+        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,
         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: "tabs-scroll-right", variant: "ghost", icon: "chevron_right", type: "button", noText: true, onClick: (event) => scroll() }, "Scroll right")) : 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,
         props.children));
 }
 const DBTabs = forwardRef(DBTabsFn);

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

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

package/dist/components/tooltip/tooltip.js

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

package/dist/index.d.ts

@@ -4,14 +4,24 @@ 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';
@@ -26,8 +36,6 @@ 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';
@@ -38,12 +46,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';
@@ -52,6 +60,8 @@ 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';
@@ -77,3 +87,6 @@ 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,14 +4,24 @@ 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';
@@ -26,8 +36,6 @@ 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';
@@ -38,12 +46,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';
@@ -52,6 +60,8 @@ 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';
@@ -77,3 +87,6 @@ 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,6 +14,8 @@ 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;
@@ -64,6 +66,7 @@ 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,6 +14,8 @@ 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;
@@ -68,6 +70,7 @@ 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";

package/dist/shared/model.d.ts

@@ -88,6 +88,10 @@ export type MarginProps = {
      */
     margin?: MarginType;
 };
+export declare const ShellControlPanelDesktopPosition: readonly ["top", "left"];
+export type ShellControlPanelDesktopPositionType = (typeof ShellControlPanelDesktopPosition)[number];
+export declare const ShellControlPanelMobilePosition: readonly ["top", "bottom"];
+export type ShellControlPanelMobilePositionType = (typeof ShellControlPanelMobilePosition)[number];
 export declare const PlacementHorizontalList: readonly ["left", "right", "left-start", "left-end", "right-start", "right-end"];
 export type PlacementHorizontalType = (typeof PlacementHorizontalList)[number];
 export declare const PlacementVerticalList: readonly ["top", "bottom", "top-start", "top-end", "bottom-start", "bottom-end"];
@@ -233,11 +237,13 @@ export type ValueProps = {
      */
     value?: any;
 };
-export type BaseFormProps = {
+export type DisabledProps = {
     /**
-     * The disabled attribute can be set to keep a user from clicking on the form element.
+     * The disabled attribute can be set to keep a user from clicking on the item.
      */
     disabled?: boolean | string;
+};
+export type BaseFormProps = {
     /**
      * The label attribute specifies the caption of the form element.
      */
@@ -246,7 +252,7 @@ export type BaseFormProps = {
      * The name attribute gives the name of the form control, as used in form submission and in the form element's elements object.
      */
     name?: string;
-};
+} & DisabledProps;
 export type CustomFormProps = {
     /**
      * Overwrites auto handling for aria-describedby.
@@ -506,10 +512,83 @@ export type AriaControlsProps = {
      */
     controls?: string;
 };
+export type ControlPanelProps = {
+    /**
+     * Slot to pass in the DBControlPanelBrand component
+     */
+    brand?: any;
+    /**
+     * Slot to pass in a meta navigation.
+     * Desktop: Above the regular control-panel-desktop
+     * Mobile: Inside the drawer
+     */
+    metaNavigation?: any;
+    /**
+     * Slot to pass one or more elements like DBButton (e.g. search) as primary action.
+     * Desktop: Shown next to the main-navigation
+     * Mobile: Shown next to the control-panel-brand
+     */
+    primaryActions?: any;
+    /**
+     * Slot to pass one or more elements like DBButton (e.g. profile, language, etc.) as secondary action.
+     * Desktop: Shown seperated by divider at the end of the control-panel-desktop
+     * Mobile: Shown inside the drawer at the bottom.
+     */
+    secondaryActions?: any;
+    /**
+     * Adds ``aria-labelledby`` to the <nav> element.
+     */
+    navigationLabeledBy?: string;
+};
 export type ValueLabelType = {
     value: string;
     label?: string;
 };
+export type OverflowScrollButtonProps = {
+    /**
+     * Change amount of distance if you click on an arrow, only available with behavior="arrows"
+     */
+    arrowScrollDistance?: number | string;
+};
+export type OverflowScrollButtonState = {
+    scroll: (left?: boolean) => void;
+    showScrollLeft?: boolean;
+    showScrollRight?: boolean;
+    evaluateScrollButtons: (tabList: Element) => void;
+};
+export type SidebarProps = {
+    /**
+     * Set the expanded/collapsed state initially for the left sidebar
+     */
+    expanded?: boolean | string;
+    /**
+     * Set the tooltip for the expand/collapse button
+     */
+    expandButtonTooltip?: string;
+    /**
+     * Set the tooltip for the expand/collapse button based on the state. (only react|vue)
+     */
+    expandButtonTooltipFn?: (open: boolean) => string;
+    /**
+     * Set the tooltip for the expand/collapse button based on the state. (only react|vue)
+     */
+    onExpandButtonTooltipFn?: (open: boolean) => string;
+};
+export type SidebarState = {
+    _open: boolean;
+    getToggleButtonText: () => string;
+};
+export declare const NavigationItemGroupVariantList: readonly ["popover", "tree"];
+export type NavigationItemGroupVariantType = (typeof NavigationItemGroupVariantList)[number];
+export type NavigationItemGroupVariant = {
+    variant?: NavigationItemGroupVariantType;
+};
+export type AdditionalInformationSlotProps = {
+    /**
+     * Slot to add additional information most likely a DBBadge
+     */
+    additionalInformation?: any;
+};
 export type DocumentScrollState = {
     _documentScrollListenerCallbackId?: string;
     handleDocumentScroll: (event: any, parent?: HTMLElement) => void;

package/dist/shared/model.js

@@ -1,6 +1,8 @@
 export const SemanticList = ['adaptive', 'neutral', 'critical', 'informational', 'warning', 'successful'];
 export const SpacingList = ['medium', 'small', 'large', 'none'];
 export const MarginList = ['medium', 'small', 'large', 'none'];
+export const ShellControlPanelDesktopPosition = ['top', 'left'];
+export const ShellControlPanelMobilePosition = ['top', 'bottom'];
 export const PlacementHorizontalList = ['left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'];
 export const PlacementVerticalList = ['top', 'bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end'];
 export const PlacementList = [...PlacementHorizontalList, ...PlacementVerticalList];
@@ -19,3 +21,4 @@ export const AutoCompleteList = ['off', 'on', 'name', 'honorific-prefix', 'given
 export const LinkTargetList = ['_self', '_blank', '_parent', '_top'];
 export const LinkReferrerPolicyList = ['no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url'];
 export const AlignmentList = ['start', 'center'];
+export const NavigationItemGroupVariantList = ['popover', 'tree'];

package/dist/utils/floating-components.d.ts

@@ -16,5 +16,21 @@ export declare const getFloatingProps: (element: HTMLElement, parent: HTMLElemen
     correctedPlacement: string;
     innerWidth: number;
     innerHeight: number;
+    outsideYBoth?: undefined;
+    outsideXBoth?: undefined;
+} | {
+    top: number;
+    bottom: number;
+    right: number;
+    height: number;
+    width: number;
+    left: number;
+    childHeight: number;
+    childWidth: number;
+    correctedPlacement: string;
+    innerWidth: number;
+    innerHeight: number;
+    outsideYBoth: boolean;
+    outsideXBoth: boolean;
 };
-export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement: string) => void;
+export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement?: string) => void;