@byyuurin/ui 0.1.0 → 0.2.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@byyuurin/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "configKey": "ui",
   "compatibility": {
     "nuxt": ">=3.16.2"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defineNuxtModule, createResolver, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
 import { defu } from 'defu';
-import { v as version, n as name, a as addTemplates } from './shared/ui.DSyJHSTk.mjs';
+import { v as version, n as name, a as addTemplates } from './shared/ui.DLOxhmP0.mjs';
 import { d as defaultOptions, r as resolveColors, g as getDefaultUIConfig } from './shared/ui.CzIlLITK.mjs';
 import 'node:process';
 import 'node:url';

package/dist/runtime/components/Accordion.vue

@@ -48,7 +48,7 @@ const ui = computed(() => {
       <AccordionHeader as="div" :class="ui.header({ class: [props.ui?.header, item.ui?.header] })" data-part="header">
         <AccordionTrigger :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger], disabled: item.disabled })" data-part="trigger">
           <slot name="leading" v-bind="{ item, index, open, ui }">
-            <Icon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" data-part="leading-icon" />
+            <Icon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" data-part="leadingIcon" />
           </slot>
 
           <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })" data-part="label">
@@ -56,7 +56,7 @@ const ui = computed(() => {
           </span>
 
           <slot name="trailing" v-bind="{ item, index, open, ui }">
-            <Icon :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" data-part="trailing-icon" />
+            <Icon :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon({ class: [props.ui?.trailingIcon, item.ui?.trailingIcon] })" data-part="trailingIcon" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>

package/dist/runtime/components/Badge.vue

@@ -49,14 +49,14 @@ const ui = computed(() => {
         v-if="isLeading && leadingIconName"
         :name="leadingIconName"
         :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
-        data-part="leading-icon"
+        data-part="leadingIcon"
       />
       <Avatar
         v-else-if="props.avatar"
         :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
         v-bind="props.avatar"
         :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
-        data-part="leading-avatar"
+        data-part="leadingAvatar"
       />
     </slot>
 
@@ -71,7 +71,7 @@ const ui = computed(() => {
         v-if="isTrailing && trailingIconName"
         :name="trailingIconName"
         :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
-        data-part="trailing-icon"
+        data-part="trailingIcon"
       />
     </slot>
   </Primitive>

package/dist/runtime/components/Breadcrumb.vue

@@ -50,18 +50,18 @@ const ui = computed(() => {
                     v-if="item.icon"
                     :name="item.icon"
                     :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
-                    data-part="link-leading-icon"
+                    data-part="linkLeadingIcon"
                   />
                   <Avatar
                     v-else-if="item.avatar"
                     :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()"
                     v-bind="item.avatar"
                     :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
-                    data-part="link-leading-avatar"
+                    data-part="linkLeadingAvatar"
                   />
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })" data-part="link-label">
+                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })" data-part="linkLabel">
                   <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="item.active ?? index === items.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
@@ -75,7 +75,7 @@ const ui = computed(() => {
 
         <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })" data-part="separator">
           <slot name="separator" :ui="ui">
-            <Icon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" data-part="separator-icon" />
+            <Icon :name="separatorIcon" :class="ui.separatorIcon({ class: [props.ui?.separatorIcon, item.ui?.separatorIcon] })" data-part="separatorIcon" />
           </slot>
         </li>
       </template>

package/dist/runtime/components/Button.vue

@@ -132,14 +132,14 @@ const ui = computed(() => {
           v-if="isLeading && leadingIconName"
           :name="leadingIconName"
           :class="ui.leadingIcon({ class: props.ui?.leadingIcon, active })"
-          data-part="leading-icon"
+          data-part="leadingIcon"
         />
         <Avatar
           v-else-if="props.avatar"
           :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
           v-bind="props.avatar"
           :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar, active })"
-          data-part="leading-avatar"
+          data-part="leadingAvatar"
         />
       </slot>
 
@@ -158,7 +158,7 @@ const ui = computed(() => {
           v-if="isTrailing && trailingIconName"
           :name="trailingIconName"
           :class="ui.trailingIcon({ class: props.ui?.trailingIcon, active })"
-          data-part="trailing-icon"
+          data-part="trailingIcon"
         />
       </slot>
     </LinkBase>

package/dist/runtime/components/Calendar.vue

@@ -58,7 +58,7 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue", "update:placeholder", "update:validModelValue", "update:startValue"]);
 defineSlots();
 const rootProps = useForwardPropsEmits(reactiveOmit(props, "range", "modelValue", "defaultValue", "size", "color", "variant", "monthControls", "yearControls", "class", "ui"), emit);
-const { code: locale, dir, t } = useLocale();
+const { dir, t } = useLocale();
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.calendar));
@@ -85,8 +85,6 @@ const Calendar = computed(() => props.range ? RangeCalendar : BaseCalendar);
     v-bind="rootProps"
     :model-value="props.modelValue"
     :default-value="props.defaultValue"
-    :locale="locale"
-    :dir="dir"
     :class="ui.root({ class: [props.class, props.ui?.root] })"
     data-part="root"
   >
@@ -118,20 +116,20 @@ const Calendar = computed(() => props.range ? RangeCalendar : BaseCalendar);
         data-part="grid"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })" data-part="grid-week-day-row">
-            <Calendar.HeadCell v-for="day in weekDays" :key="day" :class="ui.headCell({ class: props.ui?.headCell })" data-part="head-cell">
+          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })" data-part="gridWeekDaysRow">
+            <Calendar.HeadCell v-for="day in weekDays" :key="day" :class="ui.headCell({ class: props.ui?.headCell })" data-part="headCell">
               <slot name="week-day" :day="day">
                 {{ day }}
               </slot>
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })" data-part="grid-body">
+        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })" data-part="gridBody">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDates-${index}`"
             :class="ui.gridRow({ class: props.ui?.gridRow })"
-            data-part="grid-row"
+            data-part="gridRow"
           >
             <Calendar.Cell
               v-for="weekDate in weekDates"
@@ -144,7 +142,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : BaseCalendar);
                 :day="weekDate"
                 :month="month.value"
                 :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
-                data-part="cell-trigger"
+                data-part="cellTrigger"
               >
                 <slot name="day" :day="weekDate">
                   {{ weekDate.day }}

package/dist/runtime/components/Carousel.vue

@@ -57,6 +57,16 @@ const ui = computed(() => {
 const rootProps = useForwardProps(reactivePick(props, "active", "align", "breakpoints", "containScroll", "dragFree", "dragThreshold", "duration", "inViewThreshold", "loop", "skipSnaps", "slidesToScroll", "startIndex", "watchDrag", "watchResize", "watchSlides", "watchFocus"));
 const prevIcon = computed(() => props.prevIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft));
 const nextIcon = computed(() => props.nextIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
+const stopAutoplayOnInteraction = computed(() => {
+  if (typeof props.autoplay == "boolean")
+    return true;
+  return props.autoplay.stopOnInteraction ?? true;
+});
+const stopAutoScrollOnInteraction = computed(() => {
+  if (typeof props.autoScroll === "boolean")
+    return true;
+  return props.autoScroll.stopOnInteraction ?? true;
+});
 const options = computed(() => ({
   ...props.fade ? { align: "center", containScroll: false } : {},
   ...rootProps.value,
@@ -100,14 +110,23 @@ const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins);
 watch(options, () => {
   emblaApi.value?.reInit(options.value, plugins.value);
 }, { flush: "post" });
+function stopOnInteraction() {
+  if (stopAutoplayOnInteraction.value)
+    emblaApi.value?.plugins().autoplay?.stop();
+  if (stopAutoScrollOnInteraction.value)
+    emblaApi.value?.plugins().autoScroll?.stop();
+}
 function scrollPrev() {
   emblaApi.value?.scrollPrev();
+  stopOnInteraction();
 }
 function scrollNext() {
   emblaApi.value?.scrollNext();
+  stopOnInteraction();
 }
 function scrollTo(index) {
   emblaApi.value?.scrollTo(index);
+  stopOnInteraction();
 }
 function onKeyDown(event) {
   let prevKey;

package/dist/runtime/components/Checkbox.vue

@@ -55,7 +55,7 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="!props.variant || props.variant === 'list' ? props.as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+  <Primitive :as="props.variant && props.variant !== 'list' ? Label : props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
     <div :class="ui.container({ class: props.ui?.container })" data-part="container">
       <CheckboxRoot
         v-bind="{ id, ...rootProps, ...$attrs, ...ariaAttrs, name, disabled }"

package/dist/runtime/components/CheckboxGroup.vue

@@ -0,0 +1,131 @@
+<script>
+import theme from "#build/ui/checkbox-group";
+</script>
+
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from "reka-ui";
+import { computed, useId } from "vue";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { get, omit } from "../utils";
+import { cv, merge } from "../utils/style";
+import Checkbox from "./Checkbox.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  legend: { type: String, required: false },
+  valueKey: { type: null, required: false, default: "value" },
+  labelKey: { type: null, required: false, default: "label" },
+  descriptionKey: { type: null, required: false, default: "description" },
+  items: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
+  size: { type: null, required: false },
+  variant: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  disabled: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  indicator: { type: null, required: false },
+  icon: { type: [String, Object], required: false }
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emit);
+const checkboxProps = useForwardProps(reactivePick(props, "indicator", "icon"));
+const getProxySlots = () => omit(slots, ["legend"]);
+const { id: _id, name, color, size, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormField(props, { bind: false });
+const id = _id.value ?? useId();
+function normalizeItem(item) {
+  const itemBase = {
+    disabled: disabled.value,
+    label: void 0,
+    description: void 0,
+    value: void 0,
+    ui: void 0,
+    class: void 0
+  };
+  if (typeof item === "object" && item === null) {
+    return {
+      ...itemBase,
+      id: `${id}:null`,
+      value: null
+    };
+  }
+  if (typeof item === "boolean" || typeof item === "string" || typeof item === "number" || typeof item === "bigint") {
+    return {
+      ...itemBase,
+      id: `${id}:${item}`,
+      label: String(item),
+      value: item
+    };
+  }
+  const value = get(item, props.valueKey);
+  const label = get(item, props.labelKey);
+  const description = get(item, props.descriptionKey);
+  return {
+    ...itemBase,
+    ...item,
+    value,
+    label,
+    description,
+    id: `${id}:${value}`
+  };
+}
+const normalizedItems = computed(() => {
+  if (!props.items)
+    return [];
+  return props.items.map(normalizeItem);
+});
+function onUpdate(value) {
+  const event = new Event("change", { target: { value } });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.checkboxGroup));
+  return styler({
+    ...props,
+    size: size.value,
+    color: color.value
+  });
+});
+</script>
+
+<template>
+  <CheckboxGroupRoot
+    v-bind="{ ...rootProps, id, name, disabled }"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <fieldset v-bind="ariaAttrs" :class="ui.fieldset({ class: props.ui?.fieldset })" data-part="fieldset">
+      <legend v-if="props.legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })" data-part="legend">
+        <slot name="legend">
+          {{ props.legend }}
+        </slot>
+      </legend>
+
+      <Checkbox
+        v-for="item in normalizedItems"
+        :key="item.id"
+        v-bind="{ ...item, ...checkboxProps, color, size, name }"
+        :variant="props.variant"
+        :disabled="item.disabled || disabled"
+        :ui="{ ...props.ui ? omit(props.ui, ['root']) : void 0, ...item.ui || {} }"
+        :class="ui.item({ disabled: item.disabled || disabled, class: [props.ui?.item, item.ui?.item, item.class] })"
+        data-part="item"
+      >
+        <template v-for="(_, name) in getProxySlots()" #[name]>
+          <slot :name="name" :item="item"></slot>
+        </template>
+      </Checkbox>
+    </fieldset>
+  </CheckboxGroupRoot>
+</template>

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

@@ -0,0 +1,89 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { CheckboxGroupRootEmits, CheckboxGroupRootProps, CheckboxRootProps } from 'reka-ui';
+import theme from '#build/ui/checkbox-group';
+import type { CheckboxProps, ComponentBaseProps, ComponentUIProps } from '../types';
+import type { AcceptableValue, GetItemKeys, GetModelValue, StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export type CheckboxGroupValue = AcceptableValue;
+interface CheckboxGroupItemBase {
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    value?: AcceptableValue;
+    class?: ComponentBaseProps['class'];
+    ui?: Pick<ComponentUIProps<typeof theme>, 'item'> & Omit<Required<CheckboxProps>['ui'], 'root'>;
+}
+export type CheckboxGroupItem = CheckboxGroupValue | (CheckboxGroupItemBase & {
+    [key: string]: any;
+});
+export interface CheckboxGroupProps<T extends CheckboxGroupItem[] = CheckboxGroupItem[], VK extends GetItemKeys<T> = 'value'> extends ComponentBaseProps, Pick<CheckboxGroupRootProps, 'disabled' | 'loop' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'indicator' | 'icon'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: CheckboxRootProps['as'];
+    legend?: string;
+    /**
+     * When `items` is an array of objects, select the field to use as the value.
+     * @default "value"
+     */
+    valueKey?: VK;
+    /**
+     * When `items` is an array of objects, select the field to use as the label.
+     * @default "label"
+     */
+    labelKey?: GetItemKeys<T>;
+    /**
+     * When `items` is an array of objects, select the field to use as the description.
+     * @default "description"
+     */
+    descriptionKey?: GetItemKeys<T>;
+    items?: T;
+    /** The controlled value of the CheckboxGroup. Can be bind as `v-model`. */
+    modelValue?: GetModelValue<T, VK, true>;
+    /** The value of the CheckboxGroup when initially rendered. Use when you do not need to control the state of the CheckboxGroup. */
+    defaultValue?: GetModelValue<T, VK, true>;
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "list" */
+    variant?: ThemeVariants['variant'];
+    /**
+     * The orientation the checkbox buttons are laid out.
+     * @default "vertical"
+     */
+    orientation?: ThemeVariants['orientation'];
+    ui?: ComponentUIProps<typeof theme>;
+}
+export type CheckboxGroupEmits<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> = CheckboxGroupRootEmits<T[number]> & {
+    change: [event: Event];
+};
+export interface CheckboxGroupSlots<T extends CheckboxGroupItem[] = CheckboxGroupItem[]> {
+    legend: StaticSlot;
+    label: StaticSlot<{
+        item: T[number] & {
+            id: string;
+        };
+    }>;
+    description: StaticSlot<{
+        item: T[number] & {
+            id: string;
+        };
+    }>;
+}
+declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<CheckboxGroupProps<T, VK> & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T[number][]) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: CheckboxGroupSlots<CheckboxGroupItem[]>;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: T[number][]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/DropdownMenuContent.vue

@@ -73,32 +73,32 @@ const groups = computed(
           v-if="item.loading"
           :name="loadingIcon || appConfig.ui.icons.loading"
           :class="props.ui.itemLeadingIcon({ class: [props.uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item.color, loading: true })"
-          data-part="item-leading-icon"
+          data-part="itemLeadingIcon"
         />
         <Icon
           v-else-if="item.icon"
           :name="item.icon"
           :class="props.ui.itemLeadingIcon({ class: [props.uiOverride?.itemLeadingIcon, item.ui?.itemLeadingIcon], color: item.color, active })"
-          data-part="item-leading-icon"
+          data-part="itemLeadingIcon"
         />
         <Avatar
           v-else-if="item.avatar"
           v-bind="item.avatar"
           :size="item.avatar.size || props.size"
           :class="props.ui.itemLeadingAvatar({ class: [props.uiOverride?.itemLeadingAvatar, item.ui?.itemLeadingAvatar], active })"
-          data-part="item-leading-avatar"
+          data-part="itemLeadingAvatar"
         />
       </slot>
 
       <span
         v-if="get(item, props.labelKey) || !!slots[`${item.slot || 'item'}-label`] || (get(item, props.descriptionKey) || !!slots[`${item.slot || 'item'}-description`])"
         :class="props.ui.itemWrapper({ class: [props.uiOverride?.itemWrapper, item.ui?.itemWrapper] })"
-        data-part="item-wrapper"
+        data-part="itemWrapper"
       >
         <span
           v-if="get(item, props.labelKey) || !!slots[`${item.slot || 'item'}-label`]"
           :class="props.ui.itemLabel({ class: [props.uiOverride?.itemLabel, item.ui?.itemLabel], active })"
-          data-part="item-label"
+          data-part="itemLabel"
         >
           <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="active" :index="index">
             {{ get(item, props.labelKey) }}
@@ -108,21 +108,21 @@ const groups = computed(
             v-if="item.target === '_blank' && props.externalIcon !== false"
             :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external"
             :class="props.ui.itemLabelExternalIcon({ class: [props.uiOverride?.itemLabelExternalIcon, item.ui?.itemLabelExternalIcon], color: item.color, active })"
-            data-part="item-label-external-icon"
+            data-part="itemLabelExternalIcon"
           />
         </span>
 
-        <span v-if="get(item, props.descriptionKey)" :class="props.ui.itemDescription({ class: [props.uiOverride?.itemDescription, item.ui?.itemDescription] })" data-part="item-description">
+        <span v-if="get(item, props.descriptionKey)" :class="props.ui.itemDescription({ class: [props.uiOverride?.itemDescription, item.ui?.itemDescription] })" data-part="itemDescription">
           <slot :name="`${item.slot || 'item'}-description`" :item="item" :active="active" :index="index">
             {{ get(item, props.descriptionKey) }}
           </slot>
         </span>
       </span>
 
-      <span :class="props.ui.itemTrailing({ class: [props.uiOverride?.itemTrailing, item.ui?.itemTrailing] })" data-part="item-trailing">
+      <span :class="props.ui.itemTrailing({ class: [props.uiOverride?.itemTrailing, item.ui?.itemTrailing] })" data-part="itemTrailing">
         <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="active" :index="index" :ui="ui">
-          <Icon v-if="item.children?.length" :name="childrenIcon" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color, active })" data-part="item-trailing-icon" />
-          <span v-else-if="item.kbds?.length" :class="props.ui.itemTrailingKbds({ class: [props.uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })" data-part="item-trailing-kbds">
+          <Icon v-if="item.children?.length" :name="childrenIcon" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color, active })" data-part="itemTrailingIcon" />
+          <span v-else-if="item.kbds?.length" :class="props.ui.itemTrailingKbds({ class: [props.uiOverride?.itemTrailingKbds, item.ui?.itemTrailingKbds] })" data-part="itemTrailingKbds">
             <Kbd
               v-for="(kbd, kbdIndex) in item.kbds"
               :key="kbdIndex"
@@ -133,7 +133,7 @@ const groups = computed(
         </slot>
 
         <DropdownMenu.ItemIndicator as-child>
-          <Icon :name="props.checkedIcon || appConfig.ui.icons.check" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color })" data-part="item-trailing-icon" />
+          <Icon :name="props.checkedIcon || appConfig.ui.icons.check" :class="props.ui.itemTrailingIcon({ class: [props.uiOverride?.itemTrailingIcon, item.ui?.itemTrailingIcon], color: item.color })" data-part="itemTrailingIcon" />
         </DropdownMenu.ItemIndicator>
       </span>
     </slot>

package/dist/runtime/components/FormField.vue

@@ -70,7 +70,7 @@ const ui = computed(() => {
 <template>
   <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
     <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <div v-if="props.label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })" data-part="label-wrapper">
+      <div v-if="props.label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })" data-part="labelWrapper">
         <Label :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
           <slot name="label" :label="props.label">
             {{ props.label }}

package/dist/runtime/components/Input.vue

@@ -114,14 +114,14 @@ defineExpose({
           v-if="isLeading && leadingIconName"
           :name="leadingIconName"
           :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
-          data-part="leading-icon"
+          data-part="leadingIcon"
         />
         <Avatar
           v-else-if="props.avatar"
           :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
           v-bind="props.avatar"
           :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
-          data-part="leading-avatar"
+          data-part="leadingAvatar"
         />
       </slot>
     </span>
@@ -150,7 +150,7 @@ defineExpose({
           v-if="trailingIconName"
           :name="trailingIconName"
           :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
-          data-part="trailing-icon"
+          data-part="trailingIcon"
         />
       </slot>
     </span>

package/dist/runtime/components/InputNumber.vue

@@ -30,7 +30,6 @@ const props = defineProps({
   autofocus: { type: Boolean, required: false },
   autofocusDelay: { type: Number, required: false },
   modelModifiers: { type: Object, required: false },
-  locale: { type: String, required: false },
   ui: { type: null, required: false },
   class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
   modelValue: { type: [Number, null], required: false },
@@ -52,8 +51,7 @@ const emit = defineEmits(["update:modelValue", "blur", "change"]);
 defineSlots();
 const modelValue = useVModel(props, "modelValue", emit, { defaultValue: props.defaultValue });
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultValue", "min", "max", "step", "stepSnapping", "formatOptions", "disableWheelChange", "invertWheelChange", "readonly"), emit);
-const { t, code: codeLocale } = useLocale();
-const locale = computed(() => props.locale || codeLocale.value);
+const { t } = useLocale();
 const { id, name, size: formFieldSize, color, highlight, disabled, ariaAttrs, emitFormBlur, emitFormFocus, emitFormInput, emitFormChange } = useFormField(props);
 const { size: fieldGroupSize, orientation } = useFieldGroup(props);
 const appConfig = useAppConfig();
@@ -98,7 +96,7 @@ defineExpose({
 
 <template>
   <NumberFieldRoot
-    v-bind="{ ...rootProps, id, name, disabled, locale, modelValue }"
+    v-bind="{ ...rootProps, id, name, disabled, modelValue }"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     data-part="root"
     @update:model-value="onUpdate"

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

@@ -53,11 +53,6 @@ export interface InputNumberProps extends ComponentBaseProps, Pick<NumberFieldRo
     autofocus?: boolean;
     autofocusDelay?: number;
     modelModifiers?: Pick<ModelModifiers, 'optional'>;
-    /**
-     * The locale to use for formatting and parsing numbers.
-     * @default App.locale.code
-     */
-    locale?: string;
     ui?: ComponentUIProps<typeof theme>;
 }
 export interface InputNumberEmits {