ooxml-ui 1.0.0 → 1.2.0

package/dist/{chunk-FLHM5Q4O.js → chunk-AYXFLBSV.js}

@@ -1,8 +1,8 @@
-import { THEME_CSS, installOfficeUiTheme } from './chunk-X7RINDJQ.js';
-import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-T3HB5LMH.js';
+import { THEME_CSS, installOfficeUiTheme } from './chunk-JAJFLFAV.js';
+import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-7FNDOWTX.js';
 import { registerIcon, getIcon } from './chunk-BOX43CZD.js';
-import { initialsOf, definePresence } from './chunk-OXKWNNNJ.js';
-import { definer, OfficeElement, controlStyles } from './chunk-ZV2Z4IWH.js';
+import { initialsOf, definePresence } from './chunk-VUB44CAJ.js';
+import { definer, OfficeElement, controlStyles } from './chunk-YK2DPYMU.js';
 import { html, nothing, LitElement, unsafeCSS, svg } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { live } from 'lit/directives/live.js';
@@ -395,7 +395,7 @@ var OfficeUiChannelList = class extends TeamsElement {
 var defineChannelList = definer("office-ui-channel-list", () => OfficeUiChannelList);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/chat-composer.css?raw
-var chat_composer_default = ":host {\n	display: block;\n	padding: 0 var(--office-space-5) var(--office-space-4);\n}\n.typing {\n	min-height: 1.4em;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.box {\n	position: relative;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-block-end: var(--office-border-width-thick) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-field-background);\n}\n.box:focus-within {\n	border-block-end-color: var(--office-teams-brand);\n}\n.banner {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n}\ntextarea {\n	display: block;\n	width: 100%;\n	min-height: 3.2em;\n	max-height: 12em;\n	padding: var(--office-space-3);\n	border: 0;\n	outline: 0;\n	resize: none;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	field-sizing: content;\n}\n.bar {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2) var(--office-space-2);\n}\n.spacer {\n	flex: 1;\n}\n.bar button,\n.banner button,\n.pending button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\n.bar button:hover:not(:disabled),\n.banner button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.bar .send:not(:disabled) {\n	color: var(--office-teams-brand);\n}\n.pending {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\n.pending button {\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-foreground);\n}\n.emoji {\n	position: relative;\n}\n.picker {\n	position: absolute;\n	inset-block-end: calc(100% + var(--office-space-1));\n	inset-inline-start: 0;\n	z-index: 2;\n	display: grid;\n	grid-template-columns: repeat(5, 1fr);\n	gap: var(--office-space-0);\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	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.picker button {\n	font-size: 1.3em;\n}\n";
+var chat_composer_default = ":host {\n	display: block;\n	min-width: 0;\n	flex: none;\n	padding: 0 var(--office-space-5) var(--office-space-4);\n}\n.typing {\n	min-height: 1.4em;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.box {\n	position: relative;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-block-end: var(--office-border-width-thick) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-field-background);\n}\n.box:focus-within {\n	border-block-end-color: var(--office-teams-brand);\n}\n.banner {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n}\ntextarea {\n	display: block;\n	width: 100%;\n	min-height: 3.2em;\n	max-height: 12em;\n	padding: var(--office-space-3);\n	border: 0;\n	outline: 0;\n	resize: none;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	overflow-y: auto;\n	line-height: 1.5;\n}\n.bar {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2) var(--office-space-2);\n}\n.spacer {\n	flex: 1;\n}\n.bar button,\n.banner button,\n.pending button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\n.bar button:hover:not(:disabled),\n.banner button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.bar .send:not(:disabled) {\n	color: var(--office-teams-brand);\n}\n.pending {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\n.pending button {\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-foreground);\n}\n.emoji {\n	position: relative;\n}\n.picker {\n	position: absolute;\n	inset-block-end: calc(100% + var(--office-space-1));\n	inset-inline-start: 0;\n	z-index: 2;\n	display: grid;\n	grid-template-columns: repeat(5, 1fr);\n	gap: var(--office-space-0);\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	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.picker button {\n	font-size: 1.3em;\n}\n\ntextarea:focus-visible {\n	outline: none;\n}\n.box:focus-within {\n	border-color: var(--office-teams-brand);\n}\n.pending {\n	max-height: 7em;\n	overflow-y: auto;\n	padding-block-end: var(--office-space-2);\n}\n.pending li {\n	min-width: 0;\n	max-width: 100%;\n}\n.pending button {\n	max-width: 100%;\n	height: auto;\n	min-height: 2.4em;\n}\n.file-label {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	min-width: 0;\n}\n@media (max-width: 600px) {\n	:host {\n		padding: 0 var(--office-space-2) var(--office-space-2);\n	}\n	textarea {\n		font-size: 16px;\n		min-height: 3em;\n	}\n	.bar button {\n		min-width: 36px;\n		height: 36px;\n	}\n}\n";
 var EMOJI = [
   "\u{1F600}",
   "\u{1F604}",
@@ -445,7 +445,19 @@ var OfficeUiChatComposer = class extends TeamsElement {
     this.missingFiles = [];
     this.emojiOpen = false;
   }
+  focusMessage() {
+    void this.updateComplete.then(
+      () => this.renderRoot.querySelector("textarea")?.focus({ preventScroll: true })
+    );
+  }
+  resizeMessage() {
+    const area = this.renderRoot.querySelector("textarea");
+    if (!area) return;
+    area.style.height = "auto";
+    area.style.height = `${Math.min(area.scrollHeight, 160)}px`;
+  }
   updated(changed) {
+    if (changed.has("value")) this.resizeMessage();
     if (changed.has("replyingTo") || changed.has("editing")) {
       if (this.replyingTo !== null || this.editing)
         this.renderRoot.querySelector("textarea")?.focus();
@@ -461,6 +473,7 @@ var OfficeUiChatComposer = class extends TeamsElement {
     this.files = [];
     this.emojiOpen = false;
     this.fire("office-chat-send", { text, files });
+    this.focusMessage();
   }
   onInput(event) {
     this.value = event.target.value;
@@ -472,6 +485,11 @@ var OfficeUiChatComposer = class extends TeamsElement {
     }
   }
   onKeydown(event) {
+    if (event.key === "Escape" && this.emojiOpen) {
+      this.emojiOpen = false;
+      this.focusMessage();
+      return;
+    }
     if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
       event.preventDefault();
       this.submit();
@@ -481,12 +499,17 @@ var OfficeUiChatComposer = class extends TeamsElement {
   }
   pick(event) {
     const input = event.target;
-    this.files = [...this.files, ...Array.from(input.files ?? [])].slice(0, MAX_FILES);
+    this.addFiles(Array.from(input.files ?? []));
     input.value = "";
+  }
+  addFiles(files) {
+    if (this.disabled) return;
+    this.files = [...this.files, ...files].slice(0, MAX_FILES);
     this.missingFiles = this.missingFiles.filter(
       (name) => !this.files.some((file) => file.name === name)
     );
     this.saveDraft();
+    this.focusMessage();
   }
   saveDraft() {
     this.fire("office-chat-draft", {
@@ -504,7 +527,22 @@ var OfficeUiChatComposer = class extends TeamsElement {
     const banner = this.editing ? "Editing message" : this.replyingTo !== null ? `Replying to ${this.replyingTo}` : "";
     return html`
 			<div class="typing" aria-live="polite">${this.typingLine()}</div>
-			<div class="box">
+			<div
+				class="box"
+				@dragover=${(event) => {
+      if (event.dataTransfer?.types.includes("Files")) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }}
+				@drop=${(event) => {
+      if (event.dataTransfer?.files.length) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.addFiles([...event.dataTransfer.files]);
+      }
+    }}
+			>
 				${this.missingFiles.length ? html`<div role="status">
 								Reattach or discard these draft attachments before sending:
 								<ul>
@@ -541,6 +579,12 @@ var OfficeUiChatComposer = class extends TeamsElement {
 					placeholder=${this.placeholder}
 					?disabled=${this.disabled}
 					@input=${this.onInput}
+					@paste=${(event) => {
+      if (event.clipboardData?.files.length) {
+        event.preventDefault();
+        this.addFiles([...event.clipboardData.files]);
+      }
+    }}
 					@keydown=${this.onKeydown}
 				></textarea>
 				${this.files.length ? html`<ul class="pending">
@@ -551,10 +595,11 @@ var OfficeUiChatComposer = class extends TeamsElement {
 											aria-label=${`Remove ${f.name}`}
 											@click=${() => {
         this.files = this.files.filter((_, j) => j !== i);
+        this.focusMessage();
         this.saveDraft();
       }}
 										>
-											${f.name} ${icon("close")}
+											<span class="file-label" title=${f.name}>${f.name}</span>${icon("close")}
 										</button>
 									</li>`
     )}
@@ -586,7 +631,13 @@ var OfficeUiChatComposer = class extends TeamsElement {
 												type="button"
 												role="menuitem"
 												@click=${() => {
-        this.value += e;
+        const area = this.renderRoot.querySelector("textarea");
+        const start = area?.selectionStart ?? this.value.length, end = area?.selectionEnd ?? start;
+        this.value = this.value.slice(0, start) + e + this.value.slice(end);
+        void this.updateComplete.then(() => {
+          area?.focus({ preventScroll: true });
+          area?.setSelectionRange(start + e.length, start + e.length);
+        });
         this.saveDraft();
         this.emojiOpen = false;
         this.renderRoot.querySelector("textarea")?.focus();
@@ -915,7 +966,8 @@ var XLSX_EDITOR_EVENTS = [
   "file-command",
   "selection-change",
   "sheet-change",
-  "dirty-change"
+  "dirty-change",
+  "collaboration-change"
 ];
 var CANCELABLE = /* @__PURE__ */ new Set(["file-command"]);
 function emitEvent(target, type, detail) {
@@ -1342,7 +1394,8 @@ var TeamsChannelTab = class extends LitElement {
     embeds: { attribute: false },
     canSave: { type: Boolean },
     detail: { state: true },
-    error: { state: true }
+    error: { state: true },
+    hostOpened: { state: true }
   };
   key = "";
   owner = null;
@@ -1355,6 +1408,7 @@ var TeamsChannelTab = class extends LitElement {
     this.canSave = false;
     this.detail = null;
     this.error = "";
+    this.hostOpened = false;
   }
   updated(changed) {
     if (changed.has("tab") || changed.has("client")) void this.resolve();
@@ -1378,6 +1432,7 @@ var TeamsChannelTab = class extends LitElement {
     const generation = ++this.generation;
     this.detail = null;
     this.error = "";
+    this.hostOpened = false;
     if (!tab || !client) return;
     const attachment = tab.content.type === "file" ? tab.content.attachment : { name: tab.name, kind: "other", mime: "text/html", url: tab.content.url };
     try {
@@ -1385,6 +1440,7 @@ var TeamsChannelTab = class extends LitElement {
       if (generation !== this.generation || !this.isConnected) return;
       if (!url) throw new Error("Could not resolve the tab content");
       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";
@@ -1397,7 +1453,20 @@ var TeamsChannelTab = class extends LitElement {
       await client.saveFileCopy(tab.channelId, file, options);
     };
   }
+  openInHost() {
+    this.hostOpened = !this.dispatchEvent(
+      new CustomEvent("teams-open-file", {
+        detail: this.detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+  }
   render() {
+    if (this.hostOpened)
+      return html`<p>${this.detail?.attachment.name}</p>
+				<button type="button" @click=${() => this.openInHost()}>Open document</button>`;
     return html`${this.error ? html`<p role="alert">${this.error}</p>
 						<button
 							type="button"
@@ -1496,6 +1565,15 @@ var TeamsFileActions = class extends LitElement {
   async transfer(action) {
     if (this.busy || !this.file || !this.client) return;
     const { file, client } = this;
+    if (!this.dispatchEvent(
+      new CustomEvent("teams-file-transfer", {
+        detail: { attachment: file, action },
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    ))
+      return;
     const abort = new AbortController();
     this.abort = abort;
     this.busy = true;
@@ -2356,7 +2434,7 @@ function loadConfig() {
 var saveConfig = (config) => safeStorage.setItem("teams:config", JSON.stringify(config));
 
 // 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.navigation-toggle {\n	display: none;\n	padding: var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n}\n.navigation-toggle:hover {\n	background: var(--office-selected);\n}\n.navigation-toggle svg {\n	width: 1.3em;\n	height: 1.3em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\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@media (max-width: 56.25em) {\n	.navigation-toggle {\n		display: inline-flex;\n	}\n	.brand > .logo,\n	.brand > span:last-child {\n		display: none;\n	}\n	.channel-head .topic,\n	.channel-head .people {\n		display: none;\n	}\n	.channel-head .tabs {\n		flex-basis: 100%;\n	}\n	.body {\n		grid-template-columns: auto minmax(0, 1fr);\n	}\n	.body > .main {\n		grid-column: 2;\n	}\n	.side {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: auto minmax(0, 1fr) auto;\n	}\n}\n";
+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.navigation-toggle {\n	display: none;\n	padding: var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n}\n.navigation-toggle:hover {\n	background: var(--office-selected);\n}\n.navigation-toggle svg {\n	width: 1.3em;\n	height: 1.3em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\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@media (max-width: 56.25em) {\n	.navigation-toggle {\n		display: inline-flex;\n	}\n	.brand > .logo,\n	.brand > span:last-child {\n		display: none;\n	}\n	.channel-head .topic,\n	.channel-head .people {\n		display: none;\n	}\n	.channel-head .tabs {\n		flex-basis: 100%;\n	}\n	.body {\n		grid-template-columns: auto minmax(0, 1fr);\n	}\n	.body > .main {\n		grid-column: 2;\n	}\n	.side {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: auto minmax(0, 1fr) auto;\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";
 function threadPane(state, client, openFile, close) {
   const thread = state.thread;
   if (!thread) return nothing;
@@ -3241,7 +3319,8 @@ var TeamsApp = class extends LitElement {
     const workspaceId = /^[\w-]{1,100}$/u.test(this.workspaceId) ? this.workspaceId : "demo";
     this.themeStorageKey = `teams:theme:${encodeURIComponent(workspaceId)}:${encodeURIComponent(named.id)}`;
     const rememberedTheme = safeStorage.getItem(this.themeStorageKey);
-    this.theme = rememberedTheme === "dark" || rememberedTheme === "light" ? rememberedTheme : "system";
+    if (!this.hasAttribute("host-theme"))
+      this.theme = rememberedTheme === "dark" || rememberedTheme === "light" ? rememberedTheme : "system";
     this.applyTheme();
     this.showAppNames = safeStorage.getItem(this.themeStorageKey.replace("teams:theme:", "teams:app-names:")) !== "false";
     this.chatDensity = safeStorage.getItem(this.themeStorageKey.replace("teams:theme:", "teams:density:")) === "compact" ? "compact" : "comfy";

package/dist/{chunk-X7RINDJQ.js → chunk-JAJFLFAV.js}

@@ -1,4 +1,4 @@
-import { OFFICE_TOKENS, TOUCH } from './chunk-JFJXBYRD.js';
+import { OFFICE_TOKENS, TOUCH } from './chunk-XNCWB2X6.js';
 
 // src/theme-bridge.ts
 var SHADCN_NAMES = [

package/dist/{chunk-OXKWNNNJ.js → chunk-VUB44CAJ.js}

@@ -1,4 +1,4 @@
-import { OfficeElement, controlStyles, definer } from './chunk-ZV2Z4IWH.js';
+import { OfficeElement, controlStyles, definer } from './chunk-YK2DPYMU.js';
 import { html } from 'lit';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/presence/presence.css?raw

package/dist/{chunk-JFJXBYRD.js → chunk-XNCWB2X6.js}

@@ -158,6 +158,7 @@ var OFFICE_TOKENS = {
   "--office-launcher-height": "14px",
   "--office-tab-indicator-width": "2.5px",
   "--office-status-bar-height": "24px",
+  "--office-status-bar-separator-opacity": "1",
   "--office-tab-height": "28px",
   "--office-tab-max-width": "220px",
   "--office-zoom-slider-width": "120px",
@@ -207,6 +208,8 @@ var OFFICE_TOKENS = {
   "--office-avatar-size": "48px",
   "--office-avatar-color": "var(--office-muted-foreground, #6b7280)",
   "--office-toast-width": "360px",
+  "--office-comments-pane-width": "300px",
+  "--office-comment-avatar-size": "24px",
   "--office-account-field-width": "320px",
   // Component: galleries
   "--office-gallery-trigger-height": "24px",
@@ -225,6 +228,8 @@ var OFFICE_TOKENS = {
   "--office-title-bar-mark-size": "20px",
   "--office-title-bar-mark-background": "var(--office-accent, #2563eb)",
   "--office-title-bar-mark-foreground": "var(--office-accent-foreground, #ffffff)",
+  "--office-title-bar-name-foreground": "var(--office-title-bar-foreground, var(--office-foreground, #1f2937))",
+  "--office-title-bar-result-selected": "var(--office-selected, #e5e7eb)",
   "--office-title-bar-name-max-width": "240px",
   "--office-title-bar-name-max-width-narrow": "140px",
   "--office-title-bar-search-max-width": "448px",

package/dist/{chunk-XDUYS4KK.js → chunk-Y2E22JVO.js}

@@ -1,4 +1,4 @@
-import { OfficeElement, controlStyles, definer } from './chunk-ZV2Z4IWH.js';
+import { OfficeElement, controlStyles, definer } from './chunk-YK2DPYMU.js';
 import { html } from 'lit';
 import { hexToRgbChannels } from 'ooxml-core/color';
 import { resolveDrawingColor } from 'ooxml-core/diagram';

package/dist/{chunk-ZV2Z4IWH.js → chunk-YK2DPYMU.js}

@@ -1,4 +1,4 @@
-import { TOUCH, tok, OFFICE_TOKENS } from './chunk-JFJXBYRD.js';
+import { TOUCH, tok, OFFICE_TOKENS } from './chunk-XNCWB2X6.js';
 import { unsafeCSS, LitElement } from 'lit';
 
 // src/registry.ts
@@ -16,9 +16,12 @@ function defineOnce(registry, tag, make) {
   assertContract(registry, tag);
   if (registry.get(tag)) return;
   const ctor = make();
-  Object.defineProperty(ctor, CONTRACT_KEY, { value: CONTRACT_REVISION });
+  markContract(ctor);
   registry.define(tag, ctor);
 }
+function markContract(ctor) {
+  Object.defineProperty(ctor, CONTRACT_KEY, { value: CONTRACT_REVISION });
+}
 function browserRegistry() {
   return typeof window === "undefined" ? void 0 : window.customElements;
 }

package/dist/{chunk-4QQASR5A.js → chunk-YP5S7DTT.js}

@@ -1,8 +1,8 @@
-import { defineSmartArt } from './chunk-XDUYS4KK.js';
-import { TEAMS_TAGS, registerTeams } from './chunk-FLHM5Q4O.js';
-import { installOfficeUiTheme } from './chunk-X7RINDJQ.js';
-import { registerControls } from './chunk-T3HB5LMH.js';
-import { definePresence } from './chunk-OXKWNNNJ.js';
+import { defineSmartArt } from './chunk-Y2E22JVO.js';
+import { TEAMS_TAGS, registerTeams } from './chunk-AYXFLBSV.js';
+import { installOfficeUiTheme } from './chunk-JAJFLFAV.js';
+import { registerControls } from './chunk-7FNDOWTX.js';
+import { definePresence } from './chunk-VUB44CAJ.js';
 
 // src/index.ts
 var OFFICE_UI_TAGS = [
@@ -41,6 +41,7 @@ var OFFICE_UI_TAGS = [
   "office-ui-title-bar",
   "office-ui-ribbon-section",
   "office-ui-gallery",
+  "office-ui-comments-pane",
   "office-ui-presence",
   "office-ui-smartart",
   ...TEAMS_TAGS

package/dist/comments/comments-pane.d.ts

@@ -0,0 +1,116 @@
+import { type TemplateResult } from 'lit';
+import { OfficeElement } from '../base.js';
+import { type OfficeCommentThread, type OfficeCommentsClassNames, type OfficeCommentsLabels } from './types.js';
+/**
+ * `<office-ui-comments-pane>`: Office's comments pane, one UX for Word, Excel and PowerPoint.
+ * Threads show each comment's avatar initials, author, time and text, with Reply,
+ * Resolve/Reopen, Edit (own comments, by `currentAuthor`) and Delete, under a new-comment box.
+ * The pane never changes its threads: every action is an event and the product sets `threads`
+ * again. Arrow keys, Home and End move between threads; Enter or Space (or a click) selects one
+ * (`thread-select`) so the product can go to its anchor. Escape is left to the host.
+ *
+ * Properties: `threads`, `activeThreadId`, `readOnly` (controls shown but disabled),
+ * `listOnly` (no composer, replies or actions: a navigation list), `closable`, `addDisabled`,
+ * `currentAuthor`, `labels` (partial, English defaults), `classNames` (product hook classes),
+ * `locale` (time formatting). Events (bubbling, composed): `comment-add` `{ text }`,
+ * `comment-reply` `{ threadId, text }`, `comment-edit` `{ threadId, commentId, text }`,
+ * `comment-delete` `{ threadId, commentId }`, `thread-resolve`, `thread-reopen` and
+ * `thread-select` `{ threadId }`, `comments-close`.
+ */
+export declare class OfficeUiCommentsPane extends OfficeElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        threads: {
+            attribute: boolean;
+        };
+        activeThreadId: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        readOnly: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+            attribute: string;
+        };
+        listOnly: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+            attribute: string;
+        };
+        closable: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+        };
+        addDisabled: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+            attribute: string;
+        };
+        currentAuthor: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        labels: {
+            attribute: boolean;
+        };
+        classNames: {
+            attribute: boolean;
+        };
+        locale: {
+            type: StringConstructor;
+        };
+    };
+    threads: readonly OfficeCommentThread[];
+    activeThreadId: string | null;
+    readOnly: boolean;
+    listOnly: boolean;
+    closable: boolean;
+    addDisabled: boolean;
+    currentAuthor: string | null;
+    labels: Partial<OfficeCommentsLabels>;
+    classNames: OfficeCommentsClassNames;
+    locale: string | null;
+    private focusedId;
+    private editingId;
+    constructor();
+    private get text();
+    private get locked();
+    /** The thread that takes Tab focus: the last one focused, else the active one, else the first. */
+    private get rovingId();
+    private card;
+    /** Focus the current thread, or the new-comment box when there is none. */
+    focus(options?: FocusOptions): void;
+    private submitNew;
+    private submitReply;
+    private startEdit;
+    private stopEdit;
+    private saveEdit;
+    /** Ctrl+Enter (Cmd+Enter) posts from any box, like Office. */
+    private onBoxKey;
+    private onEditKey;
+    private select;
+    private onThreadClick;
+    private onListKey;
+    private renderActions;
+    private renderComment;
+    private renderThread;
+    protected render(): TemplateResult<1>;
+}
+export declare const defineCommentsPane: import("../registry.js").Definer;
+//# sourceMappingURL=comments-pane.d.ts.map

package/dist/comments/comments-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comments-pane.d.ts","sourceRoot":"","sources":["../../src/comments/comments-pane.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAC;AAG7D,OAAO,EAKN,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,EACzB,MAAM,SAAS,CAAC;AAIjB;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,oBAAqB,SAAQ,aAAa;IACtD,OAAgB,MAAM,4BAAsB;IAC5C,OAAgB,UAAU;;YACd,SAAS;;;YACF,SAAS;YAAsB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAKpC,SAAS;YAAoB,IAAI;;;YACxC,SAAS;;;YACL,SAAS;;;YACb,IAAI;;MACb;IACM,OAAO,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACxC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,MAAM,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACtC,UAAU,EAAE,wBAAwB,CAAC;IACrC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,SAAS,CAAqB;IAEtC,cAYC;IAED,OAAO,KAAK,IAAI,GAEf;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,kGAAkG;IAClG,OAAO,KAAK,QAAQ,GAKnB;IAED,OAAO,CAAC,IAAI;IASZ,2EAA2E;IAClE,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAK3C;IAED,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,QAAQ;IAQhB,8DAA8D;IAC9D,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,aAAa;IAkBrB,OAAO,CAAC,aAAa;IA4CrB,OAAO,CAAC,YAAY;IAwCpB,UAAmB,MAAM,sBAsCxB;CACD;AAED,eAAO,MAAM,kBAAkB,+BAAiE,CAAC"}

package/dist/comments/types.d.ts

@@ -0,0 +1,80 @@
+/** One comment of a thread: the opening comment or a reply. */
+export interface OfficeComment {
+    id: string;
+    author: string;
+    /** Avatar initials; derived from `author` when absent. */
+    initials?: string;
+    /** Avatar colour (any CSS colour); the accent colour when absent. */
+    color?: string;
+    /** When it was written: an ISO 8601 date-time is formatted, any other text is shown as is. */
+    created?: string;
+    /** Plain text; `@mentions` stay text. */
+    text: string;
+    edited?: boolean;
+}
+/** A conversation anchored to one place in the document: its first comment and the replies. */
+export interface OfficeCommentThread {
+    id: string;
+    /** Where the thread is anchored, shown above it (a cell address, a slide, a quote). */
+    anchorLabel?: string;
+    resolved: boolean;
+    /** Oldest first; the first entry opens the thread. */
+    comments: OfficeComment[];
+}
+/** Every string the pane shows or announces. The shared package has no dictionary. */
+export interface OfficeCommentsLabels {
+    /** Pane heading; empty hides it (for a pane inside a titled dialog). */
+    heading: string;
+    /** Accessible name of the thread list. */
+    list: string;
+    /** The close button (shown with `closable`). */
+    close: string;
+    /** Label and placeholder of the new-comment box. */
+    newComment: string;
+    /** The button that posts a new comment. */
+    add: string;
+    /** Label and placeholder of a thread's reply box, and its button. */
+    reply: string;
+    resolve: string;
+    reopen: string;
+    /** Badge on a resolved thread; empty hides it. */
+    resolved: string;
+    edit: string;
+    save: string;
+    cancel: string;
+    delete: string;
+    /** Marker after an edited comment's time. */
+    edited: string;
+    /** Shown when there are no threads. */
+    empty: string;
+}
+export declare const DEFAULT_COMMENTS_LABELS: OfficeCommentsLabels;
+/** Product hook classes added to the pane's parts, so a product keeps its own selectors. */
+export interface OfficeCommentsClassNames {
+    thread?: string;
+    comment?: string;
+}
+export interface OfficeCommentAddDetail {
+    text: string;
+}
+export interface OfficeCommentReplyDetail {
+    threadId: string;
+    text: string;
+}
+export interface OfficeCommentEditDetail {
+    threadId: string;
+    commentId: string;
+    text: string;
+}
+export interface OfficeCommentDeleteDetail {
+    threadId: string;
+    commentId: string;
+}
+export interface OfficeThreadDetail {
+    threadId: string;
+}
+/** Up to two initials from an author's name ("Ada Lovelace" is "AL", "grace" is "G"). */
+export declare function commentInitials(author: string): string;
+/** A comment's time for display: ISO date-times are formatted for `locale`, other text is kept. */
+export declare function formatCommentTime(created: string | undefined, locale?: string): string;
+//# sourceMappingURL=types.d.ts.map

package/dist/comments/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/comments/types.ts"],"names":[],"mappings":"AAIA,+DAA+D;AAC/D,MAAM,WAAW,aAAa;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,+FAA+F;AAC/F,MAAM,WAAW,mBAAmB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,uFAAuF;IACvF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC1B;AAED,sFAAsF;AACtF,MAAM,WAAW,oBAAoB;IACpC,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,UAAU,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,GAAG,EAAE,MAAM,CAAC;IACZ,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,uBAAuB,EAAE,oBAgBrC,CAAC;AAEF,4FAA4F;AAC5F,MAAM,WAAW,wBAAwB;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,MAAM,CAAC;CACb;AACD,MAAM,WAAW,wBAAwB;IACxC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACb;AACD,MAAM,WAAW,uBAAuB;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CACb;AACD,MAAM,WAAW,yBAAyB;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,kBAAkB;IAClC,QAAQ,EAAE,MAAM,CAAC;CACjB;AAED,yFAAyF;AACzF,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAOtD;AAED,mGAAmG;AACnG,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAYtF"}