@nuxt/ui 4.9.0 → 4.11.0

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

@@ -21,9 +21,10 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
      */
     size?: Progress['variants']['size'];
     /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
      * @defaultValue 'primary'
      */
-    color?: Progress['variants']['color'];
+    color?: Progress['variants']['color'] | (string & {});
     /**
      * The orientation of the progress bar.
      * @defaultValue 'horizontal'

package/dist/runtime/components/Progress.vue

@@ -76,10 +76,7 @@ const indicatorStyle = computed(() => {
     }
   }
 });
-const statusStyle = computed(() => {
-  const value = `${Math.max(percent.value ?? 0, 0)}%`;
-  return props.orientation === "vertical" ? { height: value } : { width: value };
-});
+const statusStyle = computed(() => ({ "--percent": `${Math.max(percent.value ?? 0, 0)}%` }));
 function isActive(index) {
   return index === Number(props.modelValue);
 }
@@ -102,13 +99,15 @@ function stepVariant(index) {
   }
   return "other";
 }
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.progress || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.progress || {} })({
   animation: props.animation,
   size: props.size,
   color: props.color,
   orientation: props.orientation,
   inverted: props.inverted
 }));
+const themeColors = computed(() => Object.keys({ ...theme.variants?.color, ...appConfig.ui?.progress?.variants?.color }));
+const customColor = computed(() => props.color && !themeColors.value.includes(props.color) ? props.color : void 0);
 </script>
 
 <template>
@@ -120,10 +119,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.progress || {
     </div>
 
     <ProgressRoot v-bind="rootProps" :max="realMax" data-slot="base" :class="ui.base({ class: props.ui?.base })" style="transform: translateZ(0)">
-      <ProgressIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="indicatorStyle" />
+      <ProgressIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })" :style="[indicatorStyle, customColor ? { backgroundColor: customColor } : void 0]" />
     </ProgressRoot>
 
-    <div v-if="hasSteps" data-slot="steps" :class="ui.steps({ class: props.ui?.steps })">
+    <div v-if="hasSteps" data-slot="steps" :class="ui.steps({ class: props.ui?.steps })" :style="customColor ? { color: customColor } : void 0">
       <div v-for="(step, index) in props.max" :key="index" data-slot="step" :class="ui.step({ class: props.ui?.step, step: stepVariant(index) })">
         <slot :name="`step-${index}`" :step="step">
           {{ step }}

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

@@ -21,9 +21,10 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
      */
     size?: Progress['variants']['size'];
     /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
      * @defaultValue 'primary'
      */
-    color?: Progress['variants']['color'];
+    color?: Progress['variants']['color'] | (string & {});
     /**
      * The orientation of the progress bar.
      * @defaultValue 'horizontal'

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

@@ -0,0 +1,91 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/progress-group';
+import type { IconProps } from './Icon.vue';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type ProgressGroup = ComponentConfig<typeof theme, AppConfig, 'progressGroup'>;
+export interface ProgressGroupItem {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /** The part of `max` this segment takes up. */
+    value?: number;
+    /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
+     * @defaultValue 'primary'
+     */
+    color?: ProgressGroup['variants']['color'] | (string & {});
+    slot?: string;
+    class?: any;
+    ui?: Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>;
+    [key: string]: any;
+}
+export interface ProgressGroupProps<T extends ProgressGroupItem = ProgressGroupItem> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    items?: T[];
+    /**
+     * The value all items add up to, used to compute each segment's share of the track.
+     * @defaultValue 100
+     */
+    max?: number;
+    /** Display the summed progress value. */
+    status?: boolean;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: ProgressGroup['variants']['size'];
+    /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
+     * @defaultValue 'primary'
+     */
+    color?: ProgressGroup['variants']['color'] | (string & {});
+    /**
+     * The orientation of the progress bar.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: ProgressGroup['variants']['orientation'];
+    class?: any;
+    ui?: ProgressGroup['slots'];
+}
+type SlotProps<T extends ProgressGroupItem> = (props: {
+    item: T;
+    index: number;
+    percent: number;
+}) => VNode[];
+export type ProgressGroupSlots<T extends ProgressGroupItem = ProgressGroupItem> = {
+    'status'?: (props: {
+        percent: number;
+    }) => VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: SlotProps<T>;
+    'item-trailing'?: SlotProps<T>;
+} & DynamicSlots<T, 'leading' | 'label' | 'trailing', {
+    index: number;
+    percent: number;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ProgressGroupItem>(__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<ProgressGroupProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ProgressGroupSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<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/ProgressGroup.vue

@@ -0,0 +1,99 @@
+<script>
+import theme from "#build/ui/progress-group";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive, ProgressRoot, ProgressIndicator } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentProps } from "../composables/useComponentProps";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+const _props = defineProps({
+  as: { type: null, required: false },
+  items: { type: Array, required: false },
+  max: { type: Number, required: false, default: 100 },
+  status: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const props = useComponentProps("progressGroup", _props);
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.progressGroup || {} })({
+  size: props.size,
+  color: props.color,
+  orientation: props.orientation
+}));
+const max = computed(() => {
+  const value = Number(props.max);
+  return Number.isFinite(value) && value > 0 ? value : 100;
+});
+const values = computed(() => (props.items ?? []).map((item) => Math.min(Math.max(Number(item.value) || 0, 0), max.value)));
+const percents = computed(() => values.value.map((value) => value / max.value * 100));
+const percent = computed(() => Math.min(100, Math.round(percents.value.reduce((total, value) => total + value, 0))));
+const statusStyle = computed(() => ({ "--percent": `${percent.value}%` }));
+const themeColors = computed(() => Object.keys({ ...theme.variants?.color, ...appConfig.ui?.progressGroup?.variants?.color }));
+const itemColors = computed(() => (props.items ?? []).map((item) => item.color || props.color));
+const customColors = computed(() => itemColors.value.map((color) => color && !themeColors.value.includes(color) ? color : void 0));
+const hasList = computed(() => !!props.items?.length && (props.items.some((item) => item.label || item.icon || item.slot) || !!slots.item || !!slots["item-leading"] || !!slots["item-label"] || !!slots["item-trailing"]));
+function segmentStyle(index) {
+  const value = `${percents.value[index] ?? 0}%`;
+  return props.orientation === "vertical" ? { height: value } : { width: value };
+}
+const valueLabels = computed(() => (props.items ?? []).map((item) => {
+  const label = item.label;
+  return label ? () => label : void 0;
+}));
+</script>
+
+<template>
+  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="props.status || !!slots.status" data-slot="status" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
+      <slot name="status" :percent="percent">
+        {{ percent }}%
+      </slot>
+    </div>
+
+    <div data-slot="base" :class="ui.base({ class: props.ui?.base })">
+      <ProgressRoot
+        v-for="(item, index) in props.items"
+        :key="index"
+        :model-value="values[index]"
+        :max="max"
+        :get-value-label="valueLabels[index]"
+        data-slot="segment"
+        :class="ui.segment({ class: [props.ui?.segment, item.ui?.segment] })"
+        :style="segmentStyle(index)"
+      >
+        <ProgressIndicator data-slot="indicator" :class="ui.indicator({ color: itemColors[index], class: [props.ui?.indicator, item.ui?.indicator] })" :style="customColors[index] ? { backgroundColor: customColors[index] } : void 0" />
+      </ProgressRoot>
+    </div>
+
+    <ul v-if="hasList" data-slot="list" :class="ui.list({ class: props.ui?.list })">
+      <li v-for="(item, index) in props.items" :key="index" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
+        <slot :name="item.slot || 'item'" :item="item" :index="index" :percent="percents[index] ?? 0">
+          <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :index="index" :percent="percents[index] ?? 0">
+            <UIcon v-if="item.icon" :name="item.icon" data-slot="itemLeadingIcon" :class="ui.itemLeadingIcon({ color: itemColors[index], class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" :style="customColors[index] ? { color: customColors[index] } : void 0" />
+            <span v-else data-slot="itemLeadingDot" :class="ui.itemLeadingDot({ color: itemColors[index], class: [props.ui?.itemLeadingDot, item.ui?.itemLeadingDot] })" :style="customColors[index] ? { backgroundColor: customColors[index] } : void 0" />
+          </slot>
+
+          <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" data-slot="itemLabel" :class="ui.itemLabel({ class: [props.ui?.itemLabel, item.ui?.itemLabel] })">
+            <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :index="index" :percent="percents[index] ?? 0">
+              {{ item.label }}
+            </slot>
+          </span>
+
+          <span data-slot="itemTrailing" :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, item.ui?.itemTrailing] })">
+            <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :index="index" :percent="percents[index] ?? 0">
+              {{ Math.round(percents[index] ?? 0) }}%
+            </slot>
+          </span>
+        </slot>
+      </li>
+    </ul>
+  </Primitive>
+</template>

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

@@ -0,0 +1,91 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/progress-group';
+import type { IconProps } from './Icon.vue';
+import type { DynamicSlots } from '../types/utils';
+import type { ComponentConfig } from '../types/tv';
+type ProgressGroup = ComponentConfig<typeof theme, AppConfig, 'progressGroup'>;
+export interface ProgressGroupItem {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /** The part of `max` this segment takes up. */
+    value?: number;
+    /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
+     * @defaultValue 'primary'
+     */
+    color?: ProgressGroup['variants']['color'] | (string & {});
+    slot?: string;
+    class?: any;
+    ui?: Pick<ProgressGroup['slots'], 'segment' | 'indicator' | 'item' | 'itemLeadingIcon' | 'itemLeadingDot' | 'itemLabel' | 'itemTrailing'>;
+    [key: string]: any;
+}
+export interface ProgressGroupProps<T extends ProgressGroupItem = ProgressGroupItem> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    items?: T[];
+    /**
+     * The value all items add up to, used to compute each segment's share of the track.
+     * @defaultValue 100
+     */
+    max?: number;
+    /** Display the summed progress value. */
+    status?: boolean;
+    /**
+     * @defaultValue 'md'
+     */
+    size?: ProgressGroup['variants']['size'];
+    /**
+     * Any theme color, or any CSS color value for palettes outside the theme.
+     * @defaultValue 'primary'
+     */
+    color?: ProgressGroup['variants']['color'] | (string & {});
+    /**
+     * The orientation of the progress bar.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: ProgressGroup['variants']['orientation'];
+    class?: any;
+    ui?: ProgressGroup['slots'];
+}
+type SlotProps<T extends ProgressGroupItem> = (props: {
+    item: T;
+    index: number;
+    percent: number;
+}) => VNode[];
+export type ProgressGroupSlots<T extends ProgressGroupItem = ProgressGroupItem> = {
+    'status'?: (props: {
+        percent: number;
+    }) => VNode[];
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: SlotProps<T>;
+    'item-trailing'?: SlotProps<T>;
+} & DynamicSlots<T, 'leading' | 'label' | 'trailing', {
+    index: number;
+    percent: number;
+}>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends ProgressGroupItem>(__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<ProgressGroupProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ProgressGroupSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<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/RadioGroup.d.vue.ts

@@ -2,6 +2,7 @@ import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/radio-group';
+import type { IconProps } from './Icon.vue';
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type RadioGroup = ComponentConfig<typeof theme, AppConfig, 'radioGroup'>;
@@ -11,8 +12,13 @@ export type RadioGroupItem = RadioGroupValue | {
     description?: string;
     disabled?: boolean;
     value?: RadioGroupValue;
+    /**
+     * The icon displayed above the label when `indicator` is `hidden`.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>;
+    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>;
     [key: string]: any;
 };
 export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<RadioGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'> {
@@ -98,7 +104,7 @@ declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<
     slots: RadioGroupSlots<T>;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/RadioGroup.vue

@@ -12,6 +12,7 @@ import { useForwardProps } from "../composables/useForwardProps";
 import { useFormField } from "../composables/useFormField";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
 const _props = defineProps({
   as: { type: null, required: false },
   legend: { type: String, required: false },
@@ -39,12 +40,16 @@ const slots = defineSlots();
 const props = useComponentProps("radioGroup", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "as", "loop", "required"), emits);
-const { emitFormChange, emitFormInput, color, name, size, highlight, id: _id, disabled, ariaAttrs } = useFormField(_props, { bind: false });
+const { emitFormChange, emitFormInput, color: formFieldColor, name, size: formFieldSize, highlight: formFieldHighlight, id: _id, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props, { bind: false });
 const id = _id.value ?? useId();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.radioGroup || {} })({
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
-  highlight: highlight.value ?? props.highlight,
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.radioGroup || {} })({
+  size: size.value,
+  color: color.value,
+  highlight: highlight.value,
   disabled: disabled.value,
   required: props.required,
   orientation: props.orientation,
@@ -83,6 +88,9 @@ const normalizedItems = computed(() => {
   }
   return props.items.map(normalizeItem);
 });
+function labelIcon(item) {
+  return props.indicator === "hidden" ? item.icon : void 0;
+}
 function onUpdate(value) {
   const event = new Event("change", { target: { value } });
   emits("change", event);
@@ -124,7 +132,8 @@ function onUpdate(value) {
           </RRadioGroupItem>
         </div>
 
-        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+        <div v-if="labelIcon(item) || (item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <UIcon v-if="labelIcon(item)" :name="labelIcon(item)" data-slot="icon" :class="ui.icon({ class: [props.ui?.icon, item.ui?.icon] })" />
           <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled || disabled })">
             <slot name="label" :item="item" :model-value="props.modelValue">
               {{ item.label }}

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

@@ -2,6 +2,7 @@ import type { RadioGroupRootProps, RadioGroupRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/radio-group';
+import type { IconProps } from './Icon.vue';
 import type { AcceptableValue, GetItemKeys, GetModelValue, GetModelValueEmits } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type RadioGroup = ComponentConfig<typeof theme, AppConfig, 'radioGroup'>;
@@ -11,8 +12,13 @@ export type RadioGroupItem = RadioGroupValue | {
     description?: string;
     disabled?: boolean;
     value?: RadioGroupValue;
+    /**
+     * The icon displayed above the label when `indicator` is `hidden`.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
     class?: any;
-    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>;
+    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'icon' | 'description'>;
     [key: string]: any;
 };
 export interface RadioGroupProps<T extends RadioGroupItem[] = RadioGroupItem[], VK extends GetItemKeys<T> = 'value'> extends Pick<RadioGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'> {
@@ -98,7 +104,7 @@ declare const __VLS_export: <T extends RadioGroupItem[], VK extends GetItemKeys<
     slots: RadioGroupSlots<T>;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -4,7 +4,13 @@ import type { VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/ui/scroll-area';
 import type { ComponentConfig } from '../types/tv';
 type ScrollArea = ComponentConfig<typeof theme, AppConfig, 'scrollArea'>;
-export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'getScrollElement' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
+export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
+    /**
+     * Virtualize against an external scroll element instead of the component's own root.
+     * Pair with `scrollMargin` set to the content's offset from the scroll element's start.
+     * @defaultValue undefined
+     */
+    getScrollElement?: () => Element | null;
     /**
      * Estimated size (in px) of each item along the scroll axis. Can be a number or a function.
      * @defaultValue 100
@@ -95,7 +101,7 @@ declare const __VLS_export: <T extends ScrollAreaItem>(__VLS_props: NonNullable<
     slots: ScrollAreaSlots<T>;
     emit: (evt: "scroll", isScrolling: boolean) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ScrollArea.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/scroll-area";
 </script>
 
 <script setup>
-import { computed, onMounted, onUnmounted, toRef, useTemplateRef, watch } from "vue";
+import { computed, onUnmounted, toRef, useTemplateRef, watch } from "vue";
 import { Primitive } from "reka-ui";
 import { defu } from "defu";
 import { useVirtualizer } from "@tanstack/vue-virtual";
@@ -26,8 +26,10 @@ const emits = defineEmits(["scroll"]);
 const props = useComponentProps("scrollArea", _props);
 const { dir } = useLocale();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.scrollArea || {} })({
-  orientation: props.orientation
+const isExternalScroll = computed(() => typeof props.virtualize === "object" && !!props.virtualize.getScrollElement);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.scrollArea || {} })({
+  orientation: props.orientation,
+  externalScroll: isExternalScroll.value
 }));
 const rootRef = useTemplateRef("rootRef");
 const scrollShadowStyle = props.shadow ? useScrollShadow(
@@ -40,6 +42,7 @@ const scrollShadowStyle = props.shadow ? useScrollShadow(
 const isRtl = computed(() => dir.value === "rtl");
 const isHorizontal = computed(() => props.orientation === "horizontal");
 const isVertical = computed(() => !isHorizontal.value);
+const getScrollElement = () => (isExternalScroll.value ? virtualizerProps.value.getScrollElement?.() : rootRef.value?.$el) ?? null;
 const virtualizerProps = toRef(() => {
   const options = typeof props.virtualize === "boolean" ? {} : props.virtualize;
   return defu(options, {
@@ -84,7 +87,7 @@ const virtualizer = !!props.virtualize && useVirtualizer({
   get count() {
     return props.items?.length || 0;
   },
-  getScrollElement: () => rootRef.value?.$el,
+  getScrollElement,
   get horizontal() {
     return isHorizontal.value;
   },
@@ -104,6 +107,7 @@ function getVirtualItemStyle(virtualItem) {
   const hasLanes = lanes.value !== void 0 && lanes.value > 1;
   const lane = virtualItem.lane;
   const gap = virtualizerProps.value.gap ?? 0;
+  const offset = virtualItem.start - virtualizerProps.value.scrollMargin;
   const laneSize = hasLanes ? `calc((100% - ${(lanes.value - 1) * gap}px) / ${lanes.value})` : "100%";
   const lanePosition = hasLanes && lane !== void 0 ? `calc(${lane} * ((100% - ${(lanes.value - 1) * gap}px) / ${lanes.value} + ${gap}px))` : 0;
   return {
@@ -112,26 +116,28 @@ function getVirtualItemStyle(virtualItem) {
     insetInlineStart: isVertical.value && hasLanes ? lanePosition : 0,
     blockSize: isHorizontal.value ? hasLanes ? laneSize : "100%" : void 0,
     inlineSize: isVertical.value ? hasLanes ? laneSize : "100%" : void 0,
-    transform: isHorizontal.value ? `translateX(${isRtl.value ? -virtualItem.start : virtualItem.start}px)` : `translateY(${virtualItem.start}px)`
+    transform: isHorizontal.value ? `translateX(${isRtl.value ? -offset : offset}px)` : `translateY(${offset}px)`
   };
 }
 let resizeObserver = null;
 let rafId = null;
-onMounted(() => {
-  if (virtualizer) {
-    const el = rootRef.value?.$el;
-    if (el) {
-      resizeObserver = new ResizeObserver(() => {
-        if (rafId !== null) return;
-        rafId = requestAnimationFrame(() => {
-          rafId = null;
-          virtualizer.value.measure();
-        });
+watch(
+  getScrollElement,
+  (el) => {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    if (!virtualizer || !el) return;
+    resizeObserver = new ResizeObserver(() => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        virtualizer.value.measure();
       });
-      resizeObserver.observe(el);
-    }
-  }
-});
+    });
+    resizeObserver.observe(el);
+  },
+  { immediate: true }
+);
 onUnmounted(() => {
   if (rafId !== null) {
     cancelAnimationFrame(rafId);

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

@@ -4,7 +4,13 @@ import type { VirtualItem, VirtualizerOptions } from '@tanstack/vue-virtual';
 import theme from '#build/ui/scroll-area';
 import type { ComponentConfig } from '../types/tv';
 type ScrollArea = ComponentConfig<typeof theme, AppConfig, 'scrollArea'>;
-export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'getScrollElement' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
+export interface ScrollAreaVirtualizeOptions extends Partial<Omit<VirtualizerOptions<Element, Element>, 'count' | 'horizontal' | 'isRtl' | 'estimateSize' | 'lanes' | 'enabled'>> {
+    /**
+     * Virtualize against an external scroll element instead of the component's own root.
+     * Pair with `scrollMargin` set to the content's offset from the scroll element's start.
+     * @defaultValue undefined
+     */
+    getScrollElement?: () => Element | null;
     /**
      * Estimated size (in px) of each item along the scroll axis. Can be a number or a function.
      * @defaultValue 100
@@ -95,7 +101,7 @@ declare const __VLS_export: <T extends ScrollAreaItem>(__VLS_props: NonNullable<
     slots: ScrollAreaSlots<T>;
     emit: (evt: "scroll", isScrolling: boolean) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -3,7 +3,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/select';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
-import type { AvatarProps, ChipProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ChipProps } from './Chip.vue';
+import type { IconProps } from './Icon.vue';
 import type { ModelModifiers, ApplyModifiers } from '../types/input';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, NestedItem, EmitsToProps } from '../types/utils';
@@ -209,7 +211,7 @@ declare const __VLS_export: <T extends ArrayOrNested<SelectItem>, VK extends Get
         nullable: true;
     } ? GetModelValue<T, VK, M, ExcludeItem> | null : GetModelValue<T, VK, M, ExcludeItem>) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];