feat(types): LangTag types languageName prop using LanguageName utility type

src/LangTag.svelte

@@ -5,7 +5,7 @@
   /** @type {string} */
   export let highlighted;
 
-  /** @type {string} */
+  /** @type {import('./languages').LanguageName | (string & {})} */
   export let languageName = "plaintext";
 
   /** @type {boolean} */

src/LangTag.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { SvelteComponentTyped } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import type { LangtagProps } from "./Highlight.svelte";
+import type { LanguageName } from "./languages";
 
 export type LangTagProps = HTMLAttributes<HTMLPreElement> &
   LangtagProps & {
@@ -18,7 +19,7 @@ export type LangTagProps = HTMLAttributes<HTMLPreElement> &
      * Provide the language name.
      * @default "plaintext"
      */
-    languageName?: string;
+    languageName?: LanguageName | (string & {});
   };
 
 export type LangTagEvents = {};

tests/e2e/LangTag.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import LangTag from "../../src/LangTag.svelte";
+  import hljs from "highlight.js/lib/core";
+  import typescript from "highlight.js/lib/languages/typescript";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+
+  hljs.registerLanguage("typescript", typescript);
+
+  const code = "const add = (a: number, b: number) => a + b;";
+  const highlighted = hljs.highlight(code, { language: "typescript" }).value;
+</script>
+
+<svelte:head>
+  {@html atomOneDark}
+</svelte:head>
+
+<LangTag {code} {highlighted} languageName="typescript" langtag />

tests/e2e/e2e.test.ts

@@ -2,6 +2,7 @@ import { expect, test } from "@playwright/experimental-ct-svelte";
 import Highlight from "./Highlight.test.svelte";
 import HighlightAuto from "./HighlightAuto.test.svelte";
 import HighlightAutoLanguageRestriction from "./HighlightAuto.languageRestriction.test.svelte";
+import LangTag from "./LangTag.test.svelte";
 import LineNumbersCustomStartingLine from "./LineNumbers.customStartingLine.test.svelte";
 import LineNumbersHideBorder from "./LineNumbers.hideBorder.test.svelte";
 import LineNumbers from "./LineNumbers.test.svelte";
@@ -109,3 +110,18 @@ test("Auto-highlighting with language restriction", async ({ mount, page }) => {
   await expect(page.locator(".hljs-keyword")).toBeVisible();
   await expect(page.locator(".hljs-number")).toHaveText("42");
 });
+
+test("LangTag", async ({ mount, page }) => {
+  await mount(LangTag);
+
+  await expect(page.locator("pre.langtag")).toBeVisible();
+  await expect(page.locator("pre")).toHaveAttribute(
+    "data-language",
+    "typescript",
+  );
+  await expect(page.locator(".hljs-keyword")).toHaveText("const");
+  await expect(page.locator(".hljs-title")).toHaveText("add");
+
+  const preElement = page.locator("pre.langtag");
+  await expect(preElement).toHaveCSS("position", "relative");
+});