@db-ux/v-core-components 4.12.1 → 4.13.0-shell-f221975

package/dist/index.d.ts

@@ -4,14 +4,34 @@ export * from './components/accordion-item/model.js';
 export * from './components/accordion/model.js';
 export * from './components/badge/index.js';
 export * from './components/badge/model.js';
-export * from './components/brand/index.js';
-export * from './components/brand/model.js';
 export * from './components/button/index.js';
 export * from './components/button/model.js';
 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';
@@ -27,9 +47,11 @@ export * from './components/custom-select/model.js';
 export * from './components/divider/index.js';
 export * from './components/divider/model.js';
 export * from './components/drawer/index.js';
+export * from './components/drawer-footer/index.js';
+export * from './components/drawer-footer/model.js';
+export * from './components/drawer-header/index.js';
+export * from './components/drawer-header/model.js';
 export * from './components/drawer/model.js';
-export * from './components/header/index.js';
-export * from './components/header/model.js';
 export * from './components/icon/index.js';
 export * from './components/icon/model.js';
 export * from './components/infotext/index.js';
@@ -38,14 +60,8 @@ export * from './components/input/index.js';
 export * from './components/input/model.js';
 export * from './components/link/index.js';
 export * from './components/link/model.js';
-export * from './components/navigation/index.js';
-export * from './components/navigation-item/index.js';
-export * from './components/navigation-item/model.js';
-export * from './components/navigation/model.js';
 export * from './components/notification/index.js';
 export * from './components/notification/model.js';
-export * from './components/page/index.js';
-export * from './components/page/model.js';
 export * from './components/popover/index.js';
 export * from './components/popover/model.js';
 export * from './components/radio/index.js';
@@ -54,6 +70,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,60 +14,65 @@ 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_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 {
-    'FUNCTIONAL' = "functional",
-    'REGULAR' = "regular",
-    'EXPRESSIVE' = "expressive"
+    FUNCTIONAL = "functional",
+    REGULAR = "regular",
+    EXPRESSIVE = "expressive"
 }
 export declare const DENSITIES: DENSITY[];
 export declare enum COLOR_SIMPLE {
-    'PRIMARY' = "primary"
+    PRIMARY = "primary"
 }
 export declare enum COLOR {
-    'NEUTRAL_BG_LEVEL_1' = "neutral-bg-basic-level-1",
-    'NEUTRAL_BG_LEVEL_2' = "neutral-bg-basic-level-2",
-    'NEUTRAL_BG_LEVEL_3' = "neutral-bg-basic-level-3",
-    'NEUTRAL_BG_TRANSPARENT_SEMI' = "neutral-bg-basic-transparent-semi",
-    'NEUTRAL_BG_TRANSPARENT_FULL' = "neutral-bg-basic-transparent-full",
-    'BRAND_BG_LEVEL_1' = "brand-bg-basic-level-1",
-    'BRAND_BG_LEVEL_2' = "brand-bg-basic-level-2",
-    'BRAND_BG_LEVEL_3' = "brand-bg-basic-level-3",
-    'BRAND_BG_TRANSPARENT_SEMI' = "brand-bg-basic-transparent-semi",
-    'BRAND_BG_TRANSPARENT_FULL' = "brand-bg-basic-transparent-full",
-    'SUCCESSFUL_BG_LEVEL_1' = "successful-bg-basic-level-1",
-    'SUCCESSFUL_BG_LEVEL_2' = "successful-bg-basic-level-2",
-    'SUCCESSFUL_BG_LEVEL_3' = "successful-bg-basic-level-3",
-    'SUCCESSFUL_BG_TRANSPARENT_SEMI' = "successful-bg-basic-transparent-semi",
-    'SUCCESSFUL_BG_TRANSPARENT_FULL' = "successful-bg-basic-transparent-full",
-    'CRITICAL_BG_LEVEL_1' = "critical-bg-basic-level-1",
-    'CRITICAL_BG_LEVEL_2' = "critical-bg-basic-level-2",
-    'CRITICAL_BG_LEVEL_3' = "critical-bg-basic-level-3",
-    'CRITICAL_BG_TRANSPARENT_SEMI' = "critical-bg-basic-transparent-semi",
-    'CRITICAL_BG_TRANSPARENT_Full' = "critical-bg-basic-transparent-full",
-    'WARNING_BG_LEVEL_1' = "warning-bg-basic-level-1",
-    'WARNING_BG_LEVEL_2' = "warning-bg-basic-level-2",
-    'WARNING_BG_LEVEL_3' = "warning-bg-basic-level-3",
-    'WARNING_BG_TRANSPARENT_SEMI' = "warning-bg-basic-transparent-semi",
-    'WARNING_BG_TRANSPARENT_FULL' = "warning-bg-basic-transparent-full",
-    'INFORMATIONAL_BG_LEVEL_1' = "informational-bg-basic-level-1",
-    'INFORMATIONAL_BG_LEVEL_2' = "informational-bg-basic-level-2",
-    'INFORMATIONAL_BG_LEVEL_3' = "informational-bg-basic-level-3",
-    'INFORMATIONAL_BG_TRANSPARENT_SEMI' = "informational-bg-basic-transparent-semi",
-    'INFORMATIONAL_BG_TRANSPARENT_FULL' = "informational-bg-basic-transparent-full"
+    NEUTRAL_BG_LEVEL_1 = "neutral-bg-basic-level-1",
+    NEUTRAL_BG_LEVEL_2 = "neutral-bg-basic-level-2",
+    NEUTRAL_BG_LEVEL_3 = "neutral-bg-basic-level-3",
+    NEUTRAL_BG_TRANSPARENT_SEMI = "neutral-bg-basic-transparent-semi",
+    NEUTRAL_BG_TRANSPARENT_FULL = "neutral-bg-basic-transparent-full",
+    BRAND_BG_LEVEL_1 = "brand-bg-basic-level-1",
+    BRAND_BG_LEVEL_2 = "brand-bg-basic-level-2",
+    BRAND_BG_LEVEL_3 = "brand-bg-basic-level-3",
+    BRAND_BG_TRANSPARENT_SEMI = "brand-bg-basic-transparent-semi",
+    BRAND_BG_TRANSPARENT_FULL = "brand-bg-basic-transparent-full",
+    SUCCESSFUL_BG_LEVEL_1 = "successful-bg-basic-level-1",
+    SUCCESSFUL_BG_LEVEL_2 = "successful-bg-basic-level-2",
+    SUCCESSFUL_BG_LEVEL_3 = "successful-bg-basic-level-3",
+    SUCCESSFUL_BG_TRANSPARENT_SEMI = "successful-bg-basic-transparent-semi",
+    SUCCESSFUL_BG_TRANSPARENT_FULL = "successful-bg-basic-transparent-full",
+    CRITICAL_BG_LEVEL_1 = "critical-bg-basic-level-1",
+    CRITICAL_BG_LEVEL_2 = "critical-bg-basic-level-2",
+    CRITICAL_BG_LEVEL_3 = "critical-bg-basic-level-3",
+    CRITICAL_BG_TRANSPARENT_SEMI = "critical-bg-basic-transparent-semi",
+    CRITICAL_BG_TRANSPARENT_Full = "critical-bg-basic-transparent-full",
+    WARNING_BG_LEVEL_1 = "warning-bg-basic-level-1",
+    WARNING_BG_LEVEL_2 = "warning-bg-basic-level-2",
+    WARNING_BG_LEVEL_3 = "warning-bg-basic-level-3",
+    WARNING_BG_TRANSPARENT_SEMI = "warning-bg-basic-transparent-semi",
+    WARNING_BG_TRANSPARENT_FULL = "warning-bg-basic-transparent-full",
+    INFORMATIONAL_BG_LEVEL_1 = "informational-bg-basic-level-1",
+    INFORMATIONAL_BG_LEVEL_2 = "informational-bg-basic-level-2",
+    INFORMATIONAL_BG_LEVEL_3 = "informational-bg-basic-level-3",
+    INFORMATIONAL_BG_TRANSPARENT_SEMI = "informational-bg-basic-transparent-semi",
+    INFORMATIONAL_BG_TRANSPARENT_FULL = "informational-bg-basic-transparent-full"
 }
 export declare const COLORS: COLOR[];
 export declare const COLORS_SIMPLE: COLOR_SIMPLE[];
 export declare enum SEMANTIC {
-    'CRITICAL' = "critical",
-    'INFORMATIONAL' = "informational",
-    'WARNING' = "warning",
-    'SUCCESSFUL' = "successful"
+    NEUTRAL = "neutral",
+    CRITICAL = "critical",
+    INFORMATIONAL = "informational",
+    WARNING = "warning",
+    SUCCESSFUL = "successful"
 }
 export declare const SEMANTICS: SEMANTIC[];
 export declare const DEFAULT_VIEWPORT: {

package/dist/shared/figma.d.ts

@@ -1,4 +1,4 @@
-/** Base for all Figma prop definitions. */
+/** @public Base for all Figma prop definitions. */
 export type FigmaBaseProp = {
     /** The prop type discriminator. */
     type: string;
@@ -10,14 +10,14 @@ export type FigmaBaseProp = {
      */
     layer?: string;
 };
-/** A nested Figma instance swap prop (e.g. icon components). */
+/** @public A nested Figma instance swap prop (e.g. icon components). */
 export type FigmaInstanceProp = FigmaBaseProp & {
     /** Use 'instance' for generic instance swaps, 'iconSwap' for icon instances that resolve to a string name. */
     type: 'instance' | 'iconSwap';
     /** The Figma property key of the instance swap (e.g. '🔄 Icon Small'). */
     key: string;
 };
-/** An enum prop mapping Figma variant values to code values. */
+/** @public An enum prop mapping Figma variant values to code values. */
 export type FigmaEnumProp = FigmaBaseProp & {
     type: 'enum';
     /** The Figma property key (e.g. 'Size', '💻 Variant'). */
@@ -31,7 +31,7 @@ export type FigmaEnumProp = FigmaBaseProp & {
      */
     guardKey?: string;
 };
-/** A simple scalar prop. */
+/** @public A simple scalar prop. */
 export type FigmaSimpleProp = FigmaBaseProp & {
     /**
      * - 'string': maps to instance.getString()
@@ -50,6 +50,7 @@ export type FigmaSimpleProp = FigmaBaseProp & {
     guardKeys?: string[];
 };
 /**
+ * @public
  * Reads a text property from the first code-connected child instance.
  * Generates: instance.findConnectedInstances((node) => node.hasCodeConnect())
  *   .filter((node) => node.type === 'INSTANCE')
@@ -64,6 +65,7 @@ export type FigmaConnectedTextProp = FigmaBaseProp & {
     index?: number;
 };
 /**
+ * @public
  * Generates a single message variable from a connected instance's text,
  * then maps it to different attribute names based on another prop's value.
  *
@@ -80,6 +82,7 @@ export type FigmaValidationMessageProp = FigmaBaseProp & {
     map: Record<string, string>;
 };
 /**
+ * @public
  * Renders all direct code-connected child instances as children.
  * Generates: instance.findConnectedInstances((node) => node.hasCodeConnect())
  *   .flatMap((child) => child.executeTemplate().example)
@@ -94,6 +97,7 @@ export type FigmaConnectedInstancesProp = FigmaBaseProp & {
     filter?: string;
 };
 /**
+ * @public
  * Renders code-connected child instances recursively, filtered by a nestedImports string.
  * Uses traverseInstances: true to find all descendants, then filters by checking whether
  * the instance's template nestedImports contains the given filter string.
@@ -112,6 +116,7 @@ export type FigmaNestedConnectedInstancesProp = FigmaBaseProp & {
     filter?: string;
 };
 /**
+ * @public
  * Maps multiple boolean Figma properties to a single enum code value.
  * The first property whose value is `true` wins; if none match, the prop is omitted.
  *
@@ -127,6 +132,7 @@ export type FigmaBooleanToEnumProp = FigmaBaseProp & {
     }>;
 };
 /**
+ * @public
  * Finds all nested instances matching a filter and maps their properties to an array.
  * Each matched instance produces one object in the array, with keys defined by `props`.
  *
@@ -141,6 +147,7 @@ export type FigmaNestedInstancesToArrayProp = FigmaBaseProp & {
     props: Record<string, FigmaProp>;
 };
 /**
+ * @public
  * Wraps an iconSwap prop so it is only rendered when a boolean Figma property is enabled.
  * Generates: let icon = ''; if (getPropertyValue(guardKey) === true || getPropertyValue(guardKey) === 'True') { icon = `\n\t\ticon="${iconLeading}"` }
  */

package/dist/shared/model.d.ts

@@ -25,6 +25,18 @@ export interface GlobalProps {
      */
     propOverrides?: PropOverridesType;
 }
+export type StartSlotProps = {
+    /**
+     * Slot for start content, for example add a custom component between an icon and a label.
+     */
+    startSlot?: any;
+};
+export type EndSlotProps = {
+    /**
+     * Slot for end content, for example add a custom component between an icon and a label.
+     */
+    endSlot?: any;
+};
 export type PropOverridesType = Pick<GlobalProps, 'id'>;
 export type GlobalState = {
     _id?: string;
@@ -92,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"];
@@ -237,11 +253,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.
      */
@@ -250,7 +268,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.
@@ -521,11 +539,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
+     */
+    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 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 = {
     /**
@@ -537,10 +577,72 @@ 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"];
+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;
-    _observer?: IntersectionObserver;
+    _intersectionObserverCallbackId?: string;
+    _resizeObserverCallbackId?: string;
 };
 export type PopoverState = {
     handleEscape: (event: any) => void;

package/dist/utils/abstract-document-listener.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Generic base class for singleton document event listeners.
+ * Manages a shared set of callbacks dispatched when a document-level
+ * event fires.
+ *
+ * Subclasses own their static state (callbacks, instance) and expose
+ * it via the abstract accessor methods below.
+ *
+ * @template TEvent - The event type passed to callbacks (Event, MouseEvent, etc.)
+ */
+export declare abstract class AbstractDocumentListener<TEvent = any> {
+    /**
+     * Subclasses must return a reference to their own static callbacks store.
+     */
+    protected abstract getCallbacks(): Record<string, (event: TEvent) => void>;
+    addCallback(callback: (event: TEvent) => void): string;
+    removeCallback(id: string): void;
+}

package/dist/utils/abstract-observer-listener.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Generic base class for singleton observer listeners.
+ * Uses a Map<Element, Map<id, callback>> for O(1) element lookup in the
+ * observer handler — avoids quadratic scanning when many elements are observed.
+ *
+ * Subclasses own their static state (callbacksByElement, idToElement, observer,
+ * instance) and expose it via the abstract accessor methods below.
+ *
+ * @template TObserver - The observer type (ResizeObserver, IntersectionObserver, etc.)
+ * @template TEntry - The entry type passed to the callback
+ */
+export declare abstract class AbstractObserverListener<TObserver, TEntry> {
+    /**
+     * Returns a Map keyed by Element, where each value is a Map of id → callback.
+     */
+    protected abstract getCallbacksByElement(): Map<Element, Map<string, (entry: TEntry) => void>>;
+    /**
+     * Returns a Map of id → Element for reverse lookup during unobserve.
+     */
+    protected abstract getIdToElement(): Map<string, Element>;
+    /**
+     * Subclasses must return their own static observer instance (or null).
+     */
+    protected abstract getObserver(): TObserver | null;
+    /**
+     * Start observing an element via the underlying observer API.
+     */
+    protected abstract observeElement(observer: TObserver, element: Element): void;
+    /**
+     * Stop observing an element via the underlying observer API.
+     */
+    protected abstract unobserveElement(observer: TObserver, element: Element): void;
+    observe(element: Element, callback: (entry: TEntry) => void): string | undefined;
+    unobserve(id: string): void;
+    /**
+     * Called by subclass observer handlers to dispatch callbacks for an entry.
+     */
+    protected dispatchEntry(element: Element, entry: TEntry): void;
+}

package/dist/utils/document-click-listener.d.ts

@@ -1,8 +1,8 @@
-export declare class DocumentClickListener {
+import { AbstractDocumentListener } from './abstract-document-listener.js';
+export declare class DocumentClickListener extends AbstractDocumentListener {
     private static callbacks;
     private static _instance;
     private static runCallbacks;
     constructor();
-    addCallback(callback: (event: any) => void): string;
-    removeCallback(id: string): void;
+    protected getCallbacks(): Record<string, (event: any) => void>;
 }

package/dist/utils/document-scroll-listener.d.ts

@@ -1,9 +1,9 @@
-export declare class DocumentScrollListener {
+import { AbstractDocumentListener } from './abstract-document-listener.js';
+export declare class DocumentScrollListener extends AbstractDocumentListener {
     private static callbacks;
     private static _instance;
     private static runCallbacks;
     private ticking;
     constructor();
-    addCallback(callback: (event: any) => void): string;
-    removeCallback(id: string): void;
+    protected getCallbacks(): Record<string, (event: any) => void>;
 }

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

@@ -1,8 +1,3 @@
-export interface DBDataOutsidePair {
-    vx?: 'left' | 'right';
-    vy?: 'top' | 'bottom';
-}
-export declare const handleDataOutside: (el: HTMLElement) => DBDataOutsidePair;
 export declare const handleFixedDropdown: (element: HTMLElement, parent: HTMLElement, placement: string) => void;
 export declare const getFloatingProps: (element: HTMLElement, parent: HTMLElement, placement: string) => {
     top: number;
@@ -16,5 +11,33 @@ export declare const getFloatingProps: (element: HTMLElement, parent: HTMLElemen
     correctedPlacement: string;
     innerWidth: number;
     innerHeight: number;
+    outsideYBoth?: 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;
 };
-export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement: string) => void;
+export declare const handleFixedPopover: (element: HTMLElement, parent: HTMLElement, placement?: string) => void;
+/**
+ * Detects whether a floating element overflows the viewport edges
+ * and sets `data-outside-vy` / `data-outside-vx` attributes accordingly.
+ * CSS rules can use these attributes to flip/reposition the element.
+ *
+ * If the element was already flipped (has existing data-outside-* attributes),
+ * it checks whether the flipped position would overflow on the opposite side
+ * using the parent's rect as reference, preventing infinite flip-flop.
+ */
+export interface DBDataOutsidePair {
+    vx?: 'left' | 'right';
+    vy?: 'top' | 'bottom';
+}
+export declare const handleDataOutside: (el: HTMLElement) => DBDataOutsidePair;

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
@@ -60,6 +70,7 @@ export declare const stringPropVisible: (givenString?: string, showString?: bool
 export declare const getSearchInput: (element: HTMLElement) => HTMLInputElement | null;
 export declare const getOptionKey: (option: {
     id?: string;
+    label?: string;
     value?: string | number | string[] | undefined;
 }, prefix: string) => string;
 export declare const isKeyboardEvent: <T>(event?: ClickEvent<T> | GeneralKeyboardEvent<T>) => event is GeneralKeyboardEvent<T>;

package/dist/utils/intersection-observer-listener.d.ts

@@ -0,0 +1,15 @@
+import { AbstractObserverListener } from './abstract-observer-listener.js';
+type IntersectionCallback = (entry: IntersectionObserverEntry) => void;
+export declare class IntersectionObserverListener extends AbstractObserverListener<IntersectionObserver, IntersectionObserverEntry> {
+    private static _instance;
+    private static callbacksByElement;
+    private static idToElement;
+    private static observer;
+    constructor();
+    protected getCallbacksByElement(): Map<Element, Map<string, IntersectionCallback>>;
+    protected getIdToElement(): Map<string, Element>;
+    protected getObserver(): IntersectionObserver | null;
+    protected observeElement(observer: IntersectionObserver, element: Element): void;
+    protected unobserveElement(observer: IntersectionObserver, element: Element): void;
+}
+export {};

package/dist/utils/navigation.d.ts

@@ -3,8 +3,13 @@ export type TriangleData = {
     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 +24,10 @@ 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: HTMLElement, level?: number, vertical?: boolean) => void;

package/dist/utils/resize-observer-listener.d.ts

@@ -0,0 +1,15 @@
+import { AbstractObserverListener } from './abstract-observer-listener.js';
+type ResizeCallback = (entry: ResizeObserverEntry) => void;
+export declare class ResizeObserverListener extends AbstractObserverListener<ResizeObserver, ResizeObserverEntry> {
+    private static _instance;
+    private static callbacksByElement;
+    private static idToElement;
+    private static observer;
+    constructor();
+    protected getCallbacksByElement(): Map<Element, Map<string, ResizeCallback>>;
+    protected getIdToElement(): Map<string, Element>;
+    protected getObserver(): ResizeObserver | null;
+    protected observeElement(observer: ResizeObserver, element: Element): void;
+    protected unobserveElement(observer: ResizeObserver, element: Element): void;
+}
+export {};