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

package/dist/esm/{navigation--UdC9CzO.js → navigation-CJ-OxodG.js}

@@ -1,13 +1,13 @@
-import { h as handleDataOutside } from './floating-components-G-TursYV.js';
+import { h as handleDataOutside, b as handleFixedPopover } from './floating-components-D3kmGlOI.js';
 
 const isEventTargetNavigationItem = (event) => {
-    var _a, _b;
+    var _a;
     const { target } = event;
-    return Boolean(!((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('db-navigation-item-expand-button')) && ((_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('db-navigation-item')));
+    return Boolean((_a = target === null || target === void 0 ? void 0 : target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('db-navigation-item'));
 };
 class NavigationItemSafeTriangle {
     constructor(element, subNavigation) {
-        var _a;
+        var _a, _b;
         this.parentSubNavigation = null;
         this.initialized = false;
         this.mouseX = 0;
@@ -17,13 +17,12 @@ class NavigationItemSafeTriangle {
         if (!this.element || !this.subNavigation) {
             return;
         }
-        this.parentSubNavigation = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-sub-navigation');
+        this.parentSubNavigation = (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-navigation-item-group-menu')) !== null && _b !== void 0 ? _b : this.element;
         /*
          * only initiate if:
-         * 1. item is not at root navigation level
          * 2. item is not in the mobile navigation / within db-drawer
          */
-        if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {
+        if (!this.element.closest('.db-drawer')) {
             this.init();
         }
     }
@@ -89,20 +88,10 @@ class NavigationItemSafeTriangle {
         }
         return false;
     }
-    getTriangleCoordinates(variant) {
+    getTriangleCoordinates() {
         if (!this.triangleData) {
             return;
         }
-        if (variant === 'fill-gap') {
-            const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;
-            const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
-            return {
-                lb: `${xStart} ${itemHeight}`,
-                lt: `${xStart} 0`,
-                rt: '100% 0',
-                rb: `100% ${itemHeight}`
-            };
-        }
         const tipX = this.getTriangleTipX();
         const tipY = this.getTriangleTipY();
         const lb = `${tipX}px ${tipY}px`;
@@ -121,7 +110,7 @@ class NavigationItemSafeTriangle {
         this.mouseX = event.clientX - this.triangleData.itemRect.left;
         this.mouseY = event.clientY - this.triangleData.itemRect.top;
         const isOverSubNavigation = this.hasMouseEnteredSubNavigation();
-        const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');
+        const coordinates = this.getTriangleCoordinates();
         if (!coordinates) {
             return;
         }
@@ -131,8 +120,35 @@ class NavigationItemSafeTriangle {
         }
     }
 }
+const handleSubNavigationPosition = (element, level = 0) => {
+    for (const navItem of Array.from(element.querySelectorAll('.db-navigation-item-group'))) {
+        const subNavigation = navItem.querySelector('.db-navigation-item-group-menu');
+        const button = navItem.querySelector('.db-navigation-item-group-expand-button');
+        if (subNavigation && button) {
+            /*
+             * This is set via css inside:
+             * `packages/components/src/components/navigation-item-group/navigation-item-group-menu-popover.scss`.
+             * We don't need to calculate the position of the menu as a popover.
+             */
+            const isMobile = getComputedStyle(subNavigation).getPropertyValue('--db-navigation-item-group-menu-mobile');
+            if (isMobile)
+                return;
+            if (level > 0 || subNavigation.dataset['open'] === 'horizontal') {
+                // Sub-Navigation should be opened horizontal
+                handleFixedPopover(subNavigation, button, 'right-start');
+                subNavigation.dataset['open'] = 'horizontal';
+            }
+            else {
+                // Sub-Navigation should be opened vertical
+                handleFixedPopover(subNavigation, button, 'bottom-start');
+                subNavigation.dataset['open'] = 'vertical';
+            }
+            handleSubNavigationPosition(subNavigation, level + 1);
+        }
+    }
+};
 
-export { NavigationItemSafeTriangle as N, isEventTargetNavigationItem as i };
-//# sourceMappingURL=navigation--UdC9CzO.js.map
+export { NavigationItemSafeTriangle as N, handleSubNavigationPosition as h, isEventTargetNavigationItem as i };
+//# sourceMappingURL=navigation-CJ-OxodG.js.map
 
-//# sourceMappingURL=navigation--UdC9CzO.js.map
+//# sourceMappingURL=navigation-CJ-OxodG.js.map

package/dist/esm/navigation-CJ-OxodG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-CJ-OxodG.js","sources":["src/utils/navigation.ts"],"sourcesContent":["import { handleDataOutside, handleFixedPopover } from './floating-components';\nexport type TriangleData = {\n  itemRect: DOMRect;\n  parentElementWidth: number;\n  subNavigationHeight: number;\n  padding: number;\n  outsideVX: 'left' | 'right' | undefined;\n  outsideVY: 'top' | 'bottom' | undefined;\n};\nexport const isEventTargetNavigationItem = (event: unknown): boolean => {\n  const {\n    target\n  } = event as {\n    target: HTMLElement;\n  };\n  return Boolean(target?.parentElement?.classList.contains('db-navigation-item'));\n};\nexport class NavigationItemSafeTriangle {\n  private readonly element: HTMLElement | null;\n  private readonly subNavigation: HTMLElement | null;\n  private readonly parentSubNavigation: HTMLElement | null = null;\n  private triangleData?: TriangleData;\n  private initialized: boolean = false;\n  private mouseX: number = 0;\n  private mouseY: number = 0;\n  constructor(element: HTMLElement | null, subNavigation: HTMLElement | null) {\n    this.element = element;\n    this.subNavigation = subNavigation;\n    if (!this.element || !this.subNavigation) {\n      return;\n    }\n    this.parentSubNavigation = this.element?.closest('.db-navigation-item-group-menu') ?? this.element;\n\n    /*\n     * only initiate if:\n     * 2. item is not in the mobile navigation / within db-drawer\n     */\n    if (!this.element.closest('.db-drawer')) {\n      this.init();\n    }\n  }\n  private init() {\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n\n    // the triangle has the width of the sub-navigation, current nav-item can be wider.\n    // so the width of the triangle must be adapted to a possibly wider nav-item.\n    this.element?.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);\n    this.initialized = true;\n  }\n  public enableFollow() {\n    if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    const dataOutsidePair = handleDataOutside(this.subNavigation);\n    const itemRect = this.element.getBoundingClientRect();\n    const parentElementWidth = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;\n    this.triangleData = {\n      itemRect,\n      parentElementWidth,\n      subNavigationHeight: this.subNavigation.getBoundingClientRect().height,\n      padding: (parentElementWidth - itemRect.width) / 2,\n      outsideVX: dataOutsidePair.vx,\n      outsideVY: dataOutsidePair.vy\n    };\n  }\n  public disableFollow() {\n    this.triangleData = undefined;\n  }\n  private getTriangleTipX(): number {\n    if (!this.triangleData) return 0;\n    if (this.triangleData.outsideVX === 'right') {\n      // vertical flipped triangle needs an inverted x pos\n      return this.triangleData.itemRect.width - this.mouseX;\n    }\n\n    // triangle stops shrinking from 75% x pos\n    return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);\n  }\n  private getTriangleTipY(): number {\n    if (!this.triangleData) return 0;\n\n    // padding must be added to the y pos of the tip so that the y pos matches the cursor\n    const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;\n    if (this.triangleData.outsideVY === 'bottom') {\n      // add offset to tip y pos to match corrected sub-navigation y pos\n      return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);\n    }\n    return mouseYLimited;\n  }\n  private hasMouseEnteredSubNavigation(): boolean {\n    if (!this.triangleData) {\n      return false;\n    }\n    const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';\n    if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {\n      return true;\n    }\n    if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {\n      return true;\n    }\n    return false;\n  }\n  private getTriangleCoordinates(): undefined | {\n    lb: string;\n    lt: string;\n    rt: string;\n    rb: string;\n  } {\n    if (!this.triangleData) {\n      return;\n    }\n    const tipX = this.getTriangleTipX();\n    const tipY = this.getTriangleTipY();\n    const lb = `${tipX}px ${tipY}px`;\n    const lt = `${tipX}px ${tipY}px`;\n    return {\n      lb,\n      lt,\n      rt: '100% 0',\n      rb: '100% 100%'\n    };\n  }\n  public followByMouseEvent(event: any) {\n    if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {\n      return;\n    }\n    this.mouseX = event.clientX - this.triangleData.itemRect.left;\n    this.mouseY = event.clientY - this.triangleData.itemRect.top;\n    const isOverSubNavigation = this.hasMouseEnteredSubNavigation();\n    const coordinates = this.getTriangleCoordinates();\n    if (!coordinates) {\n      return;\n    }\n    this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);\n    if (isOverSubNavigation) {\n      this.triangleData = undefined;\n    }\n  }\n}\nexport const handleSubNavigationPosition = (element: HTMLElement, level: number = 0) => {\n  for (const navItem of Array.from(element.querySelectorAll('.db-navigation-item-group'))) {\n    const subNavigation: HTMLElement | null = navItem.querySelector('.db-navigation-item-group-menu');\n    const button: HTMLElement | null = navItem.querySelector('.db-navigation-item-group-expand-button');\n    if (subNavigation && button) {\n      /*\n       * This is set via css inside:\n       * `packages/components/src/components/navigation-item-group/navigation-item-group-menu-popover.scss`.\n       * We don't need to calculate the position of the menu as a popover.\n       */\n      const isMobile = getComputedStyle(subNavigation).getPropertyValue('--db-navigation-item-group-menu-mobile');\n      if (isMobile) return;\n      if (level > 0 || subNavigation.dataset['open'] === 'horizontal') {\n        // Sub-Navigation should be opened horizontal\n        handleFixedPopover(subNavigation, button, 'right-start');\n        subNavigation.dataset['open'] = 'horizontal';\n      } else {\n        // Sub-Navigation should be opened vertical\n        handleFixedPopover(subNavigation, button, 'bottom-start');\n        subNavigation.dataset['open'] = 'vertical';\n      }\n      handleSubNavigationPosition(subNavigation, level + 1);\n    }\n  }\n}"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import { DBControlPanelBrandProps } from "./model";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot additionalInformation - TODO: Add description for slotAdditionalInformation
+ */
+export declare class DBControlPanelBrand {
+    private _ref;
+    icon: DBControlPanelBrandProps["icon"];
+    showIcon: DBControlPanelBrandProps["showIcon"];
+    id: DBControlPanelBrandProps["id"];
+    className: DBControlPanelBrandProps["className"];
+    text: DBControlPanelBrandProps["text"];
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    render(): any;
+}

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

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

package/dist/types/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/types/components/control-panel-desktop/control-panel-desktop.d.ts

@@ -0,0 +1,33 @@
+import { DBControlPanelDesktopProps } from "./model";
+import { EventEmitter } from "../../stencil-public-runtime";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot brand - TODO: Add description for slotBrand
+ * @slot metaNavigation - TODO: Add description for slotMetaNavigation
+ * @slot primaryActions - TODO: Add description for slotPrimaryActions
+ * @slot secondaryActions - TODO: Add description for slotSecondaryActions
+ */
+export declare class DBControlPanelDesktop {
+    private _ref;
+    private _scrollContainerRef;
+    expanded: DBControlPanelDesktopProps["expanded"];
+    expandButtonTooltipFn: EventEmitter<Parameters<Required<DBControlPanelDesktopProps>["onExpandButtonTooltipFn"]>[number]> | void;
+    expandButtonTooltip: DBControlPanelDesktopProps["expandButtonTooltip"];
+    className: DBControlPanelDesktopProps["className"];
+    id: DBControlPanelDesktopProps["id"];
+    width: DBControlPanelDesktopProps["width"];
+    orientation: DBControlPanelDesktopProps["orientation"];
+    _id: string;
+    _open: boolean;
+    handleToggle(event: any): void;
+    getToggleButtonText(): string | CustomEvent<boolean>;
+    onScroll(): void;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    render(): any;
+}

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

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

package/dist/types/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/types/components/control-panel-flat-icon-navigation/control-panel-flat-icon-navigation.d.ts

@@ -0,0 +1,22 @@
+import { DBControlPanelFlatIconNavigationProps } from "./model";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBControlPanelFlatIconNavigation {
+    private _ref;
+    id: DBControlPanelFlatIconNavigationProps["id"];
+    noText: DBControlPanelFlatIconNavigationProps["noText"];
+    className: DBControlPanelFlatIconNavigationProps["className"];
+    initialized: boolean;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    watch0Fn(): void;
+    watch0(): void;
+    componentDidLoad(): void;
+    render(): any;
+}

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

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

package/dist/types/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/types/components/{brand/brand.d.ts → control-panel-meta-navigation/control-panel-meta-navigation.d.ts}

@@ -1,16 +1,12 @@
-import { DBBrandProps } from "./model";
+import { DBControlPanelMetaNavigationProps } from "./model";
 /**
  * @slot children - This is a default/unnamed slot
 
  */
-export declare class DBBrand {
+export declare class DBControlPanelMetaNavigation {
     private _ref;
-    hideLogo: DBBrandProps["hideLogo"];
-    icon: DBBrandProps["icon"];
-    showIcon: DBBrandProps["showIcon"];
-    id: DBBrandProps["id"];
-    className: DBBrandProps["className"];
-    text: DBBrandProps["text"];
+    id: DBControlPanelMetaNavigationProps["id"];
+    className: DBControlPanelMetaNavigationProps["className"];
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component

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

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

package/dist/types/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/types/components/control-panel-mobile/control-panel-mobile.d.ts

@@ -0,0 +1,32 @@
+import { DBControlPanelMobileProps } from "./model";
+import { EventEmitter } from "../../stencil-public-runtime";
+/**
+ * @slot children - This is a default/unnamed slot
+ * @slot metaNavigation - TODO: Add description for slotMetaNavigation
+ * @slot secondaryActions - TODO: Add description for slotSecondaryActions
+ * @slot flatIconNavigation - TODO: Add description for slotFlatIconNavigation
+ * @slot brand - TODO: Add description for slotBrand
+ * @slot primaryActions - TODO: Add description for slotPrimaryActions
+ */
+export declare class DBControlPanelMobile {
+    private _ref;
+    toggle: EventEmitter<Parameters<Required<DBControlPanelMobileProps>["onToggle"]>[number]> | void;
+    id: DBControlPanelMobileProps["id"];
+    width: DBControlPanelMobileProps["width"];
+    position: DBControlPanelMobileProps["position"];
+    variant: DBControlPanelMobileProps["variant"];
+    className: DBControlPanelMobileProps["className"];
+    drawerHeadlinePlain: DBControlPanelMobileProps["drawerHeadlinePlain"];
+    burgerMenuLabel: DBControlPanelMobileProps["burgerMenuLabel"];
+    open: boolean;
+    handleToggle(event: any): void;
+    handleNavigationItemClick(event: any): void;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    render(): any;
+}

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

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

package/dist/types/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/types/components/control-panel-primary-actions/control-panel-primary-actions.d.ts

@@ -0,0 +1,18 @@
+import { DBControlPanelPrimaryActionsProps } from "./model";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBControlPanelPrimaryActions {
+    private _ref;
+    id: DBControlPanelPrimaryActionsProps["id"];
+    className: DBControlPanelPrimaryActionsProps["className"];
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    render(): any;
+}

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

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

package/dist/types/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/types/components/control-panel-secondary-actions/control-panel-secondary-actions.d.ts

@@ -0,0 +1,18 @@
+import { DBControlPanelSecondaryActionsProps } from "./model";
+/**
+ * @slot children - This is a default/unnamed slot
+
+ */
+export declare class DBControlPanelSecondaryActions {
+    private _ref;
+    id: DBControlPanelSecondaryActionsProps["id"];
+    className: DBControlPanelSecondaryActionsProps["className"];
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    componentDidLoad(): void;
+    render(): any;
+}

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

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

package/dist/types/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/types/components/custom-select/custom-select.d.ts

@@ -102,7 +102,7 @@ export declare class DBCustomSelect {
     getOptionLabel(option: CustomSelectOptionType): string;
     getOptionChecked(value?: string): boolean;
     getTagRemoveLabel(index: number): string;
-    handleTagRemove(option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void): void;
+    handleTagRemove(option: CustomSelectOptionType, event?: ClickEvent<HTMLButtonElement> | void | any): void;
     handleAutoPlacement(): void;
     handleArrowDownUp(event: any): void;
     handleKeyboardPress(event: any): void;

package/dist/types/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/types/components/drawer/drawer.d.ts

@@ -19,6 +19,7 @@ export declare class DBDrawer {
     spacing: DBDrawerProps["spacing"];
     width: DBDrawerProps["width"];
     rounded: DBDrawerProps["rounded"];
+    drawerHeaderPlain: DBDrawerProps["drawerHeaderPlain"];
     closeButtonId: DBDrawerProps["closeButtonId"];
     closeButtonText: DBDrawerProps["closeButtonText"];
     initialized: boolean;

package/dist/types/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.
      */

package/dist/types/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/types/components/navigation/navigation.d.ts

@@ -5,15 +5,33 @@ import { DBNavigationProps } from "./model";
  */
 export declare class DBNavigation {
     private _ref;
+    private menuRef;
+    variant: DBNavigationProps["variant"];
+    arrowScrollDistance: DBNavigationProps["arrowScrollDistance"];
     id: DBNavigationProps["id"];
+    showTreeLine: DBNavigationProps["showTreeLine"];
     className: DBNavigationProps["className"];
-    _id: string;
+    showScrollLeft: boolean;
+    showScrollRight: boolean;
+    _shellDesktopPosition: any;
+    _subNavigationDesktopPosition: any;
+    _variant: any;
+    initialized: boolean;
+    _isSubNavigation: boolean;
+    evaluateScrollButtons(tList: Element): void;
+    scroll(left?: boolean): void;
+    onScroll(): void;
+    _handleSubNavigation(): void;
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
      * @param customElementSelector  the custom element like `my-component`
      */
     private enableAttributePassing;
+    watch0Fn(): void;
+    watch0(): void;
+    watch1Fn(): void;
+    watch1(): void;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/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/types/components/navigation-item/navigation-item.d.ts

@@ -1,45 +1,23 @@
-import { ClickEvent } from "../../shared/model";
 import { DBNavigationItemProps } from "./model";
-import { EventEmitter } from "../../stencil-public-runtime";
 /**
  * @slot children - This is a default/unnamed slot
- * @slot subNavigation - TODO: Add description for slotSubNavigation
+ * @slot additionalInformation - TODO: Add description for slotAdditionalInformation
  */
 export declare class DBNavigationItem {
     private _ref;
-    subNavigationExpanded: DBNavigationItemProps["subNavigationExpanded"];
-    click: EventEmitter<Parameters<Required<DBNavigationItemProps>["onClick"]>[number]> | void;
     id: DBNavigationItemProps["id"];
     className: DBNavigationItemProps["className"];
-    width: DBNavigationItemProps["width"];
     icon: DBNavigationItemProps["icon"];
     showIcon: DBNavigationItemProps["showIcon"];
     active: DBNavigationItemProps["active"];
-    wrap: DBNavigationItemProps["wrap"];
     disabled: DBNavigationItemProps["disabled"];
-    text: DBNavigationItemProps["text"];
-    backButtonId: DBNavigationItemProps["backButtonId"];
-    backButtonText: DBNavigationItemProps["backButtonText"];
-    initialized: boolean;
-    hasAreaPopup: boolean;
-    hasSubNavigation: boolean;
-    isSubNavigationExpanded: boolean;
-    autoClose: boolean;
-    subNavigationId: string;
-    navigationItemSafeTriangle: any;
-    handleNavigationItemClick(event: any): void;
-    handleClick(event: ClickEvent<HTMLButtonElement> | any): void;
-    handleBackClick(event: ClickEvent<HTMLButtonElement> | any): void;
+    tooltip: DBNavigationItemProps["tooltip"];
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
      * @param element  the ref for the component
      * @param customElementSelector  the custom element like `my-component`
      */
     private enableAttributePassing;
-    watch0Fn(): void;
-    watch0(): void;
-    watch1Fn(): void;
-    watch1(): void;
     componentDidLoad(): void;
     render(): any;
 }

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

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