@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

package/dist/runtime/components/PageHeader.vue

@@ -0,0 +1,67 @@
+<script>
+import theme from "#build/b24ui/page-header";
+</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";
+import B24Button from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  headline: { type: String, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  links: { type: Array, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("pageHeader", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageHeader || {} })({
+  title: !!props.title || !!slots.title
+}));
+</script>
+
+<template>
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="headline || !!slots.headline" data-slot="headline" :class="b24ui.headline({ class: uiProp?.headline })">
+      <slot name="headline">
+        {{ headline }}
+      </slot>
+    </div>
+
+    <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+        <h1 v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </h1>
+
+        <div v-if="links?.length || !!slots.links" data-slot="links" :class="b24ui.links({ class: uiProp?.links })">
+          <slot name="links">
+            <B24Button
+              v-for="(link, index) in links"
+              :key="index"
+              color="air-secondary-accent"
+              size="sm"
+              v-bind="link"
+            />
+          </slot>
+        </div>
+      </div>
+
+      <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </div>
+
+      <slot />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,37 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/page-header';
+import type { ButtonProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type PageHeader = ComponentConfig<typeof theme, AppConfig, 'pageHeader'>;
+export interface PageHeaderProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    headline?: string;
+    title?: string;
+    description?: string;
+    /**
+     * Display a list of Button next to the title.
+     * `{ color: 'air-secondary-accent', size: 'sm' }`{lang="ts-type"}
+     */
+    links?: ButtonProps[];
+    class?: any;
+    b24ui?: PageHeader['slots'];
+}
+export interface PageHeaderSlots {
+    headline(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    links(props?: {}): any;
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PageHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageHeaderSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PageLinks.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/page-links";
 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";
@@ -20,33 +21,34 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("pageLinks", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageLinks || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <p v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <p v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
       <slot name="title">
         {{ title }}
       </slot>
     </p>
 
-    <ul data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
-      <li v-for="(link, index) in links" :key="index" data-slot="item" :class="b24ui.item({ class: [props.b24ui?.item, link.b24ui?.item] })">
+    <ul data-slot="list" :class="b24ui.list({ class: uiProp?.list })">
+      <li v-for="(link, index) in links" :key="index" 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: [props.b24ui?.link, link.b24ui?.link, link.class], active })">
+          <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">
-              <div data-slot="linkWrapper" :class="b24ui.linkWrapper({ class: [props.b24ui?.linkWrapper, link.b24ui?.linkWrapper], active })">
+              <div data-slot="linkWrapper" :class="b24ui.linkWrapper({ class: [uiProp?.linkWrapper, link.b24ui?.linkWrapper], active })">
                 <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: [props.b24ui?.linkLeadingIcon, link.b24ui?.linkLeadingIcon], active })"
+                    :class="b24ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, link.b24ui?.linkLeadingIcon], active })"
                   />
                 </slot>
 
-                <div v-if="link.label || !!slots['link-label']" data-slot="linkLabel" :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, link.b24ui?.linkLabel], active })">
+                <div 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>
@@ -56,7 +58,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageLin
                 :is="icons.external"
                 v-if="link.target === '_blank'"
                 data-slot="linkLabelExternalIcon"
-                :class="b24ui.linkLabelExternalIcon({ class: [props.b24ui?.linkLabelExternalIcon, link.b24ui?.linkLabelExternalIcon], active })"
+                :class="b24ui.linkLabelExternalIcon({ class: [uiProp?.linkLabelExternalIcon, link.b24ui?.linkLabelExternalIcon], active })"
               />
 
               <slot name="link-trailing" :link="link" :active="active" />

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

@@ -6,6 +6,9 @@ export interface PageListProps {
     as?: any;
     divide?: boolean;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface PageListSlots {
     default(props?: {}): any;

package/dist/runtime/components/PageList.vue

@@ -6,19 +6,22 @@ import theme from "#build/b24ui/page-list";
 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 },
   divide: { type: Boolean, required: false, default: false },
-  class: { type: null, required: false }
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
 });
 defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("pageList", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageList || {} }));
 </script>
 
 <template>
-  <Primitive :as="as" role="list" :class="b24ui({ class: props.class, divide: props.divide })">
+  <Primitive :as="as" role="list" :class="b24ui({ class: [uiProp?.base, props.class], divide: props.divide })">
     <slot />
   </Primitive>
 </template>

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

@@ -6,6 +6,9 @@ export interface PageListProps {
     as?: any;
     divide?: boolean;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface PageListSlots {
     default(props?: {}): any;

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

@@ -0,0 +1,71 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/page-section';
+import type { ButtonProps, IconComponent, PageFeatureProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type PageSection = ComponentConfig<typeof theme, AppConfig, 'pageSection'>;
+export interface PageSectionProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'section'
+     */
+    as?: any;
+    /**
+     * The headline displayed above the title.
+     */
+    headline?: string;
+    /**
+     * The icon displayed above the title.
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    title?: string;
+    description?: string;
+    /**
+     * Display a list of Button under the description.
+     * `{ size: 'lg' }`{lang="ts-type"}
+     */
+    links?: ButtonProps[];
+    /**
+     * Display a list of PageFeature under the description.
+     */
+    features?: PageFeatureProps[];
+    /**
+     * The orientation of the section.
+     * @defaultValue 'vertical'
+     */
+    orientation?: PageSection['variants']['orientation'];
+    /**
+     * Reverse the order of the default slot.
+     * @defaultValue false
+     */
+    reverse?: boolean;
+    class?: any;
+    b24ui?: PageSection['slots'];
+}
+export interface PageSectionSlots {
+    top(props?: {}): any;
+    header(props?: {}): any;
+    leading(props: {
+        b24ui: PageSection['b24ui'];
+    }): any;
+    headline(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    features(props?: {}): any;
+    footer(props?: {}): any;
+    links(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<PageSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageSectionProps> & Readonly<{}>, {
+    orientation: PageSection["variants"]["orientation"];
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageSectionSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/PageSection.vue

@@ -0,0 +1,110 @@
+<script>
+import theme from "#build/b24ui/page-section";
+</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";
+import B24PageFeature from "./PageFeature.vue";
+import B24Container from "./Container.vue";
+import B24Button from "./Button.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "section" },
+  headline: { type: String, required: false },
+  icon: { type: [Function, Object], required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  links: { type: Array, required: false },
+  features: { type: Array, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  reverse: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("pageSection", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pageSection || {} })({
+  orientation: props.orientation,
+  reverse: props.reverse,
+  title: !!props.title || !!slots.title,
+  description: !!props.description || !!slots.description,
+  body: !!slots.body || (!!props.features?.length || !!slots.features)
+}));
+</script>
+
+<template>
+  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <slot name="top" />
+
+    <B24Container data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description) || !!slots.body || (features?.length || !!slots.features) || !!slots.footer || (links?.length || !!slots.links)" data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
+        <div v-if="!!slots.header || (icon || !!slots.leading) || (headline || !!slots.headline) || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
+          <slot name="header">
+            <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: uiProp?.leadingIcon })"
+                />
+              </slot>
+            </div>
+
+            <div v-if="headline || !!slots.headline" data-slot="headline" :class="b24ui.headline({ class: uiProp?.headline, headline: !slots.headline })">
+              <slot name="headline">
+                {{ headline }}
+              </slot>
+            </div>
+
+            <h2 v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </h2>
+
+            <div v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
+              <slot name="description">
+                {{ description }}
+              </slot>
+            </div>
+          </slot>
+        </div>
+
+        <div v-if="!!slots.body || (features?.length || !!slots.features)" data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
+          <slot name="body">
+            <ul v-if="features?.length || !!slots.features" data-slot="features" :class="b24ui.features({ class: uiProp?.features })">
+              <slot name="features">
+                <B24PageFeature
+                  v-for="(feature, index) in features"
+                  :key="index"
+                  as="li"
+                  v-bind="feature"
+                />
+              </slot>
+            </ul>
+          </slot>
+        </div>
+
+        <div v-if="!!slots.footer || (links?.length || !!slots.links)" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
+          <slot name="footer">
+            <div v-if="links?.length || !!slots.links" data-slot="links" :class="b24ui.links({ class: uiProp?.links })">
+              <slot name="links">
+                <B24Button v-for="(link, index) in links" :key="index" size="lg" v-bind="link" />
+              </slot>
+            </div>
+          </slot>
+        </div>
+      </div>
+
+      <slot v-if="!!slots.default" />
+      <div v-else-if="orientation === 'horizontal'" class="hidden lg:block" />
+    </B24Container>
+
+    <slot name="bottom" />
+  </Primitive>
+</template>

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

@@ -0,0 +1,71 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/page-section';
+import type { ButtonProps, IconComponent, PageFeatureProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type PageSection = ComponentConfig<typeof theme, AppConfig, 'pageSection'>;
+export interface PageSectionProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'section'
+     */
+    as?: any;
+    /**
+     * The headline displayed above the title.
+     */
+    headline?: string;
+    /**
+     * The icon displayed above the title.
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    title?: string;
+    description?: string;
+    /**
+     * Display a list of Button under the description.
+     * `{ size: 'lg' }`{lang="ts-type"}
+     */
+    links?: ButtonProps[];
+    /**
+     * Display a list of PageFeature under the description.
+     */
+    features?: PageFeatureProps[];
+    /**
+     * The orientation of the section.
+     * @defaultValue 'vertical'
+     */
+    orientation?: PageSection['variants']['orientation'];
+    /**
+     * Reverse the order of the default slot.
+     * @defaultValue false
+     */
+    reverse?: boolean;
+    class?: any;
+    b24ui?: PageSection['slots'];
+}
+export interface PageSectionSlots {
+    top(props?: {}): any;
+    header(props?: {}): any;
+    leading(props: {
+        b24ui: PageSection['b24ui'];
+    }): any;
+    headline(props?: {}): any;
+    title(props?: {}): any;
+    description(props?: {}): any;
+    body(props?: {}): any;
+    features(props?: {}): any;
+    footer(props?: {}): any;
+    links(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<PageSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageSectionProps> & Readonly<{}>, {
+    orientation: PageSection["variants"]["orientation"];
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PageSectionSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -93,8 +93,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Pagina
 }, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
     "onUpdate:page"?: ((value: number) => any) | undefined;
 }>, {
-    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-    activeColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    activeColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
     itemsPerPage: number;
     showEdges: boolean;
     siblingCount: number;

package/dist/runtime/components/Pagination.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { PaginationRoot, PaginationList, PaginationListItem, PaginationFirst, PaginationPrev, PaginationEllipsis, PaginationNext, PaginationLast, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -37,6 +38,7 @@ const emits = defineEmits(["update:page"]);
 const slots = defineSlots();
 const { dir } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("pagination", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultPage", "disabled", "itemsPerPage", "page", "showEdges", "siblingCount", "total"), emits);
 const firstIcon = computed(() => props.firstIcon || (dir.value === "rtl" ? icons.chevronDoubleRight : icons.chevronDoubleLeft));
 const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? icons.chevronRight : icons.chevronLeft));
@@ -46,21 +48,21 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.paginat
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <PaginationList v-slot="{ items }" data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
-      <PaginationFirst v-if="showControls || !!slots.first" as-child data-slot="first" :class="b24ui.first({ class: props.b24ui?.first })">
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <PaginationList v-slot="{ items }" data-slot="list" :class="b24ui.list({ class: uiProp?.list })">
+      <PaginationFirst v-if="showControls || !!slots.first" as-child data-slot="first" :class="b24ui.first({ class: uiProp?.first })">
         <slot name="first">
           <B24Button :color="color" :size="size" :icon="firstIcon" :to="to?.(1)" />
         </slot>
       </PaginationFirst>
-      <PaginationPrev v-if="showControls || !!slots.prev" as-child data-slot="prev" :class="b24ui.prev({ class: props.b24ui?.prev })">
+      <PaginationPrev v-if="showControls || !!slots.prev" as-child data-slot="prev" :class="b24ui.prev({ class: uiProp?.prev })">
         <slot name="prev">
           <B24Button :color="color" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : void 0" />
         </slot>
       </PaginationPrev>
 
       <template v-for="(item, index) in items" :key="index">
-        <PaginationListItem v-if="item.type === 'page'" as-child :value="item.value" data-slot="item" :class="b24ui.item({ class: props.b24ui?.item })">
+        <PaginationListItem v-if="item.type === 'page'" as-child :value="item.value" data-slot="item" :class="b24ui.item({ class: uiProp?.item })">
           <slot name="item" v-bind="{ item, index, page, pageCount }">
             <B24Button
               :color="page === item.value ? activeColor : color"
@@ -73,19 +75,19 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.paginat
           </slot>
         </PaginationListItem>
 
-        <PaginationEllipsis v-else as-child data-slot="ellipsis" :class="b24ui.ellipsis({ class: props.b24ui?.ellipsis })">
+        <PaginationEllipsis v-else as-child data-slot="ellipsis" :class="b24ui.ellipsis({ class: uiProp?.ellipsis })">
           <slot name="ellipsis" :b24ui="b24ui">
             <B24Button as="div" :color="color" :size="size" :icon="ellipsisIcon || icons.ellipsis" />
           </slot>
         </PaginationEllipsis>
       </template>
 
-      <PaginationNext v-if="showControls || !!slots.next" as-child data-slot="next" :class="b24ui.next({ class: props.b24ui?.next })">
+      <PaginationNext v-if="showControls || !!slots.next" as-child data-slot="next" :class="b24ui.next({ class: uiProp?.next })">
         <slot name="next">
           <B24Button :color="color" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : void 0" />
         </slot>
       </PaginationNext>
-      <PaginationLast v-if="showControls || !!slots.last" as-child data-slot="last" :class="b24ui.last({ class: props.b24ui?.last })">
+      <PaginationLast v-if="showControls || !!slots.last" as-child data-slot="last" :class="b24ui.last({ class: uiProp?.last })">
         <slot name="last">
           <B24Button :color="color" :size="size" :icon="lastIcon" :to="to?.(pageCount)" />
         </slot>

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

@@ -93,8 +93,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Pagina
 }, string, import("vue").PublicProps, Readonly<PaginationProps> & Readonly<{
     "onUpdate:page"?: ((value: number) => any) | undefined;
 }>, {
-    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-    activeColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    activeColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
     itemsPerPage: number;
     showEdges: boolean;
     siblingCount: number;

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

@@ -1,3 +1,4 @@
+import type { ComponentPublicInstance } from 'vue';
 import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/pin-input';
@@ -41,6 +42,8 @@ export interface PinInputProps<T extends PinInputType = 'text'> extends Pick<Pin
     autofocus?: boolean;
     autofocusDelay?: number;
     highlight?: boolean;
+    /** Keep the mobile text size on all breakpoints. (Left for backward compatibility.) */
+    fixed?: boolean;
     class?: any;
     b24ui?: PinInput['slots'];
 }
@@ -60,7 +63,7 @@ declare const __VLS_export: <T extends PinInputType>(__VLS_props: NonNullable<Aw
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        inputsRef: import("vue").Ref<any[], any[]>;
+        inputsRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
     attrs: any;
     slots: {};

package/dist/runtime/components/PinInput.vue

@@ -7,6 +7,7 @@ import { ref, computed, onMounted } from "vue";
 import { PinInputInput, PinInputRoot, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
 import { tv } from "../utils/tv";
@@ -21,6 +22,7 @@ const props = defineProps({
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false, default: 0 },
   highlight: { type: Boolean, required: false },
+  fixed: { type: Boolean, required: false },
   class: { type: null, required: false },
   b24ui: { type: Object, required: false },
   defaultValue: { type: null, required: false },
@@ -36,17 +38,22 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "complete", "change", "blur"]);
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("pinInput", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "disabled", "id", "mask", "name", "otp", "required", "type"), emits);
 const { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.pinInput || {} })({
   color: color.value,
   size: size.value,
   highlight: highlight.value,
+  fixed: props.fixed,
   rounded: Boolean(props.rounded),
   noBorder: Boolean(props.noBorder),
   underline: Boolean(props.underline)
 }));
 const inputsRef = ref([]);
+function setInputRef(index, el) {
+  inputsRef.value[index] = el;
+}
 const completed = ref(false);
 function onComplete(value) {
   const event = new Event("change", { target: { value } });
@@ -83,17 +90,17 @@ defineExpose({
     :model-value="modelValue"
     :default-value="defaultValue"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"
   >
     <PinInputInput
       v-for="(ids, index) in looseToNumber(props.length)"
       :key="ids"
-      :ref="(el) => inputsRef[index] = el"
+      :ref="(el) => setInputRef(index, el)"
       :index="index"
       data-slot="base"
-      :class="b24ui.base({ class: props.b24ui?.base })"
+      :class="b24ui.base({ class: uiProp?.base })"
       :disabled="disabled"
       @blur="onBlur"
       @focus="emitFormFocus"