rimelight-components 2.1.17 → 2.1.19

package/dist/runtime/components/cards/TeamCard.vue

@@ -1,27 +1,49 @@
 <script setup>
-const {} = defineProps({
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { src, alt, name, role, description, rc: rcProp } = defineProps({
   src: { type: String, required: true },
   alt: { type: String, required: true },
   name: { type: String, required: true },
   role: { type: String, required: true },
-  description: { type: String, required: true }
+  description: { type: String, required: true },
+  rc: { type: Object, required: false }
 });
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("TeamCard", rcProp);
+const teamCardStyles = tv({
+  slots: {
+    details: "flex flex-col gap-xs",
+    name: "text-xl font-bold",
+    role: "text-sm",
+    description: "text-md",
+    links: "flex flex-row gap-md"
+  }
+});
+const {
+  details,
+  name: nameClass,
+  role: roleClass,
+  description: descriptionClass,
+  links
+} = teamCardStyles();
 </script>
 
 <template>
   <UCard>
     <RCImage :src="src" :alt="alt" />
-    <div class="flex flex-col gap-xs">
-      <h3 class="text-xl font-bold">
+    <div :class="details({ class: rc.details })">
+      <h3 :class="nameClass({ class: rc.name })">
         {{ name }}
       </h3>
-      <span class="text-sm">{{ role }}</span>
+      <span :class="roleClass({ class: rc.role })">{{ role }}</span>
     </div>
-    <p class="text-md">
+    <p :class="descriptionClass({ class: rc.description })">
       {{ description }}
     </p>
     <template #footer>
-      <div class="flex flex-row gap-md">
+      <div :class="links({ class: rc.links })">
         <slot name="links" />
       </div>
     </template>

package/dist/runtime/components/cards/TeamCard.vue.d.ts

@@ -1,15 +1,24 @@
-type __VLS_Props = {
+export interface TeamCardProps {
     src: string;
     alt: string;
     name: string;
     role: string;
     description: string;
-};
-declare var __VLS_14: {};
-type __VLS_Slots = {} & {
-    links?: (props: typeof __VLS_14) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        details?: string;
+        name?: string;
+        role?: string;
+        description?: string;
+        links?: string;
+    };
+}
+export interface TeamCardEmits {
+}
+export interface TeamCardSlots {
+    links: (props: {}) => any;
+}
+type __VLS_Slots = TeamCardSlots;
+declare const __VLS_base: import("vue").DefineComponent<TeamCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TeamCardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/Callout.d.vue.ts

@@ -1,14 +1,20 @@
 export type CalloutVariant = "info" | "success" | "warning" | "error" | "commentary" | "ideation" | "source";
-type __VLS_Props = {
+export interface CalloutProps {
     variant: CalloutVariant;
     to?: string;
     target?: string;
-};
-declare var __VLS_21: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_21) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        icon?: string;
+        tooltipIcon?: string;
+    };
+}
+export interface CalloutEmits {
+}
+export interface CalloutSlots {
+    default: (props: {}) => any;
+}
+type __VLS_Slots = CalloutSlots;
+declare const __VLS_base: import("vue").DefineComponent<CalloutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/Callout.vue

@@ -2,13 +2,26 @@
 import { useAppConfig } from "#imports";
 import { computed } from "#imports";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
-const appConfig = useAppConfig();
-const { variant, to, target } = defineProps({
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { variant, to, target, rc: rcProp } = defineProps({
   variant: { type: String, required: true },
   to: { type: String, required: false },
-  target: { type: String, required: false }
+  target: { type: String, required: false },
+  rc: { type: Object, required: false }
+});
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("Callout", rcProp);
+const calloutStyles = tv({
+  slots: {
+    icon: "size-6",
+    tooltipIcon: "pointer-events-auto size-5"
+  }
 });
+const { icon: iconClass, tooltipIcon } = calloutStyles();
+const { t } = useI18n();
+const appConfig = useAppConfig();
 const config = computed(() => {
   return appConfig.rimelightComponents?.callouts?.[variant] ?? {
     icon: "lucide:alert-circle",
@@ -32,14 +45,14 @@ const tooltip = computed(() => config.value.tooltip);
 }"
     >
       <template #leading>
-        <UIcon :name="icon" class="size-6" />
+        <UIcon :name="icon" :class="iconClass({ class: rc.icon })" />
       </template>
       <template #description>
         <slot />
       </template>
       <template #close>
         <UTooltip v-if="tooltip" :text="t(tooltip)">
-          <UIcon name="lucide:circle-question-mark" class="pointer-events-auto size-5" />
+          <UIcon name="lucide:circle-question-mark" :class="tooltipIcon({ class: rc.tooltipIcon })" />
         </UTooltip>
       </template>
     </UAlert>

package/dist/runtime/components/content/Callout.vue.d.ts

@@ -1,14 +1,20 @@
 export type CalloutVariant = "info" | "success" | "warning" | "error" | "commentary" | "ideation" | "source";
-type __VLS_Props = {
+export interface CalloutProps {
     variant: CalloutVariant;
     to?: string;
     target?: string;
-};
-declare var __VLS_21: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_21) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        icon?: string;
+        tooltipIcon?: string;
+    };
+}
+export interface CalloutEmits {
+}
+export interface CalloutSlots {
+    default: (props: {}) => any;
+}
+type __VLS_Slots = CalloutSlots;
+declare const __VLS_base: import("vue").DefineComponent<CalloutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/Section.d.vue.ts

@@ -1,21 +1,27 @@
 export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;
-type __VLS_Props = {
+export interface SectionProps {
     level?: SectionLevel;
     title: string;
     description?: string;
     isEditing?: boolean;
-};
-declare var __VLS_27: {}, __VLS_29: {}, __VLS_31: {}, __VLS_38: {};
-type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_27) => any;
-} & {
-    title?: (props: typeof __VLS_29) => any;
-} & {
-    description?: (props: typeof __VLS_31) => any;
-} & {
-    default?: (props: typeof __VLS_38) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        section?: string;
+        link?: string;
+        heading?: string;
+        descriptionText?: string;
+        separator?: string;
+        content?: string;
+    };
+}
+export interface SectionEmits {
+}
+export interface SectionSlots {
+    default: (props: {}) => any;
+    title: (props: {}) => any;
+    description: (props: {}) => any;
+}
+type __VLS_Slots = SectionSlots;
+declare const __VLS_base: import("vue").DefineComponent<SectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/Section.vue

@@ -3,108 +3,114 @@ import { useRoute } from "#imports";
 import { computed } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { useToast } from "@nuxt/ui/composables";
-import { tv } from "tailwind-variants";
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
 import { slugify } from "../../utils";
-const { copy } = useClipboard();
-const toast = useToast();
-const route = useRoute();
-const copyToClipboard = async (text) => {
-  try {
-    await copy(`${text}`);
-    toast.add({
-      title: "Heading copied to clipboard!",
-      description: text,
-      color: "success"
-    });
-  } catch {
-    toast.add({
-      title: "Failed to copy heading to clipboard.",
-      description: "An unexpected error occurred. Please try again.",
-      color: "error"
-    });
-  }
-};
-const sectionVariants = tv({
+const {
+  level = 1,
+  title,
+  description,
+  isEditing = false,
+  rc: rcProp
+} = defineProps({
+  level: { type: Number, required: false },
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  isEditing: { type: Boolean, required: false },
+  rc: { type: Object, required: false }
+});
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("Section", rcProp);
+const sectionStyles = tv({
   slots: {
-    sectionSlot: "flex flex-col scroll-mt-24 w-full",
-    linkSlot: "",
-    headingSlot: "font-bold w-full",
-    descriptionSlot: "text-muted",
-    separatorSlot: "py-2",
-    contentSlot: "flex flex-col gap-md mt-2"
+    section: "flex flex-col scroll-mt-24 w-full",
+    link: "",
+    heading: "font-bold w-full",
+    descriptionText: "text-muted",
+    separator: "py-2",
+    content: "flex flex-col gap-md mt-2"
   },
   variants: {
     level: {
       1: {
-        sectionSlot: "gap-2",
-        linkSlot: "",
-        headingSlot: "",
-        descriptionSlot: "text-2xl",
-        separatorSlot: "",
-        contentSlot: ""
+        section: "gap-2",
+        link: "",
+        heading: "",
+        descriptionText: "text-2xl",
+        separator: "",
+        content: ""
       },
       2: {
-        sectionSlot: "gap-1.5",
-        linkSlot: "",
-        headingSlot: "",
-        descriptionSlot: "text-xl",
-        separatorSlot: "",
-        contentSlot: ""
+        section: "gap-1.5",
+        link: "",
+        heading: "",
+        descriptionText: "text-xl",
+        separator: "",
+        content: ""
       },
       3: {
-        sectionSlot: "gap-1",
-        linkSlot: "",
-        headingSlot: "",
-        descriptionSlot: "text-lg",
-        separatorSlot: "",
-        contentSlot: ""
+        section: "gap-1",
+        link: "",
+        heading: "",
+        descriptionText: "text-lg",
+        separator: "",
+        content: ""
       },
       4: {
-        sectionSlot: "gap-0.5",
-        linkSlot: "",
-        headingSlot: "",
-        descriptionSlot: "text-md",
-        separatorSlot: "",
-        contentSlot: ""
+        section: "gap-0.5",
+        link: "",
+        heading: "",
+        descriptionText: "text-md",
+        separator: "",
+        content: ""
       },
       5: {
-        sectionSlot: "gap-0.25",
-        linkSlot: "",
-        headingSlot: "",
-        descriptionSlot: "text-sm",
-        separatorSlot: "",
-        contentSlot: ""
+        section: "gap-0.25",
+        link: "",
+        heading: "",
+        descriptionText: "text-sm",
+        separator: "",
+        content: ""
       },
       6: {
-        sectionSlot: "gap-0.125",
-        linkSlot: "",
-        headingSlot: "",
-        descriptionSlot: "text-xs",
-        separatorSlot: "",
-        contentSlot: ""
+        section: "gap-0.125",
+        link: "",
+        heading: "",
+        descriptionText: "text-xs",
+        separator: "",
+        content: ""
       }
     }
   }
 });
 const {
-  level = 1,
-  title,
-  description,
-  isEditing = false
-} = defineProps({
-  level: { type: Number, required: false },
-  title: { type: String, required: true },
-  description: { type: String, required: false },
-  isEditing: { type: Boolean, required: false }
-});
-const {
-  sectionSlot,
-  linkSlot,
-  headingSlot,
-  descriptionSlot,
-  separatorSlot,
-  contentSlot
-} = sectionVariants({ level });
+  section,
+  link,
+  heading,
+  descriptionText,
+  separator,
+  content
+} = sectionStyles({ level });
+const { copy } = useClipboard();
+const toast = useToast();
+const route = useRoute();
+const copyToClipboard = async (text) => {
+  try {
+    await copy(`${text}`);
+    toast.add({
+      title: "Heading copied to clipboard!",
+      description: text,
+      color: "success"
+    });
+  } catch {
+    toast.add({
+      title: "Failed to copy heading to clipboard.",
+      description: "An unexpected error occurred. Please try again.",
+      color: "error"
+    });
+  }
+};
 const sectionId = computed(() => slugify(title));
 const sectionHash = computed(() => `#${sectionId.value}`);
 const fullSectionUrl = computed(() => {
@@ -114,12 +120,12 @@ const fullSectionUrl = computed(() => {
 </script>
 
 <template>
-  <section :id="sectionId" :class="sectionSlot()" v-bind="$attrs">
-    <component :id="sectionId" :is="`h${level}`" :class="headingSlot()">
+  <section :id="sectionId" :class="section({ class: rc.section })" v-bind="$attrs">
+    <component :id="sectionId" :is="`h${level}`" :class="heading({ class: rc.heading })">
       <NuxtLink
         v-if="!isEditing"
         :href="`#${sectionId}`"
-        :class="linkSlot()"
+        :class="link({ class: rc.link })"
         class="group relative lg:-ms-2 lg:ps-2 inline-block w-full"
       >
         <ClientOnly>
@@ -142,12 +148,12 @@ const fullSectionUrl = computed(() => {
       <slot v-else name="title">{{ title }}</slot>
     </component>
     <slot name="description">
-      <p v-if="description" :class="descriptionSlot()">
+      <p v-if="description" :class="descriptionText({ class: rc.descriptionText })">
         {{ description }}
       </p>
     </slot>
-    <USeparator :class="separatorSlot()" />
-    <div :class="contentSlot()">
+    <USeparator :class="separator({ class: rc.separator })" />
+    <div :class="content({ class: rc.content })">
       <slot />
     </div>
   </section>

package/dist/runtime/components/content/Section.vue.d.ts

@@ -1,21 +1,27 @@
 export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;
-type __VLS_Props = {
+export interface SectionProps {
     level?: SectionLevel;
     title: string;
     description?: string;
     isEditing?: boolean;
-};
-declare var __VLS_27: {}, __VLS_29: {}, __VLS_31: {}, __VLS_38: {};
-type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_27) => any;
-} & {
-    title?: (props: typeof __VLS_29) => any;
-} & {
-    description?: (props: typeof __VLS_31) => any;
-} & {
-    default?: (props: typeof __VLS_38) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        section?: string;
+        link?: string;
+        heading?: string;
+        descriptionText?: string;
+        separator?: string;
+        content?: string;
+    };
+}
+export interface SectionEmits {
+}
+export interface SectionSlots {
+    default: (props: {}) => any;
+    title: (props: {}) => any;
+    description: (props: {}) => any;
+}
+type __VLS_Slots = SectionSlots;
+declare const __VLS_base: import("vue").DefineComponent<SectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/Test.d.vue.ts

@@ -1,11 +1,16 @@
-type __VLS_Props = {
+export interface TestProps {
     text: string;
-};
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    content?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        root?: string;
+    };
+}
+export interface TestEmits {
+}
+export interface TestSlots {
+    content: (props: {}) => any;
+}
+type __VLS_Slots = TestSlots;
+declare const __VLS_base: import("vue").DefineComponent<TestProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TestProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/content/Test.vue

@@ -1,11 +1,23 @@
 <script setup>
-const { text } = defineProps({
-  text: { type: String, required: true }
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { text, rc: rcProp } = defineProps({
+  text: { type: String, required: true },
+  rc: { type: Object, required: false }
 });
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("Test", rcProp);
+const testStyles = tv({
+  slots: {
+    root: ""
+  }
+});
+const { root } = testStyles();
 </script>
 
 <template>
-  <div v-bind="$attrs">
+  <div :class="root({ class: rc.root })" v-bind="$attrs">
     <slot name="content">
       <p>{{ text }}</p>
     </slot>

package/dist/runtime/components/content/Test.vue.d.ts

@@ -1,11 +1,16 @@
-type __VLS_Props = {
+export interface TestProps {
     text: string;
-};
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    content?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        root?: string;
+    };
+}
+export interface TestEmits {
+}
+export interface TestSlots {
+    content: (props: {}) => any;
+}
+type __VLS_Slots = TestSlots;
+declare const __VLS_base: import("vue").DefineComponent<TestProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TestProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/nodes/LinkNode.d.vue.ts

@@ -1,8 +1,22 @@
-type __VLS_Props = {
+export interface LinkNodeProps {
     href: string;
     target?: string;
     content: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    rc?: {
+        root?: string;
+    };
+}
+export interface LinkNodeEmits {
+}
+export interface LinkNodeSlots {
+}
+type __VLS_Slots = LinkNodeSlots;
+declare const __VLS_base: import("vue").DefineComponent<LinkNodeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkNodeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/nodes/LinkNode.vue

@@ -1,15 +1,29 @@
 <script setup>
 import { computed } from "vue";
-const { href, target, content } = defineProps({
+import { tv } from "../../utils/tv";
+import { useRC } from "../../composables/useRC";
+const { href, target, content, rc: rcProp } = defineProps({
   href: { type: String, required: true },
   target: { type: String, required: false },
-  content: { type: String, required: true }
+  content: { type: String, required: true },
+  rc: { type: Object, required: false }
 });
+const emit = defineEmits([]);
+const slots = defineSlots();
+const { rc } = useRC("LinkNode", rcProp);
+const linkNodeStyles = tv({
+  slots: {
+    root: ""
+  }
+});
+const { root } = linkNodeStyles();
 const rel = computed(
   () => target === "_blank" ? "noopener noreferrer" : void 0
 );
 </script>
 
 <template>
-  <ULink :to="href" :target="target" :rel="rel">{{ content }}</ULink>
+  <ULink :to="href" :target="target" :rel="rel" :class="root({ class: rc.root })">
+    {{ content }}
+  </ULink>
 </template>