ooxml-ui 1.14.0 → 1.16.0

package/dist/{chunk-C3MXKNNK.js → chunk-JVNIZBG7.js}

@@ -1,10 +1,11 @@
+import { TeamsLitElement, LOCALE_HOST, teamsI18n, inheritLocale, pushLocale } from './chunk-GSWCAZQ3.js';
 import { THEME_CSS, installOfficeUiTheme } from './chunk-7E3HU7RL.js';
-import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-LAVVSCRJ.js';
+import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-CHFMXUPK.js';
 import { registerIcon, getIcon } from './chunk-M6GF5ED2.js';
 import { initialsOf, definePresence } from './chunk-KNC2UEUR.js';
 import { definer, OfficeElement, controlStyles } from './chunk-CWBSXK7P.js';
-import { nothing, html, LitElement, unsafeCSS, svg } from 'lit';
-import { filterActivity, ACTIVITY_FILTERS, describeActivity, localZone, startOfDay, occurrencesBetween, DAY_MS as DAY_MS$1, dayKey, zonedToUtc, viewDays, zonedParts, shiftAnchor, layoutDay, mentionQueryAt, filterMentionTargets, insertMention, MAX_ATTACHMENTS, mentionsUser, mentionSegments, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, STATUS_DURATIONS, STATUS_DURATION_LABELS, PRESENCE_LABELS, MAX_STATUS_MESSAGE_CHARS, isPresenceStatus, PRESENCE_STATUSES, isStatusDuration, IDLE_MINUTE_CHOICES, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, MAX_CHAT_MEMBERS, occurrenceAt, MAX_RECURRENCE_COUNT, MINUTE_MS, MAX_MEETING_TITLE, MAX_MEETING_DESCRIPTION, markdownBlocks, createTeamsClient, sanitizeAttachment, markdownInline } from 'ooxml-core/teams';
+import { nothing, html, unsafeCSS, svg } from 'lit';
+import { filterActivity, ACTIVITY_FILTERS, localZone, startOfDay, occurrencesBetween, DAY_MS as DAY_MS$1, dayKey, zonedToUtc, viewDays, zonedParts, shiftAnchor, layoutDay, mentionQueryAt, filterMentionTargets, insertMention, MAX_ATTACHMENTS, mentionsUser, mentionSegments, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, STATUS_DURATIONS, MAX_STATUS_MESSAGE_CHARS, isPresenceStatus, PRESENCE_STATUSES, isStatusDuration, IDLE_MINUTE_CHOICES, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, MAX_CHAT_MEMBERS, occurrenceAt, MAX_RECURRENCE_COUNT, MINUTE_MS, MAX_MEETING_TITLE, MAX_MEETING_DESCRIPTION, markdownBlocks, repeatChoices, serverOrigin, probeTeamsAccounts, requestTeamsSession, signOutTeamsSession, checkTeamsSession, createTeamsClient, sanitizeAttachment, markdownInline, TeamsSignInError } from 'ooxml-core/teams';
 import { repeat } from 'lit/directives/repeat.js';
 import { live } from 'lit/directives/live.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -19,6 +20,37 @@ var withStyles = (css) => {
 };
 var TeamsElement = class extends OfficeElement {
   static syncUpdates = false;
+  static properties = { locale: { type: String } };
+  constructor() {
+    super();
+    this.locale = "";
+  }
+  get [LOCALE_HOST]() {
+    return true;
+  }
+  get i18n() {
+    return teamsI18n(this.locale);
+  }
+  t(key, params) {
+    return this.i18n.t(key, params);
+  }
+  tn(key, count, params) {
+    return this.i18n.tn(key, count, params);
+  }
+  /** The accessible name of the host element itself, rewritten with every update. */
+  hostLabel() {
+    return void 0;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    inheritLocale(this);
+  }
+  update(changed) {
+    super.update(changed);
+    const label = this.hostLabel();
+    if (label !== void 0) this.setAttribute("aria-label", label);
+    if (changed.has("locale")) pushLocale(this);
+  }
 };
 function colorFor(id) {
   let hue = 0;
@@ -26,32 +58,68 @@ function colorFor(id) {
   return `hsl(${hue} 45% 42%)`;
 }
 var DAY_MS = 864e5;
-function formatTime(ts) {
-  return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+function formatTime(ts, locale) {
+  return new Date(ts).toLocaleTimeString(teamsI18n(locale).intl, {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
 }
-function dayLabel(ts, now = Date.now()) {
+function dayKind(ts, now = Date.now()) {
   const start = (t) => new Date(t).setHours(0, 0, 0, 0);
   const diff = Math.round((start(now) - start(ts)) / DAY_MS);
-  if (diff === 0) return "Today";
-  if (diff === 1) return "Yesterday";
-  return new Date(ts).toLocaleDateString([], { weekday: "long", month: "long", day: "numeric" });
+  return diff === 0 ? "today" : diff === 1 ? "yesterday" : "other";
 }
-function formatSize(bytes) {
+function dayLabel(ts, now = Date.now(), locale) {
+  const i18n = teamsI18n(locale);
+  const kind = dayKind(ts, now);
+  if (kind === "today") return i18n.t("time.today");
+  if (kind === "yesterday") return i18n.t("time.yesterday");
+  return new Date(ts).toLocaleDateString(i18n.intl, {
+    weekday: "long",
+    month: "long",
+    day: "numeric"
+  });
+}
+function formatSize(bytes, locale) {
   if (bytes === void 0) return "";
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1048576) return `${Math.round(bytes / 1024)} KB`;
-  return `${(bytes / 1048576).toFixed(1)} MB`;
+  const i18n = teamsI18n(locale);
+  const number = (n, digits = 0) => new Intl.NumberFormat(i18n.intl, {
+    maximumFractionDigits: digits,
+    minimumFractionDigits: digits
+  }).format(n);
+  if (bytes < 1024) return i18n.t("size.bytes", { size: number(bytes) });
+  if (bytes < 1048576) return i18n.t("size.kb", { size: number(Math.round(bytes / 1024)) });
+  return i18n.t("size.mb", { size: number(bytes / 1048576, 1) });
 }
-var timeOnly = (ts) => new Date(ts).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
-function formatWhen(start, end) {
-  const day = new Date(start).toLocaleDateString([], {
+var timeOnly = (ts, intl) => new Date(ts).toLocaleTimeString(intl, { hour: "numeric", minute: "2-digit" });
+function formatWhen(start, end, locale) {
+  const intl = teamsI18n(locale).intl;
+  const day = new Date(start).toLocaleDateString(intl, {
     weekday: "short",
     month: "short",
     day: "numeric"
   });
   const sameDay = new Date(start).toDateString() === new Date(end).toDateString();
-  const tail = sameDay ? timeOnly(end) : `${new Date(end).toLocaleDateString([], { month: "short", day: "numeric" })}, ${timeOnly(end)}`;
-  return `${day}, ${timeOnly(start)} - ${tail}`;
+  const tail = sameDay ? timeOnly(end, intl) : `${new Date(end).toLocaleDateString(intl, { month: "short", day: "numeric" })}, ${timeOnly(end, intl)}`;
+  return `${day}, ${timeOnly(start, intl)} - ${tail}`;
+}
+
+// src/teams/i18n/describe.ts
+function describeActivityIn(item, i18n) {
+  const where = item.chat ? item.channelName : `# ${item.channelName}`;
+  const actor = item.actorName;
+  switch (item.kind) {
+    case "mention":
+      return i18n.t("activity.mention", { actor, where });
+    case "reply":
+      return i18n.t("activity.reply", { actor, where });
+    case "reaction":
+      return item.emoji ? i18n.t("activity.reactionEmoji", { actor, emoji: item.emoji }) : i18n.t("activity.reaction", { actor });
+    case "pin":
+      return i18n.t("activity.pin", { actor, where });
+    case "meeting":
+      return i18n.t("activity.meeting", { title: item.channelName });
+  }
 }
 var GLYPHS = {
   back: "M12.5 4 6.5 10l6 6",
@@ -90,12 +158,12 @@ function icon(name) {
 var activity_feed_default = ":host {\n	display: flex;\n	flex-direction: column;\n	min-height: 0;\n	overflow: hidden;\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2);\n	padding: var(--office-space-3) var(--office-space-3) var(--office-space-1);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	font-weight: var(--office-font-weight-bold);\n}\n.read-all {\n	padding: var(--office-space-1) var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-brand);\n	font-size: var(--office-font-size-sm);\n}\n.read-all:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n.read-all:disabled {\n	color: var(--office-teams-text-subtle);\n	cursor: default;\n}\n.filters {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	padding: var(--office-space-1) var(--office-space-3) var(--office-space-2);\n}\n.filters button {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: transparent;\n	font-size: var(--office-font-size-sm);\n}\n.filters button:hover {\n	background: var(--office-selected);\n}\n.filters button[aria-pressed='true'] {\n	border-color: var(--office-teams-brand);\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.count {\n	min-width: 1.4em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-3xs);\n	line-height: 1.6;\n	text-align: center;\n}\nul {\n	flex: 1;\n	min-height: 0;\n	margin: 0;\n	padding: 0 var(--office-space-2) var(--office-space-2);\n	overflow-y: auto;\n	list-style: none;\n}\nli {\n	position: relative;\n}\n.item {\n	display: flex;\n	align-items: flex-start;\n	gap: var(--office-space-3);\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: inherit;\n	text-align: start;\n}\n.item:hover {\n	background: var(--office-selected);\n}\n.item[aria-current='true'] {\n	background: var(--office-teams-brand-subtle);\n}\n.face {\n	position: relative;\n	flex: none;\n}\n.kind {\n	position: absolute;\n	inset-block-end: calc(-1 * var(--office-space-1));\n	inset-inline-end: calc(-1 * var(--office-space-1));\n	display: grid;\n	place-items: center;\n	width: 1.5em;\n	height: 1.5em;\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\n.kind svg {\n	width: 0.9em;\n	height: 0.9em;\n}\n.text {\n	display: flex;\n	flex: 1;\n	flex-direction: column;\n	min-width: 0;\n}\n.line {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\nli[data-unread='true'] .line {\n	font-weight: var(--office-font-weight-bold);\n}\n.preview {\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.when {\n	display: flex;\n	flex: none;\n	flex-direction: column;\n	align-items: flex-end;\n	gap: var(--office-space-1);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.dot {\n	width: 0.7em;\n	height: 0.7em;\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.toggle {\n	position: absolute;\n	inset-block-end: var(--office-space-1);\n	inset-inline-end: var(--office-space-2);\n	display: none;\n	place-items: center;\n	width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: var(--office-popover);\n	color: var(--office-teams-text-subtle);\n	box-shadow: var(--office-shadow-teams);\n}\nli:hover .toggle,\nli:focus-within .toggle {\n	display: grid;\n}\n.empty {\n	margin: 0;\n	padding: var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n	text-align: center;\n}\n@media (pointer: coarse) {\n	.filters button,\n	.read-all {\n		min-height: var(--office-touch-target, 44px);\n	}\n	.toggle {\n		display: grid;\n		width: var(--office-touch-target, 44px);\n		height: var(--office-touch-target, 44px);\n	}\n}\n";
 
 // src/teams/activity-feed.ts
-var FILTER_LABEL = {
-  all: "All",
-  unread: "Unread",
-  mentions: "Mentions",
-  replies: "Replies",
-  reactions: "Reactions"
+var FILTER_KEY = {
+  all: "activity.filter.all",
+  unread: "activity.filter.unread",
+  mentions: "activity.filter.mentions",
+  replies: "activity.filter.replies",
+  reactions: "activity.filter.reactions"
 };
 var KIND_ICON = {
   mention: "at",
@@ -104,18 +172,19 @@ var KIND_ICON = {
   pin: "pin",
   meeting: "calendar"
 };
-var EMPTY = {
-  all: "No activity yet. Mentions, replies, reactions and pinned messages show up here.",
-  unread: "You are all caught up.",
-  mentions: "Nobody has mentioned you yet.",
-  replies: "No replies to your messages or followed threads yet.",
-  reactions: "No reactions to your messages yet."
+var EMPTY_KEY = {
+  all: "activity.empty.all",
+  unread: "activity.empty.unread",
+  mentions: "activity.empty.mentions",
+  replies: "activity.empty.replies",
+  reactions: "activity.empty.reactions"
 };
-function activityTime(ts, now = Date.now()) {
-  const day = dayLabel(ts, now);
-  if (day === "Today") return formatTime(ts);
-  if (day === "Yesterday") return day;
-  return new Date(ts).toLocaleDateString([], { month: "short", day: "numeric" });
+function activityTime(ts, now = Date.now(), locale) {
+  const kind = dayKind(ts, now);
+  if (kind === "today") return formatTime(ts, locale);
+  const i18n = teamsI18n(locale);
+  if (kind === "yesterday") return i18n.t("time.yesterday");
+  return new Date(ts).toLocaleDateString(i18n.intl, { month: "short", day: "numeric" });
 }
 var OfficeUiActivityFeed = class extends TeamsElement {
   static styles = withStyles(activity_feed_default);
@@ -138,17 +207,17 @@ var OfficeUiActivityFeed = class extends TeamsElement {
     const unread = this.unread;
     return html`
 			<header>
-				<h2>Activity</h2>
+				<h2>${this.t("activity.title")}</h2>
 				<button
 					type="button"
 					class="read-all"
 					?disabled=${unread === 0}
 					@click=${() => this.fire("office-activity-read-all", {})}
 				>
-					Mark all as read
+					${this.t("activity.markAllRead")}
 				</button>
 			</header>
-			<div class="filters" role="group" aria-label="Filter activity">
+			<div class="filters" role="group" aria-label=${this.t("activity.filterLabel")}>
 				${ACTIVITY_FILTERS.map(
       (value) => html`<button
 							type="button"
@@ -158,23 +227,24 @@ var OfficeUiActivityFeed = class extends TeamsElement {
         this.fire("office-activity-filter", { filter: value });
       }}
 						>
-							${FILTER_LABEL[value]}${value === "unread" && unread ? html` <span class="count">${unread}</span>` : nothing}
+							${this.t(FILTER_KEY[value])}${value === "unread" && unread ? html` <span class="count">${unread}</span>` : nothing}
 						</button>`
     )}
 			</div>
-			${shown.length ? html`<ul aria-label="Activity feed">
+			${shown.length ? html`<ul aria-label=${this.t("activity.feedLabel")}>
 							${shown.map((item) => this.row(item))}
-						</ul>` : html`<p class="empty" role="status">${EMPTY[this.filter]}</p>`}
+						</ul>` : html`<p class="empty" role="status">${this.t(EMPTY_KEY[this.filter])}</p>`}
 		`;
   }
   row(item) {
-    const line = describeActivity(item);
+    const line = describeActivityIn(item, this.i18n);
+    const toggle = this.t(item.read ? "activity.markUnread" : "activity.markRead");
     return html`<li data-unread=${String(!item.read)} data-kind=${item.kind}>
 			<button
 				type="button"
 				class="item"
 				aria-current=${this.selectedId === item.id ? "true" : "false"}
-				aria-label=${`${item.read ? "" : "Unread. "}${line}. ${item.preview}`}
+				aria-label=${`${item.read ? "" : `${this.t("activity.unreadPrefix")} `}${line}. ${item.preview}`}
 				@click=${() => this.fire("office-activity-open", { id: item.id })}
 			>
 				<span class="face">
@@ -190,15 +260,17 @@ var OfficeUiActivityFeed = class extends TeamsElement {
 					<span class="preview">${item.preview}</span>
 				</span>
 				<span class="when">
-					<time datetime=${new Date(item.ts).toISOString()}>${activityTime(item.ts)}</time>
+					<time datetime=${new Date(item.ts).toISOString()}
+						>${activityTime(item.ts, Date.now(), this.locale)}</time
+					>
 					${item.read ? nothing : html`<span class="dot" aria-hidden="true"></span>`}
 				</span>
 			</button>
 			<button
 				type="button"
 				class="toggle"
-				title=${item.read ? "Mark as unread" : "Mark as read"}
-				aria-label=${item.read ? "Mark as unread" : "Mark as read"}
+				title=${toggle}
+				aria-label=${toggle}
 				@click=${() => this.fire("office-activity-read", { id: item.id, read: !item.read })}
 			>
 				${icon(item.read ? "bell" : "check")}
@@ -231,7 +303,9 @@ var OfficeUiAppRail = class extends TeamsElement {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "navigation");
-    this.setAttribute("aria-label", "App bar");
+  }
+  hostLabel() {
+    return this.t("rail.appBar");
   }
   updated(changed) {
     const dialog = this.renderRoot.querySelector("dialog");
@@ -264,7 +338,7 @@ var OfficeUiAppRail = class extends TeamsElement {
 								<button
 									type="button"
 									class="more"
-									aria-label=${badge ? `More, ${badge} unread` : "More"}
+									aria-label=${badge ? this.t("rail.moreUnread", { count: badge }) : this.t("rail.more")}
 									aria-haspopup="dialog"
 									aria-expanded=${String(this.moreOpen)}
 									aria-current=${inMore ? "page" : "false"}
@@ -274,13 +348,13 @@ var OfficeUiAppRail = class extends TeamsElement {
 										${icon("more")}
 										${badge ? html`<span class="badge">${total(badge)}</span>` : nothing}
 									</span>
-									<span class="short" aria-hidden="true">More</span>
+									<span class="short" aria-hidden="true">${this.t("rail.more")}</span>
 								</button>
 							</li>` : nothing}
 			</ul>
 			${secondary.length ? html`<dialog
 							class="sheet"
-							aria-label="More apps"
+							aria-label=${this.t("rail.moreApps")}
 							@cancel=${(e) => {
       e.preventDefault();
       this.closeMore();
@@ -292,7 +366,9 @@ var OfficeUiAppRail = class extends TeamsElement {
 							<ul>
 								${secondary.map((item) => html`<li>${this.button(item, true)}</li>`)}
 							</ul>
-							<button type="button" class="close" @click=${() => this.closeMore()}>Close</button>
+							<button type="button" class="close" @click=${() => this.closeMore()}>
+								${this.t("common.close")}
+							</button>
 						</dialog>` : nothing}
 		`;
   }
@@ -319,13 +395,13 @@ var defineAppRail = definer("office-ui-app-rail", () => OfficeUiAppRail);
 var avatar_default = ":host {\n	--_size: 2.3em;\n	position: relative;\n	display: inline-block;\n	width: var(--_size);\n	height: var(--_size);\n	flex: none;\n}\n:host([size='sm']) {\n	--_size: 1.7em;\n}\n:host([size='lg']) {\n	--_size: 3em;\n}\n:host([size='xl']) {\n	--_size: 6em;\n}\n\n.face {\n	display: grid;\n	place-items: center;\n	width: 100%;\n	height: 100%;\n	border-radius: var(--office-radius-full);\n	color: var(--office-call-foreground);\n	font-size: calc(var(--_size) * 0.38);\n	font-weight: var(--office-font-weight-bold);\n	user-select: none;\n}\n\n.presence {\n	position: absolute;\n	inset-inline-end: 0;\n	inset-block-end: 0;\n	width: 32%;\n	height: 32%;\n	min-width: 0.5em;\n	min-height: 0.5em;\n	border-radius: var(--office-radius-full);\n	border: var(--office-border-width-thick) solid var(--office-background);\n	background: var(--office-presence-offline);\n}\n.presence[data-presence='available'] {\n	background: var(--office-presence-available);\n}\n.presence[data-presence='busy'] {\n	background: var(--office-presence-busy);\n}\n.presence[data-presence='away'] {\n	background: var(--office-presence-away);\n}\n.presence[data-presence='dnd'] {\n	background: var(--office-presence-busy);\n}\n.presence[data-presence='brb'] {\n	background: var(--office-presence-away);\n}\n/* Do not disturb carries a white bar; Away and Be right back share the clock hands. */\n.presence[data-presence='dnd']::after,\n.presence[data-presence='away']::after,\n.presence[data-presence='brb']::after {\n	content: '';\n	position: absolute;\n	inset: 0;\n	margin: auto;\n	background: var(--office-background);\n}\n.presence[data-presence='dnd']::after {\n	width: 60%;\n	height: 16%;\n	border-radius: var(--office-radius-full);\n}\n.presence[data-presence='away']::after,\n.presence[data-presence='brb']::after {\n	width: 14%;\n	height: 50%;\n	inset-block: 10% auto;\n	border-radius: var(--office-radius-full);\n}\n/* Appear offline is a hollow grey ring. */\n.presence[data-presence='offline'] {\n	background: var(--office-background);\n	border-color: var(--office-presence-offline);\n	box-shadow: inset 0 0 0 var(--office-border-width-thick) var(--office-presence-offline);\n}\n";
 
 // src/teams/avatar.ts
-var PRESENCE_LABEL = {
-  available: "Available",
-  busy: "Busy",
-  dnd: "Do not disturb",
-  brb: "Be right back",
-  away: "Away",
-  offline: "Offline"
+var PRESENCE_KEY = {
+  available: "presence.available",
+  busy: "presence.busy",
+  dnd: "presence.dnd",
+  brb: "presence.brb",
+  away: "presence.away",
+  offline: "presence.offline"
 };
 var OfficeUiAvatar = class extends TeamsElement {
   static styles = withStyles(avatar_default);
@@ -345,9 +421,9 @@ var OfficeUiAvatar = class extends TeamsElement {
     this.presence = "";
   }
   willUpdate(changed) {
-    if (changed.has("name") || changed.has("presence")) {
+    if (changed.has("name") || changed.has("presence") || changed.has("locale")) {
       this.setAttribute("role", "img");
-      const status = this.presence ? `, ${PRESENCE_LABEL[this.presence]}` : "";
+      const status = this.presence ? `, ${this.t(PRESENCE_KEY[this.presence])}` : "";
       this.setAttribute("aria-label", `${this.name}${status}`);
     }
   }
@@ -358,7 +434,7 @@ var OfficeUiAvatar = class extends TeamsElement {
 			${this.presence ? html`<span
 							class="presence"
 							data-presence=${this.presence}
-							title=${PRESENCE_LABEL[this.presence]}
+							title=${this.t(PRESENCE_KEY[this.presence])}
 						></span>` : ""}
 		`;
   }
@@ -404,9 +480,11 @@ var OfficeUiCallControls = class extends TeamsElement {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "toolbar");
-    this.setAttribute("aria-label", "Meeting controls");
     this.timer = setInterval(() => this.now = Date.now(), 1e3);
   }
+  hostLabel() {
+    return this.t("call.controls");
+  }
   disconnectedCallback() {
     clearInterval(this.timer);
     super.disconnectedCallback();
@@ -437,19 +515,19 @@ var OfficeUiCallControls = class extends TeamsElement {
 				>${this.startedAt ? html`<time>${formatElapsed(this.now - this.startedAt)}</time>` : nothing}
 			</div>
 			<div class="actions">
-				${this.button("chat", "Chat", "chat", { on: this.panel === "chat" })}
-				${this.button("people", "People", "users", { on: this.panel === "people" })}
-				${this.button("hand", this.hand ? "Lower" : "Raise", "hand", { on: this.hand })}
-				${this.button("camera", this.camera ? "Camera off" : "Camera on", this.camera ? "video" : "videoOff", { off: !this.camera })}
-				${this.button("mic", this.mic ? "Mute" : "Unmute", this.mic ? "mic" : "micOff", { off: !this.mic })}
-				${this.button("screen", this.screen ? "Stop sharing" : "Share", "screenShare", { on: this.screen, disabled: this.shareUnavailable })}
+				${this.button("chat", this.t("call.chat"), "chat", { on: this.panel === "chat" })}
+				${this.button("people", this.t("call.people"), "users", { on: this.panel === "people" })}
+				${this.button("hand", this.t(this.hand ? "call.lower" : "call.raise"), "hand", { on: this.hand })}
+				${this.button("camera", this.t(this.camera ? "call.cameraOff" : "call.cameraOn"), this.camera ? "video" : "videoOff", { off: !this.camera })}
+				${this.button("mic", this.t(this.mic ? "call.mute" : "call.unmute"), this.mic ? "mic" : "micOff", { off: !this.mic })}
+				${this.button("screen", this.t(this.screen ? "call.stopSharing" : "call.share"), "screenShare", { on: this.screen, disabled: this.shareUnavailable })}
 				<button
 					type="button"
 					class="leave"
-					aria-label="Leave call"
+					aria-label=${this.t("call.leaveCall")}
 					@click=${() => this.fire("office-call-action", { action: "leave" })}
 				>
-					${icon("phoneOff")}<span class="text">Leave</span>
+					${icon("phoneOff")}<span class="text">${this.t("call.leave")}</span>
 				</button>
 			</div>
 		`;
@@ -487,7 +565,7 @@ var OfficeUiCalendarAgenda = class extends TeamsElement {
       const key = dayKey(row.o.start, this.zone);
       let group = groups.get(key);
       if (!group) {
-        const label = new Intl.DateTimeFormat([], {
+        const label = new Intl.DateTimeFormat(this.i18n.intl, {
           weekday: "long",
           month: "short",
           day: "numeric",
@@ -495,25 +573,28 @@ var OfficeUiCalendarAgenda = class extends TeamsElement {
         }).format(row.o.start);
         groups.set(
           key,
-          group = { label: key === dayKey(now, this.zone) ? `Today, ${label}` : label, rows: [] }
+          group = {
+            label: key === dayKey(now, this.zone) ? this.t("agenda.todayDate", { date: label }) : label,
+            rows: []
+          }
         );
       }
       group.rows.push(row);
     }
     return html`
 			<header>
-				<h2>Calendar</h2>
+				<h2>${this.t("calendar.title")}</h2>
 				<button
 					class="new"
 					type="button"
-					title="New meeting"
-					aria-label="New meeting"
+					title=${this.t("calendar.newMeeting")}
+					aria-label=${this.t("calendar.newMeeting")}
 					@click=${() => this.fire("office-agenda-new", {})}
 				>
 					${icon("plus")}
 				</button>
 			</header>
-			${groups.size === 0 ? html`<p class="empty">No upcoming meetings. Schedule one with the plus button.</p>` : [...groups.values()].map(
+			${groups.size === 0 ? html`<p class="empty">${this.t("agenda.empty")}</p>` : [...groups.values()].map(
       (g) => html`<section>
 									<h3>${g.label}</h3>
 									<ul>
@@ -537,20 +618,20 @@ var OfficeUiCalendarAgenda = class extends TeamsElement {
 			>
 				<span class="time">${time}</span>
 				<span class="title">${title}</span>
-				<span class="who">${m.mine ? "You organized" : m.organizerName}</span>
+				<span class="who">${m.mine ? this.t("agenda.youOrganized") : m.organizerName}</span>
 			</button>
 			${joinable ? html`<button
 							type="button"
 							class="join"
-							aria-label=${`Join ${title}`}
+							aria-label=${this.t("agenda.join", { title })}
 							@click=${() => this.fire("office-agenda-join", { meetingId: m.id })}
 						>
-							${m.live ? "Join now" : "Join"}
+							${this.t(m.live ? "call.joinNow" : "call.join")}
 						</button>` : ""}
 		</li>`;
   }
   clock(ms) {
-    return new Date(ms).toLocaleTimeString([], {
+    return new Date(ms).toLocaleTimeString(this.i18n.intl, {
       hour: "numeric",
       minute: "2-digit",
       timeZone: this.zone
@@ -567,9 +648,9 @@ var calendar_view_default = ":host {\n	--_hour: 4em;\n	display: flex;\n	flex-dir
 
 // src/teams/calendar-view.ts
 var MODES = [
-  { id: "workweek", label: "Work week" },
-  { id: "week", label: "Week" },
-  { id: "day", label: "Day" }
+  { id: "workweek", label: "calendar.workWeek" },
+  { id: "week", label: "calendar.week" },
+  { id: "day", label: "calendar.day" }
 ];
 var SLOT_MINUTES = 30;
 var FIRST_VISIBLE_HOUR = 8;
@@ -601,7 +682,6 @@ var OfficeUiCalendarView = class extends TeamsElement {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "region");
-    this.setAttribute("aria-label", "Calendar");
     if (!this.anchor) this.anchor = this.clock();
     if (globalThis.matchMedia?.("(max-width: 40em)").matches && this.mode === "workweek")
       this.mode = "day";
@@ -611,6 +691,9 @@ var OfficeUiCalendarView = class extends TeamsElement {
       this.resize.observe(this);
     }
   }
+  hostLabel() {
+    return this.t("calendar.title");
+  }
   disconnectedCallback() {
     clearInterval(this.timer);
     this.resize?.disconnect();
@@ -636,10 +719,11 @@ var OfficeUiCalendarView = class extends TeamsElement {
   range(days) {
     const first = days[0];
     const last = days[days.length - 1];
-    const fmt = (opts, ms) => new Intl.DateTimeFormat([], { ...opts, timeZone: this.zone }).format(ms);
+    const intl = this.i18n.intl;
+    const fmt = (opts, ms) => new Intl.DateTimeFormat(intl, { ...opts, timeZone: this.zone }).format(ms);
     if (days.length === 1)
       return fmt({ weekday: "long", month: "long", day: "numeric", year: "numeric" }, first.start);
-    return new Intl.DateTimeFormat([], {
+    return new Intl.DateTimeFormat(intl, {
       month: "long",
       day: "numeric",
       year: "numeric",
@@ -666,12 +750,12 @@ var OfficeUiCalendarView = class extends TeamsElement {
 			<div class="bar">
 				<h2 class="range" aria-live="polite">${this.range(days)}</h2>
 				<button type="button" class="today" @click=${() => this.anchor = this.clock()}>
-					Today
+					${this.t("time.today")}
 				</button>
 				<button
 					type="button"
 					class="step"
-					aria-label=${this.mode === "day" ? "Previous day" : "Previous week"}
+					aria-label=${this.t(this.mode === "day" ? "calendar.previousDay" : "calendar.previousWeek")}
 					@click=${() => this.anchor = shiftAnchor(this.anchor || now, this.mode, -1, this.zone)}
 				>
 					${icon("back")}
@@ -679,19 +763,19 @@ var OfficeUiCalendarView = class extends TeamsElement {
 				<button
 					type="button"
 					class="step next"
-					aria-label=${this.mode === "day" ? "Next day" : "Next week"}
+					aria-label=${this.t(this.mode === "day" ? "calendar.nextDay" : "calendar.nextWeek")}
 					@click=${() => this.anchor = shiftAnchor(this.anchor || now, this.mode, 1, this.zone)}
 				>
 					${icon("back")}
 				</button>
-				<div class="modes" role="group" aria-label="Calendar view">
+				<div class="modes" role="group" aria-label=${this.t("calendar.viewLabel")}>
 					${MODES.map(
       (m) => html`<button
 								type="button"
 								aria-pressed=${String(this.mode === m.id)}
 								@click=${() => this.setMode(m.id)}
 							>
-								${m.label}
+								${this.t(m.label)}
 							</button>`
     )}
 				</div>
@@ -700,7 +784,7 @@ var OfficeUiCalendarView = class extends TeamsElement {
 					class="new"
 					@click=${() => this.fire("office-calendar-new", { start: 0 })}
 				>
-					${icon("plus")} New meeting
+					${icon("plus")} ${this.t("calendar.newMeeting")}
 				</button>
 			</div>
 			<div class="scroller">
@@ -717,15 +801,16 @@ var OfficeUiCalendarView = class extends TeamsElement {
   }
   hourLabel(hour) {
     if (hour === 0) return "";
-    return new Date(Date.UTC(2e3, 0, 1, hour)).toLocaleTimeString([], {
+    return new Date(Date.UTC(2e3, 0, 1, hour)).toLocaleTimeString(this.i18n.intl, {
       hour: "numeric",
       timeZone: "UTC"
     });
   }
   dayHead(day, today) {
-    const name = new Intl.DateTimeFormat([], { weekday: "short", timeZone: this.zone }).format(
-      day.start
-    );
+    const name = new Intl.DateTimeFormat(this.i18n.intl, {
+      weekday: "short",
+      timeZone: this.zone
+    }).format(day.start);
     return html`<div class="head" data-today=${String(today)}>
 			<span class="dow">${name}</span>
 			<span class="dom">${day.day}</span>
@@ -741,7 +826,7 @@ var OfficeUiCalendarView = class extends TeamsElement {
       this.zone
     );
     const byKey = new Map(occurrences.map((x) => [x.o.key, x.m]));
-    const label = new Intl.DateTimeFormat([], {
+    const label = new Intl.DateTimeFormat(this.i18n.intl, {
       weekday: "long",
       month: "long",
       day: "numeric",
@@ -788,7 +873,7 @@ var OfficeUiCalendarView = class extends TeamsElement {
 		</div>`;
   }
   clockText(ms) {
-    return new Date(ms).toLocaleTimeString([], {
+    return new Date(ms).toLocaleTimeString(this.i18n.intl, {
       hour: "numeric",
       minute: "2-digit",
       timeZone: this.zone
@@ -812,11 +897,13 @@ var OfficeUiCallGrid = class extends TeamsElement {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "list");
-    this.setAttribute("aria-label", "Participants");
+  }
+  hostLabel() {
+    return this.t("call.participants");
   }
   render() {
     const people = this.participants;
-    if (people.length === 0) return html`<p class="empty">Nobody is in the call</p>`;
+    if (people.length === 0) return html`<p class="empty">${this.t("call.nobody")}</p>`;
     const sharer = people.find((p) => p.screen);
     const spotlight = sharer !== void 0 && people.length > 1;
     const ordered = sharer ? [sharer, ...people.filter((p) => p !== sharer)] : people;
@@ -851,11 +938,11 @@ var OfficeUiCallGrid = class extends TeamsElement {
 				${showAvatar ? html`<office-ui-avatar size="xl" name=${p.name} seed=${p.id}></office-ui-avatar>` : nothing}
 				<div class="name">
 					${p.audio === false ? html`<span class="muted">${icon("micOff")}</span>` : nothing}
-					<span>${p.self ? `${p.name} (you)` : p.name}</span>
+					<span>${p.self ? this.t("common.nameYou", { name: p.name }) : p.name}</span>
 				</div>
-				${p.hand ? html`<span class="hand" role="img" aria-label="Hand raised">✋</span>` : nothing}
+				${p.hand ? html`<span class="hand" role="img" aria-label=${this.t("call.handRaised")}>✋</span>` : nothing}
 				${!p.self && p.connection && p.connection !== "connected" ? html`<span class="status"
-								>${p.connection === "failed" ? "Connection failed" : "Connecting\u2026"}</span
+								>${this.t(p.connection === "failed" ? "call.connectionFailed" : "call.connecting")}</span
 							>` : nothing}
 			</div>
 		`;
@@ -877,7 +964,7 @@ var OfficeUiChannelList = class extends TeamsElement {
   };
   constructor() {
     super();
-    this.heading = "Channels";
+    this.heading = "";
     this.channels = [];
     this.selectedId = "";
     this.collapsed = false;
@@ -892,13 +979,13 @@ var OfficeUiChannelList = class extends TeamsElement {
 					@click=${() => this.collapsed = !this.collapsed}
 				>
 					<span class="chevron" data-open=${String(!this.collapsed)}>${icon("chevronRight")}</span>
-					<span class="name">${this.heading}</span>
+					<span class="name">${this.heading || this.t("channels.heading")}</span>
 				</button>
 				<button
 					class="add"
 					type="button"
-					title="Add channel"
-					aria-label="Add channel"
+					title=${this.t("channels.add")}
+					aria-label=${this.t("channels.add")}
 					@click=${() => this.fire("office-channel-create", {})}
 				>
 					${icon("plus")}
@@ -917,7 +1004,9 @@ var OfficeUiChannelList = class extends TeamsElement {
 							>
 								${icon(c.kind === "direct" ? "message" : "hash")}
 								<span class="title">${c.name}</span>
-								${c.live ? html`<span class="live" title="Call in progress">${icon("video")}</span>` : ""}
+								${c.live ? html`<span class="live" title=${this.t("call.inProgress")}
+												>${icon("video")}</span
+											>` : ""}
 								${c.unread ? html`<span class="count">${c.unread > 99 ? "99+" : c.unread}</span>` : ""}
 							</button>
 						</li>
@@ -978,7 +1067,7 @@ var OfficeUiChatComposer = class extends TeamsElement {
     this.replyingTo = null;
     this.editing = false;
     this.disabled = false;
-    this.placeholder = "Type a message";
+    this.placeholder = "";
     this.value = "";
     this.files = [];
     this.missingFiles = [];
@@ -1111,7 +1200,7 @@ var OfficeUiChatComposer = class extends TeamsElement {
   typingLine() {
     const n = this.typing.slice(0, 3);
     if (n.length === 0) return "";
-    return n.length === 1 ? `${n[0]} is typing\u2026` : `${n.join(", ")} are typing\u2026`;
+    return n.length === 1 ? this.t("composer.typingOne", { name: n[0] }) : this.t("composer.typingMany", { names: n.join(", ") });
   }
   mentionList() {
     const options = this.pickerOptions();
@@ -1120,7 +1209,7 @@ var OfficeUiChatComposer = class extends TeamsElement {
 			id="mention-list"
 			class="mentions"
 			role="listbox"
-			aria-label="People to mention"
+			aria-label=${this.t("composer.mentionPeople")}
 			@mousedown=${(event) => event.preventDefault()}
 		>
 			${options.map(
@@ -1136,13 +1225,13 @@ var OfficeUiChatComposer = class extends TeamsElement {
 										seed=${target.id}
 									></office-ui-avatar>` : html`<span class="everyone" aria-hidden="true">@</span>`}
 						<span class="name">${target.name}</span>
-						${target.kind === "user" ? nothing : html`<span class="hint">${target.kind === "channel" ? "Notify everyone in this channel" : "Notify the whole team"}</span>`}
+						${target.kind === "user" ? nothing : html`<span class="hint">${this.t(target.kind === "channel" ? "composer.notifyChannel" : "composer.notifyTeam")}</span>`}
 					</li>`
     )}
 		</ul>`;
   }
   render() {
-    const banner = this.editing ? "Editing message" : this.replyingTo !== null ? `Replying to ${this.replyingTo}` : "";
+    const banner = this.editing ? this.t("composer.editing") : this.replyingTo !== null ? this.t("composer.replyingTo", { name: this.replyingTo }) : "";
     return html`
 			<div class="typing" aria-live="polite">${this.typingLine()}</div>
 			<div
@@ -1162,19 +1251,19 @@ var OfficeUiChatComposer = class extends TeamsElement {
     }}
 			>
 				${this.missingFiles.length ? html`<div role="status">
-								Reattach or discard these draft attachments before sending:
+								${this.t("composer.reattach")}
 								<ul>
 									${this.missingFiles.map(
       (name) => html`<li>
 												${name}<button
 													type="button"
-													aria-label=${`Discard missing ${name}`}
+													aria-label=${this.t("composer.discardMissing", { name })}
 													@click=${() => {
         this.missingFiles = this.missingFiles.filter((item) => item !== name);
         this.saveDraft();
       }}
 												>
-													Discard
+													${this.t("composer.discard")}
 												</button>
 											</li>`
     )}
@@ -1184,7 +1273,7 @@ var OfficeUiChatComposer = class extends TeamsElement {
 								<span>${banner}</span>
 								<button
 									type="button"
-									aria-label="Cancel"
+									aria-label=${this.t("common.cancel")}
 									@click=${() => this.fire("office-chat-cancel", {})}
 								>
 									${icon("close")}
@@ -1193,12 +1282,12 @@ var OfficeUiChatComposer = class extends TeamsElement {
 				${this.mentionList()}
 				<textarea
 					rows="1"
-					aria-label="Message"
+					aria-label=${this.t("composer.message")}
 					aria-haspopup="listbox"
 					aria-controls=${this.pickerOptions().length ? "mention-list" : nothing}
 					aria-activedescendant=${this.pickerOptions().length ? `mention-option-${this.pickerIndex}` : nothing}
 					.value=${live(this.value)}
-					placeholder=${this.placeholder}
+					placeholder=${this.placeholder || this.t("composer.placeholder")}
 					?disabled=${this.disabled}
 					@input=${this.onInput}
 					@paste=${(event) => {
@@ -1219,7 +1308,7 @@ var OfficeUiChatComposer = class extends TeamsElement {
       (f, i) => html`<li>
 											<button
 												type="button"
-												aria-label=${`Remove ${f.name}`}
+												aria-label=${this.t("people.remove", { name: f.name })}
 												@click=${() => {
         this.files = this.files.filter((_, j) => j !== i);
         this.focusMessage();
@@ -1234,8 +1323,8 @@ var OfficeUiChatComposer = class extends TeamsElement {
 				<div class="bar">
 					<button
 						type="button"
-						title="Attach files"
-						aria-label="Attach files"
+						title=${this.t("composer.attach")}
+						aria-label=${this.t("composer.attach")}
 						?disabled=${this.disabled}
 						@click=${() => this.renderRoot.querySelector("input[type=file]")?.click()}
 					>
@@ -1244,8 +1333,8 @@ var OfficeUiChatComposer = class extends TeamsElement {
 					<div class="emoji">
 						<button
 							type="button"
-							title="Emoji"
-							aria-label="Emoji"
+							title=${this.t("composer.emoji")}
+							aria-label=${this.t("composer.emoji")}
 							aria-expanded=${String(this.emojiOpen)}
 							?disabled=${this.disabled}
 							@click=${() => this.emojiOpen = !this.emojiOpen}
@@ -1279,8 +1368,8 @@ var OfficeUiChatComposer = class extends TeamsElement {
 					<button
 						type="button"
 						class="send"
-						title="Send"
-						aria-label="Send message"
+						title=${this.t("composer.send")}
+						aria-label=${this.t("composer.sendMessage")}
 						?disabled=${!this.canSend}
 						@click=${this.submit}
 					>
@@ -1331,16 +1420,19 @@ var OfficeUiChatList = class extends TeamsElement {
     super.connectedCallback();
     this.setAttribute("role", "log");
     this.setAttribute("aria-live", "polite");
-    this.setAttribute("aria-label", "Messages");
     this.addEventListener("scroll", () => {
       this.stickToBottom = this.scrollHeight - this.scrollTop - this.clientHeight < 64;
     });
   }
+  hostLabel() {
+    return this.t("chat.messages");
+  }
   updated() {
     if (this.stickToBottom) this.scrollTop = this.scrollHeight;
   }
   render() {
-    if (this.messages.length === 0) return html`<p class="empty">No messages yet. Say hello.</p>`;
+    if (this.messages.length === 0) return html`<p class="empty">${this.t("chat.empty")}</p>`;
+    const now = Date.now();
     const byId = new Map(this.messages.map((m) => [m.id, m]));
     const rows = [];
     let previous;
@@ -1350,9 +1442,9 @@ var OfficeUiChatList = class extends TeamsElement {
         previous = void 0;
         continue;
       }
-      if (!previous || dayLabel(previous.ts) !== dayLabel(m.ts))
-        rows.push(html`<div class="day"><span>${dayLabel(m.ts)}</span></div>`);
-      const grouped = previous !== void 0 && previous.authorId === m.authorId && m.ts - previous.ts < GROUP_MS && !m.replyTo && dayLabel(previous.ts) === dayLabel(m.ts);
+      if (!previous || dayLabel(previous.ts, now, this.locale) !== dayLabel(m.ts, now, this.locale))
+        rows.push(html`<div class="day"><span>${dayLabel(m.ts, now, this.locale)}</span></div>`);
+      const grouped = previous !== void 0 && previous.authorId === m.authorId && m.ts - previous.ts < GROUP_MS && !m.replyTo && dayLabel(previous.ts, now, this.locale) === dayLabel(m.ts, now, this.locale);
       rows.push(this.message(m, grouped, byId.get(m.replyTo ?? "")));
       previous = m;
     }
@@ -1377,18 +1469,18 @@ var OfficeUiChatList = class extends TeamsElement {
 				<div class="body">
 					${grouped ? nothing : html`<header>
 									<span class="author">${m.authorName}</span>
-									<time>${formatTime(m.ts)}</time>
+									<time>${formatTime(m.ts, this.locale)}</time>
 								</header>`}
 					${this.pinMark(m)}
 					<div class="bubble">
 						${parent ? html`<blockquote>
 										<strong>${parent.authorName}</strong
-										>${parent.deleted ? "This message was deleted" : parent.text.slice(0, 120)}
+										>${parent.deleted ? this.t("chat.deleted") : parent.text.slice(0, 120)}
 									</blockquote>` : nothing}
-						${m.deleted ? html`<span class="deleted">This message was deleted</span>` : html`<span class="text">${this.body(m)}</span>${m.editedAt ? html` <span class="edited">(edited)</span>` : nothing}`}
+						${m.deleted ? html`<span class="deleted">${this.t("chat.deleted")}</span>` : html`<span class="text">${this.body(m)}</span>${m.editedAt ? html` <span class="edited">${this.t("chat.edited")}</span>` : nothing}`}
 						${!m.deleted && m.meetingId ? this.meetingCard(m.meetingId) : nothing}
 						${!m.deleted && m.attachments?.length ? this.files(m.attachments) : nothing}
-						${!m.deleted && m.tabId ? html`<button class="thread-link" type="button" @click=${() => this.fire("office-chat-open-tab", { tabId: m.tabId })}>Open tab</button>` : nothing}
+						${!m.deleted && m.tabId ? html`<button class="thread-link" type="button" @click=${() => this.fire("office-chat-open-tab", { tabId: m.tabId })}>${this.t("chat.openTab")}</button>` : nothing}
 					</div>
 					${!m.deleted && reactions.length ? html`<div class="reactions">
 									${reactions.map(
@@ -1406,7 +1498,7 @@ var OfficeUiChatList = class extends TeamsElement {
     )}
 								</div>` : nothing}
 					${m.deleted ? nothing : this.toolbar(m, own)}
-					${this.replyCounts[m.id] === void 0 ? nothing : html`<button type="button" class="thread-link" @click=${() => this.fire("office-chat-thread", { messageId: m.id })}>${this.replyCounts[m.id]} ${this.replyCounts[m.id] === 1 ? "reply" : "replies"}</button>`}
+					${this.replyCounts[m.id] === void 0 ? nothing : html`<button type="button" class="thread-link" @click=${() => this.fire("office-chat-thread", { messageId: m.id })}>${this.tn("chat.replies", this.replyCounts[m.id])}</button>`}
 				</div>
 			</article>
 		`;
@@ -1427,38 +1519,38 @@ var OfficeUiChatList = class extends TeamsElement {
       return html`<div class="meeting-card" data-gone="true">
 				<span class="meeting-icon">${icon("calendar")}</span>
 				<span class="meeting-meta">
-					<span class="meeting-title">This meeting was canceled or is not in your calendar</span>
+					<span class="meeting-title">${this.t("chat.meetingGone")}</span>
 				</span>
 			</div>`;
     return html`<div class="meeting-card">
 			<span class="meeting-icon">${icon("calendar")}</span>
 			<span class="meeting-meta">
 				<span class="meeting-title">${card.title}</span>
-				<span class="meeting-time">${formatWhen(card.start, card.end)}</span>
+				<span class="meeting-time">${formatWhen(card.start, card.end, this.locale)}</span>
 			</span>
 			<button
 				type="button"
 				class="meeting-open"
 				@click=${() => this.fire("office-chat-meeting", { meetingId, action: "open" })}
 			>
-				Details
+				${this.t("chat.meetingDetails")}
 			</button>
 			<button
 				type="button"
 				class="meeting-join"
 				@click=${() => this.fire("office-chat-meeting", { meetingId, action: "join" })}
 			>
-				${card.live ? "Join now" : "Join"}
+				${this.t(card.live ? "call.joinNow" : "call.join")}
 			</button>
 		</div>`;
   }
   toolbar(m, own) {
     return html`
-			<div class="toolbar" role="toolbar" aria-label="Message actions">
+			<div class="toolbar" role="toolbar" aria-label=${this.t("chat.messageActions")}>
 				${QUICK_REACTIONS.slice(0, 4).map(
       (emoji) => html`<button
 							type="button"
-							aria-label=${`React ${emoji}`}
+							aria-label=${this.t("chat.react", { emoji })}
 							@click=${() => this.fire("office-chat-react", { messageId: m.id, emoji })}
 						>
 							${emoji}
@@ -1466,8 +1558,9 @@ var OfficeUiChatList = class extends TeamsElement {
     )}
 				<button
 					type="button"
-					title="Reply"
-					aria-label="Reply"
+					data-action="reply"
+					title=${this.t("chat.reply")}
+					aria-label=${this.t("chat.reply")}
 					@click=${() => this.fire("office-chat-reply", { messageId: m.id })}
 				>
 					${icon("reply")}
@@ -1475,16 +1568,16 @@ var OfficeUiChatList = class extends TeamsElement {
 				${this.pinButton(m)}
 				${own ? html`<button
 									type="button"
-									title="Edit"
-									aria-label="Edit"
+									title=${this.t("common.edit")}
+									aria-label=${this.t("common.edit")}
 									@click=${() => this.fire("office-chat-edit", { messageId: m.id })}
 								>
 									${icon("pencil")}
 								</button>
 								<button
 									type="button"
-									title="Delete"
-									aria-label="Delete"
+									title=${this.t("chat.delete")}
+									aria-label=${this.t("chat.delete")}
 									@click=${() => this.fire("office-chat-delete", { messageId: m.id })}
 								>
 									${icon("trash")}
@@ -1493,11 +1586,11 @@ var OfficeUiChatList = class extends TeamsElement {
 		`;
   }
   pinMark(m) {
-    return !m.deleted && this.pinnedIds.includes(m.id) ? html`<span class="pin-mark">${icon("pin")} Pinned</span>` : nothing;
+    return !m.deleted && this.pinnedIds.includes(m.id) ? html`<span class="pin-mark">${icon("pin")} ${this.t("chat.pinned")}</span>` : nothing;
   }
   pinButton(m) {
     const pinned = this.pinnedIds.includes(m.id);
-    const label = pinned ? "Unpin" : "Pin";
+    const label = this.t(pinned ? "chat.unpin" : "chat.pin");
     return html`<button
 			type="button"
 			title=${label}
@@ -1515,13 +1608,15 @@ var OfficeUiChatList = class extends TeamsElement {
 					<button
 						type="button"
 						class="file"
-						aria-label=${`Open ${a.name}`}
+						aria-label=${this.t("chat.openFile", { name: a.name })}
 						@click=${() => this.fire("office-chat-open-file", { attachment: a })}
 					>
 						<span class="badge" data-kind=${a.kind}>${KIND_LETTER[a.kind]}</span>
 						<span class="meta">
 							<span class="file-name">${a.name}</span>
-							<span class="file-size">${a.kind.toUpperCase()} ${formatSize(a.size)}</span>
+							<span class="file-size"
+								>${a.kind.toUpperCase()} ${formatSize(a.size, this.locale)}</span
+							>
 						</span>
 					</button>
 				`
@@ -1535,9 +1630,9 @@ var defineChatList = definer("office-ui-chat-list", () => OfficeUiChatList);
 var chat_sidebar_default = ":host {\n	display: block;\n	overflow: auto;\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-3) var(--office-space-3) var(--office-space-2) var(--office-space-4);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\n.new {\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: var(--office-teams-brand);\n}\n.new:hover {\n	background: var(--office-selected);\n}\nul {\n	margin: 0;\n	padding: 0 var(--office-space-2);\n	list-style: none;\n}\n.empty {\n	margin: var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n}\n.row {\n	position: relative;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n	text-align: start;\n}\n.row:hover {\n	background: var(--office-selected);\n}\n.row[aria-current='true'] {\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-foreground);\n}\n.row[aria-current='true']::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: 0;\n	inset-block: 20%;\n	width: var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.group {\n	display: grid;\n	place-items: center;\n	flex: none;\n	width: 2.3em;\n	height: 2.3em;\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-bubble);\n	color: var(--office-teams-brand);\n}\n.text {\n	display: grid;\n	flex: 1;\n	min-width: 0;\n}\n.line {\n	display: flex;\n	align-items: baseline;\n	gap: var(--office-space-2);\n}\n.title {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-foreground);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\ntime {\n	font-size: var(--office-font-size-xs);\n}\n.preview {\n	overflow: hidden;\n	font-size: var(--office-font-size-sm);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.row[data-unread='true'] .title,\n.row[data-unread='true'] .preview {\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.live {\n	display: grid;\n	color: var(--office-call-live);\n}\n.count {\n	min-width: 1.6em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-xs);\n	line-height: 1.6;\n	text-align: center;\n}\n@media (pointer: coarse) {\n	.new,\n	.row {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n";
 
 // src/teams/chat-sidebar.ts
-function stamp(ts) {
+function stamp(ts, locale) {
   if (!ts) return "";
-  return dayLabel(ts) === "Today" ? formatTime(ts) : new Date(ts).toLocaleDateString([], { month: "short", day: "numeric" });
+  return dayKind(ts) === "today" ? formatTime(ts, locale) : new Date(ts).toLocaleDateString(teamsI18n(locale).intl, { month: "short", day: "numeric" });
 }
 var OfficeUiChatSidebar = class extends TeamsElement {
   static styles = withStyles(chat_sidebar_default);
@@ -1553,25 +1648,28 @@ var OfficeUiChatSidebar = class extends TeamsElement {
   render() {
     return html`
 			<header>
-				<h2>Chat</h2>
+				<h2>${this.t("rail.chat")}</h2>
 				<button
 					class="new"
 					type="button"
-					title="New chat"
-					aria-label="New chat"
+					title=${this.t("chat.new")}
+					aria-label=${this.t("chat.new")}
 					@click=${() => this.fire("office-chat-new", {})}
 				>
 					${icon("plus")}
 				</button>
 			</header>
-			${this.chats.length === 0 ? html`<p class="empty">No chats yet. Start one with the plus button.</p>` : html`<ul>
+			${this.chats.length === 0 ? html`<p class="empty">${this.t("chat.none")}</p>` : html`<ul>
 							${this.chats.map((c) => this.row(c))}
 						</ul>`}
 		`;
   }
   row(c) {
     const other = c.kind === "direct" ? c.members.find((m) => !m.self) : void 0;
-    const preview = c.lastMessage ? c.lastMessage.system ? c.lastMessage.text : c.lastMessage.mine ? `You: ${c.lastMessage.text}` : c.kind === "direct" ? c.lastMessage.text : `${c.lastMessage.authorName}: ${c.lastMessage.text}` : "No messages yet";
+    const preview = c.lastMessage ? c.lastMessage.system ? c.lastMessage.text : c.lastMessage.mine ? this.t("chat.previewYou", { text: c.lastMessage.text }) : c.kind === "direct" ? c.lastMessage.text : this.t("chat.previewAuthor", {
+      author: c.lastMessage.authorName,
+      text: c.lastMessage.text
+    }) : this.t("chat.noMessagesPreview");
     return html`
 			<li>
 				<button
@@ -1591,12 +1689,14 @@ var OfficeUiChatSidebar = class extends TeamsElement {
 					<span class="text">
 						<span class="line">
 							<span class="title">${c.title}</span>
-							<time>${stamp(c.ts)}</time>
+							<time>${stamp(c.ts, this.locale)}</time>
 						</span>
 						<span class="preview">${preview}</span>
 					</span>
-					${c.live ? html`<span class="live" title="Call in progress">${icon("video")}</span>` : nothing}
-					${c.unread ? html`<span class="count" aria-label=${`${c.unread} unread`}
+					${c.live ? html`<span class="live" title=${this.t("call.inProgress")}>${icon("video")}</span>` : nothing}
+					${c.unread ? html`<span
+									class="count"
+									aria-label=${this.t("chat.unreadCount", { count: c.unread })}
 									>${c.unread > 99 ? "99+" : c.unread}</span
 								>` : nothing}
 				</button>
@@ -1624,7 +1724,7 @@ var OfficeUiPeoplePicker = class extends TeamsElement {
     this.contacts = [];
     this.selected = [];
     this.exclude = [];
-    this.label = "People";
+    this.label = "";
     this.query = "";
   }
   toggle(id) {
@@ -1637,14 +1737,15 @@ var OfficeUiPeoplePicker = class extends TeamsElement {
       (c) => !this.exclude.includes(c.id) && (!q || c.name.toLocaleLowerCase().includes(q))
     );
     const chosen = this.contacts.filter((c) => this.selected.includes(c.id));
+    const label = this.label || this.t("people.label");
     return html`
-			${chosen.length ? html`<ul class="chips" aria-label="Selected people">
+			${chosen.length ? html`<ul class="chips" aria-label=${this.t("people.selected")}>
 							${chosen.map(
       (c) => html`<li>
 										<button
 											type="button"
 											class="chip"
-											aria-label=${`Remove ${c.name}`}
+											aria-label=${this.t("people.remove", { name: c.name })}
 											@click=${() => this.toggle(c.id)}
 										>
 											${c.name} <span aria-hidden="true">×</span>
@@ -1654,14 +1755,14 @@ var OfficeUiPeoplePicker = class extends TeamsElement {
 						</ul>` : nothing}
 			<input
 				type="search"
-				placeholder="Search people"
-				aria-label=${`Search ${this.label.toLocaleLowerCase()}`}
+				placeholder=${this.t("people.search")}
+				aria-label=${this.t("people.search")}
 				.value=${this.query}
 				@input=${(e) => this.query = e.target.value}
 			/>
 			${offered.length === 0 ? html`<p class="none">
-							${this.contacts.length === 0 ? "Nobody else has joined this workspace yet." : "No one matches that search."}
-						</p>` : html`<ul class="list" role="group" aria-label=${this.label}>
+							${this.contacts.length === 0 ? this.t("people.nobodyElse") : this.t("people.noMatch")}
+						</p>` : html`<ul class="list" role="group" aria-label=${label}>
 							${offered.map(
       (c) => html`<li>
 										<label>
@@ -1736,20 +1837,20 @@ var OfficeUiPrejoin = class extends TeamsElement {
 									.muted=${true}
 									.srcObject=${this.preview}
 								></video>` : html`<office-ui-avatar size="xl" name=${this.name}></office-ui-avatar>
-									<p>${this.video ? "Starting camera\u2026" : "Your camera is turned off"}</p>`}
+									<p>${this.t(this.video ? "prejoin.startingCamera" : "prejoin.cameraOff")}</p>`}
 				</div>
 				<div class="panel">
-					<h2>Choose your audio and video settings</h2>
+					<h2>${this.t("prejoin.title")}</h2>
 					<p class="for">${this.heading}</p>
-					${this.toggle("Camera", this.video ? "video" : "videoOff", this.video, "video")}
-					${this.toggle("Microphone", this.audio ? "mic" : "micOff", this.audio, "audio")}
+					${this.toggle(this.t("prejoin.camera"), this.video ? "video" : "videoOff", this.video, "video")}
+					${this.toggle(this.t("prejoin.microphone"), this.audio ? "mic" : "micOff", this.audio, "audio")}
 					<div class="actions">
 						<button
 							type="button"
 							class="cancel"
 							@click=${() => this.fire("office-prejoin-cancel", {})}
 						>
-							Cancel
+							${this.t("common.cancel")}
 						</button>
 						<button
 							type="button"
@@ -1757,7 +1858,7 @@ var OfficeUiPrejoin = class extends TeamsElement {
 							?disabled=${this.busy}
 							@click=${() => this.fire("office-prejoin-join", {})}
 						>
-							${this.busy ? "Joining\u2026" : "Join now"}
+							${this.t(this.busy ? "prejoin.joining" : "call.joinNow")}
 						</button>
 					</div>
 					${nothing}
@@ -1767,6 +1868,71 @@ var OfficeUiPrejoin = class extends TeamsElement {
   }
 };
 var definePrejoin = definer("office-ui-prejoin", () => OfficeUiPrejoin);
+
+// src/teams/i18n/core-text.ts
+var exact = (text) => new RegExp(`^${text.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&")}$`, "u");
+var RULES = [
+  [exact("That person is not available to chat with"), "core.personUnavailable"],
+  [exact("Pick at least one person"), "core.pickPerson"],
+  [exact("The chat could not be created"), "core.chatNotCreated"],
+  [
+    exact("The meeting needs a title and an end after its start (24 hours at most)"),
+    "core.meetingInvalid"
+  ],
+  [exact("Only the organizer can change a meeting"), "core.organizerChange"],
+  [exact("Only the organizer can cancel a meeting"), "core.organizerCancel"],
+  [
+    exact("Only the organizer can cancel an occurrence of a meeting"),
+    "core.organizerCancelOccurrence"
+  ],
+  [
+    exact("Only the organizer can change an occurrence of a meeting"),
+    "core.organizerChangeOccurrence"
+  ],
+  [exact("Camera unavailable"), "core.cameraUnavailable"],
+  [
+    exact("Reattach or discard the missing draft attachments before sending"),
+    "core.reattachDrafts"
+  ],
+  [exact("The edit was not applied; the draft was retained"), "core.editNotApplied"],
+  [exact("Message send canceled. The message was saved in Drafts."), "core.sendCanceled"],
+  [
+    /^Message was not sent: (.*)\. Saved in Drafts\.$/su,
+    "core.sendFailed",
+    (m) => ({ reason: m[1] ?? "" })
+  ],
+  [exact("This message cannot be pinned"), "core.cannotPin"],
+  [exact("Could not open the file"), "core.openFailed"],
+  [exact("This meeting is not available"), "core.meetingUnavailable"],
+  [exact("The channel is no longer available"), "core.channelGone"],
+  [
+    exact("The channel is no longer available; the uploaded files were not shared"),
+    "core.channelGoneUploaded"
+  ],
+  [exact("Configure file storage before sharing files"), "core.configureStorage"],
+  [exact("Configure file storage before sharing attachments"), "core.configureStorage"],
+  [exact("The files could not be shared"), "core.filesNotShared"],
+  [/^Choose between 1 and (\d+) files$/u, "core.chooseFiles", (m) => ({ max: m[1] ?? "" })],
+  [exact("Enter a workbook name"), "core.workbookName"],
+  [/^Upload failed \((\d+)\)$/u, "core.uploadFailed", (m) => ({ status: m[1] ?? "" })],
+  [exact("Server returned an invalid file URL"), "core.invalidFileUrl"],
+  [exact("This file cannot be saved to the channel"), "core.cannotSaveFile"],
+  [exact("The file could not be uploaded"), "core.fileNotUploaded"],
+  [/^Could not load content \((\d+)\)$/u, "core.loadFailed", (m) => ({ status: m[1] ?? "" })],
+  [exact("Content streaming is unavailable"), "core.streamingUnavailable"],
+  [exact("Content is too large to preview"), "core.tooLarge"],
+  [exact("The file is no longer available"), "core.fileGone"],
+  [/^Call is full \((\d+) participants\)$/u, "core.callFull", (m) => ({ max: m[1] ?? "" })],
+  [/^Link failed \((\d+)\)$/u, "core.linkFailed", (m) => ({ status: m[1] ?? "" })]
+];
+function localizeCoreText(text, i18n) {
+  if (i18n.locale === "en") return text;
+  for (const [pattern, key, params] of RULES) {
+    const match = pattern.exec(text);
+    if (match) return i18n.t(key, params?.(match));
+  }
+  return text;
+}
 var TeamsController = class {
   constructor(host, onNotice, onNotification = () => void 0) {
     this.host = host;
@@ -1903,15 +2069,16 @@ function pickFile(root, accept = OPEN_ACCEPT) {
     input.click();
   });
 }
-function workbookActions(state, actions) {
+function workbookActions(state, actions, i18n = teamsI18n()) {
+  const { t } = i18n;
   return html`<button type="button" ?disabled=${state.saving} @click=${actions.toggle}>
-			${state.editing ? "View workbook" : "Edit workbook"}
+			${t(state.editing ? "workbook.view" : "workbook.edit")}
 		</button>
 		<button type="button" ?disabled=${state.saving} @click=${actions.download}>
-			Download workbook copy
+			${t("workbook.download")}
 		</button>
-		${state.canShare ? html`<button type="button" ?disabled=${state.saving || !state.editing} @click=${actions.share}>${state.saving ? "Saving copy..." : "Save copy to channel"}</button>` : nothing}
-		${state.saving ? html`<button type="button" @click=${actions.cancel}>Cancel workbook save</button>` : nothing}`;
+		${state.canShare ? html`<button type="button" ?disabled=${state.saving || !state.editing} @click=${actions.share}>${t(state.saving ? "workbook.saving" : "workbook.saveToChannel")}</button>` : nothing}
+		${state.saving ? html`<button type="button" @click=${actions.cancel}>${t("workbook.cancelSave")}</button>` : nothing}`;
 }
 function inline(text, base) {
   return markdownInline(text, base).map((token) => {
@@ -1925,7 +2092,7 @@ function inline(text, base) {
     return token.text;
   });
 }
-function markdownPreview(source, base) {
+function markdownPreview(source, base, i18n = teamsI18n()) {
   return markdownBlocks(source).map((block) => {
     if (block.kind === "code") return html`<pre><code>${block.text}</code></pre>`;
     if (block.kind === "table" && block.table) {
@@ -1934,7 +2101,7 @@ function markdownPreview(source, base) {
 				class="markdown-table"
 				tabindex="0"
 				role="region"
-				aria-label="Markdown table"
+				aria-label=${i18n.t("preview.markdownTable")}
 			>
 				<table>
 					<thead>
@@ -1967,7 +2134,7 @@ function markdownPreview(source, base) {
 }
 
 // src/teams/app/content-preview.ts
-var TeamsContentPreview = class extends LitElement {
+var TeamsContentPreview = class extends TeamsLitElement {
   static styles = unsafeCSS(content_preview_default);
   static properties = {
     detail: { attribute: false },
@@ -2029,14 +2196,14 @@ var TeamsContentPreview = class extends LitElement {
   /** Called by the workspace before replacing this pane. */
   canLeave() {
     if (this.saving) {
-      this.saveError = "Wait for the workbook copy to finish saving or cancel the save.";
+      this.saveError = this.t("preview.waitSave");
       return false;
     }
     if (!this.commitPendingEdit()) {
-      this.saveError = "Finish or cancel the current cell edit before leaving.";
+      this.saveError = this.t("preview.finishEditLeave");
       return false;
     }
-    return !this.dirty || globalThis.confirm?.("Discard unsaved workbook edits?") === true;
+    return !this.dirty || globalThis.confirm?.(this.t("preview.discardEdits")) === true;
   }
   commitPendingEdit() {
     const viewer = this.shadowRoot?.querySelector(
@@ -2064,15 +2231,15 @@ var TeamsContentPreview = class extends LitElement {
     const kind = detectContentKind(detail.attachment.name, detail.attachment.mime);
     try {
       const url = contentUrl(detail.url, this.ownerDocument.baseURI);
-      if (!url) throw new Error("This content has no valid web URL");
+      if (!url) throw new Error(this.t("preview.noUrl"));
       const embed = this.embeds[detail.attachment.kind];
       if (embed || kind === "website") {
         this.frame = contentUrl(embed ? embed(detail) : url, this.ownerDocument.baseURI);
-        if (!this.frame) throw new Error("The viewer returned an invalid embed URL");
+        if (!this.frame) throw new Error(this.t("preview.badEmbed"));
         this.status = "ready";
         return;
       }
-      if (kind === "other") throw new Error("No embedded viewer is configured for this file type");
+      if (kind === "other") throw new Error(this.t("preview.noViewer"));
       const bytes = await readContent(
         url,
         request.signal,
@@ -2086,26 +2253,26 @@ var TeamsContentPreview = class extends LitElement {
         if (kind === "xlsx") (await import('./xlsx.js')).defineXlsxEditor();
         if (kind === "vsdx") (await import('./visio.js')).registerVisioViewer();
         if (kind === "pptx")
-          (await import('./presentation-preview-HVKJ3KJN.js')).defineTeamsPresentationPreview();
+          (await import('./presentation-preview-HMEBDYEL.js')).defineTeamsPresentationPreview();
         if (request.signal.aborted) return;
         this.native = kind;
         await this.updateComplete;
         if (request.signal.aborted) return;
         const viewer = this.shadowRoot?.querySelector("docx-editor, xlsx-editor, visio-viewer, teams-presentation-preview");
-        if (!viewer) throw new Error("The viewer could not be mounted");
+        if (!viewer) throw new Error(this.t("preview.notMounted"));
         await viewer.load(bytes, detail.attachment.name);
       }
       if (!request.signal.aborted) this.status = "ready";
     } catch (error) {
       if (request.signal.aborted) return;
       this.native = null;
-      this.error = error instanceof Error ? error.message : "Could not preview content";
+      this.error = error instanceof Error ? localizeCoreText(error.message, this.i18n) : this.t("preview.failed");
       this.status = "error";
     }
   }
   toggleWorkbook() {
     if (!this.commitPendingEdit()) {
-      this.saveError = "Finish or cancel the current cell edit before switching modes.";
+      this.saveError = this.t("preview.finishEditSwitch");
       return;
     }
     this.saveError = "";
@@ -2115,7 +2282,7 @@ var TeamsContentPreview = class extends LitElement {
     if (this.saving || !download && !this.saveCopy || this.native !== "xlsx" || !this.detail)
       return;
     if (!this.commitPendingEdit()) {
-      this.saveError = "Finish or cancel the current cell edit before saving.";
+      this.saveError = this.t("preview.finishEditSave");
       return;
     }
     const viewer = this.shadowRoot?.querySelector("xlsx-editor");
@@ -2150,7 +2317,7 @@ var TeamsContentPreview = class extends LitElement {
       this.saved = true;
     } catch (error) {
       if (!request?.signal.aborted && !controller.signal.aborted)
-        this.saveError = error instanceof Error ? error.message : "Could not save the workbook copy";
+        this.saveError = error instanceof Error ? localizeCoreText(error.message, this.i18n) : this.t("preview.saveFailed");
     } finally {
       if (this.saveAbort === controller) {
         this.saveAbort = void 0;
@@ -2162,14 +2329,14 @@ var TeamsContentPreview = class extends LitElement {
     this.saveAbort?.abort();
     this.saveAbort = void 0;
     this.saving = false;
-    this.saveError = "Workbook save canceled. Your edits remain local.";
+    this.saveError = this.t("preview.saveCanceled");
   }
   render() {
     const detail = this.detail;
     if (!detail) return nothing;
     const kind = detectContentKind(detail.attachment.name, detail.attachment.mime);
     const url = contentUrl(detail.url, this.ownerDocument.baseURI);
-    return html`<section aria-label="Content preview">
+    return html`<section aria-label=${this.t("preview.title")}>
 			<header>
 				<h2>${detail.attachment.name}</h2>
 				${this.native === "xlsx" && this.status === "ready" ? workbookActions(
@@ -2179,24 +2346,27 @@ var TeamsContentPreview = class extends LitElement {
         share: () => void this.saveWorkbookCopy(),
         download: () => void this.saveWorkbookCopy(true),
         cancel: () => this.cancelWorkbookSave()
-      }
+      },
+      this.i18n
     ) : nothing}
-				${url ? html`<a href=${url} target="_blank" rel="noopener noreferrer">Open externally</a>` : nothing}
+				${url ? html`<a href=${url} target="_blank" rel="noopener noreferrer">${this.t("preview.openExternally")}</a>` : nothing}
 				<button
 					type="button"
 					@click=${() => this.dispatchEvent(new CustomEvent("teams-preview-close", { bubbles: true, composed: true }))}
 				>
-					Close preview
+					${this.t("preview.close")}
 				</button>
 			</header>
-			${this.native === "xlsx" ? html`<p class="hint">Edits stay local. Download a copy${this.saveCopy ? " or save a copy to the channel" : ""} to keep them. Other people keep their own copy open.</p>` : nothing}
-			${this.saved ? html`<p role="status">Workbook copy shared in the channel.</p>` : nothing}
-			${this.downloaded ? html`<p role="status">Workbook download started. Your changes remain local.</p>` : nothing}
+			${this.native === "xlsx" ? html`<p class="hint">${this.t(this.saveCopy ? "preview.editsLocalShare" : "preview.editsLocal")}</p>` : nothing}
+			${this.saved ? html`<p role="status">${this.t("preview.copyShared")}</p>` : nothing}
+			${this.downloaded ? html`<p role="status">${this.t("preview.downloadStarted")}</p>` : nothing}
 			${this.saveError ? html`<p role="alert">${this.saveError}</p>` : nothing}
-			${this.status === "loading" ? html`<p role="status">Loading preview...</p>` : nothing}
+			${this.status === "loading" ? html`<p role="status">${this.t("preview.loading")}</p>` : nothing}
 			${this.status === "error" ? html`<p role="alert">${this.error}</p>
-							<button type="button" @click=${() => void this.load()}>Retry</button>` : nothing}
-			${this.frame ? html`<p class="hint">If this site blocks embedding, use Open externally.</p>
+							<button type="button" @click=${() => void this.load()}>
+								${this.t("common.retry")}
+							</button>` : nothing}
+			${this.frame ? html`<p class="hint">${this.t("preview.blocksEmbedding")}</p>
 							<iframe
 								title=${detail.attachment.name}
 								src=${this.frame}
@@ -2205,8 +2375,13 @@ var TeamsContentPreview = class extends LitElement {
 							></iframe>` : nothing}
 			${keyed(
       detail,
-      this.native === "docx" ? html`<docx-editor .readOnly=${true} .fileName=${detail.attachment.name}></docx-editor>` : this.native === "xlsx" ? html`<xlsx-editor
+      this.native === "docx" ? html`<docx-editor
+							.readOnly=${true}
+							.locale=${this.i18n.locale}
+							.fileName=${detail.attachment.name}
+						></docx-editor>` : this.native === "xlsx" ? html`<xlsx-editor
 								.readOnly=${!this.editing}
+								.locale=${this.i18n.locale}
 								.fileName=${detail.attachment.name}
 								@workbook-change=${() => {
         this.revision++;
@@ -2220,7 +2395,7 @@ var TeamsContentPreview = class extends LitElement {
 								@file-command=${(e) => {
         if (["save", "saveAs", "export", "exportCsv"].includes(e.detail.command) && !this.commitPendingEdit()) {
           e.preventDefault();
-          this.saveError = "Finish or cancel the current cell edit before saving.";
+          this.saveError = this.t("preview.finishEditSave");
           return;
         }
         if (e.detail.command === "save") {
@@ -2229,10 +2404,10 @@ var TeamsContentPreview = class extends LitElement {
         }
         if (e.detail.command === "new" || e.detail.command === "open") e.preventDefault();
       }}
-							></xlsx-editor>` : this.native === "vsdx" ? html`<visio-viewer .showToolbar=${false}></visio-viewer>` : this.native === "pptx" ? html`<teams-presentation-preview></teams-presentation-preview>` : nothing
+							></xlsx-editor>` : this.native === "vsdx" ? html`<visio-viewer .showToolbar=${false} locale=${this.i18n.locale}></visio-viewer>` : this.native === "pptx" ? html`<teams-presentation-preview></teams-presentation-preview>` : nothing
     )}
 			${this.status === "ready" && !this.frame && !this.native ? html`<article>
-							${kind === "markdown" ? markdownPreview(this.text, url) : html`<pre>${this.text}</pre>`}
+							${kind === "markdown" ? markdownPreview(this.text, url, this.i18n) : html`<pre>${this.text}</pre>`}
 						</article>` : nothing}
 		</section>`;
   }
@@ -2246,7 +2421,7 @@ function defineTeamsContentPreview() {
 var channel_tab_default = ":host {\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n}\n";
 
 // src/teams/app/channel-tab.ts
-var TeamsChannelTab = class extends LitElement {
+var TeamsChannelTab = class extends TeamsLitElement {
   static styles = unsafeCSS(channel_tab_default);
   static properties = {
     tab: { attribute: false },
@@ -2298,12 +2473,12 @@ var TeamsChannelTab = class extends LitElement {
     try {
       const url = tab.content.type === "file" ? await client.fileUrl(attachment) : attachment.url;
       if (generation !== this.generation || !this.isConnected) return;
-      if (!url) throw new Error("Could not resolve the tab content");
+      if (!url) throw new Error(this.t("tab.unresolved"));
       this.detail = { attachment, url, channelId: tab.channelId };
       if (tab.content.type === "file") this.openInHost();
     } catch (error) {
       if (generation === this.generation)
-        this.error = error instanceof Error ? error.message : "Could not open the tab";
+        this.error = error instanceof Error ? localizeCoreText(error.message, this.i18n) : this.t("tab.openFailed");
     }
   }
   saveCopy() {
@@ -2326,7 +2501,9 @@ var TeamsChannelTab = class extends LitElement {
   render() {
     if (this.hostOpened)
       return html`<p>${this.detail?.attachment.name}</p>
-				<button type="button" @click=${() => this.openInHost()}>Open document</button>`;
+				<button type="button" @click=${() => this.openInHost()}>
+					${this.t("tab.openDocument")}
+				</button>`;
     return html`${this.error ? html`<p role="alert">${this.error}</p>
 						<button
 							type="button"
@@ -2335,12 +2512,12 @@ var TeamsChannelTab = class extends LitElement {
       void this.resolve();
     }}
 						>
-							Retry
+							${this.t("common.retry")}
 						</button>` : this.detail ? html`<teams-content-preview
 							.detail=${this.detail}
 							.embeds=${this.embeds}
 							.saveCopy=${this.saveCopy()}
-						></teams-content-preview>` : html`<p role="status">Opening tab...</p>`}`;
+						></teams-content-preview>` : html`<p role="status">${this.t("tab.opening")}</p>`}`;
   }
 };
 function defineTeamsChannelTab() {
@@ -2373,7 +2550,7 @@ function toggleAnchoredPopover(panel, trigger) {
 
 // src/teams/app/file-actions.ts
 var fileKey = (file) => JSON.stringify([file?.channelId, file?.messageId, file?.url, file?.name]);
-var TeamsFileActions = class extends LitElement {
+var TeamsFileActions = class extends TeamsLitElement {
   static styles = unsafeCSS(file_actions_default);
   static properties = {
     file: { attribute: false },
@@ -2442,7 +2619,7 @@ var TeamsFileActions = class extends LitElement {
     try {
       const url = contentUrl(await client.fileUrl(file), this.ownerDocument.baseURI);
       if (!this.isConnected || abort.signal.aborted) return;
-      if (!url) throw new Error("The file is no longer available");
+      if (!url) throw new Error(this.t("core.fileGone"));
       if (action === "download") {
         const bytes = await readContent(url, abort.signal, 33554432);
         if (this.isConnected && !abort.signal.aborted)
@@ -2462,7 +2639,7 @@ var TeamsFileActions = class extends LitElement {
       }
     } catch (error) {
       if (!abort.signal.aborted)
-        this.error = error instanceof Error ? error.message : "Could not access this file";
+        this.error = error instanceof Error ? localizeCoreText(error.message, this.i18n) : this.t("files.accessFailed");
     } finally {
       if (this.abort === abort) {
         this.abort = void 0;
@@ -2473,7 +2650,7 @@ var TeamsFileActions = class extends LitElement {
   render() {
     return html`<button
 				type="button"
-				aria-label=${`More actions for ${this.file?.name ?? "file"}`}
+				aria-label=${this.t("files.moreActions", { name: this.file?.name ?? this.t("files.fileFallback") })}
 				?disabled=${!this.file?.url}
 				aria-controls="actions"
 				aria-expanded=${String(this.menuOpen)}
@@ -2484,23 +2661,29 @@ var TeamsFileActions = class extends LitElement {
 			<div
 				id="actions"
 				popover="auto"
-				aria-label="File actions"
+				aria-label=${this.t("files.actions")}
 				@toggle=${() => this.menuOpen = this.renderRoot.querySelector("[popover]").matches(":popover-open")}
 			>
-				<button type="button" @click=${() => this.open("open")}>Open in OpenTeams</button>
-				<button type="button" @click=${() => this.open("browser")}>Open in browser</button>
+				<button type="button" @click=${() => this.open("open")}>
+					${this.t("files.openInTeams")}
+				</button>
+				<button type="button" @click=${() => this.open("browser")}>
+					${this.t("files.openInBrowser")}
+				</button>
 				<button type="button" ?disabled=${this.busy} @click=${() => void this.transfer("download")}>
-					Download
+					${this.t("files.download")}
 				</button>
 				<button type="button" ?disabled=${this.busy} @click=${() => void this.transfer("copy")}>
-					Copy link
+					${this.t("files.copyLink")}
 				</button>
-				<button type="button" @click=${() => this.open("pin")}>Pin as tab</button>
-				${this.busy ? html`<p role="status">Preparing file…</p>
-								<button type="button" @click=${() => this.abort?.abort()}>Cancel</button>` : nothing}
+				<button type="button" @click=${() => this.open("pin")}>${this.t("files.pinAsTab")}</button>
+				${this.busy ? html`<p role="status">${this.t("files.preparingFile")}</p>
+								<button type="button" @click=${() => this.abort?.abort()}>
+									${this.t("common.cancel")}
+								</button>` : nothing}
 				${this.error ? html`<p role="alert">${this.error}</p>` : nothing}
-				${this.copied ? html`<p role="status">Link copied</p>` : nothing}
-				${this.copyUrl ? html`<label>File link<input readonly .value=${this.copyUrl} @focus=${(event) => event.target.select()} /></label>` : nothing}
+				${this.copied ? html`<p role="status">${this.t("files.linkCopied")}</p>` : nothing}
+				${this.copyUrl ? html`<label>${this.t("files.fileLink")}<input readonly .value=${this.copyUrl} @focus=${(event) => event.target.select()} /></label>` : nothing}
 			</div>`;
   }
 };
@@ -2510,7 +2693,7 @@ function defineTeamsFileActions() {
 }
 
 // src/teams/app/files-panel.ts
-var TeamsFilesPanel = class extends LitElement {
+var TeamsFilesPanel = class extends TeamsLitElement {
   static styles = unsafeCSS(files_panel_default);
   static properties = {
     client: { attribute: false },
@@ -2601,7 +2784,7 @@ var TeamsFilesPanel = class extends LitElement {
       if (this.client === client && this.active === controller && this.isConnected) {
         this.canceled = controller.signal.aborted;
         if (!this.canceled)
-          this.error = error instanceof Error ? error.message : "Could not share files";
+          this.error = error instanceof Error ? localizeCoreText(error.message, this.i18n) : this.t("files.shareFailed");
       }
     } finally {
       if (this.active === controller) {
@@ -2654,10 +2837,10 @@ var TeamsFilesPanel = class extends LitElement {
       this.sortDirection
     );
     const disabled = this.busy || !this.canUpload || !this.channelId;
-    return html`<div class="toolbar" role="toolbar" aria-label="File actions">
+    return html`<div class="toolbar" role="toolbar" aria-label=${this.t("files.actions")}>
 				<office-ui-menu-button
 					class="new-command"
-					label="+ New"
+					label=${this.t("files.new")}
 					.disabled=${disabled}
 					@office-command=${async (event) => {
       if (event.detail.command !== "new-workbook" || disabled) return;
@@ -2667,7 +2850,7 @@ var TeamsFilesPanel = class extends LitElement {
     }}
 				>
 					<office-ui-menu-item
-						label="New Excel workbook"
+						label=${this.t("files.newWorkbook")}
 						command="new-workbook"
 					></office-ui-menu-item>
 				</office-ui-menu-button>
@@ -2676,12 +2859,12 @@ var TeamsFilesPanel = class extends LitElement {
 					?disabled=${disabled}
 					@click=${() => this.renderRoot.querySelector('input[type="file"]')?.click()}
 				>
-					${icon("upload")} Upload
+					${icon("upload")} ${this.t("files.upload")}
 				</button>
 				<input
 					type="file"
 					class="file-picker"
-					aria-label="Upload files"
+					aria-label=${this.t("files.uploadFiles")}
 					multiple
 					?disabled=${disabled}
 					@change=${this.upload}
@@ -2689,55 +2872,67 @@ var TeamsFilesPanel = class extends LitElement {
 				<span class="toolbar-space"></span>
 				<input
 					type="search"
-					aria-label="Search files"
-					placeholder="Search files"
+					aria-label=${this.t("files.search")}
+					placeholder=${this.t("files.search")}
 					.value=${this.query}
 					@input=${(e) => this.query = e.target.value}
 				/>
 			</div>
 			<p class="hint">
-				${this.canUpload ? `New files are shared in # ${this.channelName}.` : "Configure file storage to upload files or create workbooks."}
+				${this.canUpload ? this.t("files.sharedIn", { channel: this.channelName }) : this.t("files.configureStorage")}
 			</p>
-			${this.creating ? html`<form aria-label="Create Excel workbook" @submit=${this.create}>
+			${this.creating ? html`<form aria-label=${this.t("files.createWorkbook")} @submit=${this.create}>
 							<input
 								name="name"
-								aria-label="Workbook name"
-								placeholder="Workbook name"
+								aria-label=${this.t("files.workbookName")}
+								placeholder=${this.t("files.workbookName")}
 								maxlength="75"
 								required
 								?disabled=${this.busy}
 							/>
-							<button type="submit" ?disabled=${disabled}>Create workbook</button>
+							<button type="submit" ?disabled=${disabled}>
+								${this.t("files.createWorkbookButton")}
+							</button>
 							<button type="button" ?disabled=${this.busy} @click=${() => this.creating = false}>
-								Cancel
+								${this.t("common.cancel")}
 							</button>
 						</form>` : nothing}
 			${this.busy ? html`<div class="transfer">
 							<p role="status">
-								Sharing files in # ${this.destination}:
-								${this.transfer?.phase === "preparing" ? "Preparing" : "Uploading"}
-								${this.transfer?.fileName ?? ""} (${this.transfer?.completed ?? 0} of
-								${this.transfer?.total ?? 0} uploaded)
+								${this.t("files.sharing", {
+      channel: this.destination,
+      phase: this.t(
+        this.transfer?.phase === "preparing" ? "files.preparing" : "files.uploading"
+      ),
+      file: this.transfer?.fileName ?? "",
+      completed: this.transfer?.completed ?? 0,
+      total: this.transfer?.total ?? 0
+    })}
 							</p>
-							${this.transfer ? html`<progress aria-label="Files uploaded" max=${this.transfer.total} value=${this.transfer.completed}></progress>` : nothing}
-							<button type="button" @click=${() => this.active?.abort()}>Cancel sharing</button>
+							${this.transfer ? html`<progress aria-label=${this.t("files.uploaded")} max=${this.transfer.total} value=${this.transfer.completed}></progress>` : nothing}
+							<button type="button" @click=${() => this.active?.abort()}>
+								${this.t("files.cancelSharing")}
+							</button>
 						</div>` : nothing}
-			${this.error || this.canceled ? html`${this.canceled ? html`<p role="status">Sharing in # ${this.destination} canceled.</p>` : html`<p role="alert">Sharing in # ${this.destination} failed: ${this.error}</p>`}
+			${this.error || this.canceled ? html`${this.canceled ? html`<p role="status">${this.t("files.canceled", { channel: this.destination })}</p>` : html`<p role="alert">${this.t("files.failed", { channel: this.destination, error: this.error })}</p>`}
 							<button
 								type="button"
 								?disabled=${this.busy}
 								@click=${() => this.retry && void this.run(this.retry)}
 							>
-								Retry sharing files
+								${this.t("files.retry")}
 							</button>` : nothing}
 			<div class="file-list">
-				<table aria-label="Shared files">
+				<table aria-label=${this.t("files.shared")}>
 					<thead>
 						<tr>
-							${this.sortHeading("name", "Name")} ${this.sortHeading("ts", "Shared on")}
-							${this.sortHeading("author", "Shared by")}
-							<th scope="col">Location</th>
-							<th scope="col"><span class="visually-hidden">Actions</span></th>
+							${this.sortHeading("name", this.t("files.name"))}
+							${this.sortHeading("ts", this.t("files.sharedOn"))}
+							${this.sortHeading("author", this.t("files.sharedBy"))}
+							<th scope="col">${this.t("files.location")}</th>
+							<th scope="col">
+								<span class="visually-hidden">${this.t("files.actionsColumn")}</span>
+							</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -2751,7 +2946,7 @@ var TeamsFilesPanel = class extends LitElement {
 														<button
 															class="file-open"
 															type="button"
-															aria-label=${`Open ${file.name}`}
+															aria-label=${this.t("chat.openFile", { name: file.name })}
 															title=${file.name}
 															?disabled=${!file.url}
 															@click=${() => this.emit("open", file)}
@@ -2760,7 +2955,9 @@ var TeamsFilesPanel = class extends LitElement {
 														</button>
 													</div>
 												</td>
-												<td><time>${new Date(file.ts).toLocaleDateString()}</time></td>
+												<td>
+													<time>${new Date(file.ts).toLocaleDateString(this.i18n.intl)}</time>
+												</td>
 												<td>${file.author}</td>
 												<td>
 													${file.channelName ? `# ${file.channelName}` : `# ${this.channelName}`}
@@ -2774,7 +2971,7 @@ var TeamsFilesPanel = class extends LitElement {
 											</tr>`
     ) : html`<tr>
 										<td colspan="5" class="none">
-											${this.query.trim() ? "No matching files." : "No files shared yet."}
+											${this.t(this.query.trim() ? "files.noMatch" : "files.none")}
 										</td>
 									</tr>`}
 					</tbody>
@@ -2792,8 +2989,13 @@ var teams_settings_default = ":host {\n	font: var(--office-font-size) var(--offi
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/settings-previews.css?raw
 var settings_previews_default = ".theme-options,\n.density-options {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-3);\n}\n.theme-options button {\n	display: grid;\n	gap: var(--office-space-3);\n	padding: var(--office-space-2);\n	text-align: start;\n	min-width: 9em;\n}\n.theme-options button[aria-pressed='true'],\n.density-choice:has(input:checked) {\n	border-color: var(--office-teams-brand);\n	box-shadow: inset 0 0 0 var(--office-border-width) var(--office-teams-brand);\n}\n.theme-swatch {\n	--preview-paper: var(--office-call-foreground);\n	--preview-ink: var(--office-call-background);\n	display: grid;\n	grid-template-columns: 0.7em 2.4em 1fr;\n	grid-template-rows: 0.7em 1fr;\n	width: 9em;\n	height: 5.5em;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius);\n	overflow: hidden;\n	background: var(--preview-paper);\n}\n.theme-swatch[data-theme='dark'] {\n	--preview-paper: var(--office-call-background);\n	--preview-ink: var(--office-call-foreground);\n}\n.theme-swatch[data-theme='system'] {\n	background: linear-gradient(\n		90deg,\n		var(--office-call-foreground) 50%,\n		var(--office-call-background) 50%\n	);\n}\n.preview-toolbar {\n	grid-column: 1 / -1;\n	background: var(--office-teams-brand);\n}\n.preview-rail,\n.preview-sidebar {\n	background: color-mix(in srgb, var(--preview-ink) 8%, var(--preview-paper));\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.preview-sidebar,\n.preview-conversation {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2);\n}\n.preview-sidebar i,\n.preview-conversation i {\n	height: 0.4em;\n	border-radius: var(--office-radius);\n	background: color-mix(in srgb, var(--preview-ink) 25%, var(--preview-paper));\n}\n.preview-conversation i {\n	height: 0.8em;\n	width: 80%;\n}\n.preview-conversation i:nth-child(2) {\n	align-self: flex-end;\n	background: var(--office-teams-brand-subtle);\n}\n.density-options {\n	margin: var(--office-space-5) 0 0;\n	padding: var(--office-space-5) 0 0;\n	border: 0;\n	border-top: var(--office-border-width) solid var(--office-teams-divider);\n}\n.density-options legend {\n	float: inline-start;\n	width: 100%;\n	font-weight: var(--office-font-weight-bold);\n	margin-bottom: var(--office-space-3);\n}\n.density-choice {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-3);\n	width: 13em;\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	cursor: pointer;\n	font-weight: normal;\n}\n.density-choice input {\n	position: absolute;\n	inset-inline-end: var(--office-space-2);\n	inset-block-end: var(--office-space-2);\n	accent-color: var(--office-teams-brand);\n}\n.density-caption {\n	display: grid;\n	gap: var(--office-space-1);\n	padding-inline-end: var(--office-space-5);\n}\n.density-preview {\n	display: flex;\n	flex-direction: column;\n	justify-content: center;\n	gap: var(--office-space-3);\n	height: 7em;\n	padding: var(--office-space-3);\n	border-radius: var(--office-radius);\n	background: var(--office-teams-panel);\n}\n.preview-message {\n	display: flex;\n	gap: var(--office-space-2);\n	align-items: flex-start;\n}\n.preview-message > i {\n	width: 1.1em;\n	height: 1.1em;\n	border-radius: 50%;\n	background: var(--office-teams-brand-subtle);\n	border: var(--office-border-width) solid var(--office-teams-brand);\n}\n.preview-message > span {\n	display: grid;\n	gap: var(--office-space-1);\n	flex: 1;\n}\n.preview-message b {\n	height: 0.3em;\n	width: 75%;\n	background: var(--office-teams-text-subtle);\n	border-radius: var(--office-radius);\n}\n.preview-message b + b {\n	width: 100%;\n	opacity: 0.4;\n}\n.density-preview[data-density='compact'] {\n	gap: var(--office-space-1);\n}\n.density-preview[data-density='compact'] .preview-message > i {\n	width: 0.7em;\n	height: 0.7em;\n}\n.density-preview[data-density='compact'] .preview-message > span {\n	display: flex;\n	align-items: center;\n}\n@media (forced-colors: active) {\n	.theme-options button[aria-pressed='true'],\n	.density-choice:has(input:checked) {\n		outline: var(--office-focus-width) solid Highlight;\n	}\n}\n";
-function themeChoices(current, change) {
-  return html`<div class="theme-options" role="group" aria-label="Theme">
+var THEME_KEY = {
+  system: "settings.themeSystem",
+  light: "settings.themeLight",
+  dark: "settings.themeDark"
+};
+function themeChoices(current, change, i18n = teamsI18n()) {
+  return html`<div class="theme-options" role="group" aria-label=${i18n.t("settings.theme")}>
 		${["system", "light", "dark"].map(
     (theme) => html`<button
 					type="button"
@@ -2806,9 +3008,7 @@ function themeChoices(current, change) {
 						<span class="preview-sidebar"><i></i><i></i><i></i></span>
 						<span class="preview-conversation"><i></i><i></i><i></i></span>
 					</span>
-					<span
-						>${theme === "system" ? "Follow system" : theme === "light" ? "Light" : "Dark"}</span
-					>
+					<span>${i18n.t(THEME_KEY[theme])}</span>
 				</button>`
   )}
 	</div>`;
@@ -2828,9 +3028,10 @@ function parseIceLines(text) {
 var iceToText = (config) => config.iceServers.map(
   (server) => [[server.urls].flat().join(","), server.username, server.credential].filter(Boolean).join(" ")
 ).join("\n");
-function densityChoices(density, change) {
+function densityChoices(density, change, i18n = teamsI18n()) {
+  const { t } = i18n;
   return html`<fieldset class="density-options">
-		<legend>Chat density</legend>
+		<legend>${t("settings.density")}</legend>
 		${["comfy", "compact"].map(
     (value) => html`<label class="density-choice">
 					<input
@@ -2848,9 +3049,9 @@ function densityChoices(density, change) {
     )}
 					</span>
 					<span class="density-caption"
-						><strong>${value === "comfy" ? "Comfy" : "Compact"}</strong>
+						><strong>${t(value === "comfy" ? "settings.comfy" : "settings.compact")}</strong>
 						<small
-							>${value === "comfy" ? "More space between messages" : "More messages in less space"}</small
+							>${t(value === "comfy" ? "settings.comfyText" : "settings.compactText")}</small
 						></span
 					>
 				</label>`
@@ -2858,20 +3059,21 @@ function densityChoices(density, change) {
 	</fieldset>`;
 }
 var LEVELS = [
-  ["all", "All activity", "Mentions, replies, reactions and pinned messages"],
-  ["mentions", "Mentions only", "Only when someone mentions you"],
-  ["off", "Off", "Activity still collects in the Activity feed"]
+  ["all", "settings.levelAll", "settings.levelAllText"],
+  ["mentions", "settings.levelMentions", "settings.levelMentionsText"],
+  ["off", "settings.levelOff", "settings.levelOffText"]
 ];
-var PERMISSION_TEXT = {
-  granted: "Desktop notifications are on for this browser. They appear when this tab is in the background.",
-  default: "Desktop notifications appear when this tab is in the background. Your browser asks first.",
-  denied: "Desktop notifications are blocked for this site. Allow them in your browser settings to turn them on.",
-  unsupported: "This browser does not support desktop notifications."
+var PERMISSION_KEY = {
+  granted: "settings.permissionGranted",
+  default: "settings.permissionDefault",
+  denied: "settings.permissionDenied",
+  unsupported: "settings.permissionUnsupported"
 };
 var desktopPermission = () => globalThis.Notification?.permission ?? "unsupported";
-function notificationChoices(settings, permission, handlers) {
+function notificationChoices(settings, permission, handlers, i18n = teamsI18n()) {
+  const { t } = i18n;
   return html`<fieldset class="notification-level">
-			<legend>Notify me about</legend>
+			<legend>${t("settings.notifyAbout")}</legend>
 			${LEVELS.map(
     ([level, label, description]) => html`<label class="notification-choice">
 						<input
@@ -2881,102 +3083,86 @@ function notificationChoices(settings, permission, handlers) {
 							.checked=${settings.level === level}
 							@change=${() => handlers.change({ level })}
 						/>
-						<span><strong>${label}</strong><small>${description}</small></span>
+						<span><strong>${t(label)}</strong><small>${t(description)}</small></span>
 					</label>`
   )}
 		</fieldset>
-		<h3>Sound</h3>
+		<h3>${t("settings.sound")}</h3>
 		<label class="preference"
-			><span>Play a sound for new notifications</span
+			><span>${t("settings.soundText")}</span
 			><office-ui-switch
-				aria-label="Notification sound"
+				aria-label=${t("settings.soundLabel")}
 				.checked=${settings.sound}
 				@change=${(event) => handlers.change({ sound: event.target.checked })}
 			></office-ui-switch
 		></label>
-		<h3>Desktop notifications</h3>
-		<p class="description" role="status">${PERMISSION_TEXT[permission]}</p>
+		<h3>${t("settings.desktop")}</h3>
+		<p class="description" role="status">${t(PERMISSION_KEY[permission])}</p>
 		${permission === "default" ? html`<button type="button" class="primary" @click=${handlers.requestPermission}>
-						Enable desktop notifications
+						${t("settings.enableDesktop")}
 					</button>` : ""}
-		<p class="description">
-			Do not disturb silences every notification. Email and mobile push notifications are not
-			available.
-		</p>`;
+		<p class="description">${t("settings.dndNote")}</p>`;
 }
 var SETTINGS_CATEGORIES = [
-  ["general", "General"],
-  ["appearance", "Appearance and accessibility"],
-  ["notifications", "Notifications and activity"],
-  ["files", "Files and links"],
-  ["connection", "Connection"]
+  ["general", "settings.general"],
+  ["appearance", "settings.appearance"],
+  ["notifications", "settings.notifications"],
+  ["files", "settings.files"],
+  ["connection", "settings.connection"]
 ];
 var TOPICS = [
-  { category: "general", title: "Profile", description: "Your name and workspace on this device" },
-  {
-    category: "appearance",
-    title: "Theme",
-    description: "Follow system, light or dark appearance"
-  },
-  {
-    category: "appearance",
-    title: "Chat density",
-    description: "Comfy or compact message spacing"
-  },
-  {
-    category: "appearance",
-    title: "Show app names",
-    description: "Display labels beneath app bar icons"
-  },
+  { category: "general", title: "settings.profile", description: "settings.topic.profile" },
+  { category: "appearance", title: "settings.theme", description: "settings.topic.theme" },
+  { category: "appearance", title: "settings.density", description: "settings.topic.density" },
+  { category: "appearance", title: "settings.appNames", description: "settings.appNamesText" },
   {
     category: "notifications",
-    title: "Activity notifications",
-    description: "Notify for all activity, mentions only or nothing"
+    title: "settings.activityNotifications",
+    description: "settings.topic.activityNotifications"
   },
+  { category: "notifications", title: "settings.sound", description: "settings.soundText" },
   {
     category: "notifications",
-    title: "Sound",
-    description: "Play a sound for new notifications"
+    title: "settings.desktop",
+    description: "settings.topic.desktop"
   },
   {
     category: "notifications",
-    title: "Desktop notifications",
-    description: "Browser notifications while this tab is in the background, and Do not disturb"
-  },
-  {
-    category: "notifications",
-    title: "Followed threads",
-    description: "Threads I start and threads I reply to"
-  },
-  {
-    category: "files",
-    title: "File open preference",
-    description: "Open Word, PowerPoint and Excel in OpenTeams or browser"
+    title: "settings.followed",
+    description: "settings.topic.followed"
   },
+  { category: "files", title: "settings.fileOpen", description: "settings.topic.fileOpen" },
   {
     category: "connection",
-    title: "Connection",
-    description: "Workspace server, sync URL, signaling URL, access token and ICE servers"
+    title: "settings.connection",
+    description: "settings.topic.connection"
   }
 ];
-function settingsSearch(query, select) {
-  const words = query.trim().toLocaleLowerCase().split(/\s+/u);
-  const matches = TOPICS.filter((topic) => {
-    const category = SETTINGS_CATEGORIES.find(([id]) => id === topic.category)[1];
-    const text = `${category} ${topic.title} ${topic.description}`.toLocaleLowerCase();
+var categoryLabel = (category, i18n) => i18n.t(SETTINGS_CATEGORIES.find(([id]) => id === category)[1]);
+function settingsSearch(query, select, i18n = teamsI18n()) {
+  const { t } = i18n;
+  const words = query.trim().toLocaleLowerCase(i18n.locale).split(/\s+/u);
+  const topics = TOPICS.map((topic) => ({
+    category: topic.category,
+    title: t(topic.title),
+    description: t(topic.description)
+  }));
+  const matches = topics.filter((topic) => {
+    const text = `${categoryLabel(topic.category, i18n)} ${topic.title} ${topic.description}`.toLocaleLowerCase(
+      i18n.locale
+    );
     return words.every((word) => text.includes(word));
   });
-  return html`<section class="settings-results" aria-label="Settings search results">
-		<h2>Search results</h2>
+  return html`<section class="settings-results" aria-label=${t("settings.resultsLabel")}>
+		<h2>${t("settings.results")}</h2>
 		<p role="status">
-			${matches.length ? `${matches.length} ${matches.length === 1 ? "setting" : "settings"} found` : "No matching settings. Try another keyword."}
+			${matches.length ? i18n.tn("settings.found", matches.length) : t("settings.noMatch")}
 		</p>
 		<ul>
 			${matches.map(
     (topic) => html`<li>
 						<button type="button" @click=${() => select(topic)}>
-							<strong>${topic.title}</strong
-							><span>${SETTINGS_CATEGORIES.find(([id]) => id === topic.category)[1]}</span
+							<strong>${topic.title}</strong><span>${categoryLabel(topic.category, i18n)}</span
 							><small>${topic.description}</small>
 						</button>
 					</li>`
@@ -2986,7 +3172,7 @@ function settingsSearch(query, select) {
 }
 
 // src/teams/app/teams-settings.ts
-var TeamsSettings = class extends LitElement {
+var TeamsSettings = class extends TeamsLitElement {
   static styles = [unsafeCSS(teams_settings_default), unsafeCSS(settings_previews_default)];
   static properties = {
     config: { attribute: false },
@@ -3079,7 +3265,7 @@ var TeamsSettings = class extends LitElement {
     const c = this.config;
     return html`
 			<dialog
-				aria-label="Settings"
+				aria-label=${this.t("settings.title")}
 				@close=${() => {
       if (this.open) this.close();
     }}
@@ -3095,21 +3281,26 @@ var TeamsSettings = class extends LitElement {
     }}
 			>
 				<header>
-					<h1>Settings</h1>
+					<h1>${this.t("settings.title")}</h1>
 					<input
 						type="search"
-						aria-label="Search settings"
-						placeholder="Search settings"
+						aria-label=${this.t("settings.search")}
+						placeholder=${this.t("settings.search")}
 						.value=${this.query}
 						@input=${(event) => this.query = event.target.value}
 					/>
-					<button type="button" class="close" aria-label="Close settings" @click=${this.close}>
+					<button
+						type="button"
+						class="close"
+						aria-label=${this.t("settings.close")}
+						@click=${this.close}
+					>
 						×
 					</button>
 				</header>
 				<div class="settings-layout">
 					<nav
-						aria-label="Settings categories"
+						aria-label=${this.t("settings.categories")}
 						role="tablist"
 						aria-orientation="vertical"
 						@keydown=${(event) => {
@@ -3136,40 +3327,45 @@ var TeamsSettings = class extends LitElement {
       }}
 								>
 									${icon({ general: "settings", appearance: "formatPainter", notifications: "message", files: "folder", connection: "screenShare" }[id])}<span
-										>${label}</span
+										>${this.t(label)}</span
 									>
 								</button>`
     )}
 					</nav>
 					<div class="settings-content">
-						${this.query.trim() ? settingsSearch(this.query, async (topic) => {
-      this.category = topic.category;
-      this.query = "";
-      await this.updateComplete;
-      if (!this.open || this.query.trim() || this.category !== topic.category) return;
-      const panel = this.renderRoot.querySelector(
-        `#panel-${topic.category}`
-      );
-      const heading = [...panel.querySelectorAll("h2, h3, legend")].find(
-        (element) => element.textContent?.trim() === topic.title
-      ) ?? panel;
-      heading.tabIndex = -1;
-      heading.focus();
-    }) : nothing}
+						${this.query.trim() ? settingsSearch(
+      this.query,
+      async (topic) => {
+        this.category = topic.category;
+        this.query = "";
+        await this.updateComplete;
+        if (!this.open || this.query.trim() || this.category !== topic.category)
+          return;
+        const panel = this.renderRoot.querySelector(
+          `#panel-${topic.category}`
+        );
+        const heading = [...panel.querySelectorAll("h2, h3, legend")].find(
+          (element) => element.textContent?.trim() === topic.title
+        ) ?? panel;
+        heading.tabIndex = -1;
+        heading.focus();
+      },
+      this.i18n
+    ) : nothing}
 						<section
 							id="panel-general"
 							role="tabpanel"
 							aria-labelledby="settings-general"
 							?hidden=${!!this.query.trim() || this.category !== "general"}
 						>
-							<h2>General</h2>
-							<h3>Profile</h3>
-							<p>${this.userName || "OpenTeams user"}</p>
-							<h3>Your workspace</h3>
-							<p>${c.mode === "local" ? "Local workspace" : "Connected workspace"}</p>
-							<p class="description">
-								Preferences are saved for this user and workspace on this device.
+							<h2>${this.t("settings.general")}</h2>
+							<h3>${this.t("settings.profile")}</h3>
+							<p>${this.userName || this.t("settings.defaultUser")}</p>
+							<h3>${this.t("settings.workspace")}</h3>
+							<p>
+								${this.t(c.mode === "local" ? "profile.localWorkspace" : "settings.connectedWorkspace")}
 							</p>
+							<p class="description">${this.t("settings.savedNote")}</p>
 						</section>
 						<section
 							id="panel-appearance"
@@ -3177,23 +3373,20 @@ var TeamsSettings = class extends LitElement {
 							aria-labelledby="settings-appearance"
 							?hidden=${!!this.query.trim() || this.category !== "appearance"}
 						>
-							<h2>Appearance and accessibility</h2>
-							<h3>Theme</h3>
-							${themeChoices(this.theme, (theme) => this.dispatchEvent(new CustomEvent("teams-settings-theme", { detail: { theme }, bubbles: true, composed: true })))}
-							${densityChoices(this.chatDensity, (density) => this.dispatchEvent(new CustomEvent("teams-settings-density", { detail: { density }, bubbles: true, composed: true })))}
-							<h3>Show app names</h3>
+							<h2>${this.t("settings.appearance")}</h2>
+							<h3>${this.t("settings.theme")}</h3>
+							${themeChoices(this.theme, (theme) => this.dispatchEvent(new CustomEvent("teams-settings-theme", { detail: { theme }, bubbles: true, composed: true })), this.i18n)}
+							${densityChoices(this.chatDensity, (density) => this.dispatchEvent(new CustomEvent("teams-settings-density", { detail: { density }, bubbles: true, composed: true })), this.i18n)}
+							<h3>${this.t("settings.appNames")}</h3>
 							<label class="preference"
-								><span>Display labels beneath app bar icons</span
+								><span>${this.t("settings.appNamesText")}</span
 								><office-ui-switch
-									aria-label="Show app names"
+									aria-label=${this.t("settings.appNames")}
 									.checked=${this.showAppNames}
 									@change=${(event) => this.dispatchEvent(new CustomEvent("teams-settings-app-names", { detail: { show: event.target.checked }, bubbles: true, composed: true }))}
 								></office-ui-switch
 							></label>
-							<p class="description">
-								Changes apply immediately to this OpenTeams workspace. Keyboard focus and system
-								high-contrast preferences remain available.
-							</p>
+							<p class="description">${this.t("settings.appearanceNote")}</p>
 						</section>
 						<section
 							id="panel-notifications"
@@ -3201,23 +3394,28 @@ var TeamsSettings = class extends LitElement {
 							aria-labelledby="settings-notifications"
 							?hidden=${!!this.query.trim() || this.category !== "notifications"}
 						>
-							<h2>Notifications and activity</h2>
-							<h3>Activity notifications</h3>
-							${notificationChoices(this.notificationSettings, desktopPermission(), {
-      change: (detail) => this.dispatchEvent(
-        new CustomEvent("teams-settings-notifications", {
-          detail,
-          bubbles: true,
-          composed: true
-        })
-      ),
-      requestPermission: () => void globalThis.Notification?.requestPermission().then(
-        () => this.requestUpdate()
-      )
-    })}
-							<h3>Followed threads</h3>
-							<p class="description">Choose which conversations appear in Followed threads.</p>
-							${["started", "replied"].map((key) => html`<label class="preference"><span>${key === "started" ? "Threads I start" : "Threads I reply to"}</span><office-ui-switch aria-label=${key === "started" ? "Threads I start" : "Threads I reply to"} .checked=${this.followSettings[key]} @change=${(event) => this.dispatchEvent(new CustomEvent("teams-settings-follow", { detail: { [key]: event.target.checked }, bubbles: true, composed: true }))}></office-ui-switch></label>`)}
+							<h2>${this.t("settings.notifications")}</h2>
+							<h3>${this.t("settings.activityNotifications")}</h3>
+							${notificationChoices(
+      this.notificationSettings,
+      desktopPermission(),
+      {
+        change: (detail) => this.dispatchEvent(
+          new CustomEvent("teams-settings-notifications", {
+            detail,
+            bubbles: true,
+            composed: true
+          })
+        ),
+        requestPermission: () => void globalThis.Notification?.requestPermission().then(
+          () => this.requestUpdate()
+        )
+      },
+      this.i18n
+    )}
+							<h3>${this.t("settings.followed")}</h3>
+							<p class="description">${this.t("settings.followedNote")}</p>
+							${["started", "replied"].map((key) => html`<label class="preference"><span>${this.t(key === "started" ? "followed.started" : "followed.replied")}</span><office-ui-switch aria-label=${this.t(key === "started" ? "followed.started" : "followed.replied")} .checked=${this.followSettings[key]} @change=${(event) => this.dispatchEvent(new CustomEvent("teams-settings-follow", { detail: { [key]: event.target.checked }, bubbles: true, composed: true }))}></office-ui-switch></label>`)}
 						</section>
 						<section
 							id="panel-files"
@@ -3225,24 +3423,20 @@ var TeamsSettings = class extends LitElement {
 							aria-labelledby="settings-files"
 							?hidden=${!!this.query.trim() || this.category !== "files"}
 						>
-							<h2>Files and links</h2>
-							<h3>File open preference</h3>
+							<h2>${this.t("settings.files")}</h2>
+							<h3>${this.t("settings.fileOpen")}</h3>
 							<label
-								>Always open Word, PowerPoint and Excel files in:
+								>${this.t("settings.fileOpenLabel")}
 								<select
-									aria-label="Office file open preference"
+									aria-label=${this.t("settings.fileOpenAria")}
 									.value=${this.fileOpenPreference}
 									@change=${(event) => this.dispatchEvent(new CustomEvent("teams-settings-file-open", { detail: { preference: event.target.value }, bubbles: true, composed: true }))}
 								>
 									<option value="teams">OpenTeams</option>
-									<option value="browser">Browser</option>
+									<option value="browser">${this.t("settings.browser")}</option>
 								</select></label
 							>
-							<p class="description">
-								Browser opens the built-in viewer in a separate tab. Hosts can provide their own
-								viewers. Desktop-app defaults and download-location preferences are not available
-								yet.
-							</p>
+							<p class="description">${this.t("settings.fileOpenNote")}</p>
 						</section>
 						<form
 							id="panel-connection"
@@ -3251,19 +3445,21 @@ var TeamsSettings = class extends LitElement {
 							?hidden=${!!this.query.trim() || this.category !== "connection"}
 							@submit=${this.apply}
 						>
-							<h2>Connection</h2>
-							<p class="description">Configure your workspace server and calling service.</p>
+							<h2>${this.t("settings.connection")}</h2>
+							<p class="description">${this.t("settings.connectionNote")}</p>
 							<label>
-								<span>Mode</span>
+								<span>${this.t("settings.mode")}</span>
 								<select id="mode" .value=${c.mode}>
 									<option value="local" ?selected=${c.mode === "local"}>
-										Local: tabs of this browser only (no server)
+										${this.t("settings.modeLocal")}
+									</option>
+									<option value="server" ?selected=${c.mode === "server"}>
+										${this.t("settings.modeServer")}
 									</option>
-									<option value="server" ?selected=${c.mode === "server"}>Your server</option>
 								</select>
 							</label>
 							<label>
-								<span>Sync URL</span>
+								<span>${this.t("settings.syncUrl")}</span>
 								<input
 									id="sync"
 									.value=${c.syncUrl ?? ""}
@@ -3271,10 +3467,10 @@ var TeamsSettings = class extends LitElement {
 									spellcheck="false"
 									autocomplete="off"
 								/>
-								<small>y-websocket compatible endpoint; the workspace id is appended.</small>
+								<small>${this.t("settings.syncHint")}</small>
 							</label>
 							<label>
-								<span>Signaling URL</span>
+								<span>${this.t("settings.signalUrl")}</span>
 								<input
 									id="signal"
 									.value=${c.signalingUrl ?? ""}
@@ -3282,35 +3478,35 @@ var TeamsSettings = class extends LitElement {
 									spellcheck="false"
 									autocomplete="off"
 								/>
-								<small>WebRTC signaling relay; the call room is appended.</small>
+								<small>${this.t("settings.signalHint")}</small>
 							</label>
 							<label>
-								<span>Access token</span>
+								<span>${this.t("settings.token")}</span>
 								<input
 									id="token"
 									type="password"
 									.value=${c.token ?? ""}
-									placeholder="shared secret"
+									placeholder=${this.t("settings.tokenPlaceholder")}
 									autocomplete="off"
 								/>
-								<small>Sent as ?token= to both sockets. Stored in this browser.</small>
+								<small>${this.t("settings.tokenHint")}</small>
 							</label>
 							<label>
-								<span>ICE servers</span>
+								<span>${this.t("settings.iceServers")}</span>
 								<textarea
 									id="ice"
 									spellcheck="false"
 									.value=${iceToText(c)}
 									placeholder="stun:stun.example.org:3478&#10;turn:turn.example.org:3478 user password"
 								></textarea>
-								<small>One per line: urls [username credential]. TURN needs credentials.</small>
+								<small>${this.t("settings.iceHint")}</small>
 							</label>
 							<label>
-								<span>ICE transport</span>
+								<span>${this.t("settings.iceTransport")}</span>
 								<select id="policy" .value=${c.iceTransportPolicy ?? "all"}>
-									<option value="all">All routes (direct when possible)</option>
+									<option value="all">${this.t("settings.iceAll")}</option>
 									<option value="relay" ?selected=${c.iceTransportPolicy === "relay"}>
-										Relay only (TURN required, hides IP addresses)
+										${this.t("settings.iceRelay")}
 									</option>
 								</select>
 							</label>
@@ -3318,8 +3514,8 @@ var TeamsSettings = class extends LitElement {
 											${this.issues.map((i) => html`<li>${i}</li>`)}
 										</ul>` : nothing}
 							<div class="actions">
-								<button type="button" @click=${this.close}>Cancel</button>
-								<button type="submit" class="primary">Apply and reconnect</button>
+								<button type="button" @click=${this.close}>${this.t("common.cancel")}</button>
+								<button type="submit" class="primary">${this.t("settings.apply")}</button>
 							</div>
 						</form>
 					</div>
@@ -3373,19 +3569,20 @@ var saveConfig = (config) => safeStorage.setItem("teams:config", JSON.stringify(
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/teams-app.css?raw
 var teams_app_default = "/* <teams-app>: the shell. Colours, spacing and radii come from the ooxml-ui tokens, so a host\n   retheme or dark mode reaches the whole app. The elements inside bring their own styles. */\n:host {\n	display: block;\n	height: 100%;\n	min-height: 28em;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n	background: var(--office-background);\n}\n:host([data-office-theme='dark']) {\n	--office-background: var(--office-teams-panel);\n	--office-surface: var(--office-teams-bubble);\n	--office-popover: var(--office-teams-panel);\n}\n:host([data-chat-density='compact']) {\n	--office-teams-message-gap: var(--office-space-1);\n	--office-teams-message-padding: var(--office-space-1) var(--office-space-2);\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([data-office-theme='light'])) {\n		--office-background: var(--office-teams-panel);\n		--office-surface: var(--office-teams-bubble);\n		--office-popover: var(--office-teams-panel);\n	}\n}\n*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n\n.shell {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n}\n\n/* ---- top bar ---------------------------------------------------------------------------- */\n.topbar {\n	display: grid;\n	grid-template-columns: 16em minmax(0, 1fr) auto;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-teams-rail);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.brand {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	font-size: var(--office-font-size-lg);\n	font-weight: var(--office-font-weight-bold);\n}\n.logo {\n	display: inline-grid;\n	place-items: center;\n	width: 1.8em;\n	height: 1.8em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: 0.85em;\n}\n.search {\n	position: relative;\n	justify-self: center;\n	width: min(34em, 100%);\n}\n.search input {\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n}\n.results {\n	position: absolute;\n	inset-inline: 0;\n	inset-block-start: calc(100% + var(--office-space-1));\n	z-index: 5;\n	max-height: 22em;\n	margin: 0;\n	padding: var(--office-space-1);\n	overflow: auto;\n	list-style: none;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.results button {\n	display: grid;\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	text-align: start;\n}\n.results button:hover {\n	background: var(--office-selected);\n}\n.results .in,\n.results .none {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.results .none {\n	padding: var(--office-space-3);\n}\n.snippet {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.me {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n}\n.me office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head svg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* ---- body ------------------------------------------------------------------------------- */\n.body {\n	display: grid;\n	grid-template-columns: auto 19em minmax(0, 1fr);\n	min-height: 0;\n	grid-template-rows: minmax(0, 1fr);\n}\n.body > office-ui-app-rail {\n	grid-column: 1;\n	grid-row: 1;\n}\n.body > .side {\n	grid-column: 2;\n	grid-row: 1;\n}\n.body > .main {\n	grid-column: 3;\n	grid-row: 1;\n}\n.body > teams-settings {\n	grid-column: 2 / -1;\n	grid-row: 1;\n	min-width: 0;\n	min-height: 0;\n	z-index: 1;\n}\n.body > teams-settings:not([open]) {\n	display: none;\n}\n.body > [inert] {\n	visibility: hidden;\n}\n.side {\n	min-height: 0;\n	overflow: auto;\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.side h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n.main {\n	display: flex;\n	flex-direction: column;\n	min-width: 0;\n	min-height: 0;\n}\n.popout-view {\n	display: flex;\n	height: 100%;\n	min-height: 0;\n}\n.popout-view teams-content-preview {\n	flex: 1;\n}\n.main office-ui-chat-list,\n.main office-ui-prejoin {\n	flex: 1;\n}\n\nul.plain {\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\nul.plain li {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2) var(--office-space-2);\n}\nul.plain li > :first-child:not(office-ui-avatar) {\n	flex: 1;\n}\n.hint {\n	padding: 0 var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n}\n.join {\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.join.live {\n	border-color: transparent;\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n\n/* ---- conversation ----------------------------------------------------------------------- */\n.channel-head {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-5);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.channel-head > button:not(.meet),\n.thread-head button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.channel-head > button:hover:not(:disabled),\n.thread-head button:hover {\n	background: var(--office-selected);\n}\n.channel-head > button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.channel-head h1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	white-space: nowrap;\n}\n.hash {\n	color: var(--office-teams-text-subtle);\n}\n.tabs {\n	display: flex;\n	gap: var(--office-space-1);\n}\n.tabs button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-bottom: var(--office-border-width-thick) solid transparent;\n	background: transparent;\n}\n.tabs button[aria-selected='true'] {\n	border-bottom-color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.topic {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.people {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.more {\n	margin-inline-start: var(--office-space-1);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.meet {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.meet:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.meet:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.callbar {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-2) var(--office-space-5);\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n.callbar button {\n	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid currentColor;\n	border-radius: var(--office-radius);\n	background: transparent;\n}\n\n/* ---- files ------------------------------------------------------------------------------ */\n/* ---- meeting ---------------------------------------------------------------------------- */\n.meeting {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n	background: var(--office-call-background);\n}\n.stage {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) auto;\n	min-height: 0;\n}\n.panel {\n	display: flex;\n	flex-direction: column;\n	width: 22em;\n	min-height: 0;\n	background: var(--office-background);\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.panel office-ui-chat-list {\n	flex: 1;\n	padding-inline: var(--office-space-3);\n}\n.panel office-ui-chat-composer {\n	padding-inline: var(--office-space-3);\n}\n.people-panel h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n\n/* ---- welcome and toast ------------------------------------------------------------------ */\n.welcome {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	background: var(--office-teams-panel);\n}\n.welcome form {\n	display: grid;\n	justify-items: center;\n	gap: var(--office-space-3);\n	width: min(24em, 90%);\n	padding: var(--office-space-6);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow-teams);\n}\n.welcome h1 {\n	margin: 0;\n	font-size: var(--office-font-size-xl);\n}\n.welcome p {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n}\n.welcome input {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\n.welcome button {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.toast {\n	position: fixed;\n	inset-block-end: var(--office-space-4);\n	inset-inline-start: 50%;\n	z-index: 10;\n	transform: translateX(-50%);\n	padding: var(--office-space-2) var(--office-space-4);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n\n.conversation-grid {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr);\n	flex: 1;\n	min-height: 0;\n}\n.conversation-grid[data-thread='true'] {\n	grid-template-columns: minmax(0, 1fr) minmax(18em, 0.8fr);\n}\n.conversation-main,\n.thread-pane {\n	display: flex;\n	flex-direction: column;\n	min-height: 0;\n	min-width: 0;\n}\n.tab-conversation teams-channel-tab {\n	flex: 1;\n	min-height: 0;\n}\n.thread-pane {\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.thread-head {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n}\n.thread-head h2 {\n	margin: 0;\n	font-size: 1em;\n}\n.followed-threads {\n	overflow: auto;\n	padding: var(--office-space-4);\n}\n.message-transfer {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.message-transfer span {\n	flex: 1;\n	overflow-wrap: anywhere;\n}\n.message-transfer button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads ul {\n	list-style: none;\n	padding: 0;\n}\n.followed-threads fieldset {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-4);\n	padding: var(--office-space-3);\n	margin-block: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.followed-threads li {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.followed-threads button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads button:hover {\n	background: var(--office-selected);\n}\n.followed-threads li button:first-child {\n	display: grid;\n	gap: var(--office-space-2);\n	flex: 1;\n	text-align: start;\n	min-width: 0;\n	overflow-wrap: anywhere;\n	border-color: transparent;\n}\n.followed-threads li[data-unread='true'] button:first-child span {\n	font-weight: var(--office-font-weight-bold);\n}\n@media (max-width: 56em) {\n	.conversation-grid[data-thread='true'] {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.conversation-grid[data-thread='true'] .conversation-main {\n		display: none;\n	}\n}\n.tabs {\n	overflow-x: auto;\n	min-width: 0;\n	flex: 1 1 16em;\n}\n\n.channel-head > .back {\n	display: none;\n}\n\n/* ---- compact shell ---------------------------------------------------------------------- */\n/* Below 56em the app rail is a bottom bar, the channel list is its own full-screen view and the\n   conversation (or any other content) fills the width with a back button to the list. */\n@media (max-width: 56em) {\n	.brand {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: minmax(0, 1fr) auto;\n		gap: var(--office-space-2);\n	}\n	.search {\n		width: 100%;\n	}\n	.channel-head {\n		gap: var(--office-space-2);\n		padding-inline: var(--office-space-3);\n	}\n	.channel-head > .back {\n		display: inline-flex;\n		border-color: transparent;\n	}\n	.channel-head .topic,\n	.channel-head .people {\n		display: none;\n	}\n	.channel-head .tabs {\n		flex-basis: 100%;\n		order: 1;\n	}\n	.body {\n		grid-template-columns: minmax(0, 1fr);\n		grid-template-rows: minmax(0, 1fr) auto;\n	}\n	.body > office-ui-app-rail {\n		grid-column: 1;\n		grid-row: 2;\n	}\n	.body > .side,\n	.body > .main,\n	.body > teams-settings {\n		grid-column: 1;\n		grid-row: 1;\n	}\n	.side {\n		border-inline-end: 0;\n	}\n	.shell[data-mobile-view='list'] .main,\n	.shell[data-mobile-view='content'] .side {\n		display: none;\n	}\n}\n/* Phone landscape has little height: keep the chrome to one thin row each. */\n@media (max-width: 56em) and (max-height: 30em) {\n	.topbar {\n		padding-block: var(--office-space-1);\n	}\n	.channel-head {\n		flex-wrap: nowrap;\n		padding-block: var(--office-space-1);\n	}\n	.channel-head .tabs {\n		flex: 1 1 0;\n		order: 0;\n	}\n	.channel-head h1 {\n		font-size: var(--office-font-size);\n	}\n}\n/* Touch: every control in the shell reaches the minimum hit target. */\n@media (pointer: coarse) {\n	.channel-head > button,\n	.meet,\n	.tabs button,\n	.join,\n	.thread-head button,\n	.callbar button {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n\n/* An application host can own the single suite-level account control. */\n:host([host-profile]) teams-profile-menu {\n	display: none;\n}\n\n/* ---- activity ---------------------------------------------------------------------------- */\n.side > office-ui-activity-feed {\n	height: 100%;\n}\n/* Toasts for new activity stack at the top right, under the header, so they never cover the\n   compose box; on phones they are full-width banners below the header. */\n.activity-toasts {\n	position: fixed;\n	inset-block-start: 8em;\n	inset-inline-end: var(--office-space-4);\n	z-index: 10;\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-2);\n	width: min(28em, calc(100% - var(--office-space-5)));\n	pointer-events: none;\n}\n.activity-toast {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-2) var(--office-space-3) var(--office-space-2) var(--office-space-4);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n	box-shadow: var(--office-shadow-teams);\n	pointer-events: auto;\n}\n@media (max-width: 40em) {\n	.activity-toasts {\n		inset-block-start: 4.6em;\n		inset-inline: var(--office-space-2);\n		width: auto;\n	}\n}\n.activity-toast .toast-text {\n	display: flex;\n	flex: 1;\n	flex-direction: column;\n	min-width: 0;\n}\n.activity-toast .toast-text > * {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.activity-toast .toast-preview {\n	opacity: 0.8;\n	font-size: var(--office-font-size-sm);\n}\n.activity-toast button {\n	flex: none;\n	padding: var(--office-space-1) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font-weight: var(--office-font-weight-bold);\n}\n.activity-toast button:hover {\n	background: var(--office-selected);\n}\n.activity-toast button svg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n@media (pointer: coarse) {\n	.activity-toast button {\n		min-width: var(--office-touch-target, 44px);\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n\n/* ---- chat and calendar ------------------------------------------------------------------ */\n.calendar-back svg,\n.show-calendar svg,\n.group-mark svg,\n.chat-head .chat-people svg {\n	width: 1.25em;\n	height: 1.25em;\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.chat-head office-ui-avatar {\n	flex: none;\n}\n.group-mark {\n	display: grid;\n	flex: none;\n	place-items: center;\n	width: 2.3em;\n	height: 2.3em;\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-bubble);\n	color: var(--office-teams-brand);\n}\n.chat-head .chat-people {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-2);\n}\n.empty-main {\n	display: grid;\n	flex: 1;\n	place-content: center;\n	justify-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-6);\n	color: var(--office-teams-text-subtle);\n	text-align: center;\n}\n.empty-main button {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font: inherit;\n}\n.main > office-ui-calendar-view {\n	flex: 1;\n	min-height: 0;\n}\n.calendar-back {\n	display: none;\n}\n@media (max-width: 56em) {\n	.calendar-back {\n		display: flex;\n		align-items: center;\n		gap: var(--office-space-2);\n		padding: var(--office-space-2) var(--office-space-3);\n		border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	}\n	.calendar-back button {\n		display: inline-flex;\n		align-items: center;\n		gap: var(--office-space-2);\n		min-height: var(--office-touch-target, 44px);\n		padding: var(--office-space-2) var(--office-space-3);\n		border: 0;\n		border-radius: var(--office-radius-md);\n		background: transparent;\n	}\n	.chat-head .chat-people {\n		min-width: var(--office-touch-target, 44px);\n	}\n}\n.show-calendar {\n	display: none;\n}\n@media (max-width: 56em) {\n	.show-calendar {\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		gap: var(--office-space-2);\n		width: calc(100% - 2 * var(--office-space-4));\n		min-height: var(--office-touch-target, 44px);\n		margin: var(--office-space-3) var(--office-space-4);\n		border: var(--office-border-width) solid var(--office-teams-divider);\n		border-radius: var(--office-radius-md);\n		background: var(--office-background);\n	}\n}\n";
-function threadPane(state, client, openFile, close, highlightId = "") {
+function threadPane(state, client, openFile, close, highlightId = "", i18n = teamsI18n()) {
   const thread = state.thread;
   if (!thread) return nothing;
-  return html`<aside class="thread-pane" aria-label="Thread">
+  const { t } = i18n;
+  return html`<aside class="thread-pane" aria-label=${t("thread.title")}>
 		<header class="thread-head">
-			<h2 tabindex="-1" data-thread-heading>Thread</h2>
+			<h2 tabindex="-1" data-thread-heading>${t("thread.title")}</h2>
 			<button
 				type="button"
 				@click=${() => client.followThread(state.selectedChannelId, thread.root.id, !state.threadFollowed)}
 			>
-				${state.threadFollowed ? "Unfollow thread" : "Follow thread"}
+				${t(state.threadFollowed ? "thread.unfollow" : "thread.follow")}
 			</button>
-			<button type="button" @click=${close}>Close thread</button>
+			<button type="button" @click=${close}>${t("thread.close")}</button>
 		</header>
 		<office-ui-chat-list
 			.messages=${[thread.root, ...thread.replies]}
@@ -3397,7 +3594,7 @@ function threadPane(state, client, openFile, close, highlightId = "") {
 			@office-chat-react=${(e) => client.toggleReaction(e.detail.messageId, e.detail.emoji)}
 			@office-chat-reply=${(e) => client.startReply(e.detail.messageId)}
 			@office-chat-edit=${(e) => client.startEdit(e.detail.messageId)}
-			@office-chat-delete=${(e) => globalThis.confirm?.("Delete this message?") !== false && client.deleteMessage(e.detail.messageId)}
+			@office-chat-delete=${(e) => globalThis.confirm?.(t("chat.confirmDelete")) !== false && client.deleteMessage(e.detail.messageId)}
 			@office-chat-open-file=${(e) => openFile(e.detail.attachment)}
 		></office-ui-chat-list>
 		<office-ui-chat-composer
@@ -3409,7 +3606,7 @@ function threadPane(state, client, openFile, close, highlightId = "") {
 			.missingFiles=${state.draft.missingFiles}
 			.mentionTargets=${state.mentionTargets}
 			@office-chat-draft=${(e) => client.setDraft(e.detail)}
-			placeholder="Reply in thread"
+			placeholder=${t("thread.replyPlaceholder")}
 			@office-chat-typing=${() => client.notifyTyping()}
 			@office-chat-cancel=${() => client.cancelCompose()}
 			@office-chat-send=${(e) => {
@@ -3420,23 +3617,21 @@ function threadPane(state, client, openFile, close, highlightId = "") {
 		></office-ui-chat-composer>
 	</aside>`;
 }
-function followedThreads(state, client, open, unreadOnly, filter) {
+function followedThreads(state, client, open, unreadOnly, filter, i18n = teamsI18n()) {
+  const { t, tn } = i18n;
   const threads = state.followedThreads.filter((thread) => !unreadOnly || thread.unread > 0);
-  return html`<section class="followed-threads" aria-label="Followed threads">
-		<h1>Followed threads</h1>
-		<p>
-			Threads you follow on this device. Their replies appear in Activity and notify you according
-			to your notification settings.
-		</p>
+  return html`<section class="followed-threads" aria-label=${t("followed.title")}>
+		<h1>${t("followed.title")}</h1>
+		<p>${t("followed.intro")}</p>
 		<fieldset>
-			<legend>Automatically follow</legend>
+			<legend>${t("followed.autoFollow")}</legend>
 			<label
 				><input
 					type="checkbox"
 					.checked=${state.threadFollowSettings.started}
 					@change=${(event) => client.setThreadFollowSettings({ started: event.target.checked })}
 				/>
-				Threads I start</label
+				${t("followed.started")}</label
 			>
 			<label
 				><input
@@ -3444,7 +3639,7 @@ function followedThreads(state, client, open, unreadOnly, filter) {
 					.checked=${state.threadFollowSettings.replied}
 					@change=${(event) => client.setThreadFollowSettings({ replied: event.target.checked })}
 				/>
-				Threads I reply to</label
+				${t("followed.replied")}</label
 			>
 		</fieldset>
 		<label
@@ -3453,7 +3648,7 @@ function followedThreads(state, client, open, unreadOnly, filter) {
 				.checked=${unreadOnly}
 				@change=${(event) => filter(event.target.checked)}
 			/>
-			Unread only</label
+			${t("followed.unreadOnly")}</label
 		>
 		<ul>
 			${threads.length ? threads.map(
@@ -3461,64 +3656,72 @@ function followedThreads(state, client, open, unreadOnly, filter) {
 									<button
 										type="button"
 										@click=${() => open(thread)}
-										aria-label=${`Open thread in ${thread.channelName}: ${thread.root.deleted ? "Deleted message" : thread.root.text}`}
+										aria-label=${t("followed.open", {
+      channel: thread.channelName,
+      text: thread.root.deleted ? t("followed.deletedMessage") : thread.root.text
+    })}
 									>
 										<strong># ${thread.channelName}</strong
 										><span
-											>${thread.root.deleted ? "This message was deleted" : thread.root.text || "Shared file"}</span
+											>${thread.root.deleted ? t("chat.deleted") : thread.root.text || t("followed.sharedFile")}</span
 										>
 										<small
-											>${thread.replyCount} ${thread.replyCount === 1 ? "reply" : "replies"} ·
-											${new Date(thread.updatedAt).toLocaleString()}</small
+											>${tn("chat.replies", thread.replyCount)} ·
+											${new Date(thread.updatedAt).toLocaleString(i18n.intl)}</small
 										></button
-									><span>${thread.unread > 0 ? `${thread.unread} unread` : "Read"}</span
+									><span
+										>${thread.unread > 0 ? t("followed.unreadCount", { count: thread.unread }) : t("followed.read")}</span
 									><button
 										type="button"
 										@click=${() => client.markThreadRead(thread.channelId, thread.root.id, thread.unread > 0)}
 									>
-										${thread.unread > 0 ? "Mark as read" : "Mark as unread"}</button
+										${t(thread.unread > 0 ? "activity.markRead" : "activity.markUnread")}</button
 									><button
 										type="button"
 										@click=${() => client.followThread(thread.channelId, thread.root.id, false)}
 									>
-										Unfollow thread
+										${t("thread.unfollow")}
 									</button>
 								</li>`
-  ) : html`<li>
-							${unreadOnly ? "No unread followed threads." : "No followed threads yet. Open a thread and choose Follow thread."}
-						</li>`}
+  ) : html`<li>${t(unreadOnly ? "followed.noneUnread" : "followed.none")}</li>`}
 		</ul>
 	</section>`;
 }
-function draftList(state, client, open) {
-  return html`<section class="followed-threads" aria-label="Drafts">
-		<h1>Drafts</h1>
-		<p>Unsent messages on this device. After reloading, draft attachments must be reattached.</p>
+function draftList(state, client, open, i18n = teamsI18n()) {
+  const { t, tn } = i18n;
+  return html`<section class="followed-threads" aria-label=${t("drafts.title")}>
+		<h1>${t("drafts.title")}</h1>
+		<p>${t("drafts.intro")}</p>
 		<ul>
 			${state.drafts.length ? state.drafts.map((draft) => {
     const channel = state.channels.find((item) => item.id === draft.context.channelId);
+    const body = draft.text || t("drafts.attachments");
     return html`<li>
 								<button
 									type="button"
-									aria-label=${`Resume draft in ${channel.name}: ${draft.text.slice(0, 80) || "Attachments"}`}
+									aria-label=${t("drafts.resume", {
+      channel: channel.name,
+      text: draft.text.slice(0, 80) || t("drafts.attachments")
+    })}
 									@click=${() => open(draft.context)}
 								>
-									<strong># ${channel.name}</strong><span>${draft.text || "Attachments"}</span
+									<strong># ${channel.name}</strong><span>${body}</span
 									><small
-										>${draft.context.editId ? "Edit" : draft.context.threadId ? "Thread reply" : "New post"}
-										· ${draft.files.length + draft.missingFiles.length} attachments</small
+										>${draft.context.editId ? t("drafts.edit") : draft.context.threadId ? t("drafts.threadReply") : t("drafts.newPost")}
+										·
+										${tn("drafts.attachmentCount", draft.files.length + draft.missingFiles.length)}</small
 									></button
 								><button
 									type="button"
 									@click=${() => {
-      if (globalThis.confirm?.("Discard this unsent draft?") !== false)
+      if (globalThis.confirm?.(t("drafts.confirmDiscard")) !== false)
         client.discardDraft(draft.context);
     }}
 								>
-									Discard draft
+									${t("drafts.discard")}
 								</button>
 							</li>`;
-  }) : html`<li>No unsent drafts.</li>`}
+  }) : html`<li>${t("drafts.none")}</li>`}
 		</ul>
 	</section>`;
 }
@@ -3545,43 +3748,76 @@ function filePopoutDetail(pageUrl) {
     return null;
   }
 }
-function messageTransfers(state, client) {
+function messageTransfers(state, client, i18n = teamsI18n()) {
+  const { t } = i18n;
   return state.messageTransfers.filter((transfer) => transfer.context.channelId === state.selectedChannelId).map(
     (transfer) => html`<div class="message-transfer" role="status">
 					<span
-						>${`${transfer.context.threadId || transfer.context.replyTo ? "Sending thread reply" : "Sending channel post"}: ${transfer.progress.fileName}. ${transfer.progress.completed} of ${transfer.progress.total} files uploaded`}</span
+						>${t("transfer.status", {
+      kind: t(
+        transfer.context.threadId || transfer.context.replyTo ? "transfer.threadReply" : "transfer.channelPost"
+      ),
+      file: transfer.progress.fileName,
+      completed: transfer.progress.completed,
+      total: transfer.progress.total
+    })}</span
 					><progress
-						aria-label="Message file progress"
+						aria-label=${t("transfer.progress")}
 						max=${transfer.progress.total}
 						value=${transfer.progress.completed}
 					></progress
 					><button type="button" @click=${() => client.cancelSend(transfer.id)}>
-						Cancel message send
+						${t("transfer.cancel")}
 					</button>
 				</div>`
   );
 }
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/profile-menu.css?raw
-var profile_menu_default = ":host {\n	display: inline-flex;\n	font: inherit;\n	color: inherit;\n}\n.profile {\n	display: inline-flex;\n	align-items: center;\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-full);\n	background: transparent;\n	cursor: pointer;\n}\n.profile:hover {\n	background: var(--office-selected);\n}\n[popover] {\n	min-width: 20em;\n	max-width: 90vw;\n	max-height: min(80vh, 40em);\n	overflow: auto;\n	padding: var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-foreground);\n	box-shadow: var(--office-shadow-teams);\n}\n.identity {\n	display: flex;\n	gap: var(--office-space-3);\n	align-items: center;\n	margin-bottom: var(--office-space-4);\n}\n.identity strong {\n	overflow-wrap: anywhere;\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-3);\n}\n.who {\n	display: grid;\n	min-width: 0;\n}\n.status-line,\n.message,\n.hint {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	overflow-wrap: anywhere;\n}\n.hint:empty {\n	display: none;\n}\n.actions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-3);\n}\n.actions button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.actions button:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n.actions button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n@media (pointer: coarse) {\n	.actions button,\n	select,\n	input {\n		min-height: var(--office-touch-target, 44px);\n	}\n}\ninput,\nselect {\n	font: inherit;\n	padding: var(--office-space-2);\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n}\nselect:disabled {\n	opacity: 0.6;\n}\n.connection {\n	color: var(--office-teams-text-subtle);\n	margin-bottom: 0;\n	font-size: var(--office-font-size-sm);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
+var profile_menu_default = ":host {\n	display: inline-flex;\n	font: inherit;\n	color: inherit;\n}\n.profile {\n	display: inline-flex;\n	align-items: center;\n	padding: var(--office-space-1);\n	border: 0;\n	border-radius: var(--office-radius-full);\n	background: transparent;\n	cursor: pointer;\n}\n.profile:hover {\n	background: var(--office-selected);\n}\n[popover] {\n	min-width: 20em;\n	max-width: 90vw;\n	max-height: min(80vh, 40em);\n	overflow: auto;\n	padding: var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	color: var(--office-foreground);\n	box-shadow: var(--office-shadow-teams);\n}\n.identity {\n	display: flex;\n	gap: var(--office-space-3);\n	align-items: center;\n	margin-bottom: var(--office-space-4);\n}\n.identity strong {\n	overflow-wrap: anywhere;\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-3);\n}\n.who {\n	display: grid;\n	min-width: 0;\n}\n.status-line,\n.message,\n.hint {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	overflow-wrap: anywhere;\n}\n.hint:empty {\n	display: none;\n}\n.actions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-3);\n}\n.actions button,\n.account button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.actions button:hover:not(:disabled),\n.account button:hover {\n	background: var(--office-selected);\n}\n.actions button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n@media (pointer: coarse) {\n	.actions button,\n	.account button,\n	select,\n	input {\n		min-height: var(--office-touch-target, 44px);\n	}\n}\n.account {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-3);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	overflow-wrap: anywhere;\n}\ninput,\nselect {\n	font: inherit;\n	padding: var(--office-space-2);\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n}\nselect:disabled {\n	opacity: 0.6;\n}\n.connection {\n	color: var(--office-teams-text-subtle);\n	margin-bottom: 0;\n	font-size: var(--office-font-size-sm);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
 
 // src/teams/app/profile-menu.ts
-var idleLabel = (minutes) => minutes === 0 ? "Never" : `${minutes} minutes`;
-var untilLabel = (at) => {
+var STATUS_KEY = {
+  available: "status.available",
+  busy: "status.busy",
+  dnd: "status.dnd",
+  brb: "status.brb",
+  away: "status.away",
+  offline: "status.offline"
+};
+var CONNECTION_KEY = {
+  connecting: "connection.connecting",
+  connected: "connection.connected",
+  disconnected: "connection.disconnected",
+  error: "connection.error"
+};
+var DURATION_KEY = {
+  never: "duration.never",
+  "30m": "duration.30m",
+  "1h": "duration.1h",
+  "2h": "duration.2h",
+  today: "duration.today",
+  week: "duration.week"
+};
+function untilLabel(at, i18n = teamsI18n()) {
   if (at === null) return "";
+  const { t, intl } = i18n;
   const d = new Date(at);
   const today = (/* @__PURE__ */ new Date()).toDateString();
   if (d.getHours() === 0 && d.getMinutes() === 0) {
     const lastDay = new Date(at - 1);
-    return lastDay.toDateString() === today ? "Until end of today" : `Until end of ${lastDay.toLocaleDateString([], { weekday: "long" })}`;
+    return lastDay.toDateString() === today ? t("profile.untilEndToday") : t("profile.untilEndDay", {
+      day: lastDay.toLocaleDateString(intl, { weekday: "long" })
+    });
   }
-  const time = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
-  return d.toDateString() === today ? `Until ${time}` : `Until ${d.toLocaleDateString([], { weekday: "long" })} ${time}`;
-};
-var TeamsProfileMenu = class extends LitElement {
+  const time = d.toLocaleTimeString(intl, { hour: "numeric", minute: "2-digit" });
+  return d.toDateString() === today ? t("profile.until", { time }) : t("profile.untilDayTime", { day: d.toLocaleDateString(intl, { weekday: "long" }), time });
+}
+var TeamsProfileMenu = class extends TeamsLitElement {
   static styles = unsafeCSS(profile_menu_default);
   static properties = {
     state: { attribute: false },
+    account: { type: String },
     open: { state: true },
     draft: { state: true },
     resetAfter: { state: true },
@@ -3590,6 +3826,7 @@ var TeamsProfileMenu = class extends LitElement {
   constructor() {
     super();
     this.state = null;
+    this.account = "";
     this.open = false;
     this.draft = null;
     this.resetAfter = "never";
@@ -3618,10 +3855,13 @@ var TeamsProfileMenu = class extends LitElement {
   durationOptions(selected) {
     return STATUS_DURATIONS.map(
       (value) => html`<option value=${value} ?selected=${selected === value}>
-					${STATUS_DURATION_LABELS[value]}
+					${this.t(DURATION_KEY[value])}
 				</option>`
     );
   }
+  idleLabel(minutes) {
+    return minutes === 0 ? this.t("duration.never") : this.tn("profile.idleMinutes", minutes);
+  }
   render() {
     const state = this.state;
     if (!state) return nothing;
@@ -3629,7 +3869,7 @@ var TeamsProfileMenu = class extends LitElement {
     return html`<button
 				type="button"
 				class="profile"
-				aria-label=${`Profile for ${state.user.name}`}
+				aria-label=${this.t("profile.for", { name: state.user.name })}
 				aria-expanded=${String(this.open)}
 				aria-haspopup="dialog"
 				aria-controls="profile"
@@ -3645,7 +3885,7 @@ var TeamsProfileMenu = class extends LitElement {
 				id="profile"
 				popover="auto"
 				role="dialog"
-				aria-label="Your profile"
+				aria-label=${this.t("profile.yours")}
 				@keydown=${(event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -3669,13 +3909,13 @@ var TeamsProfileMenu = class extends LitElement {
 					<div class="who">
 						<strong>${state.user.name}</strong>
 						<span class="status-line"
-							>${PRESENCE_LABELS[state.availability]}${state.presence.idle && state.presence.status === "available" ? " (idle)" : ""}</span
+							>${this.t(STATUS_KEY[state.availability])}${state.presence.idle && state.presence.status === "available" ? ` ${this.t("profile.idle")}` : ""}</span
 						>
 						${presence.message ? html`<span class="message">${presence.message}</span>` : nothing}
 					</div>
 				</div>
 				<label
-					>Availability<select
+					>${this.t("profile.availability")}<select
 						.value=${presence.status}
 						@change=${(event) => {
       const availability = event.target.value;
@@ -3683,11 +3923,11 @@ var TeamsProfileMenu = class extends LitElement {
       this.fire("teams-profile-status", { availability, duration: this.resetAfter });
     }}
 					>
-						${PRESENCE_STATUSES.map((value) => html`<option value=${value} ?selected=${presence.status === value}>${PRESENCE_LABELS[value]}</option>`)}
+						${PRESENCE_STATUSES.map((value) => html`<option value=${value} ?selected=${presence.status === value}>${this.t(STATUS_KEY[value])}</option>`)}
 					</select></label
 				>
 				<label
-					>Reset status after<select
+					>${this.t("profile.resetAfter")}<select
 						name="status-duration"
 						@change=${(event) => {
       const duration = event.target.value;
@@ -3698,14 +3938,14 @@ var TeamsProfileMenu = class extends LitElement {
 					>
 						${this.durationOptions(this.resetAfter)}
 					</select>
-					<span class="hint">${untilLabel(presence.statusExpiresAt)}</span></label
+					<span class="hint">${untilLabel(presence.statusExpiresAt, this.i18n)}</span></label
 				>
 				<label
-					>Status message<input
+					>${this.t("profile.statusMessage")}<input
 						type="text"
 						name="message"
 						maxlength=${MAX_STATUS_MESSAGE_CHARS}
-						placeholder="What's your status message?"
+						placeholder=${this.t("profile.messagePlaceholder")}
 						.value=${this.draft ?? presence.message}
 						@input=${(event) => this.draft = event.target.value}
 						@keydown=${(event) => {
@@ -3714,10 +3954,10 @@ var TeamsProfileMenu = class extends LitElement {
       this.saveMessage();
     }}
 					/>
-					<span class="hint">${untilLabel(presence.messageExpiresAt)}</span></label
+					<span class="hint">${untilLabel(presence.messageExpiresAt, this.i18n)}</span></label
 				>
 				<label
-					>Clear status message after<select
+					>${this.t("profile.clearAfter")}<select
 						name="message-duration"
 						@change=${(event) => {
       const duration = event.target.value;
@@ -3728,7 +3968,7 @@ var TeamsProfileMenu = class extends LitElement {
 					</select></label
 				>
 				<div class="actions">
-					<button type="button" @click=${this.saveMessage}>Save message</button>
+					<button type="button" @click=${this.saveMessage}>${this.t("profile.saveMessage")}</button>
 					<button
 						type="button"
 						?disabled=${!presence.message && !this.draft}
@@ -3737,11 +3977,11 @@ var TeamsProfileMenu = class extends LitElement {
       this.saveMessage();
     }}
 					>
-						Clear message
+						${this.t("profile.clearMessage")}
 					</button>
 				</div>
 				<label
-					>Show me as away after<select
+					>${this.t("profile.awayAfter")}<select
 						name="idle"
 						@change=${(event) => {
       const minutes = Number(event.target.value);
@@ -3749,11 +3989,22 @@ var TeamsProfileMenu = class extends LitElement {
         this.fire("teams-profile-idle", { minutes });
     }}
 					>
-						${IDLE_MINUTE_CHOICES.map((minutes) => html`<option value=${minutes} ?selected=${presence.idleMinutes === minutes}>${idleLabel(minutes)}</option>`)}
+						${IDLE_MINUTE_CHOICES.map((minutes) => html`<option value=${minutes} ?selected=${presence.idleMinutes === minutes}>${this.idleLabel(minutes)}</option>`)}
 					</select></label
 				>
+				${this.account ? html`<div class="account">
+								<span>${this.t("signIn.signedInAs", { id: this.account })}</span>
+								<button
+									type="button"
+									name="sign-out"
+									@click=${() => this.fire("teams-sign-out", {})}
+								>
+									${this.t("signIn.signOut")}
+								</button>
+							</div>` : nothing}
 				<p class="connection">
-					${state.mode === "local" ? "Local workspace" : "Workspace server"}: ${state.status}
+					${this.t(state.mode === "local" ? "profile.localWorkspace" : "profile.workspaceServer")}:
+					${this.t(CONNECTION_KEY[state.status])}
 				</p>
 			</div>`;
   }
@@ -3763,17 +4014,302 @@ function defineTeamsProfileMenu() {
     customElements.define("teams-profile-menu", TeamsProfileMenu);
 }
 
+// src/teams/app/sign-in-strings.ts
+function signInErrorText(reason, retryAfterSec, i18n = teamsI18n()) {
+  switch (reason) {
+    case "credentials":
+      return i18n.t("signIn.error.credentials");
+    case "rate-limited":
+      return retryAfterSec ? i18n.t("signIn.error.rateLimited", { seconds: retryAfterSec }) : i18n.t("signIn.error.rateLimitedMinute");
+    case "network":
+      return i18n.t("signIn.error.network");
+    default:
+      return i18n.t("signIn.error.server");
+  }
+}
+
+// src/teams/app/sign-in-flow.ts
+var PROBE_AFTER_MS = 4e3;
+var PROBE_AGAIN_MS = 15e3;
+var MAX_TIMER_MS = 2 ** 31 - 1;
+var SignInFlow = class {
+  constructor(host) {
+    this.host = host;
+  }
+  host;
+  phase = "open";
+  session = null;
+  /** Kept across a re-prompt so the person only retypes the password. */
+  userId = "";
+  notice = "";
+  error = "";
+  busy = false;
+  retryAfterSec = 0;
+  accounts = /* @__PURE__ */ new Map();
+  probing = "";
+  expiryTimer;
+  checkTimer;
+  checking = false;
+  generation = 0;
+  i18n() {
+    return this.host.i18n?.() ?? teamsI18n();
+  }
+  key(config) {
+    return `${serverOrigin(config) ?? ""}|${config.token ?? ""}`;
+  }
+  /**
+   * Whether the client must wait: true while the server is being asked and while the sign-in
+   * screen is showing. Call it from every (re)start with the settings-derived config.
+   */
+  gate(config) {
+    if (config.mode !== "server" || config.sessionToken || !serverOrigin(config)) {
+      this.phase = "open";
+      return false;
+    }
+    if (this.session) {
+      this.phase = "open";
+      return false;
+    }
+    const key = this.key(config);
+    const known = this.accounts.get(key);
+    if (known === false) {
+      this.phase = "open";
+      return false;
+    }
+    if (known === true) {
+      this.phase = "required";
+      return true;
+    }
+    this.phase = "checking";
+    if (this.probing !== key) {
+      this.probing = key;
+      const generation = this.generation;
+      void probeTeamsAccounts(config).then((accounts) => {
+        if (generation !== this.generation || this.probing !== key) return;
+        this.probing = "";
+        if (accounts !== null) this.accounts.set(key, accounts);
+        this.phase = accounts ? "required" : "open";
+        this.host.changed();
+      });
+    }
+    return true;
+  }
+  /** The config to start the client with: the session, when there is one, rides along. */
+  apply(config) {
+    return this.session && !config.sessionToken ? { ...config, sessionToken: this.session.token } : config;
+  }
+  async submit(config, userId, credential) {
+    if (this.busy) return;
+    const id = userId.trim();
+    this.userId = id;
+    this.error = "";
+    this.retryAfterSec = 0;
+    this.busy = true;
+    this.host.changed();
+    try {
+      const session = await requestTeamsSession(config, { userId: id, credential });
+      this.session = session;
+      this.userId = session.userId;
+      this.notice = "";
+      this.phase = "open";
+      this.armExpiry(session);
+      this.host.emit("teams-signed-in", { userId: session.userId, expiresAt: session.expiresAt });
+    } catch (error) {
+      const failure = error instanceof TeamsSignInError ? error : null;
+      this.error = signInErrorText(
+        failure?.reason ?? "server",
+        failure?.retryAfterSec,
+        this.i18n()
+      );
+      this.retryAfterSec = failure?.retryAfterSec ?? 0;
+    } finally {
+      this.busy = false;
+      this.host.changed();
+    }
+  }
+  /** The session no longer works: back to the sign-in screen, keeping the user id. */
+  expire(message) {
+    if (!this.session) return;
+    this.drop();
+    this.notice = message;
+    this.host.emit("teams-session-ended", { userId: this.userId });
+    this.host.changed();
+  }
+  async signOut(config) {
+    const session = this.session;
+    if (!session) return;
+    this.drop();
+    this.userId = "";
+    this.notice = this.i18n().t("signIn.signedOut");
+    this.host.emit("teams-signed-out", { userId: session.userId });
+    this.host.changed();
+    await signOutTeamsSession(config, session.token);
+  }
+  /** Feed the connection status after every render; a session that stays unusable is checked. */
+  watchConnection(connected, config) {
+    if (!this.session) return;
+    if (connected) {
+      clearTimeout(this.checkTimer);
+      this.checkTimer = void 0;
+      return;
+    }
+    if (this.checkTimer !== void 0 || this.checking) return;
+    this.scheduleCheck(config, PROBE_AFTER_MS);
+  }
+  scheduleCheck(config, delay) {
+    const session = this.session;
+    if (!session) return;
+    this.checkTimer = setTimeout(() => {
+      this.checkTimer = void 0;
+      this.checking = true;
+      void checkTeamsSession(config, session.token).then((result) => {
+        this.checking = false;
+        if (this.session !== session) return;
+        if (result === "rejected") this.expire(this.i18n().t("signIn.ended"));
+        else this.scheduleCheck(config, PROBE_AGAIN_MS);
+      });
+    }, delay);
+  }
+  armExpiry(session) {
+    clearTimeout(this.expiryTimer);
+    const wait = Math.min(Math.max(session.expiresAt - Date.now(), 0), MAX_TIMER_MS);
+    this.expiryTimer = setTimeout(() => {
+      if (this.session === session) this.expire(this.i18n().t("signIn.expired"));
+    }, wait);
+  }
+  drop() {
+    this.session = null;
+    this.error = "";
+    this.retryAfterSec = 0;
+    clearTimeout(this.expiryTimer);
+    clearTimeout(this.checkTimer);
+    this.checkTimer = void 0;
+    this.phase = "required";
+  }
+  /** Forget everything (the element is leaving the page). */
+  dispose() {
+    this.generation++;
+    this.probing = "";
+    clearTimeout(this.expiryTimer);
+    clearTimeout(this.checkTimer);
+    this.checkTimer = void 0;
+  }
+};
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/teams-sign-in.css?raw
+var teams_sign_in_default = ":host {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	background: var(--office-teams-panel);\n	color: var(--office-foreground);\n	font: inherit;\n}\n.card {\n	display: grid;\n	justify-items: center;\n	gap: var(--office-space-3);\n	width: min(24em, 90%);\n	padding: var(--office-space-6);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow-teams);\n}\n.logo {\n	display: inline-grid;\n	place-items: center;\n	width: 2.4em;\n	height: 2.4em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\nh1 {\n	margin: 0;\n	font-size: var(--office-font-size-xl);\n}\np {\n	margin: 0;\n	text-align: center;\n	overflow-wrap: anywhere;\n}\n.muted {\n	color: var(--office-teams-text-subtle);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n	width: 100%;\n}\ninput {\n	width: 100%;\n	box-sizing: border-box;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\ninput:focus-visible,\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.error {\n	color: var(--office-danger);\n}\nbutton {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font: inherit;\n	font-weight: var(--office-font-weight-bold);\n	cursor: pointer;\n}\nbutton:disabled {\n	opacity: 0.6;\n	cursor: not-allowed;\n}\n";
+
+// src/teams/app/teams-sign-in.ts
+var TeamsSignIn = class extends TeamsLitElement {
+  static styles = unsafeCSS(teams_sign_in_default);
+  static properties = {
+    userId: { type: String },
+    notice: { type: String },
+    error: { type: String },
+    retryAfter: { type: Number },
+    busy: { type: Boolean },
+    checking: { type: Boolean },
+    wait: { state: true }
+  };
+  timer;
+  constructor() {
+    super();
+    this.userId = "";
+    this.notice = "";
+    this.error = "";
+    this.retryAfter = 0;
+    this.busy = false;
+    this.checking = false;
+    this.wait = 0;
+  }
+  willUpdate(changed) {
+    if (!changed.has("retryAfter") && !changed.has("error")) return;
+    clearInterval(this.timer);
+    this.wait = this.error ? this.retryAfter : 0;
+    if (this.wait <= 0) return;
+    this.timer = setInterval(() => {
+      this.wait = Math.max(0, this.wait - 1);
+      if (this.wait === 0) clearInterval(this.timer);
+    }, 1e3);
+  }
+  updated(changed) {
+    if (changed.has("busy") && !this.busy && this.error)
+      this.renderRoot.querySelector('input[name="credential"]')?.focus();
+  }
+  disconnectedCallback() {
+    clearInterval(this.timer);
+    super.disconnectedCallback();
+  }
+  submit(event) {
+    event.preventDefault();
+    if (this.busy || this.wait > 0) return;
+    const form = event.target;
+    const data = new FormData(form);
+    const userId = String(data.get("user") ?? "").trim();
+    const credential = String(data.get("credential") ?? "");
+    form.elements.namedItem("credential").value = "";
+    if (!userId || !credential) return;
+    this.dispatchEvent(
+      new CustomEvent("teams-sign-in-submit", {
+        detail: { userId, credential },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    if (this.checking)
+      return html`<div class="card" role="status" aria-live="polite">
+				<span class="logo" aria-hidden="true">T</span>
+				<p class="muted">${this.t("signIn.checking")}</p>
+			</div>`;
+    const locked = this.busy || this.wait > 0;
+    const error = this.error && this.wait > 0 && this.retryAfter > 0 ? this.t("signIn.error.rateLimited", { seconds: this.wait }) : this.error;
+    return html`<form class="card" @submit=${this.submit} aria-busy=${String(this.busy)}>
+			<span class="logo" aria-hidden="true">T</span>
+			<h1>${this.t("signIn.title")}</h1>
+			<p class="muted">${this.notice || this.t("signIn.intro")}</p>
+			<label
+				>${this.t("signIn.userLabel")}<input
+					name="user"
+					autocomplete="username"
+					autocapitalize="none"
+					spellcheck="false"
+					maxlength="64"
+					required
+					.value=${this.userId}
+					?disabled=${this.busy}
+			/></label>
+			<label
+				>${this.t("signIn.credentialLabel")}<input
+					name="credential"
+					type="password"
+					autocomplete="current-password"
+					required
+					?disabled=${this.busy}
+			/></label>
+			${error ? html`<p class="error" role="alert">${error}</p>` : nothing}
+			<button type="submit" ?disabled=${locked}>
+				${this.t(this.busy ? "signIn.submitting" : "signIn.submit")}
+			</button>
+		</form>`;
+  }
+};
+function defineTeamsSignIn() {
+  if (!customElements.get("teams-sign-in")) customElements.define("teams-sign-in", TeamsSignIn);
+}
+
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/pinned-bar.css?raw
 var pinned_bar_default = ":host {\n	display: block;\n	flex: none;\n	font: inherit;\n	color: inherit;\n}\n*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nsection {\n	background: var(--office-teams-panel);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: 0;\n	background: transparent;\n}\n.summary {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-1) var(--office-space-3);\n}\n.latest {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-2);\n	min-width: 0;\n	min-height: 2.2em;\n	padding: var(--office-space-1) var(--office-space-2);\n	border-radius: var(--office-radius);\n	text-align: start;\n}\n.latest:hover,\n.count:hover,\n.jump:hover,\n.unpin:hover {\n	background: var(--office-selected);\n}\n.mark {\n	display: inline-grid;\n	flex: none;\n	color: var(--office-teams-brand);\n}\nsvg {\n	width: 1.1em;\n	height: 1.1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.text {\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.count {\n	flex: none;\n	min-height: 2.2em;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-radius: var(--office-radius);\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\nul {\n	display: grid;\n	gap: var(--office-space-1);\n	max-height: 14em;\n	margin: 0;\n	padding: 0 var(--office-space-3) var(--office-space-2);\n	overflow: auto;\n	list-style: none;\n}\nli {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.jump {\n	display: grid;\n	flex: 1;\n	gap: var(--office-space-0);\n	min-width: 0;\n	padding: var(--office-space-2) var(--office-space-3);\n	border-radius: var(--office-radius-md);\n	text-align: start;\n}\n.by {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.unpin {\n	flex: none;\n	margin-inline-end: var(--office-space-2);\n	padding: var(--office-space-1) var(--office-space-3);\n	border-radius: var(--office-radius);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (pointer: coarse) {\n	.latest,\n	.count,\n	.unpin {\n		min-height: var(--office-touch-target, 44px);\n	}\n	.unpin {\n		min-width: var(--office-touch-target, 44px);\n	}\n}\n";
 
 // src/teams/app/pinned-bar.ts
 var SNIPPET = 140;
-var snippet = (m) => {
+var snippet = (m, attachment) => {
   const text = m.text.replace(/\s+/gu, " ").trim();
   if (text) return text.length > SNIPPET ? `${text.slice(0, SNIPPET)}...` : text;
-  return m.attachments[0]?.name ?? "Attachment";
+  return m.attachments[0]?.name ?? attachment;
 };
-var TeamsPinnedBar = class extends LitElement {
+var TeamsPinnedBar = class extends TeamsLitElement {
   static styles = unsafeCSS(pinned_bar_default);
   static properties = { pinned: { attribute: false }, expanded: { state: true } };
   constructor() {
@@ -3790,7 +4326,7 @@ var TeamsPinnedBar = class extends LitElement {
     const [latest] = this.pinned;
     if (!latest) return nothing;
     return html`
-			<section aria-label="Pinned messages">
+			<section aria-label=${this.t("pinned.messages")}>
 				<div class="summary">
 					<button
 						type="button"
@@ -3799,7 +4335,7 @@ var TeamsPinnedBar = class extends LitElement {
 					>
 						<span class="mark">${icon("pin")}</span>
 						<strong>${latest.message.authorName}</strong>
-						<span class="text">${snippet(latest.message)}</span>
+						<span class="text">${snippet(latest.message, this.t("pinned.attachment"))}</span>
 					</button>
 					<button
 						type="button"
@@ -3808,7 +4344,7 @@ var TeamsPinnedBar = class extends LitElement {
 						aria-controls="pins"
 						@click=${() => this.expanded = !this.expanded}
 					>
-						${this.pinned.length} pinned
+						${this.t("pinned.count", { count: this.pinned.length })}
 					</button>
 				</div>
 				${this.expanded ? html`<ul id="pins">
@@ -3820,17 +4356,19 @@ var TeamsPinnedBar = class extends LitElement {
 												@click=${() => this.emit("teams-pinned-open", pin.message.id)}
 											>
 												<strong>${pin.message.authorName}</strong>
-												<span class="text">${snippet(pin.message)}</span>
-												<span class="by">Pinned by ${pin.pinnedByName}</span>
+												<span class="text"
+													>${snippet(pin.message, this.t("pinned.attachment"))}</span
+												>
+												<span class="by">${this.t("pinned.by", { name: pin.pinnedByName })}</span>
 											</button>
 											<button
 												type="button"
 												class="unpin"
-												aria-label=${`Unpin message from ${pin.message.authorName}`}
-												title="Unpin"
+												aria-label=${this.t("pinned.unpinFrom", { name: pin.message.authorName })}
+												title=${this.t("chat.unpin")}
 												@click=${() => this.emit("teams-pinned-unpin", pin.message.id)}
 											>
-												Unpin
+												${this.t("chat.unpin")}
 											</button>
 										</li>`
     )}
@@ -3859,14 +4397,16 @@ function watchActivity(target, onActivity, throttleMs = 1e3, now = Date.now) {
     for (const name of ACTIVITY_EVENTS) target.removeEventListener(name, handler);
   };
 }
-function deliverNotification(item, settings, env, actions) {
+
+// src/teams/app/notify-delivery.ts
+function deliverNotification(item, settings, env, actions, i18n = teamsI18n()) {
   let result = "none";
   if (!env.hidden()) {
     actions.toast(item);
     result = "toast";
   } else if (env.permission() === "granted") {
     env.show(
-      describeActivity(item),
+      describeActivityIn(item, i18n),
       { body: item.preview, tag: item.id },
       () => actions.open(item)
     );
@@ -3919,17 +4459,17 @@ var add_tab_dialog_default = ":host {\n	font: var(--office-font-size) var(--offi
 
 // src/teams/app/add-tab-dialog.ts
 var APPS = [
-  { id: "docx", label: "Word", kind: "docx", letter: "W" },
-  { id: "xlsx", label: "Excel", kind: "xlsx", letter: "X" },
-  { id: "pptx", label: "PowerPoint", kind: "pptx", letter: "P" },
-  { id: "vsdx", label: "Visio", kind: "vsdx", letter: "V" },
-  { id: "markdown", label: "Markdown", kind: "markdown", letter: "M" },
-  { id: "site", label: "Static site", kind: "website", letter: "H" },
-  { id: "text", label: "Text", kind: "text", letter: "T" },
-  { id: "website", label: "Website", kind: null, letter: "\u2197" }
+  { id: "docx", label: "app.word", kind: "docx", letter: "W" },
+  { id: "xlsx", label: "app.excel", kind: "xlsx", letter: "X" },
+  { id: "pptx", label: "app.powerpoint", kind: "pptx", letter: "P" },
+  { id: "vsdx", label: "app.visio", kind: "vsdx", letter: "V" },
+  { id: "markdown", label: "app.markdown", kind: "markdown", letter: "M" },
+  { id: "site", label: "app.site", kind: "website", letter: "H" },
+  { id: "text", label: "app.text", kind: "text", letter: "T" },
+  { id: "website", label: "app.website", kind: null, letter: "\u2197" }
 ];
 var fileKey2 = (file) => JSON.stringify([file.messageId, file.name, file.url]);
-var TeamsAddTabDialog = class extends LitElement {
+var TeamsAddTabDialog = class extends TeamsLitElement {
   static styles = unsafeCSS(add_tab_dialog_default);
   static properties = {
     open: { type: Boolean },
@@ -4002,8 +4542,7 @@ var TeamsAddTabDialog = class extends LitElement {
     return app?.kind ? this.eligible(app.kind).find((file) => fileKey2(file) === this.selectedKey) : void 0;
   }
   availableLabel(kind) {
-    const count = this.eligible(kind).length;
-    return `${count} shared ${count === 1 ? "file" : "files"}`;
+    return this.tn("addTab.sharedFiles", this.eligible(kind).length);
   }
   choose(app) {
     this.app = app;
@@ -4017,55 +4556,59 @@ var TeamsAddTabDialog = class extends LitElement {
     event.preventDefault();
     this.error = "";
     if (!this.current || !this.owner || !this.add) {
-      this.error = "The channel changed. Close this dialog and try again.";
+      this.error = this.t("addTab.channelChanged");
       return;
     }
     if (this.app === "website" && !contentUrl(this.url, this.ownerDocument.baseURI)) {
-      this.error = "Enter a valid http or https website URL.";
+      this.error = this.t("addTab.invalidUrl");
       return;
     }
     const content = this.app === "website" ? { type: "website", url: this.url } : this.selected ? { type: "file", attachment: this.selected } : null;
     if (!content) {
-      this.error = "Choose a file shared in this channel.";
+      this.error = this.t("addTab.chooseShared");
       return;
     }
     const result = this.add(this.name, content, this.context, this.owner, this.postToChannel);
-    if (!result) this.error = "Enter a tab name and valid content.";
+    if (!result) this.error = this.t("addTab.invalid");
   }
   render() {
     const app = APPS.find((entry) => entry.id === this.app);
     const files = app?.kind ? filterFiles(this.eligible(app.kind), this.query) : [];
-    return html`<dialog aria-label="Add a tab" @cancel=${this.close} @close=${this.close}>
+    return html`<dialog
+			aria-label=${this.t("addTab.title")}
+			@cancel=${this.close}
+			@close=${this.close}
+		>
 			<header>
-				<h1>Add a tab</h1>
-				<button type="button" aria-label="Close add tab" @click=${this.close}>×</button>
+				<h1>${this.t("addTab.title")}</h1>
+				<button type="button" aria-label=${this.t("addTab.close")} @click=${this.close}>×</button>
 			</header>
 			${!app ? html`<section>
-							<h2>Choose an app</h2>
-							<p>Pin content to # ${this.contextName} so everyone in the channel can find it.</p>
+							<h2>${this.t("addTab.chooseApp")}</h2>
+							<p>${this.t("addTab.pinTo", { channel: this.contextName })}</p>
 							<div class="apps">
 								${APPS.map(
       (entry, index) => html`<button
 											type="button"
 											class="app"
-											aria-label=${`Choose ${entry.label}`}
+											aria-label=${this.t("addTab.choose", { app: this.t(entry.label) })}
 											?data-first-app=${index === 0}
 											?autofocus=${index === 0}
 											@click=${() => this.choose(entry.id)}
 										>
 											<span class="badge" data-kind=${entry.kind ?? "other"}>${entry.letter}</span
-											><strong>${entry.label}</strong>
+											><strong>${this.t(entry.label)}</strong>
 											<small
-												>${entry.kind ? this.availableLabel(entry.kind) : "Add a web address"}</small
+												>${entry.kind ? this.availableLabel(entry.kind) : this.t("addTab.addAddress")}</small
 											>
 										</button>`
     )}
 							</div>
-							<p class="hint">File tabs use files already shared in this channel.</p>
+							<p class="hint">${this.t("addTab.fileHint")}</p>
 						</section>` : html`<form @submit=${this.submit}>
 							<div class="app-heading">
 								<span class="badge" data-kind=${app.kind ?? "other"}>${app.letter}</span>
-								<h2>${app.label}</h2>
+								<h2>${this.t(app.label)}</h2>
 								<button
 									type="button"
 									@click=${() => {
@@ -4073,11 +4616,11 @@ var TeamsAddTabDialog = class extends LitElement {
       this.error = "";
     }}
 								>
-									Back
+									${this.t("common.back")}
 								</button>
 							</div>
 							<label
-								>Tab name<input
+								>${this.t("addTab.name")}<input
 									data-configure
 									name="name"
 									maxlength="80"
@@ -4089,7 +4632,7 @@ var TeamsAddTabDialog = class extends LitElement {
     }}
 							/></label>
 							${!app.kind ? html`<label
-												>Tab website URL<input
+												>${this.t("addTab.websiteUrl")}<input
 													type="url"
 													required
 													maxlength="2048"
@@ -4100,17 +4643,14 @@ var TeamsAddTabDialog = class extends LitElement {
       this.error = "";
     }}
 											/></label>
-											<p class="hint">
-												Some websites block embedding. Their link remains available from the
-												preview.
-											</p>` : html`<label
-												>Search shared files<input
+											<p class="hint">${this.t("addTab.embedHint")}</p>` : html`<label
+												>${this.t("addTab.searchFiles")}<input
 													type="search"
 													.value=${this.query}
 													@input=${(event) => this.query = event.target.value}
 											/></label>
 											<fieldset class="files">
-												<legend>Choose a file</legend>
+												<legend>${this.t("addTab.chooseFile")}</legend>
 												${files.map(
       (file) => html`<label class="file"
 															><input
@@ -4125,30 +4665,32 @@ var TeamsAddTabDialog = class extends LitElement {
       }}
 															/><span
 																><strong>${file.name}</strong
-																><small>Shared by ${file.author}</small></span
+																><small
+																	>${this.t("addTab.sharedBy", { author: file.author })}</small
+																></span
 															></label
 														>`
     )}
-												${files.length ? nothing : html`<p class="hint">${this.query ? "No matching files." : `No ${app.label} files are shared in this channel. Upload a file from Shared first.`}</p>`}
+												${files.length ? nothing : html`<p class="hint">${this.query ? this.t("files.noMatch") : this.t("addTab.noFiles", { app: this.t(app.label) })}</p>`}
 											</fieldset>
-											${this.selected ? html`<p class="hint">Selected: ${this.selected.name}</p>` : this.selectedKey ? html`<p role="alert">This file is no longer shared in this channel.</p>` : nothing}`}
-							${!this.current ? html`<p role="alert">The channel changed. Close this dialog and try again.</p>` : nothing}
+											${this.selected ? html`<p class="hint">${this.t("addTab.selected", { name: this.selected.name })}</p>` : this.selectedKey ? html`<p role="alert">${this.t("addTab.noLongerShared")}</p>` : nothing}`}
+							${!this.current ? html`<p role="alert">${this.t("addTab.channelChanged")}</p>` : nothing}
 							${this.error ? html`<p role="alert">${this.error}</p>` : nothing}
 							<label class="post-choice"
 								><input
 									type="checkbox"
 									.checked=${this.postToChannel}
 									@change=${(event) => this.postToChannel = event.target.checked}
-								/>Post to the channel about this tab</label
+								/>${this.t("addTab.postToChannel")}</label
 							>
 							<footer>
-								<button type="button" @click=${this.close}>Cancel</button
+								<button type="button" @click=${this.close}>${this.t("common.cancel")}</button
 								><button
 									type="submit"
 									class="primary"
 									?disabled=${!this.current || !this.name.trim() || (app.kind ? !this.selected : !this.url.trim())}
 								>
-									Save
+									${this.t("common.save")}
 								</button>
 							</footer>
 						</form>`}
@@ -4164,7 +4706,7 @@ function defineTeamsAddTabDialog() {
 var create_channel_dialog_default = ":host {\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\ndialog {\n	box-sizing: border-box;\n	width: min(40em, 94vw);\n	max-height: 90dvh;\n	padding: 0;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-popover);\n	color: inherit;\n	box-shadow: var(--office-shadow-teams);\n}\ndialog::backdrop {\n	background: var(--office-overlay);\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-4) var(--office-space-5);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\nform {\n	display: grid;\n	gap: var(--office-space-3);\n	padding: var(--office-space-5);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-2);\n	font-weight: var(--office-font-weight-bold);\n}\ninput,\ntextarea {\n	min-width: 0;\n	width: 100%;\n	box-sizing: border-box;\n	padding: var(--office-space-3);\n	font: inherit;\n	font-weight: normal;\n	color: inherit;\n	background: var(--office-field-background);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius-md);\n}\ntextarea {\n	min-height: 6em;\n	resize: vertical;\n}\np,\nsmall {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n	line-height: 1.5;\n}\n.issue {\n	color: var(--office-danger);\n}\nfooter {\n	display: flex;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n}\nbutton {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton.primary {\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	border-color: transparent;\n}\nbutton.primary:hover {\n	background: var(--office-teams-brand-hover);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n";
 
 // src/teams/app/create-channel-dialog.ts
-var TeamsCreateChannelDialog = class extends LitElement {
+var TeamsCreateChannelDialog = class extends TeamsLitElement {
   static styles = unsafeCSS(create_channel_dialog_default);
   static properties = {
     open: { type: Boolean, reflect: true },
@@ -4202,12 +4744,11 @@ var TeamsCreateChannelDialog = class extends LitElement {
     event.preventDefault();
     const name = sanitizeChannelName(this.name);
     if (!name) {
-      this.issue = "Enter a channel name.";
+      this.issue = this.t("channel.enterName");
       this.renderRoot.querySelector("input")?.focus();
       return;
     }
-    if (!this.create?.(name, this.description))
-      this.issue = "The channel was not created. Your details are kept here.";
+    if (!this.create?.(name, this.description)) this.issue = this.t("channel.notCreated");
   }
   render() {
     return html`<dialog
@@ -4218,12 +4759,14 @@ var TeamsCreateChannelDialog = class extends LitElement {
     }}
 		>
 			<header>
-				<h2 id="title">Create a channel</h2>
-				<button type="button" aria-label="Close create channel" @click=${this.close}>×</button>
+				<h2 id="title">${this.t("channel.create")}</h2>
+				<button type="button" aria-label=${this.t("channel.closeCreate")} @click=${this.close}>
+					×
+				</button>
 			</header>
 			<form @submit=${this.submit}>
 				<label
-					>Channel name<input
+					>${this.t("channel.name")}<input
 						autofocus
 						maxlength=${MAX_CHANNEL_NAME_CHARS}
 						.value=${this.name}
@@ -4231,29 +4774,28 @@ var TeamsCreateChannelDialog = class extends LitElement {
       this.name = event.target.value;
       this.issue = "";
     }}
-						placeholder="Give your channel a name"
+						placeholder=${this.t("channel.namePlaceholder")}
 						aria-describedby="channel-name-help"
 				/></label>
-				<small id="channel-name-help">${MAX_CHANNEL_NAME_CHARS} characters maximum.</small>
+				<small id="channel-name-help"
+					>${this.t("channel.maxChars", { count: MAX_CHANNEL_NAME_CHARS })}</small
+				>
 				<label
-					>Description (optional)<textarea
+					>${this.t("channel.description")}<textarea
 						maxlength=${MAX_CHANNEL_TOPIC_CHARS}
 						.value=${this.description}
 						@input=${(event) => this.description = event.target.value}
-						placeholder="Help others understand what this channel is for"
+						placeholder=${this.t("channel.descriptionPlaceholder")}
 					></textarea>
 				</label>
 				<div>
-					<strong>Standard channel</strong>
-					<p>
-						Available to everyone in this workspace. Private and shared channels are not available
-						yet.
-					</p>
+					<strong>${this.t("channel.standard")}</strong>
+					<p>${this.t("channel.standardNote")}</p>
 				</div>
 				${this.issue ? html`<p class="issue" role="alert">${this.issue}</p>` : nothing}
 				<footer>
-					<button type="button" @click=${this.close}>Cancel</button
-					><button type="submit" class="primary">Create</button>
+					<button type="button" @click=${this.close}>${this.t("common.cancel")}</button
+					><button type="submit" class="primary">${this.t("common.create")}</button>
 				</footer>
 			</form>
 		</dialog>`;
@@ -4288,7 +4830,7 @@ var TeamsDialog = class extends TeamsElement {
     this.fire("teams-dialog-close", {});
   }
   /** The dialog frame with a title and a close button around `body`. */
-  frame(title, body, closeLabel = `Close ${title.toLowerCase()}`) {
+  frame(title, body, closeLabel = this.t("common.close")) {
     return html`<dialog
 			aria-labelledby="title"
 			@cancel=${(event) => {
@@ -4337,21 +4879,21 @@ var TeamsNewChatDialog = class extends TeamsDialog {
   submit(event) {
     event.preventDefault();
     if (this.selected.length === 0) {
-      this.issue = "Pick at least one person.";
+      this.issue = this.t("newChat.pickOne");
       return;
     }
     if (!this.create?.(this.selected, this.selected.length > 1 ? this.name : ""))
-      this.issue = "The chat could not be started.";
+      this.issue = this.t("newChat.failed");
   }
   render() {
     const group = this.selected.length > 1;
     return this.frame(
-      "New chat",
+      this.t("chat.new"),
       html`<form @submit=${this.submit}>
 				<div class="field">
-					To
+					${this.t("newChat.to")}
 					<office-ui-people-picker
-						label="People to chat with"
+						label=${this.t("newChat.peopleLabel")}
 						.contacts=${this.contacts}
 						.selected=${this.selected}
 						@office-people-change=${(e) => {
@@ -4361,23 +4903,22 @@ var TeamsNewChatDialog = class extends TeamsDialog {
 					></office-ui-people-picker>
 				</div>
 				${group ? html`<label
-								>Group name (optional)<input
+								>${this.t("chatPeople.groupNameOptional")}<input
 									maxlength=${MAX_CHANNEL_NAME_CHARS}
 									.value=${this.name}
-									placeholder="Name this group chat"
+									placeholder=${this.t("chatPeople.groupPlaceholder")}
 									@input=${(e) => this.name = e.target.value}
 							/></label>` : nothing}
-				<small
-					>${group ? "Everyone you pick joins one group chat. Only its members can read it." : "Pick one person for a 1:1 chat, or several for a group chat."}</small
-				>
+				<small>${group ? this.t("newChat.hintGroup") : this.t("newChat.hintOne")}</small>
 				${this.issue ? html`<p class="issue" role="alert">${this.issue}</p>` : nothing}
 				<footer>
-					<button type="button" @click=${this.requestClose}>Cancel</button>
+					<button type="button" @click=${this.requestClose}>${this.t("common.cancel")}</button>
 					<button type="submit" class="primary" ?disabled=${this.selected.length === 0}>
-						${group ? "Start group chat" : "Start chat"}
+						${this.t(group ? "newChat.startGroup" : "newChat.start")}
 					</button>
 				</footer>
-			</form>`
+			</form>`,
+      this.t("dialog.closeNewChat")
     );
   }
 };
@@ -4414,10 +4955,10 @@ var TeamsChatPeopleDialog = class extends TeamsDialog {
   }
   render() {
     const chat = this.chat;
-    if (!chat) return this.frame("People", html``);
+    if (!chat) return this.frame(this.t("chat.people"), html``, this.t("dialog.closePeople"));
     const group = chat.kind === "group";
     return this.frame(
-      "People",
+      this.t("chat.people"),
       html`<div class="body">
 				${group ? html`<form
 								class="rename"
@@ -4427,15 +4968,15 @@ var TeamsChatPeopleDialog = class extends TeamsDialog {
       }}
 							>
 								<label
-									>Group name<input
+									>${this.t("chatPeople.groupName")}<input
 										maxlength=${MAX_CHANNEL_NAME_CHARS}
 										.value=${this.name}
-										placeholder="Name this group chat"
+										placeholder=${this.t("chatPeople.groupPlaceholder")}
 										@input=${(e) => this.name = e.target.value}
 								/></label>
-								<button type="submit">Rename</button>
+								<button type="submit">${this.t("chatPeople.rename")}</button>
 							</form>` : nothing}
-				<h3>In this chat (${chat.members.length})</h3>
+				<h3>${this.t("chatPeople.inChat", { count: chat.members.length })}</h3>
 				<ul class="members">
 					${chat.members.map(
         (m) => html`<li>
@@ -4445,20 +4986,22 @@ var TeamsChatPeopleDialog = class extends TeamsDialog {
 									seed=${m.id}
 									presence=${m.availability}
 								></office-ui-avatar>
-								<span class="name">${m.name}${m.self ? " (you)" : ""}</span>
+								<span class="name"
+									>${m.self ? this.t("common.nameYou", { name: m.name }) : m.name}</span
+								>
 								${group && !m.self && chat.members.length > 1 ? html`<button
 												type="button"
-												aria-label=${`Remove ${m.name}`}
+												aria-label=${this.t("people.remove", { name: m.name })}
 												@click=${() => this.fire("teams-chat-remove", { id: chat.id, userId: m.id })}
 											>
-												Remove
+												${this.t("chatPeople.remove")}
 											</button>` : nothing}
 							</li>`
       )}
 				</ul>
-				${group ? html`<h3>Add people</h3>
+				${group ? html`<h3>${this.t("chatPeople.addPeople")}</h3>
 								<office-ui-people-picker
-									label="People to add"
+									label=${this.t("chatPeople.peopleToAdd")}
 									.contacts=${this.contacts}
 									.exclude=${chat.members.map((m) => m.id)}
 									.selected=${this.adding}
@@ -4474,22 +5017,21 @@ var TeamsChatPeopleDialog = class extends TeamsDialog {
         this.adding = [];
       }}
 									>
-										Add to chat
+										${this.t("chatPeople.addToChat")}
 									</button>
-								</footer>` : html`<p>
-								People cannot be added to or removed from a 1:1 chat. Start a group chat instead.
-							</p>`}
+								</footer>` : html`<p>${this.t("chatPeople.directNote")}</p>`}
 				<footer>
 					${chat.canLeave ? html`<button
 									type="button"
 									class="danger"
 									@click=${() => this.fire("teams-chat-leave", { id: chat.id })}
 								>
-									Leave chat
+									${this.t("chatPeople.leave")}
 								</button>` : nothing}
-					<button type="button" @click=${this.requestClose}>Done</button>
+					<button type="button" @click=${this.requestClose}>${this.t("common.done")}</button>
 				</footer>
-			</div>`
+			</div>`,
+      this.t("dialog.closePeople")
     );
   }
 };
@@ -4500,10 +5042,61 @@ function defineTeamsChatPeopleDialog(registry = globalThis.customElements) {
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/meeting-dialog.css?raw
 var meeting_dialog_default = ".times {\n	display: grid;\n	grid-template-columns: repeat(2, minmax(0, 1fr));\n	gap: var(--office-space-3);\n}\noffice-ui-people-picker {\n	font-weight: normal;\n}\n@media (max-width: 40em) {\n	.times {\n		grid-template-columns: minmax(0, 1fr);\n	}\n}\n";
+var monthDay = (month, day, i18n) => new Intl.DateTimeFormat(i18n.locale, { month: "long", day: "numeric", timeZone: "UTC" }).format(
+  Date.UTC(2e3, month - 1, day)
+);
+var weekdayName = (weekday, i18n) => new Intl.DateTimeFormat(i18n.locale, { weekday: "long", timeZone: "UTC" }).format(
+  Date.UTC(2e3, 0, 2 + weekday % 7)
+);
+var ORDINAL_KEYS = {
+  1: "repeat.monthlyOrdinal.1",
+  2: "repeat.monthlyOrdinal.2",
+  3: "repeat.monthlyOrdinal.3",
+  4: "repeat.monthlyOrdinal.4",
+  [-1]: "repeat.monthlyOrdinal.last"
+};
+var monthlyWeekday = (ordinal, weekday, i18n) => i18n.t(ORDINAL_KEYS[ordinal] ?? "repeat.monthlyOrdinal.1", {
+  weekday: weekdayName(weekday, i18n)
+});
+var NO_REPEAT = { repeat: "none", monthlyBy: "date", ordinal: 1 };
+var repeatValue = (r) => r.repeat === "monthly" ? r.monthlyBy === "weekday" ? `monthly-${r.ordinal}` : "monthly-date" : r.repeat;
+function parseRepeatValue(value) {
+  if (value === "monthly-date") return { repeat: "monthly", monthlyBy: "date", ordinal: 1 };
+  const m = /^monthly-(-?\d)$/u.exec(value);
+  if (m) return { repeat: "monthly", monthlyBy: "weekday", ordinal: Number(m[1]) };
+  if (value === "daily" || value === "weekly" || value === "yearly")
+    return { repeat: value, monthlyBy: "date", ordinal: 1 };
+  return NO_REPEAT;
+}
+function repeatOptions(start, zone, i18n = teamsI18n()) {
+  const { month, day, weekday, ordinals } = repeatChoices(start, zone);
+  return [
+    { value: "none", label: i18n.t("repeat.none") },
+    { value: "daily", label: i18n.t("repeat.daily") },
+    { value: "weekly", label: i18n.t("repeat.weekly") },
+    { value: "monthly-date", label: i18n.t("repeat.monthlyDay", { day }) },
+    ...ordinals.map((o) => ({
+      value: `monthly-${o}`,
+      label: monthlyWeekday(o, weekday, i18n)
+    })),
+    { value: "yearly", label: i18n.t("repeat.yearlyOn", { date: monthDay(month, day, i18n) }) }
+  ];
+}
+var inSentence = (label, i18n) => label.charAt(0).toLocaleLowerCase(i18n.locale) + label.slice(1);
+function repeatText(m, i18n = teamsI18n()) {
+  if (m.repeat === "none") return "";
+  const { month, day, weekday } = repeatChoices(m.start, m.zone);
+  const rule = m.repeat === "daily" ? i18n.t("repeat.daily") : m.repeat === "weekly" ? i18n.t("repeat.weekly") : m.repeat === "yearly" ? i18n.t("repeat.yearlyOn", { date: monthDay(month, day, i18n) }) : m.monthlyBy === "weekday" && m.ordinal !== void 0 ? monthlyWeekday(m.ordinal, weekday, i18n) : i18n.t("repeat.monthlyDay", { day });
+  return i18n.t("repeat.sentence", { rule: inSentence(rule, i18n) });
+}
 
 // src/teams/app/meeting-dialog.ts
 var SLOT = 30 * MINUTE_MS;
-var NOT_SAVED = "The meeting was not saved. Your details are kept here.";
+var repeatOption = (o, current) => html`<option value=${o.value} ?selected=${o.value === current}>${o.label}</option>`;
+function repeatFields(r) {
+  if (r.repeat !== "monthly") return { repeat: r.repeat };
+  return r.monthlyBy === "weekday" ? { repeat: "monthly", monthlyBy: "weekday", ordinal: r.ordinal } : { repeat: "monthly", monthlyBy: "date" };
+}
 function toLocalInput(ms) {
   const d = new Date(ms);
   const p = (n) => String(n).padStart(2, "0");
@@ -4523,7 +5116,7 @@ var TeamsMeetingDialog = class extends TeamsDialog {
     description: { state: true },
     startText: { state: true },
     endText: { state: true },
-    repeat: { state: true },
+    repeatChoice: { state: true },
     endMode: { state: true },
     untilText: { state: true },
     countText: { state: true },
@@ -4543,7 +5136,7 @@ var TeamsMeetingDialog = class extends TeamsDialog {
     this.description = "";
     this.startText = "";
     this.endText = "";
-    this.repeat = "none";
+    this.repeatChoice = NO_REPEAT;
     this.endMode = "never";
     this.untilText = "";
     this.countText = "10";
@@ -4560,7 +5153,7 @@ var TeamsMeetingDialog = class extends TeamsDialog {
     this.description = one?.description ?? m?.description ?? "";
     this.startText = toLocalInput(begin);
     this.endText = toLocalInput(one?.end ?? m?.end ?? begin + SLOT);
-    this.repeat = m?.repeat ?? "none";
+    this.repeatChoice = m ? { repeat: m.repeat, monthlyBy: m.monthlyBy ?? "date", ordinal: m.ordinal ?? 1 } : NO_REPEAT;
     this.endMode = m?.count !== void 0 ? "count" : m?.until !== void 0 ? "date" : "never";
     this.countText = String(m?.count ?? 10);
     this.untilText = toLocalInput(m?.until ?? begin + 28 * 864e5).slice(0, 10);
@@ -4577,6 +5170,20 @@ var TeamsMeetingDialog = class extends TeamsDialog {
       this.endText = toLocalInput(end + (after - before));
     this.issue = "";
   }
+  /** The zone the series is defined in: the organizer's for an existing meeting, else this device's. */
+  zone() {
+    return this.meeting?.zone ?? localZone();
+  }
+  /**
+   * The repeat to store. A weekday ordinal that no longer fits the start date (the start moved)
+   * becomes the first one that does.
+   */
+  repeatToStore(start) {
+    const choice = this.repeatChoice;
+    if (choice.repeat !== "monthly" || choice.monthlyBy !== "weekday") return choice;
+    const fits = repeatOptions(start, this.zone(), this.i18n).map((o) => o.value);
+    return fits.includes(repeatValue(choice)) ? choice : parseRepeatValue(fits.find((v) => v.startsWith("monthly-") && v !== "monthly-date") ?? "");
+  }
   validCount() {
     const n = Number(this.countText);
     return Number.isInteger(n) && n >= 1 && n <= MAX_RECURRENCE_COUNT;
@@ -4590,50 +5197,54 @@ var TeamsMeetingDialog = class extends TeamsDialog {
   }
   /** The end of the repeat to store: a count, the end of a day, or none (null clears an old end). */
   recurrenceEnd() {
-    if (this.repeat === "none" || this.endMode === "never") return { count: null, until: null };
+    if (this.repeatChoice.repeat === "none" || this.endMode === "never")
+      return { count: null, until: null };
     return this.endMode === "count" ? { count: Number(this.countText), until: null } : { count: null, until: this.untilTime() };
   }
   submit(event) {
     event.preventDefault();
     const start = new Date(this.startText).getTime();
     const end = new Date(this.endText).getTime();
-    if (!this.meetingTitle.trim()) this.issue = "Add a title.";
-    else if (!Number.isFinite(start) || !Number.isFinite(end)) this.issue = "Pick a start and end.";
-    else if (end <= start) this.issue = "The meeting must end after it starts.";
-    else if (end - start > 24 * 60 * MINUTE_MS) this.issue = "A meeting can last at most 24 hours.";
+    if (!this.meetingTitle.trim()) this.issue = this.t("meeting.addTitle");
+    else if (!Number.isFinite(start) || !Number.isFinite(end))
+      this.issue = this.t("meeting.pickStartEnd");
+    else if (end <= start) this.issue = this.t("meeting.endAfterStart");
+    else if (end - start > 24 * 60 * MINUTE_MS) this.issue = this.t("meeting.maxDuration");
     else if (this.occurrence) {
       const one = { title: this.meetingTitle, description: this.description, start, end };
-      if (!this.save?.(one, this.meeting?.id, this.occurrence)) this.issue = NOT_SAVED;
-    } else if (this.repeat !== "none" && this.endMode === "count" && !this.validCount())
-      this.issue = `Enter a number of events from 1 to ${MAX_RECURRENCE_COUNT}.`;
-    else if (this.repeat !== "none" && this.endMode === "date" && !this.validUntil(start))
-      this.issue = "The series must end on or after its first event.";
+      if (!this.save?.(one, this.meeting?.id, this.occurrence))
+        this.issue = this.t("meeting.notSaved");
+    } else if (this.repeatChoice.repeat !== "none" && this.endMode === "count" && !this.validCount())
+      this.issue = this.t("meeting.countRange", { max: MAX_RECURRENCE_COUNT });
+    else if (this.repeatChoice.repeat !== "none" && this.endMode === "date" && !this.validUntil(start))
+      this.issue = this.t("meeting.untilBeforeStart");
     else if (!this.save?.(
       {
         title: this.meetingTitle,
         description: this.description,
         start,
         end,
-        repeat: this.repeat,
+        ...repeatFields(this.repeatToStore(start)),
         ...this.recurrenceEnd(),
         attendeeIds: this.channelId ? [] : this.attendees,
         ...this.channelId ? { channelId: this.channelId } : {}
       },
       this.meeting?.id
     ))
-      this.issue = NOT_SAVED;
+      this.issue = this.t("meeting.notSaved");
   }
   render() {
     const editing = this.meeting !== null;
     const single = this.occurrence !== 0;
+    const current = repeatValue(this.repeatToStore(new Date(this.startText).getTime()));
     return this.frame(
-      single ? "Edit this event" : editing ? "Edit meeting" : "New meeting",
+      this.t(single ? "meeting.editEvent" : editing ? "meeting.edit" : "calendar.newMeeting"),
       html`<form @submit=${this.submit}>
 				<label
-					>Title<input
+					>${this.t("meeting.title")}<input
 						maxlength=${MAX_MEETING_TITLE}
 						.value=${this.meetingTitle}
-						placeholder="Add a title"
+						placeholder=${this.t("meeting.titlePlaceholder")}
 						@input=${(e) => {
         this.meetingTitle = e.target.value;
         this.issue = "";
@@ -4641,13 +5252,13 @@ var TeamsMeetingDialog = class extends TeamsDialog {
 				/></label>
 				<div class="times">
 					<label
-						>Start<input
+						>${this.t("meeting.start")}<input
 							type="datetime-local"
 							.value=${this.startText}
 							@change=${(e) => this.moveStart(e.target.value)}
 					/></label>
 					<label
-						>End<input
+						>${this.t("meeting.end")}<input
 							type="datetime-local"
 							.value=${this.endText}
 							@change=${(e) => {
@@ -4656,29 +5267,30 @@ var TeamsMeetingDialog = class extends TeamsDialog {
       }}
 					/></label>
 				</div>
-				${single ? html`<small>Only this event changes. The rest of the series stays as it is.</small>` : html`
+				${single ? html`<small>${this.t("meeting.onlyThisEvent")}</small>` : html`
 								<label
-									>Repeat<select
-										.value=${this.repeat}
-										@change=${(e) => this.repeat = e.target.value}
+									>${this.t("meeting.repeat")}<select
+										@change=${(e) => this.repeatChoice = parseRepeatValue(e.target.value)}
 									>
-										<option value="none">Does not repeat</option>
-										<option value="daily">Every day</option>
-										<option value="weekly">Every week</option>
+										${repeatOptions(
+        new Date(this.startText).getTime() || Date.now(),
+        this.zone(),
+        this.i18n
+      ).map((o) => repeatOption(o, current))}
 									</select></label
 								>
-								${this.repeat === "none" ? nothing : html`<label
-													>Ends<select
+								${this.repeatChoice.repeat === "none" ? nothing : html`<label
+													>${this.t("meeting.ends")}<select
 														.value=${this.endMode}
 														@change=${(e) => this.endMode = e.target.value}
 													>
-														<option value="never">Never</option>
-														<option value="date">On a date</option>
-														<option value="count">After a number of events</option>
+														<option value="never">${this.t("meeting.endsNever")}</option>
+														<option value="date">${this.t("meeting.endsDate")}</option>
+														<option value="count">${this.t("meeting.endsCount")}</option>
 													</select></label
 												>
 												${this.endMode === "date" ? html`<label
-																>End date<input
+																>${this.t("meeting.endDate")}<input
 																	type="date"
 																	.value=${this.untilText}
 																	@change=${(e) => {
@@ -4687,7 +5299,7 @@ var TeamsMeetingDialog = class extends TeamsDialog {
       }}
 															/></label>` : nothing}
 												${this.endMode === "count" ? html`<label
-																>Number of events<input
+																>${this.t("meeting.numberOfEvents")}<input
 																	type="number"
 																	min="1"
 																	max=${MAX_RECURRENCE_COUNT}
@@ -4698,22 +5310,19 @@ var TeamsMeetingDialog = class extends TeamsDialog {
       }}
 															/></label>` : nothing}`}
 								<label
-									>Channel (optional)<select
+									>${this.t("meeting.channelOptional")}<select
 										?disabled=${editing}
 										.value=${this.channelId}
 										@change=${(e) => this.channelId = e.target.value}
 									>
-										<option value="">No channel: invite people</option>
+										<option value="">${this.t("meeting.noChannel")}</option>
 										${this.channels.map((c) => html`<option value=${c.id}># ${c.name}</option>`)}
 									</select></label
 								>
-								${this.channelId ? html`<small
-												>A channel meeting posts a meeting card in the channel and shows in
-												everyone's calendar.</small
-											>` : html`<div class="field">
-												Attendees
+								${this.channelId ? html`<small>${this.t("meeting.channelNote")}</small>` : html`<div class="field">
+												${this.t("meeting.attendees")}
 												<office-ui-people-picker
-													label="Attendees"
+													label=${this.t("meeting.attendees")}
 													.contacts=${this.contacts}
 													.selected=${this.attendees}
 													@office-people-change=${(e) => this.attendees = e.detail.selected}
@@ -4721,22 +5330,25 @@ var TeamsMeetingDialog = class extends TeamsDialog {
 											</div>`}
 							`}
 				<label
-					>Details (optional)<textarea
+					>${this.t("meeting.detailsOptional")}<textarea
 						maxlength=${MAX_MEETING_DESCRIPTION}
 						.value=${this.description}
-						placeholder="Add an agenda or notes"
+						placeholder=${this.t("meeting.detailsPlaceholder")}
 						@input=${(e) => this.description = e.target.value}
 					></textarea>
 				</label>
-				<small
-					>Times are shown in your time zone. The organizer's zone keeps repeats on schedule.</small
-				>
+				<small>${this.t("meeting.zoneNote")}</small>
 				${this.issue ? html`<p class="issue" role="alert">${this.issue}</p>` : nothing}
 				<footer>
-					<button type="button" @click=${this.requestClose}>Cancel</button>
-					<button type="submit" class="primary">${editing ? "Save" : "Send"}</button>
+					<button type="button" @click=${this.requestClose}>${this.t("common.cancel")}</button>
+					<button type="submit" class="primary">
+						${this.t(editing ? "common.save" : "meeting.send")}
+					</button>
 				</footer>
-			</form>`
+			</form>`,
+      this.t(
+        single ? "dialog.closeEditEvent" : editing ? "dialog.closeEditMeeting" : "dialog.closeNewMeeting"
+      )
     );
   }
 };
@@ -4749,7 +5361,6 @@ function defineTeamsMeetingDialog(registry = globalThis.customElements) {
 var meeting_details_default = ".when {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\nh3 {\n	margin: 0 0 var(--office-space-1);\n	font-size: var(--office-font-size);\n}\n.people ul {\n	margin: 0;\n	padding-inline-start: var(--office-space-5);\n}\n.description {\n	color: var(--office-foreground);\n	white-space: pre-wrap;\n}\n.scope {\n	display: grid;\n	gap: var(--office-space-3);\n}\n.scope fieldset {\n	display: grid;\n	gap: var(--office-space-2);\n	margin: 0;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.scope label {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n}\nfooter[hidden] {\n	display: none;\n}\n";
 
 // src/teams/app/meeting-details.ts
-var REPEAT_TEXT = { none: "", daily: "Repeats every day", weekly: "Repeats every week" };
 var TeamsMeetingDetails = class extends TeamsDialog {
   static styles = dialogStyles(meeting_details_default);
   static properties = {
@@ -4799,17 +5410,17 @@ var TeamsMeetingDetails = class extends TeamsDialog {
     this.pending = null;
   }
   endText(m) {
-    const date = (ms) => new Intl.DateTimeFormat([], {
+    const date = (ms) => new Intl.DateTimeFormat(this.i18n.intl, {
       dateStyle: "medium",
       ...this.zone ? { timeZone: this.zone } : {}
     }).format(ms);
-    if (m.count !== void 0) return m.count === 1 ? ", 1 time" : `, ${m.count} times`;
-    return m.until !== void 0 ? `, until ${date(m.until)}` : "";
+    if (m.count !== void 0) return this.tn("details.times", m.count);
+    return m.until !== void 0 ? this.t("details.until", { date: date(m.until) }) : "";
   }
   scopeChoice(action) {
     const options = [
-      ["occurrence", action === "edit" ? "This event" : "This event only"],
-      ["series", action === "edit" ? "All events in the series" : "All events in the series"]
+      ["occurrence", this.t(action === "edit" ? "details.thisEvent" : "details.thisEventOnly")],
+      ["series", this.t("details.allEvents")]
     ];
     return html`<form
 			class="scope"
@@ -4820,7 +5431,7 @@ var TeamsMeetingDetails = class extends TeamsDialog {
 		>
 			<fieldset>
 				<legend>
-					${action === "edit" ? "Edit recurring meeting" : "Cancel recurring meeting"}
+					${this.t(action === "edit" ? "details.editRecurring" : "details.cancelRecurring")}
 				</legend>
 				${options.map(
       ([value, label]) => html`<label
@@ -4836,16 +5447,19 @@ var TeamsMeetingDetails = class extends TeamsDialog {
     )}
 			</fieldset>
 			<footer>
-				<button type="button" @click=${() => this.pending = null}>Back</button>
+				<button type="button" @click=${() => this.pending = null}>
+					${this.t("common.back")}
+				</button>
 				<button type="submit" class=${action === "cancel" ? "danger" : "primary"}>
-					${action === "edit" ? "Continue" : "Cancel meeting"}
+					${this.t(action === "edit" ? "details.continue" : "details.cancelMeeting")}
 				</button>
 			</footer>
 		</form>`;
   }
   render() {
     const m = this.meeting;
-    if (!m) return this.frame("Meeting", html``);
+    if (!m)
+      return this.frame(this.t("details.meeting"), html``, this.t("dialog.closeMeetingDetails"));
     const occurrence = occurrenceAt(m, this.occurrenceStart || m.start);
     const start = occurrence?.start ?? (this.occurrenceStart || m.start);
     const end = occurrence?.end ?? start + (m.end - m.start);
@@ -4854,17 +5468,18 @@ var TeamsMeetingDetails = class extends TeamsDialog {
     return this.frame(
       occurrence?.title ?? m.title,
       html`<div class="body">
-				<p class="when">${icon("calendar")} ${formatWhen(start, end)}</p>
-				${m.repeat !== "none" ? html`<p>${REPEAT_TEXT[m.repeat]}${this.endText(m)}</p>` : nothing}
-				${m.zone !== this.zone ? html`<p>Scheduled in the organizer's time zone, ${m.zone.replaceAll("_", " ")}.</p>` : nothing}
-				<p>Organized by ${m.mine ? "you" : m.organizerName}</p>
+				<p class="when">${icon("calendar")} ${formatWhen(start, end, this.locale)}</p>
+				${m.repeat !== "none" ? html`<p>${repeatText(m, this.i18n)}${this.endText(m)}</p>` : nothing}
+				${m.zone !== this.zone ? html`<p>${this.t("details.organizerZone", { zone: m.zone.replaceAll("_", " ") })}</p>` : nothing}
+				<p>
+					${m.mine ? this.t("details.organizedByYou") : this.t("details.organizedBy", { name: m.organizerName })}
+				</p>
 				${m.channelId ? html`<p>
-								Channel meeting in # ${this.channelName || "a channel"}. Everyone in the channel can
-								join.
+								${this.t("details.channelMeeting", { channel: this.channelName || this.t("details.aChannel") })}
 							</p>` : html`<div class="people">
-								<h3>Attendees (${m.attendees.length + 1})</h3>
+								<h3>${this.t("details.attendees", { count: m.attendees.length + 1 })}</h3>
 								<ul>
-									<li>${m.organizerName} (organizer)</li>
+									<li>${this.t("details.organizerItem", { name: m.organizerName })}</li>
 									${m.attendees.map((a) => html`<li>${a.name}</li>`)}
 								</ul>
 							</div>`}
@@ -4872,19 +5487,23 @@ var TeamsMeetingDetails = class extends TeamsDialog {
 				${this.pending ? this.scopeChoice(this.pending) : nothing}
 				<footer ?hidden=${this.pending !== null}>
 					<button type="button" class="primary" @click=${() => this.emit("teams-meeting-join")}>
-						${m.live ? "Join now" : "Join"}
+						${this.t(m.live ? "call.joinNow" : "call.join")}
 					</button>
 					${hasChat ? html`<button type="button" @click=${() => this.emit("teams-meeting-chat")}>
-									Meeting chat
+									${this.t("details.meetingChat")}
 								</button>` : nothing}
-					<button type="button" @click=${() => this.emit("teams-meeting-ics")}>Export .ics</button>
-					${m.mine ? html`<button type="button" @click=${() => this.change("edit")}>Edit</button>
+					<button type="button" @click=${() => this.emit("teams-meeting-ics")}>
+						${this.t("details.exportIcs")}
+					</button>
+					${m.mine ? html`<button type="button" @click=${() => this.change("edit")}>
+										${this.t("common.edit")}
+									</button>
 									<button type="button" class="danger" @click=${() => this.change("cancel")}>
-										Cancel meeting
+										${this.t("details.cancelMeeting")}
 									</button>` : nothing}
 				</footer>
 			</div>`,
-      "Close meeting details"
+      this.t("dialog.closeMeetingDetails")
     );
   }
 };
@@ -4892,15 +5511,25 @@ function defineTeamsMeetingDetails(registry = globalThis.customElements) {
   if (registry && !registry.get("teams-meeting-details"))
     registry.define("teams-meeting-details", TeamsMeetingDetails);
 }
-function chatHeader(chat, on) {
+var PRESENCE_KEY2 = {
+  available: "presence.available",
+  busy: "presence.busy",
+  dnd: "presence.dnd",
+  brb: "presence.brb",
+  away: "presence.away",
+  offline: "presence.offline"
+};
+function chatHeader(chat, on, i18n = teamsI18n()) {
+  const { t } = i18n;
   const other = chat.kind === "direct" ? chat.members.find((m) => !m.self) : void 0;
   const online = chat.members.filter((m) => !m.self && m.availability !== "offline").length;
+  const topic = chat.kind === "direct" ? other ? t(PRESENCE_KEY2[other.availability]) : "" : online ? t("chat.peopleOnline", { count: chat.members.length, online }) : i18n.tn("chat.peopleCount", chat.members.length);
   return html`<header class="channel-head chat-head">
 		<button
 			type="button"
 			class="back"
-			aria-label="Back to chats"
-			title="Back to chats"
+			aria-label=${t("chat.backToChats")}
+			title=${t("chat.backToChats")}
 			@click=${on.back}
 		>
 			${icon("back")}
@@ -4913,10 +5542,8 @@ function chatHeader(chat, on) {
 						>${icon(chat.meetingId ? "calendar" : "users")}</span
 					>`}
 		<h1>${chat.title}</h1>
-		<span class="topic"
-			>${chat.kind === "direct" ? other?.availability ?? "" : `${chat.members.length} people${online ? `, ${online} online` : ""}`}</span
-		>
-		<div class="people" aria-label="People in this chat">
+		<span class="topic">${topic}</span>
+		<div class="people" aria-label=${t("chat.peopleInChat")}>
 			${chat.members.slice(0, 5).map(
     (m) => html`<office-ui-avatar
 							size="sm"
@@ -4927,9 +5554,11 @@ function chatHeader(chat, on) {
   )}
 			${chat.members.length > 5 ? html`<span class="more">+${chat.members.length - 5}</span>` : nothing}
 		</div>
-		<button type="button" class="chat-people" @click=${on.people}>${icon("users")} People</button>
+		<button type="button" class="chat-people" @click=${on.people}>
+			${icon("users")} ${t("chat.people")}
+		</button>
 		<button type="button" class="meet" @click=${on.call}>
-			${chat.live ? "Join call" : "Call"}
+			${t(chat.live ? "call.joinCall" : "chat.call")}
 		</button>
 	</header>`;
 }
@@ -4968,22 +5597,22 @@ var LOCAL_THEME = THEME_CSS.replaceAll(
   ':host([data-office-theme="dark"])'
 ).replaceAll(':root:not([data-office-theme="light"])', ':host([data-office-theme="system"])').replaceAll(":root", ":host([data-office-theme])");
 var RAIL = [
-  { id: "activity", label: "Activity", icon: "bell" },
-  { id: "chat", label: "Chat", icon: "message" },
-  { id: "teams", label: "Teams", icon: "users" },
-  { id: "calendar", label: "Calendar", icon: "calendar" },
-  { id: "calls", label: "Calls", icon: "phone", secondary: true },
-  { id: "files", label: "Files", icon: "folder", secondary: true },
+  { id: "activity", label: "rail.activity", icon: "bell" },
+  { id: "chat", label: "rail.chat", icon: "message" },
+  { id: "teams", label: "rail.teams", icon: "users" },
+  { id: "calendar", label: "rail.calendar", icon: "calendar" },
+  { id: "calls", label: "rail.calls", icon: "phone", secondary: true },
+  { id: "files", label: "rail.files", icon: "folder", secondary: true },
   {
     id: "followed",
-    label: "Followed threads",
-    shortLabel: "Threads",
+    label: "rail.followed",
+    shortLabel: "rail.threads",
     icon: "chat",
     secondary: true
   },
-  { id: "drafts", label: "Drafts", icon: "chat", secondary: true }
+  { id: "drafts", label: "rail.drafts", icon: "chat", secondary: true }
 ];
-var TeamsApp = class extends LitElement {
+var TeamsApp = class extends TeamsLitElement {
   static styles = [unsafeCSS(LOCAL_THEME), unsafeCSS(teams_app_default)];
   static properties = {
     workspaceId: { type: String, attribute: "workspace-id" },
@@ -5016,11 +5645,19 @@ var TeamsApp = class extends LitElement {
     theme: { state: true },
     fileOpenPreference: { state: true },
     chatDensity: { state: true },
-    showAppNames: { state: true }
+    showAppNames: { state: true },
+    authRevision: { state: true }
   };
+  /** Sign-in for servers that require accounts; a server without them never gates the app. */
+  signIn = new SignInFlow({
+    changed: () => this.authRevision++,
+    emit: (name, detail) => this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true })),
+    i18n: () => this.i18n
+  });
+  authKey = "";
   teams = new TeamsController(
     this,
-    (text) => this.notify(text),
+    (text) => this.notify(localizeCoreText(text, this.i18n)),
     (item) => this.announce(item)
   );
   toastTimer;
@@ -5072,6 +5709,7 @@ var TeamsApp = class extends LitElement {
     this.fileOpenPreference = "teams";
     this.chatDensity = "comfy";
     this.showAppNames = true;
+    this.authRevision = 0;
   }
   /** The core client behind this element, for hosts that want the raw actions. */
   get client() {
@@ -5094,8 +5732,10 @@ var TeamsApp = class extends LitElement {
     defineTeamsChatPeopleDialog();
     defineTeamsMeetingDialog();
     defineTeamsMeetingDetails();
+    defineTeamsSignIn();
     this.stopActivity = watchActivity(this.ownerDocument, () => this.teams.client?.noteActivity());
     super.connectedCallback();
+    if (this.signIn.phase === "checking") this.authRevision++;
   }
   // ---- lifecycle --------------------------------------------------------------------------
   resolveConfig() {
@@ -5110,14 +5750,13 @@ var TeamsApp = class extends LitElement {
   }
   willUpdate(changed) {
     if (this.popoutRequested) return;
-    const restart = [
-      "workspaceId",
-      "userName",
-      "userId",
-      "serverConfig",
-      "config",
-      "identity"
-    ].some((k) => changed.has(k));
+    const base = this.resolveConfig();
+    const waiting = this.signIn.gate(base);
+    const authKey = `${waiting}|${this.signIn.session?.token ?? ""}`;
+    const restart = ["workspaceId", "userName", "userId", "serverConfig", "config", "identity"].some(
+      (k) => changed.has(k)
+    ) || changed.has("authRevision") && authKey !== this.authKey;
+    this.authKey = authKey;
     if (!restart && this.teams.client) return;
     this.preview = null;
     this.tab = "posts";
@@ -5127,8 +5766,14 @@ var TeamsApp = class extends LitElement {
     this.meetingForm = this.meetingDetails = null;
     this.settingsOpen = false;
     this.openRequest++;
-    const named = this.userName ? { id: this.userId || loadIdentity()?.id || crypto.randomUUID(), name: this.userName } : this.identity ?? loadIdentity();
-    if (this.userName && !this.userId) saveIdentity(named);
+    if (waiting) return this.teams.stop();
+    const account = this.signIn.session;
+    const remembered = this.identity ?? loadIdentity();
+    const named = account ? {
+      id: account.userId,
+      name: this.userName || (remembered?.id === account.userId ? remembered.name : account.userId)
+    } : this.userName ? { id: this.userId || loadIdentity()?.id || crypto.randomUUID(), name: this.userName } : remembered;
+    if (this.userName && !this.userId && !account) saveIdentity(named);
     if (!named) return this.teams.stop();
     const workspaceId = /^[\w-]{1,100}$/u.test(this.workspaceId) ? this.workspaceId : "demo";
     this.themeStorageKey = `teams:theme:${encodeURIComponent(workspaceId)}:${encodeURIComponent(named.id)}`;
@@ -5142,7 +5787,7 @@ var TeamsApp = class extends LitElement {
     this.teams.start({
       workspaceId,
       user: named,
-      config: this.resolveConfig(),
+      config: this.signIn.apply(base),
       storage: safeStorage,
       ...this.uploadFile ? { uploadFile: this.uploadFile } : {}
     });
@@ -5153,6 +5798,7 @@ var TeamsApp = class extends LitElement {
   updated() {
     this.setAttribute("data-chat-density", this.chatDensity);
     const state = this.teams.state;
+    this.signIn.watchConnection(state?.status === "connected", this.resolveConfig());
     if (state?.channels.some((c) => c.id === state.selectedChannelId))
       this.lastChannelId = state.selectedChannelId;
     if (state?.thread && document.visibilityState === "visible" && this.renderRoot.querySelector(".thread-pane"))
@@ -5223,12 +5869,12 @@ var TeamsApp = class extends LitElement {
         return;
       }
       popout?.close();
-      this.notify("Allow popups to open this file in a browser tab");
+      this.notify(this.t("app.allowPopups"));
       return;
     }
     popout?.close();
     if (url) this.preview = detail;
-    else this.notify("This file was shared by name only");
+    else this.notify(this.t("app.nameOnly"));
   }
   /** Preview a host-provided website or file without changing shared conversation state. */
   previewContent(detail) {
@@ -5258,6 +5904,7 @@ var TeamsApp = class extends LitElement {
     clearTimeout(this.highlightTimer);
     this.stopActivity?.();
     this.stopActivity = void 0;
+    this.signIn.dispose();
     super.disconnectedCallback();
   }
   createChannel() {
@@ -5325,7 +5972,7 @@ var TeamsApp = class extends LitElement {
     this.settingsOpen = false;
     await this.updateComplete;
     if (!this.isConnected || this.settingsOpen) return;
-    this.renderRoot.querySelector('office-ui-menu-button[label="Settings and more"]')?.shadowRoot?.querySelector("button")?.focus();
+    this.renderRoot.querySelector("office-ui-menu-button.settings-menu")?.shadowRoot?.querySelector("button")?.focus();
   }
   applyTheme() {
     if (this.theme === "system") this.removeAttribute("data-office-theme");
@@ -5344,7 +5991,8 @@ var TeamsApp = class extends LitElement {
 							.detail=${this.popout}
 							@teams-preview-close=${() => globalThis.close()}
 						></teams-content-preview>
-					</div>` : html`<p role="alert">The file preview link is invalid.</p>`;
+					</div>` : html`<p role="alert">${this.t("app.invalidPreview")}</p>`;
+    if (this.signIn.phase !== "open") return this.signInScreen();
     const s = this.teams.state;
     if (!s) return this.welcome();
     return html`
@@ -5354,14 +6002,14 @@ var TeamsApp = class extends LitElement {
 				@office-chat-open-tab=${(event) => {
       if (this.teams.state?.tabs.some((entry) => entry.id === event.detail.tabId))
         this.selectTab(event.detail.tabId);
-      else this.notify("This tab is no longer available in this channel");
+      else this.notify(this.t("app.tabGone"));
     }}
 			>
 				${this.topbar(s)}
 				<div class="body">
 					<office-ui-app-rail
 						.hideLabels=${!this.showAppNames}
-						.items=${RAIL.map((i) => ({ ...i, ...i.id === "calls" && s.channels.some((c) => c.live) ? { badge: s.channels.filter((c) => c.live).length } : {}, ...i.id === "activity" && s.activityUnread ? { badge: s.activityUnread } : {}, ...i.id === "chat" && s.chats.some((c) => c.unread) ? { badge: s.chats.reduce((n, c) => n + c.unread, 0) } : {} }))}
+						.items=${RAIL.map((i) => ({ ...i, label: this.t(i.label), ..."shortLabel" in i ? { shortLabel: this.t(i.shortLabel) } : {}, ...i.id === "calls" && s.channels.some((c) => c.live) ? { badge: s.channels.filter((c) => c.live).length } : {}, ...i.id === "activity" && s.activityUnread ? { badge: s.activityUnread } : {}, ...i.id === "chat" && s.chats.some((c) => c.unread) ? { badge: s.chats.reduce((n, c) => n + c.unread, 0) } : {} }))}
 						selected=${this.rail}
 						@office-rail-select=${(e) => {
       if (!this.closePreview()) return;
@@ -5465,6 +6113,18 @@ var TeamsApp = class extends LitElement {
 			</div>
 		`;
   }
+  signInScreen() {
+    const flow = this.signIn;
+    return html`<teams-sign-in
+			.userId=${flow.userId}
+			.notice=${flow.notice}
+			.error=${flow.error}
+			.retryAfter=${flow.retryAfterSec}
+			?busy=${flow.busy}
+			?checking=${flow.phase === "checking"}
+			@teams-sign-in-submit=${(event) => void flow.submit(this.resolveConfig(), event.detail.userId, event.detail.credential)}
+		></teams-sign-in>`;
+  }
   welcome() {
     return html`
 			<div class="welcome">
@@ -5479,17 +6139,17 @@ var TeamsApp = class extends LitElement {
     }}
 				>
 					<span class="logo">T</span>
-					<h1>Welcome to Teams</h1>
-					<p>Pick the name your colleagues will see.</p>
+					<h1>${this.t("welcome.title")}</h1>
+					<p>${this.t("welcome.pickName")}</p>
 					<input
 						name="name"
-						placeholder="Your name"
-						aria-label="Your name"
+						placeholder=${this.t("welcome.yourName")}
+						aria-label=${this.t("welcome.yourName")}
 						maxlength="40"
 						autocomplete="name"
 						required
 					/>
-					<button type="submit">Continue</button>
+					<button type="submit">${this.t("welcome.continue")}</button>
 				</form>
 			</div>
 		`;
@@ -5497,17 +6157,17 @@ var TeamsApp = class extends LitElement {
   topbar(s) {
     return html`
 			<header class="topbar">
-				<div class="brand"><span class="logo">T</span><span>Teams</span></div>
+				<div class="brand"><span class="logo">T</span><span>${this.t("rail.teams")}</span></div>
 				<div class="search">
 					<input
 						type="search"
-						placeholder="Search messages"
-						aria-label="Search messages"
+						placeholder=${this.t("search.messages")}
+						aria-label=${this.t("search.messages")}
 						.value=${s.searchQuery}
 						@input=${(e) => this.teams.client?.search(e.target.value)}
 					/>
-					${s.searchQuery ? html`<ul class="results" role="listbox" aria-label="Search results">
-									${s.searchResults.length === 0 ? html`<li class="none">No results</li>` : s.searchResults.map(
+					${s.searchQuery ? html`<ul class="results" role="listbox" aria-label=${this.t("search.results")}>
+									${s.searchResults.length === 0 ? html`<li class="none">${this.t("search.none")}</li>` : s.searchResults.map(
       (h) => html`<li>
 															<button
 																type="button"
@@ -5520,8 +6180,7 @@ var TeamsApp = class extends LitElement {
 															>
 																<strong>${h.message.authorName}</strong>
 																<span class="in"
-																	>in
-																	${s.chats.some((c) => c.id === h.channelId) ? "" : "# "}${h.channelName}</span
+																	>${this.t("search.in", { where: `${s.chats.some((c) => c.id === h.channelId) ? "" : "# "}${h.channelName}` })}</span
 																>
 																<span class="snippet">${h.message.text.slice(0, 100)}</span>
 															</button>
@@ -5531,17 +6190,23 @@ var TeamsApp = class extends LitElement {
 				</div>
 				<div class="me">
 					<office-ui-menu-button
-						label="Settings and more"
+						class="settings-menu"
+						label=${this.t("app.settingsAndMore")}
 						icon="more"
 						icon-only
 						@office-command=${(event) => {
       if (event.detail.command === "teams-settings") this.askSettings();
     }}
 					>
-						<office-ui-menu-item label="Settings" command="teams-settings"></office-ui-menu-item>
+						<office-ui-menu-item
+							label=${this.t("settings.title")}
+							command="teams-settings"
+						></office-ui-menu-item>
 					</office-ui-menu-button>
 					<teams-profile-menu
 						.state=${s}
+						.account=${this.signIn.session?.userId ?? ""}
+						@teams-sign-out=${() => void this.signIn.signOut(this.resolveConfig())}
 						@teams-profile-status=${(event) => {
       const { availability, duration } = event.detail;
       if (isPresenceStatus(availability))
@@ -5568,7 +6233,7 @@ var TeamsApp = class extends LitElement {
   activityToastView(item) {
     return html`<div class="activity-toast" role="status" data-kind=${item.kind}>
 			<span class="toast-text"
-				><strong>${describeActivity(item)}</strong
+				><strong>${describeActivityIn(item, this.i18n)}</strong
 				><span class="toast-preview">${item.preview}</span></span
 			>
 			<button
@@ -5579,9 +6244,13 @@ var TeamsApp = class extends LitElement {
       else void this.openActivity(item.id);
     }}
 			>
-				View
+				${this.t("app.view")}
 			</button>
-			<button type="button" aria-label="Dismiss" @click=${() => this.dismissToast(item.id)}>
+			<button
+				type="button"
+				aria-label=${this.t("app.dismiss")}
+				@click=${() => this.dismissToast(item.id)}
+			>
 				${icon("close")}
 			</button>
 		</div>`;
@@ -5607,7 +6276,7 @@ var TeamsApp = class extends LitElement {
 					class="show-calendar"
 					@click=${() => this.mobileView = "conversation"}
 				>
-					${icon("calendar")} Open calendar
+					${icon("calendar")} ${this.t("app.openCalendar")}
 				</button>`;
     if (this.rail === "activity")
       return html`<office-ui-activity-feed
@@ -5621,7 +6290,7 @@ var TeamsApp = class extends LitElement {
     if (this.rail === "calls") {
       const live2 = s.channels.filter((c) => c.live);
       return html`
-				<h2>Calls</h2>
+				<h2>${this.t("rail.calls")}</h2>
 				<ul class="plain">
 					${s.channels.map(
         (c) => html`<li>
@@ -5631,17 +6300,16 @@ var TeamsApp = class extends LitElement {
 									class=${c.live ? "join live" : "join"}
 									@click=${() => this.startMeeting(c.id)}
 								>
-									${c.live ? "Join" : "Meet now"}
+									${this.t(c.live ? "call.join" : "call.meetNow")}
 								</button>
 							</li>`
       )}
 				</ul>
-				${live2.length === 0 ? html`<p class="hint">Nobody is in a call right now.</p>` : nothing}
+				${live2.length === 0 ? html`<p class="hint">${this.t("app.nobodyInCall")}</p>` : nothing}
 			`;
     }
     return html`
 			<office-ui-channel-list
-				heading="Channels"
 				selected-id=${s.selectedChannelId}
 				.channels=${s.channels}
 				@office-channel-select=${(e) => this.selectChannel(e.detail.id)}
@@ -5651,7 +6319,12 @@ var TeamsApp = class extends LitElement {
   }
   main(s) {
     if (this.rail === "drafts" && this.teams.client)
-      return draftList(s, this.teams.client, (context) => void this.resumeDraft(context));
+      return draftList(
+        s,
+        this.teams.client,
+        (context) => void this.resumeDraft(context),
+        this.i18n
+      );
     if (this.preview)
       return html`<teams-content-preview
 				.detail=${this.preview}
@@ -5670,7 +6343,8 @@ var TeamsApp = class extends LitElement {
         this.followedUnreadOnly,
         (value) => {
           this.followedUnreadOnly = value;
-        }
+        },
+        this.i18n
       );
     if (s.call && this.meeting) return this.meetingView(s);
     if (this.rail === "calendar") return this.calendarMain(s);
@@ -5678,7 +6352,7 @@ var TeamsApp = class extends LitElement {
       return this.chatEmpty();
     return html`
 			${s.call && !this.meeting ? html`<div class="callbar">
-							You are in a call in ${this.callHeading(s.call)}
+							${this.t("app.inCall", { where: this.callHeading(s.call) })}
 							<button
 								type="button"
 								@click=${() => {
@@ -5687,7 +6361,7 @@ var TeamsApp = class extends LitElement {
       } else if (this.selectChannel(s.call.channelId)) this.meeting = true;
     }}
 							>
-								Return to call
+								${this.t("app.returnToCall")}
 							</button>
 						</div>` : nothing}
 			${this.conversation(s)}
@@ -5702,21 +6376,25 @@ var TeamsApp = class extends LitElement {
     if (sharedTab) this.retainedTab = sharedTab;
     const activeTab = sharedTab ?? (this.retainedTab?.id === this.tab && this.retainedTab.channelId === s.selectedChannelId ? this.retainedTab : void 0);
     return html`
-			${compact ? nothing : chat ? chatHeader(chat, {
-      back: () => this.mobileView = "list",
-      call: () => this.startMeeting(),
-      people: () => this.chatPeople = true
-    }) : html`<header class="channel-head">
+			${compact ? nothing : chat ? chatHeader(
+      chat,
+      {
+        back: () => this.mobileView = "list",
+        call: () => this.startMeeting(),
+        people: () => this.chatPeople = true
+      },
+      this.i18n
+    ) : html`<header class="channel-head">
 								<button
 									type="button"
 									class="back"
-									aria-label="Back to channels"
-									title="Back to channels"
+									aria-label=${this.t("app.backToChannels")}
+									title=${this.t("app.backToChannels")}
 									@click=${() => this.mobileView = "list"}
 								>
 									${icon("back")}
 								</button>
-								<h1><span class="hash">#</span> ${channel?.name ?? "No channel yet"}</h1>
+								<h1><span class="hash">#</span> ${channel?.name ?? this.t("app.noChannel")}</h1>
 								<nav class="tabs" role="tablist">
 									${["posts", "files"].map(
       (t) => html`<button
@@ -5725,15 +6403,15 @@ var TeamsApp = class extends LitElement {
 												aria-selected=${String(this.tab === t)}
 												@click=${() => this.selectTab(t)}
 											>
-												${t === "posts" ? "Posts" : "Shared"}
+												${this.t(t === "posts" ? "app.posts" : "app.shared")}
 											</button>`
     )}
 									${s.tabs.map((t) => html`<button type="button" role="tab" aria-selected=${String(this.tab === t.id)} @click=${() => this.selectTab(t.id)}>${t.name}</button>`)}
 								</nav>
 								<button
 									type="button"
-									aria-label="Add tab"
-									title="Add tab"
+									aria-label=${this.t("app.addTab")}
+									title=${this.t("app.addTab")}
 									?disabled=${!channel}
 									@click=${() => this.addingTab = !this.addingTab}
 								>
@@ -5742,8 +6420,8 @@ var TeamsApp = class extends LitElement {
 								${sharedTab ? html`<button
 												type="button"
 												data-tab-conversation
-												aria-label="Show tab conversation"
-												title="Show tab conversation"
+												aria-label=${this.t("app.tabConversation")}
+												title=${this.t("app.tabConversation")}
 												aria-expanded=${String(s.thread?.root.tabId === sharedTab.id)}
 												@click=${async () => {
       if (s.thread?.root.tabId === sharedTab.id) {
@@ -5751,7 +6429,7 @@ var TeamsApp = class extends LitElement {
         return;
       }
       if (!c?.openTabConversation(sharedTab.id)) {
-        this.notify("Could not open this tab conversation");
+        this.notify(this.t("app.tabConversationFailed"));
         return;
       }
       await Promise.resolve();
@@ -5762,17 +6440,17 @@ var TeamsApp = class extends LitElement {
 												${icon("chat")}
 											</button>` : nothing}
 								${sharedTab?.createdBy === s.user.id ? html`<office-ui-menu-button
-												label="Tab options"
+												label=${this.t("app.tabOptions")}
 												icon="more"
 												icon-only
 												@office-command=${(event) => {
       if (event.detail.command === "rename-tab") {
-        const name = globalThis.prompt?.("Tab name", sharedTab.name)?.trim();
+        const name = globalThis.prompt?.(this.t("app.tabNamePrompt"), sharedTab.name)?.trim();
         if (name) c?.renameTab(sharedTab.id, name);
       } else if (event.detail.command === "remove-tab") {
         if (!this.canLeaveContent()) return;
         if (globalThis.confirm?.(
-          `Remove ${sharedTab.name} from this channel?`
+          this.t("app.confirmRemoveTab", { name: sharedTab.name })
         ) === true && c?.removeTab(sharedTab.id)) {
           this.openRequest++;
           this.preview = null;
@@ -5781,16 +6459,16 @@ var TeamsApp = class extends LitElement {
       }
     }}
 												><office-ui-menu-item
-													label="Rename tab"
+													label=${this.t("app.renameTab")}
 													command="rename-tab"
 												></office-ui-menu-item
 												><office-ui-menu-item
-													label="Remove tab"
+													label=${this.t("app.removeTab")}
 													command="remove-tab"
 												></office-ui-menu-item
 											></office-ui-menu-button>` : nothing}
 								<span class="topic">${channel?.topic ?? ""}</span>
-								<div class="people" aria-label="People online">
+								<div class="people" aria-label=${this.t("app.peopleOnline")}>
 									${s.people.slice(0, 5).map((p) => html`<office-ui-avatar size="sm" name=${p.name} seed=${p.id} color=${p.color} presence=${p.availability}></office-ui-avatar>`)}
 									${s.people.length > 5 ? html`<span class="more">+${s.people.length - 5}</span>` : nothing}
 								</div>
@@ -5800,11 +6478,11 @@ var TeamsApp = class extends LitElement {
 									?disabled=${!channel}
 									@click=${() => this.startMeeting()}
 								>
-									${s.channels.find((x) => x.id === s.selectedChannelId)?.live ? "Join call" : "Meet now"}
+									${this.t(s.channels.find((x) => x.id === s.selectedChannelId)?.live ? "call.joinCall" : "call.meetNow")}
 								</button>
 							</header>`}
-			${c ? messageTransfers(s, c) : nothing}
-			${activeTab && !sharedTab && !compact ? html`<p role="status">This tab was removed from the channel. Your open copy remains here until you close it.</p>` : nothing}
+			${c ? messageTransfers(s, c, this.i18n) : nothing}
+			${activeTab && !sharedTab && !compact ? html`<p role="status">${this.t("app.tabRemoved")}</p>` : nothing}
 			${activeTab && !compact ? html`<div
 							class="conversation-grid tab-conversation"
 							data-thread=${String(s.thread?.root.tabId === activeTab.id)}
@@ -5823,7 +6501,8 @@ var TeamsApp = class extends LitElement {
       c,
       (attachment) => void this.openFile(attachment),
       () => void this.closeThread(),
-      this.highlightId
+      this.highlightId,
+      this.i18n
     ) : nothing}
 						</div>` : this.tab === "files" && !compact ? this.fileList(s.files, s) : html`<div class="conversation-grid" data-thread=${String(!!s.thread && !compact)}>
 								<div class="conversation-main">
@@ -5846,7 +6525,7 @@ var TeamsApp = class extends LitElement {
 										@office-chat-thread=${(e) => void this.openThread(e.detail.messageId)}
 										@office-chat-reply=${(e) => compact ? c?.startReply(e.detail.messageId) : void this.openThread(e.detail.messageId, "reply")}
 										@office-chat-edit=${(e) => compact ? c?.startEdit(e.detail.messageId) : void this.openThread(e.detail.messageId, "edit")}
-										@office-chat-delete=${(e) => globalThis.confirm?.("Delete this message?") !== false && c?.deleteMessage(e.detail.messageId)}
+										@office-chat-delete=${(e) => globalThis.confirm?.(this.t("chat.confirmDelete")) !== false && c?.deleteMessage(e.detail.messageId)}
 										@office-chat-open-file=${(e) => this.openFile(e.detail.attachment)}
 									></office-ui-chat-list>
 									${s.thread && !compact ? nothing : html`<office-ui-chat-composer
@@ -5859,7 +6538,7 @@ var TeamsApp = class extends LitElement {
 													.mentionTargets=${s.mentionTargets}
 													@office-chat-draft=${(e) => c?.setDraft(e.detail)}
 													?disabled=${!channel}
-													placeholder=${chat ? `Message ${chat.title}` : channel ? `Message # ${channel.name}` : "Create a channel first"}
+													placeholder=${chat ? this.t("app.messageTo", { name: chat.title }) : channel ? this.t("app.messageTo", { name: `# ${channel.name}` }) : this.t("app.createChannelFirst")}
 													@office-chat-typing=${() => c?.notifyTyping()}
 													@office-chat-cancel=${() => c?.cancelCompose()}
 													@office-chat-send=${(e) => void c?.send(e.detail)}
@@ -5871,7 +6550,8 @@ var TeamsApp = class extends LitElement {
       c,
       (attachment) => void this.openFile(attachment),
       () => void this.closeThread(),
-      this.highlightId
+      this.highlightId,
+      this.i18n
     ) : nothing}
 							</div>`}
 		`;
@@ -5941,9 +6621,9 @@ var TeamsApp = class extends LitElement {
   }
   chatEmpty() {
     return html`<div class="empty-main">
-			<h1>Chat</h1>
-			<p>Pick a chat from the list, or start a new one.</p>
-			<button type="button" @click=${() => this.newChat = true}>New chat</button>
+			<h1>${this.t("rail.chat")}</h1>
+			<p>${this.t("app.pickChat")}</p>
+			<button type="button" @click=${() => this.newChat = true}>${this.t("chat.new")}</button>
 		</div>`;
   }
   commitChat(ids, name) {
@@ -5976,8 +6656,7 @@ var TeamsApp = class extends LitElement {
 				@teams-chat-add=${(e) => c?.addToChat(e.detail.id, e.detail.userIds)}
 				@teams-chat-remove=${(e) => c?.removeFromChat(e.detail.id, e.detail.userId)}
 				@teams-chat-leave=${(e) => {
-      if (globalThis.confirm?.("Leave this chat? You will stop receiving its messages.") === false)
-        return;
+      if (globalThis.confirm?.(this.t("chatPeople.confirmLeave")) === false) return;
       if (c?.leaveChat(e.detail.id)) {
         this.chatPeople = false;
         this.mobileView = "list";
@@ -5992,7 +6671,7 @@ var TeamsApp = class extends LitElement {
     return html`
 			<div class="calendar-back">
 				<button type="button" @click=${() => this.mobileView = "list"}>
-					${icon("back")} Upcoming meetings
+					${icon("back")} ${this.t("app.upcoming")}
 				</button>
 			</div>
 			<office-ui-calendar-view
@@ -6075,14 +6754,14 @@ var TeamsApp = class extends LitElement {
         if (c?.cancelOccurrence(meetingId, recurrenceId)) this.meetingDetails = null;
         return;
       }
-      const ask = details?.repeat === "none" ? "Cancel this meeting for everyone?" : "Cancel every event in this series?";
+      const ask = details?.repeat === "none" ? this.t("details.confirmCancel") : this.t("details.confirmCancelSeries");
       if (globalThis.confirm?.(ask) === false) return;
       if (c?.cancelMeeting(meetingId)) this.meetingDetails = null;
     }}
 				@teams-meeting-ics=${(e) => {
       const file = c?.meetingIcs(e.detail.meetingId);
       if (file && !downloadText(file.name, file.text))
-        this.notify("Could not start the download");
+        this.notify(this.t("app.downloadFailed"));
     }}
 				@teams-dialog-close=${() => this.meetingDetails = null}
 			></teams-meeting-details>
@@ -6112,7 +6791,7 @@ var TeamsApp = class extends LitElement {
     const message = Array.from(
       list?.shadowRoot?.querySelectorAll("[data-message-id]") ?? []
     ).find((element) => element.dataset.messageId === root);
-    message?.querySelector('.thread-link, button[aria-label="Reply"]')?.focus();
+    message?.querySelector('.thread-link, [data-action="reply"]')?.focus();
   }
   pinFile(file) {
     if (!this.selectChannel(file.channelId ?? this.teams.state?.selectedChannelId ?? "")) return;
@@ -6122,7 +6801,7 @@ var TeamsApp = class extends LitElement {
       { postToChannel: true }
     );
     if (tab) this.selectTab(tab.id);
-    else this.notify("This file needs an uploaded URL before it can be pinned");
+    else this.notify(this.t("app.pinNeedsUrl"));
   }
   saveCopyFor(detail, state) {
     const client = this.teams.client;
@@ -6146,8 +6825,8 @@ var TeamsApp = class extends LitElement {
   }
   allFiles(s) {
     return html`<header class="channel-head">
-				<h1>Files</h1>
-				<span class="topic">Shared across your channels</span>
+				<h1>${this.t("rail.files")}</h1>
+				<span class="topic">${this.t("app.sharedAcross")}</span>
 			</header>
 			${this.fileList(s.allFiles, s)}`;
   }
@@ -6195,7 +6874,7 @@ var TeamsApp = class extends LitElement {
     }))}
 					></office-ui-call-grid>
 					${this.panel === "chat" ? html`<aside class="panel chat">${this.conversation(s, true)}</aside>` : this.panel === "people" ? html`<aside class="panel people-panel">
-										<h2>People (${call.participants.length})</h2>
+										<h2>${this.t("app.peopleCount", { count: call.participants.length })}</h2>
 										<ul class="plain">
 											${call.participants.map(
       (p) => html`<li>
@@ -6204,8 +6883,10 @@ var TeamsApp = class extends LitElement {
 															name=${p.name}
 															seed=${p.id}
 														></office-ui-avatar>
-														<span>${p.name}${p.self ? " (you)" : ""}</span>
-														${p.state.hand ? html`<span title="Hand raised">✋</span>` : nothing}
+														<span
+															>${p.self ? this.t("common.nameYou", { name: p.name }) : p.name}</span
+														>
+														${p.state.hand ? html`<span title=${this.t("call.handRaised")}>✋</span>` : nothing}
 													</li>`
     )}
 										</ul>
@@ -6220,7 +6901,7 @@ function defineTeamsApp(registry = globalThis.customElements) {
 }
 
 // src/teams/app/bind.ts
-var SCALARS = ["workspaceId", "userName", "userId"];
+var SCALARS = ["workspaceId", "userName", "userId", "locale"];
 function applyTeamsProps(el, props, prev = {}) {
   for (const key of SCALARS) {
     if (props[key] === prev[key]) continue;
@@ -6283,4 +6964,4 @@ function registerTeams() {
   defineCalendarAgenda();
 }
 
-export { EMOJI, OfficeUiActivityFeed, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCalendarAgenda, OfficeUiCalendarView, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiChatSidebar, OfficeUiPeoplePicker, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, XLSX_EDITOR_EVENTS, activityTime, announceFileCommand, applyTeamsProps, blobFor, colorFor, createTeams, dayLabel, defineActivityFeed, defineAppRail, defineAvatar, defineCalendarAgenda, defineCalendarView, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, defineChatSidebar, definePeoplePicker, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, downloadBytes, emit, emitEvent, formatElapsed, formatSize, formatTime, formatWhen, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, pickFile, registerTeams, safeStorage, saveConfig, saveExtension, saveIdentity, withExtension, withStyles };
+export { EMOJI, OfficeUiActivityFeed, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCalendarAgenda, OfficeUiCalendarView, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiChatSidebar, OfficeUiPeoplePicker, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, XLSX_EDITOR_EVENTS, activityTime, announceFileCommand, applyTeamsProps, blobFor, colorFor, createTeams, dayKind, dayLabel, defineActivityFeed, defineAppRail, defineAvatar, defineCalendarAgenda, defineCalendarView, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, defineChatSidebar, definePeoplePicker, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, downloadBytes, emit, emitEvent, formatElapsed, formatSize, formatTime, formatWhen, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, pickFile, registerTeams, safeStorage, saveConfig, saveExtension, saveIdentity, withExtension, withStyles };