@db-ux/v-core-components 5.1.4 → 5.1.6-shell-11663a0

package/dist/index.d.ts

@@ -12,6 +12,28 @@ export * from './components/card/index.js';
 export * from './components/card/model.js';
 export * from './components/checkbox/index.js';
 export * from './components/checkbox/model.js';
+export * from './components/control-panel-brand/index.js';
+export * from './components/control-panel-brand/model.js';
+export * from './components/control-panel-desktop/index.js';
+export * from './components/control-panel-desktop/model.js';
+export * from './components/control-panel-flat-icon/index.js';
+export * from './components/control-panel-flat-icon/model.js';
+export * from './components/control-panel-meta/index.js';
+export * from './components/control-panel-meta/model.js';
+export * from './components/control-panel-mobile/index.js';
+export * from './components/control-panel-mobile/model.js';
+export * from './components/control-panel-navigation/index.js';
+export * from './components/control-panel-navigation-item/index.js';
+export * from './components/control-panel-navigation-item-group/index.js';
+export * from './components/control-panel-navigation-item-group/model.js';
+export * from './components/control-panel-navigation-item/model.js';
+export * from './components/control-panel-navigation/model.js';
+export * from './components/control-panel-primary-actions/index.js';
+export * from './components/control-panel-primary-actions/model.js';
+export * from './components/control-panel-secondary-actions/index.js';
+export * from './components/control-panel-secondary-actions/model.js';
+export * from './components/control-panel-skip-navigation/index.js';
+export * from './components/control-panel-skip-navigation/model.js';
 export * from './components/custom-button/index.js';
 export * from './components/custom-button/model.js';
 export * from './components/custom-select/index.js';
@@ -58,6 +80,12 @@ export * from './components/section/index.js';
 export * from './components/section/model.js';
 export * from './components/select/index.js';
 export * from './components/select/model.js';
+export * from './components/shell/index.js';
+export * from './components/shell-content/index.js';
+export * from './components/shell-content/model.js';
+export * from './components/shell-sub-navigation/index.js';
+export * from './components/shell-sub-navigation/model.js';
+export * from './components/shell/model.js';
 export * from './components/stack/index.js';
 export * from './components/stack/model.js';
 export * from './components/switch/index.js';

package/dist/shared/constants.d.ts

@@ -14,12 +14,15 @@ 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_SCROLL_LEFT: string;
 export declare const DEFAULT_SCROLL_RIGHT: string;
-export declare const DEFAULT_BURGER_MENU: string;
 export declare const DEFAULT_ICON: string;
+export declare const DEFAULT_BURGER_MENU: string;
 export declare const DEFAULT_ROWS: number;
 export declare const DEFAULT_CLOSE_BUTTON: string;
+export declare const MAIN_CONTENT_ID: string;
 export declare const DENSITY_CONST: string;
 export declare const COLOR_CONST: string;
 export declare enum DENSITY {
@@ -66,6 +69,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/model.d.ts

@@ -104,6 +104,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"];
@@ -186,6 +190,10 @@ export type PopoverProps = {
      * Use fixed with for default max-width
      */
     width?: PopoverWidthType;
+    /**
+     * If the floating element is inside a fixed container we might need to force absolute position
+     */
+    forceAbsolute?: boolean | string;
 };
 export type NameProps = {
     /**
@@ -539,11 +547,33 @@ export type NavigationBackButtonProps = {
      */
     backButtonText?: string;
 };
-export type AriaControlsProps = {
+export type ControlPanelProps = {
     /**
-     * Pass `aria-controls` to inner element
+     * Slot to pass in the DBControlPanelBrand component
      */
-    controls?: string;
+    brand?: any;
+    /**
+     * Slot to pass in a meta navigation.
+     * Desktop: Above the regular control-panel-desktop
+     * Mobile: Inside the drawer
+     */
+    meta?: 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 separated by divider at the end of the control-panel-desktop
+     * Mobile: Shown inside the drawer at the bottom.
+     */
+    secondaryActions?: any;
+    /**
+     * Slot to pass an anchor or link to skip the navigation and jump to main content.
+     */
+    skipNavigation?: any;
 };
 export type NoTextProps = {
     /**
@@ -555,6 +585,67 @@ export type ValueLabelType = {
     value: string;
     label?: string;
 };
+export type OverflowScrollButtonProps = {
+    /**
+     * Change amount of scroll distance when clicking on an overflow scroll arrow button.
+     */
+    arrowScrollDistance?: number | string;
+    /**
+     * Set the text for the scroll left button
+     */
+    scrollLeftText?: string;
+    /**
+     * Set the text for the scroll right button
+     */
+    scrollRightText?: 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", "drilldown"];
+export type NavigationItemGroupVariantType = (typeof NavigationItemGroupVariantList)[number];
+export type NavigationItemGroupVariant = {
+    /**
+     * Selects the navigation interaction model: `popover` shows sub-items
+     * in a flyout menu, `tree` shows a collapsible tree structure.
+     * Note: This selects an interaction model, not just a visual variant.
+     */
+    variant?: NavigationItemGroupVariantType;
+};
+export declare const CollapsibleBehaviorList: readonly ["single", "multiple"];
+export type CollapsibleBehaviorType = (typeof CollapsibleBehaviorList)[number];
+export type CollapsibleBehaviorProps = {
+    /**
+     * To allow multiple items open at the same time or only 1 item
+     * @default 'multiple'
+     */
+    behavior?: CollapsibleBehaviorType;
+};
 export type DocumentScrollState = {
     _documentScrollListenerCallbackId?: string;
     handleDocumentScroll: (event: any, parent?: HTMLElement) => void;
@@ -564,8 +655,8 @@ export type DocumentScrollState = {
 export type PopoverState = {
     handleEscape: (event: any) => void;
     handleAutoPlacement: (parent?: HTMLElement) => void;
-    handleEnter: (parent?: HTMLElement) => void;
-    handleLeave: (event?: any) => void;
+    handleEnter: (parent?: HTMLElement, manualOpen?: boolean) => void;
+    handleLeave: (event?: any, manualOpen?: boolean) => void;
 } & DocumentScrollState;
 export interface PatternhubProps {
     /**

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

@@ -26,7 +26,12 @@ export declare const getFloatingProps: (element: HTMLElement, parent: HTMLElemen
     innerHeight: number;
     outsideYBoth: boolean;
 };
-export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement?: string) => void;
+export declare const handleFixedPopover: ({ element, parent, placement, forceAbsolute }: {
+    element: HTMLElement;
+    parent: HTMLElement;
+    placement?: string;
+    forceAbsolute?: boolean;
+}) => void;
 /**
  * Detects whether a floating element overflows the viewport edges
  * and sets `data-outside-vy` / `data-outside-vx` attributes accordingly.
@@ -40,4 +45,4 @@ export interface DBDataOutsidePair {
     vx?: 'left' | 'right';
     vy?: 'top' | 'bottom';
 }
-export declare const handleDataOutside: (el: HTMLElement) => DBDataOutsidePair;
+export declare const handleDataOutside: (el: HTMLElement) => void;

package/dist/utils/index.d.ts

@@ -21,6 +21,16 @@ export declare const hasVoiceOver: () => boolean;
  */
 export declare const isIOSSafari: () => boolean;
 export declare const delay: (fn: () => void, ms: number) => Promise<unknown>;
+/**
+ * Checks whether a CSS custom property on an element equals '1'.
+ * Useful for detecting CSS-driven boolean state (e.g. responsive breakpoints)
+ * without coupling JS to hardcoded breakpoint values.
+ *
+ * @param element - The element to read computed styles from
+ * @param property - The CSS custom property name (e.g. '--db-my-flag')
+ * @returns `true` if the trimmed property value is '1'
+ */
+export declare const hasCssFlag: (element: Element, property: string) => boolean;
 /**
  * Converts boolean-like inputs to "true" or "false" strings.
  * Handles HTML-style boolean attributes where an empty string or the

package/dist/utils/navigation.d.ts

@@ -1,10 +1,25 @@
+/**
+ * Adjusts a sub-navigation's position so it stays within the viewport.
+ * Called from _handleMouseEnter for the specific hovered item's menu.
+ * Computes a precise pixel-based transform instead of the CSS's fixed
+ * `translateY(-200%)` which overshoots for most menu heights.
+ *
+ * Only applies to menus NOT already positioned by handleFixedPopover
+ * (i.e., nested sub-navigations that use position: absolute).
+ */
+export declare const adjustNestedSubNavigationPosition: (element: HTMLElement) => void;
 export type TriangleData = {
     itemRect: DOMRect;
     parentElementWidth: number;
     subNavigationHeight: number;
     padding: number;
-    outsideVX: 'left' | 'right' | undefined;
-    outsideVY: 'top' | 'bottom' | undefined;
+    /**
+     * The direction the sub-navigation opens relative to the element.
+     * 'right' = sub-menu is to the right of the item
+     * 'left' = sub-menu is to the left of the item
+     * 'bottom' = sub-menu is below the item
+     */
+    openDirection: 'left' | 'right' | 'bottom';
 };
 export declare const isEventTargetNavigationItem: (event: unknown) => boolean;
 export declare class NavigationItemSafeTriangle {
@@ -19,14 +34,15 @@ export declare class NavigationItemSafeTriangle {
     private init;
     enableFollow(): void;
     disableFollow(): void;
-    private getTriangleTipX;
-    private getTriangleTipY;
     private hasMouseEnteredSubNavigation;
-    private getTriangleCoordinates;
-    followByMouseEvent(event: MouseEvent): void;
+    followByMouseEvent(event: {
+        clientX: number;
+        clientY: number;
+    }): void;
 }
-declare const _default: {
-    isEventTargetNavigationItem: (event: unknown) => boolean;
-    NavigationItemSafeTriangle: typeof NavigationItemSafeTriangle;
-};
-export default _default;
+export declare const handleSubNavigationPosition: ({ element, level, isPopover, vertical }: {
+    element: HTMLElement;
+    level?: number;
+    vertical?: boolean;
+    isPopover?: boolean;
+}) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/v-core-components",
-  "version": "5.1.4",
+  "version": "5.1.6-shell-11663a0",
   "type": "module",
   "description": "Vue components for @db-ux/core-components",
   "repository": {
@@ -28,21 +28,21 @@
     "dist/"
   ],
   "dependencies": {
-    "@db-ux/core-components": "5.1.4",
-    "@db-ux/core-foundations": "5.1.4"
+    "@db-ux/core-components": "5.1.6-shell-11663a0",
+    "@db-ux/core-foundations": "5.1.6-shell-11663a0"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.60.0",
+    "@playwright/experimental-ct-vue": "1.62.1",
     "@vitejs/plugin-vue": "6.0.8",
     "@vue/compiler-dom": "3.5.41",
     "cpr": "3.0.1",
     "npm-run-all2": "9.0.3",
     "replace-in-file": "9.0.0",
-    "tsx": "4.23.11",
+    "tsx": "4.23.12",
     "typescript": "5.9.3",
-    "vite": "8.2.1",
+    "vite": "8.2.2",
     "vue": "3.5.41",
-    "vue-tsc": "3.3.9"
+    "vue-tsc": "3.3.11"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",