@forgeroute/ui 0.4.78 → 0.4.79

package/fesm2022/forgeroute-ui-messaging.mjs

@@ -4,7 +4,7 @@ import * as i1 from "@angular/forms";
 import { FormsModule } from "@angular/forms";
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
-import { AlertComponent, BadgeComponent, ButtonComponent, CheckboxComponent, ChipComponent, ComboboxComponent, ContactPickerComponent, DatetimeInputComponent, ErrorComponent, FORGEROUTE_CONFIG, FormRowComponent, FormSectionComponent, HintComponent, PillTabsComponent, RadioGroupComponent, RichTextEditorComponent, SelectComponent, SidePanelComponent, TextInputComponent, TextareaInputComponent, ToastService, ToggleBadgeComponent, UiFieldValidity, createFieldReveal, getErrorMessage, requiredIssue } from "@forgeroute/ui";
+import { AlertComponent, BadgeComponent, ButtonComponent, CheckboxComponent, ChipComponent, ComboboxComponent, ContactPickerComponent, DatetimeInputComponent, ErrorComponent, FORGEROUTE_CONFIG, FormRowComponent, FormSectionComponent, HintComponent, PillTabsComponent, RadioGroupComponent, RichTextEditorComponent, SelectComponent, SidePanelComponent, TextInputComponent, TextareaInputComponent, ToastService, ToggleBadgeComponent, UI_DEFAULT_LABELS, UiFieldValidity, UiLabelsService, createFieldReveal, formatAttachmentSize, getErrorMessage, requiredIssue, safeLocale, uiLocale, uiText } from "@forgeroute/ui";
 import { Subject, catchError, debounceTime, defer, distinctUntilChanged, map, of, switchMap, take, throwError } from "rxjs";
 let nextVideoPickerId = 0;
 var VideoPickerComponent = class VideoPickerComponent {
@@ -12,6 +12,7 @@ var VideoPickerComponent = class VideoPickerComponent {
 		return `${this.uid}-opt-${i}`;
 	}
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.videoSelected = output();
 		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
@@ -36,7 +37,7 @@ var VideoPickerComponent = class VideoPickerComponent {
 		this.activeIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
 		this.reveal = createFieldReveal(this.showErrors);
 		this.invalid = computed(() => this.required() && !this.selected(), ...ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []);
-		this.errorMessage = computed(() => this.invalid() ? requiredIssue(this.label() || "Video").message : "", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+		this.errorMessage = computed(() => this.invalid() ? requiredIssue(this.label() || this.labels.t("common.video")).message : "", ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
 		this.visibleError = computed(() => this.reveal.revealed() ? this.errorMessage() : "", ...ngDevMode ? [{ debugName: "visibleError" }] : /* istanbul ignore next */ []);
 		this.activeDescendant = computed(() => {
 			const i = this.activeIndex();
@@ -44,9 +45,9 @@ var VideoPickerComponent = class VideoPickerComponent {
 		}, ...ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []);
 		this.liveText = computed(() => {
 			if (!this.showResults()) return "";
-			if (this.loading() || this.pending()) return "Searching";
+			if (this.loading() || this.pending()) return this.labels.t("search.searching");
 			const n = this.results().length;
-			return n === 0 ? "No results" : n === 1 ? "1 result" : `${n} results`;
+			return this.labels.t(n === 0 ? "messagingSendMessagePanel.resultsCount_zero" : n === 1 ? "messagingSendMessagePanel.resultsCount_one" : "messagingSendMessagePanel.resultsCount_other", { count: n });
 		}, ...ngDevMode ? [{ debugName: "liveText" }] : /* istanbul ignore next */ []);
 		this.search$ = new Subject();
 		this.blurTimer = null;
@@ -231,12 +232,12 @@ var VideoPickerComponent = class VideoPickerComponent {
       }
       @if (selected()) {
         <div class="selected-input" role="group" tabindex="-1"
-          [attr.aria-labelledby]="label() ? labelId : null" [attr.aria-label]="label() ? null : 'Selected video'">
+          [attr.aria-labelledby]="label() ? labelId : null" [attr.aria-label]="label() ? null : labels.t('messagingSendMessagePanel.selectedVideo')">
           <div class="selected-video">
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
             <span>{{ selected()!.title }}</span>
           </div>
-          <button type="button" class="clear-btn" (click)="clear()" aria-label="Remove video">&times;</button>
+          <button type="button" class="clear-btn" (click)="clear()" [attr.aria-label]="labels.t('messagingVideoPicker.removeVideo')">&times;</button>
         </div>
       } @else {
         <input
@@ -245,9 +246,9 @@ var VideoPickerComponent = class VideoPickerComponent {
           role="combobox"
           aria-autocomplete="list"
           aria-haspopup="listbox"
-          placeholder="Search videos..."
+          [placeholder]="labels.t('messagingVideoPicker.searchVideos')"
           [id]="inputId"
-          [attr.aria-label]="label() ? null : 'Search videos'"
+          [attr.aria-label]="label() ? null : labels.t('messagingSendMessagePanel.searchVideosAria')"
           [attr.aria-required]="required() || null"
           [attr.aria-invalid]="visibleError() ? 'true' : null"
           [attr.aria-describedby]="visibleError() && !showResults() ? errorId : null"
@@ -263,12 +264,12 @@ var VideoPickerComponent = class VideoPickerComponent {
         />
         @if (showResults()) {
           <div class="picker-dropdown" role="listbox" [id]="listboxId"
-            [attr.aria-labelledby]="label() ? labelId : null" [attr.aria-label]="label() ? null : 'Videos'"
+            [attr.aria-labelledby]="label() ? labelId : null" [attr.aria-label]="label() ? null : labels.t('common.videos')"
             (mousedown)="$event.preventDefault()">
             @if (loading() || (pending() && results().length === 0)) {
-              <div class="picker-loading">Searching...</div>
+              <div class="picker-loading">{{ labels.t('messagingVideoPicker.searching') }}</div>
             } @else if (results().length === 0 && query.length >= 2) {
-              <div class="picker-empty">No videos found</div>
+              <div class="picker-empty">{{ labels.t('messagingVideoPicker.noVideosFound') }}</div>
             } @else {
               @for (v of results(); track v.id; let i = $index) {
                 <button type="button" class="picker-option" role="option" tabindex="-1"
@@ -356,12 +357,12 @@ i0.ɵɵngDeclareClassMetadata({
       }
       @if (selected()) {
         <div class="selected-input" role="group" tabindex="-1"
-          [attr.aria-labelledby]="label() ? labelId : null" [attr.aria-label]="label() ? null : 'Selected video'">
+          [attr.aria-labelledby]="label() ? labelId : null" [attr.aria-label]="label() ? null : labels.t('messagingSendMessagePanel.selectedVideo')">
           <div class="selected-video">
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
             <span>{{ selected()!.title }}</span>
           </div>
-          <button type="button" class="clear-btn" (click)="clear()" aria-label="Remove video">&times;</button>
+          <button type="button" class="clear-btn" (click)="clear()" [attr.aria-label]="labels.t('messagingVideoPicker.removeVideo')">&times;</button>
         </div>
       } @else {
         <input
@@ -370,9 +371,9 @@ i0.ɵɵngDeclareClassMetadata({
           role="combobox"
           aria-autocomplete="list"
           aria-haspopup="listbox"
-          placeholder="Search videos..."
+          [placeholder]="labels.t('messagingVideoPicker.searchVideos')"
           [id]="inputId"
-          [attr.aria-label]="label() ? null : 'Search videos'"
+          [attr.aria-label]="label() ? null : labels.t('messagingSendMessagePanel.searchVideosAria')"
           [attr.aria-required]="required() || null"
           [attr.aria-invalid]="visibleError() ? 'true' : null"
           [attr.aria-describedby]="visibleError() && !showResults() ? errorId : null"
@@ -388,12 +389,12 @@ i0.ɵɵngDeclareClassMetadata({
         />
         @if (showResults()) {
           <div class="picker-dropdown" role="listbox" [id]="listboxId"
-            [attr.aria-labelledby]="label() ? labelId : null" [attr.aria-label]="label() ? null : 'Videos'"
+            [attr.aria-labelledby]="label() ? labelId : null" [attr.aria-label]="label() ? null : labels.t('common.videos')"
             (mousedown)="$event.preventDefault()">
             @if (loading() || (pending() && results().length === 0)) {
-              <div class="picker-loading">Searching...</div>
+              <div class="picker-loading">{{ labels.t('messagingVideoPicker.searching') }}</div>
             } @else if (results().length === 0 && query.length >= 2) {
-              <div class="picker-empty">No videos found</div>
+              <div class="picker-empty">{{ labels.t('messagingVideoPicker.noVideosFound') }}</div>
             } @else {
               @for (v of results(); track v.id; let i = $index) {
                 <button type="button" class="picker-option" role="option" tabindex="-1"
@@ -464,6 +465,7 @@ var TemplatePickerComponent = class TemplatePickerComponent {
 		return `${this.uid}-opt-${i}`;
 	}
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.http = inject(HttpClient);
 		this.apiBase = inject(FORGEROUTE_CONFIG, { optional: true })?.baseUrl ?? "/api";
 		this.destroyRef = inject(DestroyRef);
@@ -472,7 +474,11 @@ var TemplatePickerComponent = class TemplatePickerComponent {
 		this.search$ = new Subject();
 		this.channel = input("", ...ngDevMode ? [{ debugName: "channel" }] : /* istanbul ignore next */ []);
 		this.selectedId = input(null, ...ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []);
-		this.label = input("Template", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.labelInput = input(null, {
+			...ngDevMode ? { debugName: "labelInput" } : /* istanbul ignore next */ {},
+			alias: "label"
+		});
+		this.label = computed(() => this.labelInput() ?? this.labels.t("messagingTemplatePicker.label"), ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 		this.showErrors = input(false, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
 		this.templateSelected = output();
@@ -490,9 +496,9 @@ var TemplatePickerComponent = class TemplatePickerComponent {
 		this.visibleError = computed(() => this.reveal.revealed() ? this.errorMessage() : "", ...ngDevMode ? [{ debugName: "visibleError" }] : /* istanbul ignore next */ []);
 		this.liveText = computed(() => {
 			if (!this.showResults()) return "";
-			if (this.loading()) return "Searching";
+			if (this.loading()) return this.labels.t("search.searching");
 			const n = this.results().length;
-			return n === 0 ? "No results" : n === 1 ? "1 result" : `${n} results`;
+			return this.labels.t(n === 0 ? "messagingSendMessagePanel.resultsCount_zero" : n === 1 ? "messagingSendMessagePanel.resultsCount_one" : "messagingSendMessagePanel.resultsCount_other", { count: n });
 		}, ...ngDevMode ? [{ debugName: "liveText" }] : /* istanbul ignore next */ []);
 		this.uid = `ui-tpl-${TemplatePickerComponent.nextId++}`;
 		this.inputId = `${this.uid}-input`;
@@ -501,20 +507,6 @@ var TemplatePickerComponent = class TemplatePickerComponent {
 		this.blurTimer = null;
 		this.lastOptionMouse = 0;
 		this.lastPreviewMouse = 0;
-		this.sampleVars = {
-			first_name: "Sarah",
-			last_name: "Johnson",
-			full_name: "Sarah Johnson",
-			email: "sarah@example.com",
-			phone: "(555) 867-5309",
-			property_address: "1842 Maple Grove Lane",
-			address: "1842 Maple Grove Lane",
-			price: "$485,000",
-			list_price: "$485,000",
-			agent_name: "Alex Rivera",
-			company_name: "Real Estate",
-			closing_date: "Sept 15, 2026"
-		};
 		effect(() => {
 			this.invalidChange.emit(this.invalid());
 		});
@@ -637,6 +629,22 @@ var TemplatePickerComponent = class TemplatePickerComponent {
 			body: tpl.body
 		});
 	}
+	get sampleVars() {
+		return {
+			first_name: "Sarah",
+			last_name: "Johnson",
+			full_name: "Sarah Johnson",
+			email: "sarah@example.com",
+			phone: "(555) 867-5309",
+			property_address: this.labels.t("messagingTemplatePicker.sampleAddress"),
+			address: this.labels.t("messagingTemplatePicker.sampleAddress"),
+			price: "$485,000",
+			list_price: "$485,000",
+			agent_name: "Alex Rivera",
+			company_name: this.labels.t("messagingTemplatePicker.sampleCompany"),
+			closing_date: this.labels.t("messagingTemplatePicker.sampleClosingDate")
+		};
+	}
 	previewText(raw) {
 		const resolved = raw.replace(/\{\{(\w+)\}\}/g, (_, k) => this.sampleVars[k] ?? "…");
 		return resolved.length > 80 ? resolved.slice(0, 80) + "…" : resolved;
@@ -652,15 +660,15 @@ var TemplatePickerComponent = class TemplatePickerComponent {
 		return true;
 	}
 	activeDateLabel(tpl) {
-		if (tpl.useAllYear !== false) return "Active all year";
-		const fmt = (d) => new Date(d).toLocaleDateString("en-US", {
+		if (tpl.useAllYear !== false) return this.labels.t("messagingSendMessagePanel.activeAllYear");
+		const fmt = (d) => new Date(d).toLocaleDateString(safeLocale(this.labels.locale()), {
 			month: "short",
 			day: "numeric"
 		});
 		if (tpl.activeFrom && tpl.activeTo) return `${fmt(tpl.activeFrom)} – ${fmt(tpl.activeTo)}`;
-		if (tpl.activeFrom) return `From ${fmt(tpl.activeFrom)}`;
-		if (tpl.activeTo) return `Until ${fmt(tpl.activeTo)}`;
-		return "Active all year";
+		if (tpl.activeFrom) return this.labels.t("messagingSendMessagePanel.activeFrom", { date: fmt(tpl.activeFrom) });
+		if (tpl.activeTo) return this.labels.t("messagingSendMessagePanel.activeUntil", { date: fmt(tpl.activeTo) });
+		return this.labels.t("messagingSendMessagePanel.activeAllYear");
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -694,8 +702,8 @@ var TemplatePickerComponent = class TemplatePickerComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				label: {
-					classPropertyName: "label",
+				labelInput: {
+					classPropertyName: "labelInput",
 					publicName: "label",
 					isSignal: true,
 					isRequired: false,
@@ -737,11 +745,11 @@ var TemplatePickerComponent = class TemplatePickerComponent {
         type="text"
         role="combobox"
         [id]="inputId"
-        placeholder="Search templates..."
+        [placeholder]="labels.t('messagingTemplatePicker.searchTemplates')"
         autocomplete="off"
         aria-autocomplete="list"
         aria-haspopup="listbox"
-        [attr.aria-label]="label() ? null : 'Search templates'"
+        [attr.aria-label]="label() ? null : labels.t('messagingSendMessagePanel.searchTemplatesAria')"
         [attr.aria-invalid]="visibleError() ? 'true' : null"
         [attr.aria-describedby]="visibleError() && !showResults() ? errorId : null"
         [attr.aria-required]="required() || null"
@@ -755,11 +763,11 @@ var TemplatePickerComponent = class TemplatePickerComponent {
         (keydown)="onKeydown($event)" />
 
       @if (showResults()) {
-        <div class="picker-dropdown" [id]="listId" role="listbox" [attr.aria-label]="label() || 'Search templates'" (mousedown)="$event.preventDefault()">
+        <div class="picker-dropdown" [id]="listId" role="listbox" [attr.aria-label]="label() || labels.t('messagingSendMessagePanel.searchTemplatesAria')" (mousedown)="$event.preventDefault()">
           @if (loading()) {
-            <div class="picker-loading">Searching...</div>
+            <div class="picker-loading">{{ labels.t('messagingTemplatePicker.searching') }}</div>
           } @else if (results().length === 0) {
-            <div class="picker-empty">No templates found</div>
+            <div class="picker-empty">{{ labels.t('messagingTemplatePicker.noTemplatesFound') }}</div>
           } @else {
             @for (tpl of results(); track tpl.id; let i = $index) {
               <div
@@ -776,17 +784,17 @@ var TemplatePickerComponent = class TemplatePickerComponent {
                   <span class="option-title">
                     <span class="option-name">{{ tpl.name }}</span>
                     @if (tpl.isSystem !== undefined) {
-                      <span class="option-badge" [class.system]="tpl.isSystem">{{ tpl.isSystem ? 'System' : 'Custom' }}</span>
+                      <span class="option-badge" [class.system]="tpl.isSystem">{{ tpl.isSystem ? labels.t('messagingTemplatePicker.system') : labels.t('messagingTemplatePicker.custom') }}</span>
                     }
                   </span>
                   <span class="option-detail">
-                    @if (!isCurrentlyActive(tpl)) { <span class="option-inactive">Inactive · </span> }{{ previewText(tpl.subject || tpl.body) }}
+                    @if (!isCurrentlyActive(tpl)) { <span class="option-inactive">{{ labels.t('messagingTemplatePicker.inactive') }} · </span> }{{ previewText(tpl.subject || tpl.body) }}
                   </span>
                 </span>
                 <button
                   type="button"
                   class="option-preview-btn"
-                  [attr.aria-label]="'Preview ' + tpl.name"
+                  [attr.aria-label]="labels.t('messagingSendMessagePanel.previewNamed', { name: tpl.name })"
                   (mousedown)="$event.stopPropagation(); $event.preventDefault(); onPreviewMouseDown(tpl)"
                   (click)="$event.stopPropagation(); onPreviewClick(tpl)">
                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -875,11 +883,11 @@ i0.ɵɵngDeclareClassMetadata({
         type="text"
         role="combobox"
         [id]="inputId"
-        placeholder="Search templates..."
+        [placeholder]="labels.t('messagingTemplatePicker.searchTemplates')"
         autocomplete="off"
         aria-autocomplete="list"
         aria-haspopup="listbox"
-        [attr.aria-label]="label() ? null : 'Search templates'"
+        [attr.aria-label]="label() ? null : labels.t('messagingSendMessagePanel.searchTemplatesAria')"
         [attr.aria-invalid]="visibleError() ? 'true' : null"
         [attr.aria-describedby]="visibleError() && !showResults() ? errorId : null"
         [attr.aria-required]="required() || null"
@@ -893,11 +901,11 @@ i0.ɵɵngDeclareClassMetadata({
         (keydown)="onKeydown($event)" />
 
       @if (showResults()) {
-        <div class="picker-dropdown" [id]="listId" role="listbox" [attr.aria-label]="label() || 'Search templates'" (mousedown)="$event.preventDefault()">
+        <div class="picker-dropdown" [id]="listId" role="listbox" [attr.aria-label]="label() || labels.t('messagingSendMessagePanel.searchTemplatesAria')" (mousedown)="$event.preventDefault()">
           @if (loading()) {
-            <div class="picker-loading">Searching...</div>
+            <div class="picker-loading">{{ labels.t('messagingTemplatePicker.searching') }}</div>
           } @else if (results().length === 0) {
-            <div class="picker-empty">No templates found</div>
+            <div class="picker-empty">{{ labels.t('messagingTemplatePicker.noTemplatesFound') }}</div>
           } @else {
             @for (tpl of results(); track tpl.id; let i = $index) {
               <div
@@ -914,17 +922,17 @@ i0.ɵɵngDeclareClassMetadata({
                   <span class="option-title">
                     <span class="option-name">{{ tpl.name }}</span>
                     @if (tpl.isSystem !== undefined) {
-                      <span class="option-badge" [class.system]="tpl.isSystem">{{ tpl.isSystem ? 'System' : 'Custom' }}</span>
+                      <span class="option-badge" [class.system]="tpl.isSystem">{{ tpl.isSystem ? labels.t('messagingTemplatePicker.system') : labels.t('messagingTemplatePicker.custom') }}</span>
                     }
                   </span>
                   <span class="option-detail">
-                    @if (!isCurrentlyActive(tpl)) { <span class="option-inactive">Inactive · </span> }{{ previewText(tpl.subject || tpl.body) }}
+                    @if (!isCurrentlyActive(tpl)) { <span class="option-inactive">{{ labels.t('messagingTemplatePicker.inactive') }} · </span> }{{ previewText(tpl.subject || tpl.body) }}
                   </span>
                 </span>
                 <button
                   type="button"
                   class="option-preview-btn"
-                  [attr.aria-label]="'Preview ' + tpl.name"
+                  [attr.aria-label]="labels.t('messagingSendMessagePanel.previewNamed', { name: tpl.name })"
                   (mousedown)="$event.stopPropagation(); $event.preventDefault(); onPreviewMouseDown(tpl)"
                   (click)="$event.stopPropagation(); onPreviewClick(tpl)">
                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
@@ -966,7 +974,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		label: [{
+		labelInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -1015,7 +1023,7 @@ const SIGNER_ROLES = [
 	"signer3",
 	"signer4"
 ];
-const SIGNER_ROLE_LABEL_DEFAULT = (role) => `Signer ${roleNumber(role)}`;
+const SIGNER_ROLE_LABEL_DEFAULT = (role) => uiText("messagingDocumentSendOptions.signerRole", { n: roleNumber(role) });
 function roleNumber(role) {
 	return Number(role.slice(6));
 }
@@ -1097,15 +1105,15 @@ function describeDocumentSigners(docs, states, cfg) {
 		info.roles = roles;
 		info.multiSigner = roles.length > 1;
 		const d = per[0].doc;
-		if (roles.length > 1) info.fieldsLine = `Fields placed for ${roles.length} signers`;
-		else if (informational && d.hasMapping !== void 0) info.fieldsLine = "No signature fields placed. Sent for viewing only.";
+		if (roles.length > 1) info.fieldsLine = uiText("messagingDocumentSendOptions.fieldsForSigners", { count: roles.length });
+		else if (informational && d.hasMapping !== void 0) info.fieldsLine = uiText("messagingDocumentSendOptions.noFieldsPlaced");
 	} else info.multiDocumentNote = signable.some((p) => effectiveRoles(p.state.roles).length > 1);
 	return info;
 }
 function countersignLine(info, cfg, viaDocuSign) {
 	if (!info || !cfg || info.informational || !info.countersign) return "";
-	if (viaDocuSign) return "You countersign after the client signs.";
-	return `Countersigned by ${cfg.countersignerName?.trim() || "you"} after all signers.`;
+	if (viaDocuSign) return uiText("messagingDocumentSendOptions.youCountersign");
+	return uiText("messagingDocumentSendOptions.countersignedBy", { name: cfg.countersignerName?.trim() || uiText("messagingDocumentSendOptions.you") });
 }
 function buildSigners(roles, recipient, picks) {
 	if (roles.length < 2) return null;
@@ -1129,12 +1137,15 @@ function signerProblems(roles, recipient, picks, cfg) {
 	for (const role of roles) {
 		const p = role === "signer1" ? recipient : picks[role];
 		if (!p) {
-			out[role] = `${signerRoleLabel(role, cfg)} is required.`;
+			out[role] = uiText("validation.required", { label: signerRoleLabel(role, cfg) });
 			continue;
 		}
-		if (cfg?.requireSignerEmail !== false && !(p.email ?? "").trim()) out[role] = `${p.name} has no email address.`;
+		if (cfg?.requireSignerEmail !== false && !(p.email ?? "").trim()) out[role] = uiText("messagingDocumentSendOptions.signerNoEmail", { name: p.name });
 		const earlier = seen.get(p.id);
-		if (earlier && !cfg?.allowSameContactInRoles && !out[role]) out[role] = `${p.name} is already ${signerRoleLabel(earlier, cfg)}.`;
+		if (earlier && !cfg?.allowSameContactInRoles && !out[role]) out[role] = uiText("messagingDocumentSendOptions.signerAlreadyRole", {
+			name: p.name,
+			role: signerRoleLabel(earlier, cfg)
+		});
 		if (!earlier) seen.set(p.id, role);
 	}
 	return out;
@@ -1157,7 +1168,7 @@ function forwardContext(ctx, types) {
 	} : { dropped };
 }
 function mergeFieldText(f) {
-	const reason = f.detail?.trim() || (f.reason === "NO_CONTEXT" ? "not available for this send" : f.reason === "NO_DATA" ? "no value on record" : f.reason === "UNKNOWN_PATH" ? "unknown field" : "");
+	const reason = f.detail?.trim() || (f.reason === "NO_CONTEXT" || f.reason === "NO_DATA" || f.reason === "UNKNOWN_PATH" ? uiText(`messagingDocumentSendOptions.mergeReason.${f.reason}`) : "");
 	return reason ? `${f.label} (${reason})` : f.label;
 }
 function mergeWarningLines(res, docTitles) {
@@ -1166,11 +1177,11 @@ function mergeWarningLines(res, docTitles) {
 	return docs.map((d) => {
 		const list = d.empty.map(mergeFieldText).join(", ");
 		const title = d.title || docTitles[d.documentId] || "";
-		return `${prefixed && title ? `${title}: ` : ""}These fields will be left empty: ${list}.`;
+		return `${prefixed && title ? `${title}: ` : ""}${uiText("messagingDocumentSendOptions.mergeEmpty", { list })}`;
 	});
 }
 function countersignPlaceLabel(title) {
-	return `Place your countersignature box on ${title}`;
+	return uiText("messagingDocumentSendOptions.placeCountersignOn", { title });
 }
 const DEFAULT_SIGNING_OPTIONS = {
 	expiryDays: 7,
@@ -1225,12 +1236,20 @@ const INFORMATIONAL_PURPOSE_LABELS = {
 	BOTH: "View link and attachment"
 };
 var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
+	get searchFailedMessage() {
+		return this.labels.t("messagingDocumentSendOptions.searchFailedMessage");
+	}
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.http = inject(HttpClient);
 		this.destroyRef = inject(DestroyRef);
 		this.apiBase = inject(FORGEROUTE_CONFIG, { optional: true })?.baseUrl ?? "/api";
 		this.channel = input("email", ...ngDevMode ? [{ debugName: "channel" }] : /* istanbul ignore next */ []);
-		this.label = input("Documents", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.labelInput = input(null, {
+			...ngDevMode ? { debugName: "labelInput" } : /* istanbul ignore next */ {},
+			alias: "label"
+		});
+		this.label = computed(() => this.labelInput() ?? this.labels.t("messagingDocumentSendOptions.label"), ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 		this.showErrors = input(false, ...ngDevMode ? [{ debugName: "showErrors" }] : /* istanbul ignore next */ []);
 		this.valueChange = output();
@@ -1252,11 +1271,14 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
 		this.purposeOptions = computed(() => {
 			const allowed = this.purposes();
 			const base = DOCUMENT_PURPOSE_OPTIONS.filter((o) => allowed.includes(o.value));
-			const opts = base.length ? base : DOCUMENT_PURPOSE_OPTIONS;
-			return this.signerInfo()?.informational ? opts.map((o) => ({
+			const opts = (base.length ? base : DOCUMENT_PURPOSE_OPTIONS).map((o) => ({
 				...o,
-				label: INFORMATIONAL_PURPOSE_LABELS[o.value] ?? o.label
-			})) : opts;
+				label: this.labels.t(`messagingDocumentSendOptions.purpose.${o.value}`)
+			}));
+			return this.signerInfo()?.informational ? opts.map((o) => INFORMATIONAL_PURPOSE_LABELS[o.value] ? {
+				...o,
+				label: this.labels.t(`messagingDocumentSendOptions.purposeInfo.${o.value}`)
+			} : o) : opts;
 		}, ...ngDevMode ? [{ debugName: "purposeOptions" }] : /* istanbul ignore next */ []);
 		this.search$ = new Subject();
 		this.options = signal([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
@@ -1272,10 +1294,15 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
 		this.expiryDays = signal(String(DEFAULT_SIGNING_OPTIONS.expiryDays), ...ngDevMode ? [{ debugName: "expiryDays" }] : /* istanbul ignore next */ []);
 		this.reminderIntervalDays = signal(String(DEFAULT_SIGNING_OPTIONS.reminderIntervalDays), ...ngDevMode ? [{ debugName: "reminderIntervalDays" }] : /* istanbul ignore next */ []);
 		this.maxReminders = signal(String(DEFAULT_SIGNING_OPTIONS.maxReminders), ...ngDevMode ? [{ debugName: "maxReminders" }] : /* istanbul ignore next */ []);
-		this.providerOptions = DOCUMENT_PROVIDER_OPTIONS;
+		this.providerOptions = computed(() => [{
+			value: "NATIVE",
+			label: this.labels.t("messagingDocumentSendOptions.provider.native")
+		}, {
+			value: "DOCUSIGN",
+			label: this.labels.t("messagingDocumentSendOptions.provider.docusign")
+		}], ...ngDevMode ? [{ debugName: "providerOptions" }] : /* istanbul ignore next */ []);
 		this.combo = viewChild(ComboboxComponent, ...ngDevMode ? [{ debugName: "combo" }] : /* istanbul ignore next */ []);
 		this.searchFailed = signal(false, ...ngDevMode ? [{ debugName: "searchFailed" }] : /* istanbul ignore next */ []);
-		this.searchFailedMessage = "Couldn't search your documents. Check your connection and try again.";
 		this.available = computed(() => this.channel() !== "text" || this.purposes().includes("ESIGN"), ...ngDevMode ? [{ debugName: "available" }] : /* istanbul ignore next */ []);
 		this.providerChoiceShown = computed(() => {
 			if (!(this.docuSignConnected() && this.channel() === "email" && this.selected().length === 1 && this.purposes().includes("ESIGN"))) return false;
@@ -1290,23 +1317,32 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
 		this.envelopeProblem = computed(() => {
 			if (!this.envelope() || this.envelopeStatus() !== "ready") return "";
 			const docs = this.selected();
-			if (docs.length === 0) return "This envelope has no documents. Add a document first.";
+			if (docs.length === 0) return this.labels.t("messagingDocumentSendOptions.envelopeNoDocs");
 			const inactive = docs.find((d) => d.status !== void 0 && d.status !== "ACTIVE");
-			return inactive ? `"${inactive.title}" is ${inactive.status.toLowerCase()}, so this envelope can't be sent. Restore it or remove it from the envelope first.` : "";
+			return inactive ? this.labels.t("messagingDocumentSendOptions.envelopeInactive", {
+				title: inactive.title,
+				status: inactive.status.toLowerCase()
+			}) : "";
 		}, ...ngDevMode ? [{ debugName: "envelopeProblem" }] : /* istanbul ignore next */ []);
 		this.envelopeReadMessage = computed(() => {
 			const status = this.envelopeStatus();
-			return status === "loading" ? "Reading the envelope's documents…" : status === "error" ? "The documents of this envelope couldn't be read, so it can't be sent yet." : "";
+			return status === "loading" ? this.labels.t("messagingDocumentSendOptions.envelopeReading") : status === "error" ? this.labels.t("messagingDocumentSendOptions.envelopeReadFailed") : "";
 		}, ...ngDevMode ? [{ debugName: "envelopeReadMessage" }] : /* istanbul ignore next */ []);
 		this.signerReadMessage = computed(() => {
 			const status = this.signerInfo()?.status;
-			return status === "loading" ? "Reading the document's signers…" : status === "error" ? "The signers of this document couldn't be read, so it can't be sent yet." : "";
+			return status === "loading" ? this.labels.t("messagingDocumentSendOptions.signersReading") : status === "error" ? this.labels.t("messagingDocumentSendOptions.signersReadFailed") : "";
 		}, ...ngDevMode ? [{ debugName: "signerReadMessage" }] : /* istanbul ignore next */ []);
 		this.signingSummary = computed(() => {
-			const day = (raw) => `${raw} ${raw.trim() === "1" ? "day" : "days"}`;
+			const day = (raw) => this.labels.t(raw.trim() === "1" ? "messagingDocumentSendOptions.day_one" : "messagingDocumentSendOptions.day_other", { n: raw });
 			const max = this.maxReminders().trim();
-			const reminders = max === "0" ? "no reminders" : `reminders every ${day(this.reminderIntervalDays().trim())}, up to ${max}`;
-			return `Signing options: expires in ${day(this.expiryDays().trim())}, ${reminders}`;
+			const reminders = max === "0" ? this.labels.t("messagingDocumentSendOptions.noReminders") : this.labels.t("messagingDocumentSendOptions.remindersEvery", {
+				interval: day(this.reminderIntervalDays().trim()),
+				max
+			});
+			return this.labels.t("messagingDocumentSendOptions.signingSummary", {
+				expiry: day(this.expiryDays().trim()),
+				reminders
+			});
 		}, ...ngDevMode ? [{ debugName: "signingSummary" }] : /* istanbul ignore next */ []);
 		this.signingExpanded = computed(() => this.signingOpen() || this.signingError() !== "", ...ngDevMode ? [{ debugName: "signingExpanded" }] : /* istanbul ignore next */ []);
 		this.purpose = computed(() => {
@@ -1343,24 +1379,29 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
 				["maxReminders", this.maxReminders()]
 			];
 			for (const [key, raw] of fields) {
-				const { min, max, label } = SIGNING_LIMITS[key];
+				const { min, max } = SIGNING_LIMITS[key];
+				const label = this.labels.t(`messagingDocumentSendOptions.${key}`);
 				const n = wholeNumber(raw);
-				if ((raw ?? "").trim() === "") return `${label} is required.`;
-				if (n === null || n < min || n > max) return `${label} must be a whole number from ${min} to ${max}.`;
+				if ((raw ?? "").trim() === "") return this.labels.t("validation.required", { label });
+				if (n === null || n < min || n > max) return this.labels.t("messagingDocumentSendOptions.mustBeWhole", {
+					label,
+					min,
+					max
+				});
 			}
 			return "";
 		}, ...ngDevMode ? [{ debugName: "signingError" }] : /* istanbul ignore next */ []);
 		this.documentError = computed(() => {
 			const docs = this.selected();
-			if (this.required() && docs.length === 0) return "Select at least one document.";
+			if (this.required() && docs.length === 0) return this.labels.t("messagingDocumentSendOptions.selectAtLeastOne");
 			if (this.purpose() === "ATTACH") {
 				const noFile = docs.find((d) => !d.hasFile);
-				if (noFile) return `"${noFile.title}" has no file to attach — choose e-signature or remove it.`;
+				if (noFile) return this.labels.t("messagingDocumentSendOptions.noFileToAttach", { title: noFile.title });
 			}
 			const env = this.envelopeProblem();
 			if (env) return env;
 			const info = this.signerInfo();
-			if (info?.multiSigner && this.channel() === "text") return `This document has ${info.roles.length} signers. Send it by email.`;
+			if (info?.multiSigner && this.channel() === "text") return this.labels.t("messagingDocumentSendOptions.multiSignerSendByEmail", { count: info.roles.length });
 			return "";
 		}, ...ngDevMode ? [{ debugName: "documentError" }] : /* istanbul ignore next */ []);
 		this.errorMessage = computed(() => this.documentError() || this.envelopeReadMessage() || this.signerReadMessage() || this.signingError(), ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
@@ -1393,7 +1434,7 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
 				return {
 					value: doc.id,
 					label: doc.title,
-					description: doc.fileName ?? "No file uploaded",
+					description: doc.fileName ?? this.labels.t("messagingDocumentSendOptions.noFileUploaded"),
 					data: doc
 				};
 			}));
@@ -1511,7 +1552,7 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
 	static toOption(d) {
 		return {
 			id: String(d.id),
-			title: String(d.title ?? d.fileName ?? "Untitled document"),
+			title: String(d.title ?? d.fileName ?? uiText("messagingDocumentSendOptions.untitled")),
 			fileName: d.fileName ?? null,
 			hasFile: Number(d.fileSize ?? 0) > 0 || !!d.fileName,
 			...d.requiresCountersign === true ? { requiresCountersign: true } : {},
@@ -1652,8 +1693,8 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				label: {
-					classPropertyName: "label",
+				labelInput: {
+					classPropertyName: "labelInput",
 					publicName: "label",
 					isSignal: true,
 					isRequired: false,
@@ -1757,35 +1798,34 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
     <div class="dso" role="group" [attr.aria-label]="label()">
       @if (available()) {
         @if (locked()) {
-          <p class="dso-locked-label" data-testid="locked-documents-label">Included documents</p>
+          <p class="dso-locked-label" data-testid="locked-documents-label">{{ labels.t('messagingDocumentSendOptions.includedDocuments') }}</p>
           @if (envelopeStatus() === 'loading') {
             <div role="status"><ui-hint data-testid="envelope-loading">{{ envelopeReadMessage() }}</ui-hint></div>
           } @else if (envelopeStatus() === 'error') {
             <div class="dso-retry">
               <ui-error errorId="dso-envelope-error" [message]="envelopeReadMessage()" />
-              <ui-button variant="secondary" size="sm" (click)="retryEnvelope()">Retry</ui-button>
+              <ui-button variant="secondary" size="sm" (click)="retryEnvelope()">{{ labels.t('common.retry') }}</ui-button>
             </div>
           }
         } @else {
           <ui-combobox
             [label]="label()"
             [required]="required()"
-            placeholder="Search your documents by name…"
+            [placeholder]="labels.t('messagingDocumentSendOptions.searchYourDocumentsByName')"
             [options]="options()"
             [loading]="loading()"
             [minChars]="2"
-            [noResultsText]="searchFailed() ? 'The search failed' : 'No matching documents'"
-            [hint]="channel() === 'text' ? 'Documents are texted as a link to the signing page.' : ''"
+            [noResultsText]="searchFailed() ? labels.t('messagingDocumentSendOptions.searchFailed') : labels.t('messagingDocumentSendOptions.noMatchingDocuments')"
+            [hint]="channel() === 'text' ? labels.t('messagingDocumentSendOptions.textedAsLink') : ''"
             [error]="searchFailed() ? searchFailedMessage : ''"
             [showErrors]="searchFailed()"
             (searchChange)="search$.next($event)"
             (valueChange)="onPick($event)" />
-          <ui-error errorId="dso-search-error" [message]="searchFailed() ? 'Couldn\\'t search your documents. Check your connection and try again.' : ''" />
         }
 
         @if (selected().length > 0) {
           <!-- One row per document: the chip (or the plain title when the list is fixed) and, beside it, its small Preview button. -->
-          <div class="dso-docs" role="group" aria-label="Chosen documents">
+          <div class="dso-docs" role="group" [attr.aria-label]="labels.t('messagingDocumentSendOptions.chosenDocuments')">
             @for (d of selected(); track d.id) {
               <div class="dso-doc">
                 @if (locked()) {
@@ -1797,8 +1837,8 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
                 @if (documentPreview()) {
                   <ui-button
                     variant="secondary" size="sm"
-                    [ariaLabel]="selected().length === 1 ? undefined : 'Preview ' + d.title"
-                    (click)="preview(d)">{{ selected().length === 1 ? 'Preview Document' : 'Preview' }}</ui-button>
+                    [ariaLabel]="selected().length === 1 ? undefined : labels.t('messagingSendMessagePanel.previewNamed', { name: d.title })"
+                    (click)="preview(d)">{{ selected().length === 1 ? labels.t('messagingDocumentSendOptions.previewDocument') : labels.t('common.preview') }}</ui-button>
                 }
               </div>
             }
@@ -1813,30 +1853,30 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
         } @else if (signerInfo()?.status === 'error') {
           <div class="dso-retry">
             <ui-error errorId="dso-roles-error" [message]="signerReadMessage()" />
-            <ui-button variant="secondary" size="sm" (click)="retryRoles()">Retry</ui-button>
+            <ui-button variant="secondary" size="sm" (click)="retryRoles()">{{ labels.t('common.retry') }}</ui-button>
           </div>
         }
 
         @if (providerChoiceShown()) {
           <ui-radio-group
-            label="Signature provider"
+            [label]="labels.t('messagingDocumentSendOptions.signatureProvider')"
             orientation="horizontal"
-            [options]="providerOptions"
+            [options]="providerOptions()"
             [ngModel]="provider()"
             (ngModelChange)="setProvider($event)" />
         }
 
         @if (provider() === 'DOCUSIGN') {
-          <ui-hint>DocuSign emails the document to the recipient. The Subject and Message above are used for the DocuSign email.</ui-hint>
+          <ui-hint>{{ labels.t('messagingDocumentSendOptions.docusignEmailsTheDocumentTo') }}</ui-hint>
           @if (showCountersign()) {
             <ui-checkbox
-              label="Require my countersignature after client signs"
+              [label]="labels.t('messagingDocumentSendOptions.requireMyCountersignatureAfterClient')"
               [ngModel]="countersignChoice()"
               (ngModelChange)="countersignChoice.set(!!$event)" />
           }
         } @else if (channel() === 'email' && selected().length > 0 && purposeOptions().length > 1) {
           <ui-select
-            label="What should the recipient do?"
+            [label]="labels.t('messagingDocumentSendOptions.whatShouldTheRecipientDo')"
             [options]="purposeOptions()"
             [ngModel]="purpose()"
             (ngModelChange)="setPurpose($event)" />
@@ -1852,21 +1892,21 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
               <ui-button
                 variant="ghost" size="xs"
                 [ariaExpanded]="signingExpanded()"
-                [ariaLabel]="signingExpanded() ? 'Hide signing options' : 'Change signing options'"
-                (click)="toggleSigning()">{{ signingExpanded() ? 'Hide' : 'Change' }}</ui-button>
+                [ariaLabel]="signingExpanded() ? labels.t('messagingDocumentSendOptions.hideSigningOptions') : labels.t('messagingDocumentSendOptions.changeSigningOptions')"
+                (click)="toggleSigning()">{{ signingExpanded() ? labels.t('common.hide') : labels.t('common.change') }}</ui-button>
             </div>
             @if (signingExpanded()) {
               <ui-form-section>
                 <!-- One column: three labelled number fields do not fit side by side in a 480px panel or on a phone. -->
                 <ui-form-row [cols]="1">
                   <ui-text-input
-                    label="Expiry (days)" type="number" [required]="true" [min]="1" [max]="90" [maxDecimals]="0"
+                    [label]="labels.t('messagingDocumentSendOptions.expiryDays')" type="number" [required]="true" [min]="1" [max]="90" [maxDecimals]="0"
                     [showErrors]="showErrors()" [ngModel]="expiryDays()" (ngModelChange)="expiryDays.set(asText($event))" />
                   <ui-text-input
-                    label="Reminder Interval (days)" type="number" [required]="true" [min]="1" [max]="30" [maxDecimals]="0"
+                    [label]="labels.t('messagingDocumentSendOptions.reminderIntervalDays')" type="number" [required]="true" [min]="1" [max]="30" [maxDecimals]="0"
                     [showErrors]="showErrors()" [ngModel]="reminderIntervalDays()" (ngModelChange)="reminderIntervalDays.set(asText($event))" />
                   <ui-text-input
-                    label="Max Reminders" type="number" [required]="true" [min]="0" [max]="10" [maxDecimals]="0"
+                    [label]="labels.t('messagingDocumentSendOptions.maxReminders')" type="number" [required]="true" [min]="0" [max]="10" [maxDecimals]="0"
                     [showErrors]="showErrors()" [ngModel]="maxReminders()" (ngModelChange)="maxReminders.set(asText($event))" />
                 </ui-form-row>
               </ui-form-section>
@@ -1874,7 +1914,7 @@ var DocumentSendOptionsComponent = class DocumentSendOptionsComponent {
           </div>
         }
       } @else {
-        <p class="dso-unavailable" role="note">Documents can only be texted as an e-signature link, which isn't available here.</p>
+        <p class="dso-unavailable" role="note">{{ labels.t('messagingDocumentSendOptions.documentsCanOnlyBeTexted') }}</p>
       }
     </div>
   `,
@@ -2157,35 +2197,34 @@ i0.ɵɵngDeclareClassMetadata({
     <div class="dso" role="group" [attr.aria-label]="label()">
       @if (available()) {
         @if (locked()) {
-          <p class="dso-locked-label" data-testid="locked-documents-label">Included documents</p>
+          <p class="dso-locked-label" data-testid="locked-documents-label">{{ labels.t('messagingDocumentSendOptions.includedDocuments') }}</p>
           @if (envelopeStatus() === 'loading') {
             <div role="status"><ui-hint data-testid="envelope-loading">{{ envelopeReadMessage() }}</ui-hint></div>
           } @else if (envelopeStatus() === 'error') {
             <div class="dso-retry">
               <ui-error errorId="dso-envelope-error" [message]="envelopeReadMessage()" />
-              <ui-button variant="secondary" size="sm" (click)="retryEnvelope()">Retry</ui-button>
+              <ui-button variant="secondary" size="sm" (click)="retryEnvelope()">{{ labels.t('common.retry') }}</ui-button>
             </div>
           }
         } @else {
           <ui-combobox
             [label]="label()"
             [required]="required()"
-            placeholder="Search your documents by name…"
+            [placeholder]="labels.t('messagingDocumentSendOptions.searchYourDocumentsByName')"
             [options]="options()"
             [loading]="loading()"
             [minChars]="2"
-            [noResultsText]="searchFailed() ? 'The search failed' : 'No matching documents'"
-            [hint]="channel() === 'text' ? 'Documents are texted as a link to the signing page.' : ''"
+            [noResultsText]="searchFailed() ? labels.t('messagingDocumentSendOptions.searchFailed') : labels.t('messagingDocumentSendOptions.noMatchingDocuments')"
+            [hint]="channel() === 'text' ? labels.t('messagingDocumentSendOptions.textedAsLink') : ''"
             [error]="searchFailed() ? searchFailedMessage : ''"
             [showErrors]="searchFailed()"
             (searchChange)="search$.next($event)"
             (valueChange)="onPick($event)" />
-          <ui-error errorId="dso-search-error" [message]="searchFailed() ? 'Couldn\\'t search your documents. Check your connection and try again.' : ''" />
         }
 
         @if (selected().length > 0) {
           <!-- One row per document: the chip (or the plain title when the list is fixed) and, beside it, its small Preview button. -->
-          <div class="dso-docs" role="group" aria-label="Chosen documents">
+          <div class="dso-docs" role="group" [attr.aria-label]="labels.t('messagingDocumentSendOptions.chosenDocuments')">
             @for (d of selected(); track d.id) {
               <div class="dso-doc">
                 @if (locked()) {
@@ -2197,8 +2236,8 @@ i0.ɵɵngDeclareClassMetadata({
                 @if (documentPreview()) {
                   <ui-button
                     variant="secondary" size="sm"
-                    [ariaLabel]="selected().length === 1 ? undefined : 'Preview ' + d.title"
-                    (click)="preview(d)">{{ selected().length === 1 ? 'Preview Document' : 'Preview' }}</ui-button>
+                    [ariaLabel]="selected().length === 1 ? undefined : labels.t('messagingSendMessagePanel.previewNamed', { name: d.title })"
+                    (click)="preview(d)">{{ selected().length === 1 ? labels.t('messagingDocumentSendOptions.previewDocument') : labels.t('common.preview') }}</ui-button>
                 }
               </div>
             }
@@ -2213,30 +2252,30 @@ i0.ɵɵngDeclareClassMetadata({
         } @else if (signerInfo()?.status === 'error') {
           <div class="dso-retry">
             <ui-error errorId="dso-roles-error" [message]="signerReadMessage()" />
-            <ui-button variant="secondary" size="sm" (click)="retryRoles()">Retry</ui-button>
+            <ui-button variant="secondary" size="sm" (click)="retryRoles()">{{ labels.t('common.retry') }}</ui-button>
           </div>
         }
 
         @if (providerChoiceShown()) {
           <ui-radio-group
-            label="Signature provider"
+            [label]="labels.t('messagingDocumentSendOptions.signatureProvider')"
             orientation="horizontal"
-            [options]="providerOptions"
+            [options]="providerOptions()"
             [ngModel]="provider()"
             (ngModelChange)="setProvider($event)" />
         }
 
         @if (provider() === 'DOCUSIGN') {
-          <ui-hint>DocuSign emails the document to the recipient. The Subject and Message above are used for the DocuSign email.</ui-hint>
+          <ui-hint>{{ labels.t('messagingDocumentSendOptions.docusignEmailsTheDocumentTo') }}</ui-hint>
           @if (showCountersign()) {
             <ui-checkbox
-              label="Require my countersignature after client signs"
+              [label]="labels.t('messagingDocumentSendOptions.requireMyCountersignatureAfterClient')"
               [ngModel]="countersignChoice()"
               (ngModelChange)="countersignChoice.set(!!$event)" />
           }
         } @else if (channel() === 'email' && selected().length > 0 && purposeOptions().length > 1) {
           <ui-select
-            label="What should the recipient do?"
+            [label]="labels.t('messagingDocumentSendOptions.whatShouldTheRecipientDo')"
             [options]="purposeOptions()"
             [ngModel]="purpose()"
             (ngModelChange)="setPurpose($event)" />
@@ -2252,21 +2291,21 @@ i0.ɵɵngDeclareClassMetadata({
               <ui-button
                 variant="ghost" size="xs"
                 [ariaExpanded]="signingExpanded()"
-                [ariaLabel]="signingExpanded() ? 'Hide signing options' : 'Change signing options'"
-                (click)="toggleSigning()">{{ signingExpanded() ? 'Hide' : 'Change' }}</ui-button>
+                [ariaLabel]="signingExpanded() ? labels.t('messagingDocumentSendOptions.hideSigningOptions') : labels.t('messagingDocumentSendOptions.changeSigningOptions')"
+                (click)="toggleSigning()">{{ signingExpanded() ? labels.t('common.hide') : labels.t('common.change') }}</ui-button>
             </div>
             @if (signingExpanded()) {
               <ui-form-section>
                 <!-- One column: three labelled number fields do not fit side by side in a 480px panel or on a phone. -->
                 <ui-form-row [cols]="1">
                   <ui-text-input
-                    label="Expiry (days)" type="number" [required]="true" [min]="1" [max]="90" [maxDecimals]="0"
+                    [label]="labels.t('messagingDocumentSendOptions.expiryDays')" type="number" [required]="true" [min]="1" [max]="90" [maxDecimals]="0"
                     [showErrors]="showErrors()" [ngModel]="expiryDays()" (ngModelChange)="expiryDays.set(asText($event))" />
                   <ui-text-input
-                    label="Reminder Interval (days)" type="number" [required]="true" [min]="1" [max]="30" [maxDecimals]="0"
+                    [label]="labels.t('messagingDocumentSendOptions.reminderIntervalDays')" type="number" [required]="true" [min]="1" [max]="30" [maxDecimals]="0"
                     [showErrors]="showErrors()" [ngModel]="reminderIntervalDays()" (ngModelChange)="reminderIntervalDays.set(asText($event))" />
                   <ui-text-input
-                    label="Max Reminders" type="number" [required]="true" [min]="0" [max]="10" [maxDecimals]="0"
+                    [label]="labels.t('messagingDocumentSendOptions.maxReminders')" type="number" [required]="true" [min]="0" [max]="10" [maxDecimals]="0"
                     [showErrors]="showErrors()" [ngModel]="maxReminders()" (ngModelChange)="maxReminders.set(asText($event))" />
                 </ui-form-row>
               </ui-form-section>
@@ -2274,7 +2313,7 @@ i0.ɵɵngDeclareClassMetadata({
           </div>
         }
       } @else {
-        <p class="dso-unavailable" role="note">Documents can only be texted as an e-signature link, which isn't available here.</p>
+        <p class="dso-unavailable" role="note">{{ labels.t('messagingDocumentSendOptions.documentsCanOnlyBeTexted') }}</p>
       }
     </div>
   `,
@@ -2291,7 +2330,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		label: [{
+		labelInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -2403,6 +2442,7 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var DocumentSignersComponent = class DocumentSignersComponent {
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.info = input(null, ...ngDevMode ? [{ debugName: "info" }] : /* istanbul ignore next */ []);
 		this.config = input(null, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
 		this.recipient = input({
@@ -2443,7 +2483,7 @@ var DocumentSignersComponent = class DocumentSignersComponent {
 		return countersignPlaceLabel(title);
 	}
 	placeText(title) {
-		return this.placeDocs().length > 1 ? countersignPlaceLabel(title) : "Place your countersignature box";
+		return this.placeDocs().length > 1 ? countersignPlaceLabel(title) : this.labels.t("messagingDocumentSendOptions.placeCountersign");
 	}
 	label(role) {
 		return signerRoleLabel(role, this.config());
@@ -2524,7 +2564,7 @@ var DocumentSignersComponent = class DocumentSignersComponent {
 			ngImport: i0,
 			template: `
     @if (rowsShown()) {
-      <ui-form-section label="Signers" data-testid="signers-section">
+      <ui-form-section [label]="labels.t('messagingDocumentSendOptions.signers')" data-testid="signers-section">
         @for (role of info()!.roles; track role) {
           @if (role === 'signer1') {
             <div class="ds-row" [attr.data-testid]="'signer-row-' + role">
@@ -2539,7 +2579,7 @@ var DocumentSignersComponent = class DocumentSignersComponent {
                 [required]="true"
                 [showErrors]="showErrors()"
                 [errorId]="'ds-error-' + role"
-                placeholder="Search for a contact…"
+                [placeholder]="labels.t('messagingDocumentSendOptions.searchForAContact')"
                 (contactSelected)="pick(role, $event)" />
               <!-- The picker's own "<Role> is required." (shown after blur or with showErrors), else the contact problem (no email / twice). -->
               <div class="ds-error" [attr.id]="'ds-error-' + role">
@@ -2548,7 +2588,7 @@ var DocumentSignersComponent = class DocumentSignersComponent {
             </div>
           }
         }
-        <ui-hint data-testid="signers-order-hint">Signers are emailed one after another, in this order; each receives the link after the previous one signs.</ui-hint>
+        <ui-hint data-testid="signers-order-hint">{{ labels.t('messagingDocumentSendOptions.signersAreEmailedOneAfter') }}</ui-hint>
       </ui-form-section>
     }
     @if (line()) {
@@ -2673,7 +2713,7 @@ i0.ɵɵngDeclareClassMetadata({
 			}],
 			template: `
     @if (rowsShown()) {
-      <ui-form-section label="Signers" data-testid="signers-section">
+      <ui-form-section [label]="labels.t('messagingDocumentSendOptions.signers')" data-testid="signers-section">
         @for (role of info()!.roles; track role) {
           @if (role === 'signer1') {
             <div class="ds-row" [attr.data-testid]="'signer-row-' + role">
@@ -2688,7 +2728,7 @@ i0.ɵɵngDeclareClassMetadata({
                 [required]="true"
                 [showErrors]="showErrors()"
                 [errorId]="'ds-error-' + role"
-                placeholder="Search for a contact…"
+                [placeholder]="labels.t('messagingDocumentSendOptions.searchForAContact')"
                 (contactSelected)="pick(role, $event)" />
               <!-- The picker's own "<Role> is required." (shown after blur or with showErrors), else the contact problem (no email / twice). -->
               <div class="ds-error" [attr.id]="'ds-error-' + role">
@@ -2697,7 +2737,7 @@ i0.ɵɵngDeclareClassMetadata({
             </div>
           }
         }
-        <ui-hint data-testid="signers-order-hint">Signers are emailed one after another, in this order; each receives the link after the previous one signs.</ui-hint>
+        <ui-hint data-testid="signers-order-hint">{{ labels.t('messagingDocumentSendOptions.signersAreEmailedOneAfter') }}</ui-hint>
       </ui-form-section>
     }
     @if (line()) {
@@ -2942,6 +2982,10 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const SPANISH_VIDEO_LINK_WORDS = {
+	watchVideo: "Ver video",
+	watchNamed: "Ver \"{{ title }}\": {{ link }}"
+};
 function buildVideoLink(baseLink, options = {}) {
 	const params = [];
 	if (options.autoplay) params.push("autoplay=1");
@@ -2962,63 +3006,110 @@ function videoLinkWithDefaults(baseLink, defaults = {}, contactId = "") {
 		hideReactions: !!defaults.hideReactions
 	});
 }
+function watchVideoWordList() {
+	return Array.from(/* @__PURE__ */ new Set([
+		uiText("messagingVideoLink.watchVideo"),
+		"Watch video",
+		SPANISH_VIDEO_LINK_WORDS.watchVideo
+	]));
+}
+function watchVideoWords() {
+	return "(?:" + watchVideoWordList().map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") + ")";
+}
 function stripVideoLink(text) {
-	return text.replace(/\n\n🎬 Watch video: [^\n]*/g, "").replace(/\n🎬 Watch video: [^\n]*/g, "").replace(/🎬 Watch video: [^\n]*/g, "").trimEnd();
+	return text.replace(new RegExp(`\\n\\n🎬 ${watchVideoWords()}: [^\\n]*`, "g"), "").replace(new RegExp(`\\n🎬 ${watchVideoWords()}: [^\\n]*`, "g"), "").replace(new RegExp(`🎬 ${watchVideoWords()}: [^\\n]*`, "g"), "").trimEnd();
 }
 function appendVideoLink(text, link) {
 	const base = stripVideoLink(text);
-	return base ? `${base}\n\n🎬 Watch video: ${link}` : `🎬 Watch video: ${link}`;
+	const line = `🎬 ${uiText("messagingVideoLink.watchVideo")}: ${link}`;
+	return base ? `${base}\n\n${line}` : line;
 }
 function videoMessageLine(title, link) {
-	return `Watch "${title}": ${link}`;
+	return uiText("messagingVideoLink.watchNamed", {
+		title,
+		link
+	});
+}
+const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const fillTemplate = (tpl, title, link) => tpl.replace(/\{\{\s*title\s*\}\}/g, () => title).replace(/\{\{\s*link\s*\}\}/g, () => link);
+function namedTemplates() {
+	return Array.from(/* @__PURE__ */ new Set([
+		uiText("messagingVideoLink.watchNamed"),
+		UI_DEFAULT_LABELS["messagingVideoLink.watchNamed"],
+		SPANISH_VIDEO_LINK_WORDS.watchNamed
+	]));
+}
+function videoLineForms(line) {
+	const forms = [line];
+	for (const tpl of namedTemplates()) {
+		const parts = tpl.split(/(\{\{\s*(?:title|link)\s*\}\})/);
+		const order = [];
+		const hit = new RegExp("^" + parts.map((part) => {
+			const m = /^\{\{\s*(title|link)\s*\}\}$/.exec(part);
+			if (!m) return escapeRe(part);
+			order.push(m[1]);
+			return m[1] === "title" ? "(.*?)" : "(.+)";
+		}).join("") + "$").exec(line);
+		if (!hit) continue;
+		const found = {};
+		order.forEach((name, i) => {
+			found[name] = hit[i + 1];
+		});
+		for (const t of namedTemplates()) forms.push(fillTemplate(t, found["title"] ?? "", found["link"] ?? ""));
+		forms.push(...watchVideoWordList().map((w) => `🎬 ${w}: ${found["link"] ?? ""}`));
+		break;
+	}
+	const emoji = new RegExp(`^🎬 ${watchVideoWords()}: (.+)$`).exec(line);
+	if (emoji) forms.push(...watchVideoWordList().map((w) => `🎬 ${w}: ${emoji[1]}`));
+	return Array.from(new Set(forms));
 }
 function applyVideoLine(body, prev, next) {
 	if (!prev) {
 		if (!next) return body;
 		return body.trim() ? `${body}\n\n${next}` : next;
 	}
-	const at = body.indexOf(prev);
-	if (at < 0) return body;
-	if (next) return body.slice(0, at) + next + body.slice(at + prev.length);
+	const found = videoLineForms(prev).find((form) => body.includes(form));
+	if (found === void 0) return body;
+	const at = body.indexOf(found);
+	if (next) return body.slice(0, at) + next + body.slice(at + found.length);
 	const before = body.slice(0, at);
-	const after = body.slice(at + prev.length);
+	const after = body.slice(at + found.length);
 	const trimmedBefore = before.replace(/\n{1,2}$/, "");
 	return (trimmedBefore + after).trim() === "" ? "" : trimmedBefore + after;
 }
-const VIDEO_PLAYBACK_OPTIONS = [{
-	value: "click",
-	label: "Click to Play"
-}, {
-	value: "autoplay",
-	label: "Autoplay"
-}];
-const VIDEO_CTA_OPTIONS = [
-	{
-		value: "",
-		label: "None (use video default)"
-	},
-	{
-		value: "schedule",
-		label: "Schedule a Call"
-	},
-	{
-		value: "contact",
-		label: "Contact Me"
-	},
-	{
-		value: "custom",
-		label: "Custom"
-	}
-];
 var VideoLinkSettingsComponent = class VideoLinkSettingsComponent {
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.video = input(null, ...ngDevMode ? [{ debugName: "video" }] : /* istanbul ignore next */ []);
 		this.defaults = input({}, ...ngDevMode ? [{ debugName: "defaults" }] : /* istanbul ignore next */ []);
 		this.contactId = input("", ...ngDevMode ? [{ debugName: "contactId" }] : /* istanbul ignore next */ []);
 		this.linkChange = output();
 		this.removed = output();
-		this.playbackOptions = VIDEO_PLAYBACK_OPTIONS;
-		this.ctaOptions = VIDEO_CTA_OPTIONS;
+		this.playbackOptions = computed(() => [{
+			value: "click",
+			label: this.labels.t("messagingSendMessagePanel.playback.click")
+		}, {
+			value: "autoplay",
+			label: this.labels.t("messagingSendMessagePanel.playback.autoplay")
+		}], ...ngDevMode ? [{ debugName: "playbackOptions" }] : /* istanbul ignore next */ []);
+		this.ctaOptions = computed(() => [
+			{
+				value: "",
+				label: this.labels.t("messagingSendMessagePanel.cta.none")
+			},
+			{
+				value: "schedule",
+				label: this.labels.t("messagingSendMessagePanel.cta.schedule")
+			},
+			{
+				value: "contact",
+				label: this.labels.t("messagingSendMessagePanel.cta.contact")
+			},
+			{
+				value: "custom",
+				label: this.labels.t("messagingSendMessagePanel.cta.custom")
+			}
+		], ...ngDevMode ? [{ debugName: "ctaOptions" }] : /* istanbul ignore next */ []);
 		this.autoplay = signal("click", ...ngDevMode ? [{ debugName: "autoplay" }] : /* istanbul ignore next */ []);
 		this.ctaType = signal("", ...ngDevMode ? [{ debugName: "ctaType" }] : /* istanbul ignore next */ []);
 		this.ctaUrl = signal("", ...ngDevMode ? [{ debugName: "ctaUrl" }] : /* istanbul ignore next */ []);
@@ -3127,40 +3218,40 @@ var VideoLinkSettingsComponent = class VideoLinkSettingsComponent {
       <ui-form-section class="vls">
         <div class="vls-bar">
           @if (v.shareLink) {
-            <ui-hint><a class="vls-preview" [href]="v.shareLink" target="_blank" rel="noopener" aria-label="Watch Preview (opens in a new tab)">Watch Preview →</a></ui-hint>
+            <ui-hint><a class="vls-preview" [href]="v.shareLink" target="_blank" rel="noopener" [attr.aria-label]="labels.t('messagingVideoLinkSettings.watchPreviewOpensInA')">{{ labels.t('messagingVideoLinkSettings.watchPreview') }}</a></ui-hint>
           }
-          <ui-button variant="ghost" size="xs" [ariaExpanded]="settingsOpen()" (click)="toggleSettings()">Video settings</ui-button>
-          <ui-button variant="secondary" size="sm" (click)="removed.emit()">Remove Video</ui-button>
+          <ui-button variant="ghost" size="xs" [ariaExpanded]="settingsOpen()" (click)="toggleSettings()">{{ labels.t('messagingVideoLinkSettings.videoSettings') }}</ui-button>
+          <ui-button variant="secondary" size="sm" (click)="removed.emit()">{{ labels.t('messagingVideoLinkSettings.removeVideo') }}</ui-button>
         </div>
         <!-- Collapsed by default: the defaults from Communication settings are already applied. -->
         @if (settingsOpen()) {
           <ui-radio-group
-            label="Playback"
+            [label]="labels.t('messagingVideoLinkSettings.playback')"
             orientation="horizontal"
-            [options]="playbackOptions"
+            [options]="playbackOptions()"
             [ngModel]="autoplay()"
             (ngModelChange)="setAutoplay($event)" />
           <ui-select
-            label="Call-to-Action"
-            [options]="ctaOptions"
+            [label]="labels.t('messagingVideoLinkSettings.callToAction')"
+            [options]="ctaOptions()"
             [ngModel]="ctaType()"
             (ngModelChange)="setCtaType($event)" />
           @if (ctaType()) {
             <ui-text-input
-              label="Call-to-action URL"
+              [label]="labels.t('messagingVideoLinkSettings.callToActionUrl')"
               type="url"
               placeholder="https://..."
               [maxlength]="500"
               [ngModel]="ctaUrl()"
               (ngModelChange)="setCtaUrl($event)" />
             <ui-text-input
-              label="Call-to-action label"
-              placeholder="Button label (e.g. Book a Call)"
+              [label]="labels.t('messagingVideoLinkSettings.callToActionLabel')"
+              [placeholder]="labels.t('messagingVideoLinkSettings.buttonLabelEGBook')"
               [maxlength]="100"
               [ngModel]="ctaLabel()"
               (ngModelChange)="setCtaLabel($event)" />
           }
-          <ui-checkbox label="Hide reactions" [ngModel]="hideReactions()" (ngModelChange)="setHideReactions($event)" />
+          <ui-checkbox [label]="labels.t('messagingVideoLinkSettings.hideReactions')" [ngModel]="hideReactions()" (ngModelChange)="setHideReactions($event)" />
         }
       </ui-form-section>
     }
@@ -3381,40 +3472,40 @@ i0.ɵɵngDeclareClassMetadata({
       <ui-form-section class="vls">
         <div class="vls-bar">
           @if (v.shareLink) {
-            <ui-hint><a class="vls-preview" [href]="v.shareLink" target="_blank" rel="noopener" aria-label="Watch Preview (opens in a new tab)">Watch Preview →</a></ui-hint>
+            <ui-hint><a class="vls-preview" [href]="v.shareLink" target="_blank" rel="noopener" [attr.aria-label]="labels.t('messagingVideoLinkSettings.watchPreviewOpensInA')">{{ labels.t('messagingVideoLinkSettings.watchPreview') }}</a></ui-hint>
           }
-          <ui-button variant="ghost" size="xs" [ariaExpanded]="settingsOpen()" (click)="toggleSettings()">Video settings</ui-button>
-          <ui-button variant="secondary" size="sm" (click)="removed.emit()">Remove Video</ui-button>
+          <ui-button variant="ghost" size="xs" [ariaExpanded]="settingsOpen()" (click)="toggleSettings()">{{ labels.t('messagingVideoLinkSettings.videoSettings') }}</ui-button>
+          <ui-button variant="secondary" size="sm" (click)="removed.emit()">{{ labels.t('messagingVideoLinkSettings.removeVideo') }}</ui-button>
         </div>
         <!-- Collapsed by default: the defaults from Communication settings are already applied. -->
         @if (settingsOpen()) {
           <ui-radio-group
-            label="Playback"
+            [label]="labels.t('messagingVideoLinkSettings.playback')"
             orientation="horizontal"
-            [options]="playbackOptions"
+            [options]="playbackOptions()"
             [ngModel]="autoplay()"
             (ngModelChange)="setAutoplay($event)" />
           <ui-select
-            label="Call-to-Action"
-            [options]="ctaOptions"
+            [label]="labels.t('messagingVideoLinkSettings.callToAction')"
+            [options]="ctaOptions()"
             [ngModel]="ctaType()"
             (ngModelChange)="setCtaType($event)" />
           @if (ctaType()) {
             <ui-text-input
-              label="Call-to-action URL"
+              [label]="labels.t('messagingVideoLinkSettings.callToActionUrl')"
               type="url"
               placeholder="https://..."
               [maxlength]="500"
               [ngModel]="ctaUrl()"
               (ngModelChange)="setCtaUrl($event)" />
             <ui-text-input
-              label="Call-to-action label"
-              placeholder="Button label (e.g. Book a Call)"
+              [label]="labels.t('messagingVideoLinkSettings.callToActionLabel')"
+              [placeholder]="labels.t('messagingVideoLinkSettings.buttonLabelEGBook')"
               [maxlength]="100"
               [ngModel]="ctaLabel()"
               (ngModelChange)="setCtaLabel($event)" />
           }
-          <ui-checkbox label="Hide reactions" [ngModel]="hideReactions()" (ngModelChange)="setHideReactions($event)" />
+          <ui-checkbox [label]="labels.t('messagingVideoLinkSettings.hideReactions')" [ngModel]="hideReactions()" (ngModelChange)="setHideReactions($event)" />
         }
       </ui-form-section>
     }
@@ -3478,10 +3569,16 @@ function buildDocumentsPayload(v, delivery, purpose = v.purpose, extras = {}) {
 const DEFAULT_DOCUMENT_SUBJECT = "Document Signature Required";
 function suggestDocumentSubject(titles, purpose, informational = false) {
 	if (titles.length === 0) return "";
-	if (informational && purpose !== "ATTACH") return titles.length === 1 ? `Document shared: ${titles[0]}` : `${titles.length} documents shared: ${titles[0]}…`;
-	const attachOnly = purpose === "ATTACH";
-	if (titles.length === 1) return `${attachOnly ? "Document attached" : "Signature required"}: ${titles[0]}`;
-	return `${titles.length} documents ${attachOnly ? "attached" : "to sign"}: ${titles[0]}…`;
+	if (informational && purpose !== "ATTACH") return titles.length === 1 ? uiText("messagingSendMessagePanel.subjectShared_one", { title: titles[0] }) : uiText("messagingSendMessagePanel.subjectShared_other", {
+		count: titles.length,
+		title: titles[0]
+	});
+	const base = purpose === "ATTACH" ? "messagingSendMessagePanel.subjectAttached" : "messagingSendMessagePanel.subjectSign";
+	if (titles.length === 1) return uiText(`${base}_one`, { title: titles[0] });
+	return uiText(`${base}_other`, {
+		count: titles.length,
+		title: titles[0]
+	});
 }
 const MAX_CC = 10;
 function parseCcList(raw) {
@@ -3498,9 +3595,9 @@ function parseCcList(raw) {
 const CC_EMAIL_RE = /^[^\s@,;<>"]+@[^\s@,;<>"]+\.[^\s@,;<>"]+$/;
 function ccError(list) {
 	const bad = list.find((a) => a.length > 254 || !CC_EMAIL_RE.test(a));
-	if (bad) return `"${bad}" isn't a valid CC email address.`;
-	if (list.length > 10) return `You can copy at most 10 people.`;
-	if (list.join(",").length > 1e3) return "The CC list is too long.";
+	if (bad) return uiText("messagingSendMessagePanel.ccInvalid", { address: bad });
+	if (list.length > 10) return uiText("messagingSendMessagePanel.ccTooMany", { max: 10 });
+	if (list.join(",").length > 1e3) return uiText("messagingSendMessagePanel.ccTooLong");
 	return "";
 }
 function signingBodyFields(d) {
@@ -3555,13 +3652,14 @@ function nonBlankValues(...sources) {
 	return out;
 }
 function dateVars(now = /* @__PURE__ */ new Date()) {
-	const long = now.toLocaleDateString("en-US", {
+	const locale = uiLocale();
+	const long = now.toLocaleDateString(locale, {
 		month: "long",
 		day: "numeric",
 		year: "numeric"
 	});
 	return {
-		month: now.toLocaleString("en-US", { month: "long" }),
+		month: now.toLocaleString(locale, { month: "long" }),
 		year: now.getFullYear().toString(),
 		date: long,
 		today: long
@@ -3593,6 +3691,9 @@ var SendEmailComponent = class SendEmailComponent {
 	get deferredKeys() {
 		return this.bulk() ? PERSONAL_TAG_KEYS : [];
 	}
+	get EMAIL_DISABLED_MESSAGE() {
+		return this.labels.t("messagingSendMessagePanel.emailDisabled");
+	}
 	ngOnInit() {
 		this.includeReceipt = this.receiptDefault();
 		this.http.get(`${this.apiBase}/service-areas?size=100`).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({ next: (resp) => {
@@ -3601,6 +3702,7 @@ var SendEmailComponent = class SendEmailComponent {
 		} });
 	}
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.destroyRef = inject(DestroyRef);
 		this.http = inject(HttpClient);
 		this.apiBase = inject(FORGEROUTE_CONFIG, { optional: true })?.baseUrl ?? "/api";
@@ -3617,7 +3719,11 @@ var SendEmailComponent = class SendEmailComponent {
 		this.context = input({}, ...ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []);
 		this.sendFn = input(null, ...ngDevMode ? [{ debugName: "sendFn" }] : /* istanbul ignore next */ []);
 		this.showReceiptOption = input(false, ...ngDevMode ? [{ debugName: "showReceiptOption" }] : /* istanbul ignore next */ []);
-		this.receiptLabel = input("Include payment receipt", ...ngDevMode ? [{ debugName: "receiptLabel" }] : /* istanbul ignore next */ []);
+		this.receiptLabelInput = input(null, {
+			...ngDevMode ? { debugName: "receiptLabelInput" } : /* istanbul ignore next */ {},
+			alias: "receiptLabel"
+		});
+		this.receiptLabel = computed(() => this.receiptLabelInput() ?? this.labels.t("messagingSendMessagePanel.receiptLabel"), ...ngDevMode ? [{ debugName: "receiptLabel" }] : /* istanbul ignore next */ []);
 		this.receiptDefault = input(false, ...ngDevMode ? [{ debugName: "receiptDefault" }] : /* istanbul ignore next */ []);
 		this.documents = input(false, ...ngDevMode ? [{ debugName: "documents" }] : /* istanbul ignore next */ []);
 		this.documentPurposes = input([
@@ -3662,7 +3768,6 @@ var SendEmailComponent = class SendEmailComponent {
 		this.validChange = output();
 		this.rejected = output();
 		this.mapFieldsClick = output();
-		this.EMAIL_DISABLED_MESSAGE = "Email sending is disabled, so this can't be sent. Enable it in Communication Settings.";
 		this.mode = "compose";
 		this.subject = "";
 		this.body = "";
@@ -3685,13 +3790,13 @@ var SendEmailComponent = class SendEmailComponent {
 		this.signersInvalid = false;
 		this.mergeWarnings = [];
 		this.savingEmail = signal(false, ...ngDevMode ? [{ debugName: "savingEmail" }] : /* istanbul ignore next */ []);
-		this.modeTabs = [{
+		this.modeTabs = computed(() => [{
 			key: "compose",
-			label: "Create Message"
+			label: this.labels.t("messagingSendMessagePanel.tabCompose")
 		}, {
 			key: "template",
-			label: "Use Existing Template"
-		}];
+			label: this.labels.t("messagingSendMessagePanel.tabTemplate")
+		}], ...ngDevMode ? [{ debugName: "modeTabs" }] : /* istanbul ignore next */ []);
 		this.marketVars = {};
 		this._appliedDefaults = {
 			subject: "",
@@ -3805,7 +3910,7 @@ var SendEmailComponent = class SendEmailComponent {
 		});
 		if (this.hasDocuments && this.signerInfo?.multiDocumentNote) out.push({
 			key: "multi",
-			text: "Documents with several signers are sent one at a time.",
+			text: this.labels.t("messagingSendMessagePanel.multiSignerOneAtATime"),
 			testId: "documents-multi-signer-note"
 		});
 		if (this.hasDocuments) this.mergeWarnings.forEach((text, i) => out.push({
@@ -3829,8 +3934,8 @@ var SendEmailComponent = class SendEmailComponent {
 		}
 		this.syncSuggestedSubject();
 		if (this.hasDocuments) {
-			const removed = [this.attachments.length > 0 ? "your attachments" : "", this.showSchedule ? "the schedule" : ""].filter(Boolean);
-			if (removed.length > 0) this.docsRemovedNote = `We removed ${removed.join(" and ")} because documents are sent as a request.`;
+			const removed = [this.attachments.length > 0 ? this.labels.t("messagingSendMessagePanel.removedAttachments") : "", this.showSchedule ? this.labels.t("messagingSendMessagePanel.removedSchedule") : ""].filter(Boolean);
+			if (removed.length > 0) this.docsRemovedNote = this.labels.t("messagingSendMessagePanel.removedBecauseRequest", { items: removed.join(` ${this.labels.t("messagingSendMessagePanel.listAnd")} `) });
 			this.attachments = [];
 			this.showSchedule = false;
 			this.scheduledAt = "";
@@ -3842,10 +3947,16 @@ var SendEmailComponent = class SendEmailComponent {
 		this.notifyValid();
 	}
 	get bodyLengthError() {
-		return this.resolvedBody.length > this.MAX_BODY ? `Message is too long (${this.resolvedBody.length.toLocaleString("en-US")} of ${this.MAX_BODY.toLocaleString("en-US")} characters).` : "";
+		return this.resolvedBody.length > this.MAX_BODY ? this.labels.t("messagingSendMessagePanel.bodyTooLong", {
+			actual: this.labels.formatNumber(this.resolvedBody.length),
+			max: this.labels.formatNumber(this.MAX_BODY)
+		}) : "";
 	}
 	get subjectLengthError() {
-		return this.resolvedSubject.length > this.MAX_SUBJECT ? `Subject is too long (${this.resolvedSubject.length.toLocaleString("en-US")} of ${this.MAX_SUBJECT} characters).` : "";
+		return this.resolvedSubject.length > this.MAX_SUBJECT ? this.labels.t("messagingSendMessagePanel.subjectTooLong", {
+			actual: this.labels.formatNumber(this.resolvedSubject.length),
+			max: this.MAX_SUBJECT
+		}) : "";
 	}
 	get sendLengthError() {
 		return this.subjectLengthError || (this.mode === "compose" ? "" : this.bodyLengthError);
@@ -3907,7 +4018,7 @@ var SendEmailComponent = class SendEmailComponent {
 	}
 	get composeTagError() {
 		if (this.mode !== "compose") return "";
-		return hasLeftoverTags(this.resolvedSubject, this.deferredKeys) || hasLeftoverTags(this.resolvedBody, this.deferredKeys) ? "Replace every {{…}} field with text before sending." : "";
+		return hasLeftoverTags(this.resolvedSubject, this.deferredKeys) || hasLeftoverTags(this.resolvedBody, this.deferredKeys) ? this.labels.t("messagingSendMessagePanel.leftoverTags") : "";
 	}
 	get unresolvedVars() {
 		return this.missingVars.filter((k) => !(this.pendingInputs[k] ?? "").trim());
@@ -4007,7 +4118,7 @@ var SendEmailComponent = class SendEmailComponent {
 			const reader = new FileReader();
 			reader.onload = () => {
 				const base64 = reader.result.split(",")[1];
-				const sizeLabel = file.size < 1048576 ? `${Math.round(file.size / 1024)} KB` : `${(file.size / 1048576).toFixed(1)} MB`;
+				const sizeLabel = formatAttachmentSize(file.size);
 				this.attachments = [...this.attachments, {
 					filename: file.name,
 					content: base64,
@@ -4026,7 +4137,7 @@ var SendEmailComponent = class SendEmailComponent {
 	insertVideo(v) {
 		if (!v.shareLink) return;
 		const sep = this.body.trim() ? "\n\n" : "";
-		this.body = this.body + sep + `Watch "${v.title}": ${v.shareLink}`;
+		this.body = this.body + sep + videoMessageLine(v.title, v.shareLink);
 		this.notifyValid();
 	}
 	docuSignBody(docs, payload) {
@@ -4071,7 +4182,7 @@ var SendEmailComponent = class SendEmailComponent {
 	submit() {
 		if (!this.canSend || this.loading || !this.bulk() && !this.contactEmail()) return;
 		if (this.bulk() && !this.sendFn()) {
-			this.toast.error(BULK_NO_SEND_MESSAGE);
+			this.toast.error(this.labels.t("messagingSendMessagePanel.bulkNoSend"));
 			return;
 		}
 		if (this.mode === "template") this.applyPendingVars();
@@ -4148,7 +4259,7 @@ var SendEmailComponent = class SendEmailComponent {
 		});
 		const onError = (err) => {
 			if (this.bulk() && (destroyed || !this.loading)) return;
-			this.toast.error(custom || docs ? getErrorMessage(err, "email", "send") : serverMessage(err) || "Failed to send email");
+			this.toast.error(custom || docs ? getErrorMessage(err, this.labels.t("messagingSendMessagePanel.ctxEmail"), "send") : serverMessage(err) || this.labels.t("messagingSendMessagePanel.failedSendEmail"));
 			this.loading = false;
 			this.cdr.markForCheck();
 			if (this.bulk()) this.bulkSending.emit(null);
@@ -4164,7 +4275,7 @@ var SendEmailComponent = class SendEmailComponent {
 					provider: docs.provider,
 					informational: docs.signerInfo?.informational === true
 				}) : void 0;
-				this.toast.show(sentText ?? (docs?.provider === "DOCUSIGN" ? `"${docs.documents[0].title}" sent via DocuSign` : docs && this.documentEnvelope() ? `Envelope "${this.documentEnvelope().name}" sent` : this.showSchedule ? "Email scheduled" : "Email sent"));
+				this.toast.show(sentText ?? (docs?.provider === "DOCUSIGN" ? this.labels.t("messagingSendMessagePanel.sentViaDocusign", { title: docs.documents[0].title }) : docs && this.documentEnvelope() ? this.labels.t("messagingSendMessagePanel.envelopeSent", { name: this.documentEnvelope().name }) : this.showSchedule ? this.labels.t("messagingSendMessagePanel.emailScheduled") : this.labels.t("messagingSendMessagePanel.emailSent")));
 				this.loading = false;
 				this.attachments = [];
 				this.includeReceipt = this.receiptDefault();
@@ -4269,8 +4380,8 @@ var SendEmailComponent = class SendEmailComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				receiptLabel: {
-					classPropertyName: "receiptLabel",
+				receiptLabelInput: {
+					classPropertyName: "receiptLabelInput",
 					publicName: "receiptLabel",
 					isSignal: true,
 					isRequired: false,
@@ -4445,25 +4556,21 @@ var SendEmailComponent = class SendEmailComponent {
     <!-- Missing email guard -->
     @if (!bulk() && !contactEmail()) {
       <div class="sm-missing-banner">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-        No email address on file for this contact.
-      </div>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>{{ labels.t('messagingSendMessagePanel.noEmailAddressOnFile') }}</div>
       <ui-text-input
-        label="Add Email Address"
+        [label]="labels.t('messagingSendMessagePanel.addEmailAddress')"
         type="email"
         [required]="true"
         placeholder="email@example.com"
         [(ngModel)]="pendingEmail"
         (ngModelChange)="notifyValid()"
-        [error]="pendingEmail && !pendingEmailValid ? 'Please enter a valid email address.' : ''" />
-      <ui-button variant="primary" [disabled]="!pendingEmailValid || savingEmail()" [loading]="savingEmail()" (click)="saveEmail()">
-        Save &amp; Continue
-      </ui-button>
+        [error]="pendingEmail && !pendingEmailValid ? labels.t('validation.email') : ''" />
+      <ui-button variant="primary" [disabled]="!pendingEmailValid || savingEmail()" [loading]="savingEmail()" (click)="saveEmail()">{{ labels.t('messagingSendMessagePanel.saveContinue') }}</ui-button>
     } @else {
       <!-- To (bulk mode: the panel shows the recipient summary instead) -->
       @if (!bulk()) {
       <div class="sm-group">
-        <span class="sm-group-label">To</span>
+        <span class="sm-group-label">{{ labels.t('messagingSendMessagePanel.to') }}</span>
         <div class="sm-to-card">
           <span class="sm-to-name">{{ contactName() }}</span>
           <span class="sm-to-detail">{{ contactEmail() }}</span>
@@ -4491,7 +4598,7 @@ var SendEmailComponent = class SendEmailComponent {
         <ui-text-input
           label="CC"
           placeholder="name@example.com, other@example.com"
-          hint="Separate addresses with commas. Everyone listed receives a copy."
+          [hint]="labels.t('messagingSendMessagePanel.separateAddressesWithCommasEveryone')"
           [(ngModel)]="ccText"
           [error]="ccError"
           (ngModelChange)="notifyValid()" />
@@ -4500,24 +4607,24 @@ var SendEmailComponent = class SendEmailComponent {
       <!-- Mode (hidden with [showTemplates]="false": the form is Create Message only) -->
       @if (showTemplates()) {
       <div class="sm-mode-row">
-        <ui-pill-tabs [tabs]="modeTabs" [activeKey]="mode" (tabChange)="setMode($event)" />
+        <ui-pill-tabs [tabs]="modeTabs()" [activeKey]="mode" (tabChange)="setMode($event)" />
       </div>
       }
 
       @if (mode === 'compose') {
         @if (showSubject()) {
         <ui-text-input
-          label="Subject"
+          [label]="labels.t('common.subject')"
           [required]="!viaDocuSign"
-          placeholder="Email subject..."
+          [placeholder]="labels.t('messagingSendMessagePanel.emailSubject')"
           [maxlength]="MAX_SUBJECT"
           [(ngModel)]="subject"
           (ngModelChange)="notifyValid()" />
         }
         <ui-textarea-input
-          label="Message"
+          [label]="labels.t('common.message')"
           [required]="!viaDocuSign"
-          placeholder="Write your message..."
+          [placeholder]="labels.t('messagingSendMessagePanel.writeYourMessage')"
           [rows]="8"
           [(ngModel)]="body"
           [error]="composeTagError || bodyLengthError"
@@ -4525,7 +4632,7 @@ var SendEmailComponent = class SendEmailComponent {
 
         @if (!hasDocuments && showAttachments()) {
         <div class="sm-field">
-          <label class="sm-field-label">Attachments</label>
+          <label class="sm-field-label">{{ labels.t('messagingSendMessagePanel.attachments') }}</label>
           @if (attachments.length > 0) {
             <div class="attach-chips">
               @for (a of attachments; track a.filename; let i = $index) {
@@ -4533,25 +4640,23 @@ var SendEmailComponent = class SendEmailComponent {
                   <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                   <span class="attach-name">{{ a.filename }}</span>
                   <span class="attach-size">{{ a.sizeLabel }}</span>
-                  <button class="attach-remove" type="button" (click)="removeAttachment(i)" aria-label="Remove attachment">&times;</button>
+                  <button class="attach-remove" type="button" (click)="removeAttachment(i)" [attr.aria-label]="labels.t('messagingSendMessagePanel.removeAttachment')">&times;</button>
                 </div>
               }
             </div>
           }
           <input #emailFileInput type="file" multiple hidden (change)="onFilesSelected($event)" />
           <button type="button" class="attach-add-btn" (click)="emailFileInput.click()">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
-            Attach Files
-          </button>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>{{ labels.t('messagingSendMessagePanel.attachFiles') }}</button>
         </div>
 
         }
 
         @if (!hasDocuments && showScheduling()) {
-        <ui-checkbox [checked]="showSchedule" label="Schedule for later" (checkedChange)="showSchedule = $event; notifyValid()" />
+        <ui-checkbox [checked]="showSchedule" [label]="labels.t('messagingSendMessagePanel.scheduleForLater')" (checkedChange)="showSchedule = $event; notifyValid()" />
         @if (showSchedule) {
           <ui-datetime-input
-            label="Send at"
+            [label]="labels.t('messagingSendMessagePanel.sendAt')"
             [min]="minScheduleTime"
             [(ngModel)]="scheduledAt"
             (ngModelChange)="notifyValid()" />
@@ -4561,14 +4666,12 @@ var SendEmailComponent = class SendEmailComponent {
         @if (missingVars.length > 0) {
           <div class="mv-section">
             <p class="mv-hint">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-              This template has fields that need values before sending.
-            </p>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>{{ labels.t('messagingSendMessagePanel.thisTemplateHasFieldsThat') }}</p>
             @for (key of missingVars; track key) {
               <div class="mv-row">
                 <div class="mv-input-wrap">
-                  <ui-text-input class="mv-text-input" [label]="formatVarLabel(key)" [required]="true" [placeholder]="'Enter ' + formatVarLabel(key).toLowerCase() + '...'" [(ngModel)]="pendingInputs[key]" (ngModelChange)="notifyValid()" (keydown.enter)="applyVar(key)" />
-                  <ui-button variant="primary" size="sm" [disabled]="!(pendingInputs[key] || '').trim()" (click)="applyVar(key)" ariaLabel="Apply value">
+                  <ui-text-input class="mv-text-input" [label]="formatVarLabel(key)" [required]="true" [placeholder]="labels.t('messagingSendMessagePanel.enterValue', { name: formatVarLabel(key).toLowerCase() })" [(ngModel)]="pendingInputs[key]" (ngModelChange)="notifyValid()" (keydown.enter)="applyVar(key)" />
+                  <ui-button variant="primary" size="sm" [disabled]="!(pendingInputs[key] || '').trim()" (click)="applyVar(key)" [ariaLabel]="labels.t('messagingSendMessagePanel.applyValue')">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                   </ui-button>
                 </div>
@@ -4579,22 +4682,18 @@ var SendEmailComponent = class SendEmailComponent {
 
         <div class="tpl-preview-header">
           <ui-button variant="ghost" size="sm" (click)="clearTemplate()">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
-            Back to templates
-          </ui-button>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>{{ labels.t('messagingSendMessagePanel.backToTemplates') }}</ui-button>
           <div class="tpl-view-toggle">
-            <ui-button variant="tab" size="sm" [active]="previewFormat === 'preview'" [ariaPressed]="previewFormat === 'preview'" (click)="setPreviewFormat('preview')">Preview</ui-button>
-            <ui-button variant="tab" size="sm" [active]="previewFormat === 'raw'" [ariaPressed]="previewFormat === 'raw'" (click)="setPreviewFormat('raw')">Raw</ui-button>
+            <ui-button variant="tab" size="sm" [active]="previewFormat === 'preview'" [ariaPressed]="previewFormat === 'preview'" (click)="setPreviewFormat('preview')">{{ labels.t('common.preview') }}</ui-button>
+            <ui-button variant="tab" size="sm" [active]="previewFormat === 'raw'" [ariaPressed]="previewFormat === 'raw'" (click)="setPreviewFormat('raw')">{{ labels.t('messagingSendMessagePanel.raw') }}</ui-button>
           </div>
         </div>
 
         <div class="tpl-subject-card">
           <div class="tpl-subject-card-top">
-            <span class="tpl-subject-label">SUBJECT</span>
+            <span class="tpl-subject-label">{{ labels.t('messagingSendMessagePanel.subject') }}</span>
             <ui-button variant="secondary" size="sm" (click)="openSendPreview()">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-              View Send Preview
-            </ui-button>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>{{ labels.t('messagingSendMessagePanel.viewSendPreview') }}</ui-button>
           </div>
           <span class="tpl-subject-text">{{ resolvedSubject }}</span>
         </div>
@@ -4602,9 +4701,9 @@ var SendEmailComponent = class SendEmailComponent {
           <div class="tpl-body-preview" [innerHTML]="previewBodyHtml"></div>
         } @else {
           <!-- Raw: the template source exactly as written, {{tags}} included — subject first, then the body. -->
-          <div class="tpl-raw-label">Subject</div>
+          <div class="tpl-raw-label">{{ labels.t('common.subject') }}</div>
           <pre class="tpl-subject-raw">{{ subject }}</pre>
-          <div class="tpl-raw-label">Body</div>
+          <div class="tpl-raw-label">{{ labels.t('messagingSendMessagePanel.body') }}</div>
           <pre class="tpl-body-raw">{{ body }}</pre>
         }
       } @else {
@@ -4641,10 +4740,10 @@ var SendEmailComponent = class SendEmailComponent {
         <!-- One live region, at most ONE warning banner: every current non-blocking warning is a line in it. Blocking problems are inline on their field. -->
         <div class="sm-docs-live" role="status" aria-live="polite">
           @if (hasDocuments) {
-            <p class="sm-docs-note">Your message goes out with the documents. Attachments and scheduling aren't available when sending documents.</p>
+            <p class="sm-docs-note">{{ labels.t('messagingSendMessagePanel.yourMessageGoesOutWith') }}</p>
           }
           @if (warningLines.length > 0) {
-            <ui-alert variant="warning" title="Heads up" data-testid="send-warnings">
+            <ui-alert variant="warning" [title]="labels.t('messagingSendMessagePanel.headsUp')" data-testid="send-warnings">
               <ul class="sm-warn-list">
                 @for (w of warningLines; track w.key) { <li [attr.data-testid]="w.testId">{{ w.text }}</li> }
               </ul>
@@ -4667,7 +4766,7 @@ var SendEmailComponent = class SendEmailComponent {
 
       <!-- Video: the LAST section. The picker, and once a video is attached its settings, Watch Preview and Remove Video. -->
       @if (mode === 'compose' && showVideo()) {
-        <ui-form-section label="Video" [divider]="true">
+        <ui-form-section [label]="labels.t('common.video')" [divider]="true">
           @for (k of [videoPickerKey]; track k) {
             <ui-video-picker (videoSelected)="onVideoSelected($event)" />
           }
@@ -4689,20 +4788,18 @@ var SendEmailComponent = class SendEmailComponent {
         <div class="sp-modal" (click)="$event.stopPropagation()">
           <div class="sp-modal-header">
             <div class="sp-modal-title">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
-              Email Preview
-            </div>
-            <ui-button variant="ghost" size="sm" (click)="closeSendPreview()" ariaLabel="Close preview">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>{{ labels.t('messagingSendMessagePanel.emailPreview') }}</div>
+            <ui-button variant="ghost" size="sm" (click)="closeSendPreview()" [ariaLabel]="labels.t('messagingSendMessagePanel.closePreview')">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </ui-button>
           </div>
           <div class="sp-email-meta">
             <div class="sp-meta-row">
-              <span class="sp-meta-label">To</span>
-              <span class="sp-meta-value">@if (bulk()) { {{ bulkRecipients()!.length }} recipient{{ bulkRecipients()!.length === 1 ? '' : 's' }} } @else { {{ contactName() }} &lt;{{ contactEmail() }}&gt; }</span>
+              <span class="sp-meta-label">{{ labels.t('messagingSendMessagePanel.to') }}</span>
+              <span class="sp-meta-value">@if (bulk()) { {{ labels.t(bulkRecipients()!.length === 1 ? 'messagingSendMessagePanel.recipientCount_one' : 'messagingSendMessagePanel.recipientCount_other', { count: bulkRecipients()!.length }) }} } @else { {{ contactName() }} &lt;{{ contactEmail() }}&gt; }</span>
             </div>
             <div class="sp-meta-row">
-              <span class="sp-meta-label">Subject</span>
+              <span class="sp-meta-label">{{ labels.t('common.subject') }}</span>
               <span class="sp-meta-value sp-meta-subject">{{ sendPreviewSubject }}</span>
             </div>
           </div>
@@ -5068,25 +5165,21 @@ i0.ɵɵngDeclareClassMetadata({
     <!-- Missing email guard -->
     @if (!bulk() && !contactEmail()) {
       <div class="sm-missing-banner">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-        No email address on file for this contact.
-      </div>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>{{ labels.t('messagingSendMessagePanel.noEmailAddressOnFile') }}</div>
       <ui-text-input
-        label="Add Email Address"
+        [label]="labels.t('messagingSendMessagePanel.addEmailAddress')"
         type="email"
         [required]="true"
         placeholder="email@example.com"
         [(ngModel)]="pendingEmail"
         (ngModelChange)="notifyValid()"
-        [error]="pendingEmail && !pendingEmailValid ? 'Please enter a valid email address.' : ''" />
-      <ui-button variant="primary" [disabled]="!pendingEmailValid || savingEmail()" [loading]="savingEmail()" (click)="saveEmail()">
-        Save &amp; Continue
-      </ui-button>
+        [error]="pendingEmail && !pendingEmailValid ? labels.t('validation.email') : ''" />
+      <ui-button variant="primary" [disabled]="!pendingEmailValid || savingEmail()" [loading]="savingEmail()" (click)="saveEmail()">{{ labels.t('messagingSendMessagePanel.saveContinue') }}</ui-button>
     } @else {
       <!-- To (bulk mode: the panel shows the recipient summary instead) -->
       @if (!bulk()) {
       <div class="sm-group">
-        <span class="sm-group-label">To</span>
+        <span class="sm-group-label">{{ labels.t('messagingSendMessagePanel.to') }}</span>
         <div class="sm-to-card">
           <span class="sm-to-name">{{ contactName() }}</span>
           <span class="sm-to-detail">{{ contactEmail() }}</span>
@@ -5114,7 +5207,7 @@ i0.ɵɵngDeclareClassMetadata({
         <ui-text-input
           label="CC"
           placeholder="name@example.com, other@example.com"
-          hint="Separate addresses with commas. Everyone listed receives a copy."
+          [hint]="labels.t('messagingSendMessagePanel.separateAddressesWithCommasEveryone')"
           [(ngModel)]="ccText"
           [error]="ccError"
           (ngModelChange)="notifyValid()" />
@@ -5123,24 +5216,24 @@ i0.ɵɵngDeclareClassMetadata({
       <!-- Mode (hidden with [showTemplates]="false": the form is Create Message only) -->
       @if (showTemplates()) {
       <div class="sm-mode-row">
-        <ui-pill-tabs [tabs]="modeTabs" [activeKey]="mode" (tabChange)="setMode($event)" />
+        <ui-pill-tabs [tabs]="modeTabs()" [activeKey]="mode" (tabChange)="setMode($event)" />
       </div>
       }
 
       @if (mode === 'compose') {
         @if (showSubject()) {
         <ui-text-input
-          label="Subject"
+          [label]="labels.t('common.subject')"
           [required]="!viaDocuSign"
-          placeholder="Email subject..."
+          [placeholder]="labels.t('messagingSendMessagePanel.emailSubject')"
           [maxlength]="MAX_SUBJECT"
           [(ngModel)]="subject"
           (ngModelChange)="notifyValid()" />
         }
         <ui-textarea-input
-          label="Message"
+          [label]="labels.t('common.message')"
           [required]="!viaDocuSign"
-          placeholder="Write your message..."
+          [placeholder]="labels.t('messagingSendMessagePanel.writeYourMessage')"
           [rows]="8"
           [(ngModel)]="body"
           [error]="composeTagError || bodyLengthError"
@@ -5148,7 +5241,7 @@ i0.ɵɵngDeclareClassMetadata({
 
         @if (!hasDocuments && showAttachments()) {
         <div class="sm-field">
-          <label class="sm-field-label">Attachments</label>
+          <label class="sm-field-label">{{ labels.t('messagingSendMessagePanel.attachments') }}</label>
           @if (attachments.length > 0) {
             <div class="attach-chips">
               @for (a of attachments; track a.filename; let i = $index) {
@@ -5156,25 +5249,23 @@ i0.ɵɵngDeclareClassMetadata({
                   <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                   <span class="attach-name">{{ a.filename }}</span>
                   <span class="attach-size">{{ a.sizeLabel }}</span>
-                  <button class="attach-remove" type="button" (click)="removeAttachment(i)" aria-label="Remove attachment">&times;</button>
+                  <button class="attach-remove" type="button" (click)="removeAttachment(i)" [attr.aria-label]="labels.t('messagingSendMessagePanel.removeAttachment')">&times;</button>
                 </div>
               }
             </div>
           }
           <input #emailFileInput type="file" multiple hidden (change)="onFilesSelected($event)" />
           <button type="button" class="attach-add-btn" (click)="emailFileInput.click()">
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
-            Attach Files
-          </button>
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>{{ labels.t('messagingSendMessagePanel.attachFiles') }}</button>
         </div>
 
         }
 
         @if (!hasDocuments && showScheduling()) {
-        <ui-checkbox [checked]="showSchedule" label="Schedule for later" (checkedChange)="showSchedule = $event; notifyValid()" />
+        <ui-checkbox [checked]="showSchedule" [label]="labels.t('messagingSendMessagePanel.scheduleForLater')" (checkedChange)="showSchedule = $event; notifyValid()" />
         @if (showSchedule) {
           <ui-datetime-input
-            label="Send at"
+            [label]="labels.t('messagingSendMessagePanel.sendAt')"
             [min]="minScheduleTime"
             [(ngModel)]="scheduledAt"
             (ngModelChange)="notifyValid()" />
@@ -5184,14 +5275,12 @@ i0.ɵɵngDeclareClassMetadata({
         @if (missingVars.length > 0) {
           <div class="mv-section">
             <p class="mv-hint">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-              This template has fields that need values before sending.
-            </p>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>{{ labels.t('messagingSendMessagePanel.thisTemplateHasFieldsThat') }}</p>
             @for (key of missingVars; track key) {
               <div class="mv-row">
                 <div class="mv-input-wrap">
-                  <ui-text-input class="mv-text-input" [label]="formatVarLabel(key)" [required]="true" [placeholder]="'Enter ' + formatVarLabel(key).toLowerCase() + '...'" [(ngModel)]="pendingInputs[key]" (ngModelChange)="notifyValid()" (keydown.enter)="applyVar(key)" />
-                  <ui-button variant="primary" size="sm" [disabled]="!(pendingInputs[key] || '').trim()" (click)="applyVar(key)" ariaLabel="Apply value">
+                  <ui-text-input class="mv-text-input" [label]="formatVarLabel(key)" [required]="true" [placeholder]="labels.t('messagingSendMessagePanel.enterValue', { name: formatVarLabel(key).toLowerCase() })" [(ngModel)]="pendingInputs[key]" (ngModelChange)="notifyValid()" (keydown.enter)="applyVar(key)" />
+                  <ui-button variant="primary" size="sm" [disabled]="!(pendingInputs[key] || '').trim()" (click)="applyVar(key)" [ariaLabel]="labels.t('messagingSendMessagePanel.applyValue')">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                   </ui-button>
                 </div>
@@ -5202,22 +5291,18 @@ i0.ɵɵngDeclareClassMetadata({
 
         <div class="tpl-preview-header">
           <ui-button variant="ghost" size="sm" (click)="clearTemplate()">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
-            Back to templates
-          </ui-button>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>{{ labels.t('messagingSendMessagePanel.backToTemplates') }}</ui-button>
           <div class="tpl-view-toggle">
-            <ui-button variant="tab" size="sm" [active]="previewFormat === 'preview'" [ariaPressed]="previewFormat === 'preview'" (click)="setPreviewFormat('preview')">Preview</ui-button>
-            <ui-button variant="tab" size="sm" [active]="previewFormat === 'raw'" [ariaPressed]="previewFormat === 'raw'" (click)="setPreviewFormat('raw')">Raw</ui-button>
+            <ui-button variant="tab" size="sm" [active]="previewFormat === 'preview'" [ariaPressed]="previewFormat === 'preview'" (click)="setPreviewFormat('preview')">{{ labels.t('common.preview') }}</ui-button>
+            <ui-button variant="tab" size="sm" [active]="previewFormat === 'raw'" [ariaPressed]="previewFormat === 'raw'" (click)="setPreviewFormat('raw')">{{ labels.t('messagingSendMessagePanel.raw') }}</ui-button>
           </div>
         </div>
 
         <div class="tpl-subject-card">
           <div class="tpl-subject-card-top">
-            <span class="tpl-subject-label">SUBJECT</span>
+            <span class="tpl-subject-label">{{ labels.t('messagingSendMessagePanel.subject') }}</span>
             <ui-button variant="secondary" size="sm" (click)="openSendPreview()">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-              View Send Preview
-            </ui-button>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>{{ labels.t('messagingSendMessagePanel.viewSendPreview') }}</ui-button>
           </div>
           <span class="tpl-subject-text">{{ resolvedSubject }}</span>
         </div>
@@ -5225,9 +5310,9 @@ i0.ɵɵngDeclareClassMetadata({
           <div class="tpl-body-preview" [innerHTML]="previewBodyHtml"></div>
         } @else {
           <!-- Raw: the template source exactly as written, {{tags}} included — subject first, then the body. -->
-          <div class="tpl-raw-label">Subject</div>
+          <div class="tpl-raw-label">{{ labels.t('common.subject') }}</div>
           <pre class="tpl-subject-raw">{{ subject }}</pre>
-          <div class="tpl-raw-label">Body</div>
+          <div class="tpl-raw-label">{{ labels.t('messagingSendMessagePanel.body') }}</div>
           <pre class="tpl-body-raw">{{ body }}</pre>
         }
       } @else {
@@ -5264,10 +5349,10 @@ i0.ɵɵngDeclareClassMetadata({
         <!-- One live region, at most ONE warning banner: every current non-blocking warning is a line in it. Blocking problems are inline on their field. -->
         <div class="sm-docs-live" role="status" aria-live="polite">
           @if (hasDocuments) {
-            <p class="sm-docs-note">Your message goes out with the documents. Attachments and scheduling aren't available when sending documents.</p>
+            <p class="sm-docs-note">{{ labels.t('messagingSendMessagePanel.yourMessageGoesOutWith') }}</p>
           }
           @if (warningLines.length > 0) {
-            <ui-alert variant="warning" title="Heads up" data-testid="send-warnings">
+            <ui-alert variant="warning" [title]="labels.t('messagingSendMessagePanel.headsUp')" data-testid="send-warnings">
               <ul class="sm-warn-list">
                 @for (w of warningLines; track w.key) { <li [attr.data-testid]="w.testId">{{ w.text }}</li> }
               </ul>
@@ -5290,7 +5375,7 @@ i0.ɵɵngDeclareClassMetadata({
 
       <!-- Video: the LAST section. The picker, and once a video is attached its settings, Watch Preview and Remove Video. -->
       @if (mode === 'compose' && showVideo()) {
-        <ui-form-section label="Video" [divider]="true">
+        <ui-form-section [label]="labels.t('common.video')" [divider]="true">
           @for (k of [videoPickerKey]; track k) {
             <ui-video-picker (videoSelected)="onVideoSelected($event)" />
           }
@@ -5312,20 +5397,18 @@ i0.ɵɵngDeclareClassMetadata({
         <div class="sp-modal" (click)="$event.stopPropagation()">
           <div class="sp-modal-header">
             <div class="sp-modal-title">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
-              Email Preview
-            </div>
-            <ui-button variant="ghost" size="sm" (click)="closeSendPreview()" ariaLabel="Close preview">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>{{ labels.t('messagingSendMessagePanel.emailPreview') }}</div>
+            <ui-button variant="ghost" size="sm" (click)="closeSendPreview()" [ariaLabel]="labels.t('messagingSendMessagePanel.closePreview')">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </ui-button>
           </div>
           <div class="sp-email-meta">
             <div class="sp-meta-row">
-              <span class="sp-meta-label">To</span>
-              <span class="sp-meta-value">@if (bulk()) { {{ bulkRecipients()!.length }} recipient{{ bulkRecipients()!.length === 1 ? '' : 's' }} } @else { {{ contactName() }} &lt;{{ contactEmail() }}&gt; }</span>
+              <span class="sp-meta-label">{{ labels.t('messagingSendMessagePanel.to') }}</span>
+              <span class="sp-meta-value">@if (bulk()) { {{ labels.t(bulkRecipients()!.length === 1 ? 'messagingSendMessagePanel.recipientCount_one' : 'messagingSendMessagePanel.recipientCount_other', { count: bulkRecipients()!.length }) }} } @else { {{ contactName() }} &lt;{{ contactEmail() }}&gt; }</span>
             </div>
             <div class="sp-meta-row">
-              <span class="sp-meta-label">Subject</span>
+              <span class="sp-meta-label">{{ labels.t('common.subject') }}</span>
               <span class="sp-meta-value sp-meta-subject">{{ sendPreviewSubject }}</span>
             </div>
           </div>
@@ -5419,7 +5502,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		receiptLabel: [{
+		receiptLabelInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -5636,6 +5719,7 @@ i0.ɵɵngDeclareClassMetadata({
 const MAX_SUBJECT = 255;
 var SendInAppComponent = class SendInAppComponent {
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.destroyRef = inject(DestroyRef);
 		this.toast = inject(ToastService);
 		this.cdr = inject(ChangeDetectorRef);
@@ -5684,7 +5768,7 @@ var SendInAppComponent = class SendInAppComponent {
 			const reader = new FileReader();
 			reader.onload = () => {
 				const base64 = String(reader.result).split(",")[1] ?? "";
-				const sizeLabel = file.size < 1048576 ? `${Math.round(file.size / 1024)} KB` : `${(file.size / 1048576).toFixed(1)} MB`;
+				const sizeLabel = formatAttachmentSize(file.size);
 				this.attachments = [...this.attachments, {
 					filename: file.name,
 					content: base64,
@@ -5722,13 +5806,13 @@ var SendInAppComponent = class SendInAppComponent {
 		if (this.showSubject()) payload.subject = this.subject.trim();
 		send(payload).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
 			next: () => {
-				this.toast.show("Message sent");
+				this.toast.show(this.labels.t("messagingSendMessagePanel.messageSent"));
 				this.sending.set(false);
 				this.attachments = [];
 				this.sent.emit();
 			},
 			error: (err) => {
-				this.toast.error(serverMessage(err) || "Failed to send message");
+				this.toast.error(serverMessage(err) || this.labels.t("messagingSendMessagePanel.failedSendMessage"));
 				this.sending.set(false);
 				this.notifyValid();
 			}
@@ -5830,7 +5914,7 @@ var SendInAppComponent = class SendInAppComponent {
 			ngImport: i0,
 			template: `
     <div class="sm-group">
-      <span class="sm-group-label">To</span>
+      <span class="sm-group-label">{{ labels.t('messagingSendMessagePanel.to') }}</span>
       <div class="sm-to-card">
         <span class="sm-to-name">{{ contactName() }}</span>
         @if (contactEmail()) { <span class="sm-to-email">{{ contactEmail() }}</span> }
@@ -5838,56 +5922,56 @@ var SendInAppComponent = class SendInAppComponent {
     </div>
     @if (showSubject()) {
       <ui-text-input
-        label="Subject"
+        [label]="labels.t('common.subject')"
         [required]="true"
-        placeholder="Subject..."
+        [placeholder]="labels.t('messagingSendMessagePanel.subject2')"
         [maxlength]="MAX_SUBJECT"
         [(ngModel)]="subject"
         (ngModelChange)="notifyValid()" />
     }
     @if (richText()) {
       <ui-rich-text-editor
-        label="Message"
+        [label]="labels.t('common.message')"
         [required]="true"
-        placeholder="Write your message..."
+        [placeholder]="labels.t('messagingSendMessagePanel.writeYourMessage')"
         [minHeight]="180"
-        [error]="richTooLong() ? 'Too long (max ' + limit() + ' characters).' : ''"
+        [error]="richTooLong() ? labels.t('validation.tooLong', { max: limit() }) : ''"
         [(ngModel)]="body"
         (ngModelChange)="notifyValid()" />
     } @else if (limit(); as max) {
       <ui-textarea-input
-        label="Message"
+        [label]="labels.t('common.message')"
         [required]="true"
-        placeholder="Write your message..."
+        [placeholder]="labels.t('messagingSendMessagePanel.writeYourMessage')"
         [rows]="8"
         [maxlength]="max"
         [(ngModel)]="body"
         (ngModelChange)="notifyValid()" />
     } @else {
       <ui-textarea-input
-        label="Message"
+        [label]="labels.t('common.message')"
         [required]="true"
-        placeholder="Write your message..."
+        [placeholder]="labels.t('messagingSendMessagePanel.writeYourMessage')"
         [rows]="8"
         [(ngModel)]="body"
         (ngModelChange)="notifyValid()" />
     }
     @if (allowAttachments()) {
       <div class="sm-group" data-testid="in-app-attachments">
-        <span class="sm-group-label">Attachments</span>
+        <span class="sm-group-label">{{ labels.t('messagingSendMessagePanel.attachments') }}</span>
         @if (attachments.length > 0) {
           <div class="attach-chips">
             @for (a of attachments; track $index; let i = $index) {
               <div class="attach-chip">
                 <span class="attach-name">{{ a.filename }}</span>
                 <span class="attach-size">{{ a.sizeLabel }}</span>
-                <button class="attach-remove" type="button" (click)="removeAttachment(i)" [attr.aria-label]="'Remove ' + a.filename">&times;</button>
+                <button class="attach-remove" type="button" (click)="removeAttachment(i)" [attr.aria-label]="labels.t('common.removeNamed', { name: a.filename })">&times;</button>
               </div>
             }
           </div>
         }
         <input #fileInput type="file" multiple hidden data-testid="in-app-file-input" (change)="onFilesSelected($event)" />
-        <button type="button" class="attach-add-btn" (click)="fileInput.click()">Attach Files</button>
+        <button type="button" class="attach-add-btn" (click)="fileInput.click()">{{ labels.t('messagingSendMessagePanel.attachFiles') }}</button>
       </div>
     }
   `,
@@ -6038,7 +6122,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			template: `
     <div class="sm-group">
-      <span class="sm-group-label">To</span>
+      <span class="sm-group-label">{{ labels.t('messagingSendMessagePanel.to') }}</span>
       <div class="sm-to-card">
         <span class="sm-to-name">{{ contactName() }}</span>
         @if (contactEmail()) { <span class="sm-to-email">{{ contactEmail() }}</span> }
@@ -6046,56 +6130,56 @@ i0.ɵɵngDeclareClassMetadata({
     </div>
     @if (showSubject()) {
       <ui-text-input
-        label="Subject"
+        [label]="labels.t('common.subject')"
         [required]="true"
-        placeholder="Subject..."
+        [placeholder]="labels.t('messagingSendMessagePanel.subject2')"
         [maxlength]="MAX_SUBJECT"
         [(ngModel)]="subject"
         (ngModelChange)="notifyValid()" />
     }
     @if (richText()) {
       <ui-rich-text-editor
-        label="Message"
+        [label]="labels.t('common.message')"
         [required]="true"
-        placeholder="Write your message..."
+        [placeholder]="labels.t('messagingSendMessagePanel.writeYourMessage')"
         [minHeight]="180"
-        [error]="richTooLong() ? 'Too long (max ' + limit() + ' characters).' : ''"
+        [error]="richTooLong() ? labels.t('validation.tooLong', { max: limit() }) : ''"
         [(ngModel)]="body"
         (ngModelChange)="notifyValid()" />
     } @else if (limit(); as max) {
       <ui-textarea-input
-        label="Message"
+        [label]="labels.t('common.message')"
         [required]="true"
-        placeholder="Write your message..."
+        [placeholder]="labels.t('messagingSendMessagePanel.writeYourMessage')"
         [rows]="8"
         [maxlength]="max"
         [(ngModel)]="body"
         (ngModelChange)="notifyValid()" />
     } @else {
       <ui-textarea-input
-        label="Message"
+        [label]="labels.t('common.message')"
         [required]="true"
-        placeholder="Write your message..."
+        [placeholder]="labels.t('messagingSendMessagePanel.writeYourMessage')"
         [rows]="8"
         [(ngModel)]="body"
         (ngModelChange)="notifyValid()" />
     }
     @if (allowAttachments()) {
       <div class="sm-group" data-testid="in-app-attachments">
-        <span class="sm-group-label">Attachments</span>
+        <span class="sm-group-label">{{ labels.t('messagingSendMessagePanel.attachments') }}</span>
         @if (attachments.length > 0) {
           <div class="attach-chips">
             @for (a of attachments; track $index; let i = $index) {
               <div class="attach-chip">
                 <span class="attach-name">{{ a.filename }}</span>
                 <span class="attach-size">{{ a.sizeLabel }}</span>
-                <button class="attach-remove" type="button" (click)="removeAttachment(i)" [attr.aria-label]="'Remove ' + a.filename">&times;</button>
+                <button class="attach-remove" type="button" (click)="removeAttachment(i)" [attr.aria-label]="labels.t('common.removeNamed', { name: a.filename })">&times;</button>
               </div>
             }
           </div>
         }
         <input #fileInput type="file" multiple hidden data-testid="in-app-file-input" (change)="onFilesSelected($event)" />
-        <button type="button" class="attach-add-btn" (click)="fileInput.click()">Attach Files</button>
+        <button type="button" class="attach-add-btn" (click)="fileInput.click()">{{ labels.t('messagingSendMessagePanel.attachFiles') }}</button>
       </div>
     }
   `,
@@ -6217,6 +6301,7 @@ var SendTextComponent = class SendTextComponent {
 		} });
 	}
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.formatPhone = formatPhone;
 		this.destroyRef = inject(DestroyRef);
 		this.http = inject(HttpClient);
@@ -6290,13 +6375,13 @@ var SendTextComponent = class SendTextComponent {
 		this.mediaAttachment = signal(null, ...ngDevMode ? [{ debugName: "mediaAttachment" }] : /* istanbul ignore next */ []);
 		this.mediaUploading = signal(false, ...ngDevMode ? [{ debugName: "mediaUploading" }] : /* istanbul ignore next */ []);
 		this.savingPhone = signal(false, ...ngDevMode ? [{ debugName: "savingPhone" }] : /* istanbul ignore next */ []);
-		this.modeTabs = [{
+		this.modeTabs = computed(() => [{
 			key: "compose",
-			label: "Create Message"
+			label: this.labels.t("messagingSendMessagePanel.tabCompose")
 		}, {
 			key: "template",
-			label: "Use Existing Template"
-		}];
+			label: this.labels.t("messagingSendMessagePanel.tabTemplate")
+		}], ...ngDevMode ? [{ debugName: "modeTabs" }] : /* istanbul ignore next */ []);
 		this.marketVars = {};
 		this._appliedDefaultBody = "";
 		this.forwardedContext = computed(() => forwardContext(this.sendContext(), this.documentContextTypes()).context, ...ngDevMode ? [{ debugName: "forwardedContext" }] : /* istanbul ignore next */ []);
@@ -6359,8 +6444,8 @@ var SendTextComponent = class SendTextComponent {
 	onDocumentsChange(v) {
 		this.documentsValue = v;
 		if (this.hasDocuments) {
-			const removed = [this.mediaAttachment() ? "your image" : "", this.showSchedule ? "the schedule" : ""].filter(Boolean);
-			if (removed.length > 0) this.docsRemovedNote = `We removed ${removed.join(" and ")} because documents are sent as a request.`;
+			const removed = [this.mediaAttachment() ? this.labels.t("messagingSendMessagePanel.removedImage") : "", this.showSchedule ? this.labels.t("messagingSendMessagePanel.removedSchedule") : ""].filter(Boolean);
+			if (removed.length > 0) this.docsRemovedNote = this.labels.t("messagingSendMessagePanel.removedBecauseRequest", { items: removed.join(` ${this.labels.t("messagingSendMessagePanel.listAnd")} `) });
 			this.showSchedule = false;
 			this.scheduledAt = "";
 			this.mediaAttachment.set(null);
@@ -6412,10 +6497,10 @@ var SendTextComponent = class SendTextComponent {
 		return mergeTagKeys(this.body).filter((k) => !known[k] && !this.deferredKeys.includes(k));
 	}
 	get videoLengthError() {
-		return this._videoLine && this.body.length > this.MAX_LENGTH ? `The video link makes this text longer than ${this.MAX_LENGTH} characters. Shorten the message or remove the video.` : "";
+		return this._videoLine && this.body.length > this.MAX_LENGTH ? this.labels.t("messagingSendMessagePanel.textTooLongWithVideo", { max: this.MAX_LENGTH }) : "";
 	}
 	get composeTagError() {
-		return this.mode === "compose" && hasLeftoverTags(this.resolvedBody, this.deferredKeys) ? "Replace every {{…}} field with text before sending." : "";
+		return this.mode === "compose" && hasLeftoverTags(this.resolvedBody, this.deferredKeys) ? this.labels.t("messagingSendMessagePanel.leftoverTags") : "";
 	}
 	get unresolvedVars() {
 		return this.missingVars.filter((k) => !(this.pendingInputs[k] ?? "").trim());
@@ -6497,7 +6582,7 @@ var SendTextComponent = class SendTextComponent {
 	onFileSelected(event) {
 		const file = event.target.files?.[0];
 		if (!file) return;
-		const sizeLabel = file.size < 1048576 ? `${Math.round(file.size / 1024)} KB` : `${(file.size / 1048576).toFixed(1)} MB`;
+		const sizeLabel = formatAttachmentSize(file.size);
 		this.mediaUploading.set(true);
 		this.cdr.detectChanges();
 		const form = new FormData();
@@ -6514,7 +6599,7 @@ var SendTextComponent = class SendTextComponent {
 				this.cdr.detectChanges();
 			},
 			error: () => {
-				this.toast.error("Failed to upload attachment");
+				this.toast.error(this.labels.t("messagingSendMessagePanel.failedUpload"));
 				this.mediaUploading.set(false);
 				this.cdr.detectChanges();
 			}
@@ -6527,7 +6612,7 @@ var SendTextComponent = class SendTextComponent {
 	insertVideo(v) {
 		if (!v.shareLink) return;
 		const sep = this.body.trim() ? "\n\n" : "";
-		this.body = (this.body + sep + `Watch "${v.title}": ${v.shareLink}`).slice(0, this.MAX_LENGTH);
+		this.body = (this.body + sep + videoMessageLine(v.title, v.shareLink)).slice(0, this.MAX_LENGTH);
 		this.notifyValid();
 	}
 	onVideoSelected(v) {
@@ -6562,7 +6647,7 @@ var SendTextComponent = class SendTextComponent {
 	submit() {
 		if (!this.canSend || this.loading || !this.bulk() && !this.contactPhone()) return;
 		if (this.bulk() && !this.sendFn()) {
-			this.toast.error(BULK_NO_SEND_MESSAGE);
+			this.toast.error(this.labels.t("messagingSendMessagePanel.bulkNoSend"));
 			return;
 		}
 		if (this.mode === "template") this.applyPendingVars();
@@ -6634,7 +6719,7 @@ var SendTextComponent = class SendTextComponent {
 		});
 		const onError = (err) => {
 			if (this.bulk() && (destroyed || !this.loading)) return;
-			this.toast.error(custom || docs ? getErrorMessage(err, "text message", "send") : serverMessage(err) || "Failed to send text message");
+			this.toast.error(custom || docs ? getErrorMessage(err, this.labels.t("messagingSendMessagePanel.ctxText"), "send") : serverMessage(err) || this.labels.t("messagingSendMessagePanel.failedSendText"));
 			this.loading = false;
 			this.cdr.detectChanges();
 			if (this.bulk()) this.bulkSending.emit(null);
@@ -6649,7 +6734,7 @@ var SendTextComponent = class SendTextComponent {
 					channel: "text",
 					informational: docs.signerInfo?.informational === true
 				}) : void 0;
-				this.toast.show(sentText ?? (docs && this.documentEnvelope() ? `Envelope "${this.documentEnvelope().name}" sent` : this.showSchedule ? "Message scheduled" : "Text message sent"));
+				this.toast.show(sentText ?? (docs && this.documentEnvelope() ? this.labels.t("messagingSendMessagePanel.envelopeSent", { name: this.documentEnvelope().name }) : this.showSchedule ? this.labels.t("messagingSendMessagePanel.messageScheduled") : this.labels.t("messagingSendMessagePanel.textSent")));
 				this.loading = false;
 				this.mediaAttachment.set(null);
 				if (this.bulk()) this.bulkResult.emit({
@@ -6872,25 +6957,21 @@ var SendTextComponent = class SendTextComponent {
     <!-- Missing phone guard -->
     @if (!bulk() && !contactPhone()) {
       <div class="sm-missing-banner">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-        No phone number on file for this contact.
-      </div>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>{{ labels.t('messagingSendMessagePanel.noPhoneNumberOnFile') }}</div>
       <ui-text-input
-        label="Add Phone Number"
+        [label]="labels.t('messagingSendMessagePanel.addPhoneNumber')"
         type="tel"
         [required]="true"
         placeholder="(555) 000-0000"
         [(ngModel)]="pendingPhone"
         (ngModelChange)="notifyValid()"
-        [error]="pendingPhone && !pendingPhoneValid ? 'Please enter a valid phone number.' : ''" />
-      <ui-button variant="primary" [disabled]="!pendingPhoneValid || savingPhone()" [loading]="savingPhone()" (click)="savePhone()">
-        Save &amp; Continue
-      </ui-button>
+        [error]="pendingPhone && !pendingPhoneValid ? labels.t('validation.phone') : ''" />
+      <ui-button variant="primary" [disabled]="!pendingPhoneValid || savingPhone()" [loading]="savingPhone()" (click)="savePhone()">{{ labels.t('messagingSendMessagePanel.saveContinue') }}</ui-button>
     } @else {
       <!-- To (bulk mode: the panel shows the recipient summary instead) -->
       @if (!bulk()) {
       <div class="sm-group">
-        <span class="sm-group-label">To</span>
+        <span class="sm-group-label">{{ labels.t('messagingSendMessagePanel.to') }}</span>
         <div class="sm-to-card">
           <span class="sm-to-name">{{ contactName() }}</span>
           <span class="sm-to-detail">{{ formatPhone(contactPhone()) }}</span>
@@ -6901,23 +6982,23 @@ var SendTextComponent = class SendTextComponent {
       <!-- Mode (hidden with [showTemplates]="false": the form is Create Message only) -->
       @if (showTemplates()) {
       <div class="sm-mode-row">
-        <ui-pill-tabs [tabs]="modeTabs" [activeKey]="mode" (tabChange)="setMode($event)" />
+        <ui-pill-tabs [tabs]="modeTabs()" [activeKey]="mode" (tabChange)="setMode($event)" />
       </div>
       }
 
       @if (mode === 'compose') {
         <div class="sm-field">
           <ui-textarea-input
-            label="Message"
+            [label]="labels.t('common.message')"
             [required]="true"
-            placeholder="Write your message..."
+            [placeholder]="labels.t('messagingSendMessagePanel.writeYourMessage')"
             [rows]="8"
             [maxlength]="MAX_LENGTH"
             [(ngModel)]="body"
             [error]="composeTagError || videoLengthError"
             (ngModelChange)="notifyValid()" />
           <div class="sm-char-row">
-            <span class="sm-hint">Sent as SMS. Keep messages concise for best delivery.</span>
+            <span class="sm-hint">{{ labels.t('messagingSendMessagePanel.sentAsSmsKeepMessages') }}</span>
             <span class="sm-char-count" [class.sm-char-warn]="body.length > MAX_LENGTH * 0.9">
               {{ body.length }} / {{ MAX_LENGTH }}
             </span>
@@ -6926,14 +7007,14 @@ var SendTextComponent = class SendTextComponent {
 
         @if (!hasDocuments && showAttachments()) {
         <div class="sm-field">
-          <label class="sm-field-label">Add Image / Media (MMS)</label>
+          <label class="sm-field-label">{{ labels.t('messagingSendMessagePanel.addImageMediaMms') }}</label>
           @if (mediaAttachment()) {
             <div class="attach-chips">
               <div class="attach-chip">
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                 <span class="attach-name">{{ mediaAttachment()!.mediaFileName }}</span>
                 <span class="attach-size">{{ mediaAttachment()!.sizeLabel }}</span>
-                <button class="attach-remove" type="button" (click)="removeMedia()" aria-label="Remove attachment">&times;</button>
+                <button class="attach-remove" type="button" (click)="removeMedia()" [attr.aria-label]="labels.t('messagingSendMessagePanel.removeAttachment')">&times;</button>
               </div>
             </div>
           }
@@ -6941,10 +7022,10 @@ var SendTextComponent = class SendTextComponent {
             <input #smsFileInput type="file" accept="image/*,video/*,application/pdf" hidden (change)="onFileSelected($event)" />
             <button type="button" class="attach-add-btn" [disabled]="mediaUploading()" (click)="smsFileInput.click()">
               @if (mediaUploading()) {
-                <span class="attach-spinner"></span> Uploading...
+                <span class="attach-spinner"></span> {{ labels.t('messagingSendText.uploading') }}
               } @else {
                 <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
-                Attach Image
+                {{ labels.t('messagingSendMessagePanel.attachImage') }}
               }
             </button>
           }
@@ -6953,10 +7034,10 @@ var SendTextComponent = class SendTextComponent {
         }
 
         @if (!hasDocuments && showScheduling()) {
-        <ui-checkbox [checked]="showSchedule" label="Schedule for later" (checkedChange)="showSchedule = $event; notifyValid()" />
+        <ui-checkbox [checked]="showSchedule" [label]="labels.t('messagingSendMessagePanel.scheduleForLater')" (checkedChange)="showSchedule = $event; notifyValid()" />
         @if (showSchedule) {
           <ui-datetime-input
-            label="Send at"
+            [label]="labels.t('messagingSendMessagePanel.sendAt')"
             [min]="minScheduleTime"
             [(ngModel)]="scheduledAt"
             (ngModelChange)="notifyValid()" />
@@ -6966,14 +7047,12 @@ var SendTextComponent = class SendTextComponent {
         @if (missingVars.length > 0) {
           <div class="mv-section">
             <p class="mv-hint">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-              This template has fields that need values before sending.
-            </p>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>{{ labels.t('messagingSendMessagePanel.thisTemplateHasFieldsThat') }}</p>
             @for (key of missingVars; track key) {
               <div class="mv-row">
                 <div class="mv-input-wrap">
-                  <ui-text-input class="mv-text-input" [label]="formatVarLabel(key)" [required]="true" [placeholder]="'Enter ' + formatVarLabel(key).toLowerCase() + '...'" [(ngModel)]="pendingInputs[key]" (ngModelChange)="notifyValid()" (keydown.enter)="applyVar(key)" />
-                  <button class="mv-apply-btn" type="button" [disabled]="!(pendingInputs[key] || '').trim()" (click)="applyVar(key)" aria-label="Apply value">
+                  <ui-text-input class="mv-text-input" [label]="formatVarLabel(key)" [required]="true" [placeholder]="labels.t('messagingSendMessagePanel.enterValue', { name: formatVarLabel(key).toLowerCase() })" [(ngModel)]="pendingInputs[key]" (ngModelChange)="notifyValid()" (keydown.enter)="applyVar(key)" />
+                  <button class="mv-apply-btn" type="button" [disabled]="!(pendingInputs[key] || '').trim()" (click)="applyVar(key)" [attr.aria-label]="labels.t('messagingSendMessagePanel.applyValue')">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                   </button>
                 </div>
@@ -6984,20 +7063,16 @@ var SendTextComponent = class SendTextComponent {
 
         <div class="tpl-preview-header">
           <button class="tpl-back-btn" type="button" (click)="clearTemplate()">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
-            Back to templates
-          </button>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>{{ labels.t('messagingSendMessagePanel.backToTemplates') }}</button>
           <div class="tpl-view-toggle">
-            <button class="tpl-toggle-btn" [class.active]="previewFormat === 'preview'" [attr.aria-pressed]="previewFormat === 'preview'" type="button" (click)="setPreviewFormat('preview')">Preview</button>
-            <button class="tpl-toggle-btn" [class.active]="previewFormat === 'raw'" [attr.aria-pressed]="previewFormat === 'raw'" type="button" (click)="setPreviewFormat('raw')">Raw</button>
+            <button class="tpl-toggle-btn" [class.active]="previewFormat === 'preview'" [attr.aria-pressed]="previewFormat === 'preview'" type="button" (click)="setPreviewFormat('preview')">{{ labels.t('common.preview') }}</button>
+            <button class="tpl-toggle-btn" [class.active]="previewFormat === 'raw'" [attr.aria-pressed]="previewFormat === 'raw'" type="button" (click)="setPreviewFormat('raw')">{{ labels.t('messagingSendMessagePanel.raw') }}</button>
           </div>
         </div>
 
         <div class="tpl-send-preview-row">
           <ui-button variant="secondary" size="sm" (click)="openSendPreview()">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-            View Send Preview
-          </ui-button>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>{{ labels.t('messagingSendMessagePanel.viewSendPreview') }}</ui-button>
         </div>
 
         @if (previewFormat === 'preview') {
@@ -7037,10 +7112,10 @@ var SendTextComponent = class SendTextComponent {
         <!-- One live region, at most ONE warning banner (every current non-blocking warning is a line in it). -->
         <div class="sm-docs-live" role="status" aria-live="polite">
           @if (hasDocuments) {
-            <p class="sm-docs-note">The documents are texted as a link after your message. Images and scheduling aren't available when sending documents.</p>
+            <p class="sm-docs-note">{{ labels.t('messagingSendMessagePanel.theDocumentsAreTextedAs') }}</p>
           }
           @if (warningLines.length > 0) {
-            <ui-alert variant="warning" title="Heads up" data-testid="send-warnings">
+            <ui-alert variant="warning" [title]="labels.t('messagingSendMessagePanel.headsUp')" data-testid="send-warnings">
               <ul class="sm-warn-list">
                 @for (w of warningLines; track w.key) { <li [attr.data-testid]="w.testId">{{ w.text }}</li> }
               </ul>
@@ -7051,7 +7126,7 @@ var SendTextComponent = class SendTextComponent {
 
       <!-- Video: the LAST section. The picker, and once a video is attached its settings, Watch Preview and Remove Video. -->
       @if (mode === 'compose' && showVideo()) {
-        <ui-form-section label="Video" [divider]="true">
+        <ui-form-section [label]="labels.t('common.video')" [divider]="true">
           @for (k of [videoPickerKey]; track k) {
             <ui-video-picker (videoSelected)="onVideoSelected($event)" />
           }
@@ -7073,17 +7148,15 @@ var SendTextComponent = class SendTextComponent {
         <div class="sp-modal" (click)="$event.stopPropagation()">
           <div class="sp-modal-header">
             <div class="sp-modal-title">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-              Text Preview
-            </div>
-            <button class="sp-close-btn" type="button" (click)="closeSendPreview()" aria-label="Close preview">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{ labels.t('messagingSendMessagePanel.textPreview') }}</div>
+            <button class="sp-close-btn" type="button" (click)="closeSendPreview()" [attr.aria-label]="labels.t('messagingSendMessagePanel.closePreview')">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </div>
           <div class="sp-text-meta">
             <div class="sp-meta-row">
-              <span class="sp-meta-label">To</span>
-              <span class="sp-meta-value">@if (bulk()) { {{ bulkRecipients()!.length }} recipient{{ bulkRecipients()!.length === 1 ? '' : 's' }} } @else { {{ contactName() }} {{ formatPhone(contactPhone()) }} }</span>
+              <span class="sp-meta-label">{{ labels.t('messagingSendMessagePanel.to') }}</span>
+              <span class="sp-meta-value">@if (bulk()) { {{ labels.t(bulkRecipients()!.length === 1 ? 'messagingSendMessagePanel.recipientCount_one' : 'messagingSendMessagePanel.recipientCount_other', { count: bulkRecipients()!.length }) }} } @else { {{ contactName() }} {{ formatPhone(contactPhone()) }} }</span>
             </div>
           </div>
           <div class="sp-text-body">{{ resolvedBody }}</div>
@@ -7097,10 +7170,8 @@ var SendTextComponent = class SendTextComponent {
         <div class="sp-modal" (click)="$event.stopPropagation()">
           <div class="sp-modal-header">
             <div class="sp-modal-title">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-              Text Preview
-            </div>
-            <button class="sp-close-btn" type="button" (click)="showQuickPreview = false; previewingTemplate = null" aria-label="Close preview">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{ labels.t('messagingSendMessagePanel.textPreview') }}</div>
+            <button class="sp-close-btn" type="button" (click)="showQuickPreview = false; previewingTemplate = null" [attr.aria-label]="labels.t('messagingSendMessagePanel.closePreview')">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </div>
@@ -7441,25 +7512,21 @@ i0.ɵɵngDeclareClassMetadata({
     <!-- Missing phone guard -->
     @if (!bulk() && !contactPhone()) {
       <div class="sm-missing-banner">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-        No phone number on file for this contact.
-      </div>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>{{ labels.t('messagingSendMessagePanel.noPhoneNumberOnFile') }}</div>
       <ui-text-input
-        label="Add Phone Number"
+        [label]="labels.t('messagingSendMessagePanel.addPhoneNumber')"
         type="tel"
         [required]="true"
         placeholder="(555) 000-0000"
         [(ngModel)]="pendingPhone"
         (ngModelChange)="notifyValid()"
-        [error]="pendingPhone && !pendingPhoneValid ? 'Please enter a valid phone number.' : ''" />
-      <ui-button variant="primary" [disabled]="!pendingPhoneValid || savingPhone()" [loading]="savingPhone()" (click)="savePhone()">
-        Save &amp; Continue
-      </ui-button>
+        [error]="pendingPhone && !pendingPhoneValid ? labels.t('validation.phone') : ''" />
+      <ui-button variant="primary" [disabled]="!pendingPhoneValid || savingPhone()" [loading]="savingPhone()" (click)="savePhone()">{{ labels.t('messagingSendMessagePanel.saveContinue') }}</ui-button>
     } @else {
       <!-- To (bulk mode: the panel shows the recipient summary instead) -->
       @if (!bulk()) {
       <div class="sm-group">
-        <span class="sm-group-label">To</span>
+        <span class="sm-group-label">{{ labels.t('messagingSendMessagePanel.to') }}</span>
         <div class="sm-to-card">
           <span class="sm-to-name">{{ contactName() }}</span>
           <span class="sm-to-detail">{{ formatPhone(contactPhone()) }}</span>
@@ -7470,23 +7537,23 @@ i0.ɵɵngDeclareClassMetadata({
       <!-- Mode (hidden with [showTemplates]="false": the form is Create Message only) -->
       @if (showTemplates()) {
       <div class="sm-mode-row">
-        <ui-pill-tabs [tabs]="modeTabs" [activeKey]="mode" (tabChange)="setMode($event)" />
+        <ui-pill-tabs [tabs]="modeTabs()" [activeKey]="mode" (tabChange)="setMode($event)" />
       </div>
       }
 
       @if (mode === 'compose') {
         <div class="sm-field">
           <ui-textarea-input
-            label="Message"
+            [label]="labels.t('common.message')"
             [required]="true"
-            placeholder="Write your message..."
+            [placeholder]="labels.t('messagingSendMessagePanel.writeYourMessage')"
             [rows]="8"
             [maxlength]="MAX_LENGTH"
             [(ngModel)]="body"
             [error]="composeTagError || videoLengthError"
             (ngModelChange)="notifyValid()" />
           <div class="sm-char-row">
-            <span class="sm-hint">Sent as SMS. Keep messages concise for best delivery.</span>
+            <span class="sm-hint">{{ labels.t('messagingSendMessagePanel.sentAsSmsKeepMessages') }}</span>
             <span class="sm-char-count" [class.sm-char-warn]="body.length > MAX_LENGTH * 0.9">
               {{ body.length }} / {{ MAX_LENGTH }}
             </span>
@@ -7495,14 +7562,14 @@ i0.ɵɵngDeclareClassMetadata({
 
         @if (!hasDocuments && showAttachments()) {
         <div class="sm-field">
-          <label class="sm-field-label">Add Image / Media (MMS)</label>
+          <label class="sm-field-label">{{ labels.t('messagingSendMessagePanel.addImageMediaMms') }}</label>
           @if (mediaAttachment()) {
             <div class="attach-chips">
               <div class="attach-chip">
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                 <span class="attach-name">{{ mediaAttachment()!.mediaFileName }}</span>
                 <span class="attach-size">{{ mediaAttachment()!.sizeLabel }}</span>
-                <button class="attach-remove" type="button" (click)="removeMedia()" aria-label="Remove attachment">&times;</button>
+                <button class="attach-remove" type="button" (click)="removeMedia()" [attr.aria-label]="labels.t('messagingSendMessagePanel.removeAttachment')">&times;</button>
               </div>
             </div>
           }
@@ -7510,10 +7577,10 @@ i0.ɵɵngDeclareClassMetadata({
             <input #smsFileInput type="file" accept="image/*,video/*,application/pdf" hidden (change)="onFileSelected($event)" />
             <button type="button" class="attach-add-btn" [disabled]="mediaUploading()" (click)="smsFileInput.click()">
               @if (mediaUploading()) {
-                <span class="attach-spinner"></span> Uploading...
+                <span class="attach-spinner"></span> {{ labels.t('messagingSendText.uploading') }}
               } @else {
                 <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
-                Attach Image
+                {{ labels.t('messagingSendMessagePanel.attachImage') }}
               }
             </button>
           }
@@ -7522,10 +7589,10 @@ i0.ɵɵngDeclareClassMetadata({
         }
 
         @if (!hasDocuments && showScheduling()) {
-        <ui-checkbox [checked]="showSchedule" label="Schedule for later" (checkedChange)="showSchedule = $event; notifyValid()" />
+        <ui-checkbox [checked]="showSchedule" [label]="labels.t('messagingSendMessagePanel.scheduleForLater')" (checkedChange)="showSchedule = $event; notifyValid()" />
         @if (showSchedule) {
           <ui-datetime-input
-            label="Send at"
+            [label]="labels.t('messagingSendMessagePanel.sendAt')"
             [min]="minScheduleTime"
             [(ngModel)]="scheduledAt"
             (ngModelChange)="notifyValid()" />
@@ -7535,14 +7602,12 @@ i0.ɵɵngDeclareClassMetadata({
         @if (missingVars.length > 0) {
           <div class="mv-section">
             <p class="mv-hint">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-              This template has fields that need values before sending.
-            </p>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>{{ labels.t('messagingSendMessagePanel.thisTemplateHasFieldsThat') }}</p>
             @for (key of missingVars; track key) {
               <div class="mv-row">
                 <div class="mv-input-wrap">
-                  <ui-text-input class="mv-text-input" [label]="formatVarLabel(key)" [required]="true" [placeholder]="'Enter ' + formatVarLabel(key).toLowerCase() + '...'" [(ngModel)]="pendingInputs[key]" (ngModelChange)="notifyValid()" (keydown.enter)="applyVar(key)" />
-                  <button class="mv-apply-btn" type="button" [disabled]="!(pendingInputs[key] || '').trim()" (click)="applyVar(key)" aria-label="Apply value">
+                  <ui-text-input class="mv-text-input" [label]="formatVarLabel(key)" [required]="true" [placeholder]="labels.t('messagingSendMessagePanel.enterValue', { name: formatVarLabel(key).toLowerCase() })" [(ngModel)]="pendingInputs[key]" (ngModelChange)="notifyValid()" (keydown.enter)="applyVar(key)" />
+                  <button class="mv-apply-btn" type="button" [disabled]="!(pendingInputs[key] || '').trim()" (click)="applyVar(key)" [attr.aria-label]="labels.t('messagingSendMessagePanel.applyValue')">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                   </button>
                 </div>
@@ -7553,20 +7618,16 @@ i0.ɵɵngDeclareClassMetadata({
 
         <div class="tpl-preview-header">
           <button class="tpl-back-btn" type="button" (click)="clearTemplate()">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
-            Back to templates
-          </button>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>{{ labels.t('messagingSendMessagePanel.backToTemplates') }}</button>
           <div class="tpl-view-toggle">
-            <button class="tpl-toggle-btn" [class.active]="previewFormat === 'preview'" [attr.aria-pressed]="previewFormat === 'preview'" type="button" (click)="setPreviewFormat('preview')">Preview</button>
-            <button class="tpl-toggle-btn" [class.active]="previewFormat === 'raw'" [attr.aria-pressed]="previewFormat === 'raw'" type="button" (click)="setPreviewFormat('raw')">Raw</button>
+            <button class="tpl-toggle-btn" [class.active]="previewFormat === 'preview'" [attr.aria-pressed]="previewFormat === 'preview'" type="button" (click)="setPreviewFormat('preview')">{{ labels.t('common.preview') }}</button>
+            <button class="tpl-toggle-btn" [class.active]="previewFormat === 'raw'" [attr.aria-pressed]="previewFormat === 'raw'" type="button" (click)="setPreviewFormat('raw')">{{ labels.t('messagingSendMessagePanel.raw') }}</button>
           </div>
         </div>
 
         <div class="tpl-send-preview-row">
           <ui-button variant="secondary" size="sm" (click)="openSendPreview()">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
-            View Send Preview
-          </ui-button>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>{{ labels.t('messagingSendMessagePanel.viewSendPreview') }}</ui-button>
         </div>
 
         @if (previewFormat === 'preview') {
@@ -7606,10 +7667,10 @@ i0.ɵɵngDeclareClassMetadata({
         <!-- One live region, at most ONE warning banner (every current non-blocking warning is a line in it). -->
         <div class="sm-docs-live" role="status" aria-live="polite">
           @if (hasDocuments) {
-            <p class="sm-docs-note">The documents are texted as a link after your message. Images and scheduling aren't available when sending documents.</p>
+            <p class="sm-docs-note">{{ labels.t('messagingSendMessagePanel.theDocumentsAreTextedAs') }}</p>
           }
           @if (warningLines.length > 0) {
-            <ui-alert variant="warning" title="Heads up" data-testid="send-warnings">
+            <ui-alert variant="warning" [title]="labels.t('messagingSendMessagePanel.headsUp')" data-testid="send-warnings">
               <ul class="sm-warn-list">
                 @for (w of warningLines; track w.key) { <li [attr.data-testid]="w.testId">{{ w.text }}</li> }
               </ul>
@@ -7620,7 +7681,7 @@ i0.ɵɵngDeclareClassMetadata({
 
       <!-- Video: the LAST section. The picker, and once a video is attached its settings, Watch Preview and Remove Video. -->
       @if (mode === 'compose' && showVideo()) {
-        <ui-form-section label="Video" [divider]="true">
+        <ui-form-section [label]="labels.t('common.video')" [divider]="true">
           @for (k of [videoPickerKey]; track k) {
             <ui-video-picker (videoSelected)="onVideoSelected($event)" />
           }
@@ -7642,17 +7703,15 @@ i0.ɵɵngDeclareClassMetadata({
         <div class="sp-modal" (click)="$event.stopPropagation()">
           <div class="sp-modal-header">
             <div class="sp-modal-title">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-              Text Preview
-            </div>
-            <button class="sp-close-btn" type="button" (click)="closeSendPreview()" aria-label="Close preview">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{ labels.t('messagingSendMessagePanel.textPreview') }}</div>
+            <button class="sp-close-btn" type="button" (click)="closeSendPreview()" [attr.aria-label]="labels.t('messagingSendMessagePanel.closePreview')">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </div>
           <div class="sp-text-meta">
             <div class="sp-meta-row">
-              <span class="sp-meta-label">To</span>
-              <span class="sp-meta-value">@if (bulk()) { {{ bulkRecipients()!.length }} recipient{{ bulkRecipients()!.length === 1 ? '' : 's' }} } @else { {{ contactName() }} {{ formatPhone(contactPhone()) }} }</span>
+              <span class="sp-meta-label">{{ labels.t('messagingSendMessagePanel.to') }}</span>
+              <span class="sp-meta-value">@if (bulk()) { {{ labels.t(bulkRecipients()!.length === 1 ? 'messagingSendMessagePanel.recipientCount_one' : 'messagingSendMessagePanel.recipientCount_other', { count: bulkRecipients()!.length }) }} } @else { {{ contactName() }} {{ formatPhone(contactPhone()) }} }</span>
             </div>
           </div>
           <div class="sp-text-body">{{ resolvedBody }}</div>
@@ -7666,10 +7725,8 @@ i0.ɵɵngDeclareClassMetadata({
         <div class="sp-modal" (click)="$event.stopPropagation()">
           <div class="sp-modal-header">
             <div class="sp-modal-title">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-              Text Preview
-            </div>
-            <button class="sp-close-btn" type="button" (click)="showQuickPreview = false; previewingTemplate = null" aria-label="Close preview">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{ labels.t('messagingSendMessagePanel.textPreview') }}</div>
+            <button class="sp-close-btn" type="button" (click)="showQuickPreview = false; previewingTemplate = null" [attr.aria-label]="labels.t('messagingSendMessagePanel.closePreview')">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
             </button>
           </div>
@@ -7912,13 +7969,21 @@ i0.ɵɵngDeclareClassMetadata({
 const BULK_MERGE_TAG_HINT = "Personal details such as {{first_name}} are filled in for each recipient when sent.";
 const SKIPPED_NAMES_SHOWN = 5;
 var SendMessagePanelComponent = class SendMessagePanelComponent {
-	skippedReason() {
-		return this.channel() === "email" ? "no email address" : "no phone number or no opt-in to texts";
+	get BULK_MERGE_TAG_HINT() {
+		return this.labels.t("messagingSendMessagePanel.bulkMergeTagHint");
+	}
+	skippedReason(count) {
+		const one = count === 1;
+		if (this.channel() === "email") return this.labels.t(one ? "messagingSendMessagePanel.reasonNoEmail_one" : "messagingSendMessagePanel.reasonNoEmail_other");
+		return this.labels.t(one ? "messagingSendMessagePanel.reasonNoPhone_one" : "messagingSendMessagePanel.reasonNoPhone_other");
 	}
 	skippedNames() {
-		const names = this.skippedRecipients().map((r) => r.name || "Unnamed");
+		const names = this.skippedRecipients().map((r) => r.name || this.labels.t("messagingSendMessagePanel.unnamed"));
 		const shown = names.slice(0, SKIPPED_NAMES_SHOWN).join(", ");
-		return names.length > SKIPPED_NAMES_SHOWN ? `${shown} and ${names.length - SKIPPED_NAMES_SHOWN} more` : shown;
+		return names.length > SKIPPED_NAMES_SHOWN ? this.labels.t("messagingSendMessagePanel.skippedNameMore", {
+			shown,
+			count: names.length - SKIPPED_NAMES_SHOWN
+		}) : shown;
 	}
 	bulkRecipientsFor(ch) {
 		if (!this.bulkMode()) return null;
@@ -7966,15 +8031,20 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 		this.jobOptions.set([]);
 	}
 	constructor() {
+		this.labels = inject(UiLabelsService);
 		this.open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
 		this.contact = input(null, ...ngDevMode ? [{ debugName: "contact" }] : /* istanbul ignore next */ []);
 		this.loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
 		this.recipients = input(null, ...ngDevMode ? [{ debugName: "recipients" }] : /* istanbul ignore next */ []);
 		this.initialChannel = input(null, ...ngDevMode ? [{ debugName: "initialChannel" }] : /* istanbul ignore next */ []);
-		this.recipientNoun = input("recipients", ...ngDevMode ? [{ debugName: "recipientNoun" }] : /* istanbul ignore next */ []);
+		this.recipientNoun = input("", ...ngDevMode ? [{ debugName: "recipientNoun" }] : /* istanbul ignore next */ []);
 		this.recipientNounSingular = input("", ...ngDevMode ? [{ debugName: "recipientNounSingular" }] : /* istanbul ignore next */ []);
 		this.textEnabled = input(false, ...ngDevMode ? [{ debugName: "textEnabled" }] : /* istanbul ignore next */ []);
-		this.title = input("Send Message", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.titleInput = input(null, {
+			...ngDevMode ? { debugName: "titleInput" } : /* istanbul ignore next */ {},
+			alias: "title"
+		});
+		this.title = computed(() => this.titleInput() ?? this.labels.t("messagingSendMessagePanel.title"), ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 		this.defaultSubject = input("", ...ngDevMode ? [{ debugName: "defaultSubject" }] : /* istanbul ignore next */ []);
 		this.defaultBody = input("", ...ngDevMode ? [{ debugName: "defaultBody" }] : /* istanbul ignore next */ []);
 		this.defaultMessage = input("", ...ngDevMode ? [{ debugName: "defaultMessage" }] : /* istanbul ignore next */ []);
@@ -7982,7 +8052,11 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 		this.sendEmail = input(null, ...ngDevMode ? [{ debugName: "sendEmail" }] : /* istanbul ignore next */ []);
 		this.sendText = input(null, ...ngDevMode ? [{ debugName: "sendText" }] : /* istanbul ignore next */ []);
 		this.showReceiptOption = input(false, ...ngDevMode ? [{ debugName: "showReceiptOption" }] : /* istanbul ignore next */ []);
-		this.receiptLabel = input("Include payment receipt", ...ngDevMode ? [{ debugName: "receiptLabel" }] : /* istanbul ignore next */ []);
+		this.receiptLabelInput = input(null, {
+			...ngDevMode ? { debugName: "receiptLabelInput" } : /* istanbul ignore next */ {},
+			alias: "receiptLabel"
+		});
+		this.receiptLabel = computed(() => this.receiptLabelInput() ?? this.labels.t("messagingSendMessagePanel.receiptLabel"), ...ngDevMode ? [{ debugName: "receiptLabel" }] : /* istanbul ignore next */ []);
 		this.receiptDefault = input(false, ...ngDevMode ? [{ debugName: "receiptDefault" }] : /* istanbul ignore next */ []);
 		this.documents = input(false, ...ngDevMode ? [{ debugName: "documents" }] : /* istanbul ignore next */ []);
 		this.documentsEnabled = input(true, ...ngDevMode ? [{ debugName: "documentsEnabled" }] : /* istanbul ignore next */ []);
@@ -7996,8 +8070,6 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 		this.showTemplates = input(true, ...ngDevMode ? [{ debugName: "showTemplates" }] : /* istanbul ignore next */ []);
 		this.showVideo = input(true, ...ngDevMode ? [{ debugName: "showVideo" }] : /* istanbul ignore next */ []);
 		this.inApp = computed(() => this.recipientMode() === "in-app" && !this.bulkMode(), ...ngDevMode ? [{ debugName: "inApp" }] : /* istanbul ignore next */ []);
-		this.BULK_NO_SEND_MESSAGE = BULK_NO_SEND_MESSAGE;
-		this.BULK_MERGE_TAG_HINT = BULK_MERGE_TAG_HINT;
 		this.attachmentsAndScheduling = input(true, ...ngDevMode ? [{ debugName: "attachmentsAndScheduling" }] : /* istanbul ignore next */ []);
 		this.allowAttachments = input(null, ...ngDevMode ? [{ debugName: "allowAttachments" }] : /* istanbul ignore next */ []);
 		this.allowScheduling = input(null, ...ngDevMode ? [{ debugName: "allowScheduling" }] : /* istanbul ignore next */ []);
@@ -8041,31 +8113,56 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 		this.submitSnapshot = null;
 		this.recipientWord = computed(() => {
 			const n = this.bulkList().length;
-			const plural = this.recipientNoun() || "recipients";
+			const plural = this.recipientNoun() || this.labels.t("messagingSendMessagePanel.recipientsWord");
 			if (n !== 1) return plural;
 			return this.recipientNounSingular() || (plural.endsWith("s") ? plural.slice(0, -1) : plural);
 		}, ...ngDevMode ? [{ debugName: "recipientWord" }] : /* istanbul ignore next */ []);
 		this.skippedText = computed(() => {
 			const n = this.skippedRecipients().length;
 			if (n === 0) return "";
-			const what = this.channel() === "email" ? "email" : "text";
-			return `${n} ${n === 1 ? "has" : "have"} ${this.skippedReason()} and will be skipped (${this.skippedNames()}). Only the others get this ${what}.`;
+			const what = this.channel() === "email" ? this.labels.t("messagingSendMessagePanel.whatEmail") : this.labels.t("messagingSendMessagePanel.whatText");
+			return this.labels.t(n === 1 ? "messagingSendMessagePanel.skippedText_one" : "messagingSendMessagePanel.skippedText_other", {
+				count: n,
+				reason: this.skippedReason(n),
+				names: this.skippedNames(),
+				what
+			});
 		}, ...ngDevMode ? [{ debugName: "skippedText" }] : /* istanbul ignore next */ []);
 		this.noneEligibleText = computed(() => {
-			return `None of the ${this.bulkList().length} selected can receive this ${this.channel() === "email" ? "email" : "text message"} (${this.skippedReason()}), so there is nothing to send.`;
+			const n = this.bulkList().length;
+			const what = this.channel() === "email" ? this.labels.t("messagingSendMessagePanel.whatEmail") : this.labels.t("messagingSendMessagePanel.whatTextMessage");
+			return this.labels.t(n === 1 ? "messagingSendMessagePanel.noneEligible_one" : "messagingSendMessagePanel.noneEligible_other", {
+				count: n,
+				what,
+				reason: this.skippedReason(n)
+			});
 		}, ...ngDevMode ? [{ debugName: "noneEligibleText" }] : /* istanbul ignore next */ []);
 		this.bulkAnnouncement = computed(() => {
 			if (!this.bulkMode()) return "";
 			const n = this.bulkList().length;
 			const ok = this.activeRecipients().length;
-			const ch = this.channel() === "email" ? "email" : "text";
-			if (ok === 0) return `${n} ${this.recipientWord()} selected. None can receive the ${ch}.`;
+			const ch = this.channel() === "email" ? this.labels.t("messagingSendMessagePanel.whatEmail") : this.labels.t("messagingSendMessagePanel.whatText");
+			if (ok === 0) return this.labels.t(n === 1 ? "messagingSendMessagePanel.announceNone_one" : "messagingSendMessagePanel.announceNone_other", {
+				count: n,
+				word: this.recipientWord(),
+				channel: ch
+			});
 			const skipped = this.skippedRecipients().length;
-			return `${n} ${this.recipientWord()} selected. ${ok} can receive the ${ch}.${skipped ? ` ${skipped} will be skipped.` : ""}`;
+			const someKey = n === 1 ? "messagingSendMessagePanel.announceSome_one" : ok === 1 ? "messagingSendMessagePanel.announceSome_okOne" : "messagingSendMessagePanel.announceSome_other";
+			return this.labels.t(someKey, {
+				count: n,
+				word: this.recipientWord(),
+				ok,
+				channel: ch
+			}) + (skipped ? " " + this.labels.t(skipped === 1 ? "messagingSendMessagePanel.announceSkipped_one" : "messagingSendMessagePanel.announceSkipped_other", { count: skipped }) : "");
 		}, ...ngDevMode ? [{ debugName: "bulkAnnouncement" }] : /* istanbul ignore next */ []);
 		this.lastBulkResult = void 0;
 		this.showJobPicker = input(false, ...ngDevMode ? [{ debugName: "showJobPicker" }] : /* istanbul ignore next */ []);
-		this.jobLabel = input("Job", ...ngDevMode ? [{ debugName: "jobLabel" }] : /* istanbul ignore next */ []);
+		this.jobLabelInput = input(null, {
+			...ngDevMode ? { debugName: "jobLabelInput" } : /* istanbul ignore next */ {},
+			alias: "jobLabel"
+		});
+		this.jobLabel = computed(() => this.jobLabelInput() ?? this.labels.t("messagingSendMessagePanel.jobLabel"), ...ngDevMode ? [{ debugName: "jobLabel" }] : /* istanbul ignore next */ []);
 		this.jobHint = input("", ...ngDevMode ? [{ debugName: "jobHint" }] : /* istanbul ignore next */ []);
 		this.jobSearch = input(null, ...ngDevMode ? [{ debugName: "jobSearch" }] : /* istanbul ignore next */ []);
 		this.jobSelected = output();
@@ -8097,10 +8194,10 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 			if (!c || this.inApp()) return [];
 			const notices = [];
 			const hasEmail = !!c.email, hasPhone = !!c.phone;
-			if (!this.textEnabled()) notices.push("Text messaging is not enabled. Connect Twilio in Comm Settings to send texts.");
-			else if (!c.smsOptedIn) notices.push(`${c.name} has not opted in to receive text messages, so this can only be sent by email.${!hasEmail && hasPhone ? " Add an email address below to send." : ""}`);
-			else if (!hasPhone) notices.push(`${c.name} has no phone number on file, so a text needs one added first.`);
-			if (!hasEmail && !hasPhone) notices.push(`${c.name} has no email address or phone number on file. Add an email address below to send.`);
+			if (!this.textEnabled()) notices.push(this.labels.t("messagingSendMessagePanel.noticeTextDisabled"));
+			else if (!c.smsOptedIn) notices.push(this.labels.t("messagingSendMessagePanel.noticeNoOptIn", { name: c.name }) + (!hasEmail && hasPhone ? " " + this.labels.t("messagingSendMessagePanel.noticeAddEmailBelow") : ""));
+			else if (!hasPhone) notices.push(this.labels.t("messagingSendMessagePanel.noticeNoPhone", { name: c.name }));
+			if (!hasEmail && !hasPhone) notices.push(this.labels.t("messagingSendMessagePanel.noticeNoContact", { name: c.name }));
 			return notices;
 		}, ...ngDevMode ? [{ debugName: "contactNotices" }] : /* istanbul ignore next */ []);
 		this.channel = signal("email", ...ngDevMode ? [{ debugName: "channel" }] : /* istanbul ignore next */ []);
@@ -8300,8 +8397,8 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				title: {
-					classPropertyName: "title",
+				titleInput: {
+					classPropertyName: "titleInput",
 					publicName: "title",
 					isSignal: true,
 					isRequired: false,
@@ -8356,8 +8453,8 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				receiptLabel: {
-					classPropertyName: "receiptLabel",
+				receiptLabelInput: {
+					classPropertyName: "receiptLabelInput",
 					publicName: "receiptLabel",
 					isSignal: true,
 					isRequired: false,
@@ -8580,8 +8677,8 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 					isRequired: false,
 					transformFunction: null
 				},
-				jobLabel: {
-					classPropertyName: "jobLabel",
+				jobLabelInput: {
+					classPropertyName: "jobLabelInput",
 					publicName: "jobLabel",
 					isSignal: true,
 					isRequired: false,
@@ -8641,8 +8738,8 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
       [open]="open()"
       [title]="title()"
       [wide]="wide()"
-      cancelLabel="Cancel"
-      [primaryLabel]="!loading() && hasTarget() ? (sendLabel() || (inApp() ? 'Send Message' : channel() === 'email' ? 'Send Email' : 'Send Text')) : ''"
+      [cancelLabel]="labels.t('common.cancel')"
+      [primaryLabel]="!loading() && hasTarget() ? (sendLabel() || (inApp() ? labels.t('messagingSendMessagePanel.sendMessage') : channel() === 'email' ? labels.t('messagingSendMessagePanel.sendEmail') : labels.t('messagingSendMessagePanel.sendText'))) : ''"
       primaryVariant="warning"
       [primaryDisabled]="!valid() || bulkBlocked()"
       (closed)="onClose()"
@@ -8659,25 +8756,25 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
       @if (!loading() && !hasTarget() && !inApp()) {
         <div class="msg-step">
           <span class="msg-step-badge">1</span>
-          <span class="msg-step-text">Who would you like to message?</span>
+          <span class="msg-step-text">{{ labels.t('messagingSendMessagePanel.whoWouldYouLikeTo') }}</span>
         </div>
         <ui-contact-picker
-          placeholder="Search by contact name..."
+          [placeholder]="labels.t('messagingSendMessagePanel.searchByContactName')"
           (contactSelected)="onContactSelected($event)" />
       }
 
       @if (!loading() && hasTarget()) {
         @if (bulkMode()) {
-          <div class="msg-bulk" role="group" aria-label="Recipients" data-testid="bulk-summary">
-            <p class="msg-bulk-to" data-testid="bulk-to">To: {{ bulkList().length }} {{ recipientWord() }}</p>
+          <div class="msg-bulk" role="group" [attr.aria-label]="labels.t('messagingSendMessagePanel.recipients')" data-testid="bulk-summary">
+            <p class="msg-bulk-to" data-testid="bulk-to">{{ labels.t('messagingSendMessagePanel.toLabel') }} {{ bulkList().length }} {{ recipientWord() }}</p>
             <div class="msg-bulk-counts">
-              <ui-badge [label]="emailRecipients().length + ' can receive email'" [variant]="emailRecipients().length ? 'blue' : 'gray'" />
+              <ui-badge [label]="labels.t(emailRecipients().length === 1 ? 'messagingSendMessagePanel.canReceiveEmail_one' : 'messagingSendMessagePanel.canReceiveEmail_other', { count: emailRecipients().length })" [variant]="emailRecipients().length ? 'blue' : 'gray'" />
               @if (textEnabled()) {
-                <ui-badge [label]="textRecipients().length + ' can receive text'" [variant]="textRecipients().length ? 'blue' : 'gray'" />
+                <ui-badge [label]="labels.t(textRecipients().length === 1 ? 'messagingSendMessagePanel.canReceiveText_one' : 'messagingSendMessagePanel.canReceiveText_other', { count: textRecipients().length })" [variant]="textRecipients().length ? 'blue' : 'gray'" />
               }
             </div>
             @if (!textEnabled()) {
-              <ui-hint>Text messaging is not enabled. Connect Twilio in Comm Settings to send texts.</ui-hint>
+              <ui-hint>{{ labels.t('messagingSendMessagePanel.textMessagingIsNotEnabled') }}</ui-hint>
             }
             <span class="msg-sr" role="status" data-testid="bulk-live">{{ bulkAnnouncement() }}</span>
             @if (skippedRecipients().length > 0 && !bulkNoneEligible()) {
@@ -8687,7 +8784,7 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
               <ui-alert variant="warning" [quiet]="true" data-testid="bulk-none-eligible">{{ noneEligibleText() }}</ui-alert>
             }
             @if (bulkMissingSend()) {
-              <ui-alert variant="danger" data-testid="bulk-no-send">{{ BULK_NO_SEND_MESSAGE }}</ui-alert>
+              <ui-alert variant="danger" data-testid="bulk-no-send">{{ labels.t('messagingSendMessagePanel.bulkNoSend') }}</ui-alert>
             }
             @if (!bulkNoneEligible()) {
               <ui-hint data-testid="bulk-merge-hint">{{ BULK_MERGE_TAG_HINT }}</ui-hint>
@@ -8697,23 +8794,19 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 
         @if (bulkMode() && textEnabled() && emailRecipients().length > 0 && textRecipients().length > 0) {
           <div class="msg-channel-row" data-testid="bulk-channel-row">
-            <label class="form-label msg-via-label">Send via</label>
+            <label class="form-label msg-via-label">{{ labels.t('messagingSendMessagePanel.sendVia') }}</label>
             @if (sending()) {
               <!-- A send is in flight: the toggle is replaced by plain text (ui-toggle-badge has no disabled state), so nothing pressable remains. -->
               <div class="msg-via-tabs">
-                <ui-badge [label]="channel() === 'email' ? 'Email' : 'Text'" variant="blue" />
-                <span class="msg-locked-note" role="status" data-testid="bulk-channel-locked">Channel locked while sending.</span>
+                <ui-badge [label]="channel() === 'email' ? labels.t('common.email') : labels.t('common.text')" variant="blue" />
+                <span class="msg-locked-note" role="status" data-testid="bulk-channel-locked">{{ labels.t('messagingSendMessagePanel.channelLockedWhileSending') }}</span>
               </div>
             } @else {
               <div class="msg-via-tabs">
                 <ui-toggle-badge [active]="channel() === 'email'" (toggle)="onChannelChange('email')">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
-                  Email
-                </ui-toggle-badge>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>{{ labels.t('common.email') }}</ui-toggle-badge>
                 <ui-toggle-badge [active]="channel() === 'text'" (toggle)="onChannelChange('text')">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-                  Text
-                </ui-toggle-badge>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{ labels.t('common.text') }}</ui-toggle-badge>
               </div>
             }
           </div>
@@ -8721,16 +8814,12 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
 
         @if (!bulkMode() && !inApp() && textEnabled() && activeContact()?.smsOptedIn) {
           <div class="msg-channel-row">
-            <label class="form-label msg-via-label">Send via</label>
+            <label class="form-label msg-via-label">{{ labels.t('messagingSendMessagePanel.sendVia') }}</label>
             <div class="msg-via-tabs">
               <ui-toggle-badge [active]="channel() === 'email'" (toggle)="onChannelChange('email')">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
-                Email
-              </ui-toggle-badge>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>{{ labels.t('common.email') }}</ui-toggle-badge>
               <ui-toggle-badge [active]="channel() === 'text'" (toggle)="onChannelChange('text')">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-                Text
-              </ui-toggle-badge>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{ labels.t('common.text') }}</ui-toggle-badge>
             </div>
           </div>
         }
@@ -8747,8 +8836,8 @@ var SendMessagePanelComponent = class SendMessagePanelComponent {
           @for (epoch of [formEpoch()]; track epoch) {
             <div class="msg-job">
               <ui-combobox
-                [label]="jobLabel()" placeholder="Search by job name…" [hint]="jobHint()"
-                [options]="jobOptions()" [loading]="jobLoading()" noResultsText="No jobs found" [minChars]="2" [debounce]="300"
+                [label]="jobLabel()" [placeholder]="labels.t('messagingSendMessagePanel.searchByJobName')" [hint]="jobHint()"
+                [options]="jobOptions()" [loading]="jobLoading()" [noResultsText]="labels.t('messagingSendMessagePanel.noJobsFound')" [minChars]="2" [debounce]="300"
                 [value]="jobValue()"
                 (searchChange)="jobSearch$.next($event)" (valueChange)="onJobPick($event)" />
             </div>
@@ -9117,8 +9206,8 @@ i0.ɵɵngDeclareClassMetadata({
       [open]="open()"
       [title]="title()"
       [wide]="wide()"
-      cancelLabel="Cancel"
-      [primaryLabel]="!loading() && hasTarget() ? (sendLabel() || (inApp() ? 'Send Message' : channel() === 'email' ? 'Send Email' : 'Send Text')) : ''"
+      [cancelLabel]="labels.t('common.cancel')"
+      [primaryLabel]="!loading() && hasTarget() ? (sendLabel() || (inApp() ? labels.t('messagingSendMessagePanel.sendMessage') : channel() === 'email' ? labels.t('messagingSendMessagePanel.sendEmail') : labels.t('messagingSendMessagePanel.sendText'))) : ''"
       primaryVariant="warning"
       [primaryDisabled]="!valid() || bulkBlocked()"
       (closed)="onClose()"
@@ -9135,25 +9224,25 @@ i0.ɵɵngDeclareClassMetadata({
       @if (!loading() && !hasTarget() && !inApp()) {
         <div class="msg-step">
           <span class="msg-step-badge">1</span>
-          <span class="msg-step-text">Who would you like to message?</span>
+          <span class="msg-step-text">{{ labels.t('messagingSendMessagePanel.whoWouldYouLikeTo') }}</span>
         </div>
         <ui-contact-picker
-          placeholder="Search by contact name..."
+          [placeholder]="labels.t('messagingSendMessagePanel.searchByContactName')"
           (contactSelected)="onContactSelected($event)" />
       }
 
       @if (!loading() && hasTarget()) {
         @if (bulkMode()) {
-          <div class="msg-bulk" role="group" aria-label="Recipients" data-testid="bulk-summary">
-            <p class="msg-bulk-to" data-testid="bulk-to">To: {{ bulkList().length }} {{ recipientWord() }}</p>
+          <div class="msg-bulk" role="group" [attr.aria-label]="labels.t('messagingSendMessagePanel.recipients')" data-testid="bulk-summary">
+            <p class="msg-bulk-to" data-testid="bulk-to">{{ labels.t('messagingSendMessagePanel.toLabel') }} {{ bulkList().length }} {{ recipientWord() }}</p>
             <div class="msg-bulk-counts">
-              <ui-badge [label]="emailRecipients().length + ' can receive email'" [variant]="emailRecipients().length ? 'blue' : 'gray'" />
+              <ui-badge [label]="labels.t(emailRecipients().length === 1 ? 'messagingSendMessagePanel.canReceiveEmail_one' : 'messagingSendMessagePanel.canReceiveEmail_other', { count: emailRecipients().length })" [variant]="emailRecipients().length ? 'blue' : 'gray'" />
               @if (textEnabled()) {
-                <ui-badge [label]="textRecipients().length + ' can receive text'" [variant]="textRecipients().length ? 'blue' : 'gray'" />
+                <ui-badge [label]="labels.t(textRecipients().length === 1 ? 'messagingSendMessagePanel.canReceiveText_one' : 'messagingSendMessagePanel.canReceiveText_other', { count: textRecipients().length })" [variant]="textRecipients().length ? 'blue' : 'gray'" />
               }
             </div>
             @if (!textEnabled()) {
-              <ui-hint>Text messaging is not enabled. Connect Twilio in Comm Settings to send texts.</ui-hint>
+              <ui-hint>{{ labels.t('messagingSendMessagePanel.textMessagingIsNotEnabled') }}</ui-hint>
             }
             <span class="msg-sr" role="status" data-testid="bulk-live">{{ bulkAnnouncement() }}</span>
             @if (skippedRecipients().length > 0 && !bulkNoneEligible()) {
@@ -9163,7 +9252,7 @@ i0.ɵɵngDeclareClassMetadata({
               <ui-alert variant="warning" [quiet]="true" data-testid="bulk-none-eligible">{{ noneEligibleText() }}</ui-alert>
             }
             @if (bulkMissingSend()) {
-              <ui-alert variant="danger" data-testid="bulk-no-send">{{ BULK_NO_SEND_MESSAGE }}</ui-alert>
+              <ui-alert variant="danger" data-testid="bulk-no-send">{{ labels.t('messagingSendMessagePanel.bulkNoSend') }}</ui-alert>
             }
             @if (!bulkNoneEligible()) {
               <ui-hint data-testid="bulk-merge-hint">{{ BULK_MERGE_TAG_HINT }}</ui-hint>
@@ -9173,23 +9262,19 @@ i0.ɵɵngDeclareClassMetadata({
 
         @if (bulkMode() && textEnabled() && emailRecipients().length > 0 && textRecipients().length > 0) {
           <div class="msg-channel-row" data-testid="bulk-channel-row">
-            <label class="form-label msg-via-label">Send via</label>
+            <label class="form-label msg-via-label">{{ labels.t('messagingSendMessagePanel.sendVia') }}</label>
             @if (sending()) {
               <!-- A send is in flight: the toggle is replaced by plain text (ui-toggle-badge has no disabled state), so nothing pressable remains. -->
               <div class="msg-via-tabs">
-                <ui-badge [label]="channel() === 'email' ? 'Email' : 'Text'" variant="blue" />
-                <span class="msg-locked-note" role="status" data-testid="bulk-channel-locked">Channel locked while sending.</span>
+                <ui-badge [label]="channel() === 'email' ? labels.t('common.email') : labels.t('common.text')" variant="blue" />
+                <span class="msg-locked-note" role="status" data-testid="bulk-channel-locked">{{ labels.t('messagingSendMessagePanel.channelLockedWhileSending') }}</span>
               </div>
             } @else {
               <div class="msg-via-tabs">
                 <ui-toggle-badge [active]="channel() === 'email'" (toggle)="onChannelChange('email')">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
-                  Email
-                </ui-toggle-badge>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>{{ labels.t('common.email') }}</ui-toggle-badge>
                 <ui-toggle-badge [active]="channel() === 'text'" (toggle)="onChannelChange('text')">
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-                  Text
-                </ui-toggle-badge>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{ labels.t('common.text') }}</ui-toggle-badge>
               </div>
             }
           </div>
@@ -9197,16 +9282,12 @@ i0.ɵɵngDeclareClassMetadata({
 
         @if (!bulkMode() && !inApp() && textEnabled() && activeContact()?.smsOptedIn) {
           <div class="msg-channel-row">
-            <label class="form-label msg-via-label">Send via</label>
+            <label class="form-label msg-via-label">{{ labels.t('messagingSendMessagePanel.sendVia') }}</label>
             <div class="msg-via-tabs">
               <ui-toggle-badge [active]="channel() === 'email'" (toggle)="onChannelChange('email')">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
-                Email
-              </ui-toggle-badge>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>{{ labels.t('common.email') }}</ui-toggle-badge>
               <ui-toggle-badge [active]="channel() === 'text'" (toggle)="onChannelChange('text')">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-                Text
-              </ui-toggle-badge>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>{{ labels.t('common.text') }}</ui-toggle-badge>
             </div>
           </div>
         }
@@ -9223,8 +9304,8 @@ i0.ɵɵngDeclareClassMetadata({
           @for (epoch of [formEpoch()]; track epoch) {
             <div class="msg-job">
               <ui-combobox
-                [label]="jobLabel()" placeholder="Search by job name…" [hint]="jobHint()"
-                [options]="jobOptions()" [loading]="jobLoading()" noResultsText="No jobs found" [minChars]="2" [debounce]="300"
+                [label]="jobLabel()" [placeholder]="labels.t('messagingSendMessagePanel.searchByJobName')" [hint]="jobHint()"
+                [options]="jobOptions()" [loading]="jobLoading()" [noResultsText]="labels.t('messagingSendMessagePanel.noJobsFound')" [minChars]="2" [debounce]="300"
                 [value]="jobValue()"
                 (searchChange)="jobSearch$.next($event)" (valueChange)="onJobPick($event)" />
             </div>
@@ -9402,7 +9483,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		title: [{
+		titleInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -9466,7 +9547,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		receiptLabel: [{
+		receiptLabelInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
@@ -9722,7 +9803,7 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		jobLabel: [{
+		jobLabelInput: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,