ooxml-ui 0.20.0 → 0.22.0

package/dist/chunk-HNGJI5EZ.js

@@ -0,0 +1,834 @@
+import { registerIcon, getIcon } from './chunk-HZ422LTR.js';
+import { initialsOf } from './chunk-E47762NY.js';
+import { definer, OfficeElement, controlStyles } from './chunk-5A4REH6T.js';
+import { html, nothing, unsafeCSS, svg } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { live } from 'lit/directives/live.js';
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/teams/reset.css?raw
+var reset_default = ":host {\n	box-sizing: border-box;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n}\n*,\n*::before,\n*::after {\n	box-sizing: inherit;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\nbutton:focus-visible,\ntextarea:focus-visible,\ninput:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\nsvg.icon {\n	width: 1.25em;\n	height: 1.25em;\n	flex: none;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n";
+
+// src/teams/base.ts
+var withStyles = (css) => {
+  const [common, own] = controlStyles(css);
+  return [common, unsafeCSS(reset_default), own];
+};
+var TeamsElement = class extends OfficeElement {
+  static syncUpdates = false;
+};
+function colorFor(id) {
+  let hue = 0;
+  for (const ch of id) hue = (hue * 31 + ch.charCodeAt(0)) % 360;
+  return `hsl(${hue} 45% 42%)`;
+}
+var DAY_MS = 864e5;
+function formatTime(ts) {
+  return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function dayLabel(ts, now = Date.now()) {
+  const start = (t) => new Date(t).setHours(0, 0, 0, 0);
+  const diff = Math.round((start(now) - start(ts)) / DAY_MS);
+  if (diff === 0) return "Today";
+  if (diff === 1) return "Yesterday";
+  return new Date(ts).toLocaleDateString([], { weekday: "long", month: "long", day: "numeric" });
+}
+function formatSize(bytes) {
+  if (bytes === void 0) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1048576) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+var GLYPHS = {
+  send: "M3 10 17 3l-4 14-3-6Zm7 1 7-8",
+  paperclip: "M15 9.5l-5.5 5.5a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7L11 6",
+  smile: "M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0M7.5 8v.5M12.5 8v.5M7 12c1.5 2 4.5 2 6 0",
+  reply: "M8 4 3 9l5 5M3 9h9a5 5 0 0 1 5 5v2",
+  hash: "M7.5 3 6 17M14 3l-1.5 14M4 7.5h13M3 12.5h13",
+  users: "M7 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM2.5 16c0-2.5 2-4 4.5-4s4.5 1.5 4.5 4M13 8.5a2 2 0 1 0 0-4M14 12c2 .3 3.5 1.6 3.5 4",
+  phone: "M5 3h3l1.5 4-2 1.2a8 8 0 0 0 4.3 4.3L13 10.5l4 1.5v3a2 2 0 0 1-2 2A12 12 0 0 1 3 5a2 2 0 0 1 2-2Z",
+  folder: "M3 5.5h5l1.5 2H17v8H3Z",
+  calendar: "M3.5 5h13v11.5h-13ZM3.5 8.5h13M7 3v3M13 3v3",
+  more: "M5 10h.01M10 10h.01M15 10h.01",
+  mic: "M10 3a2.5 2.5 0 0 0-2.5 2.5v4a2.5 2.5 0 0 0 5 0v-4A2.5 2.5 0 0 0 10 3ZM5 9.5a5 5 0 0 0 10 0M10 14.5V17",
+  micOff: "M10 3a2.5 2.5 0 0 0-2.5 2.5v4a2.5 2.5 0 0 0 5 0v-4A2.5 2.5 0 0 0 10 3ZM5 9.5a5 5 0 0 0 10 0M10 14.5V17M3 3l14 14",
+  video: "M3 6h9v8H3ZM12 9l5-3v8l-5-3",
+  videoOff: "M3 6h9v8H3ZM12 9l5-3v8l-5-3M3 3l14 14",
+  screenShare: "M3 4h14v9H3ZM7 17h6M10 13v4M10 10V6M8 8l2-2 2 2",
+  hand: "M7 10V4.5a1 1 0 0 1 2 0V9M9 9V3.5a1 1 0 0 1 2 0V9M11 9V4.5a1 1 0 0 1 2 0V10M13 8.5a1 1 0 0 1 2 0V12a5 5 0 0 1-5 5h-.5A4.5 4.5 0 0 1 5 13.5L4 10.5a1 1 0 0 1 2-.5l1 2",
+  phoneOff: "M3 11c4-3 10-3 14 0l-1.5 2.5-3-1V10a9 9 0 0 0-5 0v2.5l-3 1Z",
+  chat: "M3 4h14v9H8l-5 4z"
+};
+for (const [name, d] of Object.entries(GLYPHS)) registerIcon(name, d);
+function icon(name) {
+  const found = getIcon(name);
+  if (!found) return "";
+  return html`<svg class="icon" viewBox=${found.viewBox ?? "0 0 20 20"} aria-hidden="true">
+		${svg`<path d=${found.d}></path>`}
+	</svg>`;
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/teams/app-rail.css?raw
+var app_rail_default = ":host {\n	display: block;\n	width: 5em;\n	background: var(--office-teams-rail);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\nul {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: var(--office-space-2) 0;\n	list-style: none;\n}\nbutton {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: var(--office-space-0);\n	width: 4.4em;\n	padding: var(--office-space-2) 0;\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\nbutton:hover {\n	background: var(--office-selected);\n}\nbutton[aria-current='page'] {\n	color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\nbutton[aria-current='page']::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: calc(-1 * var(--office-space-1));\n	inset-block: 20%;\n	width: var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.glyph {\n	position: relative;\n	display: grid;\n	place-items: center;\n	font-size: 1.3em;\n}\n.label {\n	font-size: var(--office-font-size-2xs);\n}\n.badge {\n	position: absolute;\n	inset-block-start: -0.4em;\n	inset-inline-end: -0.9em;\n	min-width: 1.5em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-3xs);\n	line-height: 1.6;\n	text-align: center;\n}\n";
+
+// src/teams/app-rail.ts
+var OfficeUiAppRail = class extends TeamsElement {
+  static styles = withStyles(app_rail_default);
+  static properties = {
+    items: { attribute: false },
+    selected: { type: String }
+  };
+  constructor() {
+    super();
+    this.items = [];
+    this.selected = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "navigation");
+    this.setAttribute("aria-label", "App bar");
+  }
+  render() {
+    return html`
+			<ul>
+				${this.items.map(
+      (item) => html`
+						<li>
+							<button
+								type="button"
+								aria-label=${item.label}
+								aria-current=${this.selected === item.id ? "page" : "false"}
+								@click=${() => this.fire("office-rail-select", { id: item.id })}
+							>
+								<span class="glyph">
+									${icon(item.icon)}
+									${item.badge ? html`<span class="badge">${item.badge > 99 ? "99+" : item.badge}</span>` : ""}
+								</span>
+								<span class="label">${item.label}</span>
+							</button>
+						</li>
+					`
+    )}
+			</ul>
+		`;
+  }
+};
+var defineAppRail = definer("office-ui-app-rail", () => OfficeUiAppRail);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/teams/avatar.css?raw
+var avatar_default = ":host {\n	--_size: 2.3em;\n	position: relative;\n	display: inline-block;\n	width: var(--_size);\n	height: var(--_size);\n	flex: none;\n}\n:host([size='sm']) {\n	--_size: 1.7em;\n}\n:host([size='lg']) {\n	--_size: 3em;\n}\n:host([size='xl']) {\n	--_size: 6em;\n}\n\n.face {\n	display: grid;\n	place-items: center;\n	width: 100%;\n	height: 100%;\n	border-radius: var(--office-radius-full);\n	color: var(--office-call-foreground);\n	font-size: calc(var(--_size) * 0.38);\n	font-weight: var(--office-font-weight-bold);\n	user-select: none;\n}\n\n.presence {\n	position: absolute;\n	inset-inline-end: 0;\n	inset-block-end: 0;\n	width: 32%;\n	height: 32%;\n	min-width: 0.5em;\n	min-height: 0.5em;\n	border-radius: var(--office-radius-full);\n	border: var(--office-border-width-thick) solid var(--office-background);\n	background: var(--office-presence-offline);\n}\n.presence[data-presence='available'] {\n	background: var(--office-presence-available);\n}\n.presence[data-presence='busy'] {\n	background: var(--office-presence-busy);\n}\n.presence[data-presence='away'] {\n	background: var(--office-presence-away);\n}\n";
+
+// src/teams/avatar.ts
+var PRESENCE_LABEL = {
+  available: "Available",
+  busy: "Busy",
+  away: "Away",
+  offline: "Offline"
+};
+var OfficeUiAvatar = class extends TeamsElement {
+  static styles = withStyles(avatar_default);
+  static properties = {
+    name: { type: String },
+    seed: { type: String },
+    color: { type: String },
+    size: { type: String, reflect: true },
+    presence: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.name = "";
+    this.seed = "";
+    this.color = "";
+    this.size = "md";
+    this.presence = "";
+  }
+  willUpdate(changed) {
+    if (changed.has("name") || changed.has("presence")) {
+      this.setAttribute("role", "img");
+      const status = this.presence ? `, ${PRESENCE_LABEL[this.presence]}` : "";
+      this.setAttribute("aria-label", `${this.name}${status}`);
+    }
+  }
+  render() {
+    const background = this.color || colorFor(this.seed || this.name);
+    return html`
+			<span class="face" style="background:${background}">${initialsOf(this.name)}</span>
+			${this.presence ? html`<span
+							class="presence"
+							data-presence=${this.presence}
+							title=${PRESENCE_LABEL[this.presence]}
+						></span>` : ""}
+		`;
+  }
+};
+var defineAvatar = definer("office-ui-avatar", () => OfficeUiAvatar);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/teams/call-controls.css?raw
+var call_controls_default = ":host {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n.info {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-width: 0;\n	color: var(--office-call-muted-foreground);\n}\n.heading {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\ntime {\n	font-variant-numeric: tabular-nums;\n}\n.actions {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	justify-content: flex-end;\n	gap: var(--office-space-1-5);\n}\nbutton {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	height: 2.6em;\n	padding: 0 var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n	color: inherit;\n	font-size: var(--office-font-size-sm);\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-call-control-hover);\n}\nbutton[aria-pressed='true'] {\n	background: var(--office-call-control);\n	color: var(--office-call-foreground);\n	box-shadow: inset 0 calc(-1 * var(--office-border-width-thick)) 0 var(--office-teams-brand);\n}\nbutton[data-off='true'] {\n	color: var(--office-call-danger);\n}\nbutton:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.leave {\n	background: var(--office-call-danger);\n	color: var(--office-call-foreground);\n}\n.leave:hover:not(:disabled) {\n	background: var(--office-call-danger-hover);\n}\n@media (max-width: 767px) {\n	.text {\n		display: none;\n	}\n	.info {\n		display: none;\n	}\n}\n";
+
+// src/teams/call-controls.ts
+var formatElapsed = (ms) => {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const pad = (n) => String(n).padStart(2, "0");
+  const h = Math.floor(total / 3600);
+  return `${h ? `${h}:` : ""}${pad(Math.floor(total % 3600 / 60))}:${pad(total % 60)}`;
+};
+var OfficeUiCallControls = class extends TeamsElement {
+  static styles = withStyles(call_controls_default);
+  static properties = {
+    heading: { type: String },
+    startedAt: { type: Number, attribute: "started-at" },
+    mic: { type: Boolean },
+    camera: { type: Boolean },
+    screen: { type: Boolean },
+    hand: { type: Boolean },
+    panel: { type: String },
+    shareUnavailable: { type: Boolean, attribute: "share-unavailable" },
+    now: { state: true }
+  };
+  timer;
+  constructor() {
+    super();
+    this.heading = "";
+    this.startedAt = 0;
+    this.mic = false;
+    this.camera = false;
+    this.screen = false;
+    this.hand = false;
+    this.panel = "";
+    this.shareUnavailable = false;
+    this.now = Date.now();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "toolbar");
+    this.setAttribute("aria-label", "Meeting controls");
+    this.timer = setInterval(() => this.now = Date.now(), 1e3);
+  }
+  disconnectedCallback() {
+    clearInterval(this.timer);
+    super.disconnectedCallback();
+  }
+  willUpdate(_changed) {
+    if (!this.startedAt) this.now = this.startedAt;
+  }
+  button(action, label, glyph, state = {}) {
+    return html`
+			<button
+				type="button"
+				data-action=${action}
+				data-off=${String(Boolean(state.off))}
+				aria-label=${label}
+				aria-pressed=${state.on === void 0 ? nothing : String(state.on)}
+				title=${label}
+				?disabled=${state.disabled}
+				@click=${() => this.fire("office-call-action", { action })}
+			>
+				${icon(glyph)}<span class="text">${label}</span>
+			</button>
+		`;
+  }
+  render() {
+    return html`
+			<div class="info">
+				<span class="heading">${this.heading}</span
+				>${this.startedAt ? html`<time>${formatElapsed(this.now - this.startedAt)}</time>` : nothing}
+			</div>
+			<div class="actions">
+				${this.button("chat", "Chat", "chat", { on: this.panel === "chat" })}
+				${this.button("people", "People", "users", { on: this.panel === "people" })}
+				${this.button("hand", this.hand ? "Lower" : "Raise", "hand", { on: this.hand })}
+				${this.button("camera", this.camera ? "Camera off" : "Camera on", this.camera ? "video" : "videoOff", { off: !this.camera })}
+				${this.button("mic", this.mic ? "Mute" : "Unmute", this.mic ? "mic" : "micOff", { off: !this.mic })}
+				${this.button("screen", this.screen ? "Stop sharing" : "Share", "screenShare", { on: this.screen, disabled: this.shareUnavailable })}
+				<button
+					type="button"
+					class="leave"
+					aria-label="Leave call"
+					@click=${() => this.fire("office-call-action", { action: "leave" })}
+				>
+					${icon("phoneOff")}<span class="text">Leave</span>
+				</button>
+			</div>
+		`;
+  }
+};
+var defineCallControls = definer("office-ui-call-controls", () => OfficeUiCallControls);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/teams/call-grid.css?raw
+var call_grid_default = ":host {\n	display: block;\n	min-height: 0;\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n.empty {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	margin: 0;\n	color: var(--office-call-muted-foreground);\n}\n.grid {\n	display: grid;\n	gap: var(--office-space-2);\n	height: 100%;\n	padding: var(--office-space-2);\n	grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));\n	grid-auto-rows: minmax(0, 1fr);\n}\n.grid[data-spotlight='true'] {\n	grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);\n	grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr));\n}\n.grid[data-spotlight='true'] .tile[data-main='true'] {\n	grid-row: 1 / span var(--rows, 1);\n}\n\n.tile {\n	position: relative;\n	display: grid;\n	place-items: center;\n	min-height: 6em;\n	overflow: hidden;\n	border-radius: var(--office-radius-lg);\n	background: var(--office-call-tile);\n}\nvideo {\n	position: absolute;\n	inset: 0;\n	width: 100%;\n	height: 100%;\n	object-fit: cover;\n	background: var(--office-call-background);\n}\n.tile[data-screen='true'] video {\n	object-fit: contain;\n}\n.tile[data-self='true'] video {\n	transform: scaleX(-1);\n}\n.tile[data-self='true'][data-screen='true'] video {\n	transform: none;\n}\n\n.name {\n	position: absolute;\n	inset-inline-start: var(--office-space-2);\n	inset-block-end: var(--office-space-2);\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	max-width: calc(100% - 2 * var(--office-space-2));\n	padding: var(--office-space-0) var(--office-space-2);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-scrim);\n	font-size: var(--office-font-size-sm);\n}\n.name span:last-child {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.muted {\n	display: grid;\n	color: var(--office-call-danger);\n}\n.hand {\n	position: absolute;\n	inset-block-start: var(--office-space-2);\n	inset-inline-end: var(--office-space-2);\n	font-size: 1.5em;\n}\n.status {\n	position: absolute;\n	inset-block-start: var(--office-space-2);\n	inset-inline-start: var(--office-space-2);\n	padding: 0 var(--office-space-2);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-scrim);\n	font-size: var(--office-font-size-xs);\n}\n";
+
+// src/teams/call-grid.ts
+var gridColumns = (n) => Math.max(1, Math.ceil(Math.sqrt(n)));
+var OfficeUiCallGrid = class extends TeamsElement {
+  static styles = withStyles(call_grid_default);
+  static properties = { participants: { attribute: false } };
+  constructor() {
+    super();
+    this.participants = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "list");
+    this.setAttribute("aria-label", "Participants");
+  }
+  render() {
+    const people = this.participants;
+    if (people.length === 0) return html`<p class="empty">Nobody is in the call</p>`;
+    const sharer = people.find((p) => p.screen);
+    const spotlight = sharer !== void 0 && people.length > 1;
+    const ordered = sharer ? [sharer, ...people.filter((p) => p !== sharer)] : people;
+    const style = `--cols:${gridColumns(people.length)};--rows:${Math.max(1, people.length - 1)}`;
+    return html`
+			<div class="grid" data-spotlight=${String(spotlight)} style=${style}>
+				${repeat(
+      ordered,
+      (p) => p.id,
+      (p, i) => this.tile(p, spotlight && i === 0)
+    )}
+			</div>
+		`;
+  }
+  tile(p, main) {
+    const showVideo = Boolean(p.stream) && (p.video || p.screen || !p.self);
+    const showAvatar = !showVideo || !p.video && !p.screen;
+    return html`
+			<div
+				class="tile"
+				role="listitem"
+				data-self=${String(Boolean(p.self))}
+				data-screen=${String(Boolean(p.screen))}
+				data-main=${String(main)}
+			>
+				${showVideo ? html`<video
+								autoplay
+								playsinline
+								.muted=${Boolean(p.self)}
+								.srcObject=${p.stream ?? null}
+							></video>` : nothing}
+				${showAvatar ? html`<office-ui-avatar size="xl" name=${p.name} seed=${p.id}></office-ui-avatar>` : nothing}
+				<div class="name">
+					${p.audio === false ? html`<span class="muted">${icon("micOff")}</span>` : nothing}
+					<span>${p.self ? `${p.name} (you)` : p.name}</span>
+				</div>
+				${p.hand ? html`<span class="hand" role="img" aria-label="Hand raised">✋</span>` : nothing}
+				${!p.self && p.connection && p.connection !== "connected" ? html`<span class="status"
+								>${p.connection === "failed" ? "Connection failed" : "Connecting\u2026"}</span
+							>` : nothing}
+			</div>
+		`;
+  }
+};
+var defineCallGrid = definer("office-ui-call-grid", () => OfficeUiCallGrid);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/teams/channel-list.css?raw
+var channel_list_default = ":host {\n	display: block;\n	overflow: auto;\n}\n.team {\n	display: flex;\n	align-items: center;\n	padding: var(--office-space-1) var(--office-space-2) var(--office-space-1) var(--office-space-1);\n}\n.toggle {\n	display: flex;\n	flex: 1;\n	align-items: center;\n	gap: var(--office-space-1);\n	min-width: 0;\n	padding: var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	font-weight: var(--office-font-weight-bold);\n	text-align: start;\n}\n.toggle:hover,\n.add:hover {\n	background: var(--office-selected);\n}\n.chevron {\n	display: grid;\n	transition: transform var(--office-duration-fast);\n}\n.chevron[data-open='true'] {\n	transform: rotate(90deg);\n}\n.name {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.add {\n	display: grid;\n	place-items: center;\n	width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\nul {\n	margin: 0;\n	padding: 0 var(--office-space-2);\n	list-style: none;\n}\nul[hidden] {\n	display: none;\n}\n.row {\n	position: relative;\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3) var(--office-space-2) var(--office-space-5);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n	text-align: start;\n}\n.row:hover {\n	background: var(--office-selected);\n}\n.row[aria-current='true'] {\n	background: var(--office-teams-brand-subtle);\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.row[aria-current='true']::before {\n	content: '';\n	position: absolute;\n	inset-inline-start: 0;\n	inset-block: 20%;\n	width: var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n}\n.row[data-unread='true'] {\n	color: var(--office-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.title {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.live {\n	display: grid;\n	color: var(--office-call-live);\n}\n.count {\n	min-width: 1.6em;\n	padding: 0 var(--office-space-1);\n	border-radius: var(--office-radius-full);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: var(--office-font-size-xs);\n	line-height: 1.6;\n	text-align: center;\n}\n";
+
+// src/teams/channel-list.ts
+var OfficeUiChannelList = class extends TeamsElement {
+  static styles = withStyles(channel_list_default);
+  static properties = {
+    heading: { type: String },
+    channels: { attribute: false },
+    selectedId: { type: String, attribute: "selected-id" },
+    collapsed: { state: true }
+  };
+  constructor() {
+    super();
+    this.heading = "Channels";
+    this.channels = [];
+    this.selectedId = "";
+    this.collapsed = false;
+  }
+  render() {
+    return html`
+			<div class="team">
+				<button
+					class="toggle"
+					type="button"
+					aria-expanded=${String(!this.collapsed)}
+					@click=${() => this.collapsed = !this.collapsed}
+				>
+					<span class="chevron" data-open=${String(!this.collapsed)}>${icon("chevronRight")}</span>
+					<span class="name">${this.heading}</span>
+				</button>
+				<button
+					class="add"
+					type="button"
+					title="Add channel"
+					aria-label="Add channel"
+					@click=${() => this.fire("office-channel-create", {})}
+				>
+					${icon("plus")}
+				</button>
+			</div>
+			<ul ?hidden=${this.collapsed}>
+				${this.channels.map(
+      (c) => html`
+						<li>
+							<button
+								class="row"
+								type="button"
+								aria-current=${c.id === this.selectedId ? "true" : "false"}
+								data-unread=${c.unread ? "true" : "false"}
+								@click=${() => this.fire("office-channel-select", { id: c.id })}
+							>
+								${icon(c.kind === "direct" ? "message" : "hash")}
+								<span class="title">${c.name}</span>
+								${c.live ? html`<span class="live" title="Call in progress">${icon("video")}</span>` : ""}
+								${c.unread ? html`<span class="count">${c.unread > 99 ? "99+" : c.unread}</span>` : ""}
+							</button>
+						</li>
+					`
+    )}
+			</ul>
+		`;
+  }
+};
+var defineChannelList = definer("office-ui-channel-list", () => OfficeUiChannelList);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/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";
+
+// src/teams/chat-composer.ts
+var EMOJI = [
+  "\u{1F600}",
+  "\u{1F604}",
+  "\u{1F602}",
+  "\u{1F642}",
+  "\u{1F609}",
+  "\u{1F60D}",
+  "\u{1F914}",
+  "\u{1F62E}",
+  "\u{1F622}",
+  "\u{1F621}",
+  "\u{1F44D}",
+  "\u{1F44E}",
+  "\u{1F44F}",
+  "\u{1F64F}",
+  "\u{1F4AA}",
+  "\u{1F389}",
+  "\u{1F525}",
+  "\u2764\uFE0F",
+  "\u2705",
+  "\u{1F440}"
+];
+var MAX_FILES = 10;
+var OfficeUiChatComposer = class extends TeamsElement {
+  static styles = withStyles(chat_composer_default);
+  static properties = {
+    typing: { attribute: false },
+    replyingTo: { attribute: false },
+    editing: { type: Boolean },
+    disabled: { type: Boolean, reflect: true },
+    placeholder: { type: String },
+    value: { type: String },
+    files: { state: true },
+    emojiOpen: { state: true }
+  };
+  lastTyping = 0;
+  constructor() {
+    super();
+    this.typing = [];
+    this.replyingTo = null;
+    this.editing = false;
+    this.disabled = false;
+    this.placeholder = "Type a message";
+    this.value = "";
+    this.files = [];
+    this.emojiOpen = false;
+  }
+  updated(changed) {
+    if (changed.has("replyingTo") || changed.has("editing")) {
+      if (this.replyingTo !== null || this.editing)
+        this.renderRoot.querySelector("textarea")?.focus();
+    }
+  }
+  get canSend() {
+    return !this.disabled && (this.value.trim() !== "" || this.files.length > 0);
+  }
+  submit() {
+    if (!this.canSend) return;
+    const { value: text, files } = this;
+    this.value = "";
+    this.files = [];
+    this.emojiOpen = false;
+    this.fire("office-chat-send", { text, files });
+  }
+  onInput(event) {
+    this.value = event.target.value;
+    const now = Date.now();
+    if (now - this.lastTyping > 2e3) {
+      this.lastTyping = now;
+      this.fire("office-chat-typing", {});
+    }
+  }
+  onKeydown(event) {
+    if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
+      event.preventDefault();
+      this.submit();
+    } else if (event.key === "Escape" && (this.replyingTo !== null || this.editing)) {
+      this.fire("office-chat-cancel", {});
+    }
+  }
+  pick(event) {
+    const input = event.target;
+    this.files = [...this.files, ...Array.from(input.files ?? [])].slice(0, MAX_FILES);
+    input.value = "";
+  }
+  typingLine() {
+    const n = this.typing.slice(0, 3);
+    if (n.length === 0) return "";
+    return n.length === 1 ? `${n[0]} is typing\u2026` : `${n.join(", ")} are typing\u2026`;
+  }
+  render() {
+    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">
+				${banner ? html`<div class="banner">
+								<span>${banner}</span>
+								<button
+									type="button"
+									aria-label="Cancel"
+									@click=${() => this.fire("office-chat-cancel", {})}
+								>
+									${icon("close")}
+								</button>
+							</div>` : nothing}
+				<textarea
+					rows="1"
+					aria-label="Message"
+					.value=${live(this.value)}
+					placeholder=${this.placeholder}
+					?disabled=${this.disabled}
+					@input=${this.onInput}
+					@keydown=${this.onKeydown}
+				></textarea>
+				${this.files.length ? html`<ul class="pending">
+								${this.files.map(
+      (f, i) => html`<li>
+										<button
+											type="button"
+											aria-label=${`Remove ${f.name}`}
+											@click=${() => this.files = this.files.filter((_, j) => j !== i)}
+										>
+											${f.name} ${icon("close")}
+										</button>
+									</li>`
+    )}
+							</ul>` : nothing}
+				<div class="bar">
+					<button
+						type="button"
+						title="Attach files"
+						aria-label="Attach files"
+						?disabled=${this.disabled}
+						@click=${() => this.renderRoot.querySelector("input[type=file]")?.click()}
+					>
+						${icon("paperclip")}
+					</button>
+					<div class="emoji">
+						<button
+							type="button"
+							title="Emoji"
+							aria-label="Emoji"
+							aria-expanded=${String(this.emojiOpen)}
+							?disabled=${this.disabled}
+							@click=${() => this.emojiOpen = !this.emojiOpen}
+						>
+							${icon("smile")}
+						</button>
+						${this.emojiOpen ? html`<div class="picker" role="menu">
+										${EMOJI.map(
+      (e) => html`<button
+												type="button"
+												role="menuitem"
+												@click=${() => {
+        this.value += e;
+        this.emojiOpen = false;
+        this.renderRoot.querySelector("textarea")?.focus();
+      }}
+											>
+												${e}
+											</button>`
+    )}
+									</div>` : nothing}
+					</div>
+					<span class="spacer"></span>
+					<button
+						type="button"
+						class="send"
+						title="Send"
+						aria-label="Send message"
+						?disabled=${!this.canSend}
+						@click=${this.submit}
+					>
+						${icon("send")}
+					</button>
+				</div>
+				<input type="file" multiple hidden @change=${this.pick} />
+			</div>
+		`;
+  }
+};
+var defineChatComposer = definer("office-ui-chat-composer", () => OfficeUiChatComposer);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/teams/chat-list.css?raw
+var chat_list_default = ":host {\n	display: block;\n	min-height: 0;\n	overflow: auto;\n	padding: var(--office-space-2) var(--office-space-5);\n}\n.empty {\n	margin: var(--office-space-6) 0;\n	color: var(--office-teams-text-subtle);\n	text-align: center;\n}\n\n.day {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	margin: var(--office-space-4) 0 var(--office-space-2);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.day::before,\n.day::after {\n	content: '';\n	flex: 1;\n	height: var(--office-border-width);\n	background: var(--office-teams-divider);\n}\n\n.msg {\n	position: relative;\n	display: grid;\n	grid-template-columns: 2.3em minmax(0, 1fr);\n	column-gap: var(--office-space-3);\n	padding: var(--office-space-0) 0;\n}\n.msg[data-grouped='false'] {\n	margin-top: var(--office-space-3);\n}\n.gutter {\n	padding-top: var(--office-space-1);\n}\nheader {\n	display: flex;\n	align-items: baseline;\n	gap: var(--office-space-2);\n	margin-bottom: var(--office-space-0);\n}\n.author {\n	font-weight: var(--office-font-weight-bold);\n}\ntime,\n.edited,\n.file-size {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n\n.bubble {\n	display: inline-block;\n	max-width: min(100%, 44em);\n	padding: var(--office-space-2) var(--office-space-3);\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-bubble);\n	line-height: var(--office-line-height);\n	overflow-wrap: anywhere;\n}\n.text {\n	white-space: pre-wrap;\n}\n.msg[data-own='true'] .bubble {\n	background: var(--office-teams-bubble-own);\n}\n.deleted {\n	color: var(--office-teams-text-subtle);\n	font-style: italic;\n}\nblockquote {\n	margin: 0 0 var(--office-space-1);\n	padding-inline-start: var(--office-space-2);\n	border-inline-start: var(--office-border-width-thick) solid var(--office-teams-brand);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n	white-space: normal;\n}\nblockquote strong {\n	display: block;\n	color: var(--office-foreground);\n}\n\n.files {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-2);\n	margin-top: var(--office-space-2);\n	white-space: normal;\n}\n.file {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n	min-width: 14em;\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	text-align: start;\n}\n.file:hover {\n	border-color: var(--office-teams-brand);\n}\n.badge {\n	display: grid;\n	place-items: center;\n	width: 2.2em;\n	height: 2.2em;\n	border-radius: var(--office-radius);\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.meta {\n	display: grid;\n}\n\n.reactions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin-top: var(--office-space-1);\n}\n.pill {\n	display: inline-flex;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	font-size: var(--office-font-size-sm);\n}\n.pill[aria-pressed='true'] {\n	border-color: var(--office-teams-brand);\n	background: var(--office-teams-brand-subtle);\n}\n\n.toolbar {\n	position: absolute;\n	inset-block-start: calc(-1 * var(--office-space-3));\n	inset-inline-end: 0;\n	display: none;\n	gap: var(--office-space-0);\n	padding: var(--office-space-0);\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.msg:hover .toolbar,\n.msg:focus-within .toolbar {\n	display: flex;\n}\n.toolbar button {\n	display: grid;\n	place-items: center;\n	min-width: 2em;\n	height: 2em;\n	border: 0;\n	border-radius: var(--office-radius-sm);\n	background: transparent;\n}\n.toolbar button:hover {\n	background: var(--office-selected);\n}\n";
+
+// src/teams/chat-list.ts
+var QUICK_REACTIONS = ["\u{1F44D}", "\u2764\uFE0F", "\u{1F602}", "\u{1F62E}", "\u{1F622}", "\u{1F389}"];
+var KIND_LETTER = {
+  docx: "W",
+  xlsx: "X",
+  pptx: "P",
+  vsdx: "V",
+  other: "F"
+};
+var GROUP_MS = 5 * 6e4;
+var OfficeUiChatList = class extends TeamsElement {
+  static styles = withStyles(chat_list_default);
+  static properties = {
+    messages: { attribute: false },
+    selfId: { type: String, attribute: "self-id" }
+  };
+  stickToBottom = true;
+  constructor() {
+    super();
+    this.messages = [];
+    this.selfId = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "log");
+    this.setAttribute("aria-live", "polite");
+    this.setAttribute("aria-label", "Messages");
+    this.addEventListener("scroll", () => {
+      this.stickToBottom = this.scrollHeight - this.scrollTop - this.clientHeight < 64;
+    });
+  }
+  updated() {
+    if (this.stickToBottom) this.scrollTop = this.scrollHeight;
+  }
+  render() {
+    if (this.messages.length === 0) return html`<p class="empty">No messages yet. Say hello.</p>`;
+    const byId = new Map(this.messages.map((m) => [m.id, m]));
+    const rows = [];
+    let previous;
+    for (const m of this.messages) {
+      if (!previous || dayLabel(previous.ts) !== dayLabel(m.ts))
+        rows.push(html`<div class="day"><span>${dayLabel(m.ts)}</span></div>`);
+      const grouped = previous !== void 0 && previous.authorId === m.authorId && m.ts - previous.ts < GROUP_MS && !m.replyTo && dayLabel(previous.ts) === dayLabel(m.ts);
+      rows.push(this.message(m, grouped, byId.get(m.replyTo ?? "")));
+      previous = m;
+    }
+    return html`${rows}`;
+  }
+  message(m, grouped, parent) {
+    const own = m.authorId === this.selfId;
+    const reactions = Object.entries(m.reactions ?? {}).filter(([, users]) => users.length > 0);
+    return html`
+			<article class="msg" data-own=${String(own)} data-grouped=${String(grouped)}>
+				<div class="gutter">
+					${grouped ? nothing : html`<office-ui-avatar name=${m.authorName} seed=${m.authorId}></office-ui-avatar>`}
+				</div>
+				<div class="body">
+					${grouped ? nothing : html`<header>
+									<span class="author">${m.authorName}</span>
+									<time>${formatTime(m.ts)}</time>
+								</header>`}
+					<div class="bubble">
+						${parent ? html`<blockquote>
+										<strong>${parent.authorName}</strong
+										>${parent.deleted ? "This message was deleted" : parent.text.slice(0, 120)}
+									</blockquote>` : nothing}
+						${m.deleted ? html`<span class="deleted">This message was deleted</span>` : html`<span class="text">${m.text}</span>${m.editedAt ? html` <span class="edited">(edited)</span>` : nothing}`}
+						${!m.deleted && m.attachments?.length ? this.files(m.attachments) : nothing}
+					</div>
+					${!m.deleted && reactions.length ? html`<div class="reactions">
+									${reactions.map(
+      ([emoji, users]) => html`
+											<button
+												type="button"
+												class="pill"
+												aria-pressed=${String(users.includes(this.selfId))}
+												aria-label=${`${emoji} ${users.length}`}
+												@click=${() => this.fire("office-chat-react", { messageId: m.id, emoji })}
+											>
+												<span>${emoji}</span><span>${users.length}</span>
+											</button>
+										`
+    )}
+								</div>` : nothing}
+					${m.deleted ? nothing : this.toolbar(m, own)}
+				</div>
+			</article>
+		`;
+  }
+  toolbar(m, own) {
+    return html`
+			<div class="toolbar" role="toolbar" aria-label="Message actions">
+				${QUICK_REACTIONS.slice(0, 4).map(
+      (emoji) => html`<button
+						type="button"
+						aria-label=${`React ${emoji}`}
+						@click=${() => this.fire("office-chat-react", { messageId: m.id, emoji })}
+					>
+						${emoji}
+					</button>`
+    )}
+				<button
+					type="button"
+					title="Reply"
+					aria-label="Reply"
+					@click=${() => this.fire("office-chat-reply", { messageId: m.id })}
+				>
+					${icon("reply")}
+				</button>
+				${own ? html`<button
+									type="button"
+									title="Edit"
+									aria-label="Edit"
+									@click=${() => this.fire("office-chat-edit", { messageId: m.id })}
+								>
+									${icon("pencil")}
+								</button>
+								<button
+									type="button"
+									title="Delete"
+									aria-label="Delete"
+									@click=${() => this.fire("office-chat-delete", { messageId: m.id })}
+								>
+									${icon("trash")}
+								</button>` : nothing}
+			</div>
+		`;
+  }
+  files(files) {
+    return html`<div class="files">
+			${files.map(
+      (a) => html`
+					<button
+						type="button"
+						class="file"
+						aria-label=${`Open ${a.name}`}
+						@click=${() => this.fire("office-chat-open-file", { attachment: a })}
+					>
+						<span class="badge" data-kind=${a.kind}>${KIND_LETTER[a.kind]}</span>
+						<span class="meta">
+							<span class="file-name">${a.name}</span>
+							<span class="file-size">${a.kind.toUpperCase()} ${formatSize(a.size)}</span>
+						</span>
+					</button>
+				`
+    )}
+		</div>`;
+  }
+};
+var defineChatList = definer("office-ui-chat-list", () => OfficeUiChatList);
+
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/teams/prejoin.css?raw
+var prejoin_default = ":host {\n	display: grid;\n	place-items: center;\n	padding: var(--office-space-5);\n	background: var(--office-teams-panel);\n}\n.card {\n	display: grid;\n	grid-template-columns: minmax(0, 3fr) minmax(16em, 2fr);\n	width: min(60em, 100%);\n	overflow: hidden;\n	border-radius: var(--office-radius-lg);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow-teams);\n}\n.stage {\n	position: relative;\n	display: grid;\n	place-content: center;\n	justify-items: center;\n	gap: var(--office-space-3);\n	min-height: 18em;\n	background: var(--office-call-background);\n	color: var(--office-call-muted-foreground);\n}\n.stage video {\n	position: absolute;\n	inset: 0;\n	width: 100%;\n	height: 100%;\n	object-fit: cover;\n	transform: scaleX(-1);\n}\n.panel {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-3);\n	padding: var(--office-space-5);\n}\nh2 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n}\n.for {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n}\n.switch {\n	position: relative;\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	cursor: pointer;\n}\n.what {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-2);\n}\n.switch input {\n	position: absolute;\n	inset: 0;\n	margin: 0;\n	opacity: 0;\n	cursor: pointer;\n}\n.track {\n	position: relative;\n	width: 2.6em;\n	height: 1.4em;\n	border-radius: var(--office-radius-full);\n	background: var(--office-border);\n	transition: background var(--office-duration-fast);\n}\n.track::after {\n	content: '';\n	position: absolute;\n	inset-block-start: 0.2em;\n	inset-inline-start: 0.2em;\n	width: 1em;\n	height: 1em;\n	border-radius: 50%;\n	background: var(--office-background);\n	transition: transform var(--office-duration-fast);\n}\n.switch input:checked ~ .track {\n	background: var(--office-teams-brand);\n}\n.switch input:checked ~ .track::after {\n	transform: translateX(1.2em);\n}\n.switch:has(input:focus-visible) {\n	outline: var(--office-focus-width) solid var(--office-ring);\n}\n.actions {\n	display: flex;\n	justify-content: flex-end;\n	gap: var(--office-space-2);\n	margin-top: auto;\n}\n.actions button {\n	padding: var(--office-space-2) var(--office-space-5);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n	font-weight: var(--office-font-weight-bold);\n}\n.actions .join {\n	border-color: transparent;\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n}\n.actions .join:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.actions button:disabled {\n	opacity: 0.6;\n	cursor: wait;\n}\n@media (max-width: 767px) {\n	.card {\n		grid-template-columns: 1fr;\n	}\n}\n";
+
+// src/teams/prejoin.ts
+var OfficeUiPrejoin = class extends TeamsElement {
+  static styles = withStyles(prejoin_default);
+  static properties = {
+    heading: { type: String },
+    name: { type: String },
+    preview: { attribute: false },
+    audio: { type: Boolean },
+    video: { type: Boolean },
+    busy: { type: Boolean }
+  };
+  constructor() {
+    super();
+    this.heading = "";
+    this.name = "";
+    this.preview = null;
+    this.audio = true;
+    this.video = true;
+    this.busy = false;
+  }
+  toggle(label, glyph, on, key) {
+    return html`
+			<label class="switch">
+				<span class="what">${icon(glyph)} ${label}</span>
+				<input
+					type="checkbox"
+					role="switch"
+					.checked=${on}
+					aria-label=${label}
+					@change=${(e) => this.fire("office-prejoin-change", { [key]: e.target.checked })}
+				/>
+				<span class="track" aria-hidden="true"></span>
+			</label>
+		`;
+  }
+  render() {
+    const showVideo = this.video && this.preview;
+    return html`
+			<section class="card">
+				<div class="stage">
+					${showVideo ? html`<video
+									autoplay
+									playsinline
+									muted
+									.muted=${true}
+									.srcObject=${this.preview}
+								></video>` : html`<office-ui-avatar size="xl" name=${this.name}></office-ui-avatar>
+									<p>${this.video ? "Starting camera\u2026" : "Your camera is turned off"}</p>`}
+				</div>
+				<div class="panel">
+					<h2>Choose your audio and video settings</h2>
+					<p class="for">${this.heading}</p>
+					${this.toggle("Camera", this.video ? "video" : "videoOff", this.video, "video")}
+					${this.toggle("Microphone", this.audio ? "mic" : "micOff", this.audio, "audio")}
+					<div class="actions">
+						<button
+							type="button"
+							class="cancel"
+							@click=${() => this.fire("office-prejoin-cancel", {})}
+						>
+							Cancel
+						</button>
+						<button
+							type="button"
+							class="join"
+							?disabled=${this.busy}
+							@click=${() => this.fire("office-prejoin-join", {})}
+						>
+							${this.busy ? "Joining\u2026" : "Join now"}
+						</button>
+					</div>
+					${nothing}
+				</div>
+			</section>
+		`;
+  }
+};
+var definePrejoin = definer("office-ui-prejoin", () => OfficeUiPrejoin);
+
+// src/teams/index.ts
+var TEAMS_TAGS = [
+  "office-ui-avatar",
+  "office-ui-app-rail",
+  "office-ui-channel-list",
+  "office-ui-chat-list",
+  "office-ui-chat-composer",
+  "office-ui-prejoin",
+  "office-ui-call-grid",
+  "office-ui-call-controls"
+];
+function registerTeams() {
+  defineAvatar();
+  defineAppRail();
+  defineChannelList();
+  defineChatList();
+  defineChatComposer();
+  definePrejoin();
+  defineCallGrid();
+  defineCallControls();
+}
+
+export { EMOJI, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsElement, colorFor, dayLabel, defineAppRail, defineAvatar, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, definePrejoin, formatElapsed, formatSize, formatTime, icon, registerTeams, withStyles };