@maizzle/framework 6.0.0-rc.15 → 6.0.0-rc.16

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/dist/components/Body.vue

@@ -1,6 +1,8 @@
 <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 })
 
@@ -65,9 +67,12 @@ const props = defineProps({
   ariaLabel: {
     type: String,
     default: undefined
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const htmlLang = inject<string>('htmlLang', 'en')
 
 const render = () => {
@@ -78,10 +83,12 @@ const render = () => {
   const lang = props.xmlLang ?? htmlLang
 
   const parts = [
-    `xml:lang="${lang}"`,
     `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)

package/dist/components/Button.vue

@@ -3,6 +3,8 @@ import { computed, useAttrs } 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 })
 
@@ -103,9 +105,12 @@ const props = defineProps({
   iconClass: {
     type: String,
     default: ''
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const parsedIconWidth = computed(() => parseInt(String(props.iconWidth), 10))
 
 const alignClass = computed(() => props.align ? ({
@@ -171,21 +176,21 @@ const mergedClass = computed(() => twMerge(defaultClasses.value, attrs.class as
       :class="mergedClass"
     >
       <template v-if="!isLink">
-        <Outlook><i class="mso-font-width-[150%]" :style="`mso-text-raise: ${msoPb};`" hidden>&emsp;</i></Outlook>
+        <Outlook v-if="outlookFallback"><i class="mso-font-width-[150%]" :style="`mso-text-raise: ${msoPb};`" hidden>&emsp;</i></Outlook>
         <template v-if="icon && iconPosition === 'left'">
-          <span :style="`mso-text-raise: ${msoPt}`">
+          <span :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined">
             <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`" alt="">
           </span>
-          <Outlook><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
+          <Outlook v-if="outlookFallback"><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
         </template>
-        <span :class="icon ? (iconPosition === 'right' ? 'mr-2' : 'ml-2') : ''" :style="`mso-text-raise: ${msoPt}`"><slot /></span>
+        <span :class="icon ? (iconPosition === 'right' ? 'mr-2' : 'ml-2') : ''" :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined"><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}`">
+          <Outlook v-if="outlookFallback"><i class="mso-font-width-[30%]" hidden>&emsp;&#8203;</i></Outlook>
+          <span :style="outlookFallback ? `mso-text-raise: ${msoPt}` : undefined">
             <img :src="icon" :width="parsedIconWidth" :class="`align-baseline max-w-full ${iconClass}`" alt="">
           </span>
         </template>
-        <Outlook><i class="mso-font-width-[150%]" hidden>&emsp;&#8203;</i></Outlook>
+        <Outlook v-if="outlookFallback"><i class="mso-font-width-[150%]" hidden>&emsp;&#8203;</i></Outlook>
       </template>
       <template v-else>
         <slot />

package/dist/components/Column.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed, createStaticVNode, inject, useAttrs } from 'vue'
 import type { ComputedRef } from 'vue'
-import { nextId, normalizeToPixels } from './utils.ts'
+import { twMerge } from 'tailwind-merge'
+import { nextId, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -29,9 +31,12 @@ const props = defineProps({
   msoStyle: {
     type: String,
     default: undefined
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const columnCount = inject<ComputedRef<number> | null>('columnCount', null)
 
 const count = computed(() => columnCount?.value ?? 2)
@@ -49,9 +54,17 @@ const msoWidth = computed(() => {
   return `__MAIZZLE_COLW_${colId}__`
 })
 
-const styles = computed(() =>
-  `display: inline-block; min-width: ${minWidth.value}; font-size: 16px; vertical-align: top;`
-)
+/**
+ * Baseline display/typography lives in classes — not inline `:style` —
+ * so the user can override any of them via tailwind utilities. Inline
+ * `display: inline-block` would silently shadow a class like
+ * `inline-table` during CSS inlining; routing both through twMerge lets
+ * the user's utility cleanly replace ours instead of being dropped.
+ */
+const baseClass = 'inline-block align-top text-base'
+const mergedClass = computed(() => twMerge(baseClass, (attrs.class as string) ?? ''))
+
+const styles = computed(() => `min-width: ${minWidth.value};`)
 
 const tdStyle = computed(() => {
   const parts = [`width: ${msoWidth.value}`, 'vertical-align: top']
@@ -71,14 +84,15 @@ const MsoAfter = () => createStaticVNode(
 </script>
 
 <template>
-  <MsoBefore />
+  <MsoBefore v-if="outlookFallback" />
   <div
-    v-bind="attrs"
+    v-bind="{ ...attrs, class: undefined }"
+    :class="mergedClass"
     :style="styles"
     :data-maizzle-cw-id="colId"
     :data-maizzle-cw-count="useMarker ? count : null"
   >
     <slot />
   </div>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>

package/dist/components/Container.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, provide, createStaticVNode, useAttrs } from 'vue'
 import { twMerge } from 'tailwind-merge'
-import { hasWidthUtility, nextId, normalizeToPixels } from './utils.ts'
+import { hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -33,12 +34,15 @@ const props = defineProps({
   msoWidth: {
     type: [String, Number],
     default: null
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 provide('containerWidth', computed(() => props.width))
 
-const useMarker = props.width == null && props.msoWidth == null
+const useMarker = outlookFallback && props.width == null && props.msoWidth == null
 const msoId = useMarker ? nextId('c') : null
 
 const styles = computed(() => {
@@ -77,7 +81,7 @@ const MsoAfter = () => createStaticVNode(
 </script>
 
 <template>
-  <MsoBefore />
+  <MsoBefore v-if="outlookFallback" />
   <div
     v-bind="{ ...attrs, class: undefined }"
     :class="mergedClass"
@@ -87,5 +91,5 @@ const MsoAfter = () => createStaticVNode(
   >
     <slot />
   </div>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>

package/dist/components/Html.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { createStaticVNode, provide, useAttrs, useSlots } from 'vue'
 import type { PropType } from 'vue'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -65,9 +67,12 @@ const props = defineProps({
   xmlns: {
     type: [Boolean, String],
     default: true
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 provide('htmlLang', props.lang)
 
 const render = () => {
@@ -80,7 +85,7 @@ const render = () => {
     `dir="${props.dir}"`,
   ]
 
-  if (props.xmlns !== false && props.xmlns !== 'false') {
+  if (outlookFallback && props.xmlns !== false && props.xmlns !== 'false') {
     parts.push(
       'xmlns:v="urn:schemas-microsoft-com:vml"',
       'xmlns:o="urn:schemas-microsoft-com:office:office"',

package/dist/components/Layout.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, useAttrs, createStaticVNode, type PropType } from 'vue'
 import { twMerge } from 'tailwind-merge'
+import { outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -52,27 +54,20 @@ const props = defineProps({
   ariaLabel: {
     type: String,
     default: undefined
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const attrs = useAttrs()
 const bodyMergedClass = computed(() => twMerge('m-0 p-0 size-full [word-break:break-word]', props.bodyClass))
 const articleMergedClass = computed(() => twMerge('[font-size:max(16px,1rem)] font-inter', attrs.class as string))
 
 const EmptyHead = () => createStaticVNode('<head></head>', 1)
-</script>
 
-<template>
-  <html :lang="lang" :dir="dir" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
-  <EmptyHead v-if="props.doubleHead === true || props.doubleHead === 'true'" />
-  <head>
-    <meta charset="utf-8">
-    <meta name="x-apple-disable-message-reformatting">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
-    <meta name="color-scheme" content="light dark">
-    <meta name="supported-color-schemes" content="light dark">
-    <!--[if mso]>
+const MsoHead = () => createStaticVNode(
+  `<!--[if mso]>
       <noscript>
         <xml>
           <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
@@ -84,7 +79,27 @@ const EmptyHead = () => createStaticVNode('<head></head>', 1)
         td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
         .mso-break-all {word-break: break-all;}
       </style>
-      <![endif]-->
+      <![endif]-->`,
+  1
+)
+
+const htmlXmlns = computed(() => outlookFallback ? {
+  'xmlns:v': 'urn:schemas-microsoft-com:vml',
+  'xmlns:o': 'urn:schemas-microsoft-com:office:office',
+} : {})
+</script>
+
+<template>
+  <html :lang="lang" :dir="dir" v-bind="htmlXmlns">
+  <EmptyHead v-if="props.doubleHead === true || props.doubleHead === 'true'" />
+  <head>
+    <meta charset="utf-8">
+    <meta name="x-apple-disable-message-reformatting">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
+    <meta name="color-scheme" content="light dark">
+    <meta name="supported-color-schemes" content="light dark">
+    <MsoHead v-if="outlookFallback" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" media="screen">
@@ -96,7 +111,7 @@ const EmptyHead = () => createStaticVNode('<head></head>', 1)
       }
     </style>
   </head>
-  <body :xml:lang="lang" :class="bodyMergedClass">
+  <body :xml:lang="outlookFallback ? lang : null" :class="bodyMergedClass">
     <div
       role="article"
       aria-roledescription="email"

package/dist/components/Overlap.vue

@@ -6,8 +6,10 @@ import {
   hasWidthInStyle,
   hasWidthUtility,
   nextId,
-  normalizeToPixels
+  normalizeToPixels,
+  outlookFallbackProp
 } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -60,8 +62,11 @@ const props = defineProps({
     type: String,
     default: '0,-60px,0,0'
   },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const userStyle = computed(() => {
   const s = attrs.style
   if (!s) return ''
@@ -132,9 +137,9 @@ const VmlAfter = () => createStaticVNode('<!--[if mso]></v:textbox></v:rect><![e
   <table style="max-height: 0; position: relative; opacity: 0.999;">
     <tr>
       <td :style="tdStyle">
-        <VmlBefore />
+        <VmlBefore v-if="outlookFallback" />
         <slot name="overlay" />
-        <VmlAfter />
+        <VmlAfter v-if="outlookFallback" />
       </td>
     </tr>
   </table>

package/dist/components/Raw.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+import { createStaticVNode } from 'vue'
+
+export default {
+  inheritAttrs: false,
+  props: {
+    /**
+     * Raw content to emit verbatim.
+     *
+     * Auto-populated from slot content by
+     * the `maizzle:raw-extract` Vite plugin
+     * before Vue compiles the template,
+     * so `{{ }}` and other Vue/ESP
+     * syntax pass through untouched.
+     */
+    content: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    if (!props.content) {
+      return () => createStaticVNode('', 0)
+    }
+    return () => createStaticVNode(props.content, 1)
+  },
+}
+</script>

package/dist/components/Row.vue

@@ -5,8 +5,10 @@ const warnedLocations = new Set<string>()
 <script setup lang="ts">
 import { Comment, Text, computed, createStaticVNode, provide, useAttrs, useSlots, Fragment } from 'vue'
 import type { VNode } from 'vue'
+import { twMerge } from 'tailwind-merge'
 import Column from './Column.vue'
-import { hasWidthInStyle, hasWidthUtility, normalizeToPixels } from './utils.ts'
+import { hasWidthInStyle, hasWidthUtility, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -35,9 +37,12 @@ const props = defineProps({
   cols: {
     type: Number,
     default: null
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const slots = useSlots()
 
 function countChildren(vnodes: VNode[]): number {
@@ -118,15 +123,20 @@ const colWidthSource = computed(() => {
 })
 
 const restAttrs = computed(() => {
-  const { style: _, 'data-maizzle-loc': __, ...rest } = attrs
+  const { style: _, class: __, 'data-maizzle-loc': ___, ...rest } = attrs
   return rest
 })
 
-const divStyle = computed(() => {
-  const parts: string[] = ['font-size: 0;']
-  if (userStyle.value) parts.push(userStyle.value)
-  return parts.join(' ')
-})
+/**
+ * `font-size: 0;` removes the whitespace gap between inline-block
+ * children. Lives in a class so users can override (e.g. via a custom
+ * `text-*`) and twMerge resolves the conflict cleanly instead of the
+ * inline declaration silently shadowing the user's class.
+ */
+const baseClass = 'text-0'
+const mergedClass = computed(() => twMerge(baseClass, (attrs.class as string) ?? ''))
+
+const divStyle = computed(() => userStyle.value || undefined)
 
 const MsoBefore = () => createStaticVNode(
   '<!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: 100%"><tr><![endif]-->',
@@ -139,7 +149,7 @@ const MsoAfter = () => createStaticVNode(
 )
 
 const initialChildren = slots.default?.() ?? []
-if (hasMeaningfulContent(initialChildren) && !hasColumnChild(initialChildren)) {
+if (outlookFallback && hasMeaningfulContent(initialChildren) && !hasColumnChild(initialChildren)) {
   const loc = (attrs['data-maizzle-loc'] as string | undefined) ?? '<unknown location>'
   if (!warnedLocations.has(loc)) {
     warnedLocations.add(loc)
@@ -150,13 +160,14 @@ if (hasMeaningfulContent(initialChildren) && !hasColumnChild(initialChildren)) {
 </script>
 
 <template>
-  <MsoBefore />
+  <MsoBefore v-if="outlookFallback" />
   <div
     v-bind="restAttrs"
+    :class="mergedClass"
     :style="divStyle"
     :data-maizzle-cw="colWidthSource"
   >
     <slot />
   </div>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>

package/dist/components/Section.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, createStaticVNode, useAttrs } from 'vue'
-import { hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels } from './utils.ts'
+import { hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 defineOptions({ inheritAttrs: false })
 
@@ -31,9 +32,12 @@ const props = defineProps({
   msoStyle: {
     type: String,
     default: undefined
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 const userStyle = computed(() => {
   const s = attrs.style
   if (!s) return ''
@@ -47,7 +51,7 @@ const userHasWidth = computed(() => {
   return hasWidthUtility(cls) || hasWidthInStyle(userStyle.value)
 })
 
-const useMarker = props.width == null && userHasWidth.value
+const useMarker = outlookFallback && props.width == null && userHasWidth.value
 const msoId = useMarker ? nextId('s') : null
 
 const divStyle = computed(() => {
@@ -96,7 +100,7 @@ const MsoAfter = () => createStaticVNode(
 </script>
 
 <template>
-  <MsoBefore />
+  <MsoBefore v-if="outlookFallback" />
   <div
     v-bind="restAttrs"
     :style="divStyle"
@@ -106,5 +110,5 @@ const MsoAfter = () => createStaticVNode(
   >
     <slot />
   </div>
-  <MsoAfter />
+  <MsoAfter v-if="outlookFallback" />
 </template>

package/dist/components/Spacer.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { normalizeToPixels } from './utils.ts'
+import { normalizeToPixels, outlookFallbackProp } from './utils.ts'
+import { useOutlookFallback } from '../composables/useOutlookFallback'
 
 const props = defineProps({
   /** The type of spacer. */
@@ -22,9 +23,12 @@ const props = defineProps({
   msoHeight: {
     type: [String, Number],
     default: null
-  }
+  },
+  outlookFallback: outlookFallbackProp,
 })
 
+const outlookFallback = useOutlookFallback(props.outlookFallback)
+
 function parsePixelValue(value: string | number): number {
   if (typeof value === 'number') return value
   return Number.parseFloat(value) || 0
@@ -37,7 +41,7 @@ const verticalStyles = computed(() => {
     s.push(`line-height: ${normalizeToPixels(props.height)};`)
   }
 
-  if (props.msoHeight) {
+  if (outlookFallback && props.msoHeight) {
     s.push(`mso-line-height-alt: ${normalizeToPixels(props.msoHeight)};`)
   }
 
@@ -45,7 +49,8 @@ const verticalStyles = computed(() => {
 })
 
 const horizontalStyles = computed(() => {
-  return `display:inline-block; width: ${normalizeToPixels(props.width)}; font-size: 16px;${msoFontWidth.value}`
+  const mso = outlookFallback ? msoFontWidth.value : ''
+  return `display:inline-block; width: ${normalizeToPixels(props.width)}; font-size: 16px;${mso}`
 })
 
 const msoFontWidth = computed(() => {

package/dist/components/utils.d.mts

@@ -13,6 +13,16 @@ declare function hasWidthUtility(classStr: string): boolean;
 declare function hasWidthInStyle(styleStr: string): boolean;
 declare function hasHeightUtility(classStr: string): boolean;
 declare function hasHeightInStyle(styleStr: string): boolean;
+/**
+ * Shared prop for components that emit MSO/VML fallback markup. The
+ * `null` default acts as the "unset" sentinel — `useOutlookFallback`
+ * treats `null` as inherit-from-ancestor (root default `true`),
+ * letting users override per-component without losing inheritance.
+ */
+declare const outlookFallbackProp: {
+  readonly type: BooleanConstructor;
+  readonly default: null;
+};
 //#endregion
-export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels };
+export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp };
 //# sourceMappingURL=utils.d.mts.map

package/dist/components/utils.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.mts","names":[],"sources":["../../src/components/utils.ts"],"mappings":";iBAAgB,iBAAA,CAAkB,KAAA;AAAlC;;;;;AAiBA;;;AAjBA,iBAiBgB,MAAA,CAAO,MAAA;AAAA,iBAKP,eAAA,CAAgB,QAAA;AAAA,iBAQhB,eAAA,CAAgB,QAAA;AAAA,iBAIhB,gBAAA,CAAiB,QAAA;AAAA,iBAQjB,gBAAA,CAAiB,QAAA"}
+{"version":3,"file":"utils.d.mts","names":[],"sources":["../../src/components/utils.ts"],"mappings":";iBAAgB,iBAAA,CAAkB,KAAA;AAAlC;;;;;AAiBA;;;AAjBA,iBAiBgB,MAAA,CAAO,MAAA;AAAA,iBAKP,eAAA,CAAgB,QAAA;AAAA,iBAQhB,eAAA,CAAgB,QAAA;AAAA,iBAIhB,gBAAA,CAAiB,QAAA;AAAA,iBAQjB,gBAAA,CAAiB,QAAA;;;AAZjC;;;;cAsBa,mBAAA;EAAA,eAGH,kBAAA;EAAA"}

package/dist/components/utils.mjs

@@ -34,7 +34,17 @@ function hasHeightUtility(classStr) {
 function hasHeightInStyle(styleStr) {
 	return /(?:^|;\s*)(?:max-height|height)\s*:/i.test(styleStr);
 }
+/**
+* Shared prop for components that emit MSO/VML fallback markup. The
+* `null` default acts as the "unset" sentinel — `useOutlookFallback`
+* treats `null` as inherit-from-ancestor (root default `true`),
+* letting users override per-component without losing inheritance.
+*/
+const outlookFallbackProp = {
+	type: Boolean,
+	default: null
+};
 
 //#endregion
-export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels };
+export { hasHeightInStyle, hasHeightUtility, hasWidthInStyle, hasWidthUtility, nextId, normalizeToPixels, outlookFallbackProp };
 //# sourceMappingURL=utils.mjs.map

package/dist/components/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/components/utils.ts"],"sourcesContent":["export function normalizeToPixels(value: string | number): string {\n  if (typeof value === 'number' || Number.isFinite(Number(value))) {\n    return `${value}px`\n  }\n  return value\n}\n\nconst counters: Record<string, number> = {}\n\n/**\n * Module-scoped sequential ID generator. Used by components to mint\n * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.\n *\n * Must live here (not inside `<script setup>`) because Vue compiles\n * `<script setup>` into the component's `setup()` function — any\n * `let counter = 0` there resets per instance, causing id collisions.\n */\nexport function nextId(prefix: string): string {\n  counters[prefix] = (counters[prefix] ?? 0) + 1\n  return `${prefix}${counters[prefix]}`\n}\n\nexport function hasWidthUtility(classStr: string): boolean {\n  return classStr.split(/\\s+/).some((c) => {\n    const utility = c.split(':').pop() ?? ''\n    const clean = utility.replace(/^!/, '')\n    return /^(w-|max-w-|min-w-)/.test(clean)\n  })\n}\n\nexport function hasWidthInStyle(styleStr: string): boolean {\n  return /(?:^|;\\s*)(?:max-width|width)\\s*:/i.test(styleStr)\n}\n\nexport function hasHeightUtility(classStr: string): boolean {\n  return classStr.split(/\\s+/).some((c) => {\n    const utility = c.split(':').pop() ?? ''\n    const clean = utility.replace(/^!/, '')\n    return /^(h-|max-h-|min-h-)/.test(clean)\n  })\n}\n\nexport function hasHeightInStyle(styleStr: string): boolean {\n  return /(?:^|;\\s*)(?:max-height|height)\\s*:/i.test(styleStr)\n}\n"],"mappings":";AAAA,SAAgB,kBAAkB,OAAgC;AAChE,KAAI,OAAO,UAAU,YAAY,OAAO,SAAS,OAAO,MAAM,CAAC,CAC7D,QAAO,GAAG,MAAM;AAElB,QAAO;;AAGT,MAAM,WAAmC,EAAE;;;;;;;;;AAU3C,SAAgB,OAAO,QAAwB;AAC7C,UAAS,WAAW,SAAS,WAAW,KAAK;AAC7C,QAAO,GAAG,SAAS,SAAS;;AAG9B,SAAgB,gBAAgB,UAA2B;AACzD,QAAO,SAAS,MAAM,MAAM,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,IAChB,QAAQ,MAAM,GAAG;AACvC,SAAO,sBAAsB,KAAK,MAAM;GACxC;;AAGJ,SAAgB,gBAAgB,UAA2B;AACzD,QAAO,qCAAqC,KAAK,SAAS;;AAG5D,SAAgB,iBAAiB,UAA2B;AAC1D,QAAO,SAAS,MAAM,MAAM,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,IAChB,QAAQ,MAAM,GAAG;AACvC,SAAO,sBAAsB,KAAK,MAAM;GACxC;;AAGJ,SAAgB,iBAAiB,UAA2B;AAC1D,QAAO,uCAAuC,KAAK,SAAS"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/components/utils.ts"],"sourcesContent":["export function normalizeToPixels(value: string | number): string {\n  if (typeof value === 'number' || Number.isFinite(Number(value))) {\n    return `${value}px`\n  }\n  return value\n}\n\nconst counters: Record<string, number> = {}\n\n/**\n * Module-scoped sequential ID generator. Used by components to mint\n * unique marker ids (e.g. `c1`, `c2`) for the post-render transformer.\n *\n * Must live here (not inside `<script setup>`) because Vue compiles\n * `<script setup>` into the component's `setup()` function — any\n * `let counter = 0` there resets per instance, causing id collisions.\n */\nexport function nextId(prefix: string): string {\n  counters[prefix] = (counters[prefix] ?? 0) + 1\n  return `${prefix}${counters[prefix]}`\n}\n\nexport function hasWidthUtility(classStr: string): boolean {\n  return classStr.split(/\\s+/).some((c) => {\n    const utility = c.split(':').pop() ?? ''\n    const clean = utility.replace(/^!/, '')\n    return /^(w-|max-w-|min-w-)/.test(clean)\n  })\n}\n\nexport function hasWidthInStyle(styleStr: string): boolean {\n  return /(?:^|;\\s*)(?:max-width|width)\\s*:/i.test(styleStr)\n}\n\nexport function hasHeightUtility(classStr: string): boolean {\n  return classStr.split(/\\s+/).some((c) => {\n    const utility = c.split(':').pop() ?? ''\n    const clean = utility.replace(/^!/, '')\n    return /^(h-|max-h-|min-h-)/.test(clean)\n  })\n}\n\nexport function hasHeightInStyle(styleStr: string): boolean {\n  return /(?:^|;\\s*)(?:max-height|height)\\s*:/i.test(styleStr)\n}\n\n/**\n * Shared prop for components that emit MSO/VML fallback markup. The\n * `null` default acts as the \"unset\" sentinel — `useOutlookFallback`\n * treats `null` as inherit-from-ancestor (root default `true`),\n * letting users override per-component without losing inheritance.\n */\nexport const outlookFallbackProp = {\n  type: Boolean,\n  default: null,\n} as const\n\n"],"mappings":";AAAA,SAAgB,kBAAkB,OAAgC;AAChE,KAAI,OAAO,UAAU,YAAY,OAAO,SAAS,OAAO,MAAM,CAAC,CAC7D,QAAO,GAAG,MAAM;AAElB,QAAO;;AAGT,MAAM,WAAmC,EAAE;;;;;;;;;AAU3C,SAAgB,OAAO,QAAwB;AAC7C,UAAS,WAAW,SAAS,WAAW,KAAK;AAC7C,QAAO,GAAG,SAAS,SAAS;;AAG9B,SAAgB,gBAAgB,UAA2B;AACzD,QAAO,SAAS,MAAM,MAAM,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,IAChB,QAAQ,MAAM,GAAG;AACvC,SAAO,sBAAsB,KAAK,MAAM;GACxC;;AAGJ,SAAgB,gBAAgB,UAA2B;AACzD,QAAO,qCAAqC,KAAK,SAAS;;AAG5D,SAAgB,iBAAiB,UAA2B;AAC1D,QAAO,SAAS,MAAM,MAAM,CAAC,MAAM,MAAM;EAEvC,MAAM,SADU,EAAE,MAAM,IAAI,CAAC,KAAK,IAAI,IAChB,QAAQ,MAAM,GAAG;AACvC,SAAO,sBAAsB,KAAK,MAAM;GACxC;;AAGJ,SAAgB,iBAAiB,UAA2B;AAC1D,QAAO,uCAAuC,KAAK,SAAS;;;;;;;;AAS9D,MAAa,sBAAsB;CACjC,MAAM;CACN,SAAS;CACV"}

package/dist/components/utils.ts

@@ -43,3 +43,15 @@ export function hasHeightUtility(classStr: string): boolean {
 export function hasHeightInStyle(styleStr: string): boolean {
   return /(?:^|;\s*)(?:max-height|height)\s*:/i.test(styleStr)
 }
+
+/**
+ * Shared prop for components that emit MSO/VML fallback markup. The
+ * `null` default acts as the "unset" sentinel — `useOutlookFallback`
+ * treats `null` as inherit-from-ancestor (root default `true`),
+ * letting users override per-component without losing inheritance.
+ */
+export const outlookFallbackProp = {
+  type: Boolean,
+  default: null,
+} as const
+

package/dist/composables/useOutlookFallback.d.mts

@@ -0,0 +1,21 @@
+//#region src/composables/useOutlookFallback.d.ts
+/**
+ * Toggle whether descendants emit Outlook (MSO) and VML fallback markup.
+ *
+ * Call once in a Layout/template's `<script setup>` to disable for the
+ * whole tree:
+ *   `useOutlookFallback(false)`
+ *
+ * Components inheriting `false` skip MSO ghost tables, VML rectangles,
+ * `xmlns:v`/`xmlns:o`, mso-specific CSS, and Button's `<Outlook>`
+ * spacers. Each MSO-aware component still accepts an `outlook-fallback`
+ * prop that overrides inheritance for its subtree.
+ *
+ * @param value Pass `true`/`false` to set; omit to just read the
+ *              inherited value (defaults to `true` at the root).
+ * @returns The resolved boolean for the current component.
+ */
+declare function useOutlookFallback(value?: boolean | null): boolean;
+//#endregion
+export { useOutlookFallback };
+//# sourceMappingURL=useOutlookFallback.d.mts.map