@antelopejs/dms-mailing 0.10.0 → 0.10.1

package/frontend-vue/app/build/components/FormFieldRow.vue

@@ -17,7 +17,7 @@ interface FormFieldRowProps {
 	/** Already translated; marks the control invalid. */
 	error?: string | null
 	required?: boolean
-	/** The card's side inset: rows of a `DmsSection`. */
+	/** The card's side inset: rows of a `DmsSectionPanel`. */
 	inset?: boolean
 	/**
 	 * Whether the label names the control the default slot binds the id to;

package/frontend-vue/app/build/components/TemplateDrawerPerformance.vue

@@ -32,7 +32,7 @@ const { t } = useI18n()
 <template>
 	<div class="flex flex-col gap-2">
 		<div class="flex items-center justify-between">
-			<DmsEyebrow :label="t('dms_mailing.templates.drawer.last_30_days')" />
+			<DmsEyebrowLabel :label="t('dms_mailing.templates.drawer.last_30_days')" />
 			<UButton
 				variant="link"
 				size="xs"
@@ -49,7 +49,7 @@ const { t } = useI18n()
 		/>
 	</div>
 	<div class="flex flex-col gap-1">
-		<DmsEyebrow :label="t('dms_mailing.templates.drawer.called_from')" />
+		<DmsEyebrowLabel :label="t('dms_mailing.templates.drawer.called_from')" />
 		<p
 			v-if="!hasSends || !performance?.sources.length"
 			class="text-muted text-[12.5px]"
@@ -73,7 +73,7 @@ const { t } = useI18n()
 		/>
 	</div>
 	<div class="flex flex-col gap-1">
-		<DmsEyebrow :label="t('dms_mailing.templates.drawer.fallbacks')" />
+		<DmsEyebrowLabel :label="t('dms_mailing.templates.drawer.fallbacks')" />
 		<p v-if="!hasSends" class="text-muted text-[12.5px]">
 			{{ t('dms_mailing.templates.drawer.no_sources') }}
 		</p>

package/frontend-vue/app/build/components/TemplateDrawerVariables.vue

@@ -24,7 +24,7 @@ const { t } = useI18n()
 
 <template>
 	<div class="flex flex-col gap-1">
-		<DmsEyebrow :label="t('dms_mailing.templates.drawer.declared_detected')" />
+		<DmsEyebrowLabel :label="t('dms_mailing.templates.drawer.declared_detected')" />
 		<p v-if="!variables.length" class="text-muted text-[12.5px]">
 			{{ t('dms_mailing.templates.drawer.no_variables') }}
 		</p>
@@ -77,7 +77,7 @@ const { t } = useI18n()
 			</span>
 		</div>
 	</div>
-	<DmsBanner
+	<DmsNoticeBanner
 		v-if="hasDraftDeclarations"
 		tone="info"
 		size="sm"
@@ -96,11 +96,11 @@ const { t } = useI18n()
 				@click="openEditor()"
 			/>
 		</template>
-	</DmsBanner>
+	</DmsNoticeBanner>
 	<MailingSystemVariables :variables="systemVars" />
 	<div class="flex flex-col gap-1.5">
 		<div class="flex items-center justify-between">
-			<DmsEyebrow :label="t('dms_mailing.templates.drawer.call_from_code')" />
+			<DmsEyebrowLabel :label="t('dms_mailing.templates.drawer.call_from_code')" />
 			<DmsCopyButton :value="snippet" />
 		</div>
 		<pre

package/frontend-vue/app/components/CategoriesInput.vue

@@ -50,7 +50,7 @@ const MOVE_DOWN = 1
 const FIELD_NAME = 'categories'
 const MOVE_FIELD_ID = 'moveTo'
 const MOVE_FIELD_TYPE = 'string'
-const MOVE_FIELD_COMPONENT = 'DmsSelect'
+const MOVE_FIELD_COMPONENT = 'DmsInputSelect'
 const LABEL_PART = 'label'
 const ROW_FIELD_UI = { error: 'mt-1 ps-9 text-[12px]' }
 
@@ -293,7 +293,7 @@ watch(
 							/>
 							<template #content>
 								<div class="flex flex-col gap-2 p-2.5">
-									<DmsEyebrow :label="key('pick_icon')" />
+									<DmsEyebrowLabel :label="key('pick_icon')" />
 									<div class="grid grid-cols-8 gap-1">
 										<UButton
 											v-for="icon in CATEGORY_ICONS"

package/frontend-vue/app/components/CategoryInput.vue

@@ -52,7 +52,7 @@ watch(
 </script>
 
 <template>
-	<DmsSelect
+	<DmsInputSelect
 		v-model="selected"
 		:items="items"
 		value-key="value"

package/frontend-vue/app/components/FunnelCard.vue

@@ -120,9 +120,9 @@ const deltaTitle = (step: FunnelStepReading): string | undefined =>
 </script>
 
 <template>
-	<DmsCard class="h-full" :padded="false" :title="t(`${KEY_PREFIX}title`)">
+	<DmsCardPanel class="h-full" :padded="false" :title="t(`${KEY_PREFIX}title`)">
 		<template #actions>
-			<DmsSegmented
+			<DmsSegmentedControl
 				v-model="kind"
 				size="xs"
 				:items="kindItems"
@@ -155,7 +155,7 @@ const deltaTitle = (step: FunnelStepReading): string | undefined =>
 					>
 						{{ stepLabel(step) }}
 					</span>
-					<DmsMeter
+					<DmsMeterBar
 						as="span"
 						class="@md:order-none @md:col-span-1 order-last"
 						:class="METER_SPAN[layout]"
@@ -208,5 +208,5 @@ const deltaTitle = (step: FunnelStepReading): string | undefined =>
 				{{ takeaway }}
 			</span>
 		</template>
-	</DmsCard>
+	</DmsCardPanel>
 </template>

package/frontend-vue/app/components/LocaleSelect.vue

@@ -80,7 +80,7 @@ const hint = computed(() =>
 
 <template>
 	<div class="flex flex-col gap-1.5">
-		<DmsSelect
+		<DmsInputSelect
 			:model-value="selected || undefined"
 			:items="items"
 			value-key="value"

package/frontend-vue/app/components/NewTemplateModal.vue

@@ -339,7 +339,7 @@ async function submit(): Promise<void> {
 
 			<FormFieldRow :label="t('dms_mailing.templates.cols.category')">
 				<template #default="{ id }">
-					<DmsSelect
+					<DmsInputSelect
 						:id="id"
 						v-model="category"
 						:items="categoryItems"

package/frontend-vue/app/components/OverviewGate.vue

@@ -83,7 +83,7 @@ function createTemplate(): void {
 </script>
 
 <template>
-	<DmsCard
+	<DmsCardPanel
 		v-if="state === 'loading' && !facts"
 		:padded="false"
 		aria-busy="true"
@@ -92,16 +92,16 @@ function createTemplate(): void {
 			<USkeleton class="h-6 w-56" />
 			<USkeleton v-for="row in SKELETON_ROWS" :key="row" class="h-10 w-full" />
 		</div>
-	</DmsCard>
+	</DmsCardPanel>
 
-	<DmsCard v-else-if="state === 'error' && !facts" :padded="false">
+	<DmsCardPanel v-else-if="state === 'error' && !facts" :padded="false">
 		<DmsEmptyState
 			variant="error"
 			:title="key('error_title')"
 			:description="key('error_description')"
 			:actions="errorActions"
 		/>
-	</DmsCard>
+	</DmsCardPanel>
 
 	<div v-else class="flex flex-col gap-4">
 		<div v-if="canResume" class="flex justify-end">
@@ -115,7 +115,7 @@ function createTemplate(): void {
 			/>
 		</div>
 
-		<DmsCard v-if="showsSetup" :padded="false">
+		<DmsCardPanel v-if="showsSetup" :padded="false">
 			<div
 				class="grid gap-8 p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]"
 			>
@@ -196,7 +196,7 @@ function createTemplate(): void {
 					</li>
 				</ol>
 			</div>
-		</DmsCard>
+		</DmsCardPanel>
 
 		<slot v-if="showsDashboard" />
 	</div>

package/frontend-vue/app/components/RealSendModal.vue

@@ -345,7 +345,7 @@ async function submit(): Promise<void> {
 		novalidate
 		@submit.prevent="submit"
 	>
-		<DmsBanner
+		<DmsNoticeBanner
 			tone="error"
 			icon="i-ph-paper-plane-right"
 			:title="
@@ -362,7 +362,7 @@ async function submit(): Promise<void> {
 
 			<FormFieldRow :label="t('dms_mailing.test_send.locale')">
 				<template #default="{ id }">
-					<DmsSelect
+					<DmsInputSelect
 						:id="id"
 						v-model="locale"
 						:items="localeItems"
@@ -420,7 +420,7 @@ async function submit(): Promise<void> {
 			</p>
 		</section>
 
-		<DmsBanner
+		<DmsNoticeBanner
 			v-if="detail && !hasSender"
 			tone="warning"
 			icon="i-ph-at"
@@ -437,7 +437,7 @@ async function submit(): Promise<void> {
 					@click="openSettings"
 				/>
 			</template>
-		</DmsBanner>
+		</DmsNoticeBanner>
 
 		<div class="border-default rounded-lg border px-3">
 			<DmsKeyValueList
@@ -478,7 +478,7 @@ async function submit(): Promise<void> {
 			</DmsKeyValueList>
 		</div>
 
-		<DmsCheckbox
+		<DmsInputCheckbox
 			v-model="isAcknowledged"
 			:disabled="!recipients.length"
 			:label="
@@ -517,7 +517,7 @@ async function submit(): Promise<void> {
 	</form>
 
 	<div v-else class="flex flex-col gap-4">
-		<DmsBanner
+		<DmsNoticeBanner
 			tone="warning"
 			icon="i-ph-paper-plane-right"
 			:title="

package/frontend-vue/app/components/RenderingModal.vue

@@ -116,7 +116,7 @@ onMounted(load)
 				{{ key('description') }}
 				<span class="font-mono text-[12px]">{{ sendIdValue }}</span>
 			</p>
-			<DmsSegmented
+			<DmsSegmentedControl
 				v-model="view"
 				size="xs"
 				:items="viewItems"
@@ -138,7 +138,7 @@ onMounted(load)
 		/>
 
 		<template v-else>
-			<DmsBanner
+			<DmsNoticeBanner
 				v-if="rendering.approximate"
 				tone="warning"
 				size="sm"

package/frontend-vue/app/components/RetentionInput.vue

@@ -167,7 +167,7 @@ form?.addValidator(guardSubmit)
 <template>
 	<div class="flex flex-col gap-2">
 		<div class="flex flex-wrap items-center gap-2">
-			<DmsSegmented
+			<DmsSegmentedControl
 				v-model="choice"
 				:items="items"
 				:disabled="disabled"

package/frontend-vue/app/components/SendDrawer.vue

@@ -424,7 +424,7 @@ onMounted(() => {
 		<template v-else-if="send">
 			<header class="border-default flex flex-col gap-1.5 border-b pb-4">
 				<div class="flex items-center gap-1">
-					<DmsEyebrow
+					<DmsEyebrowLabel
 						class="min-w-0 flex-1"
 						truncate
 						:label="key('eyebrow', { id: shortSendId(send._id) })"
@@ -481,7 +481,7 @@ onMounted(() => {
 					columns-from="md"
 					:items="stats"
 				/>
-				<DmsBanner
+				<DmsNoticeBanner
 					v-if="problem"
 					:tone="isResolved ? 'info' : problemTone(problem.kind)"
 					:size="isResolved ? 'sm' : undefined"
@@ -492,7 +492,7 @@ onMounted(() => {
 					"
 					data-problem-banner
 				/>
-				<DmsBanner
+				<DmsNoticeBanner
 					v-if="suppression"
 					:tone="suppression.tone"
 					size="sm"
@@ -519,8 +519,8 @@ onMounted(() => {
 							@click="openSuppressionList"
 						/>
 					</template>
-				</DmsBanner>
-				<DmsBanner
+				</DmsNoticeBanner>
+				<DmsNoticeBanner
 					v-for="link in linkedSends"
 					:key="link.id"
 					tone="info"
@@ -539,7 +539,7 @@ onMounted(() => {
 							@click="void showSend(link.id)"
 						/>
 					</template>
-				</DmsBanner>
+				</DmsNoticeBanner>
 			</section>
 
 			<!--
@@ -548,7 +548,7 @@ onMounted(() => {
 			-->
 			<div class="@2xl:grid-cols-2 grid gap-6" data-send-details-grid>
 				<section class="flex min-w-0 flex-col gap-2">
-					<DmsEyebrow :label="key('timeline')" />
+					<DmsEyebrowLabel :label="key('timeline')" />
 					<ol class="flex flex-col">
 						<li
 							v-for="item in timeline"
@@ -581,7 +581,7 @@ onMounted(() => {
 				</section>
 
 				<section class="flex min-w-0 flex-col gap-2">
-					<DmsEyebrow :label="key('origin')" />
+					<DmsEyebrowLabel :label="key('origin')" />
 					<div
 						class="border-default divide-default divide-y overflow-hidden rounded-lg border"
 					>
@@ -623,7 +623,7 @@ onMounted(() => {
 
 			<section class="flex flex-col gap-2">
 				<div class="flex items-center justify-between gap-2">
-					<DmsEyebrow :label="key('payload')" />
+					<DmsEyebrowLabel :label="key('payload')" />
 					<UButton
 						v-if="payload"
 						size="xs"

package/frontend-vue/app/components/StarterGallery.vue

@@ -90,7 +90,7 @@ async function createFrom(starter: StarterSummary): Promise<void> {
 							class="rounded-(--dms-radius-card) h-[150px] w-full"
 						/>
 					</template>
-					<DmsCard
+					<DmsCardPanel
 						v-for="starter in starters"
 						v-else
 						:key="starter.id"
@@ -131,7 +131,7 @@ async function createFrom(starter: StarterSummary): Promise<void> {
 								{{ starter.slug }}
 							</span>
 						</div>
-					</DmsCard>
+					</DmsCardPanel>
 				</div>
 				<UButton
 					icon="i-ph-plus"

package/frontend-vue/app/components/SystemVariables.vue

@@ -22,7 +22,7 @@ const { t } = useI18n()
 		v-if="variables.length || checks.length"
 		class="flex min-w-0 flex-col gap-1"
 	>
-		<DmsEyebrow :label="t(`${KEY}.title`)" />
+		<DmsEyebrowLabel :label="t(`${KEY}.title`)" />
 		<p class="text-muted text-[12px] [overflow-wrap:anywhere]">
 			{{ t(`${KEY}.description`) }}
 		</p>

package/frontend-vue/app/components/TemplateCard.vue

@@ -159,7 +159,7 @@ function chipLabel(code: string, present: boolean): string {
 </script>
 
 <template>
-	<DmsCard
+	<DmsCardPanel
 		as="article"
 		:padded="false"
 		interactive
@@ -302,5 +302,5 @@ function chipLabel(code: string, present: boolean): string {
 				<span v-else class="truncate">{{ footerText }}</span>
 			</div>
 		</div>
-	</DmsCard>
+	</DmsCardPanel>
 </template>

package/frontend-vue/app/components/TemplateDrawer.vue

@@ -451,7 +451,7 @@ function onResolved(preview: PreviewResponse): void {
 		<template v-else-if="template">
 			<div class="flex flex-col gap-1.5 pb-3">
 				<div class="flex items-center gap-1">
-					<DmsEyebrow :label="t('dms_mailing.templates.drawer.eyebrow')" />
+					<DmsEyebrowLabel :label="t('dms_mailing.templates.drawer.eyebrow')" />
 					<div class="ml-auto flex items-center gap-0.5">
 						<template v-if="navigation">
 							<UButton
@@ -569,7 +569,7 @@ function onResolved(preview: PreviewResponse): void {
 
 			<div v-show="tab === 'preview'" class="flex flex-col gap-3 py-4">
 				<div class="flex items-center justify-between gap-2">
-					<DmsSegmented
+					<DmsSegmentedControl
 						v-if="localeItems.length > 1"
 						v-model="locale"
 						:items="localeItems"
@@ -599,7 +599,7 @@ function onResolved(preview: PreviewResponse): void {
 						/>
 					</div>
 				</div>
-				<DmsBanner
+				<DmsNoticeBanner
 					v-if="isLocaleMissing"
 					tone="warning"
 					size="sm"
@@ -629,7 +629,7 @@ function onResolved(preview: PreviewResponse): void {
 							@click="openEditor(locale)"
 						/>
 					</template>
-				</DmsBanner>
+				</DmsNoticeBanner>
 			</div>
 
 			<div v-show="tab === 'variables'" class="flex flex-col gap-4 py-4">

package/frontend-vue/app/components/TemplateGallery.vue

@@ -250,7 +250,7 @@ useEventListener(
 				​
 			</div>
 			<div class="grid grid-cols-[repeat(auto-fill,minmax(272px,1fr))] gap-4">
-				<DmsCard
+				<DmsCardPanel
 					v-for="index in SKELETON_CARDS"
 					:key="index"
 					:padded="false"
@@ -273,7 +273,7 @@ useEventListener(
 							&#8203;
 						</div>
 					</div>
-				</DmsCard>
+				</DmsCardPanel>
 			</div>
 		</section>
 

package/frontend-vue/app/components/TestSendModal.vue

@@ -242,7 +242,7 @@ async function submit(): Promise<void> {
 				:label="t('dms_mailing.real_send.version')"
 			>
 				<template #default="{ id }">
-					<DmsSelect
+					<DmsInputSelect
 						:id="id"
 						v-model="versionChoice"
 						:items="versionItems"
@@ -257,7 +257,7 @@ async function submit(): Promise<void> {
 
 			<FormFieldRow :label="t('dms_mailing.test_send.locale')">
 				<template #default="{ id }">
-					<DmsSelect
+					<DmsInputSelect
 						:id="id"
 						v-model="locale"
 						:items="localeItems"
@@ -271,7 +271,7 @@ async function submit(): Promise<void> {
 
 			<FormFieldRow :label="t('dms_mailing.test_send.data')">
 				<template #default="{ id }">
-					<DmsSelect
+					<DmsInputSelect
 						:id="id"
 						v-model="dataChoice"
 						:items="dataItems"
@@ -284,7 +284,7 @@ async function submit(): Promise<void> {
 			</FormFieldRow>
 		</FormRows>
 
-		<DmsBanner
+		<DmsNoticeBanner
 			tone="info"
 			icon="i-ph-info"
 			:title="t('dms_mailing.test_send.info_title')"

package/frontend-vue/app/components/VersionPreview.vue

@@ -62,7 +62,7 @@ function onResolved(preview: PreviewResponse): void {
 <template>
 	<div class="flex flex-col gap-4">
 		<div class="flex items-center justify-between gap-2">
-			<DmsSegmented
+			<DmsSegmentedControl
 				v-if="localeItems.length > 1"
 				v-model="locale"
 				:items="localeItems"
@@ -95,7 +95,7 @@ function onResolved(preview: PreviewResponse): void {
 
 		<div class="grid gap-4 sm:grid-cols-2">
 			<div class="flex flex-col gap-1.5">
-				<DmsEyebrow :label="t(`${KEY}.brought`)" />
+				<DmsEyebrowLabel :label="t(`${KEY}.brought`)" />
 				<ul v-if="lines.length" class="flex flex-col gap-1 text-[12.5px]">
 					<li
 						v-for="line in lines"
@@ -114,7 +114,7 @@ function onResolved(preview: PreviewResponse): void {
 				</p>
 			</div>
 			<div class="flex flex-col gap-1.5">
-				<DmsEyebrow :label="t(`${KEY}.declared`)" />
+				<DmsEyebrowLabel :label="t(`${KEY}.declared`)" />
 				<p v-if="!declared.length" class="text-muted text-[12.5px]">
 					{{ t(`${KEY}.no_variables`) }}
 				</p>

package/frontend-vue/app/components/editor/EditorBlockFields.vue

@@ -91,7 +91,7 @@ function patchChecked(field: BlockField, value: unknown): void {
 				:is-multiline="field.kind === 'tokens'"
 				@update:model-value="patch(field.key, $event)"
 			/>
-			<DmsSegmented
+			<DmsSegmentedControl
 				v-else-if="field.kind === 'align'"
 				:model-value="text(field.key) || ALIGNMENTS[0]"
 				:items="alignItems"

package/frontend-vue/app/components/editor/EditorCompare.vue

@@ -178,7 +178,7 @@ watch(locale, load, { immediate: true })
 			>
 				<div class="flex min-w-0 flex-col gap-0.5">
 					<div class="flex items-center gap-2">
-						<DmsEyebrow :label="side.label" />
+						<DmsEyebrowLabel :label="side.label" />
 						<span
 							v-if="side.preview"
 							class="text-highlighted min-w-0 truncate text-xs font-medium"

package/frontend-vue/app/components/editor/EditorEnvelope.vue

@@ -29,7 +29,7 @@ function openEnvelope(): void {
 			class="hover:bg-elevated/50 col-span-2 grid min-h-[38px] w-full grid-cols-subgrid items-center gap-x-2.5 px-3 text-left"
 			@click.stop="openEnvelope()"
 		>
-			<DmsEyebrow
+			<DmsEyebrowLabel
 				:label="t(`${KEY}.subject`)"
 				class="min-w-[78px] whitespace-nowrap"
 			/>
@@ -57,7 +57,7 @@ function openEnvelope(): void {
 			class="border-default hover:bg-elevated/50 col-span-2 grid min-h-[38px] w-full grid-cols-subgrid items-center gap-x-2.5 border-t px-3 text-left"
 			@click.stop="openEnvelope()"
 		>
-			<DmsEyebrow
+			<DmsEyebrowLabel
 				:label="t(`${KEY}.preheader`)"
 				class="min-w-[78px] whitespace-nowrap"
 			/>

package/frontend-vue/app/components/editor/EditorLifecycle.vue

@@ -45,7 +45,7 @@ const buttons = computed(() => lifecycleActions(status.value))
 
 <template>
 	<div class="flex flex-col gap-3">
-		<DmsEyebrow :label="t(`${KEY}.title`)" />
+		<DmsEyebrowLabel :label="t(`${KEY}.title`)" />
 		<DmsStatGroup :items="stats" layout="joined" :columns="3" />
 		<div class="flex flex-wrap items-center gap-1.5">
 			<UButton

package/frontend-vue/app/components/editor/EditorPaletteGroup.vue

@@ -37,7 +37,7 @@ useSortableList(root, () => props.entries, {
 
 <template>
 	<section>
-		<DmsEyebrow :label="title" class="mb-2 block" />
+		<DmsEyebrowLabel :label="title" class="mb-2 block" />
 		<div ref="root" class="grid grid-cols-2 gap-1.5">
 			<template v-for="element in entries" :key="element.type">
 				<button

package/frontend-vue/app/components/editor/EditorPublishReview.vue

@@ -43,7 +43,7 @@ const { t } = useI18n()
 			{{ t(`${KEY}.no_changes`, { version: currentVersion }) }}
 		</p>
 
-		<DmsBanner
+		<DmsNoticeBanner
 			v-if="blockers.length"
 			tone="error"
 			icon="i-ph-prohibit"
@@ -54,9 +54,9 @@ const { t } = useI18n()
 					<li v-for="blocker in blockers" :key="blocker">{{ blocker }}</li>
 				</ul>
 			</template>
-		</DmsBanner>
+		</DmsNoticeBanner>
 
-		<DmsBanner
+		<DmsNoticeBanner
 			v-if="warnings.length"
 			tone="warning"
 			icon="i-ph-warning"
@@ -67,7 +67,7 @@ const { t } = useI18n()
 					<li v-for="warning in warnings" :key="warning">{{ warning }}</li>
 				</ul>
 			</template>
-		</DmsBanner>
+		</DmsNoticeBanner>
 
 		<div class="border-default -mx-1 flex items-center gap-2 border-t pt-4">
 			<UButton

package/frontend-vue/app/components/editor/EditorTemplatePane.vue

@@ -95,7 +95,7 @@ const preheader = computed({
 
 		<template v-if="editor.current">
 			<USeparator />
-			<DmsEyebrow
+			<DmsEyebrowLabel
 				:label="t(`${KEY}.envelope`, { locale: editor.locale.toUpperCase() })"
 			/>
 			<UFormField :label="t('dms_mailing.editor.subject')" size="sm">
@@ -112,7 +112,7 @@ const preheader = computed({
 
 		<USeparator />
 		<div class="flex flex-col gap-2">
-			<DmsEyebrow :label="t('dms_mailing.history.title')" />
+			<DmsEyebrowLabel :label="t('dms_mailing.history.title')" />
 			<MailingVersionHistory
 				v-if="session.state.version > 0"
 				:template-id="templateId"

package/frontend-vue/app/components/editor/EditorTestDataPane.vue

@@ -91,7 +91,7 @@ async function save(): Promise<void> {
 		</div>
 
 		<USeparator />
-		<DmsEyebrow :label="t(`${KEY}.checks`)" />
+		<DmsEyebrowLabel :label="t(`${KEY}.checks`)" />
 		<DmsCheckList :items="items" size="sm" />
 		<MailingEditorMissingPolicy />
 	</div>

package/frontend-vue/app/components/editor/EditorVariablesPane.vue

@@ -114,7 +114,7 @@ function insert(path: string): void {
 
 <template>
 	<div class="flex flex-col gap-2">
-		<DmsEyebrow :label="t(`${KEY}.insert_hint`)" />
+		<DmsEyebrowLabel :label="t(`${KEY}.insert_hint`)" />
 		<p class="text-muted text-xs">{{ t(`${KEY}.draft_hint`) }}</p>
 
 		<p v-if="merged.length === 0" class="text-muted text-xs">

package/frontend-vue/app/components/editor/EditorViewSwitches.vue

@@ -58,7 +58,7 @@ const mode = computed({
 			"
 		>
 			<span class="inline-flex">
-				<DmsSegmented
+				<DmsSegmentedControl
 					v-model="device"
 					size="xs"
 					:items="deviceItems"
@@ -66,7 +66,7 @@ const mode = computed({
 				/>
 			</span>
 		</UTooltip>
-		<DmsSegmented
+		<DmsSegmentedControl
 			v-model="mode"
 			size="xs"
 			:items="modeItems"

package/frontend-vue/app/components/editor/EditorVisibility.vue

@@ -66,7 +66,7 @@ const mode = computed({
 <template>
 	<div class="flex flex-col gap-2">
 		<p class="text-highlighted text-sm font-medium">{{ t(`${KEY}.label`) }}</p>
-		<DmsSegmented
+		<DmsSegmentedControl
 			v-model="mode"
 			size="xs"
 			:items="items"

package/frontend-vue/package.json

@@ -6,7 +6,7 @@
   "license": "Apache-2.0",
   "packageManager": "pnpm@10.2.0",
   "engines": {
-    "@antelopejs/dms-frontend": ">=0.10.0 <0.11.0"
+    "@antelopejs/dms-frontend": ">=0.11.0 <0.12.0"
   },
   "scripts": {
     "format": "prettier --write .",

package/frontend-vue/tests/categories-input.test.ts

@@ -63,7 +63,7 @@ const GLOBALS = {
 	UFormField: FormFieldStub,
 	UButton: ButtonStub,
 	UPopover: slotStub('UPopover'),
-	DmsEyebrow: slotStub('DmsEyebrow'),
+	DmsEyebrowLabel: slotStub('DmsEyebrowLabel'),
 	DmsInputText: slotStub('DmsInputText'),
 }
 

package/frontend-vue/tests/dms-component-names.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { dmsTags, knownComponents } from './helpers/component-tags'
+
+describe('the DMS components the layer renders', () => {
+	it('names only components the installed DMS or this layer registers', async () => {
+		const known = await knownComponents()
+		const unknown = (await dmsTags()).filter(
+			(use) => !known.has(use.split(': ')[1] ?? ''),
+		)
+		expect(unknown).toEqual([])
+	})
+})

package/frontend-vue/tests/funnel-card.test.ts

@@ -24,9 +24,9 @@ const EmptyStateStub = defineComponent({
 })
 
 const GLOBALS = {
-	DmsCard: slotStub('DmsCard'),
-	DmsSegmented: slotStub('DmsSegmented'),
-	DmsMeter: slotStub('DmsMeter'),
+	DmsCardPanel: slotStub('DmsCardPanel'),
+	DmsSegmentedControl: slotStub('DmsSegmentedControl'),
+	DmsMeterBar: slotStub('DmsMeterBar'),
 	DmsEmptyState: EmptyStateStub,
 	USkeleton: slotStub('USkeleton'),
 	UIcon: slotStub('UIcon'),

package/frontend-vue/tests/helpers/component-tags.ts

@@ -0,0 +1,58 @@
+import { readdir, readFile } from 'node:fs/promises'
+import { basename, join, sep } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const LAYER_ROOT = fileURLToPath(new URL('../../', import.meta.url))
+const DMS_LAYERS = fileURLToPath(
+	new URL(
+		'../../../node_modules/@antelopejs/dms/frontend-vue/layers',
+		import.meta.url,
+	),
+)
+const DMS_TAG = /<\/?(Dms[A-Z][\w]*|dms-[a-z][\w-]*)(?=[\s/>])/g
+
+async function vueFiles(root: string): Promise<string[]> {
+	const paths = await readdir(root, { recursive: true, encoding: 'utf8' })
+	return paths
+		.filter((path) => path.endsWith('.vue') && !path.includes('node_modules'))
+		.map((path) => join(root, path))
+}
+
+function pascal(tag: string): string {
+	return tag
+		.split('-')
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join('')
+}
+
+/** Names a component directory registers under `prefix`: the prefix and each file's base name, as `dms.frontend.ts` registers them. */
+function registered(prefix: string, files: string[]): string[] {
+	return files.map((file) => `${prefix}${basename(file, '.vue')}`)
+}
+
+/** Every component the installed DMS layers and this layer's `app/components` register. */
+export async function knownComponents(): Promise<Set<string>> {
+	const dms = await vueFiles(DMS_LAYERS)
+	const own = await vueFiles(join(LAYER_ROOT, 'app', 'components'))
+	return new Set([
+		...registered(
+			'Dms',
+			dms.filter((file) => file.includes(`${sep}app${sep}components${sep}`)),
+		),
+		...registered('Mailing', own),
+	])
+}
+
+/** Every `Dms*` or `dms-*` tag of this layer's `.vue` files, as `file: Name`, in Pascal case. */
+export async function dmsTags(): Promise<string[]> {
+	const files = await vueFiles(join(LAYER_ROOT, 'app'))
+	const sources = await Promise.all(
+		files.map(async (file) => ({ file, text: await readFile(file, 'utf8') })),
+	)
+	return sources.flatMap(({ file, text }) =>
+		Array.from(
+			text.matchAll(DMS_TAG),
+			(match) => `${file.slice(LAYER_ROOT.length)}: ${pascal(match[1] ?? '')}`,
+		),
+	)
+}

package/frontend-vue/tests/helpers/nuxt-globals.ts

@@ -231,7 +231,7 @@ export const FORM_STUBS: Record<string, Component> = {
 	DmsInputText: InputStub,
 	DmsInputEmail: InputStub,
 	UCheckbox: CheckboxStub,
-	DmsCheckbox: CheckboxStub,
+	DmsInputCheckbox: CheckboxStub,
 	DmsInputTags: TagsStub,
 	UFormField: slotStub('UFormField'),
 	DmsFieldRow: slotStub('DmsFieldRow'),

package/frontend-vue/tests/overview-gate.test.ts

@@ -57,7 +57,7 @@ const Gate = defineComponent({
 })
 
 const GLOBALS = {
-	DmsCard: slotStub('DmsCard'),
+	DmsCardPanel: slotStub('DmsCardPanel'),
 	DmsEmptyState: EmptyStateStub,
 	DmsIconWell: slotStub('DmsIconWell'),
 	DmsListRow: ListRowStub,

package/frontend-vue/tests/retention-input.test.ts

@@ -56,7 +56,7 @@ function mountRetention(): Harness {
 				'onUpdate:modelValue': (value: number) => (state.days = value),
 			}),
 	})
-	app.component('DmsSegmented', slotStub('DmsSegmented'))
+	app.component('DmsSegmentedControl', slotStub('DmsSegmentedControl'))
 	app.component('UInputNumber', slotStub('UInputNumber'))
 	app.component('UAlert', slotStub('UAlert'))
 	app.config.warnHandler = () => undefined
@@ -65,7 +65,7 @@ function mountRetention(): Harness {
 }
 
 function segmented(host: HTMLElement): HTMLElement {
-	return host.querySelector('[data-stub="DmsSegmented"]') as HTMLElement
+	return host.querySelector('[data-stub="DmsSegmentedControl"]') as HTMLElement
 }
 
 describe('RetentionInput', () => {

package/frontend-vue/tests/send-drawer.test.ts

@@ -29,10 +29,10 @@ const STUB_NAMES = [
 	'USkeleton',
 	'UButton',
 	'UIcon',
-	'DmsEyebrow',
+	'DmsEyebrowLabel',
 	'DmsStatusPill',
 	'DmsStatGroup',
-	'DmsBanner',
+	'DmsNoticeBanner',
 	'DmsActivityItem',
 	'DmsListRow',
 	'DmsKeyValueList',

package/frontend-vue/tests/send-modals.test.ts

@@ -93,7 +93,7 @@ const globals = {
 	...FORM_STUBS,
 	MailingRecipientsField: RecipientsField,
 	DmsKeyValueList: KeyValueListStub,
-	DmsBanner: slotStub('DmsBanner'),
+	DmsNoticeBanner: slotStub('DmsNoticeBanner'),
 }
 
 let stubs: NuxtStubs

package/frontend-vue/tests/template-drawer.test.ts

@@ -97,9 +97,9 @@ const DropdownStub = {
 const globals = {
 	...FORM_STUBS,
 	UDropdownMenu: DropdownStub,
-	DmsBanner: slotStub('DmsBanner'),
+	DmsNoticeBanner: slotStub('DmsNoticeBanner'),
 	MailingTemplatePreviewFrame: slotStub('MailingTemplatePreviewFrame'),
-	DmsCard: slotStub('DmsCard'),
+	DmsCardPanel: slotStub('DmsCardPanel'),
 	DmsEmptyState: slotStub('DmsEmptyState'),
 }
 
@@ -271,7 +271,7 @@ describe('TemplateDrawer', () => {
 		)
 		expect(buttons).not.toContain('dms_mailing.templates.drawer.declare')
 		const banners = [
-			...view.host.querySelectorAll('[data-stub="DmsBanner"]'),
+			...view.host.querySelectorAll('[data-stub="DmsNoticeBanner"]'),
 		].map((banner) => banner.getAttribute('title'))
 		expect(banners).toContain('dms_mailing.templates.drawer.draft_declarations')
 		view.unmount()
@@ -362,7 +362,7 @@ describe('TemplateDrawer', () => {
 		api.templateContent.mockResolvedValue(detail(row('live')))
 		const view = mount(TemplateDrawer, { templateId: 't1' }, globals)
 		await flush()
-		const segmented = view.host.querySelector('dmssegmented')
+		const segmented = view.host.querySelector('dmssegmentedcontrol')
 		expect(segmented).not.toBeNull()
 		expect(
 			view.host.querySelectorAll('dmslistrow')[0]?.getAttribute('title'),
@@ -446,7 +446,7 @@ describe('StarterGallery', () => {
 		api.createTemplate.mockResolvedValue({ _id: 'new-id' })
 		const view = mount(StarterGallery, {}, globals)
 		await flush()
-		;(view.host.querySelector('[data-stub="DmsCard"]') as HTMLElement).click()
+		;(view.host.querySelector('[data-stub="DmsCardPanel"]') as HTMLElement).click()
 		await flush()
 		expect(api.createTemplate).toHaveBeenCalledWith({
 			name: 'Order confirmation',
@@ -464,7 +464,7 @@ describe('StarterGallery', () => {
 		api.createTemplate.mockRejectedValue({ statusCode: 409 })
 		const view = mount(StarterGallery, {}, globals)
 		await flush()
-		;(view.host.querySelector('[data-stub="DmsCard"]') as HTMLElement).click()
+		;(view.host.querySelector('[data-stub="DmsCardPanel"]') as HTMLElement).click()
 		await flush()
 		expect(stubs.modalCalls[0]?.componentOptions).toEqual({
 			initialName: 'Order confirmation',

package/frontend-vue/tests/template-gallery.test.ts

@@ -361,7 +361,7 @@ describe('TemplateGallery', () => {
 		const ctx = context({ items: [LIVE] })
 		const view = mount(TemplateGallery, { context: ctx }, globals)
 		await flush()
-		const card = view.host.querySelector('dmscard') as HTMLElement
+		const card = view.host.querySelector('dmscardpanel') as HTMLElement
 		card.dispatchEvent(
 			new KeyboardEvent('keydown', { key: 't', bubbles: true }),
 		)
@@ -426,7 +426,7 @@ describe('TemplateGallery', () => {
 		const skeleton = loading.host.querySelector(
 			'[data-gallery-skeleton]',
 		) as HTMLElement
-		const skeletonCard = skeleton.querySelector('dmscard') as HTMLElement
+		const skeletonCard = skeleton.querySelector('dmscardpanel') as HTMLElement
 		const skeletonHeading = skeleton.firstElementChild as HTMLElement
 		const skeletonBody = skeletonCard.lastElementChild as HTMLElement
 
@@ -443,7 +443,7 @@ describe('TemplateGallery', () => {
 		await flush()
 		expect(loaded.host.querySelector('[data-gallery-skeleton]')).toBeNull()
 		const section = loaded.host.querySelector('section') as HTMLElement
-		const card = section.querySelector('article, dmscard') as HTMLElement
+		const card = section.querySelector('article, dmscardpanel') as HTMLElement
 		const body = card.lastElementChild as HTMLElement
 
 		expect(skeleton.className).toBe(section.className)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms-mailing",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "E-mail templates for the AntelopeJS DMS: a block editor with drafts and versions, a send log, delivery metrics and a suppression list.",
   "keywords": [
     "antelopejs",
@@ -56,7 +56,7 @@
     "@antelopejs/interface-dms-mailing": ">=0.11.0 <0.12.0",
     "@antelopejs/interface-email": ">=0.2.0 <0.3.0",
     "node-cron": "^4.2.1",
-    "zod": "~3.24.2"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@antelopejs/core": "~1.23.2",