@bitrix24/b24ui-nuxt 2.3.0 → 2.4.1

package/dist/runtime/components/Footer.vue.d.ts

@@ -0,0 +1,31 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import type { ComponentConfig } from '../types/tv';
+import theme from '#build/b24ui/footer';
+type Footer = ComponentConfig<typeof theme, AppConfig, 'footer'>;
+export interface FooterProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'footer'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: Footer['slots'];
+}
+export interface FooterSlots {
+    left?(props?: {}): VNode[];
+    default?(props?: {}): VNode[];
+    right?(props?: {}): VNode[];
+    top?(props?: {}): VNode[];
+    bottom?(props?: {}): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, FooterSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FooterColumns.d.vue.ts

@@ -0,0 +1,70 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/footer-columns';
+import type { IconComponent, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>;
+export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
+    label: string;
+    /**
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    class?: any;
+    b24ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>;
+}
+export interface FooterColumn<T extends FooterColumnLink = FooterColumnLink> {
+    label: string;
+    children?: T[];
+}
+export interface FooterColumnsProps<T extends FooterColumnLink = FooterColumnLink> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    columns?: FooterColumn<T>[];
+    b24ui?: FooterColumns['slots'];
+}
+type SlotProps<T> = (props: {
+    link: T;
+    active: boolean;
+    b24ui: FooterColumns['b24ui'];
+}) => VNode[];
+export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLink> {
+    'left'?(props?: {}): VNode[];
+    'default'?(props?: {}): VNode[];
+    'right'?(props?: {}): VNode[];
+    'column-label'?: (props: {
+        column: FooterColumn<T>;
+    }) => VNode[];
+    'link'?: SlotProps<T>;
+    'link-leading'?: SlotProps<T>;
+    'link-label'?(props: {
+        link: T;
+        active: boolean;
+    }): VNode[];
+    'link-trailing'?(props: {
+        link: T;
+        active: boolean;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<FooterColumnsProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: FooterColumnsSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/FooterColumns.vue

@@ -0,0 +1,83 @@
+<script>
+import theme from "#build/b24ui/footer-columns";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { pickLinkProps } from "../utils/link";
+import { tv } from "../utils/tv";
+import icons from "../dictionary/icons";
+import B24Link from "./Link.vue";
+import B24LinkBase from "./LinkBase.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  class: { type: null, required: false },
+  columns: { type: Array, required: false },
+  b24ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("footerColumns", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.footerColumns || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.left" data-slot="left" :class="b24ui.left({ class: uiProp?.left })">
+      <slot name="left" />
+    </div>
+
+    <div v-if="!!slots.default || columns?.length" data-slot="center" :class="b24ui.center({ class: uiProp?.center })">
+      <slot>
+        <div v-for="(column, index) in columns" :key="index">
+          <h3 data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
+            <slot name="column-label" :column="column">
+              {{ column.label }}
+            </slot>
+          </h3>
+
+          <ul data-slot="list" :class="b24ui.list({ class: uiProp?.list })">
+            <li v-for="(link, linkIndex) in column.children" :key="linkIndex" data-slot="item" :class="b24ui.item({ class: [uiProp?.item, link.b24ui?.item] })">
+              <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(link)" custom>
+                <B24LinkBase v-bind="slotProps" data-slot="link" :class="b24ui.link({ class: [uiProp?.link, link.b24ui?.link, link.class], active })">
+                  <slot name="link" :link="link" :active="active" :b24ui="b24ui">
+                    <slot name="link-leading" :link="link" :active="active" :b24ui="b24ui">
+                      <Component
+                        :is="link.icon"
+                        v-if="link.icon"
+                        data-slot="linkLeadingIcon"
+                        :class="b24ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.b24ui?.linkLeadingIcon], active })"
+                      />
+                    </slot>
+
+                    <span v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="b24ui.linkLabel({ class: [uiProp?.linkLabel, link.b24ui?.linkLabel], active })">
+                      <slot name="link-label" :link="link" :active="active">
+                        {{ link.label }}
+                      </slot>
+                    </span>
+
+                    <slot name="link-trailing" :link="link" :active="active">
+                      <Component
+                        :is="icons.external"
+                        v-if="link.target === '_blank'"
+                        data-slot="linkLabelExternalIcon"
+                        :class="b24ui.linkLabelExternalIcon({ class: [uiProp?.linkLabelExternalIcon, link.b24ui?.linkLabelExternalIcon], active })"
+                      />
+                    </slot>
+                  </slot>
+                </B24LinkBase>
+              </B24Link>
+            </li>
+          </ul>
+        </div>
+      </slot>
+    </div>
+
+    <div v-if="!!slots.right" data-slot="right" :class="b24ui.right({ class: uiProp?.right })">
+      <slot name="right" />
+    </div>
+  </Primitive>
+</template>

package/dist/runtime/components/FooterColumns.vue.d.ts

@@ -0,0 +1,70 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/footer-columns';
+import type { IconComponent, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type FooterColumns = ComponentConfig<typeof theme, AppConfig, 'footerColumns'>;
+export interface FooterColumnLink extends Omit<LinkProps, 'custom'> {
+    label: string;
+    /**
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    class?: any;
+    b24ui?: Pick<FooterColumns['slots'], 'item' | 'link' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkLeadingIcon'>;
+}
+export interface FooterColumn<T extends FooterColumnLink = FooterColumnLink> {
+    label: string;
+    children?: T[];
+}
+export interface FooterColumnsProps<T extends FooterColumnLink = FooterColumnLink> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    columns?: FooterColumn<T>[];
+    b24ui?: FooterColumns['slots'];
+}
+type SlotProps<T> = (props: {
+    link: T;
+    active: boolean;
+    b24ui: FooterColumns['b24ui'];
+}) => VNode[];
+export interface FooterColumnsSlots<T extends FooterColumnLink = FooterColumnLink> {
+    'left'?(props?: {}): VNode[];
+    'default'?(props?: {}): VNode[];
+    'right'?(props?: {}): VNode[];
+    'column-label'?: (props: {
+        column: FooterColumn<T>;
+    }) => VNode[];
+    'link'?: SlotProps<T>;
+    'link-leading'?: SlotProps<T>;
+    'link-label'?(props: {
+        link: T;
+        active: boolean;
+    }): VNode[];
+    'link-trailing'?(props: {
+        link: T;
+        active: boolean;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends FooterColumnLink>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<FooterColumnsProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: FooterColumnsSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Form.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormErrorWithId, InferInput, FormData } from '../types/form';
 import type { FormHTMLAttributes } from '../types/html';
 export type FormProps<S extends FormSchema, T extends boolean = true, N extends boolean = false> = {
@@ -47,6 +48,9 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
      */
     loadingAuto?: boolean;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
     onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 } & /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'>;
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
@@ -54,10 +58,10 @@ export interface FormEmits<S extends FormSchema, T extends boolean = true> {
     error: [event: FormErrorEvent];
 }
 export interface FormSlots {
-    default(props: {
+    default?(props: {
         errors: FormError[];
         loading: boolean;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Form.vue

@@ -3,9 +3,10 @@ import theme from "#build/b24ui/form";
 </script>
 
 <script setup>
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from "vue";
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive, useTemplateRef } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey, formErrorsInjectionKey, formStateInjectionKey } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import { validateSchema, getAtPath, setAtPath } from "../utils/form";
@@ -25,13 +26,16 @@ const props = defineProps({
   nested: { type: Boolean, required: false },
   loadingAuto: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   onSubmit: { type: Function, required: false }
 });
 const emits = defineEmits(["submit", "error"]);
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("form", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.form || {} }));
 const formId = props.id ?? useId();
+const formRef = useTemplateRef("formRef");
 const bus = useEventBus(`form-${formId}`);
 const parentBus = props.nested === true && inject(
   formBusInjectionKey,
@@ -252,6 +256,9 @@ const api = {
     }
   },
   async submit() {
+    if (formRef.value instanceof HTMLFormElement && formRef.value.reportValidity() === false) {
+      return;
+    }
     await onSubmitWrapper(new Event("submit"));
   },
   getErrors(name) {
@@ -285,7 +292,8 @@ defineExpose(api);
   <component
     :is="parentBus ? 'div' : 'form'"
     :id="formId"
-    :class="b24ui({ class: props.class })"
+    ref="formRef"
+    :class="b24ui({ class: [uiProp?.base, props.class] })"
     @submit.prevent="onSubmitWrapper"
   >
     <slot :errors="errors" :loading="loading" />

package/dist/runtime/components/Form.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormErrorWithId, InferInput, FormData } from '../types/form';
 import type { FormHTMLAttributes } from '../types/html';
 export type FormProps<S extends FormSchema, T extends boolean = true, N extends boolean = false> = {
@@ -47,6 +48,9 @@ export type FormProps<S extends FormSchema, T extends boolean = true, N extends
      */
     loadingAuto?: boolean;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
     onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 } & /** @vue-ignore */ Omit<FormHTMLAttributes, 'name'>;
 export interface FormEmits<S extends FormSchema, T extends boolean = true> {
@@ -54,10 +58,10 @@ export interface FormEmits<S extends FormSchema, T extends boolean = true> {
     error: [event: FormErrorEvent];
 }
 export interface FormSlots {
-    default(props: {
+    default?(props: {
         errors: FormError[];
         loading: boolean;
-    }): any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/FormField.d.vue.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/form-field';
 import type { ComponentConfig } from '../types/tv';
@@ -41,24 +42,24 @@ export interface FormFieldProps {
     b24ui?: FormField['slots'];
 }
 export interface FormFieldSlots {
-    label(props: {
-        label?: string;
-    }): any;
-    hint(props: {
-        hint?: string;
-    }): any;
-    description(props: {
-        description?: string;
-    }): any;
-    help(props: {
-        help?: string;
-    }): any;
-    error(props: {
-        error?: boolean | string;
-    }): any;
-    default(props: {
-        error?: boolean | string;
-    }): any;
+    label?(props: {
+        label: string | undefined;
+    }): VNode[];
+    hint?(props: {
+        hint: string | undefined;
+    }): VNode[];
+    description?(props: {
+        description: string | undefined;
+    }): VNode[];
+    help?(props: {
+        help: string | undefined;
+    }): VNode[];
+    error?(props: {
+        error: string | true | undefined;
+    }): VNode[];
+    default?(props: {
+        error: string | true | undefined;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/FormField.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/form-field";
 import { computed, ref, inject, provide, useId, watch } from "vue";
 import { Primitive, Label } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { formFieldInjectionKey, inputIdInjectionKey, formErrorsInjectionKey, formInputsInjectionKey } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import WarningIcon from "@bitrix24/b24icons-vue/main/WarningIcon";
@@ -28,6 +29,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("formField", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.formField || {} })({
   size: props.size,
   required: props.required,
@@ -60,40 +62,40 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-      <div v-if="label || !!slots.label" data-slot="root" :class="b24ui.labelWrapper({ class: props.b24ui?.labelWrapper })">
-        <Label :for="id" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+      <div v-if="label || !!slots.label" data-slot="root" :class="b24ui.labelWrapper({ class: uiProp?.labelWrapper })">
+        <Label :for="id" data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
           <slot name="label" :label="label">
             {{ label }}
           </slot>
         </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="b24ui.hint({ class: props.b24ui?.hint })">
+        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" data-slot="hint" :class="b24ui.hint({ class: uiProp?.hint })">
           <slot name="hint" :hint="hint">
             {{ hint }}
           </slot>
         </span>
       </div>
 
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>
       </p>
     </div>
 
-    <div data-slot="container" :class="[(label || !!slots.label || description || !!slots.description) && b24ui.container({ class: props.b24ui?.container })]">
+    <div data-slot="container" :class="[(label || !!slots.label || description || !!slots.description) && b24ui.container({ class: uiProp?.container })]">
       <slot :error="error" />
 
-      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="b24ui.error({ class: props.b24ui?.error })">
+      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" data-slot="error" :class="b24ui.error({ class: uiProp?.error })">
         <slot name="error" :error="error">
-          <div data-slot="errorWrapper" :class="b24ui.errorWrapper({ class: props.b24ui?.errorWrapper })">
+          <div data-slot="errorWrapper" :class="b24ui.errorWrapper({ class: uiProp?.errorWrapper })">
             <WarningIcon data-slot="errorIcon" :class="b24ui.errorIcon()" />
             <div>{{ error }}</div>
           </div>
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="b24ui.help({ class: props.b24ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" data-slot="help" :class="b24ui.help({ class: uiProp?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

package/dist/runtime/components/FormField.vue.d.ts

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/form-field';
 import type { ComponentConfig } from '../types/tv';
@@ -41,24 +42,24 @@ export interface FormFieldProps {
     b24ui?: FormField['slots'];
 }
 export interface FormFieldSlots {
-    label(props: {
-        label?: string;
-    }): any;
-    hint(props: {
-        hint?: string;
-    }): any;
-    description(props: {
-        description?: string;
-    }): any;
-    help(props: {
-        help?: string;
-    }): any;
-    error(props: {
-        error?: boolean | string;
-    }): any;
-    default(props: {
-        error?: boolean | string;
-    }): any;
+    label?(props: {
+        label: string | undefined;
+    }): VNode[];
+    hint?(props: {
+        hint: string | undefined;
+    }): VNode[];
+    description?(props: {
+        description: string | undefined;
+    }): VNode[];
+    help?(props: {
+        help: string | undefined;
+    }): VNode[];
+    error?(props: {
+        error: string | true | undefined;
+    }): VNode[];
+    default?(props: {
+        error: string | true | undefined;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Header.d.vue.ts

@@ -0,0 +1,82 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/header';
+import type { ButtonProps, DrawerProps, ModalProps, SlideoverProps, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type Header = ComponentConfig<typeof theme, AppConfig, 'header'>;
+type HeaderMode = 'modal' | 'slideover' | 'drawer';
+type HeaderMenu<T> = T extends 'modal' ? ModalProps : T extends 'slideover' ? SlideoverProps : T extends 'drawer' ? DrawerProps : never;
+export interface HeaderProps<T extends HeaderMode = HeaderMode> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'header'
+     */
+    as?: any;
+    title?: string;
+    to?: string;
+    /**
+     * The mode of the header menu.
+     * @defaultValue 'modal'
+     */
+    mode?: T;
+    /**
+     * The props for the header menu component.
+     */
+    menu?: HeaderMenu<T>;
+    /**
+     * Customize the toggle button to open the header menu displayed when the `content` slot is used.
+     * `{ color: 'air-tertiary', size: 'md' }`{lang="ts-type"}
+     */
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
+    toggleSide?: 'left' | 'right';
+    /**
+     * Automatically close when route changes.
+     * @defaultValue true
+     */
+    autoClose?: boolean;
+    class?: any;
+    b24ui?: Header['slots'];
+}
+export interface HeaderSlots {
+    title?(props?: {}): VNode[];
+    left?(props?: {}): VNode[];
+    default?(props?: {}): VNode[];
+    right?(props?: {}): VNode[];
+    toggle?(props: {
+        open: boolean;
+        toggle: () => void;
+        b24ui: Header['b24ui'];
+    }): VNode[];
+    top?(props?: {}): VNode[];
+    bottom?(props?: {}): VNode[];
+    body?(props?: {}): VNode[];
+    content?(props: {
+        close?: () => void;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends HeaderMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(HeaderProps<T> & {
+        open?: boolean;
+    }) & {
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: HeaderSlots;
+    emit: (event: "update:open", value: boolean) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};