rimelight-components 2.1.17 → 2.1.18

package/dist/runtime/components/page/PageSurround.vue

@@ -1,6 +1,6 @@
 <script setup>
+import { tv } from "tailwind-variants";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
 const {
   pageType,
   previousTitle,
@@ -18,33 +18,66 @@ const {
   nextDescription: { type: String, required: false },
   nextTo: { type: String, required: false }
 });
+const emit = defineEmits([]);
+const pageSurroundStyles = tv({
+  slots: {
+    grid: "grid grid-cols-1 gap-8 sm:grid-cols-2",
+    card: "group block h-full bg-transparent hover:bg-elevated/50 focus-visible:outline-primary",
+    cardContent: "flex flex-col gap-md",
+    cardContentEnd: "items-end",
+    headingGroup: "flex flex-col gap-xs",
+    headingGroupEnd: "items-end",
+    button: "w-fit text-md rounded-full text-primary group-hover:text-highlighted",
+    typeLabel: "text-muted",
+    infoGroup: "flex flex-col gap-sm",
+    infoGroupEnd: "items-end gap-xs",
+    title: "text-primary text-sm group-hover:text-highlighted",
+    titleEnd: "text-right",
+    description: "text-toned text-xs",
+    descriptionEnd: "text-right"
+  }
+});
+const {
+  grid,
+  card,
+  cardContent,
+  cardContentEnd,
+  headingGroup,
+  headingGroupEnd,
+  button,
+  typeLabel,
+  infoGroup,
+  infoGroupEnd,
+  title: titleClass,
+  titleEnd,
+  description: descriptionClass,
+  descriptionEnd
+} = pageSurroundStyles();
+const { t } = useI18n();
 </script>
 
 <template>
-  <div class="grid grid-cols-1 gap-8 sm:grid-cols-2">
+  <div :class="grid()">
     <div>
       <ULink v-if="previousTitle" :to="previousTo" class="h-full">
-        <UCard
-          variant="soft"
-          class="group block h-full bg-transparent hover:bg-elevated/50 focus-visible:outline-primary"
-        >
-          <div class="flex flex-col gap-md">
-            <div class="flex flex-col gap-xs">
+        <UCard variant="soft" :class="card()">
+          <div :class="cardContent()">
+            <div :class="headingGroup()">
               <UButton
                 variant="outline"
                 icon="lucide:arrow-left"
-                class="group-hover w-fit text-md rounded-full text-primary group-hover:text-highlighted"
+                :class="button()"
               />
-              <span class="text-muted">
+              <span :class="typeLabel()">
                 {{ t("navigation_previous") }}
                 {{ t(pageType) }}
               </span>
             </div>
-            <div class="flex flex-col gap-sm">
-              <p class="text-primary text-sm group-hover:text-highlighted">
+            <div :class="infoGroup()">
+              <p :class="titleClass()">
                 {{ previousTitle }}
               </p>
-              <p class="text-toned text-xs">
+              <p :class="descriptionClass()">
                 {{ previousDescription }}
               </p>
             </div>
@@ -54,27 +87,24 @@ const {
     </div>
     <div>
       <ULink v-if="nextTitle" :to="nextTo" class="h-full">
-        <UCard
-          variant="soft"
-          class="group block h-full bg-transparent hover:bg-elevated/50 focus-visible:outline-primary"
-        >
-          <div class="flex flex-col items-end gap-md">
-            <div class="flex flex-col items-end gap-xs">
+        <UCard variant="soft" :class="card()">
+          <div :class="[cardContent(), cardContentEnd()]">
+            <div :class="[headingGroup(), headingGroupEnd()]">
               <UButton
                 variant="outline"
                 icon="lucide:arrow-right"
-                class="w-fit rounded-full text-primary text-md group-hover:text-highlighted"
+                :class="button()"
               />
-              <span class="text-muted">
+              <span :class="typeLabel()">
                 {{ t("navigation_next") }}
                 {{ t(pageType) }}</span
               >
             </div>
-            <div class="flex flex-col items-end gap-xs">
-              <p class="text-right text-sm text-primary group-hover:text-highlighted">
+            <div :class="[infoGroup(), infoGroupEnd()]">
+              <p :class="[titleClass(), titleEnd()]">
                 {{ nextTitle }}
               </p>
-              <p class="text-right text-toned text-xs">
+              <p :class="[descriptionClass(), descriptionEnd()]">
                 {{ nextDescription }}
               </p>
             </div>

package/dist/runtime/components/page/PageSurround.vue.d.ts

@@ -1,4 +1,4 @@
-type __VLS_Props = {
+export interface PageSurroundProps {
     pageType: string;
     previousTitle?: string;
     previousDescription?: string;
@@ -6,7 +6,9 @@ type __VLS_Props = {
     nextTitle?: string;
     nextDescription?: string;
     nextTo?: 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>;
+}
+export interface PageSurroundEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<PageSurroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageSurroundProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/page/PageTOC.d.vue.ts

@@ -1,14 +1,16 @@
 import type { Block, HeadingLevel } from "../../types/index.js";
-type __VLS_Props = {
+export interface PageTOCProps {
     pageBlocks: Block[] | null;
     title?: string;
     levels?: HeadingLevel[];
-};
+}
+export interface PageTOCEmits {
+}
 declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     bottom?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<PageTOCProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageTOCProps> & Readonly<{}>, {
     title: string;
     levels: HeadingLevel[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/page/PageTOC.vue

@@ -9,10 +9,11 @@ const props = defineProps({
   title: { type: String, required: false, default: "table_of_contents" },
   levels: { type: Array, required: false, default: () => [2, 3, 4] }
 });
-const { t } = useI18n();
-const activeId = ref(null);
-const tocVariants = tv({
+const emit = defineEmits([]);
+const pageTOCStyles = tv({
   slots: {
+    nav: "flex flex-col gap-sm w-full",
+    list: "flex flex-col",
     link: "group relative flex items-center px-3 py-1.5 text-sm transition-all duration-200 border-s-2 -ms-px",
     text: "truncate"
   },
@@ -35,6 +36,15 @@ const tocVariants = tv({
     }
   }
 });
+const {
+  nav,
+  list,
+  link,
+  text
+} = pageTOCStyles();
+const { t } = useI18n();
+const activeId = ref(null);
+const { locale } = useI18n();
 const extractHeadings = (blocks) => {
   const headings = [];
   if (!blocks) return headings;
@@ -84,18 +94,18 @@ onMounted(() => {
 </script>
 
 <template>
-  <nav class="flex flex-col gap-sm w-full" aria-label="Table of Contents">
+  <nav :class="nav()" aria-label="Table of Contents">
     <h5 v-if="title">
       {{ t(title) }}
     </h5>
 
-    <ul v-if="items.length > 0" class="flex flex-col">
+    <ul v-if="items.length > 0" :class="list()">
       <li v-for="item in items" :key="item.id">
         <NuxtLink
           :to="{ hash: `#${item.id}` }"
-          :class="tocVariants({ active: activeId === item.id, level: item.level }).link()"
+          :class="pageTOCStyles({ active: activeId === item.id, level: item.level }).link()"
         >
-          <span :class="tocVariants().text()">
+          <span :class="text()">
             {{ item.title }}
           </span>
         </NuxtLink>

package/dist/runtime/components/page/PageTOC.vue.d.ts

@@ -1,14 +1,16 @@
 import type { Block, HeadingLevel } from "../../types/index.js";
-type __VLS_Props = {
+export interface PageTOCProps {
     pageBlocks: Block[] | null;
     title?: string;
     levels?: HeadingLevel[];
-};
+}
+export interface PageTOCEmits {
+}
 declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     bottom?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<PageTOCProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PageTOCProps> & Readonly<{}>, {
     title: string;
     levels: HeadingLevel[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/page/modals/CreatePageModal.vue

@@ -3,25 +3,31 @@ import { ref, computed, watch } from "vue";
 import {} from "../../../types";
 import { tv } from "tailwind-variants";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
 const { isOpen, loading, definitions } = defineProps({
   isOpen: { type: Boolean, required: true },
   definitions: { type: Object, required: true },
   loading: { type: Boolean, required: false }
 });
-const emits = defineEmits(["close", "confirm"]);
+const emit = defineEmits(["close", "confirm"]);
 const createPageModalStyles = tv({
   slots: {
-    base: "flex flex-col gap-6",
-    group: "border border-neutral-200 rounded-lg p-4 bg-white shadow-sm",
-    groupTitle: "text-lg font-bold text-neutral-900 mb-4",
-    field: "flex flex-col gap-1.5",
-    label: "text-sm font-medium text-neutral-700",
-    input: "w-full px-3 py-2 rounded-md border border-neutral-300 focus:ring-2 focus:ring-primary-500 transition-all outline-hidden",
-    select: "w-full px-3 py-2 rounded-md border border-neutral-300 bg-white"
+    header: "flex items-center justify-between",
+    headerTitle: "text-base font-semibold leading-6",
+    closeButton: "-my-1",
+    body: "space-y-4 py-4",
+    field: "w-full",
+    footer: "flex justify-end gap-2"
   }
 });
-const styles = createPageModalStyles();
+const {
+  header: headerClass,
+  headerTitle,
+  closeButton,
+  body,
+  field,
+  footer
+} = createPageModalStyles();
+const { t } = useI18n();
 const selectedType = ref("");
 const title = ref("");
 const slug = ref("");
@@ -44,8 +50,8 @@ const handleConfirm = () => {
   const properties = {};
   Object.entries(definition.properties).forEach(([groupKey, group]) => {
     properties[groupKey] = {};
-    Object.entries(group.fields).forEach(([fieldKey, field]) => {
-      properties[groupKey][fieldKey] = field.value;
+    Object.entries(group.fields).forEach(([fieldKey, field2]) => {
+      properties[groupKey][fieldKey] = field2.value;
     });
   });
   const newPage = {
@@ -55,29 +61,29 @@ const handleConfirm = () => {
     properties,
     blocks: definition.initialBlocks ? definition.initialBlocks() : []
   };
-  emits("confirm", newPage);
+  emit("confirm", newPage);
 };
 </script>
 
 <template>
-  <UModal :model-value="isOpen" @update:model-value="emits('close')">
+  <UModal :model-value="isOpen" @update:model-value="emit('close')">
     <slot/>
     <template #content>
       <UCard>
       <template #header>
-        <div class="flex items-center justify-between">
-          <h3 class="text-base font-semibold leading-6">Create New Page</h3>
-          <UButton color="neutral" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="emits('close')" />
+        <div :class="headerClass()">
+          <h3 :class="headerTitle()">Create New Page</h3>
+          <UButton color="neutral" variant="ghost" icon="i-heroicons-x-mark-20-solid" :class="closeButton()" @click="emit('close')" />
         </div>
       </template>
 
-      <div class="space-y-4 py-4">
+      <div :class="body()">
         <UFormField label="Page Template" required>
           <USelect
             v-model="selectedType"
             :items="typeOptions"
             :placeholder="t('editor.template_placeholder', 'Select a template...')"
-            class="w-full"
+            :class="field()"
           />
         </UFormField>
 
@@ -91,8 +97,8 @@ const handleConfirm = () => {
       </div>
 
       <template #footer>
-        <div class="flex justify-end gap-2">
-          <UButton color="neutral" variant="ghost" label="Cancel" @click="emits('close')" />
+        <div :class="footer()">
+          <UButton color="neutral" variant="ghost" label="Cancel" @click="emit('close')" />
           <UButton
             color="primary"
             label="Create & Edit"

package/dist/runtime/components/page/modals/DeletePageModal.vue

@@ -1,13 +1,30 @@
 <script setup>
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import { tv } from "tailwind-variants";
+const { t } = useI18n();
 const { isOpen, loading, pageTitle } = defineProps({
   isOpen: { type: Boolean, required: true },
   loading: { type: Boolean, required: false },
   pageTitle: { type: String, required: true }
 });
 const emits = defineEmits(["close", "confirm"]);
-const { t } = useI18n();
+const deletePageModalStyles = tv({
+  slots: {
+    header: "flex items-center justify-between",
+    headerTitle: "text-base font-semibold leading-6 text-error-600",
+    closeButton: "-my-1",
+    body: "text-sm text-neutral-600 dark:text-neutral-400",
+    footer: "flex justify-end gap-2"
+  }
+});
+const {
+  header: headerClass,
+  headerTitle,
+  closeButton,
+  body,
+  footer
+} = deletePageModalStyles();
 const confirmationInput = ref("");
 const CONFIRMATION_TEXT = "DELETE";
 watch(() => isOpen, (val) => {
@@ -26,21 +43,21 @@ const handleConfirm = () => {
     <template #content>
       <UCard :ui="{ body: 'space-y-4' }">
         <template #header>
-          <div class="flex items-center justify-between">
-            <h3 class="text-base font-semibold leading-6 text-error-600">
+          <div :class="headerClass()">
+            <h3 :class="headerTitle()">
               {{ t("editor.delete_page_title", "Delete Page") }}
             </h3>
             <UButton
               color="neutral"
               variant="ghost"
               icon="lucide:x"
-              class="-my-1"
+              :class="closeButton()"
               @click="emits('close')"
             />
           </div>
         </template>
 
-        <div class="text-sm text-neutral-600 dark:text-neutral-400">
+        <div :class="body()">
           <p>
             Are you sure you want to delete <strong>{{ pageTitle }}</strong>?
             This action is permanent and cannot be undone.
@@ -61,7 +78,7 @@ const handleConfirm = () => {
         </UFormField>
 
         <template #footer>
-          <div class="flex justify-end gap-2">
+          <div :class="footer()">
             <UButton
               color="neutral"
               variant="ghost"

package/dist/runtime/components/swatches/ColorSwatch.d.vue.ts

@@ -1,11 +1,13 @@
-type __VLS_Props = {
+export interface ColorSwatchProps {
     name?: string;
     hex?: string;
     rgb?: string;
     hsl?: string;
     oklch?: string;
     cmyk?: 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>;
+}
+export interface ColorSwatchEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<ColorSwatchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorSwatchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/swatches/ColorSwatch.vue

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { useToast } from "@nuxt/ui/composables";
+import { tv } from "tailwind-variants";
 const { copy } = useClipboard();
 const toast = useToast();
 const { name, hex, rgb, hsl, oklch, cmyk } = defineProps({
@@ -12,6 +13,19 @@ const { name, hex, rgb, hsl, oklch, cmyk } = defineProps({
   oklch: { type: String, required: false },
   cmyk: { type: String, required: false }
 });
+const emit = defineEmits([]);
+const colorSwatchStyles = tv({
+  slots: {
+    card: "w-full rounded-none xl:w-fit",
+    title: "text-lg font-bold",
+    content: "flex flex-col items-center gap-sm xl:flex-row xl:items-start",
+    preview: "flex aspect-square size-48 p-sm",
+    details: "flex flex-col justify-end gap-xs text-xs",
+    buttonGroup: "flex w-full flex-col justify-center gap-sm",
+    button: "w-full xl:w-36"
+  }
+});
+const { card, title: titleStyle, content, preview, details, buttonGroup, button } = colorSwatchStyles();
 const copyToClipboard = async (text) => {
   try {
     await copy(`${text}`);
@@ -42,13 +56,13 @@ const color = computed(() => {
 </script>
 
 <template>
-  <UCard variant="subtle" class="w-full rounded-none xl:w-fit">
+  <UCard variant="subtle" :class="card()">
     <template #header v-if="name">
-      <h3 class="text-lg font-bold">{{ name }}</h3>
+      <h3 :class="titleStyle()">{{ name }}</h3>
     </template>
-    <div class="flex flex-col items-center gap-sm xl:flex-row xl:items-start">
-      <div class="flex aspect-square size-48 p-sm" :style="{ backgroundColor: color }">
-        <div class="flex flex-col justify-end gap-xs text-xs">
+    <div :class="content()">
+      <div :class="preview()" :style="{ backgroundColor: color }">
+        <div :class="details()">
           <span v-if="name" class="text-sm">{{ formatColor(name) }}</span>
           <span v-if="hex">HEX {{ formatColor(hex) }}</span>
           <span v-if="rgb">{{ formatColor(rgb) }}</span>
@@ -57,14 +71,14 @@ const color = computed(() => {
           <span v-if="cmyk">{{ formatColor(cmyk) }}</span>
         </div>
       </div>
-      <div class="flex w-full flex-col justify-center gap-sm">
+      <div :class="buttonGroup()">
         <UButton
           v-if="hex"
           variant="outline"
           size="sm"
           icon="lucide:copy"
           label="Copy HEX"
-          class="w-full xl:w-36"
+          :class="button()"
           @click="copyToClipboard(hex)"
         />
         <UButton
@@ -73,7 +87,7 @@ const color = computed(() => {
           size="sm"
           icon="lucide:copy"
           label="Copy RGB"
-          class="w-full xl:w-36"
+          :class="button()"
           @click="copyToClipboard(rgb)"
         />
         <UButton
@@ -82,7 +96,7 @@ const color = computed(() => {
           size="sm"
           icon="lucide:copy"
           label="Copy HSL"
-          class="w-full xl:w-36"
+          :class="button()"
           @click="copyToClipboard(hsl)"
         />
         <UButton
@@ -91,7 +105,7 @@ const color = computed(() => {
           size="sm"
           icon="lucide:copy"
           label="Copy OKLCH"
-          class="w-full xl:w-36"
+          :class="button()"
           @click="copyToClipboard(oklch)"
         />
         <UButton
@@ -100,7 +114,7 @@ const color = computed(() => {
           size="sm"
           icon="lucide:copy"
           label="Copy CMYK"
-          class="w-full xl:w-36"
+          :class="button()"
           @click="copyToClipboard(cmyk)"
         />
       </div>

package/dist/runtime/components/swatches/ColorSwatch.vue.d.ts

@@ -1,11 +1,13 @@
-type __VLS_Props = {
+export interface ColorSwatchProps {
     name?: string;
     hex?: string;
     rgb?: string;
     hsl?: string;
     oklch?: string;
     cmyk?: 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>;
+}
+export interface ColorSwatchEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<ColorSwatchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorSwatchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/swatches/FontSwatch.d.vue.ts

@@ -1,10 +1,12 @@
-type __VLS_Props = {
+export interface FontSwatchProps {
     name?: string;
     jpg?: string;
     png?: string;
     webp?: string;
     svg?: 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>;
+}
+export interface FontSwatchEmits {
+}
+declare const __VLS_export: import("vue").DefineComponent<FontSwatchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FontSwatchProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/swatches/FontSwatch.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from "#imports";
+import { computed } from "vue";
+import { tv } from "tailwind-variants";
 const { name, jpg, png, webp, svg } = defineProps({
   name: { type: String, required: false },
   jpg: { type: String, required: false },
@@ -7,6 +8,18 @@ const { name, jpg, png, webp, svg } = defineProps({
   webp: { type: String, required: false },
   svg: { type: String, required: false }
 });
+const emit = defineEmits([]);
+const fontSwatchStyles = tv({
+  slots: {
+    card: "w-full rounded-none xl:w-fit",
+    title: "text-lg font-bold",
+    content: "flex flex-col gap-sm",
+    actions: "flex flex-col items-center gap-sm xl:flex-row xl:items-start",
+    buttonGroup: "flex w-full flex-col justify-center gap-sm",
+    button: "w-full xl:w-36"
+  }
+});
+const { card, title: titleStyle, content, actions, buttonGroup, button } = fontSwatchStyles();
 const image = computed(() => {
   if (webp) return webp;
   if (png) return png;
@@ -17,12 +30,12 @@ const image = computed(() => {
 </script>
 
 <template>
-  <UCard variant="subtle" class="w-full rounded-none xl:w-fit">
+  <UCard variant="subtle" :class="card()">
     <template #header v-if="name">
-      <h3 class="text-lg font-bold">{{ name }}</h3>
+      <h3 :class="titleStyle()">{{ name }}</h3>
       <span></span>
     </template>
-    <div class="flex flex-col gap-sm">
+    <div :class="content()">
       <h1>H1</h1>
       <p>{{}}</p>
     </div>
@@ -31,15 +44,15 @@ const image = computed(() => {
     <p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
     <p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
     <p></p>
-    <div class="flex flex-col items-center gap-sm xl:flex-row xl:items-start">
-      <div class="flex w-full flex-col justify-center gap-sm">
+    <div :class="actions()">
+      <div :class="buttonGroup()">
         <UButton
           v-if="jpg"
           variant="outline"
           size="sm"
           icon="lucide:download"
           label="Download JPG"
-          class="w-full xl:w-36"
+          :class="button()"
           :to="jpg"
           target="_blank"
         />
@@ -49,7 +62,7 @@ const image = computed(() => {
           size="sm"
           icon="lucide:download"
           label="Download PNG"
-          class="w-full xl:w-36"
+          :class="button()"
           :to="png"
           target="_blank"
         />
@@ -59,7 +72,7 @@ const image = computed(() => {
           size="sm"
           icon="lucide:download"
           label="Download WEBP"
-          class="w-full xl:w-36"
+          :class="button()"
           :to="webp"
           target="_blank"
         />
@@ -69,7 +82,7 @@ const image = computed(() => {
           size="sm"
           icon="lucide:download"
           label="Download SVG"
-          class="w-full xl:w-36"
+          :class="button()"
           :to="svg"
           target="_blank"
         />