ooxml-ui 0.31.0 → 1.0.0

package/README.md

@@ -65,6 +65,14 @@ app in the `teams-viewer` repository): `office-ui-avatar`, `-app-rail`, `-channe
 `-chat-composer`, `-prejoin`, `-call-grid` and `-call-controls`. Properties in, bubbling `office-*`
 events out, no data fetching; message text is always rendered as text.
 
+`teams-app` opens Settings as a workspace page beside the app rail, retaining
+the underlying chat, selected tab and edited workbook. Its `teams-settings`
+element also supports standalone modal use; pass `embedded` to render a
+modeless page sized to the containing workspace. Escape and Close settings
+emit `teams-settings-close`; the host controls the `open` attribute. Personal
+preferences apply immediately, while connection changes require Apply and
+reconnect.
+
 ```ts
 import { registerOfficeUi } from 'ooxml-ui';
 registerOfficeUi(); // defines every element, idempotent
@@ -117,6 +125,12 @@ with an incompatible build of this package.
 
 ## Features: elements
 
+`office-ui-menu-button` accepts `submenu` when nested inside another menu.
+Its trigger becomes a menu item; hover, click or ArrowRight opens the child
+panel beside the parent, with viewport edge placement. ArrowLeft or Escape
+returns focus to its trigger; choosing a command closes the whole menu tree.
+Arrow navigation stays within the current menu and skips disabled entries.
+
 | Tag                                                   | Attributes / properties                                                                                                                                                                                                                                                                                                         | Events (all bubble, composed)                                                                                                                     |
 | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `office-ui-button`                                    | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts`                                                                                                                                                                                                                 | `office-command` `{ command }`                                                                                                                    |

package/custom-elements.json

@@ -1294,6 +1294,9 @@
 						{
 							"name": "label"
 						},
+						{
+							"name": "submenu"
+						},
 						{
 							"name": "title"
 						}
@@ -1345,6 +1348,13 @@
 						{
 							"kind": "field",
 							"name": "open"
+						},
+						{
+							"kind": "field",
+							"name": "submenu",
+							"type": {
+								"text": "boolean"
+							}
 						}
 					],
 					"events": [

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

@@ -1,7 +1,7 @@
 import { defineSmartArt } from './chunk-XDUYS4KK.js';
-import { TEAMS_TAGS, registerTeams } from './chunk-3GE2NHNG.js';
+import { TEAMS_TAGS, registerTeams } from './chunk-FLHM5Q4O.js';
 import { installOfficeUiTheme } from './chunk-X7RINDJQ.js';
-import { registerControls } from './chunk-2QW4QE56.js';
+import { registerControls } from './chunk-T3HB5LMH.js';
 import { definePresence } from './chunk-OXKWNNNJ.js';
 
 // src/index.ts

package/dist/{chunk-HZ422LTR.js → chunk-BOX43CZD.js}

@@ -17,6 +17,7 @@ var BUILT_IN = {
   clock: "M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M10 6v4l3 2",
   reset: "M4 10a6 6 0 1 1 1.8 4.2M4 6v4h4",
   plus: "M10 4v12M4 10h12",
+  upload: "M10 13V3M6 7l4-4 4 4M3 12v5h14v-5",
   minus: "M4 10h12",
   search: "M3 8.5a5.5 5.5 0 1 0 11 0 5.5 5.5 0 1 0-11 0M13 13l4 4",
   undo: "M7.5 11.5 3.5 7.5l4-4M3.5 7.5h9a4 4 0 0 1 0 8H10",

package/dist/{chunk-3GE2NHNG.js → chunk-FLHM5Q4O.js}

@@ -1,12 +1,12 @@
 import { THEME_CSS, installOfficeUiTheme } from './chunk-X7RINDJQ.js';
-import { registerControls, defineSwitch } from './chunk-2QW4QE56.js';
-import { registerIcon, getIcon } from './chunk-HZ422LTR.js';
+import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-T3HB5LMH.js';
+import { registerIcon, getIcon } from './chunk-BOX43CZD.js';
 import { initialsOf, definePresence } from './chunk-OXKWNNNJ.js';
 import { definer, OfficeElement, controlStyles } from './chunk-ZV2Z4IWH.js';
 import { html, nothing, LitElement, unsafeCSS, svg } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { live } from 'lit/directives/live.js';
-import { MAX_ATTACHMENTS, detectContentKind, contentUrl, readContent, filterFiles, parseServerConfig, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, markdownBlocks, createTeamsClient, sanitizeAttachment, markdownInline } from 'ooxml-core/teams';
+import { MAX_ATTACHMENTS, detectContentKind, contentUrl, readContent, sortFiles, filterFiles, parseServerConfig, sanitizeChannelName, MAX_CHANNEL_NAME_CHARS, MAX_CHANNEL_TOPIC_CHARS, markdownBlocks, createTeamsClient, sanitizeAttachment, markdownInline } from 'ooxml-core/teams';
 import { keyed } from 'lit/directives/keyed.js';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/reset.css?raw
@@ -1420,7 +1420,7 @@ function defineTeamsChannelTab() {
 }
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/files-panel.css?raw
-var files_panel_default = ":host {\n	display: flex;\n	flex-direction: column;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n	background: var(--office-background);\n	overflow: auto;\n}\n.toolbar,\n.transfer,\nform {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n}\ninput,\nbutton {\n	font: inherit;\n	color: inherit;\n}\ninput[type='search'],\ninput[name='name'] {\n	box-sizing: border-box;\n	min-width: 10em;\n	padding: var(--office-space-2);\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.toolbar input[type='search'] {\n	width: min(22em, 100%);\n}\n.toolbar-space {\n	flex: 1;\n}\n.new-control {\n	position: relative;\n}\n.new-menu {\n	position: absolute;\n	inset-block-start: calc(100% + var(--office-space-1));\n	inset-inline-start: 0;\n	z-index: 1;\n	padding: var(--office-space-1);\n	background: var(--office-popover);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	box-shadow: var(--office-shadow-teams);\n	white-space: nowrap;\n}\n.new-menu button {\n	border: 0;\n}\n.file-picker {\n	display: none;\n}\nbutton {\n	cursor: pointer;\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-background);\n}\nbutton:disabled {\n	cursor: default;\n	opacity: 0.5;\n}\nbutton:hover:not(:disabled) {\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:not(:disabled) {\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.hint,\n[role='status'],\n[role='alert'] {\n	margin: 0;\n	padding: var(--office-space-2) var(--office-space-3);\n}\n.hint {\n	color: var(--office-teams-text-subtle);\n}\n.file-list {\n	position: relative;\n	min-width: 0;\n	min-height: 0;\n	flex: 1;\n	padding: var(--office-space-3);\n	overflow-x: auto;\n}\ntable {\n	border-collapse: collapse;\n	width: 100%;\n	text-align: start;\n}\nth,\ntd {\n	padding: var(--office-space-3) var(--office-space-2);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nth {\n	text-align: start;\n	font-weight: var(--office-font-weight-bold);\n	white-space: nowrap;\n}\ntd:not(:first-child) {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\ntbody tr:hover {\n	background: var(--office-selected);\n}\n.none {\n	padding-block: var(--office-space-6);\n	text-align: center;\n	color: var(--office-teams-text-subtle);\n}\n.file-name {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-width: 12em;\n}\n.file-open {\n	border: 0;\n	background: transparent;\n	text-align: start;\n	min-width: 0;\n	overflow-wrap: anywhere;\n}\n.file-open:hover:not(:disabled) {\n	color: var(--office-teams-brand);\n	text-decoration: underline;\n}\n.visually-hidden {\n	position: absolute;\n	width: 1em;\n	height: 1em;\n	clip-path: inset(50%);\n	overflow: hidden;\n}\n.badge {\n	flex-shrink: 0;\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-file-other);\n	color: var(--office-call-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.badge[data-kind='docx'] {\n	background: var(--office-file-docx);\n}\n.badge[data-kind='xlsx'] {\n	background: var(--office-file-xlsx);\n}\n.badge[data-kind='pptx'] {\n	background: var(--office-file-pptx);\n}\n.badge[data-kind='vsdx'] {\n	background: var(--office-file-vsdx);\n}\n";
+var files_panel_default = ":host {\n	display: flex;\n	flex-direction: column;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n	background: var(--office-background);\n	overflow: auto;\n}\n.toolbar,\n.transfer,\nform {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n}\ninput,\nbutton {\n	font: inherit;\n	color: inherit;\n}\ninput[type='search'],\ninput[name='name'] {\n	box-sizing: border-box;\n	min-width: 10em;\n	padding: var(--office-space-2);\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.toolbar input[type='search'] {\n	width: min(22em, 100%);\n}\n.toolbar-space {\n	flex: 1;\n}\n.file-picker {\n	display: none;\n}\nbutton {\n	cursor: pointer;\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-background);\n}\nbutton:disabled {\n	cursor: default;\n	opacity: 0.5;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-selected);\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n.hint,\n[role='status'],\n[role='alert'] {\n	margin: 0;\n	padding: var(--office-space-2) var(--office-space-3);\n}\n.hint {\n	color: var(--office-teams-text-subtle);\n}\n.file-list {\n	position: relative;\n	min-width: 0;\n	min-height: 0;\n	flex: 1;\n	padding: var(--office-space-3);\n	overflow-x: auto;\n}\ntable {\n	border-collapse: collapse;\n	width: 100%;\n	text-align: start;\n}\nth,\ntd {\n	padding: var(--office-space-3) var(--office-space-2);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nth {\n	text-align: start;\n	font-weight: var(--office-font-weight-bold);\n	white-space: nowrap;\n}\ntd:not(:first-child) {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\ntbody tr:hover {\n	background: var(--office-selected);\n}\n.none {\n	padding-block: var(--office-space-6);\n	text-align: center;\n	color: var(--office-teams-text-subtle);\n}\n.file-name {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-width: 12em;\n}\n.file-open {\n	border: 0;\n	background: transparent;\n	text-align: start;\n	min-width: 0;\n	overflow-wrap: anywhere;\n}\n.file-open:hover:not(:disabled) {\n	color: var(--office-teams-brand);\n	text-decoration: underline;\n}\n.visually-hidden {\n	position: absolute;\n	width: 1em;\n	height: 1em;\n	clip-path: inset(50%);\n	overflow: hidden;\n}\n.badge {\n	flex-shrink: 0;\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-file-other);\n	color: var(--office-call-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.badge[data-kind='docx'] {\n	background: var(--office-file-docx);\n}\n.badge[data-kind='xlsx'] {\n	background: var(--office-file-xlsx);\n}\n.badge[data-kind='pptx'] {\n	background: var(--office-file-pptx);\n}\n.badge[data-kind='vsdx'] {\n	background: var(--office-file-vsdx);\n}\n\n.toolbar {\n	position: sticky;\n	top: 0;\n	z-index: 2;\n	background: var(--office-background);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.new-command::part(button) {\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size);\n	border-radius: var(--office-radius-md);\n	border-start-end-radius: 0;\n	border-end-end-radius: 0;\n}\n.new-command::part(caret) {\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	border-start-start-radius: 0;\n	border-end-start-radius: 0;\n}\n.new-command::part(button):hover:not(:disabled),\n.new-command::part(caret):hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.toolbar > button {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	border-color: transparent;\n	min-height: var(--office-target-size);\n}\n.icon {\n	width: 1.4em;\n	height: 1.4em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n.file-list {\n	overflow: auto;\n	overscroll-behavior: contain;\n}\nth {\n	position: sticky;\n	top: 0;\n	z-index: 1;\n	background: var(--office-background);\n}\n.sort-command {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: 0;\n	border: 0;\n	font-weight: inherit;\n	white-space: nowrap;\n}\n.sort-command span {\n	color: var(--office-teams-text-subtle);\n}\ntbody tr:focus-within {\n	background: var(--office-selected);\n}\n.badge {\n	position: relative;\n	width: 1.8em;\n	height: 2.3em;\n	border-radius: var(--office-radius);\n	clip-path: polygon(0 0, 65% 0, 100% 25%, 100% 100%, 0 100%);\n}\n.badge::before {\n	content: '';\n	position: absolute;\n	inset-inline-end: 0;\n	top: 0;\n	width: 35%;\n	height: 25%;\n	background: color-mix(in srgb, currentColor 35%, transparent);\n}\n@media (max-width: 48em) {\n	th:nth-child(3),\n	td:nth-child(3),\n	th:nth-child(4),\n	td:nth-child(4) {\n		display: none;\n	}\n	.file-name {\n		min-width: 0;\n		gap: var(--office-space-2);\n	}\n	td:nth-child(2) {\n		white-space: nowrap;\n	}\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/file-actions.css?raw
 var file_actions_default = ":host {\n	display: block;\n	font: inherit;\n	color: inherit;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n	border: 0;\n	background: transparent;\n	border-radius: var(--office-radius);\n	padding: var(--office-space-2) var(--office-space-3);\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n[popover] {\n	margin: auto;\n	min-width: 15em;\n	max-width: min(24em, 90vw);\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	box-shadow: var(--office-shadow-teams);\n	color: var(--office-foreground);\n	background: var(--office-popover);\n}\n[popover] button {\n	display: block;\n	width: 100%;\n	text-align: start;\n}\np {\n	margin: var(--office-space-2);\n	font-size: var(--office-font-size-sm);\n}\n[role='alert'] {\n	color: var(--office-danger);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-1);\n	padding: var(--office-space-2);\n}\ninput {\n	min-width: 0;\n	width: 100%;\n	box-sizing: border-box;\n	padding: var(--office-space-2);\n	font: inherit;\n	background: var(--office-field-background);\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-field-border);\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";
@@ -1582,7 +1582,8 @@ var TeamsFilesPanel = class extends LitElement {
     canUpload: { type: Boolean },
     query: { state: true },
     creating: { state: true },
-    newMenu: { state: true },
+    sortField: { state: true },
+    sortDirection: { state: true },
     busy: { state: true },
     error: { state: true },
     destination: { state: true },
@@ -1600,7 +1601,8 @@ var TeamsFilesPanel = class extends LitElement {
     this.canUpload = false;
     this.query = "";
     this.creating = false;
-    this.newMenu = false;
+    this.sortField = "ts";
+    this.sortDirection = "descending";
     this.busy = false;
     this.error = "";
     this.destination = "";
@@ -1613,6 +1615,8 @@ var TeamsFilesPanel = class extends LitElement {
   }
   connectedCallback() {
     defineTeamsFileActions();
+    defineMenuButton();
+    defineMenuItem();
     super.connectedCallback();
   }
   updated(changed) {
@@ -1688,51 +1692,53 @@ var TeamsFilesPanel = class extends LitElement {
       this.emit("open", { ...attachment, channelId });
     });
   }
+  sortHeading(field, label) {
+    const active = this.sortField === field;
+    return html`<th scope="col" aria-sort=${active ? this.sortDirection : "none"}>
+			<button
+				type="button"
+				class="sort-command"
+				@click=${() => {
+      this.sortDirection = active && this.sortDirection === "ascending" ? "descending" : "ascending";
+      this.sortField = field;
+    }}
+			>
+				${label}<span aria-hidden="true"
+					>${active ? this.sortDirection === "ascending" ? "\u2191" : "\u2193" : "\u2195"}</span
+				>
+			</button>
+		</th>`;
+  }
   render() {
-    const files = filterFiles(this.files, this.query);
+    const files = sortFiles(
+      filterFiles(this.files, this.query),
+      this.sortField,
+      this.sortDirection
+    );
     const disabled = this.busy || !this.canUpload || !this.channelId;
     return html`<div class="toolbar" role="toolbar" aria-label="File actions">
-				<div class="new-control">
-					<button
-						type="button"
-						class="primary"
-						?disabled=${disabled}
-						@click=${() => this.newMenu = !this.newMenu}
-						aria-expanded=${String(this.newMenu)}
-						aria-controls="new-options"
-					>
-						+ New
-					</button>
-					${this.newMenu ? html`<div
-									id="new-options"
-									class="new-menu"
-									role="group"
-									aria-label="New file"
-									@keydown=${(event) => {
-      if (event.key === "Escape") {
-        this.newMenu = false;
-        this.renderRoot.querySelector(".primary")?.focus();
-      }
-    }}
-								>
-									<button
-										type="button"
-										?disabled=${disabled}
-										@click=${() => {
-      this.newMenu = false;
+				<office-ui-menu-button
+					class="new-command"
+					label="+ New"
+					.disabled=${disabled}
+					@office-command=${async (event) => {
+      if (event.detail.command !== "new-workbook" || disabled) return;
       this.creating = true;
+      await this.updateComplete;
+      this.renderRoot.querySelector('input[name="name"]')?.focus();
     }}
-									>
-										New Excel workbook
-									</button>
-								</div>` : nothing}
-				</div>
+				>
+					<office-ui-menu-item
+						label="New Excel workbook"
+						command="new-workbook"
+					></office-ui-menu-item>
+				</office-ui-menu-button>
 				<button
 					type="button"
 					?disabled=${disabled}
 					@click=${() => this.renderRoot.querySelector('input[type="file"]')?.click()}
 				>
-					Upload
+					${icon("upload")} Upload
 				</button>
 				<input
 					type="file"
@@ -1790,9 +1796,8 @@ var TeamsFilesPanel = class extends LitElement {
 				<table aria-label="Shared files">
 					<thead>
 						<tr>
-							<th scope="col">Name</th>
-							<th scope="col">Shared on</th>
-							<th scope="col">Shared by</th>
+							${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>
 						</tr>
@@ -1845,7 +1850,7 @@ function defineTeamsFilesPanel() {
 }
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/teams-settings.css?raw
-var teams_settings_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(76em, 94vw);\n	max-height: 90dvh;\n	overflow: hidden;\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}\nform {\n	display: grid;\n	gap: var(--office-space-3);\n	padding: var(--office-space-5);\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-4) var(--office-space-5);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	gap: var(--office-space-3);\n}\nheader input {\n	margin-inline-start: auto;\n	width: min(24em, 50%);\n	min-width: 0;\n}\n.settings-results ul {\n	list-style: none;\n	padding: 0;\n	display: grid;\n	gap: var(--office-space-3);\n}\n.settings-results button {\n	display: grid;\n	gap: var(--office-space-2);\n	width: 100%;\n	text-align: start;\n}\n.settings-results button:hover {\n	background: var(--office-selected);\n}\nh1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\n.settings-layout {\n	display: grid;\n	grid-template-columns: 19em minmax(0, 1fr);\n	height: min(42em, calc(90dvh - 5em));\n	min-height: 0;\n}\nnav {\n	min-height: 0;\n	overflow-y: auto;\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-1);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nnav button {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-height: 3em;\n	text-align: start;\n	border: 0;\n	background: transparent;\n}\nnav button:hover {\n	background: var(--office-selected);\n}\n.icon {\n	width: 1.4em;\n	height: 1.4em;\n	flex-shrink: 0;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nnav button[aria-selected='true'] {\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.settings-content {\n	min-width: 0;\n	min-height: 0;\n	overflow: auto;\n	overscroll-behavior: contain;\n}\nsection {\n	padding: var(--office-space-5);\n}\nsection h3 {\n	margin: var(--office-space-5) 0 var(--office-space-3);\n	font-size: var(--office-font-size);\n}\nsection h2 + h3 {\n	margin-top: var(--office-space-4);\n}\n[hidden] {\n	display: none !important;\n}\n.description {\n	color: var(--office-teams-text-subtle);\n	line-height: 1.5;\n}\noffice-ui-switch {\n	--office-switch-track-on: var(--office-teams-brand);\n}\n.preference {\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	font-weight: normal;\n}\nh2 {\n	position: sticky;\n	top: 0;\n	z-index: 1;\n	margin: calc(-1 * var(--office-space-5)) calc(-1 * var(--office-space-5)) var(--office-space-4);\n	padding: var(--office-space-5);\n	background: var(--office-popover);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	font-size: var(--office-font-size-lg);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-1);\n	font-weight: var(--office-font-weight-bold);\n}\nsmall {\n	color: var(--office-teams-text-subtle);\n	font-weight: normal;\n}\ninput,\ntextarea,\nselect {\n	padding: var(--office-space-2);\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}\ntextarea {\n	min-height: 5.5em;\n	font-family: ui-monospace, monospace;\n	font-size: 0.9em;\n}\n.issues {\n	margin: 0;\n	padding-inline-start: 1.2em;\n	color: var(--office-danger);\n	font-size: var(--office-font-size-sm);\n}\n.actions {\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.primary {\n	border-color: transparent;\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\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@media (max-width: 48em) {\n	.settings-layout {\n		grid-template-columns: minmax(0, 1fr);\n		grid-template-rows: auto minmax(0, 1fr);\n		min-height: 0;\n	}\n	nav {\n		max-height: 30dvh;\n		border-inline-end: 0;\n		border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	}\n}\n";
+var teams_settings_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(76em, 94vw);\n	max-height: 90dvh;\n	overflow: hidden;\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}\n:host([embedded]) {\n	display: block;\n	height: 100%;\n	min-height: 0;\n}\n:host([embedded]:not([open])) {\n	display: none;\n}\n:host([embedded]) dialog {\n	position: relative;\n	width: 100%;\n	height: 100%;\n	max-width: none;\n	max-height: none;\n	margin: 0;\n	border: 0;\n	border-radius: 0;\n	box-shadow: none;\n}\n:host([embedded]) dialog[open] {\n	display: flex;\n	flex-direction: column;\n}\n:host([embedded]) .settings-layout {\n	flex: 1;\n	height: auto;\n}\nform {\n	display: grid;\n	gap: var(--office-space-3);\n	padding: var(--office-space-5);\n}\nheader {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-4) var(--office-space-5);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	gap: var(--office-space-3);\n}\nheader input {\n	margin-inline-start: auto;\n	width: min(24em, 50%);\n	min-width: 0;\n}\n.settings-results ul {\n	list-style: none;\n	padding: 0;\n	display: grid;\n	gap: var(--office-space-3);\n}\n.settings-results button {\n	display: grid;\n	gap: var(--office-space-2);\n	width: 100%;\n	text-align: start;\n}\n.settings-results button:hover {\n	background: var(--office-selected);\n}\nh1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\n.settings-layout {\n	display: grid;\n	grid-template-columns: 19em minmax(0, 1fr);\n	height: min(42em, calc(90dvh - 5em));\n	min-height: 0;\n}\nnav {\n	min-height: 0;\n	overflow-y: auto;\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-1);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nnav button {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-height: 3em;\n	text-align: start;\n	border: 0;\n	background: transparent;\n}\nnav button:hover {\n	background: var(--office-selected);\n}\n.icon {\n	width: 1.4em;\n	height: 1.4em;\n	flex-shrink: 0;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: 1.5;\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\nnav button[aria-selected='true'] {\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.settings-content {\n	min-width: 0;\n	min-height: 0;\n	overflow: auto;\n	overscroll-behavior: contain;\n}\nsection {\n	padding: var(--office-space-5);\n}\nsection h3 {\n	margin: var(--office-space-5) 0 var(--office-space-3);\n	font-size: var(--office-font-size);\n}\nsection h2 + h3 {\n	margin-top: var(--office-space-4);\n}\n[hidden] {\n	display: none !important;\n}\n.description {\n	color: var(--office-teams-text-subtle);\n	line-height: 1.5;\n}\noffice-ui-switch {\n	--office-switch-track-on: var(--office-teams-brand);\n}\n.preference {\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	font-weight: normal;\n}\nh2 {\n	position: sticky;\n	top: 0;\n	z-index: 1;\n	margin: calc(-1 * var(--office-space-5)) calc(-1 * var(--office-space-5)) var(--office-space-4);\n	padding: var(--office-space-5);\n	background: var(--office-popover);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	font-size: var(--office-font-size-lg);\n}\nlabel {\n	display: grid;\n	gap: var(--office-space-1);\n	font-weight: var(--office-font-weight-bold);\n}\nsmall {\n	color: var(--office-teams-text-subtle);\n	font-weight: normal;\n}\ninput,\ntextarea,\nselect {\n	padding: var(--office-space-2);\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}\ntextarea {\n	min-height: 5.5em;\n	font-family: ui-monospace, monospace;\n	font-size: 0.9em;\n}\n.issues {\n	margin: 0;\n	padding-inline-start: 1.2em;\n	color: var(--office-danger);\n	font-size: var(--office-font-size-sm);\n}\n.actions {\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.primary {\n	border-color: transparent;\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\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@media (max-width: 48em) {\n	.settings-layout {\n		grid-template-columns: minmax(0, 1fr);\n		grid-template-rows: auto minmax(0, 1fr);\n		min-height: 0;\n	}\n	nav {\n		max-height: 30dvh;\n		border-inline-end: 0;\n		border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n	}\n}\n";
 
 // 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";
@@ -1984,6 +1989,7 @@ var TeamsSettings = class extends LitElement {
   static properties = {
     config: { attribute: false },
     open: { type: Boolean, reflect: true },
+    embedded: { type: Boolean, reflect: true },
     issues: { state: true },
     category: { state: true },
     theme: { attribute: false },
@@ -1998,6 +2004,7 @@ var TeamsSettings = class extends LitElement {
     super();
     this.config = { mode: "local", iceServers: [] };
     this.open = false;
+    this.embedded = false;
     this.issues = [];
     this.category = "general";
     this.theme = "system";
@@ -2030,7 +2037,11 @@ var TeamsSettings = class extends LitElement {
       }))
         this.field(id).value = value;
     }
-    if (this.open && !dialog.open) dialog.showModal();
+    if (this.open && !dialog.open) {
+      if (this.embedded) dialog.show();
+      else dialog.showModal();
+      this.renderRoot.querySelector('input[type="search"]')?.focus();
+    }
     if (!this.open && dialog.open) dialog.close();
   }
   field(id) {
@@ -2063,7 +2074,22 @@ var TeamsSettings = class extends LitElement {
   render() {
     const c = this.config;
     return html`
-			<dialog aria-label="Settings" @close=${this.close} @cancel=${this.close}>
+			<dialog
+				aria-label="Settings"
+				@close=${() => {
+      if (this.open) this.close();
+    }}
+				@cancel=${(event) => {
+      event.preventDefault();
+      this.close();
+    }}
+				@keydown=${(event) => {
+      if (this.embedded && event.key === "Escape" && !event.defaultPrevented) {
+        event.preventDefault();
+        this.close();
+      }
+    }}
+			>
 				<header>
 					<h1>Settings</h1>
 					<input
@@ -2330,7 +2356,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}\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	.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";
 function threadPane(state, client, openFile, close) {
   const thread = state.thread;
   if (!thread) return nothing;
@@ -3207,6 +3233,7 @@ var TeamsApp = class extends LitElement {
     this.addingTab = false;
     this.creatingChannel = false;
     this.navigationOpen = false;
+    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);
@@ -3360,6 +3387,7 @@ var TeamsApp = class extends LitElement {
   }
   selectChannel(id) {
     if (!this.closePreview()) return false;
+    this.settingsOpen = false;
     this.addingTab = false;
     this.creatingChannel = false;
     this.teams.client?.select(id);
@@ -3386,8 +3414,15 @@ var TeamsApp = class extends LitElement {
     }
   }
   askSettings() {
+    this.navigationOpen = false;
     this.settingsOpen = true;
   }
+  async closeSettings() {
+    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();
+  }
   applyTheme() {
     if (this.theme === "system") this.removeAttribute("data-office-theme");
     else this.setAttribute("data-office-theme", this.theme);
@@ -3420,34 +3455,22 @@ var TeamsApp = class extends LitElement {
 						selected=${this.rail}
 						@office-rail-select=${(e) => {
       if (!this.closePreview()) return;
+      this.settingsOpen = false;
       this.rail = e.detail.id;
       this.meeting = false;
     }}
 					></office-ui-app-rail>
-					<aside class="side">${this.sidebar(s)}</aside>
-					<main class="main">${this.main(s)}</main>
-				</div>
-				<teams-create-channel-dialog
-					?open=${this.creatingChannel}
-					.create=${(name, description) => this.commitChannel(name, description, this.client)}
-					@teams-create-channel-close=${() => this.creatingChannel = false}
-				></teams-create-channel-dialog>
-				<teams-navigation-drawer
-					.heading=${this.rail === "calls" ? "Calls" : "Teams and channels"}
-					?open=${this.navigationOpen}
-					@teams-navigation-close=${() => void this.closeNavigation()}
-				>
-					${this.navigationOpen ? this.sidebar(s) : nothing}
-				</teams-navigation-drawer>
-				${this.toast ? html`<div class="toast" role="status">${this.toast}</div>` : nothing}
-				<teams-settings
-					?open=${this.settingsOpen}
-					.config=${this.resolveConfig()}
-					.theme=${this.theme}
-					.fileOpenPreference=${this.fileOpenPreference}
-					.chatDensity=${this.chatDensity}
-					.showAppNames=${this.showAppNames}
-					@teams-settings-app-names=${(event) => {
+					<aside class="side" ?inert=${this.settingsOpen}>${this.sidebar(s)}</aside>
+					<main class="main" ?inert=${this.settingsOpen}>${this.main(s)}</main>
+					<teams-settings
+						embedded
+						?open=${this.settingsOpen}
+						.config=${this.resolveConfig()}
+						.theme=${this.theme}
+						.fileOpenPreference=${this.fileOpenPreference}
+						.chatDensity=${this.chatDensity}
+						.showAppNames=${this.showAppNames}
+						@teams-settings-app-names=${(event) => {
       if (typeof event.detail.show !== "boolean") return;
       this.showAppNames = event.detail.show;
       safeStorage.setItem(
@@ -3455,7 +3478,7 @@ var TeamsApp = class extends LitElement {
         String(this.showAppNames)
       );
     }}
-					@teams-settings-density=${(event) => {
+						@teams-settings-density=${(event) => {
       if (!["comfy", "compact"].includes(event.detail.density)) return;
       this.chatDensity = event.detail.density;
       safeStorage.setItem(
@@ -3463,7 +3486,7 @@ var TeamsApp = class extends LitElement {
         this.chatDensity
       );
     }}
-					@teams-settings-file-open=${(event) => {
+						@teams-settings-file-open=${(event) => {
       if (!["teams", "browser"].includes(event.detail.preference)) return;
       this.fileOpenPreference = event.detail.preference;
       safeStorage.setItem(
@@ -3471,17 +3494,17 @@ var TeamsApp = class extends LitElement {
         this.fileOpenPreference
       );
     }}
-					.followSettings=${s.threadFollowSettings}
-					.userName=${s.user.name}
-					@teams-settings-theme=${(event) => {
+						.followSettings=${s.threadFollowSettings}
+						.userName=${s.user.name}
+						@teams-settings-theme=${(event) => {
       if (!["system", "light", "dark"].includes(event.detail.theme)) return;
       this.theme = event.detail.theme;
       this.applyTheme();
       safeStorage.setItem(this.themeStorageKey, this.theme);
     }}
-					@teams-settings-follow=${(event) => this.teams.client?.setThreadFollowSettings(event.detail)}
-					@teams-settings-close=${() => this.settingsOpen = false}
-					@teams-settings-apply=${(e) => {
+						@teams-settings-follow=${(event) => this.teams.client?.setThreadFollowSettings(event.detail)}
+						@teams-settings-close=${() => void this.closeSettings()}
+						@teams-settings-apply=${(e) => {
       if (!this.closePreview()) return;
       saveConfig(e.detail.config);
       this.config = e.detail.config;
@@ -3494,7 +3517,22 @@ var TeamsApp = class extends LitElement {
         })
       );
     }}
-				></teams-settings>
+					></teams-settings>
+				</div>
+				<teams-create-channel-dialog
+					?open=${this.creatingChannel}
+					.create=${(name, description) => this.commitChannel(name, description, this.client)}
+					@teams-create-channel-close=${() => this.creatingChannel = false}
+				></teams-create-channel-dialog>
+				<teams-navigation-drawer
+					.heading=${this.rail === "calls" ? "Calls" : "Teams and channels"}
+					?open=${this.navigationOpen}
+					@teams-navigation-close=${() => void this.closeNavigation()}
+				>
+					${this.navigationOpen ? this.sidebar(s) : nothing}
+				</teams-navigation-drawer>
+				${this.toast ? html`<div class="toast" role="status">${this.toast}</div>` : nothing}
+
 				<teams-add-tab-dialog
 					.open=${this.addingTab}
 					.client=${this.teams.client}