@yoyaflow/yoya-ui 0.1.0

package/types/layout.d.ts

@@ -0,0 +1,429 @@
+import type {
+  ChildInput,
+  ElementFactory,
+  ElementOptions,
+  SetupCallback,
+  SetupInput,
+  StyleValue
+} from './core.js';
+import type { HtmlElementNode } from './html.js';
+
+// ---------------------------------------------------------------------------
+// Layout option types
+// ---------------------------------------------------------------------------
+
+export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type FlexWrap = boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+export type Length = string | number;
+
+export interface FlexOptions {
+  align?: string;
+  direction?: FlexDirection;
+  wrap?: FlexWrap;
+  gap?: Length;
+  justify?: string;
+}
+
+export interface GridOptions {
+  gap?: Length;
+  autoFlow?: string;
+  areas?: string;
+  columns?: number | string;
+  rows?: number | string;
+}
+
+export interface ContainerOptions {
+  maxWidth?: Length;
+  padding?: Length;
+  paddingInline?: Length;
+}
+
+export interface SpacerOptions {
+  size?: Length;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export interface DividerOptions {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export interface ColProps {
+  span?: number;
+  offset?: number;
+  push?: number;
+  pull?: number;
+}
+
+export type ColBreakpoint = number | ColProps;
+
+export interface ColOptions extends ColProps {
+  gutter?: Length;
+  xs?: ColBreakpoint;
+  sm?: ColBreakpoint;
+  md?: ColBreakpoint;
+  lg?: ColBreakpoint;
+  xl?: ColBreakpoint;
+}
+
+export interface RowOptions {
+  gutter?: Length;
+  align?: string;
+  justify?: string;
+  wrap?: FlexWrap;
+}
+
+export interface ResponsiveGridBreakpoint {
+  minWidth: number | string;
+  columns: number;
+}
+
+export interface ResponsiveGridOptions {
+  gap?: Length;
+  minColumnWidth?: Length;
+  breakpoints?: ResponsiveGridBreakpoint[] | Record<string, number>;
+}
+
+export interface VBodyOptions {
+  background?: string;
+  maxWidth?: Length;
+  padding?: Length;
+  gap?: Length;
+  minHeight?: Length;
+  content?: ChildInput;
+  children?: ChildInput;
+}
+
+export interface ContainerLayoutOptions {
+  direction?: FlexDirection;
+  gap?: Length;
+  viewport?: boolean;
+  fill?: boolean;
+  scrollable?: boolean;
+}
+
+export interface MobileLayoutOptions {
+  align?: string;
+  wrap?: FlexWrap;
+  justify?: string;
+  direction?: FlexDirection;
+  mobileDirection?: FlexDirection;
+  gap?: Length;
+  mobileGap?: Length;
+  breakpoint?: number;
+  asideWidth?: Length;
+  drawer?: boolean;
+  viewport?: boolean;
+  safeArea?: boolean;
+}
+
+export interface RegionOptions {
+  height?: Length;
+  width?: Length;
+  size?: Length;
+}
+
+export type SplitPanelDirection = 'horizontal' | 'vertical';
+
+/** Split panel with a draggable divider. */
+export class VSplitPanel extends HtmlElementNode {
+  direction(): SplitPanelDirection;
+  direction(value: SplitPanelDirection): VSplitPanel;
+  size(): string;
+  size(value: Length): VSplitPanel;
+  minSize(): number;
+  minSize(value: number): VSplitPanel;
+  reset(): VSplitPanel;
+  first(setup: ChildInput | SetupCallback<HtmlElementNode>): VSplitPanel;
+  second(setup: ChildInput | SetupCallback<HtmlElementNode>): VSplitPanel;
+}
+
+// ---------------------------------------------------------------------------
+// Layout node interfaces
+// ---------------------------------------------------------------------------
+
+/** 24-column row container with gutter/justify/align/wrap helpers. */
+export interface VRow extends HtmlElementNode {
+  gutter(): Length | null;
+  gutter(value: Length): VRow;
+  justify(): StyleValue | undefined;
+  justify(value: string): VRow;
+  align(): StyleValue | undefined;
+  align(value: string): VRow;
+  wrap(): StyleValue | undefined;
+  wrap(value: FlexWrap | null): VRow;
+  child(...children: ChildInput[]): this;
+}
+
+/** Responsive 24-column cell: span/offset/push/pull with breakpoints. */
+export interface VCol extends HtmlElementNode {
+  refresh(): VCol;
+  span(): number;
+  span(value: number): VCol;
+  offset(): number;
+  offset(value: number): VCol;
+  push(): number;
+  push(value: number): VCol;
+  pull(): number;
+  pull(value: number): VCol;
+  gutter(): Length | null;
+  gutter(value: Length): VCol;
+}
+
+/** Responsive grid that swaps column counts at breakpoints. */
+export interface ResponsiveGrid extends HtmlElementNode {
+  refresh(): ResponsiveGrid;
+  minColumnWidth(): string;
+  minColumnWidth(value: Length): ResponsiveGrid;
+  breakpoints(): ResponsiveGridBreakpoint[];
+  breakpoints(value: ResponsiveGridBreakpoint[] | Record<string, number>): ResponsiveGrid;
+}
+
+/** Page body shell with themed defaults and a content slot. */
+export interface VBody extends HtmlElementNode {
+  background(): StyleValue | undefined;
+  background(value: string): VBody;
+  maxWidth(): StyleValue | undefined;
+  maxWidth(value: Length): VBody;
+  padding(): StyleValue | undefined;
+  padding(value: Length): VBody;
+  gap(): StyleValue | undefined;
+  gap(value: Length): VBody;
+  minHeight(): StyleValue | undefined;
+  minHeight(value: Length): VBody;
+  content(): HtmlElementNode;
+  content(value: ChildInput | SetupCallback<HtmlElementNode>): VBody;
+  child(...children: ChildInput[]): this;
+}
+
+/** Flex container with viewport/fill/scrollable/direction helpers. */
+export interface VContainer extends HtmlElementNode {
+  viewport(): boolean;
+  viewport(value?: boolean): VContainer;
+  fill(): boolean;
+  fill(value?: boolean): VContainer;
+  scrollable(): boolean;
+  scrollable(value?: boolean): VContainer;
+  direction(): FlexDirection;
+  direction(value: FlexDirection): VContainer;
+  child(...children: ChildInput[]): this;
+}
+
+/** Responsive layout shell with an aside drawer for small screens. */
+export interface MobileLayout extends HtmlElementNode {
+  refresh(): MobileLayout;
+  breakpoint(): number;
+  breakpoint(value: number): MobileLayout;
+  direction(): FlexDirection;
+  direction(desktop: FlexDirection, mobile?: FlexDirection): MobileLayout;
+  mobileDirection(): FlexDirection;
+  mobileDirection(value: FlexDirection): MobileLayout;
+  gap(): Length;
+  gap(desktop: Length, mobile?: Length): MobileLayout;
+  mobileGap(): Length;
+  mobileGap(value: Length): MobileLayout;
+  asideWidth(): Length;
+  asideWidth(value: Length): MobileLayout;
+  viewport(): boolean;
+  viewport(value?: boolean): MobileLayout;
+  safeArea(): boolean;
+  safeArea(value?: boolean): MobileLayout;
+  drawer(): boolean;
+  drawer(value?: boolean): MobileLayout;
+  asideOpen(): boolean;
+  asideOpen(value: boolean): MobileLayout;
+  openAside(): MobileLayout;
+  closeAside(): MobileLayout;
+  toggleAside(): MobileLayout;
+  mobile(): boolean;
+  child(...children: ChildInput[]): this;
+}
+
+/** Sticky header/footer region. */
+export interface VHeader extends HtmlElementNode {
+  sticky(): boolean;
+  sticky(value?: boolean): VHeader;
+}
+
+/** Scrollable aside region. */
+export interface VAside extends HtmlElementNode {
+  scrollable(): boolean;
+  scrollable(value?: boolean): VAside;
+}
+
+/** Main scrollable region. */
+export interface VMain extends HtmlElementNode {
+  scrollable(): boolean;
+  scrollable(value?: boolean): VMain;
+}
+
+/** Sticky footer region. */
+export interface VFooter extends HtmlElementNode {
+  sticky(): boolean;
+  sticky(value?: boolean): VFooter;
+}
+
+/** Spacer with optional size and orientation. */
+export interface Spacer extends HtmlElementNode {
+  size?: Length;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+/** Divider separator. */
+export interface Divider extends HtmlElementNode {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+// ---------------------------------------------------------------------------
+// Factories
+// ---------------------------------------------------------------------------
+
+export interface LayoutFactory<N extends HtmlElementNode, O> extends ElementFactory<N> {
+  (options: O, callback?: SetupCallback<N>): N;
+}
+
+/** Flex container (display: flex). */
+export const flex: LayoutFactory<HtmlElementNode, FlexOptions>;
+/** Column flex stack. */
+export const stack: LayoutFactory<HtmlElementNode, FlexOptions>;
+/** Vertical stack (alias of stack). */
+export const vstack: LayoutFactory<HtmlElementNode, FlexOptions>;
+/** Horizontal stack. */
+export const hstack: LayoutFactory<HtmlElementNode, FlexOptions>;
+/** Centered flex container. */
+export const center: LayoutFactory<HtmlElementNode, FlexOptions>;
+
+/** CSS grid container. */
+export const grid: LayoutFactory<HtmlElementNode, GridOptions>;
+/** Responsive grid with breakpoints. */
+export const responsiveGrid: LayoutFactory<ResponsiveGrid, ResponsiveGridOptions>;
+
+/** 24-column row container. */
+export const vRow: LayoutFactory<VRow, RowOptions>;
+/** 24-column cell with responsive breakpoints. */
+export const vCol: LayoutFactory<VCol, ColOptions>;
+
+/** Page body shell with themed surface defaults. */
+export const vBody: LayoutFactory<VBody, VBodyOptions>;
+/** Creates a vBody page and optionally binds it to a target. */
+export function createVBodyPage(
+  setup?: SetupInput<VBody> | null,
+  target?: string | ParentNode
+): VBody;
+
+/** Max-width centered container. */
+export const container: LayoutFactory<HtmlElementNode, ContainerOptions>;
+/** Flex container with viewport/fill/scrollable helpers. */
+export const vContainer: LayoutFactory<VContainer, ContainerLayoutOptions>;
+
+/** Responsive desktop/mobile layout with aside drawer. */
+export const mobileLayout: LayoutFactory<MobileLayout, MobileLayoutOptions>;
+/** Alias of mobileLayout. */
+export const vMobileLayout: typeof mobileLayout;
+
+/** Header region with sticky support. */
+export const vHeader: LayoutFactory<VHeader, RegionOptions>;
+/** Aside region with scrollable support. */
+export const vAside: LayoutFactory<VAside, RegionOptions>;
+/** Main region with scrollable support. */
+export const vMain: LayoutFactory<VMain, RegionOptions>;
+/** Footer region with sticky support. */
+export const vFooter: LayoutFactory<VFooter, RegionOptions>;
+
+/** Flexible spacer. */
+export const spacer: LayoutFactory<Spacer, SpacerOptions>;
+/** Divider separator. */
+export const divider: LayoutFactory<Divider, DividerOptions>;
+
+/** Split panel with a draggable divider. */
+export const vSplitPanel: ElementFactory<VSplitPanel> & {
+  (first?: SetupInput<VSplitPanel> | null, callback?: SetupCallback<VSplitPanel>): VSplitPanel;
+};
+
+// ---------------------------------------------------------------------------
+// Theme shell
+// ---------------------------------------------------------------------------
+
+/**
+ * Themed generic container: background, border, radius and text color driven
+ * by --yoya-* tokens, with scroll and background-opacity control.
+ */
+export class VThemeShell extends HtmlElementNode {
+  /** Virtual mode renders the shell's styles onto its single child instead of its own DOM node. */
+  virtual(next?: boolean): VThemeShell;
+  background(): StyleValue | undefined;
+  background(value: string | null): VThemeShell;
+  backgroundOpacity(alpha: number | string): VThemeShell;
+  radius(): StyleValue | undefined;
+  radius(value: string | number | null): VThemeShell;
+  border(): StyleValue | undefined;
+  border(value: string | null): VThemeShell;
+  borderColor(): StyleValue | undefined;
+  borderColor(value: string | null): VThemeShell;
+  scrollable(next?: boolean): VThemeShell;
+}
+
+/** Creates a themed shell container. */
+export const vThemeShell: ElementFactory<VThemeShell>;
+
+/** Parent-shortcut surface merged onto HtmlElementNode. */
+export interface LayoutParentShortcuts {
+  flex(
+    first?: SetupInput<HtmlElementNode> | null,
+    callback?: SetupCallback<HtmlElementNode>
+  ): HtmlElementNode;
+  stack(
+    first?: SetupInput<HtmlElementNode> | null,
+    callback?: SetupCallback<HtmlElementNode>
+  ): HtmlElementNode;
+  vstack(
+    first?: SetupInput<HtmlElementNode> | null,
+    callback?: SetupCallback<HtmlElementNode>
+  ): HtmlElementNode;
+  hstack(
+    first?: SetupInput<HtmlElementNode> | null,
+    callback?: SetupCallback<HtmlElementNode>
+  ): HtmlElementNode;
+  center(
+    first?: SetupInput<HtmlElementNode> | null,
+    callback?: SetupCallback<HtmlElementNode>
+  ): HtmlElementNode;
+  grid(
+    first?: SetupInput<HtmlElementNode> | null,
+    callback?: SetupCallback<HtmlElementNode>
+  ): HtmlElementNode;
+  responsiveGrid(
+    first?: SetupInput<ResponsiveGrid> | null,
+    callback?: SetupCallback<ResponsiveGrid>
+  ): ResponsiveGrid;
+  vRow(first?: SetupInput<VRow> | null, callback?: SetupCallback<VRow>): VRow;
+  vCol(first?: SetupInput<VCol> | null, callback?: SetupCallback<VCol>): VCol;
+  vBody(first?: SetupInput<VBody> | null, callback?: SetupCallback<VBody>): VBody;
+  container(
+    first?: SetupInput<HtmlElementNode> | null,
+    callback?: SetupCallback<HtmlElementNode>
+  ): HtmlElementNode;
+  vContainer(
+    first?: SetupInput<VContainer> | null,
+    callback?: SetupCallback<VContainer>
+  ): VContainer;
+  mobileLayout(
+    first?: SetupInput<MobileLayout> | null,
+    callback?: SetupCallback<MobileLayout>
+  ): MobileLayout;
+  vMobileLayout(
+    first?: SetupInput<MobileLayout> | null,
+    callback?: SetupCallback<MobileLayout>
+  ): MobileLayout;
+  vHeader(first?: SetupInput<VHeader> | null, callback?: SetupCallback<VHeader>): VHeader;
+  vAside(first?: SetupInput<VAside> | null, callback?: SetupCallback<VAside>): VAside;
+  vMain(first?: SetupInput<VMain> | null, callback?: SetupCallback<VMain>): VMain;
+  vFooter(first?: SetupInput<VFooter> | null, callback?: SetupCallback<VFooter>): VFooter;
+  spacer(first?: SetupInput<Spacer> | null, callback?: SetupCallback<Spacer>): Spacer;
+  divider(first?: SetupInput<Divider> | null, callback?: SetupCallback<Divider>): Divider;
+  vSplitPanel(
+    first?: SetupInput<VSplitPanel> | null,
+    callback?: SetupCallback<VSplitPanel>
+  ): VSplitPanel;
+}
+
+export type { ElementOptions, SetupInput };

package/types/navigation.d.ts

@@ -0,0 +1,275 @@
+import type {
+  ChildInput,
+  ElementFactory,
+  ElementOptions,
+  SetupCallback,
+  SetupInput
+} from './core.js';
+import type { HtmlElementNode } from './html.js';
+
+export type MenuOrientation = 'vertical' | 'horizontal';
+export type StepStatus = 'process' | 'finish' | 'error';
+export type StepDirection = 'horizontal' | 'vertical';
+export type StepSize = 'small' | 'default';
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsVariant = 'line' | 'card' | 'pills';
+export type TabsSize = 'default' | 'large' | 'small';
+
+/** Anchor navigation with scroll tracking. */
+export class VAnchor extends HtmlElementNode {
+  ariaLabel(content: ChildInput): VAnchor;
+  offset(): number;
+  offset(value: number): VAnchor;
+  target(): string;
+  target(value: string | Element): VAnchor;
+  items(value: Array<string | VAnchorItem | AnchorItemOptions>): VAnchor;
+  child(...children: ChildInput[]): this;
+  active(): string;
+  active(value: string): VAnchor;
+  activeHref(): string;
+  activeHref(value: string): VAnchor;
+}
+
+export interface AnchorItemOptions {
+  title?: ChildInput;
+  href?: string;
+  children?: Array<string | VAnchorItem | AnchorItemOptions>;
+  [key: string]: any;
+}
+
+export class VAnchorItem extends HtmlElementNode {
+  title(content?: ChildInput): this;
+  text(content?: ChildInput): this;
+  label(content?: ChildInput): this;
+  href(value: string): VAnchorItem;
+  nested(setup: SetupInput<HtmlElementNode>): VAnchorItem;
+  subItems(setup: SetupInput<HtmlElementNode>): VAnchorItem;
+  active(value?: boolean): VAnchorItem;
+}
+
+/** Breadcrumb navigation. */
+export class VBreadcrumb extends HtmlElementNode {
+  ariaLabel(content: ChildInput): VBreadcrumb;
+  separator(content: ChildInput): VBreadcrumb;
+  items(value: Array<string | VBreadcrumbItem | BreadcrumbItemOptions>): VBreadcrumb;
+  child(...children: ChildInput[]): this;
+}
+
+export interface BreadcrumbItemOptions {
+  label?: ChildInput;
+  href?: string;
+  active?: boolean;
+  [key: string]: any;
+}
+
+export class VBreadcrumbItem extends HtmlElementNode {
+  label(content?: ChildInput): this;
+  text(content?: ChildInput): this;
+  content(content: ChildInput): VBreadcrumbItem;
+  href(value: string): VBreadcrumbItem;
+  to(value: string): VBreadcrumbItem;
+  active(value?: boolean): VBreadcrumbItem;
+  current(value?: boolean): VBreadcrumbItem;
+}
+
+/** Menu container with keyboard navigation. */
+export class VMenu extends HtmlElementNode {
+  orientation(): MenuOrientation;
+  orientation(value?: MenuOrientation): VMenu;
+  child(...children: ChildInput[]): this;
+  horizontal(): VMenu;
+  vertical(): VMenu;
+}
+
+/** Menu group label. */
+export class VMenuDivider extends HtmlElementNode {}
+
+/** Menu item with label/icon/shortcut/state helpers. */
+export class VMenuItem extends HtmlElementNode {
+  text(content?: ChildInput): this;
+  label(content?: ChildInput): this;
+  content(content: ChildInput): VMenuItem;
+  icon(content: ChildInput): VMenuItem;
+  shortcut(content: ChildInput): VMenuItem;
+  active(value?: boolean): VMenuItem;
+  danger(value?: boolean): VMenuItem;
+  disabled(value?: boolean): VMenuItem;
+  hoverable(value?: boolean): VMenuItem;
+}
+
+/** Menu group with an optional label. */
+export class VMenuGroup extends HtmlElementNode {
+  label(content?: ChildInput): this;
+  title(content?: ChildInput): this;
+  child(...children: ChildInput[]): this;
+}
+
+/** Collapsible sub-menu. */
+export class VSubMenu extends HtmlElementNode {
+  trigger(): HtmlElementNode;
+  trigger(setup: SetupInput<HtmlElementNode>): VSubMenu;
+  label(content?: ChildInput): this;
+  text(content?: ChildInput): this;
+  menuContent(): HtmlElementNode;
+  menuContent(setup: SetupInput<HtmlElementNode>): VSubMenu;
+  inline(value?: boolean): VSubMenu;
+  disabled(value?: boolean): VSubMenu;
+  open(value?: boolean): VSubMenu;
+  close(): VSubMenu;
+  toggle(): VSubMenu;
+}
+
+/** Collapsible sidebar shell. */
+export class VSidebar extends HtmlElementNode {
+  title(content?: ChildInput): this;
+  ariaLabel(content: ChildInput): VSidebar;
+  menuContent(): HtmlElementNode;
+  menuContent(setup: SetupInput<HtmlElementNode>): VSidebar;
+  collapsed(value?: boolean): VSidebar;
+  toggle(): VSidebar;
+  responsive(query?: string): VSidebar;
+}
+
+/** Top navigation bar. */
+export class VNavbar extends HtmlElementNode {
+  ariaLabel(content: ChildInput): VNavbar;
+  sticky(value?: boolean): VNavbar;
+  title(content?: ChildInput): this;
+  subtitle(content: ChildInput): VNavbar;
+  brand(setup: SetupInput<HtmlElementNode>): VNavbar;
+  menuContent(setup: SetupInput<HtmlElementNode>): VNavbar;
+  actions(setup: SetupInput<HtmlElementNode>): VNavbar;
+}
+
+export interface StepItemOptions {
+  title?: ChildInput;
+  description?: ChildInput;
+  icon?: ChildInput;
+  status?: StepStatus;
+  [key: string]: any;
+}
+
+/** Step indicator. */
+export class VStep extends HtmlElementNode {
+  title(content?: ChildInput): this;
+  text(content?: ChildInput): this;
+  description(content: ChildInput): VStep;
+  desc(content: ChildInput): VStep;
+  icon(content: ChildInput): VStep;
+  status(): StepStatus | null;
+  status(value: StepStatus | null): VStep;
+}
+
+/** Step progress list. */
+export class VSteps extends HtmlElementNode {
+  current(): number;
+  current(value: number): VSteps;
+  status(): StepStatus;
+  status(value: StepStatus): VSteps;
+  direction(): StepDirection;
+  direction(value: StepDirection): VSteps;
+  size(): StepSize;
+  size(value: StepSize): VSteps;
+  items(value: Array<string | VStep | StepItemOptions>): VSteps;
+  next(): VSteps;
+  prev(): VSteps;
+  child(...children: ChildInput[]): this;
+}
+
+export interface TabItemOptions {
+  key?: string;
+  label?: ChildInput;
+  content?: ChildInput | SetupCallback<HtmlElementNode>;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+/** Single tab. */
+export class VTab extends HtmlElementNode {
+  key(): string;
+  key(value: string): VTab;
+  value(): unknown;
+  value(value: unknown): VTab;
+  label(content?: ChildInput): this;
+  text(content?: ChildInput): this;
+  title(content?: ChildInput): this;
+  icon(content: ChildInput): VTab;
+  content(setup: ChildInput | SetupCallback<HtmlElementNode>): VTab;
+  disabled(value: boolean): VTab;
+  active(value: boolean): VTab;
+}
+
+/** Tab group with selection state. */
+export class VTabs extends HtmlElementNode {
+  children(): HtmlElementNode[];
+  items(value: Array<string | VTab | TabItemOptions>): VTabs;
+  child(...children: ChildInput[]): this;
+  active(): string | number;
+  active(value: string | number): VTabs;
+  activeIndex(): number;
+  activeIndex(value: number): VTabs;
+  ariaLabel(content: ChildInput): VTabs;
+  orientation(): TabsOrientation;
+  orientation(value: TabsOrientation): VTabs;
+  variant(): TabsVariant;
+  variant(value: TabsVariant): VTabs;
+  size(): TabsSize;
+  size(value: TabsSize): VTabs;
+  change(): ((key: string | number, index: number) => void) | null;
+  change(handler: ((key: string | number, index: number) => void) | null): VTabs;
+  onChange(handler: ((key: string | number, index: number) => void) | null): VTabs;
+  next(): VTabs;
+  prev(): VTabs;
+}
+
+export const vAnchor: ElementFactory<VAnchor>;
+export const vAnchorItem: ElementFactory<VAnchorItem>;
+export const vBreadcrumb: ElementFactory<VBreadcrumb>;
+export const vBreadcrumbItem: ElementFactory<VBreadcrumbItem>;
+export const vMenu: ElementFactory<VMenu>;
+export const vMenuDivider: ElementFactory<VMenuDivider>;
+export const vMenuGroup: ElementFactory<VMenuGroup>;
+export const vMenuItem: ElementFactory<VMenuItem>;
+export const vNavbar: ElementFactory<VNavbar>;
+export const vSidebar: ElementFactory<VSidebar>;
+export const vStep: ElementFactory<VStep>;
+export const vSteps: ElementFactory<VSteps>;
+export const vSubMenu: ElementFactory<VSubMenu>;
+export const vTab: ElementFactory<VTab>;
+export const vTabs: ElementFactory<VTabs>;
+
+/** Parent-shortcut surface merged onto HtmlElementNode. */
+export interface NavigationParentShortcuts {
+  vAnchor(first?: SetupInput<VAnchor> | null, callback?: SetupCallback<VAnchor>): VAnchor;
+  vAnchorItem(
+    first?: SetupInput<VAnchorItem> | null,
+    callback?: SetupCallback<VAnchorItem>
+  ): VAnchorItem;
+  vBreadcrumb(
+    first?: SetupInput<VBreadcrumb> | null,
+    callback?: SetupCallback<VBreadcrumb>
+  ): VBreadcrumb;
+  vBreadcrumbItem(
+    first?: SetupInput<VBreadcrumbItem> | null,
+    callback?: SetupCallback<VBreadcrumbItem>
+  ): VBreadcrumbItem;
+  vMenu(first?: SetupInput<VMenu> | null, callback?: SetupCallback<VMenu>): VMenu;
+  vMenuDivider(
+    first?: SetupInput<VMenuDivider> | null,
+    callback?: SetupCallback<VMenuDivider>
+  ): VMenuDivider;
+  vMenuGroup(
+    first?: SetupInput<VMenuGroup> | null,
+    callback?: SetupCallback<VMenuGroup>
+  ): VMenuGroup;
+  vMenuItem(first?: SetupInput<VMenuItem> | null, callback?: SetupCallback<VMenuItem>): VMenuItem;
+  vNavbar(first?: SetupInput<VNavbar> | null, callback?: SetupCallback<VNavbar>): VNavbar;
+  vSidebar(first?: SetupInput<VSidebar> | null, callback?: SetupCallback<VSidebar>): VSidebar;
+  vStep(first?: SetupInput<VStep> | null, callback?: SetupCallback<VStep>): VStep;
+  vSteps(first?: SetupInput<VSteps> | null, callback?: SetupCallback<VSteps>): VSteps;
+  vSubMenu(first?: SetupInput<VSubMenu> | null, callback?: SetupCallback<VSubMenu>): VSubMenu;
+  vTab(first?: SetupInput<VTab> | null, callback?: SetupCallback<VTab>): VTab;
+  vTabs(first?: SetupInput<VTabs> | null, callback?: SetupCallback<VTabs>): VTabs;
+}
+
+export type { ElementOptions };