@maizzle/framework 6.0.0-rc.2 → 6.0.0-rc.20

package/README.md

@@ -7,7 +7,7 @@
       </picture>
     </a>
   </p>
-  <p>Quickly build HTML emails with Tailwind CSS</p>
+  <p>The modern email development framework</p>
   <div>
 
   [![Version][npm-version-shield]][npm]
@@ -20,9 +20,9 @@
 
 ## About
 
-> **Note:** This repository contains the core code of the Maizzle framework. If you want to build HTML emails using Maizzle, visit the [Starter repository](https://github.com/maizzle/maizzle).
+> **Note:** This repository contains the core code of the Maizzle framework. If you want to start building HTML emails using Maizzle, visit the [Starter repository](https://github.com/maizzle/maizzle).
 
-Maizzle is a framework that helps you quickly build HTML emails with [Tailwind CSS](https://tailwindcss.com/).
+Maizzle is a Vite-powered framework for building HTML emails with Vue and Tailwind CSS.
 
 ## Documentation
 

package/bin/maizzle.mjs

@@ -5,6 +5,6 @@ import { fileURLToPath } from 'node:url'
 
 const jiti = createJiti(fileURLToPath(import.meta.url), { interopDefault: true })
 const { default: bootstrap } = await jiti.import('maizzle')
-const framework = await jiti.import('../dist/index.mjs')
+const framework = await jiti.import('../dist/index.js')
 
 await bootstrap(framework)

package/dist/build.d.ts

@@ -0,0 +1,20 @@
+import { MaizzleConfig } from "./types/config.js";
+//#region src/build.d.ts
+interface BuildResult {
+  files: string[];
+  config: MaizzleConfig;
+}
+/**
+ * Build all SFC email templates to HTML files.
+ *
+ * Creates a single Renderer instance, then loops through each template
+ * calling render → transformers → write to disk.
+ *
+ * Pass a `Partial<MaizzleConfig>` to override config inline, or a string
+ * to load config from a specific file path. Omit to load `maizzle.config`
+ * from the working directory.
+ */
+declare function build(configInput?: Partial<MaizzleConfig> | string): Promise<BuildResult>;
+//#endregion
+export { BuildResult, build };
+//# sourceMappingURL=build.d.ts.map

package/dist/build.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.d.ts","names":[],"sources":["../src/build.ts"],"mappings":";;UAciB,WAAA;EACf,KAAA;EACA,MAAA,EAAQ,aAAA;AAAA;;;;;;;;;AAaV;;iBAAsB,KAAA,CAAM,WAAA,GAAc,OAAA,CAAQ,aAAA,aAA0B,OAAA,CAAQ,WAAA"}

package/dist/{build.mjs → build.js}

@@ -1,24 +1,33 @@
-import { resolveConfig } from "./config/index.mjs";
-import { EventManager } from "./events/index.mjs";
-import { runTransformers } from "./transformers/index.mjs";
-import { createRenderer } from "./render/createRenderer.mjs";
-import { createPlaintext } from "./plaintext.mjs";
+import { resolveConfig } from "./config/index.js";
+import { EventManager } from "./events/index.js";
+import { runTransformers } from "./transformers/index.js";
+import { normalizeComponentSources } from "./utils/componentSources.js";
+import { createRenderer } from "./render/createRenderer.js";
+import { createPlaintext } from "./plaintext.js";
+import { stripForHtml, stripForPlaintext } from "./utils/output-markers.js";
 import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, relative, resolve } from "node:path";
 import { glob } from "tinyglobby";
 import ora from "ora";
-
+import defu from "defu";
 //#region src/build.ts
 /**
 * Build all SFC email templates to HTML files.
 *
 * Creates a single Renderer instance, then loops through each template
 * calling render → transformers → write to disk.
+*
+* Pass a `Partial<MaizzleConfig>` to override config inline, or a string
+* to load config from a specific file path. Omit to load `maizzle.config`
+* from the working directory.
 */
-async function build(options = {}) {
+async function build(configInput) {
 	const start = Date.now();
-	const spinner = ora("Building templates...").start();
-	const config = await resolveConfig(options.config);
+	const spinner = ora({
+		text: "Building templates...",
+		spinner: "circleHalves"
+	}).start();
+	const config = await resolveConfig(configInput);
 	const events = new EventManager();
 	events.registerConfig(config);
 	await events.fireBeforeCreate({ config });
@@ -41,7 +50,8 @@ async function build(options = {}) {
 	const renderer = await createRenderer({
 		markdown: config.markdown,
 		root: config.root,
-		componentDirs: [config.components?.root ?? []].flat()
+		componentDirs: normalizeComponentSources(config.components?.source, process.cwd()),
+		vite: config.vite
 	});
 	const outputFiles = [];
 	try {
@@ -53,38 +63,42 @@ async function build(options = {}) {
 				template
 			});
 			const rendered = await renderer.render(absolutePath, config);
+			for (const { name, handler } of rendered.sfcEventHandlers) events.on(name, handler);
 			let html = await events.fireAfterRender({
 				config,
 				template,
 				html: rendered.html
 			});
 			const templateConfig = rendered.templateConfig;
-			if (templateConfig.useTransformers !== false) html = await runTransformers(html, templateConfig, absolutePath);
+			const doctype = rendered.doctype ?? templateConfig.doctype ?? "<!DOCTYPE html>";
+			if (templateConfig.useTransformers !== false) html = await runTransformers(html, templateConfig, absolutePath, doctype, rendered.tailwindBlocks);
 			html = await events.fireAfterTransform({
 				config,
 				template,
 				html
 			});
-			html = `${rendered.doctype ?? templateConfig.doctype ?? "<!DOCTYPE html>"}\n${html}`;
+			html = `${doctype}\n${html}`;
+			const htmlOut = stripForHtml(html);
 			const outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase);
 			mkdirSync(dirname(outputFilePath), { recursive: true });
-			writeFileSync(outputFilePath, html);
+			writeFileSync(outputFilePath, htmlOut);
 			outputFiles.push(outputFilePath);
 			const globalPlaintext = templateConfig.plaintext;
 			const sfcPlaintext = rendered.plaintext;
 			if (globalPlaintext || sfcPlaintext) {
-				const plaintext = createPlaintext(html, typeof globalPlaintext === "object" ? globalPlaintext : {});
-				const ptExtension = sfcPlaintext?.extension ?? "txt";
+				const globalCfg = typeof globalPlaintext === "object" ? globalPlaintext : {};
+				const stripOptions = defu(sfcPlaintext?.options, globalCfg.options);
+				const plaintext = createPlaintext(stripForPlaintext(html), stripOptions);
+				const ptExtension = sfcPlaintext?.extension ?? globalCfg.extension ?? "txt";
 				let ptOutputPath;
 				if (sfcPlaintext?.destination) {
 					const name = basename(templatePath).replace(/\.(vue|md)$/, "");
 					ptOutputPath = join(resolve(sfcPlaintext.destination), `${name}.${ptExtension}`);
-				} else if (typeof globalPlaintext === "string") ptOutputPath = resolveOutputPath(templatePath, resolve(globalPlaintext), ptExtension, contentBase);
+				} else if (globalCfg.destination) ptOutputPath = resolveOutputPath(templatePath, resolve(globalCfg.destination), ptExtension, contentBase);
 				else ptOutputPath = resolveOutputPath(templatePath, outputPath, ptExtension, contentBase);
 				mkdirSync(dirname(ptOutputPath), { recursive: true });
 				writeFileSync(ptOutputPath, plaintext);
 			}
-			for (const { name, handler } of rendered.sfcEventHandlers) events.on(name, handler);
 			events.clearSfcHandlers();
 		}
 		await copyStatic(config, outputPath);
@@ -133,7 +147,7 @@ async function copyStatic(config, outputPath) {
 		cpSync(file, destPath);
 	}
 }
-
 //#endregion
 export { build };
-//# sourceMappingURL=build.mjs.map
+
+//# sourceMappingURL=build.js.map

package/dist/build.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.js","names":[],"sources":["../src/build.ts"],"sourcesContent":["import { readFileSync, writeFileSync, mkdirSync, cpSync, existsSync, rmSync } from 'node:fs'\nimport { resolve, dirname, basename, relative, join } from 'node:path'\nimport { glob } from 'tinyglobby'\nimport ora from 'ora'\nimport { resolveConfig } from './config/index.ts'\nimport { EventManager } from './events/index.ts'\nimport { runTransformers } from './transformers/index.ts'\nimport { createRenderer } from './render/createRenderer.ts'\nimport { createPlaintext } from './plaintext.ts'\nimport { stripForHtml, stripForPlaintext } from './utils/output-markers.ts'\nimport { normalizeComponentSources } from './utils/componentSources.ts'\nimport defu from 'defu'\nimport type { MaizzleConfig } from './types/index.ts'\n\nexport interface BuildResult {\n  files: string[]\n  config: MaizzleConfig\n}\n\n/**\n * Build all SFC email templates to HTML files.\n *\n * Creates a single Renderer instance, then loops through each template\n * calling render → transformers → write to disk.\n *\n * Pass a `Partial<MaizzleConfig>` to override config inline, or a string\n * to load config from a specific file path. Omit to load `maizzle.config`\n * from the working directory.\n */\nexport async function build(configInput?: Partial<MaizzleConfig> | string): Promise<BuildResult> {\n  const start = Date.now()\n  const spinner = ora({ text: 'Building templates...', spinner: 'circleHalves' }).start()\n\n  const config = await resolveConfig(configInput)\n\n  const events = new EventManager()\n  events.registerConfig(config)\n  await events.fireBeforeCreate({ config })\n\n  const outputPath = resolve(config.output?.path ?? 'dist')\n  const outputExtension = config.output?.extension ?? 'html'\n\n  const contentPatterns = config.content ?? ['emails/**/*.vue']\n  const contentBase = computeContentBase(contentPatterns)\n  const templateFiles = await glob(contentPatterns)\n\n  if (templateFiles.length === 0) {\n    spinner.succeed('No templates found')\n    return { files: [], config }\n  }\n\n  // Clear the output directory before writing fresh output\n  if (existsSync(outputPath)) {\n    rmSync(outputPath, { recursive: true, force: true })\n  }\n\n  const renderer = await createRenderer({ markdown: config.markdown, root: config.root, componentDirs: normalizeComponentSources(config.components?.source, process.cwd()), vite: config.vite })\n  const outputFiles: string[] = []\n\n  try {\n    for (const templatePath of templateFiles) {\n      const absolutePath = resolve(templatePath)\n      let template = readFileSync(absolutePath, 'utf-8')\n\n      template = await events.fireBeforeRender({ config, template })\n\n      const rendered = await renderer.render(absolutePath, config)\n\n      // Register SFC event handlers collected during render so they participate\n      // in the post-render events (afterRender / afterTransform). They're cleared\n      // at the end of the iteration so they don't leak into the next template.\n      for (const { name, handler } of rendered.sfcEventHandlers) {\n        events.on(name, handler)\n      }\n\n      let html = await events.fireAfterRender({ config, template, html: rendered.html })\n\n      // Use the per-template merged config (from defineConfig() in the SFC) so that\n      // template-level overrides like css.safe: false are respected by transformers.\n      const templateConfig = rendered.templateConfig\n\n      const doctype = rendered.doctype ?? templateConfig.doctype ?? '<!DOCTYPE html>'\n\n      if (templateConfig.useTransformers !== false) {\n        html = await runTransformers(html, templateConfig, absolutePath, doctype, rendered.tailwindBlocks)\n      }\n\n      html = await events.fireAfterTransform({ config, template, html })\n      html = `${doctype}\\n${html}`\n\n      const htmlOut = stripForHtml(html)\n      const outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase)\n      mkdirSync(dirname(outputFilePath), { recursive: true })\n      writeFileSync(outputFilePath, htmlOut)\n      outputFiles.push(outputFilePath)\n\n      // Generate plaintext version if configured\n      const globalPlaintext = templateConfig.plaintext\n      const sfcPlaintext = rendered.plaintext\n\n      if (globalPlaintext || sfcPlaintext) {\n        const globalCfg = typeof globalPlaintext === 'object' ? globalPlaintext : {}\n        const stripOptions = defu(sfcPlaintext?.options, globalCfg.options)\n        const plaintext = createPlaintext(stripForPlaintext(html), stripOptions)\n        const ptExtension = sfcPlaintext?.extension ?? globalCfg.extension ?? 'txt'\n\n        let ptOutputPath: string\n\n        if (sfcPlaintext?.destination) {\n          const name = basename(templatePath).replace(/\\.(vue|md)$/, '')\n          ptOutputPath = join(resolve(sfcPlaintext.destination), `${name}.${ptExtension}`)\n        } else if (globalCfg.destination) {\n          ptOutputPath = resolveOutputPath(templatePath, resolve(globalCfg.destination), ptExtension, contentBase)\n        } else {\n          ptOutputPath = resolveOutputPath(templatePath, outputPath, ptExtension, contentBase)\n        }\n\n        mkdirSync(dirname(ptOutputPath), { recursive: true })\n        writeFileSync(ptOutputPath, plaintext)\n      }\n\n      events.clearSfcHandlers()\n    }\n\n    await copyStatic(config, outputPath)\n    await events.fireAfterBuild({ files: outputFiles, config })\n  } finally {\n    await renderer.close()\n  }\n\n  const duration = ((Date.now() - start) / 1000).toFixed(2)\n  const count = outputFiles.length\n  spinner.stopAndPersist({\n    symbol: '✅',\n    text: `Built ${count} template${count !== 1 ? 's' : ''} in ${duration}s`,\n  })\n\n  return { files: outputFiles, config }\n}\n\n/**\n * Extract the static (non-glob) prefix from content patterns.\n *\n * For example, `['/abs/path/emails/**\\/*.vue']` → `'/abs/path/emails'`\n *\n * This is used to strip the content base from template paths\n * so the output preserves only the subdirectory structure.\n */\nfunction computeContentBase(patterns: string[]): string {\n  // Use the first non-negated pattern\n  const pattern = patterns.find(p => !p.startsWith('!')) ?? patterns[0]\n\n  // Split on first glob character (* { ? [) and take the directory part\n  const staticPart = pattern.split(/[*{?[]/)[0]\n\n  // Ensure we have a clean directory path (not a partial segment)\n  return resolve(staticPart.endsWith('/') ? staticPart : dirname(staticPart))\n}\n\nfunction resolveOutputPath(templatePath: string, outputDir: string, extension: string, contentBase: string): string {\n  const name = basename(templatePath).replace(/\\.(vue|md)$/, '')\n  const absTemplate = resolve(templatePath)\n  const rel = relative(contentBase, dirname(absTemplate))\n\n  return join(outputDir, rel, `${name}.${extension}`)\n}\n\nasync function copyStatic(config: MaizzleConfig, outputPath: string): Promise<void> {\n  const sources = config.static?.source ?? ['public/**/*.*']\n  const destination = config.static?.destination ?? 'public'\n\n  const files = await glob(sources)\n\n  for (const file of files) {\n    const destPath = join(outputPath, destination, relative(dirname(sources[0]).replace(/\\*.*$/, ''), file))\n    const destDir = dirname(destPath)\n\n    if (!existsSync(destDir)) {\n      mkdirSync(destDir, { recursive: true })\n    }\n\n    cpSync(file, destPath)\n  }\n}\n"],"mappings":"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"}

package/dist/components/Body.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { createStaticVNode, inject, useAttrs, useSlots } from 'vue'
+import type { PropType } from 'vue'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
+
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const props = defineProps({
+  /**
+   * Language code for the `xml:lang` attribute on `<body>`.
+   *
+   * Inherited from the parent `Html` component's `lang` prop by default.
+   *
+   * @example 'fr'
+   */
+  xmlLang: {
+    type: String as PropType<
+      | 'af' | 'ar' | 'az'
+      | 'be' | 'bg' | 'bs'
+      | 'ca' | 'cs' | 'cy'
+      | 'da' | 'de' | 'dv'
+      | 'el' | 'en' | 'es' | 'et' | 'eu'
+      | 'fa' | 'fi' | 'fo' | 'fr'
+      | 'gl' | 'gu'
+      | 'he' | 'hi' | 'hr' | 'hu' | 'hy'
+      | 'id' | 'is' | 'it'
+      | 'ja'
+      | 'ka' | 'kk' | 'kn' | 'ko' | 'ky'
+      | 'lt' | 'lv'
+      | 'mk' | 'mn' | 'mr' | 'ms' | 'mt'
+      | 'nb' | 'nl' | 'nn' | 'no'
+      | 'pa' | 'pl' | 'pt'
+      | 'ro' | 'ru'
+      | 'sa' | 'se' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'sw'
+      | 'ta' | 'te' | 'th' | 'tr' | 'tt'
+      | 'uk' | 'ur' | 'uz'
+      | 'vi'
+      | 'zh'
+      | (string & {})
+    >,
+    default: undefined
+  },
+  /**
+   * Text direction of the body.
+   *
+   * - `ltr` — left to right (default)
+   * - `rtl` — right to left
+   *
+   * @default 'ltr'
+   */
+  dir: {
+    type: String as PropType<'ltr' | 'rtl'>,
+    default: 'ltr'
+  },
+  /**
+   * Accessible label for the email article wrapper.
+   *
+   * Used as the `aria-label` on the inner `<div role="article">`.
+   * Helps screen readers identify the email content.
+   *
+   * @example 'Order confirmation'
+   */
+  ariaLabel: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
+  outlookFallback: outlookFallbackProp,
+})
+
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
+const htmlLang = inject<string>('htmlLang', 'en')
+
+const render = () => {
+  const extraAttrs = Object.entries(attrs)
+    .map(([key, value]) => value === true ? key : `${key}="${value}"`)
+    .join(' ')
+
+  const lang = props.xmlLang ?? htmlLang
+
+  const parts = [
+    `dir="${props.dir}"`,
+    'style="margin: 0; padding: 0; width: 100%; word-break: break-word;"',
+  ]
+  if (outlookFallback) {
+    parts.unshift(`xml:lang="${lang}"`)
+  }
+
+  if (extraAttrs) {
+    parts.push(extraAttrs)
+  }
+
+  const articleParts = [
+    'role="article"',
+    'aria-roledescription="email"',
+    props.ariaLabel ? `aria-label="${props.ariaLabel}"` : '',
+    `lang="${lang}"`,
+    `dir="${props.dir}"`,
+    'style="font-size: medium; font-size: max(16px, 1rem)"',
+  ].filter(Boolean).join(' ')
+
+  return [
+    createStaticVNode(`<body ${parts.join(' ')}>`, 1),
+    createStaticVNode(`<div ${articleParts}>`, 1),
+    slots.default?.(),
+    createStaticVNode('</div>', 1),
+    createStaticVNode('</body>', 1),
+  ]
+}
+</script>
+
+<template>
+  <render />
+</template>

package/dist/components/Button.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, createStaticVNode } from 'vue'
+import type { PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
-import Outlook from './Outlook.vue'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -9,69 +11,127 @@ const attrs = useAttrs()
 
 const props = defineProps({
   /** The URL the button links to. */
-  href: String,
-  type: {
+  href: {
     type: String,
-    default: 'solid'
+    required: true
   },
-  align: {
-    type: String,
-    default: null
-  },
-  bgColor: {
-    type: String,
-    default: '#4338ca'
+  /**
+   * The button style variant.
+   * - `solid` — filled background (default)
+   * - `outline` — transparent background with a border
+   * - `ghost` — transparent background, no border
+   * - `link` — plain anchor with no button chrome
+   * @default 'solid'
+   */
+  variant: {
+    type: String as PropType<'solid' | 'outline' | 'ghost' | 'link'>,
+    default: 'solid' as const
   },
-  color: {
-    type: String,
+  /**
+   * Horizontal alignment of the button wrapper.
+   * Accepts `'left'`, `'center'`, or `'right'`.
+   * @default null
+   */
+  align: {
+    type: String as PropType<'left' | 'center' | 'right' | null>,
     default: null
   },
+  /**
+   * `mso-text-raise` value applied to the inner `<span>` elements.
+   * Controls vertical text alignment inside the button in old Outlook.
+   * @default '16px'
+   */
   msoPt: {
     type: String,
     default: '16px'
   },
+  /**
+   * `mso-text-raise` value applied to the spacer `<i>` element rendered for Outlook.
+   * Adjusts the bottom spacing that old Outlook uses to simulate padding.
+   * @default '31px'
+   */
   msoPb: {
     type: String,
     default: '31px'
   },
+  /**
+   * URL or path to an icon image displayed alongside the button label.
+   * @default null
+   */
   icon: {
     type: String,
     default: null
   },
+  /**
+   * Width of the icon image in pixels.
+   * @default 12
+   */
   iconWidth: {
     type: [String, Number],
     default: 12
   },
+  /**
+   * Side on which the icon is placed relative to the button label.
+   * Accepts `'left'` or `'right'`.
+   * @default 'right'
+   */
   iconPosition: {
-    type: String,
-    default: 'right'
+    type: String as PropType<'left' | 'right'>,
+    default: 'right' as const
   },
+  /**
+   * Additional CSS classes applied to the icon `<img>` element.
+   * @default ''
+   */
   iconClass: {
     type: String,
     default: ''
-  }
+  },
+  /**
+   * Alt text for the icon image.
+   * @default ''
+   */
+  iconAlt: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Horizontal padding in old Outlook, applied as `mso-font-width` on the
+   * outer spacer `<i>` elements. Accepts a number, a numeric string, or a
+   * string with `%`. Bare numbers are treated as percentages. Effective
+   * range up to 500%.
+   * @default 150
+   */
+  msoPx: {
+    type: [String, Number],
+    default: 150
+  },
+  /**
+   * Toggle Outlook (MSO) and VML fallback markup for this
+   * component and all descendants.
+   *
+   * When `false`, skips MSO ghost tables, VML shapes,
+   * `xmlns:v`/`xmlns:o` attributes, and mso-specific CSS
+   * in all built-in components.
+   *
+   * @default true
+   */
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const parsedIconWidth = computed(() => parseInt(String(props.iconWidth), 10))
 
-const alignClass = computed(() => ({
+const alignClass = computed(() => props.align ? ({
   left: 'text-left',
   center: 'text-center',
   right: 'text-right',
-})[props.align] || '')
-
-const textColor = computed(() => {
-  if (props.color) return props.color
-
-  return props.type === 'solid' ? '#fffffe' : props.bgColor
-})
+})[props.align] || '' : '')
 
 const styles = computed(() => {
-  if (props.type === 'link') {
-    return [
-      'text-decoration: none;',
-      `color: ${textColor.value};`,
-    ].join('')
+  if (props.variant === 'link') {
+    return 'text-decoration: none; color: #4338ca;'
   }
 
   const base = [
@@ -81,57 +141,93 @@ const styles = computed(() => {
     'font-size: 16px;',
     'line-height: 1;',
     'border-radius: 4px;',
-    `color: ${textColor.value};`,
   ]
 
-  if (props.type === 'outline') {
+  if (props.variant === 'outline') {
+    base.push(
+      'background-color: transparent;',
+      'border: 1px solid #4338ca;',
+      'color: #4338ca;',
+    )
+  } else if (props.variant === 'ghost') {
     base.push(
       'background-color: transparent;',
-      `border: 1px solid ${props.bgColor};`,
+      'color: #4338ca;',
     )
-  } else if (props.type === 'ghost') {
-    base.push('background-color: transparent;')
   } else {
-    base.push(`background-color: ${props.bgColor};`)
+    base.push(
+      'background-color: #4338ca;',
+      'color: #fffffe;',
+    )
   }
 
   return base.join('')
 })
 
-const isLink = computed(() => props.type === 'link')
+const isLink = computed(() => props.variant === 'link')
+
+const variantClasses = computed(() =>
+  props.variant === 'ghost' ? 'hover:bg-indigo-50' : '',
+)
+
+const mergedClass = computed(() => twMerge(variantClasses.value, attrs.class as string))
 
-const defaultClasses = computed(() => {
-  if (props.type === 'ghost') return 'hover:bg-indigo-50'
-  return ''
+const textSpanStyle = computed(() =>
+  outlookFallback ? `mso-text-raise: ${props.msoPt};` : undefined,
+)
+
+const msoPx = computed(() => {
+  const v = String(props.msoPx).trim()
+  // Bare number → percentage. Anything with a unit passes through.
+  return /^\d+(\.\d+)?$/.test(v) ? `${v}%` : v
 })
 
-const mergedClass = computed(() => twMerge(defaultClasses.value, attrs.class as string))
+/**
+ * Outlook spacer `<i>` elements rendered as raw HTML inside MSO conditional
+ * comments. JS strings keep `&emsp;` / `&#8203;` from being decoded by
+ * Vue's template parser; htmlparser2 then preserves the comment
+ * data verbatim because conditional comments are opaque.
+ */
+const MsoSpacerLeft = () => createStaticVNode(
+  `<!--[if mso]><i style="mso-font-width: ${msoPx.value}; mso-text-raise: ${props.msoPb};" hidden>&emsp;</i><![endif]-->`,
+  1,
+)
+
+const MsoSpacerRight = () => createStaticVNode(
+  `<!--[if mso]><i style="mso-font-width: ${msoPx.value};" hidden>&emsp;&#8203;</i><![endif]-->`,
+  1,
+)
+
+const MsoIconGap = () => createStaticVNode(
+  `<!--[if mso]><i style="mso-font-width: 30%;" hidden>&emsp;&#8203;</i><![endif]-->`,
+  1,
+)
 </script>
 
 <template>
   <div :class="alignClass">
     <a
-      v-bind="{ ...$attrs, class: undefined }"
+      v-bind="{ ...$attrs, class: undefined, style: undefined }"
       :href="href"
-      :style="styles"
+      :style="[styles, $attrs.style as any]"
       :class="mergedClass"
     >
       <template v-if="!isLink">
-        <Outlook><i class="mso-font-width-[150%]" :style="`mso-text-raise: ${msoPb};`" hidden>&emsp;</i></Outlook>
+        <MsoSpacerLeft v-if="outlookFallback" />
         <template v-if="icon && iconPosition === 'left'">
-          <span :style="`mso-text-raise: ${msoPt}`">
-            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`">
+          <span :style="textSpanStyle">
+            <img :src="icon" :width="parsedIconWidth" :alt="iconAlt" style="vertical-align: baseline; max-width: 100%;" :class="iconClass">
           </span>
-          <Outlook><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
+          <MsoIconGap v-if="outlookFallback" />
         </template>
-        <span :class="icon ? (iconPosition === 'right' ? 'mr-2' : 'ml-2') : ''" :style="`mso-text-raise: ${msoPt}`"><slot /></span>
+        <span :style="textSpanStyle"><slot /></span>
         <template v-if="icon && iconPosition === 'right'">
-          <Outlook><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
-          <span :style="`mso-text-raise: ${msoPt}`">
-            <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`">
+          <MsoIconGap v-if="outlookFallback" />
+          <span :style="textSpanStyle">
+            <img :src="icon" :width="parsedIconWidth" :alt="iconAlt" style="vertical-align: baseline; max-width: 100%;" :class="iconClass">
           </span>
         </template>
-        <Outlook><i class="mso-font-width-[150%]" hidden>&emsp;&#8203;</i></Outlook>
+        <MsoSpacerRight v-if="outlookFallback" />
       </template>
       <template v-else>
         <slot />