@byyuurin/ui 0.0.10 → 0.0.11

package/dist/runtime/components/AvatarGroup.vue

@@ -1,87 +1,56 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { avatarGroup } from '../theme'
-import type { ComponentAttrs } from '../types'
+<script>
 
-export interface AvatarGroupSlots {
-  default?: (props?: {}) => any
-}
-
-type AvatarGroupVariants = VariantProps<typeof avatarGroup>
-
-export interface AvatarGroupProps extends ComponentAttrs<typeof avatarGroup> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  size?: AvatarGroupVariants['size']
-  /**
-   * The maximum number of avatars to display.
-   */
-  max?: number | string
-}
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { provideAvatarGroup } from '../app/injections'
-import { useTheme } from '../composables/useTheme'
-import Avatar from './Avatar.vue'
-
-const props = defineProps<AvatarGroupProps>()
-const slots = defineSlots<AvatarGroupSlots>()
-
-const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
-
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { provideAvatarGroup } from "../app/injections";
+import { useTheme } from "../composables/useTheme";
+import Avatar from "./Avatar.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  size: { type: null, required: false },
+  max: { type: [Number, String], required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const max = computed(() => typeof props.max === "string" ? Number.parseInt(props.max, 10) : props.max);
 const children = computed(() => {
-  let nodes = slots.default?.()
-
+  let nodes = slots.default?.();
   if (Array.isArray(nodes) && nodes?.length) {
     nodes = nodes.flatMap((child) => {
-      if (typeof child.type === 'symbol') {
-        // `v-if="false"` or commented node
-        if (typeof child.children === 'string')
-          return null
-
-        return child.children
+      if (typeof child.type === "symbol") {
+        if (typeof child.children === "string")
+          return null;
+        return child.children;
       }
-
-      return child
-    }).filter(Boolean)
+      return child;
+    }).filter(Boolean);
   }
-
-  return nodes || []
-})
-
+  return nodes || [];
+});
 const visibleAvatars = computed(() => {
   if (children.value.length === 0)
-    return []
-
+    return [];
   if (!max.value || max.value <= 0)
-    return [...children.value].reverse()
-
-  return [...children.value].slice(0, max.value).reverse()
-})
-
+    return [...children.value].reverse();
+  return [...children.value].slice(0, max.value).reverse();
+});
 const hiddenCount = computed(() => {
   if (children.value.length === 0)
-    return 0
-
-  return children.value.length - visibleAvatars.value.length
-})
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('avatarGroup', props))
-
-provideAvatarGroup(computed(() => props))
+    return 0;
+  return children.value.length - visibleAvatars.value.length;
+});
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("avatarGroup", props));
+provideAvatarGroup(computed(() => props));
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="style.base({ class: props.ui?.base })" />
-    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="style.base({ class: props.ui?.base })" />
+  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
+    <Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="style.base({ class: props.ui?.base })" data-part="base" />
+    <component :is="avatar" v-for="(avatar, index) in visibleAvatars" :key="index" :class="style.base({ class: props.ui?.base })" data-part="base" />
   </Primitive>
 </template>

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

@@ -0,0 +1,27 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import type { avatarGroup } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface AvatarGroupSlots {
+    default?: (props?: {}) => any;
+}
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>;
+export interface AvatarGroupProps extends ComponentAttrs<typeof avatarGroup> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    size?: AvatarGroupVariants['size'];
+    /**
+     * The maximum number of avatars to display.
+     */
+    max?: number | string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Badge.vue

@@ -1,69 +1,43 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { badge } from '../theme'
-import type { ComponentAttrs } from '../types'
+<script>
 
-export interface BadgeEmits {
-  'update:show': [payload: boolean]
-}
-
-export interface BadgeSlots {
-  default?: (props?: {}) => any
-  content?: (props?: {}) => any
-}
-
-type BadgeVariants = VariantProps<typeof badge>
-
-export interface BadgeProps extends ComponentAttrs<typeof badge> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  text?: string | number
-  size?: BadgeVariants['size']
-  position?: BadgeVariants['position']
-  show?: boolean
-  /** When `true`, keep the badge inside the component for rounded elements. */
-  inset?: boolean
-  /** When `true`, render the badge relatively to the parent. */
-  standalone?: boolean
-}
 </script>
 
-<script setup lang="ts">
-import { Primitive, Slot } from 'reka-ui'
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
+<script setup>
+import { Primitive, Slot } from "reka-ui";
+import { computed } from "vue";
+import { useTheme } from "../composables/useTheme";
 defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<BadgeProps>(), {
-  position: 'top-right',
-})
-
-defineEmits<BadgeEmits>()
-defineSlots<BadgeSlots>()
-
-const show = defineModel<boolean>('show', { default: true })
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('badge', props))
+  inheritAttrs: false
+});
+const props = defineProps({
+  as: { type: null, required: false },
+  text: { type: [String, Number], required: false },
+  size: { type: null, required: false },
+  position: { type: null, required: false, default: "top-right" },
+  show: { type: Boolean, required: false },
+  inset: { type: Boolean, required: false },
+  standalone: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+defineEmits(["update:show"]);
+defineSlots();
+const show = defineModel("show", { type: Boolean, ...{ default: true } });
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("badge", props));
 </script>
 
 <template>
   <Primitive
     :as="props.as"
     :class="style.root({ class: [props.class, props.ui?.root] })"
+    :data-part="$attrs['data-part'] ?? 'root'"
   >
     <Slot v-bind="$attrs">
       <slot></slot>
     </Slot>
 
-    <span v-if="show" :class="style.base({ class: props.ui?.base })">
+    <span v-if="show" :class="style.base({ class: props.ui?.base })" data-part="base">
       <slot name="content">
         {{ props.text }}
       </slot>

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

@@ -0,0 +1,44 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import type { badge } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface BadgeEmits {
+    'update:show': [payload: boolean];
+}
+export interface BadgeSlots {
+    default?: (props?: {}) => any;
+    content?: (props?: {}) => any;
+}
+type BadgeVariants = VariantProps<typeof badge>;
+export interface BadgeProps extends ComponentAttrs<typeof badge> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    text?: string | number;
+    size?: BadgeVariants['size'];
+    position?: BadgeVariants['position'];
+    show?: boolean;
+    /** When `true`, keep the badge inside the component for rounded elements. */
+    inset?: boolean;
+    /** When `true`, render the badge relatively to the parent. */
+    standalone?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps & {
+    show?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:show": (...args: unknown[]) => any;
+}, string, import("vue").PublicProps, Readonly<BadgeProps & {
+    show?: boolean;
+}> & Readonly<{
+    "onUpdate:show"?: ((...args: unknown[]) => any) | undefined;
+}>, {
+    position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Breadcrumb.vue

@@ -1,101 +1,63 @@
-<script lang="ts">
-import type { PrimitiveProps } from 'reka-ui'
-import type { breadcrumb } from '../theme'
-import type { ComponentAttrs, DynamicSlots, LinkProps } from '../types'
+<script>
 
-export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
-  label?: string
-  icon?: string
-  slot?: string
-  [key: string]: any
-}
-
-type SlotProps<T extends BreadcrumbItem> = (props: { item: T, index: number, active?: boolean }) => any
-
-export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
-  'item'?: SlotProps<T>
-  'item-leading'?: SlotProps<T>
-  'item-label'?: SlotProps<T>
-  'item-trailing'?: SlotProps<T>
-  'separator'?: any
-} & DynamicSlots<T, 'leading' | 'label' | 'trailing', SlotProps<T>>
-
-export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> extends ComponentAttrs<typeof breadcrumb> {
-  /**
-   * The element or component this component should render as.
-   * @default "nav"
-   */
-  as?: PrimitiveProps['as']
-  items?: T[]
-  /**
-   * The icon to use as a separator.
-   * @default app.icons.chevronRight
-   */
-  separatorIcon?: string
-  /**
-   * The key used to get the label from the item.
-   * @default "label"
-   */
-  labelKey?: string
-}
 </script>
 
-<script setup lang="ts" generic="T extends BreadcrumbItem">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { useLocale } from '../composables/useLocale'
-import { useTheme } from '../composables/useTheme'
-import { get, pickLinkProps } from '../utils'
-import Link from './Link.vue'
-import LinkBase from './LinkBase.vue'
-
-const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
-  as: 'nav',
-  labelKey: 'label',
-})
-
-const slots = defineSlots<BreadcrumbSlots<T>>()
-
-const { dir } = useLocale()
-const { theme, generateStyle } = useTheme()
-
-const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight))
-
-const style = computed(() => generateStyle('breadcrumb', props))
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed } from "vue";
+import { useLocale } from "../composables/useLocale";
+import { useTheme } from "../composables/useTheme";
+import { get, pickLinkProps } from "../utils";
+import Link from "./Link.vue";
+import LinkBase from "./LinkBase.vue";
+const props = defineProps({
+  as: { type: null, required: false, default: "nav" },
+  items: { type: Array, required: false },
+  separatorIcon: { type: String, required: false },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const slots = defineSlots();
+const { dir } = useLocale();
+const { theme, generateStyle } = useTheme();
+const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? theme.value.app.icons.chevronLeft : theme.value.app.icons.chevronRight));
+const style = computed(() => generateStyle("breadcrumb", props));
 </script>
 
 <template>
-  <Primitive :as="props.as" aria-label="breadcrumb" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <ol :class="style.list({ class: props.ui?.list })">
+  <Primitive :as="props.as" aria-label="breadcrumb" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
+    <ol :class="style.list({ class: props.ui?.list })" data-part="list">
       <template v-for="(item, index) in props.items" :key="index">
-        <li :class="style.item({ class: props.ui?.item })">
+        <li :class="style.item({ class: props.ui?.item })" data-part="item">
           <Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <LinkBase
               v-bind="slotProps"
               as="span"
-              :aria-current="active && (index === items!.length - 1) ? 'page' : undefined"
-              :class="style.link({ class: props.ui?.link, active: index === items!.length - 1, disabled: item.disabled, to: !!item.to })"
+              :aria-current="active && index === items.length - 1 ? 'page' : void 0"
+              :class="style.link({ class: props.ui?.link, active: index === items.length - 1, disabled: item.disabled, to: !!item.to })"
+              data-part="link"
             >
-              <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index">
-                <slot :name="(`${item.slot || 'item'}-leading` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
-                  <span v-if="item.icon" :class="style.linkLeadingIcon({ class: [item.icon, props.ui?.linkLeadingIcon] })"></span>
+              <slot :name="item.slot || 'item'" :item="item" :index="index">
+                <slot :name="`${item.slot || 'item'}-leading`" :item="item" :active="index === items.length - 1" :index="index">
+                  <span v-if="item.icon" :class="style.linkLeadingIcon({ class: [item.icon, props.ui?.linkLeadingIcon] })" data-part="link-leading-icon"></span>
                 </slot>
 
-                <span v-if="get(item, props.labelKey) || slots[(`${item.slot || 'item'}-label` as keyof BreadcrumbSlots<T>)]" :class="style.linkLabel({ class: props.ui?.linkLabel })">
-                  <slot :name="(`${item.slot || 'item'}-label` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
+                <span v-if="get(item, props.labelKey) || slots[`${item.slot || 'item'}-label`]" :class="style.linkLabel({ class: props.ui?.linkLabel })" data-part="link-label">
+                  <slot :name="`${item.slot || 'item'}-label`" :item="item" :active="index === items.length - 1" :index="index">
                     {{ get(item, props.labelKey) }}
                   </slot>
                 </span>
 
-                <slot :name="(`${item.slot || 'item'}-trailing` as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index"></slot>
+                <slot :name="`${item.slot || 'item'}-trailing`" :item="item" :active="index === items.length - 1" :index="index"></slot>
               </slot>
             </LinkBase>
           </Link>
         </li>
 
-        <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" :class="style.separator({ class: props.ui?.separator })">
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="style.separator({ class: props.ui?.separator })" data-part="separator">
           <slot name="separator">
-            <span :class="style.separatorIcon({ class: [separatorIcon, props.ui?.separatorIcon] })"></span>
+            <span :class="style.separatorIcon({ class: [separatorIcon, props.ui?.separatorIcon] })" data-part="separator-icon"></span>
           </slot>
         </li>
       </template>

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

@@ -0,0 +1,52 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { breadcrumb } from '../theme/index.js';
+import type { ComponentAttrs, DynamicSlots, LinkProps } from '../types/index.js';
+export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
+    label?: string;
+    icon?: string;
+    slot?: string;
+    [key: string]: any;
+}
+type SlotProps<T extends BreadcrumbItem> = (props: {
+    item: T;
+    index: number;
+    active?: boolean;
+}) => any;
+export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
+    'item'?: SlotProps<T>;
+    'item-leading'?: SlotProps<T>;
+    'item-label'?: SlotProps<T>;
+    'item-trailing'?: SlotProps<T>;
+    'separator'?: any;
+} & DynamicSlots<T, 'leading' | 'label' | 'trailing', SlotProps<T>>;
+export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> extends ComponentAttrs<typeof breadcrumb> {
+    /**
+     * The element or component this component should render as.
+     * @default "nav"
+     */
+    as?: PrimitiveProps['as'];
+    items?: T[];
+    /**
+     * The icon to use as a separator.
+     * @default app.icons.chevronRight
+     */
+    separatorIcon?: string;
+    /**
+     * The key used to get the label from the item.
+     * @default "label"
+     */
+    labelKey?: string;
+}
+declare const _default: <T extends BreadcrumbItem>(__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<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & BreadcrumbProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: BreadcrumbSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Button.vue

@@ -1,55 +1,62 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { button } from '../theme'
-import type { ComponentAttrs } from '../types'
-import type { LinkProps } from './Link.vue'
+<script>
 
-export interface ButtonSlots {
-  default?: (props?: {}) => any
-  leading?: (props?: {}) => any
-  trailing?: (props?: {}) => any
-}
-
-type ButtonVariants = VariantProps<typeof button>
-
-export interface ButtonProps extends ComponentAttrs<typeof button>, UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom' | 'underline'> {
-  icon?: string
-  label?: string
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  loading?: boolean
-  active?: boolean
-  disabled?: boolean
-}
 </script>
 
-<script lang="ts" setup>
-import { useForwardProps } from 'reka-ui'
-import { computed } from 'vue'
-import { useButtonGroup } from '../composables/useButtonGroup'
-import { useComponentIcons } from '../composables/useComponentIcons'
-import { useTheme } from '../composables/useTheme'
-import { omit, pickLinkProps } from '../utils'
-import Link from './Link.vue'
-
-const props = withDefaults(defineProps<ButtonProps>(), {
-  variant: 'solid',
-})
-
-const slots = defineSlots<ButtonSlots>()
-
-const { size, orientation } = useButtonGroup(props)
+<script setup>
+import { useForwardProps } from "reka-ui";
+import { computed } from "vue";
+import { useButtonGroup } from "../composables/useButtonGroup";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useTheme } from "../composables/useTheme";
+import { omit, pickLinkProps } from "../utils";
+import Link from "./Link.vue";
+const props = defineProps({
+  icon: { type: String, required: false },
+  label: { type: String, required: false },
+  variant: { type: null, required: false, default: "solid" },
+  size: { type: null, required: false },
+  loading: { type: Boolean, required: false },
+  active: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: String, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: String, required: false },
+  loadingIcon: { type: String, required: false },
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false },
+  disableClass: { type: String, required: false },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object, null], required: false },
+  rel: { type: [String, Object, null], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  activeClass: { type: String, required: false },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
+});
+const slots = defineSlots();
+const { size, orientation } = useButtonGroup(props);
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(
-  computed(() => ({ ...props, loading: props.loading })),
-)
-
-const linkProps = useForwardProps(pickLinkProps(props))
-
-const { generateStyle } = useTheme()
-
+  computed(() => ({ ...props, loading: props.loading }))
+);
+const linkProps = useForwardProps(pickLinkProps(props));
+const { generateStyle } = useTheme();
 const style = computed(() => {
-  return generateStyle('button', {
+  return generateStyle("button", {
     ...props,
     size: size.value,
     groupOrientation: orientation.value,
@@ -58,10 +65,10 @@ const style = computed(() => {
     class: [
       props.class,
       props.active ? props.activeClass : props.inactiveClass,
-      props.disabled ? props.disableClass : undefined,
-    ],
-  })
-})
+      props.disabled ? props.disableClass : void 0
+    ]
+  });
+});
 </script>
 
 <template>
@@ -70,17 +77,20 @@ const style = computed(() => {
     :type="props.type"
     :disabled="props.disabled || props.loading"
     v-bind="omit(linkProps, ['type', 'disabled', 'activeClass', 'inactiveClass', 'disableClass'])"
+    data-part="base"
     raw
   >
     <slot name="leading">
       <span
         v-if="isLeading && leadingIconName"
         :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"
+        data-part="leading-icon"
       ></span>
     </slot>
     <span
       v-if="props.label || slots.default"
       :class="style.label({ class: props.ui?.label })"
+      data-part="label"
     >
       <slot>{{ label }}</slot>
     </span>
@@ -88,6 +98,7 @@ const style = computed(() => {
       <span
         v-if="isTrailing && trailingIconName"
         :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"
+        data-part="trailing-icon"
       ></span>
     </slot>
   </Link>