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

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":";;UAeiB,WAAA;EACf,KAAA;EACA,MAAA,EAAQ,aAAA;AAAA;;;;;;;;;AAaV;;iBAAsB,KAAA,CAAM,WAAA,GAAc,OAAA,CAAQ,aAAA,aAA0B,OAAA,CAAQ,WAAA"}

package/dist/build.js

@@ -0,0 +1,163 @@
+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 { _setCurrentTemplate } from "./composables/useCurrentTemplate.js";
+import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { basename, dirname, join, parse, 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(configInput) {
+	const start = Date.now();
+	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 });
+	const outputPath = resolve(config.output?.path ?? "dist");
+	const outputExtension = config.output?.extension ?? "html";
+	const contentPatterns = config.content ?? ["emails/**/*.vue"];
+	const contentBase = computeContentBase(contentPatterns);
+	const templateFiles = await glob(contentPatterns);
+	if (templateFiles.length === 0) {
+		spinner.succeed("No templates found");
+		return {
+			files: [],
+			config
+		};
+	}
+	if (existsSync(outputPath)) rmSync(outputPath, {
+		recursive: true,
+		force: true
+	});
+	const renderer = await createRenderer({
+		markdown: config.markdown,
+		root: config.root,
+		componentDirs: normalizeComponentSources(config.components?.source, process.cwd()),
+		vite: config.vite
+	});
+	const outputFiles = [];
+	try {
+		for (const templatePath of templateFiles) {
+			const absolutePath = resolve(templatePath);
+			const parsedPath = parse(absolutePath);
+			const template = {
+				source: readFileSync(absolutePath, "utf-8"),
+				path: parsedPath
+			};
+			_setCurrentTemplate(parsedPath);
+			try {
+				await events.fireBeforeRender({
+					config,
+					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;
+				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 = `${doctype}\n${html}`;
+				const htmlOut = stripForHtml(html);
+				const outputFilePath = resolveOutputPath(templatePath, outputPath, outputExtension, contentBase);
+				mkdirSync(dirname(outputFilePath), { recursive: true });
+				writeFileSync(outputFilePath, htmlOut);
+				outputFiles.push(outputFilePath);
+				const globalPlaintext = templateConfig.plaintext;
+				const sfcPlaintext = rendered.plaintext;
+				if (globalPlaintext || sfcPlaintext) {
+					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 (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);
+				}
+			} finally {
+				_setCurrentTemplate(void 0);
+				events.clearSfcHandlers();
+			}
+		}
+		await copyStatic(config, outputPath);
+		await events.fireAfterBuild({
+			files: outputFiles,
+			config
+		});
+	} finally {
+		await renderer.close();
+	}
+	const duration = ((Date.now() - start) / 1e3).toFixed(2);
+	const count = outputFiles.length;
+	spinner.stopAndPersist({
+		symbol: "✅",
+		text: `Built ${count} template${count !== 1 ? "s" : ""} in ${duration}s`
+	});
+	return {
+		files: outputFiles,
+		config
+	};
+}
+/**
+* Extract the static (non-glob) prefix from content patterns.
+*
+* For example, `['/abs/path/emails/**\/*.vue']` → `'/abs/path/emails'`
+*
+* This is used to strip the content base from template paths
+* so the output preserves only the subdirectory structure.
+*/
+function computeContentBase(patterns) {
+	const staticPart = (patterns.find((p) => !p.startsWith("!")) ?? patterns[0]).split(/[*{?[]/)[0];
+	return resolve(staticPart.endsWith("/") ? staticPart : dirname(staticPart));
+}
+function resolveOutputPath(templatePath, outputDir, extension, contentBase) {
+	const name = basename(templatePath).replace(/\.(vue|md)$/, "");
+	return join(outputDir, relative(contentBase, dirname(resolve(templatePath))), `${name}.${extension}`);
+}
+async function copyStatic(config, outputPath) {
+	const sources = config.static?.source ?? ["public/**/*.*"];
+	const destination = config.static?.destination ?? "public";
+	const files = await glob(sources);
+	for (const file of files) {
+		const destPath = join(outputPath, destination, relative(dirname(sources[0]).replace(/\*.*$/, ""), file));
+		const destDir = dirname(destPath);
+		if (!existsSync(destDir)) mkdirSync(destDir, { recursive: true });
+		cpSync(file, destPath);
+	}
+}
+//#endregion
+export { build };
+
+//# sourceMappingURL=build.js.map

package/dist/build.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.js","names":["parsePath"],"sources":["../src/build.ts"],"sourcesContent":["import { readFileSync, writeFileSync, mkdirSync, cpSync, existsSync, rmSync } from 'node:fs'\nimport { resolve, dirname, basename, relative, join, parse as parsePath } 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 { _setCurrentTemplate } from './composables/useCurrentTemplate.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      const parsedPath = parsePath(absolutePath)\n      const template = { source: readFileSync(absolutePath, 'utf-8'), path: parsedPath }\n\n      _setCurrentTemplate(parsedPath)\n\n      try {\n        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      } finally {\n        _setCurrentTemplate(undefined)\n        events.clearSfcHandlers()\n      }\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 />