nuxtseo-shared 0.1.0

package/dist/kit.d.mts

@@ -0,0 +1,32 @@
+import { Nuxt } from '@nuxt/schema';
+import { Nitro } from 'nitropack';
+import { NitroConfig } from 'nitropack/types';
+import { NuxtPage, NuxtModule } from 'nuxt/schema';
+
+declare function detectTarget(options?: {
+    static?: boolean;
+}): string | undefined;
+declare function resolveNitroPreset(nitroConfig?: NitroConfig): string;
+/**
+ * Get the user provided options for a Nuxt module.
+ *
+ * These options may not be the resolved options that the module actually uses.
+ */
+declare function getNuxtModuleOptions(module: string | NuxtModule, nuxt?: Nuxt): Promise<Record<string, any>>;
+declare function isNuxtGenerate(nuxt?: Nuxt): boolean;
+/**
+ * Generate TypeScript type augmentations for a Nuxt module.
+ */
+declare function extendTypes(module: string, template: (options: {
+    typesPath: string;
+}) => string | Promise<string>): void;
+/**
+ * Create a promise that resolves when Nuxt pages are resolved.
+ */
+declare function createPagesPromise(nuxt?: Nuxt): Promise<NuxtPage[]>;
+/**
+ * Create a promise that resolves when Nitro is initialized.
+ */
+declare function createNitroPromise(nuxt?: Nuxt): Promise<Nitro>;
+
+export { createNitroPromise, createPagesPromise, detectTarget, extendTypes, getNuxtModuleOptions, isNuxtGenerate, resolveNitroPreset };

package/dist/kit.d.ts

@@ -0,0 +1,32 @@
+import { Nuxt } from '@nuxt/schema';
+import { Nitro } from 'nitropack';
+import { NitroConfig } from 'nitropack/types';
+import { NuxtPage, NuxtModule } from 'nuxt/schema';
+
+declare function detectTarget(options?: {
+    static?: boolean;
+}): string | undefined;
+declare function resolveNitroPreset(nitroConfig?: NitroConfig): string;
+/**
+ * Get the user provided options for a Nuxt module.
+ *
+ * These options may not be the resolved options that the module actually uses.
+ */
+declare function getNuxtModuleOptions(module: string | NuxtModule, nuxt?: Nuxt): Promise<Record<string, any>>;
+declare function isNuxtGenerate(nuxt?: Nuxt): boolean;
+/**
+ * Generate TypeScript type augmentations for a Nuxt module.
+ */
+declare function extendTypes(module: string, template: (options: {
+    typesPath: string;
+}) => string | Promise<string>): void;
+/**
+ * Create a promise that resolves when Nuxt pages are resolved.
+ */
+declare function createPagesPromise(nuxt?: Nuxt): Promise<NuxtPage[]>;
+/**
+ * Create a promise that resolves when Nitro is initialized.
+ */
+declare function createNitroPromise(nuxt?: Nuxt): Promise<Nitro>;
+
+export { createNitroPromise, createPagesPromise, detectTarget, extendTypes, getNuxtModuleOptions, isNuxtGenerate, resolveNitroPreset };

package/dist/kit.mjs

@@ -0,0 +1,91 @@
+import { useNuxt, createResolver, addTemplate, loadNuxtModuleInstance, tryUseNuxt } from '@nuxt/kit';
+import { relative } from 'pathe';
+import { provider, env } from 'std-env';
+
+const autodetectableProviders = {
+  azure_static: "azure",
+  cloudflare_pages: "cloudflare-pages",
+  netlify: "netlify",
+  stormkit: "stormkit",
+  vercel: "vercel",
+  cleavr: "cleavr",
+  stackblitz: "stackblitz"
+};
+const autodetectableStaticProviders = {
+  netlify: "netlify-static",
+  vercel: "vercel-static"
+};
+function detectTarget(options = {}) {
+  return options?.static ? autodetectableStaticProviders[provider] : autodetectableProviders[provider];
+}
+function resolveNitroPreset(nitroConfig) {
+  nitroConfig = nitroConfig || tryUseNuxt()?.options?.nitro;
+  if (provider === "stackblitz" || provider === "codesandbox")
+    return provider;
+  let preset;
+  if (nitroConfig && nitroConfig?.preset)
+    preset = nitroConfig.preset;
+  if (!preset)
+    preset = env.NITRO_PRESET || env.SERVER_PRESET || detectTarget() || "node-server";
+  return preset.replace("_", "-");
+}
+async function getNuxtModuleOptions(module, nuxt = useNuxt()) {
+  const moduleMeta = (typeof module === "string" ? { name: module } : await module.getMeta?.()) || {};
+  const { nuxtModule } = await loadNuxtModuleInstance(module, nuxt);
+  let moduleEntry;
+  for (const m of nuxt.options.modules) {
+    if (Array.isArray(m) && m.length >= 2) {
+      const _module = m[0];
+      const _moduleEntryName = typeof _module === "string" ? _module : (await _module.getMeta?.())?.name || "";
+      if (_moduleEntryName === moduleMeta.name)
+        moduleEntry = m;
+    }
+  }
+  let inlineOptions = {};
+  if (moduleEntry)
+    inlineOptions = moduleEntry[1];
+  if (nuxtModule.getOptions)
+    return nuxtModule.getOptions(inlineOptions, nuxt);
+  return inlineOptions;
+}
+function isNuxtGenerate(nuxt = useNuxt()) {
+  return nuxt.options.nitro.static || nuxt.options._generate || [
+    "static",
+    "github-pages"
+  ].includes(resolveNitroPreset(nuxt.options.nitro));
+}
+function extendTypes(module, template) {
+  const nuxt = useNuxt();
+  const { resolve } = createResolver(import.meta.url);
+  addTemplate({
+    filename: `module/${module}.d.ts`,
+    getContents: async () => {
+      const typesPath = relative(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), resolve("runtime/types"));
+      const s = await template({ typesPath });
+      return `// Generated by ${module}
+${s}
+export {}
+`;
+    }
+  });
+  nuxt.hooks.hook("prepare:types", ({ references }) => {
+    references.push({ path: resolve(nuxt.options.buildDir, `module/${module}.d.ts`) });
+  });
+}
+function createPagesPromise(nuxt = useNuxt()) {
+  return new Promise((resolve) => {
+    nuxt.hooks.hook("modules:done", () => {
+      if (typeof nuxt.options.pages === "boolean" && nuxt.options.pages === false || typeof nuxt.options.pages === "object" && !nuxt.options.pages.enabled) {
+        return resolve([]);
+      }
+      nuxt.hook("pages:resolved", (pages) => resolve(pages));
+    });
+  });
+}
+function createNitroPromise(nuxt = useNuxt()) {
+  return new Promise((resolve) => {
+    nuxt.hooks.hook("nitro:init", (nitro) => resolve(nitro));
+  });
+}
+
+export { createNitroPromise, createPagesPromise, detectTarget, extendTypes, getNuxtModuleOptions, isNuxtGenerate, resolveNitroPreset };

package/dist/pro.d.mts

@@ -0,0 +1,18 @@
+interface ModuleRegistration {
+    name: string;
+    version?: string;
+    secret?: string;
+    features?: Record<string, boolean | string | number>;
+}
+/**
+ * Register a Nuxt SEO Pro module for license verification.
+ * Uses Nuxt hook so modules don't need to import from each other.
+ *
+ * Call this in your module setup. Registrations are collected
+ * before the single license verification fetch.
+ */
+declare function registerNuxtSeoProModule(registration: ModuleRegistration): void;
+declare function hookNuxtSeoProLicense(): void;
+
+export { hookNuxtSeoProLicense, registerNuxtSeoProModule };
+export type { ModuleRegistration };

package/dist/pro.d.ts

@@ -0,0 +1,18 @@
+interface ModuleRegistration {
+    name: string;
+    version?: string;
+    secret?: string;
+    features?: Record<string, boolean | string | number>;
+}
+/**
+ * Register a Nuxt SEO Pro module for license verification.
+ * Uses Nuxt hook so modules don't need to import from each other.
+ *
+ * Call this in your module setup. Registrations are collected
+ * before the single license verification fetch.
+ */
+declare function registerNuxtSeoProModule(registration: ModuleRegistration): void;
+declare function hookNuxtSeoProLicense(): void;
+
+export { hookNuxtSeoProLicense, registerNuxtSeoProModule };
+export type { ModuleRegistration };

package/dist/pro.mjs

@@ -0,0 +1,70 @@
+import * as p from '@clack/prompts';
+import { useLogger, useNuxt } from '@nuxt/kit';
+import { useSiteConfig } from 'nuxt-site-config/kit';
+import { $fetch } from 'ofetch';
+import { isTest, isCI } from 'std-env';
+
+const logger = useLogger("nuxt-seo-pro");
+function registerNuxtSeoProModule(registration) {
+  const nuxt = useNuxt();
+  nuxt._nuxtSeoProModules = nuxt._nuxtSeoProModules || [];
+  nuxt._nuxtSeoProModules.push(registration);
+}
+function hookNuxtSeoProLicense() {
+  const nuxt = useNuxt();
+  const isBuild = !nuxt.options.dev && !nuxt.options._prepare;
+  if (isBuild && !nuxt._isNuxtSeoProVerifying) {
+    const license = nuxt.options.runtimeConfig.seoProKey || process.env.NUXT_SEO_PRO_KEY;
+    if (isTest || process.env.VITEST) {
+      return;
+    }
+    if (!isCI && !license) {
+      p.log.warn("\u26A0\uFE0F  Building without license in non-CI environment. A license is required for production builds.");
+      return;
+    }
+    if (!license) {
+      p.log.error("\u{1F510} Nuxt SEO Pro license required");
+      p.note("Set NUXT_SEO_PRO_KEY or configure via module options.\n\nhttps://nuxtseo.com/pro/dashboard", "Get your license");
+      throw new Error("Missing Nuxt SEO Pro license key.");
+    }
+    nuxt._isNuxtSeoProVerifying = true;
+    nuxt.hooks.hook("build:before", async () => {
+      p.intro("Nuxt SEO Pro: License Verification");
+      const siteConfig = useSiteConfig();
+      const spinner = p.spinner();
+      spinner.start("\u{1F511} Verifying Nuxt SEO Pro license...");
+      const siteUrl = siteConfig.url?.startsWith("http") ? siteConfig.url : void 0;
+      const siteName = siteConfig.name || void 0;
+      const modules = nuxt._nuxtSeoProModules?.length > 0 ? nuxt._nuxtSeoProModules : void 0;
+      const res = await $fetch("https://nuxtseo.com/api/pro/verify", {
+        method: "POST",
+        body: {
+          apiKey: license,
+          siteUrl,
+          siteName,
+          modules
+        }
+      }).catch((err) => {
+        if (err?.response?.status === 401) {
+          spinner.error("Invalid API key");
+          p.note("Your API key is invalid.\n\nhttps://nuxtseo.com/pro/dashboard", "License Issue");
+          throw new Error("Invalid Nuxt SEO Pro API key.");
+        }
+        if (err?.response?.status === 403) {
+          spinner.error("No active subscription");
+          p.note("Your subscription has expired or is inactive.\n\nhttps://nuxtseo.com/pro/dashboard", "License Issue");
+          throw new Error("No active Nuxt SEO Pro subscription.");
+        }
+        logger.error(err);
+        return null;
+      });
+      if (!res) {
+        spinner.cancel("License verification skipped (network issue)");
+        return;
+      }
+      spinner.stop("License verified \u2713");
+    });
+  }
+}
+
+export { hookNuxtSeoProLicense, registerNuxtSeoProModule };

package/dist/runtime/server/kit.d.mts

@@ -0,0 +1,7 @@
+import { H3Event } from 'h3';
+import { NitroRouteConfig } from 'nitropack';
+
+declare function withoutQuery(path: string): string;
+declare function createNitroRouteRuleMatcher(e?: H3Event): (path: string) => NitroRouteConfig;
+
+export { createNitroRouteRuleMatcher, withoutQuery };

package/dist/runtime/server/kit.d.ts

@@ -0,0 +1,7 @@
+import { H3Event } from 'h3';
+import { NitroRouteConfig } from 'nitropack';
+
+declare function withoutQuery(path: string): string;
+declare function createNitroRouteRuleMatcher(e?: H3Event): (path: string) => NitroRouteConfig;
+
+export { createNitroRouteRuleMatcher, withoutQuery };

package/dist/runtime/server/kit.mjs

@@ -0,0 +1,27 @@
+import { defu } from 'defu';
+import { useRuntimeConfig } from 'nitropack/runtime';
+import { toRouteMatcher, createRouter } from 'radix3';
+import { withoutTrailingSlash, parseURL, withoutBase } from 'ufo';
+
+function withoutQuery(path) {
+  return path.split("?")[0];
+}
+function createNitroRouteRuleMatcher(e) {
+  const { nitro, app } = useRuntimeConfig(e);
+  const _routeRulesMatcher = toRouteMatcher(
+    createRouter({
+      routes: Object.fromEntries(
+        Object.entries(nitro?.routeRules || {}).map(([path, rules]) => [path === "/" ? path : withoutTrailingSlash(path), rules])
+      )
+    })
+  );
+  return (pathOrUrl) => {
+    const path = pathOrUrl[0] === "/" ? pathOrUrl : parseURL(pathOrUrl, app.baseURL).pathname;
+    const pathWithoutQuery = withoutQuery(path);
+    return defu({}, ..._routeRulesMatcher.matchAll(
+      withoutBase(pathWithoutQuery === "/" ? pathWithoutQuery : withoutTrailingSlash(pathWithoutQuery), app.baseURL)
+    ).reverse());
+  };
+}
+
+export { createNitroRouteRuleMatcher, withoutQuery };

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "nuxtseo-shared",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Shared utilities for Nuxt SEO modules.",
+  "author": {
+    "name": "Harlan Wilton",
+    "email": "harlan@harlanzw.com",
+    "url": "https://harlanzw.com/"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./content": {
+      "types": "./dist/content.d.mts",
+      "import": "./dist/content.mjs"
+    },
+    "./kit": {
+      "types": "./dist/kit.d.mts",
+      "import": "./dist/kit.mjs"
+    },
+    "./devtools": {
+      "types": "./dist/devtools.d.mts",
+      "import": "./dist/devtools.mjs"
+    },
+    "./i18n": {
+      "types": "./dist/i18n.d.mts",
+      "import": "./dist/i18n.mjs"
+    },
+    "./pro": {
+      "types": "./dist/pro.d.mts",
+      "import": "./dist/pro.mjs"
+    },
+    "./runtime/server/kit": {
+      "types": "./dist/runtime/server/kit.d.mts",
+      "import": "./dist/runtime/server/kit.mjs"
+    },
+    "./client": {
+      "types": "./dist/client/index.d.mts",
+      "import": "./dist/client/index.mjs"
+    },
+    "./client/composables/rpc": {
+      "types": "./dist/client/composables/rpc.d.mts",
+      "import": "./dist/client/composables/rpc.mjs"
+    },
+    "./client/composables/shiki": {
+      "types": "./dist/client/composables/shiki.d.mts",
+      "import": "./dist/client/composables/shiki.mjs"
+    },
+    "./client/components/OCodeBlock": "./src/client/components/OCodeBlock.vue",
+    "./client/components/OSectionBlock": "./src/client/components/OSectionBlock.vue",
+    "./client/components/NuxtSeoLogo": "./src/client/components/NuxtSeoLogo.vue"
+  },
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist",
+    "src/client/components"
+  ],
+  "peerDependencies": {
+    "@nuxt/schema": "^3.16.0 || ^4.0.0",
+    "h3": "^1.15.0",
+    "nitropack": "^2.12.0",
+    "nuxt": "^3.16.0 || ^4.0.0",
+    "nuxt-site-config": "^3.2.0",
+    "vue": "^3.5.0",
+    "zod": "^3.23.0"
+  },
+  "peerDependenciesMeta": {
+    "h3": {
+      "optional": true
+    },
+    "nitropack": {
+      "optional": true
+    },
+    "nuxt-site-config": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.10.0",
+    "@nuxt/devtools-kit": "^2.3.0",
+    "@nuxt/kit": "^4.4.2",
+    "consola": "^3.4.2",
+    "defu": "^6.1.4",
+    "ofetch": "^1.4.1",
+    "pathe": "^2.0.3",
+    "radix3": "^1.1.2",
+    "sirv": "^3.0.1",
+    "std-env": "^3.9.0",
+    "ufo": "^1.6.1"
+  },
+  "devDependencies": {
+    "@nuxt/schema": "^4.4.2",
+    "@nuxtjs/i18n": "^10.2.3",
+    "@shikijs/langs": "^3.0.0",
+    "@shikijs/themes": "^3.0.0",
+    "@vueuse/core": "^13.0.0",
+    "h3": "^1.15.0",
+    "nitropack": "^2.13.1",
+    "nuxt-site-config": "^3.2.21",
+    "shiki": "^3.0.0",
+    "typescript": "^5.9.3",
+    "unbuild": "^3.5.0",
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
+  }
+}

package/src/client/components/NuxtSeoLogo.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="flex items-center gap-1">
+    <svg viewBox="0 0 64 64" class="pop-quick w-7 h-7">
+      <defs>
+        <linearGradient id="wmLine1" x1="0%" y1="100%" x2="100%" y2="0%">
+          <stop offset="0%" stop-color="#22c55e" />
+          <stop offset="100%" stop-color="#86efac" />
+        </linearGradient>
+        <linearGradient id="wmFill1" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stop-color="#22c55e" stop-opacity="0.6" />
+          <stop offset="100%" stop-color="#22c55e" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <path
+        class="fill"
+        d="M8 52 Q20 48 24 36 T40 20 T56 12 L56 56 L8 56 Z"
+        fill="url(#wmFill1)"
+      />
+      <path
+        class="line"
+        d="M8 52 Q20 48 24 36 T40 20 T56 12"
+        fill="none"
+        stroke="url(#wmLine1)"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+      <circle class="node" cx="56" cy="12" r="6" fill="url(#wmLine1)" />
+    </svg>
+    <span class="-ml-1 dark:text-white text-black text-lg font-bold tracking-tight slide-right">
+      Nuxt<span class="ml-1 text-green-400">SEO</span>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+@keyframes drawLine {
+  0% { stroke-dashoffset: 100; }
+  100% { stroke-dashoffset: 0; }
+}
+@keyframes revealFill {
+  0% { clip-path: inset(0 100% 0 0); }
+  100% { clip-path: inset(0 0% 0 0); }
+}
+@keyframes popNode {
+  0%, 70% { opacity: 0; transform: scale(0); }
+  85% { transform: scale(1.3); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+}
+@keyframes slideRight {
+  from {
+    transform: scale(0.6) translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.pop-quick .line {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: drawLine 0.8s ease-out forwards;
+}
+.pop-quick .fill {
+  clip-path: inset(0 100% 0 0);
+  animation: revealFill 0.4s ease-out forwards;
+}
+.pop-quick .node {
+  opacity: 0;
+  transform-origin: 56px 12px;
+  animation: popNode 0.6s ease-out forwards;
+}
+.slide-right {
+  animation: slideRight 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
+}
+</style>

package/src/client/components/OCodeBlock.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRenderCodeHighlight } from '../composables/shiki'
+
+const props = withDefaults(
+  defineProps<{
+    code: string
+    lang: 'json' | 'xml' | 'js'
+    lines?: boolean
+    transformRendered?: (code: string) => string
+  }>(),
+  {
+    lines: false,
+  },
+)
+const rendered = computed(() => {
+  const code = useRenderCodeHighlight(props.code, props.lang)
+  return props.transformRendered ? props.transformRendered(code.value || '') : code.value
+})
+</script>
+
+<template>
+  <pre
+    class="code-block p-5"
+    :class="lines ? 'code-block-lines' : ''"
+    v-html="rendered"
+  />
+</template>

package/src/client/components/OSectionBlock.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    icon?: string
+    text?: string
+    description?: string
+    containerClass?: string
+    headerClass?: string
+    collapse?: boolean
+    open?: boolean
+    padding?: boolean | string
+  }>(),
+  {
+    containerClass: '',
+    open: true,
+    padding: true,
+    collapse: true,
+  },
+)
+
+const open = useVModel(props, 'open')
+function onToggle(e: any) {
+  open.value = e.target.open
+}
+</script>
+
+<template>
+  <details :open="open" class="section-block" @toggle="onToggle">
+    <summary class="section-header" :class="collapse ? '' : 'pointer-events-none'">
+      <div class="section-title" :class="[open ? '' : 'opacity-60', headerClass]">
+        <UIcon v-if="icon" :name="icon" class="section-icon" />
+        <div class="flex-1 min-w-0">
+          <div class="section-label">
+            <slot name="text">
+              {{ text }}
+            </slot>
+          </div>
+          <div v-if="description || $slots.description" class="section-description">
+            <slot name="description">
+              {{ description }}
+            </slot>
+          </div>
+        </div>
+        <slot name="actions" />
+        <UIcon
+          v-if="collapse"
+          name="carbon:chevron-down"
+          class="chevron"
+        />
+      </div>
+    </summary>
+    <div
+      class="section-content"
+      :class="typeof padding === 'string' ? padding : padding ? 'px-4' : ''"
+    >
+      <slot name="details" />
+      <div :class="containerClass">
+        <slot />
+      </div>
+      <slot name="footer" />
+    </div>
+  </details>
+</template>
+
+<style scoped>
+.section-block {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background: var(--color-surface-elevated);
+  transition: border-color 200ms ease;
+}
+
+.section-block:hover {
+  border-color: var(--color-neutral-300);
+}
+
+.dark .section-block:hover {
+  border-color: var(--color-neutral-700);
+}
+
+.section-header {
+  cursor: pointer;
+  user-select: none;
+  padding: 0.875rem 1rem;
+  transition: background 150ms ease;
+  list-style: none;
+}
+
+.section-header::-webkit-details-marker {
+  display: none;
+}
+
+.section-header:hover {
+  background: var(--color-surface-sunken);
+}
+
+details[open] .section-header {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  transition: opacity 150ms ease;
+}
+
+.section-icon {
+  color: var(--color-text-muted);
+  font-size: 1.125rem;
+  flex-shrink: 0;
+}
+
+.section-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.section-description {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  margin-top: 0.125rem;
+}
+
+.chevron {
+  color: var(--color-text-subtle);
+  font-size: 0.875rem;
+  flex-shrink: 0;
+  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+details[open] .chevron {
+  transform: rotate(180deg);
+  color: var(--color-text-muted);
+}
+
+.section-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: var(--color-surface-sunken);
+}
+</style>