@nuxt/devtools-ui-kit 0.3.1 → 0.4.0

package/dist/assets/styles.css

@@ -11,4 +11,3 @@ html.dark {
   background-color: #151515;
   color: white;
 }
-

package/dist/components/NButton.vue

@@ -14,7 +14,7 @@ defineProps<{
     :is="to ? NuxtLink : 'button'"
     :to="to"
     v-bind="$attrs"
-    class="n-transition n-button n-button-base hover:n-button-hover active:n-button-active focus-visible:n-focus-base n-disabled:n-disabled"
+    class="n-button n-button-base active:n-button-active focus-visible:n-focus-base n-transition hover:n-button-hover n-disabled:n-disabled"
   >
     <slot name="icon">
       <NIcon v-if="icon" :icon="icon" class="n-button-icon" />

package/dist/components/NCheckbox.vue

@@ -16,19 +16,19 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="items-center select-none n-disabled:n-disabled n-checkbox hover:n-checkbox-hover"
+    class="hover:n-checkbox-hover n-checkbox select-none items-center n-disabled:n-disabled"
     :checked="checked || null"
     :disabled="disabled || null"
   >
     <input
       v-model="checked"
       type="checkbox"
-      class="absolute op0 peer"
+      class="peer absolute op0"
       :disabled="disabled"
       @keypress.enter="checked = !checked"
     >
-    <span class="n-transition n-checkbox-box n-checked:n-checkbox-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base">
-      <NIcon class="n-transition op0 n-checkbox-icon transform scale-0 n-checked:op100 n-checked:scale-100" />
+    <span class="n-checkbox-box n-checked:n-checkbox-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
+      <NIcon class="n-checkbox-icon scale-0 transform op0 n-transition n-checked:scale-100 n-checked:op100" />
     </span>
     <span :class="checked ? '' : 'op50'" class="n-transition"><slot /></span>
   </label>

package/dist/components/NCodeBlock.vue

@@ -27,8 +27,7 @@ const rendered = computed(() => devToolsClient.value?.devtools.renderCodeHighlig
     <pre
       class="n-code-block"
       :class="lines ? 'n-code-block-lines' : ''"
-      v-text="code"
-    />
+    ><pre class="shiki"><code><template v-for="line, _idx in code.split('\n')" :key="_idx"><span class="line" v-text="line" /><br></template></code></pre></pre>
   </template>
 </template>
 

package/dist/components/NDialog.vue

@@ -47,13 +47,13 @@ export default {
 <template>
   <Teleport v-if="show" to="body">
     <div
-      class="n-transition fixed flex items-center justify-center z-100 n-dialog inset-0"
+      class="n-dialog fixed inset-0 z-100 flex items-center justify-center n-transition"
       :class="[
         show ? '' : 'op0 pointer-events-none visibility-none',
       ]"
     >
       <div
-        class="inset-0 absolute -z-1"
+        class="absolute inset-0 -z-1"
         :class="[
           dim ? 'bg-black/50' : '',
         ]"

package/dist/components/NDropdown.vue

@@ -22,7 +22,7 @@ onClickOutside(el, () => {
     </slot>
 
     <div
-      class="absolute n-transition n-bg-base rounded border z-10 n-border-base shadow"
+      class="absolute z-10 border n-border-base rounded shadow n-transition n-bg-base"
       :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1']"
     >
       <slot />

package/dist/components/NIconTitle.vue

@@ -6,7 +6,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="items-center flex flex-gap2">
+  <div flex="~ gap-3" items-center>
     <div v-if="icon" :class="icon" />
     <slot>
       <div>{{ text }}</div>

package/dist/components/NLink.vue

@@ -14,7 +14,7 @@ defineProps<{
   <Component
     :is="(href || target) ? 'a' : NuxtLink"
     v-bind="$props"
-    class="n-transition n-link n-link-base hover:n-link-hover"
+    class="n-link hover:n-link-hover n-transition n-link-base"
   >
     <slot />
   </Component>

package/dist/components/NLoading.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="n-loading">
-    <div class="flex flex-col items-center text-lg animate-pulse">
-      <div class="text-4xl op50 i-carbon-circle-dash animate-spin" />
+  <div class="n-loading n-panel-grids">
+    <div class="flex flex-col animate-pulse items-center text-lg">
+      <div class="i-carbon-circle-dash animate-spin text-4xl op50" />
       <slot>
         Loading...
       </slot>

package/dist/components/NPanelGrids.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="n-panel-grids">
+    <slot />
+  </div>
+</template>

package/dist/components/NRadio.vue

@@ -19,21 +19,21 @@ const model = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="n-disabled:n-disabled items-center select-none inline-flex n-radio hover:n-radio-hover"
+    class="n-radio hover:n-radio-hover inline-flex select-none items-center n-disabled:n-disabled"
     :checked="model === value || null"
     :disabled="disabled || null"
   >
     <input
       v-model="model"
       type="radio"
-      class="absolute op0 peer"
+      class="peer absolute op0"
       :disabled="disabled"
       :name="name"
       :value="value"
       @keypress.enter="model = value!"
     >
-    <span class="n-transition peer-active:n-active-base peer-focus-visible:n-focus-base n-radio-box n-checked:n-radio-box-checked">
-      <div class="n-transition n-radio-inner n-checked:n-radio-inner-checked" />
+    <span class="n-radio-box n-checked:n-radio-box-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
+      <div class="n-radio-inner n-checked:n-radio-inner-checked n-transition" />
     </span>
     <span><slot /></span>
   </label>

package/dist/components/NSectionBlock.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-withDefaults(
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
   defineProps<{
     icon?: string
     text: string
@@ -15,17 +17,24 @@ withDefaults(
     collapse: true,
   },
 )
+
+const open = useVModel(props, 'open', undefined, { passive: true })
+function onToggle(e: any) {
+  open.value = e.target.open
+}
 </script>
 
 <template>
-  <details :open="open">
-    <summary class="select-none cursor-pointer p4 hover:bg-active" :class="collapse ? '' : 'pointer-events-none'">
-      <NIconTitle :icon="icon" :text="text" class="text-xl op75">
+  <details :open="open" @toggle="onToggle">
+    <summary class="cursor-pointer select-none hover:bg-active p4" :class="collapse ? '' : 'pointer-events-none'">
+      <NIconTitle :icon="icon" :text="text" text-xl transition :class="open ? 'op100' : 'op60'">
         <div>
-          <slot name="text">
-            {{ text }}
-          </slot>
-          <div v-if="description || $slots.description" class="op50 text-sm">
+          <div text-base>
+            <slot name="text">
+              {{ text }}
+            </slot>
+          </div>
+          <div v-if="description || $slots.description" text-sm op50>
             <slot name="description">
               {{ description }}
             </slot>
@@ -36,11 +45,16 @@ withDefaults(
         <NIcon
           v-if="collapse"
           icon="carbon-chevron-down"
-          class="op50 cursor-pointer text-base transition duration-500 place-self-start chevron"
+          class="chevron"
+          cursor-pointer place-self-start text-base op75 transition duration-500
         />
       </NIconTitle>
     </summary>
-    <div class="flex flex-col flex-gap2 pt2 pb6" :class="typeof padding === 'string' ? padding : padding ? 'px8' : ''">
+    <div
+      v-lazy-show="open"
+      class="flex flex-col flex-gap2 pb6 pt2"
+      :class="typeof padding === 'string' ? padding : padding ? 'px4' : ''"
+    >
       <slot name="details" />
       <div :class="containerClass" class="mt1">
         <slot />

package/dist/components/NSelect.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+
 const props = withDefaults(
   defineProps<{
     modelValue?: any
@@ -20,12 +21,12 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <div
-    class="flex items-center flex n-bg-base rounded py-1 border n-border-base px-2 n-text-input focus-within:n-focus-base focus-within:border-context"
+    class="n-text-input flex flex items-center border n-border-base rounded px-2 py-1 focus-within:n-focus-base focus-within:border-context n-bg-base"
   >
     <slot name="icon">
-      <NIcon v-if="icon" :icon="icon" class="op50 mr-0.4em text-1.1em" />
+      <NIcon v-if="icon" :icon="icon" class="mr-0.4em text-1.1em op50" />
     </slot>
-    <select v-model="input" :disabled="disabled" class="n-bg-base flex-auto w-full !outline-none">
+    <select v-model="input" :disabled="disabled" class="w-full flex-auto n-bg-base !outline-none">
       <option v-if="placeholder" value="" disabled hidden>
         {{ placeholder }}
       </option>

package/dist/components/NSwitch.vue

@@ -16,19 +16,19 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="n-disabled:n-disabled n-switch n-switch-base"
+    class="n-switch n-switch-base n-disabled:n-disabled"
     :checked="checked || null"
     :disabled="disabled || null"
   >
     <input
       v-model="checked"
       type="checkbox"
-      class="absolute op0 peer"
+      class="peer absolute op0"
       :disabled="disabled"
       @keypress.enter="checked = !checked"
     >
-    <div class="n-transition peer-active:n-active-base peer-focus-visible:n-focus-base n-switch-slider n-checked:n-switch-slider-checked">
-      <div class="n-transition n-switch-thumb n-checked:n-switch-thumb-checked" />
+    <div class="n-switch-slider n-checked:n-switch-slider-checked peer-active:n-active-base peer-focus-visible:n-focus-base n-transition">
+      <div class="n-checked:n-switch-thumb-checked n-switch-thumb n-transition" />
     </div>
     <slot />
   </label>

package/dist/components/NTextInput.vue

@@ -20,13 +20,13 @@ const input = useVModel(props, 'modelValue', emit, { passive: true })
 </script>
 
 <template>
-  <div class="n-bg-base rounded py-1 border n-border-base flex items-center flex n-text-input focus-within:n-focus-base focus-within:border-context px-2">
+  <div class="n-text-input flex flex items-center border n-border-base rounded py-1 pl-1 pr-2 focus-within:n-focus-base focus-within:border-context n-bg-base">
     <slot name="icon">
-      <NIcon v-if="icon" :icon="icon" class="op50 mr-0.4em text-1.1em" />
+      <NIcon v-if="icon" :icon="icon" class="ml-0.3em mr-0.1em text-1.1em op50" />
     </slot>
     <input
       v-model="input"
-      class="flex-auto n-bg-base w-full !outline-none"
+      class="ml-0.4em w-full flex-auto n-bg-base !outline-none"
       :type="type"
       :disabled="disabled"
       :placeholder="placeholder"

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "devtools-ui-kit",
   "configKey": "devtoolsUIKit",
-  "version": "0.3.1"
+  "version": "0.4.0"
 }

package/dist/module.mjs

@@ -8,7 +8,9 @@ import '@unocss/preset-mini';
 import '@unocss/preset-mini/rules';
 import 'unocss';
 
-const rPath = (p) => fileURLToPath(new URL(p, import.meta.url).toString());
+function rPath(p) {
+  return fileURLToPath(new URL(p, import.meta.url).toString());
+}
 const module = defineNuxtModule({
   meta: {
     name: "devtools-ui-kit",
@@ -29,6 +31,7 @@ const module = defineNuxtModule({
     await installModule(await resolver.resolvePath("@unocss/nuxt"));
     await installModule(await resolver.resolvePath("@vueuse/nuxt"));
     await installModule(await resolver.resolvePath("@nuxtjs/color-mode"));
+    await installModule(await resolver.resolvePath("v-lazy-show/nuxt"));
   }
 });
 

package/dist/runtime/client.d.ts

@@ -1 +1 @@
-export declare const devToolsClient: import("vue").Ref<import("@nuxt/devtools-kit/dist/client-api-34a84dad").c | undefined>;
+export declare const devToolsClient: import("vue").Ref<import("@nuxt/devtools-kit/dist/client-api-a2b0aa8f").c | undefined>;

package/dist/unocss.d.ts

@@ -1,7 +1,7 @@
 import { Preset } from '@unocss/core';
 import { UnocssNuxtOptions } from '@unocss/nuxt';
 
-declare const unocssPreset: () => Preset;
+declare function unocssPreset(): Preset;
 declare function extendUnocssOptions(user?: UnocssNuxtOptions): UnocssNuxtOptions;
 
 export { extendUnocssOptions, unocssPreset };

package/dist/unocss.mjs

@@ -3,108 +3,126 @@ import { theme } from '@unocss/preset-mini';
 import { fonts } from '@unocss/preset-mini/rules';
 import { mergeDeep, presetUno, presetAttributify, presetTypography, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
 
-const unocssPreset = () => ({
-  name: "@nuxt/devtools-ui-kit",
-  theme: mergeDeep(theme, {
-    colors: {
-      context: "rgba(var(--nui-c-context),%alpha)"
-    },
-    fontFamily: {
-      sans: "Avenir, Helvetica, Arial, sans-serif"
-    }
-  }),
-  rules: [
-    [/^n-(.*)$/, ([, body], { theme }) => {
-      const color = parseColor(body, theme);
-      if (color?.cssColor?.type === "rgb" && color.cssColor.components) {
-        return {
-          "--nui-c-context": `${color.cssColor.components.join(",")}`
-        };
-      }
-    }],
-    [/^n-(.*)$/, fonts[1][1]],
-    ["n-dashed", { "border-style": "dashed" }],
-    ["n-solid", {
-      "background-color": "rgba(var(--nui-c-context), 1) !important",
-      "border-color": "rgba(var(--nui-c-context), 1)",
-      "color": "white !important"
-    }],
-    ["n-disabled", {
-      "opacity": 0.4,
-      "pointer-events": "none",
-      "filter": "saturate(0)"
-    }]
-  ],
-  variants: [
-    (input) => {
-      const prefix = "n-disabled:";
-      if (input.startsWith(prefix)) {
-        return {
-          matcher: input.slice(prefix.length),
-          selector: (input2) => `[disabled] ${input2}, ${input2}[disabled]`
-        };
+function unocssPreset() {
+  return {
+    name: "@nuxt/devtools-ui-kit",
+    theme: mergeDeep(theme, {
+      colors: {
+        context: "rgba(var(--nui-c-context),%alpha)"
+      },
+      fontFamily: {
+        sans: "Avenir, Helvetica, Arial, sans-serif"
       }
-    },
-    (input) => {
-      const prefix = "n-checked:";
-      if (input.startsWith(prefix)) {
-        return {
-          matcher: input.slice(prefix.length),
-          selector: (input2) => `[checked] ${input2}, ${input2}[checked]`
-        };
+    }),
+    rules: [
+      [/^n-(.*)$/, ([, body], { theme }) => {
+        const color = parseColor(body, theme);
+        if (color?.cssColor?.type === "rgb" && color.cssColor.components) {
+          return {
+            "--nui-c-context": `${color.cssColor.components.join(",")}`
+          };
+        }
+      }],
+      [/^n-(.*)$/, fonts[1][1]],
+      ["n-dashed", { "border-style": "dashed" }],
+      ["n-solid", {
+        "background-color": "rgba(var(--nui-c-context), 1) !important",
+        "border-color": "rgba(var(--nui-c-context), 1)",
+        "color": "white !important"
+      }],
+      ["n-disabled", {
+        "opacity": 0.4,
+        "pointer-events": "none",
+        "filter": "saturate(0)"
+      }],
+      /**
+       * Credit to Nanda Syahrasyad (https://github.com/narendrasss)
+       *
+       * - https://github.com/narendrasss/NotANumber
+       * - https://www.nan.fyi/grid.svg
+       * - https://www.nan.fyi/grid-dark.svg
+       */
+      ["n-panel-grids-light", {
+        "background-image": `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E%3Cpath d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z' stroke-width='0.2' stroke='hsla(0, 0%25, 98%25, 1)' fill='none'/%3E%3C/svg%3E")`,
+        "background-size": "40px 40px"
+      }],
+      ["n-panel-grids-dark", {
+        "background-image": `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' transform='scale(3)'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='hsl(0, 0%25, 8.5%25)'/%3E%3Cpath d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z' stroke-width='0.2' stroke='hsl(0, 0%25, 11.0%25)' fill='none'/%3E%3C/svg%3E");`,
+        "background-size": "40px 40px"
+      }]
+    ],
+    variants: [
+      (input) => {
+        const prefix = "n-disabled:";
+        if (input.startsWith(prefix)) {
+          return {
+            matcher: input.slice(prefix.length),
+            selector: (input2) => `[disabled] ${input2}, ${input2}[disabled]`
+          };
+        }
+      },
+      (input) => {
+        const prefix = "n-checked:";
+        if (input.startsWith(prefix)) {
+          return {
+            matcher: input.slice(prefix.length),
+            selector: (input2) => `[checked] ${input2}, ${input2}[checked]`
+          };
+        }
       }
+    ],
+    shortcuts: {
+      // general
+      "n-bg-base": "bg-white dark:bg-[#151515]",
+      "n-bg-active": "bg-gray:5",
+      "n-bg-hover": "bg-gray:3",
+      "n-border-base": "border-gray/20",
+      "n-transition": "transition-all duration-200",
+      "n-focus-base": "ring-2 ring-context/50",
+      "n-active-base": "ring-3 ring-context/10",
+      "n-borderless": "!border-none !shadow-none",
+      // link
+      "n-link-base": "underline underline-offset-2 underline-black/20 dark:underline-white/40",
+      "n-link-hover": "decoration-dotted text-context underline-context",
+      // card
+      "n-card-base": "border n-border-base rounded n-bg-base shadow-sm",
+      // header
+      "n-header-upper": "text-sm uppercase mb-2 leading-1.2em tracking-wide op50",
+      // button
+      "n-button-base": "border n-border-base rounded shadow-sm px-1em py-0.25em inline-flex items-center gap-1 op80 !outline-none touch-manipulation",
+      "n-button-hover": "op100 !border-context text-context",
+      "n-button-active": "n-active-base bg-context/5",
+      "n-button-icon": "-ml-0.2em mr-0.2em text-1.1em",
+      // checkbox
+      "n-checkbox": "inline-flex gap-1 items-center",
+      "n-checkbox-box": "border n-border-base w-1.1em h-1.1em mr-1 text-white flex flex-none items-center rounded-sm overflow-visible",
+      "n-checkbox-box-checked": "bg-context border-context",
+      "n-checkbox-icon": "carbon-checkmark w-1em h-1em m-auto",
+      // radio
+      "n-radio-box": "border n-border-base w-1.2em h-1.2em mr-1 text-white flex flex-none rounded-full overflow-visible",
+      "n-radio-box-checked": "border-context",
+      "n-radio-inner": "bg-context rounded-1/2 w-0 h-0 m-auto",
+      "n-radio-inner-checked": "w-0.8em h-0.8em",
+      // switch
+      "n-switch-base": "inline-flex items-center select-none",
+      "n-switch-slider": "mr-1 rounded-full border n-border-base relative p-2px",
+      "n-switch-slider-checked": "border-context/20 bg-context/10",
+      "n-switch-thumb": "h-1em w-1em rounded-1/2 border n-border-base ml-0 mr-0.8em",
+      "n-switch-thumb-checked": "bg-context border-context ml-0.8em mr-0",
+      // tip
+      "n-tip-base": "bg-context/4 text-context px-1em py-0.4em rounded flex gap-2 items-center dark:bg-context/12",
+      // icon
+      "n-icon": "flex-none",
+      // code
+      "n-code-block": "dark:bg-[#121212] bg-white",
+      // icon-button
+      "n-icon-button": "aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:n-bg-active",
+      // loading
+      "n-loading": "flex h-full w-full justify-center items-center",
+      "n-panel-grids": "n-panel-grids-light dark:n-panel-grids-dark flex flex-col h-full gap-2 items-center justify-center"
     }
-  ],
-  shortcuts: {
-    // general
-    "n-bg-base": "bg-white dark:bg-[#151515]",
-    "n-bg-active": "bg-gray:5",
-    "n-bg-hover": "bg-gray:3",
-    "n-border-base": "border-gray/20",
-    "n-transition": "transition-all duration-200",
-    "n-focus-base": "ring-2 ring-context/50",
-    "n-active-base": "ring-3 ring-context/10",
-    "n-borderless": "!border-none !shadow-none",
-    // link
-    "n-link-base": "underline underline-offset-2 underline-black/20 dark:underline-white/40",
-    "n-link-hover": "decoration-dotted text-context underline-context",
-    // card
-    "n-card-base": "border n-border-base rounded n-bg-base shadow-sm",
-    // header
-    "n-header-upper": "text-sm uppercase mb-2 leading-1.2em tracking-wide op50",
-    // button
-    "n-button-base": "border n-border-base rounded shadow-sm px-1em py-0.25em inline-flex items-center gap-1 op80 !outline-none touch-manipulation",
-    "n-button-hover": "op100 !border-context text-context",
-    "n-button-active": "n-active-base bg-context/5",
-    "n-button-icon": "-ml-0.2em mr-0.2em text-1.1em",
-    // checkbox
-    "n-checkbox": "inline-flex gap-1 items-center",
-    "n-checkbox-box": "border n-border-base w-1.1em h-1.1em mr-1 text-white flex flex-none items-center rounded-sm overflow-visible",
-    "n-checkbox-box-checked": "bg-context border-context",
-    "n-checkbox-icon": "carbon-checkmark w-1em h-1em m-auto",
-    // radio
-    "n-radio-box": "border n-border-base w-1.2em h-1.2em mr-1 text-white flex flex-none rounded-full overflow-visible",
-    "n-radio-box-checked": "border-context",
-    "n-radio-inner": "bg-context rounded-1/2 w-0 h-0 m-auto",
-    "n-radio-inner-checked": "w-0.8em h-0.8em",
-    // switch
-    "n-switch-base": "inline-flex items-center select-none",
-    "n-switch-slider": "mr-1 rounded-full border n-border-base relative p-2px",
-    "n-switch-slider-checked": "border-context/20 bg-context/10",
-    "n-switch-thumb": "h-1em w-1em rounded-1/2 border n-border-base ml-0 mr-0.8em",
-    "n-switch-thumb-checked": "bg-context border-context ml-0.8em mr-0",
-    // tip
-    "n-tip-base": "bg-context/4 text-context px-1em py-0.4em rounded flex gap-2 items-center dark:bg-context/12",
-    // icon
-    "n-icon": "flex-none",
-    // code
-    "n-code-block": "dark:bg-[#121212] bg-white",
-    // icon-button
-    "n-icon-button": "aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:n-bg-active",
-    // loading
-    "n-loading": "flex h-full w-full justify-center items-center"
-  }
-});
+  };
+}
 function extendUnocssOptions(user = {}) {
   return {
     ...user,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nuxt/devtools-ui-kit",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "MIT",
   "repository": "nuxt/devtools",
   "exports": {
@@ -23,29 +23,30 @@
     "*.cjs"
   ],
   "peerDependencies": {
-    "@nuxt/devtools": "0.3.1"
+    "@nuxt/devtools": "0.4.0"
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.1.16",
-    "@nuxt/kit": "^3.3.1",
+    "@nuxt/kit": "^3.3.3",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@unocss/core": "^0.50.6",
-    "@unocss/nuxt": "^0.50.6",
-    "@unocss/preset-attributify": "^0.50.6",
-    "@unocss/preset-icons": "^0.50.6",
-    "@unocss/preset-mini": "^0.50.6",
-    "@unocss/reset": "^0.50.6",
+    "@unocss/core": "^0.51.4",
+    "@unocss/nuxt": "^0.51.4",
+    "@unocss/preset-attributify": "^0.51.4",
+    "@unocss/preset-icons": "^0.51.4",
+    "@unocss/preset-mini": "^0.51.4",
+    "@unocss/reset": "^0.51.4",
     "@vueuse/core": "^9.13.0",
     "@vueuse/integrations": "^9.13.0",
     "@vueuse/nuxt": "^9.13.0",
     "defu": "^6.1.2",
     "focus-trap": "^7.4.0",
-    "unocss": "^0.50.6",
-    "@nuxt/devtools": "0.3.1",
-    "@nuxt/devtools-kit": "0.3.1"
+    "unocss": "^0.51.4",
+    "v-lazy-show": "^0.2.2",
+    "@nuxt/devtools": "0.4.0",
+    "@nuxt/devtools-kit": "0.4.0"
   },
   "devDependencies": {
-    "nuxt": "^3.3.1"
+    "nuxt": "^3.3.3"
   },
   "publishConfig": {
     "access": "public"