sb-floating-panel-vue 1.0.0 → 4.0.0

package/dist/components/SbFloating.vue.d.ts

@@ -1,75 +1,28 @@
-import { Placement } from '@floating-ui/vue';
-import { CSSProperties, Ref } from 'vue';
-/**
- * Props for the SbFloating component.
- * This component renders the floating panel and (optionally) its arrow using teleport.
- */
-interface SbFloatingProps {
-    /**
-     * The ref to bind to the floating panel element.
-     */
-    floatingRef: Ref<HTMLElement | null>;
-    /**
-     * Optional ref to bind to the floating arrow element.
-     */
-    floatingArrowRef?: Ref<HTMLElement | null>;
-    /**
-     * Whether the floating panel is open (visible).
-     */
-    isOpen: boolean;
-    /**
-     * The final placement resolved by Floating UI (e.g., 'bottom-start').
-     */
-    floatingPlacement: Placement;
-    /**
-     * Computed inline styles for the floating panel.
-     */
-    floatingStyle: CSSProperties;
-    /**
-     * Computed inline styles for the floating arrow (optional).
-     */
-    floatingArrowStyle?: CSSProperties;
-    /**
-     * Optional dimension (width & height) of the floating arrow.
-     * If provided, will override default arrow size.
-     */
-    arrowDimensions?: number;
-    /**
-     * Optional z-index to apply to the floating panel and arrow.
-     */
-    zIndex?: number;
-    /**
-     * Animation name used in Vue <transition>.
-     * Supported values: 'fade', 'scale-fade', 'none'.
-     * @default 'scale-fade'
-     */
-    animation?: 'fade' | 'scale-fade' | 'none';
-    /**
-     * Duration of the transition animation in milliseconds.
-     * @default 300
-     */
-    duration?: number;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
+import { TransitionProps } from 'vue';
+import { SbFloatingProps } from '../types';
+declare var __VLS_23: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_23) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<SbFloatingProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SbFloatingProps> & Readonly<{}>, {
-    floatingArrowStyle: CSSProperties;
-    floatingArrowRef: Ref<HTMLElement | null>;
-    arrowDimensions: number;
-    zIndex: number;
-    animation: "fade" | "scale-fade" | "none";
-    duration: number;
+declare const __VLS_base: import('vue').DefineComponent<SbFloatingProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "after-enter": () => any;
+    "after-leave": () => any;
+}, string, import('vue').PublicProps, Readonly<SbFloatingProps> & Readonly<{
+    "onAfter-enter"?: (() => any) | undefined;
+    "onAfter-leave"?: (() => any) | undefined;
+}>, {
+    as: string;
+    role: string | null;
+    transition: string | TransitionProps;
+    teleportTo: string | HTMLElement;
+    teleportDisabled: boolean;
+    zIndex: string | number;
+    autoFocus: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/SbReference.vue.d.ts

@@ -1,40 +1,17 @@
-import { Ref } from 'vue';
-/**
- * Props for the SbReference component.
- * Renders the reference element for the floating panel system.
- */
-interface SbReferenceProps {
-    /**
-     * The ref to bind to the reference DOM element.
-     */
-    referenceRef: Ref<HTMLElement | null>;
-    /**
-     * HTML tag to render as the reference.
-     * Useful for accessibility and customization.
-     * @default 'button'
-     */
-    as?: 'button' | 'a' | 'div' | 'span';
-    /**
-     * Optional click handler for toggling the floating panel.
-     */
-    onClick?: () => void;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
+import { SbReferenceProps } from '../types';
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<SbReferenceProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SbReferenceProps> & Readonly<{}>, {
-    onClick: () => void;
-    as: "button" | "a" | "div" | "span";
+declare const __VLS_base: import('vue').DefineComponent<SbReferenceProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SbReferenceProps> & Readonly<{}>, {
+    as: string | import('vue').Component;
+    id: string;
+    ariaHaspopup: "dialog" | "menu" | "listbox" | "tree" | "grid" | "true" | "false";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/composables/useSbFloatingPanel.d.ts

@@ -1,81 +1,31 @@
-import { FloatingElement, Placement, Strategy } from '@floating-ui/vue';
-import { CSSProperties, Ref, ComputedRef } from 'vue';
+import { ComputedRef, CSSProperties, MaybeRefOrGetter, Ref } from 'vue';
+import { SbAlignment, SbPlacement, SbSide, SbStrategy } from '../types';
 /**
- * Configuration options for the `useSbFloatingPanel` composable.
+ * Options of the internal `useSbFloatingPanel` composable. Every option can be a value,
+ * a ref or a getter, so `SbContainer` props stay reactive.
  */
-interface FloatingSettings {
-    /**
-     * Defines the preferred placement of the floating element relative to the reference.
-     * Example: 'top', 'bottom-start', 'right-end', etc.
-     */
-    placement: Placement;
-    /**
-     * Determines the positioning strategy for the floating element.
-     * Can be either 'absolute' or 'fixed'.
-     */
-    strategy: Strategy;
-    /**
-     * Specifies the distance (in pixels) between the reference and floating elements.
-     */
-    offsetValue: number;
-    /**
-     * Enables the use of a directional arrow pointing from the floating element to the reference.
-     */
-    hasArrow?: boolean;
-    /**
-     * When enabled, synchronizes the width of the floating element to match the reference element.
-     * Useful for dropdowns or inputs.
-     */
-    hasResize?: boolean;
+export interface FloatingPanelOptions {
+    isOpen: MaybeRefOrGetter<boolean>;
+    placement: MaybeRefOrGetter<SbPlacement>;
+    strategy: MaybeRefOrGetter<SbStrategy>;
+    offset: MaybeRefOrGetter<number>;
+    padding: MaybeRefOrGetter<number>;
+    matchWidth: MaybeRefOrGetter<boolean | 'min'>;
+    hideWhenDetached: MaybeRefOrGetter<boolean>;
+}
+export interface FloatingPanel {
+    reference: Ref<HTMLElement | null>;
+    floating: Ref<HTMLElement | null>;
+    /** Positioning styles for the outer wrapper (Floating UI styles + `visibility` from `hide`). */
+    floatingStyles: ComputedRef<CSSProperties>;
+    /** Placement resolved after `flip`. */
+    placement: Readonly<Ref<SbPlacement>>;
+    side: ComputedRef<SbSide>;
+    align: ComputedRef<SbAlignment | undefined>;
+    isPositioned: Readonly<Ref<boolean>>;
+    update: () => void;
 }
 /**
- * `useSbFloatingPanel` is a composable that wraps Floating UI logic to manage
- * floating elements with optional arrow and dynamic width support.
- *
- * It provides bindings and style objects ready to apply to your `ref` elements in Vue templates.
- *
- * @param settings - Configuration options for placement, offset, and behavior.
- * @returns Bindings and utility functions to control the floating panel.
- *
- * @example
- * ```ts
- * const {
- *   reference,
- *   floating,
- *   floatingArrow,
- *   floatingPlacement,
- *   floatingStyle,
- *   floatingArrowStyle,
- *   isOpen,
- *   toggle,
- *   open,
- *   close
- * } = useSbFloatingPanel({
- *   placement: 'bottom',
- *   strategy: 'absolute',
- *   offsetValue: 10,
- *   hasArrow: true,
- *   hasResize: false
- * });
- * ```
- *
- * @example
- * ```html
- * <div ref="reference">Anchor</div>
- * <div ref="floating" v-if="isOpen">Panel</div>
- * <div ref="floatingArrow" v-if="isOpen">Arrow</div>
- * ```
+ * Wraps Floating UI for the components. Not part of the public API.
  */
-export declare function useSbFloatingPanel(settings: FloatingSettings): {
-    reference: Ref<HTMLElement | null>;
-    floating: Ref<FloatingElement | null>;
-    floatingArrow: Ref<HTMLElement | null>;
-    floatingPlacement: Ref<Placement>;
-    floatingStyle: ComputedRef<CSSProperties>;
-    floatingArrowStyle: ComputedRef<CSSProperties>;
-    isOpen: Ref<boolean>;
-    toggle: () => void;
-    open: () => void;
-    close: () => void;
-};
-export {};
+export declare function useSbFloatingPanel(options: FloatingPanelOptions): FloatingPanel;

package/dist/context.d.ts

@@ -0,0 +1,32 @@
+import { InjectionKey, Ref } from 'vue';
+import { FloatingPanel } from './composables/useSbFloatingPanel';
+import { SbTrigger } from './types';
+/**
+ * State shared by `SbContainer` with `SbReference` and `SbFloating`.
+ */
+export interface SbFloatingContext extends FloatingPanel {
+    isOpen: Readonly<Ref<boolean>>;
+    disabled: Readonly<Ref<boolean>>;
+    trigger: Readonly<Ref<SbTrigger>>;
+    floatingId: string;
+    /** Id of the mounted `SbReference`, used to name the panel with `aria-labelledby`. */
+    referenceId: Ref<string | undefined>;
+    /** `role` of the mounted `SbFloating`, used to derive `aria-haspopup` on the reference. */
+    floatingRole: Ref<string | null>;
+    /** Set when an outside press closes the panel on a focusable element, which keeps focus. */
+    skipFocusReturn: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    /** Whether an event target is inside the reference, the panel or a nested container. */
+    contains: (target: EventTarget | null) => boolean;
+    /** Registers a nested container; returns the function that unregisters it. */
+    registerChild: (child: SbFloatingContext) => () => void;
+}
+/**
+ * Panel roles that make the reference a popup trigger, with their `aria-haspopup` value.
+ * Panels with these roles are also named after the reference.
+ */
+export declare const POPUP_ROLES: Record<string, 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'>;
+export declare const sbFloatingContextKey: InjectionKey<SbFloatingContext>;
+export declare function useSbFloatingContext(component: string): SbFloatingContext;

package/dist/focus.d.ts

@@ -0,0 +1,8 @@
+/** Marks the hidden elements placed around a teleported panel to keep the Tab order. */
+export declare const FOCUS_GUARD_ATTRIBUTE = "data-sbf-focus-guard";
+/** Whether pressing `target` moves focus to it (or to a focusable ancestor). */
+export declare function isFocusable(target: EventTarget | null): boolean;
+/** Elements reachable with Tab inside `root`, in document order (focus guards excluded). */
+export declare function getTabbables(root: ParentNode): HTMLElement[];
+/** First element reachable with Tab after `anchor` in document order, skipping the excluded ones. */
+export declare function getNextTabbable(anchor: Element, exclude: (el: HTMLElement) => boolean): HTMLElement | undefined;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { useSbFloatingPanel } from './composables/useSbFloatingPanel';
 export { default as SbContainer } from './components/SbContainer.vue';
 export { default as SbReference } from './components/SbReference.vue';
 export { default as SbFloating } from './components/SbFloating.vue';
+export type { SbContainerProps, SbContainerSlotProps, SbContainerExposed, SbReferenceProps, SbFloatingProps, SbTrigger, SbPlacement, SbSide, SbAlignment, SbStrategy, } from './types';