@byyuurin/ui 0.1.0 → 0.2.0

package/dist/runtime/components/InputTags.vue

@@ -0,0 +1,155 @@
+<script>
+import theme from "#build/ui/input-tags";
+</script>
+
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, useForwardPropsEmits } from "reka-ui";
+import { computed, onMounted, shallowRef, toRaw, toRef } from "vue";
+import { useAppConfig } from "#imports";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFieldGroup } from "../composables/useFieldGroup";
+import { useFormField } from "../composables/useFormField";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  maxLength: { type: Number, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  deleteIcon: { type: [String, Object], required: false },
+  highlight: { type: Boolean, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  modelValue: { type: [Array, null], required: false },
+  defaultValue: { type: Array, required: false },
+  addOnPaste: { type: Boolean, required: false },
+  addOnTab: { type: Boolean, required: false },
+  addOnBlur: { type: Boolean, required: false },
+  duplicate: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  delimiter: { type: null, required: false },
+  max: { type: Number, required: false },
+  id: { type: String, required: false },
+  convertValue: { type: Function, required: false },
+  displayValue: { type: Function, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: [String, Object], required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false }
+});
+const emit = defineEmits(["change", "blur", "focus", "update:modelValue", "invalid", "addTag", "removeTag"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "addOnPaste", "addOnTab", "addOnBlur", "duplicate", "delimiter", "max", "convertValue", "displayValue", "required"), emit);
+const { id, name, size: formFieldSize, color, highlight, disabled, ariaAttrs, emitFormBlur, emitFormInput, emitFormChange, emitFormFocus } = useFormField(props);
+const { orientation, size: fieldGroupSize } = useFieldGroup(props);
+const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.inputTags));
+  return styler({
+    ...props,
+    color: color.value,
+    size: fieldGroupSize.value || formFieldSize.value,
+    highlight: highlight.value,
+    leading: isLeading.value || !!props.avatar || !!slots.leading,
+    trailing: isTrailing.value || !!slots.trailing,
+    fieldGroup: orientation.value
+  });
+});
+const inputRef = shallowRef(null);
+function onUpdate(value) {
+  if (toRaw(props.modelValue) === value)
+    return;
+  const event = new Event("change", { target: { value } });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+function onBlur(event) {
+  emit("blur", event);
+  emitFormBlur();
+}
+function onFocus(event) {
+  emit("focus", event);
+  emitFormFocus();
+}
+function autoFocus() {
+  if (props.autofocus)
+    inputRef.value?.$el?.focus();
+}
+onMounted(() => {
+  setTimeout(() => autoFocus(), props.autofocusDelay);
+});
+defineExpose({
+  inputRef: toRef(() => inputRef.value?.$el)
+});
+</script>
+
+<template>
+  <TagsInputRoot
+    v-slot="{ modelValue: tags }"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :class="ui.root({ class: [ui.base({ class: props.ui?.base }), props.ui?.root, props.class] })"
+    v-bind="{ ...rootProps, id, name, disabled }"
+    data-part="root"
+    @update:model-value="onUpdate"
+  >
+    <TagsInputItem
+      v-for="(item, index) in tags"
+      :key="index"
+      :value="item"
+      :class="ui.item({ class: props.ui?.item })"
+      data-part="item"
+    >
+      <TagsInputItemText :class="ui.itemText({ class: props.ui?.itemText })" data-part="itemText">
+        <slot name="item-text" :item="item" :index="index" :ui="ui"></slot>
+      </TagsInputItemText>
+
+      <TagsInputItemDelete :disabled="disabled" :class="ui.itemDelete({ class: props.ui?.itemDelete })" data-part="itemDelete">
+        <slot name="item-delete" :item="item" :index="index" :ui="ui">
+          <Icon :name="props.deleteIcon || appConfig.ui.icons.close" :class="ui.itemDeleteIcon({ class: props.ui?.itemDeleteIcon })" data-part="itemDeleteIcon" />
+        </slot>
+      </TagsInputItemDelete>
+    </TagsInputItem>
+
+    <TagsInputInput
+      ref="inputRef"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      :placeholder="props.placeholder"
+      :max-length="props.maxLength"
+      :class="ui.input({ class: props.ui?.input })"
+      data-part="input"
+      @blur="onBlur"
+      @focus="onFocus"
+    />
+
+    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+      <slot name="leading" :ui="ui">
+        <Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" 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="leadingAvatar" />
+      </slot>
+    </span>
+
+    <slot :ui="ui"></slot>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+      <slot name="trailing" :ui="ui">
+        <Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
+      </slot>
+    </span>
+  </TagsInputRoot>
+</template>

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

@@ -0,0 +1,85 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { AcceptableInputValue, TagsInputRootEmits, TagsInputRootProps } from 'reka-ui';
+import theme from '#build/ui/input-tags';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export type InputTagsItem = AcceptableInputValue;
+export interface InputTagsProps<T extends InputTagsItem = InputTagsItem> extends ComponentBaseProps, Pick<TagsInputRootProps<T>, 'modelValue' | 'defaultValue' | 'addOnPaste' | 'addOnTab' | 'addOnBlur' | 'duplicate' | 'disabled' | 'delimiter' | 'max' | 'id' | 'convertValue' | 'displayValue' | 'name' | 'required'>, UseComponentIconsProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: TagsInputRootProps<T>['as'];
+    /** The placeholder text when the input is empty. */
+    placeholder?: string;
+    /** The maximum number of character allowed. */
+    maxLength?: number;
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "outline" */
+    variant?: ThemeVariants['variant'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    /**
+     * The icon displayed to delete a tag.
+     * @default appConfig.ui.icons.close
+     */
+    deleteIcon?: IconProps['name'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface InputTagsEmits<T extends InputTagsItem> extends TagsInputRootEmits<T> {
+    change: [event: Event];
+    blur: [event: FocusEvent];
+    focus: [event: FocusEvent];
+}
+export interface InputTagsSlots<T extends InputTagsItem = InputTagsItem> {
+    'leading': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'default': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'trailing': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'item-text': StaticSlot<{
+        item: T;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'item-delete': StaticSlot<{
+        item: T;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+}
+declare const __VLS_export: <T extends InputTagsItem>(__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<InputTagsProps<AcceptableInputValue> & {
+        onChange?: ((event: Event) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        onInvalid?: ((payload: T) => any) | undefined;
+        "onUpdate:modelValue"?: ((payload: T[]) => any) | undefined;
+        onAddTag?: ((payload: T) => any) | undefined;
+        onRemoveTag?: ((payload: T) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
+    }>) => void;
+    attrs: any;
+    slots: InputTagsSlots<T>;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "invalid", payload: T) => void) & ((evt: "update:modelValue", payload: T[]) => void) & ((evt: "addTag", payload: T) => void) & ((evt: "removeTag", payload: T) => 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/Marquee.vue

@@ -0,0 +1,38 @@
+<script>
+import theme from "#build/ui/marquee";
+</script>
+
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { cv, merge } from "../utils/style";
+const props = defineProps({
+  as: { type: null, required: false },
+  pauseOnHover: { type: Boolean, required: false },
+  reverse: { type: Boolean, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  repeat: { type: Number, required: false, default: 4 },
+  overlay: { type: Boolean, required: false, default: true },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.marquee));
+  return styler(props);
+});
+</script>
+
+<template>
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div v-for="i in props.repeat" :key="i" :class="ui.content({ class: props.ui?.content })" data-part="content">
+      <slot></slot>
+    </div>
+  </Primitive>
+</template>
+
+<style>
+@keyframes marquee{0%{transform:translateZ(0)}to{transform:translate3d(calc(-100% - var(--gap)),0,0)}}@keyframes marquee-rtl{0%{transform:translateZ(0)}to{transform:translate3d(calc(100% + var(--gap)),0,0)}}@keyframes marquee-vertical{0%{transform:translateZ(0)}to{transform:translate3d(0,calc(-100% - var(--gap)),0)}}@keyframes marquee-vertical-rtl{0%{transform:translate3d(0,calc(-100% - var(--gap)),0)}to{transform:translate3d(0,calc(-100%*var(--gap)),0)}}
+</style>

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

@@ -0,0 +1,54 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/marquee';
+import type { ComponentBaseProps, ComponentStyler } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface MarqueeProps extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    /**
+     * Pause the marquee on hover.
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Reverse the direction of the marquee.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * The orientation of the marquee.
+     * @default "horizontal"
+     */
+    orientation?: ThemeVariants['orientation'];
+    /**
+     * The number of times the marquee should repeat.
+     * @default 4
+     */
+    repeat?: number;
+    /**
+     * Display an overlay on the marquee.
+     * @default true
+     */
+    overlay?: boolean;
+    ui?: ComponentStyler<typeof theme>;
+}
+export interface MarqueeSlots {
+    default: StaticSlot;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MarqueeProps> & Readonly<{}>, {
+    overlay: boolean;
+    repeat: number;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, MarqueeSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/NavigationMenu.vue

@@ -20,6 +20,9 @@ import Tooltip from "./Tooltip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
+  type: { type: null, required: false, default: "multiple" },
+  modelValue: { type: null, required: false },
+  defaultValue: { type: null, required: false },
   trailingIcon: { type: [String, Object], required: false },
   externalIcon: { type: [Boolean, String, Object], required: false, default: true },
   items: { type: null, required: false },
@@ -37,8 +40,6 @@ const props = defineProps({
   labelKey: { type: null, required: false, default: "label" },
   ui: { type: null, required: false },
   class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
-  modelValue: { type: String, required: false },
-  defaultValue: { type: String, required: false },
   delayDuration: { type: Number, required: false, default: 0 },
   disableClickTrigger: { type: Boolean, required: false },
   disableHoverTrigger: { type: Boolean, required: false },
@@ -46,15 +47,12 @@ const props = defineProps({
   disablePointerLeaveClose: { type: Boolean, required: false },
   unmountOnHide: { type: Boolean, required: false, default: true },
   disabled: { type: Boolean, required: false },
-  type: { type: String, required: false, default: "multiple" },
   collapsible: { type: Boolean, required: false, default: true }
 });
 const emit = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const rootProps = useForwardPropsEmits(computed(() => ({
   as: props.as,
-  modelValue: props.modelValue,
-  defaultValue: props.defaultValue,
   delayDuration: props.delayDuration,
   skipDelayDuration: props.skipDelayDuration,
   orientation: props.orientation,
@@ -106,20 +104,20 @@ function getAccordionDefaultValue(list, level = 0) {
           :size="item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()"
           v-bind="item.avatar"
           :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: item.disabled })"
-          data-part="link-leading-avatar"
+          data-part="linkLeadingAvatar"
         />
         <Icon
           v-else-if="item.icon"
           :name="item.icon"
           :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })"
-          data-part="link-leading-icon"
+          data-part="linkLeadingIcon"
         />
       </slot>
 
       <span
-        v-if="(!props.collapsed || props.orientation !== 'vertical') && (get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`])"
+        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"
+        data-part="linkLabel"
       >
         <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="active" :index="index">
           {{ get(item, props.labelKey) }}
@@ -129,16 +127,16 @@ function getAccordionDefaultValue(list, level = 0) {
           v-if="item.target === '_blank' && props.externalIcon !== false"
           :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external"
           :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })"
-          data-part="link-label-external-icon"
+          data-part="linkLabelExternalIcon"
         />
       </span>
 
       <component
         :is="props.orientation === 'vertical' && item.children?.length && !props.collapsed ? AccordionTrigger : 'span'"
-        v-if="(!props.collapsed || props.orientation !== 'vertical') && (item.badge !== void 0 || orientation === 'horizontal' && (item.children?.length || !!slots[`${item.slot || 'item'}-content`]) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[`${item.slot || 'item'}-trailing`])"
+        v-if="item.badge !== void 0 || orientation === 'horizontal' && (item.children?.length || !!slots[`${item.slot || 'item'}-content`]) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[`${item.slot || 'item'}-trailing`]"
         as="span"
         :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })"
-        data-part="link-trailing"
+        data-part="linkTrailing"
         @click.stop.prevent
       >
         <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="active" :index="index" :ui="ui">
@@ -149,20 +147,20 @@ function getAccordionDefaultValue(list, level = 0) {
             :size="item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
             :class="ui.linkTrailingBadge({ class: [props.ui?.linkTrailingBadge, item.ui?.linkTrailingBadge] })"
-            data-part="link-trailing-badge"
+            data-part="linkTrailingBadge"
           />
 
           <Icon
             v-if="orientation === 'horizontal' && (item.children?.length || !!slots[`${item.slot || 'item'}-content`]) || orientation === 'vertical' && item.children?.length"
             :name="item.trailingIcon || props.trailingIcon || appConfig.ui.icons.chevronDown"
             :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
-            data-part="link-trailing-icon"
+            data-part="linkTrailingIcon"
           />
           <Icon
             v-else-if="item.trailingIcon"
             :name="item.trailingIcon"
             :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })"
-            data-part="link-trailing-icon"
+            data-part="linkTrailingIcon"
           />
         </slot>
       </component>
@@ -186,7 +184,7 @@ function getAccordionDefaultValue(list, level = 0) {
       >
         <component
           :is="
-  props.orientation === 'horizontal' && (item.children?.length || slots[`${item.slot || 'item'}-content`]) ? NavigationMenuTrigger : orientation === 'vertical' && item.children?.length && !collapsed && !slotProps.href ? AccordionTrigger : NavigationMenuLink
+  props.orientation === 'horizontal' && (item.children?.length || slots[`${item.slot || 'item'}-content`]) ? NavigationMenuTrigger : orientation === 'vertical' && item.children?.length && !props.collapsed && !slotProps.href ? AccordionTrigger : NavigationMenuLink
 "
           :active="active || item.active"
           :disabled="item.disabled"
@@ -214,20 +212,20 @@ function getAccordionDefaultValue(list, level = 0) {
 
             <template #content="{ close }">
               <slot :name="`${item.slot || 'item'}-content`" :item="item" :active="active || item.active" :index="index" :ui="ui" :close="close">
-                <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })" data-part="child-list">
-                  <li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })" data-part="child-label">
+                <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })" data-part="childList">
+                  <li :class="ui.childLabel({ class: [props.ui?.childLabel, item.ui?.childLabel] })" data-part="childLabel">
                     {{ get(item, props.labelKey) }}
                   </li>
-                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })" data-part="child-item">
+                  <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })" data-part="childItem">
                     <Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                       <NavigationMenuLink :active="childActive" as-child @select="childItem.onSelect">
-                        <LinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })" data-part="child-link">
-                          <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="child-link-icon" />
+                        <LinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })" data-part="childLink">
+                          <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="childLinkIcon" />
 
-                          <span :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="child-link-label">
+                          <span :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="childLinkLabel">
                             {{ get(childItem, props.labelKey) }}
 
-                            <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" data-part="child-link-label-external-icon" />
+                            <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" data-part="childLinkLabelExternalIcon" />
                           </span>
                         </LinkBase>
                       </NavigationMenuLink>
@@ -254,20 +252,20 @@ function getAccordionDefaultValue(list, level = 0) {
           data-part="content"
         >
           <slot :name="`${item.slot || 'item'}-content`" :item="item" :active="active" :index="index" :ui="ui">
-            <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })" data-part="child-list">
-              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })" data-part="child-item">
+            <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })" data-part="childList">
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })" data-part="childItem">
                 <Link v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                   <NavigationMenuLink :active="childActive" as-child @select="childItem.onSelect">
-                    <LinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })" data-part="child-link">
-                      <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="child-link-icon" />
+                    <LinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })" data-part="childLink">
+                      <Icon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" data-part="childLinkIcon" />
 
-                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })" data-part="child-link-wrapper">
-                        <p :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="child-link-label">
+                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })" data-part="childLinkWrapper">
+                        <p :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })" data-part="childLinkLabel">
                           {{ get(childItem, props.labelKey) }}
 
-                          <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" data-part="child-link-label-external-icon" />
+                          <Icon v-if="childItem.target === '_blank' && props.externalIcon !== false" :name="typeof props.externalIcon === 'string' ? props.externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" data-part="childLinkLabelExternalIcon" />
                         </p>
-                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })" data-part="child-link-description">
+                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })" data-part="childLinkDescription">
                           {{ childItem.description }}
                         </p>
                       </div>
@@ -285,7 +283,7 @@ function getAccordionDefaultValue(list, level = 0) {
           v-bind="{ ...accordionProps, defaultValue: getAccordionDefaultValue(item.children, level + 1) }"
           as="ul"
           :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })"
-          data-part="child-list"
+          data-part="childList"
         >
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
@@ -294,7 +292,7 @@ function getAccordionDefaultValue(list, level = 0) {
             :index="childIndex"
             :level="level + 1"
             :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })"
-            data-part="child-item"
+            data-part="childItem"
           />
         </AccordionRoot>
       </AccordionContent>
@@ -302,7 +300,14 @@ function getAccordionDefaultValue(list, level = 0) {
   </DefineItemTemplate>
 
   <NavigationMenuRoot
-    v-bind="{ ...rootProps, ...$attrs }"
+    v-bind="{
+  ...rootProps,
+  ...props.orientation === 'horizontal' ? {
+    modelValue: props.modelValue,
+    defaultValue: props.defaultValue
+  } : {},
+  ...$attrs
+}"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :data-collapsed="props.collapsed"
     data-part="root"
@@ -311,8 +316,12 @@ function getAccordionDefaultValue(list, level = 0) {
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <component
-        v-bind="props.orientation === 'vertical' && !props.collapsed ? { ...accordionProps, defaultValue: getAccordionDefaultValue(list) } : {}"
-        :is="props.orientation === 'vertical' && !props.collapsed ? AccordionRoot : NavigationMenuList"
+        v-bind="props.orientation === 'vertical' && !props.collapsed ? {
+  ...accordionProps,
+  modelValue: props.modelValue,
+  defaultValue: props.defaultValue ?? getAccordionDefaultValue(list)
+} : {}"
+        :is="props.orientation === 'vertical' ? AccordionRoot : NavigationMenuList"
         as="ul"
         :class="ui.list({ class: props.ui?.list })"
         data-part="list"
@@ -325,7 +334,7 @@ function getAccordionDefaultValue(list, level = 0) {
 
     <slot name="list-trailing"></slot>
 
-    <div v-if="props.orientation === 'horizontal'" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })" data-part="viewport-wrapper">
+    <div v-if="props.orientation === 'horizontal'" :class="ui.viewportWrapper({ class: props.ui?.viewportWrapper })" data-part="viewportWrapper">
       <NavigationMenuIndicator v-if="props.arrow" :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
         <div :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow"></div>
       </NavigationMenuIndicator>