@nuxt/ui 4.10.0 → 4.11.1

package/dist/runtime/components/Listbox.vue

@@ -1,9 +1,9 @@
 <script>
-import { computed, toRaw, toRef } from "vue";
 import theme from "#build/ui/listbox";
 </script>
 
 <script setup>
+import { computed, toRaw, toRef } from "vue";
 import { ListboxRoot, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem as RekaListboxItem, ListboxItemIndicator, ListboxFilter } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { createReusableTemplate, reactivePick } from "@vueuse/core";
@@ -65,11 +65,15 @@ const rootProps = useForwardProps(reactivePick(props, "as", "modelValue", "defau
 const virtualizerProps = toRef(() => {
   if (!props.virtualize) return false;
   return defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
-    estimateSize: getEstimateSize(filteredItems.value, size.value || "md", props.descriptionKey, !!slots["item-description"])
+    estimateSize: getEstimateSize(filteredItems.value, size.value ?? "md", props.descriptionKey, !!slots["item-description"])
   });
 });
 const inputProps = toRef(() => defu(typeof props.filter === "object" ? props.filter : {}, { placeholder: t("listbox.search"), variant: "none" }));
-const { emitFormChange, emitFormInput, name, size, color, id, highlight, disabled, ariaAttrs } = useFormField(_props, { bind: false });
+const { emitFormChange, emitFormInput, name, size: formFieldSize, color: formFieldColor, id, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props, { bind: false });
+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 [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   props: {
     item: {
@@ -83,9 +87,9 @@ const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate({
   }
 });
 const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.listbox || {} })({
-  color: color.value ?? props.color,
-  size: size.value ?? props.size,
-  highlight: highlight.value ?? props.highlight,
+  color: color.value,
+  size: size.value,
+  highlight: highlight.value,
   disabled: disabled.value,
   virtualize: !!props.virtualize
 }));

package/dist/runtime/components/Modal.vue

@@ -73,10 +73,10 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.modal || {} })({
         data-slot="content"
         :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
         v-bind="contentProps"
-        @enter="emits('enter')"
-        @after-enter="emits('after:enter')"
-        @leave="emits('leave')"
-        @after-leave="emits('after:leave')"
+        @enter="!props.scrollable && emits('enter')"
+        @after-enter="!props.scrollable && emits('after:enter')"
+        @leave="!props.scrollable && emits('leave')"
+        @after-leave="!props.scrollable && emits('after:leave')"
         v-on="contentEvents"
       >
         <VisuallyHidden v-if="!props.title && !slots.title || !props.description && !slots.description || !!slots.content">
@@ -149,7 +149,14 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.modal || {} })({
     <DialogPortal v-bind="portalProps" :force-mount="portalProps.disabled && props.unmountOnHide === false || void 0">
       <FieldGroupReset>
         <template v-if="props.scrollable">
-          <DialogOverlay data-slot="overlay" :class="ui.overlay({ class: props.ui?.overlay })">
+          <DialogOverlay
+            data-slot="overlay"
+            :class="ui.overlay({ class: props.ui?.overlay })"
+            @enter="emits('enter')"
+            @after-enter="emits('after:enter')"
+            @leave="emits('leave')"
+            @after-leave="emits('after:leave')"
+          >
             <ReuseContentTemplate />
           </DialogOverlay>
         </template>

package/dist/runtime/components/NavigationMenu.vue

@@ -106,13 +106,13 @@ function getAccordionDefaultValue(list, level = 0, listIndex = 0) {
   }, []);
   return props.type === "single" ? indexes[0] : indexes;
 }
-function onLinkTrailingClick(e, item) {
+function onLinkTrailingClick(e, item, trailingTrigger) {
   if (!item.children?.length) {
     return;
   }
   if (props.orientation === "horizontal") {
     e.preventDefault();
-  } else if (props.orientation === "vertical" && !props.collapsed) {
+  } else if (props.orientation === "vertical" && !props.collapsed && trailingTrigger) {
     e.preventDefault();
     e.stopPropagation();
   }
@@ -120,7 +120,7 @@ function onLinkTrailingClick(e, item) {
 </script>
 
 <template>
-  <DefineLinkTemplate v-slot="{ item, active, index }">
+  <DefineLinkTemplate v-slot="{ item, active, index, trailingTrigger }">
     <slot :name="item.slot || 'item'" :item="item" :index="index" :active="active" :ui="ui">
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index" :ui="ui">
         <UAvatar v-if="item.avatar" :size="item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" data-slot="linkLeadingAvatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
@@ -149,12 +149,12 @@ function onLinkTrailingClick(e, item) {
       </span>
 
       <component
-        :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? AccordionTrigger : 'span'"
+        :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed && trailingTrigger ? AccordionTrigger : 'span'"
         v-if="item.badge || item.badge === 0 || props.orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || props.orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing']"
-        :as="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? 'span' : void 0"
+        :as="props.orientation === 'vertical' && item.children?.length && !props.collapsed && trailingTrigger ? 'span' : void 0"
         data-slot="linkTrailing"
         :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
-        @click="(e) => onLinkTrailingClick(e, item)"
+        @click="(e) => onLinkTrailingClick(e, item, trailingTrigger)"
       >
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index" :ui="ui">
           <UBadge
@@ -182,7 +182,7 @@ function onLinkTrailingClick(e, item) {
       :value="getItemValue(item, index, level, listIndex)"
     >
       <div v-if="props.orientation === 'vertical' && item.type === 'label' && !props.collapsed" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
-        <ReuseLinkTemplate :item="item" :index="index" />
+        <ReuseLinkTemplate :item="item" :index="index" :trailing-trigger="true" />
       </div>
       <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="props.orientation === 'vertical' && item.children?.length && !props.collapsed && item.type === 'trigger' ? {} : pickLinkProps(item)" custom>
         <component
@@ -194,7 +194,7 @@ function onLinkTrailingClick(e, item) {
         >
           <UPopover v-if="props.orientation === 'vertical' && props.collapsed && item.children?.length && (!!props.popover || !!item.popover)" v-bind="{ ...popoverProps, ...typeof item.popover === 'boolean' ? {} : item.popover || {} }" :ui="{ content: ui.content({ class: [props.ui?.content, item.ui?.content] }) }">
             <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
-              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" :trailing-trigger="!!slotProps.href" />
             </ULinkBase>
 
             <template #content="{ close }">
@@ -231,11 +231,11 @@ function onLinkTrailingClick(e, item) {
           </UPopover>
           <UTooltip v-else-if="props.orientation === 'vertical' && props.collapsed && (!!props.tooltip || !!item.tooltip) || props.orientation === 'horizontal' && !!item.tooltip" :text="get(item, props.labelKey)" v-bind="{ ...tooltipProps, ...typeof item.tooltip === 'boolean' ? {} : item.tooltip || {} }">
             <ULinkBase v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: level > 0 })">
-              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" :trailing-trigger="!!slotProps.href" />
             </ULinkBase>
           </UTooltip>
           <ULinkBase v-else v-bind="slotProps" data-slot="link" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: props.orientation === 'horizontal' || level > 0 })">
-            <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" :trailing-trigger="!!slotProps.href" />
           </ULinkBase>
         </component>
 

package/dist/runtime/components/PinInput.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/pin-input";
 </script>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, onScopeDispose } from "vue";
 import { PinInputInput, PinInputRoot } from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { reactivePick } from "@vueuse/core";
@@ -41,26 +41,29 @@ defineSlots();
 const props = useComponentProps("pinInput", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(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 { emitFormInput, emitFormFocus, emitFormChange, emitFormBlur, size: formFieldSize, color: formFieldColor, id, name, highlight: formFieldHighlight, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
+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?.pinInput || {} })({
-  color: color.value ?? props.color,
+  color: color.value,
   variant: props.variant,
-  size: size.value ?? props.size,
-  highlight: highlight.value ?? props.highlight,
+  size: size.value,
+  highlight: highlight.value,
   fixed: props.fixed
 }));
 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 } });
   emits("change", event);
   emitFormChange();
 }
 function onBlur(event) {
-  if (!event.relatedTarget || completed.value) {
+  if (!event.relatedTarget) {
     emits("blur", event);
     emitFormBlur();
   }
@@ -84,11 +87,13 @@ function shouldInsertSeparator(index) {
   const separator = looseToNumber(props.separator);
   return Number.isInteger(separator) && separator > 0 && position % separator === 0;
 }
+let autofocusTimeoutId;
 onMounted(() => {
-  setTimeout(() => {
+  autofocusTimeoutId = setTimeout(() => {
     autoFocus();
   }, props.autofocusDelay);
 });
+onScopeDispose(() => clearTimeout(autofocusTimeoutId));
 defineExpose({
   inputsRef
 });

package/dist/runtime/components/Popover.vue

@@ -5,7 +5,6 @@ import theme from "#build/ui/popover";
 <script setup>
 import { computed, toRef } from "vue";
 import { defu } from "defu";
-import {} from "reka-ui";
 import { useForwardProps } from "../composables/useForwardProps";
 import { Popover, HoverCard } from "reka-ui/namespaced";
 import { reactivePick } from "@vueuse/core";

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

@@ -49,7 +49,7 @@ export interface PricingTableProps<T extends PricingTableTier = PricingTableTier
     as?: any;
     /**
      * The caption to display above the table.
-     * @defeaultValue t('pricingTable.caption')
+     * @defaultValue t('pricingTable.caption')
      */
     caption?: string;
     /**

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

@@ -49,7 +49,7 @@ export interface PricingTableProps<T extends PricingTableTier = PricingTableTier
     as?: any;
     /**
      * The caption to display above the table.
-     * @defeaultValue t('pricingTable.caption')
+     * @defaultValue t('pricingTable.caption')
      */
     caption?: string;
     /**

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);
 }
@@ -109,6 +106,8 @@ const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.progress || {} })
   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: 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'> {