@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

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

@@ -1,18 +1,15 @@
 import type { NavigationMenuRootProps, NavigationMenuContentProps, NavigationMenuContentEmits, AccordionRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/navigation-menu';
-import type { AvatarProps, BadgeProps, IconComponent, LinkProps, PopoverProps, TooltipProps } from '../types';
+import type { AvatarProps, BadgeProps, ChipProps, IconComponent, LinkProps, PopoverProps, TooltipProps } from '../types';
 import type { ArrayOrNested, DynamicSlots, GetItemKeys, MergeTypes, NestedItem, EmitsToProps } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
 /**
- * @memo not use in NavigationMenuChildItem
- * - description
- * - avatar
- * - b24ui
- * - children - only 1 level
+ * @memo only 1 level
+ * @memo not use in NavigationMenuChildItem: `b24ui` | `description` | `avatar` | `children` | `description`
  */
-export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type' | 'b24ui' | 'avatar' | 'children'> {
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type' | 'b24ui' | 'avatar' | 'children' | 'description'> {
     [key: string]: any;
 }
 export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
@@ -29,16 +26,22 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     avatar?: AvatarProps;
     /**
      * Display a badge on the item.
-     * `{ size: 'xs', color: 'air-primary-alert' }`{lang="ts"}
+     * `{ size: 'xs', color: 'air-primary-alert' }`{lang="ts-type"}
      */
     badge?: string | number | BadgeProps;
+    /**
+     * Display a chip around the icon of the item.
+     * `{ inset: true }`{lang="ts-type"}
+     */
+    chip?: boolean | ChipProps;
     /**
      * Display a hint on the item in `horizontal` orientation.
      */
     hint?: string;
     /**
-     * Display a tooltip on the item when the menu is collapsed with the label of the item.
-     * This has priority over the global `tooltip` prop.
+     * Display a tooltip on the item with the label of the item.
+     * In `vertical` orientation, only works when the menu is `collapsed`.
+     * In `horizontal` orientation, works on any item.
      */
     tooltip?: boolean | TooltipProps;
     /**
@@ -60,7 +63,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     slot?: string;
     /**
      * The value of the item. Avoid using `index` as the value to prevent conflicts in horizontal orientation with Reka UI.
-     * @defaultValue `item-${index}`
+     * @defaultValue `item-${index}`, `item-${level}-${index}` for nested children, or `group-${listIndex}-item-${index}` when using grouped items
      */
     value?: string;
     children?: NavigationMenuChildItem[];
@@ -72,19 +75,14 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     open?: boolean;
     onSelect?: (e: Event) => void;
     class?: any;
-    b24ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkLeadingHint' | 'linkLeadingBadgeSize' | 'linkLeadingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkHint' | 'childLinkBadgeSize' | 'childLinkBadge' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'popoverWrapper'>;
+    b24ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLeadingChipSize' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkLeadingHint' | 'linkLeadingBadgeSize' | 'linkLeadingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childLabel' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkHint' | 'childLinkBadgeSize' | 'childLinkBadge' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'popoverWrapper'>;
     [key: string]: any;
 }
 type SingleOrMultipleType = 'single' | 'multiple';
-type Orientation = NavigationMenuRootProps['orientation'];
+type Orientation = NavigationMenu['variants']['orientation'];
 type NavigationMenuModelValue<K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> = O extends 'horizontal' ? string : K extends 'single' ? string : K extends 'multiple' ? string[] : string | string[];
 /**
- * @memo remove contentOrientation
- * @memo remove highlight
- * @memo remove highlightColor
- * @memo remove arrow
- * @memo remove color
- * @memo remove variant (link) -> use variant.pill
+ * @memo remove contentOrientation | highlight | highlightColor | arrow | color | variant (link) -> use variant.pill
  */
 export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation> extends Pick<NavigationMenuRootProps, 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'>, Pick<AccordionRootProps, 'disabled' | 'collapsible'> {
     /**
@@ -143,7 +141,8 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      */
     collapsed?: boolean;
     /**
-     * Display a tooltip on the items when the menu is collapsed with the label of the item.
+     * Display a tooltip on the items with the label of the item.
+     * Only works when `orientation` is `vertical` and `collapsed` is `true`.
      * `{ delayDuration: 0, content: { side: 'right' } }`{lang="ts-type"}
      * @defaultValue false
      */
@@ -158,6 +157,11 @@ export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem>
      * The content of the menu.
      */
     content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<NavigationMenuContentEmits>>;
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
@@ -204,8 +208,12 @@ export type NavigationMenuSlots<A extends ArrayOrNested<NavigationMenuItem> = Ar
     active?: boolean;
     b24ui: NavigationMenu['b24ui'];
 }>;
-declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<NavigationMenuProps<T, K, O> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: NavigationMenuModelValue<K, O> | undefined) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K extends SingleOrMultipleType = SingleOrMultipleType, O extends Orientation = Orientation>(__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<NavigationMenuProps<T, K, O> & {
+        "onUpdate:modelValue"?: ((value: NavigationMenuModelValue<K, O> | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -215,8 +223,8 @@ declare const __VLS_export: <T extends ArrayOrNested<NavigationMenuItem>, K exte
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/Page.d.vue.ts

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

package/dist/runtime/components/Page.vue

@@ -0,0 +1,39 @@
+<script>
+import theme from "#build/b24ui/page";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, Slot } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("page", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.page || {} })({
+  left: !!slots.left,
+  right: !!slots.right
+}));
+</script>
+
+<template>
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <Slot v-if="!!slots.left" data-slot="left" :class="b24ui.left({ class: uiProp?.left })">
+      <slot name="left" />
+    </Slot>
+
+    <div data-slot="center" :class="b24ui.center({ class: uiProp?.center })">
+      <slot />
+    </div>
+
+    <Slot v-if="!!slots.right" data-slot="right" :class="b24ui.right({ class: uiProp?.right })">
+      <slot name="right" />
+    </Slot>
+  </Primitive>
+</template>

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

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

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

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

package/dist/runtime/components/PageAside.vue

@@ -0,0 +1,38 @@
+<script>
+import theme from "#build/b24ui/page-aside";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { tv } from "../utils/tv";
+const props = defineProps({
+  as: { type: null, required: false, default: "aside" },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("pageAside", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageAside || {} })());
+</script>
+
+<template>
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div v-if="!!slots.top" data-slot="top" :class="b24ui.top({ class: uiProp?.top })">
+        <div data-slot="topHeader" :class="b24ui.topHeader({ class: uiProp?.topHeader })" />
+        <div data-slot="topBody" :class="b24ui.topBody({ class: uiProp?.topBody })">
+          <slot name="top" />
+        </div>
+        <div data-slot="topFooter" :class="b24ui.topFooter({ class: uiProp?.topFooter })" />
+      </div>
+
+      <slot />
+
+      <slot name="bottom" />
+    </div>
+  </Primitive>
+</template>

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

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

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

@@ -0,0 +1,22 @@
+export interface PageBodyProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: {
+        base?: any;
+    };
+}
+export interface PageBodySlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageBodyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageBodySlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PageBody.vue

@@ -0,0 +1,26 @@
+<script>
+import theme from "#build/b24ui/page-body";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import { useComponentUI } from "../composables/useComponentUI";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("pageBody", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageBody || {} }));
+</script>
+
+<template>
+  <Primitive :as="as" :class="b24ui({ class: [uiProp?.base, props.class] })">
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,22 @@
+export interface PageBodyProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: {
+        base?: any;
+    };
+}
+export interface PageBodySlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageBodyProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageBodySlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -59,9 +59,11 @@ export interface PageCardSlots {
     footer(props?: {}): any;
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageCardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageCardSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageCardProps> & Readonly<{}>, {
+    orientation: PageCard["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageCardSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/PageCard.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/page-card";
 import { computed, ref } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { getSlotChildrenText } from "../utils";
 import { tv } from "../utils/tv";
 import B24Link from "./Link.vue";
@@ -24,11 +25,12 @@ const props = defineProps({
   target: { type: [String, Object, null], required: false },
   onClick: { type: Function, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const cardRef = ref();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("pageCard", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageCard || {} })({
   orientation: props.orientation,
   reverse: props.reverse,
@@ -50,31 +52,31 @@ const ariaLabel = computed(() => {
     :as="as"
     :data-orientation="orientation"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     v-bind="$attrs"
     @click="onClick"
   >
-    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
-      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-        <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+    <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div v-if="!!slots.header || (icon || !!slots.leading) || !!slots.body || (title || !!slots.title) || (description || !!slots.description) || !!slots.footer" data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+        <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
           <slot name="header" />
         </div>
 
-        <div v-if="icon || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+        <div v-if="icon || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
           <slot name="leading" :b24ui="b24ui">
-            <Component :is="icon" v-if="icon" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })" />
+            <Component :is="icon" v-if="icon" data-slot="leadingIcon" :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })" />
           </slot>
         </div>
 
-        <div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+        <div v-if="!!slots.body || (title || !!slots.title) || (description || !!slots.description)" data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
           <slot name="body">
-            <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+            <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
               <slot name="title">
                 {{ title }}
               </slot>
             </div>
 
-            <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+            <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
               <slot name="description">
                 {{ description }}
               </slot>
@@ -82,7 +84,7 @@ const ariaLabel = computed(() => {
           </slot>
         </div>
 
-        <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+        <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
           <slot name="footer" />
         </div>
       </div>

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

@@ -59,9 +59,11 @@ export interface PageCardSlots {
     footer(props?: {}): any;
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageCardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageCardSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageCardProps> & Readonly<{}>, {
+    orientation: PageCard["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageCardSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -5,13 +5,16 @@ export interface PageColumnsProps {
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface PageColumnsSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageColumnsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageColumnsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageColumnsSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageColumnsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageColumnsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageColumnsSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/PageColumns.vue

@@ -7,17 +7,20 @@ import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
+import { useComponentUI } from "../composables/useComponentUI";
 const props = defineProps({
   as: { type: null, required: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("pageColumns", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageColumns || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui({ class: props.class })">
+  <Primitive :as="as" :class="b24ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -5,13 +5,16 @@ export interface PageColumnsProps {
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface PageColumnsSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageColumnsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageColumnsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageColumnsSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageColumnsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageColumnsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageColumnsSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -0,0 +1,47 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/page-feature';
+import type { IconComponent, LinkProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type PageFeature = ComponentConfig<typeof theme, AppConfig, 'pageFeature'>;
+export interface PageFeatureProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed next to the title when `orientation` is `horizontal` and above the title when `orientation` is `vertical`.
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    title?: string;
+    description?: string;
+    /**
+     * The orientation of the page feature.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: PageFeature['variants']['orientation'];
+    to?: LinkProps['to'];
+    target?: LinkProps['target'];
+    onClick?: (event: MouseEvent) => void | Promise<void>;
+    class?: any;
+    b24ui?: PageFeature['slots'];
+}
+export interface PageFeatureSlots {
+    leading(props: {
+        b24ui: PageFeature['b24ui'];
+    }): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageFeatureProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageFeatureProps> & Readonly<{}>, {
+    orientation: PageFeature["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageFeatureSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};