ooxml-ui 1.1.0 → 1.3.0

package/dist/chrome/ruler.d.ts

@@ -1,12 +1,37 @@
 import { OfficeElement } from '../base.js';
 /** Tick subdivisions per unit for a given unit length in CSS pixels, finer as it grows. */
 export declare function rulerDivisions(unitPixels: number): number;
+/** A draggable marker on the ruler (an indent, a tab stop, a margin handle). */
+export interface RulerMarker {
+    /** Identifies the marker in events and in its `data-marker` attribute. */
+    name: string;
+    /** CSS pixels from the ruler's start edge, at 100% zoom. */
+    position: number;
+    /** Which side of the ruler the pointer sits on; defaults to `bottom`. */
+    edge?: 'top' | 'bottom';
+    /** Accessible name of the marker. */
+    label?: string;
+}
+/** Detail of `ruler-marker-move`, `ruler-marker-commit` and `ruler-marker-cancel`. */
+export interface RulerMarkerEventDetail {
+    name: string;
+    /** Pointer position in CSS pixels from the start edge at 100% zoom (zoom already removed). */
+    position: number;
+}
 /**
- * `<office-ui-ruler>`: a decorative Office ruler (inches by default). The product positions it
+ * `<office-ui-ruler>`: an Office ruler (inches by default). The product positions it
  * and says where zero is: `origin` is the CSS-pixel offset of zero from the ruler's start edge,
  * `scale` the CSS pixels per unit (96 at 100% for inches). `orientation="vertical"` draws a
  * side ruler; `direction="reverse"` makes values grow toward the start edge, as Visio's
- * vertical ruler grows upward from the page bottom. Hidden from assistive technology.
+ * vertical ruler grows upward from the page bottom.
+ *
+ * Page rulers add: `extent` (the ruler's own length in px, as long as the page), `marginStart` /
+ * `marginEnd` (shaded margin bands), `zoom` (the ruler is shown at that CSS zoom) and
+ * `labelsWithinMargins` (whole-unit labels only between the margins, counted up from `origin`).
+ * `markers` are draggable: the element fires `ruler-marker-move` while one is dragged (the host
+ * answers by updating `markers` to preview), then `ruler-marker-commit` on release or
+ * `ruler-marker-cancel`; all carry a `RulerMarkerEventDetail`. Without a `label` the ruler is
+ * hidden from assistive technology; with one it is an image with that name.
  */
 export declare class OfficeUiRuler extends OfficeElement {
     static styles: import("lit").CSSResult[];
@@ -24,12 +49,41 @@ export declare class OfficeUiRuler extends OfficeElement {
         direction: {
             type: StringConstructor;
         };
+        extent: {
+            type: NumberConstructor;
+        };
+        marginStart: {
+            type: NumberConstructor;
+        };
+        marginEnd: {
+            type: NumberConstructor;
+        };
+        zoom: {
+            type: NumberConstructor;
+        };
+        labelsWithinMargins: {
+            type: BooleanConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        markers: {
+            attribute: boolean;
+        };
     };
     orientation: string;
     origin: number;
     scale: number;
     direction: string;
+    extent: number;
+    marginStart: number;
+    marginEnd: number;
+    zoom: number;
+    labelsWithinMargins: boolean;
+    label: string;
+    markers: readonly RulerMarker[];
     private frame;
+    private zoomApplied;
     private observer;
     constructor();
     connectedCallback(): void;
@@ -37,6 +91,10 @@ export declare class OfficeUiRuler extends OfficeElement {
     private schedule;
     protected willUpdate(): void;
     protected updated(): void;
+    private get zoomFactor();
+    private pointerPosition;
+    private emit;
+    private dragMarker;
     private draw;
     protected render(): import("lit").TemplateResult<1>;
 }

package/dist/chrome/ruler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ruler.d.ts","sourceRoot":"","sources":["../../src/chrome/ruler.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAiB,MAAM,SAAS,CAAC;AAKvD,2FAA2F;AAC3F,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED;;;;;;GAMG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC/C,OAAgB,MAAM,4BAAsB;IAC5C,OAAgB,UAAU;QACzB,WAAW;YAAI,IAAI;YAAU,OAAO;;QACpC,MAAM;YAAI,IAAI;;QACd,KAAK;YAAI,IAAI;;QACb,SAAS;YAAI,IAAI;;MAChB;IACM,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,QAAQ,CAA6B;IAE7C,cAMC;IAEQ,iBAAiB,IAAI,IAAI,CAMjC;IAEQ,oBAAoB,IAAI,IAAI,CAKpC;IAED,OAAO,CAAC,QAAQ;IAOhB,UAAmB,UAAU,IAAI,IAAI,CAEpC;IAED,UAAmB,OAAO,IAAI,IAAI,CAEjC;IAED,OAAO,CAAC,IAAI;IAgEZ,UAAmB,MAAM,oCAExB;CACD;AAED,eAAO,MAAM,WAAW,+BAAkD,CAAC"}
+{"version":3,"file":"ruler.d.ts","sourceRoot":"","sources":["../../src/chrome/ruler.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAiB,MAAM,SAAS,CAAC;AAKvD,2FAA2F;AAC3F,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED,gFAAgF;AAChF,MAAM,WAAW,WAAW;IAC3B,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,QAAQ,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,sFAAsF;AACtF,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,8FAA8F;IAC9F,QAAQ,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC/C,OAAgB,MAAM,4BAAsB;IAC5C,OAAgB,UAAU;QACzB,WAAW;YAAI,IAAI;YAAU,OAAO;;QACpC,MAAM;YAAI,IAAI;;QACd,KAAK;YAAI,IAAI;;QACb,SAAS;YAAI,IAAI;;QACjB,MAAM;YAAI,IAAI;;QACd,WAAW;YAAI,IAAI;;QACnB,SAAS;YAAI,IAAI;;QACjB,IAAI;YAAI,IAAI;;QACZ,mBAAmB;YAAI,IAAI;;QAC3B,KAAK;YAAI,IAAI;;QACb,OAAO;YAAI,SAAS;;MACnB;IACM,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB,EAAE,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IACxC,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,QAAQ,CAA6B;IAE7C,cAaC;IAEQ,iBAAiB,IAAI,IAAI,CAMjC;IAEQ,oBAAoB,IAAI,IAAI,CAKpC;IAED,OAAO,CAAC,QAAQ;IAOhB,UAAmB,UAAU,IAAI,IAAI,CAUpC;IAED,UAAmB,OAAO,IAAI,IAAI,CAcjC;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,IAAI;IAwEZ,UAAmB,MAAM,oCAoBxB;CACD;AAED,eAAO,MAAM,WAAW,+BAAkD,CAAC"}

package/dist/chrome/status-bar.d.ts

@@ -51,7 +51,9 @@ export interface OfficeStatusBarState {
  * Controlled: set `state` (`OfficeStatusBarState`: start texts, toggles, view switches and a zoom
  * cluster, all translated); every button emits `office-status-activate` `{ id }` (static
  * `activateEvent` lets a product subclass keep its published name). Slots stay available in
- * controlled mode: the default after the texts, `collaboration` and `end` before the zoom. Keyed
+ * controlled mode: the default after the texts, `summary` at the start of the trailing group
+ * before the toggles and views (Excel's selection statistics), `collaboration` and `end` before
+ * the zoom. Keyed
  * children are patched in place, so a focused button survives updates.
  */
 export declare class OfficeUiStatusBar extends OfficeElement {

package/dist/chrome/status-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../src/chrome/status-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,aAAa,EAAiB,MAAM,SAAS,CAAC;AAKvD,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEpE,wFAAwF;AACxF,MAAM,WAAW,gBAAgB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/C,kDAAkD;IAClD,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC;AAED,+FAA+F;AAC/F,MAAM,WAAW,kBAAkB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B;AAED,8FAA8F;AAC9F,MAAM,WAAW,oBAAoB;IACpC,KAAK,CAAC,EAAE,SAAS,gBAAgB,EAAE,GAAG,SAAS,CAAC;IAChD,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACpD,8FAA8F;IAC9F,KAAK,CAAC,EAAE,SAAS,kBAAkB,EAAE,GAAG,KAAK,GAAG,SAAS,CAAC;IAC1D,4FAA4F;IAC5F,IAAI,CAAC,EACF;QACA,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,qDAAqD;QACrD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QAC7B,0CAA0C;QAC1C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAC3B,GACD,SAAS,CAAC;CACb;AAED;;;;;;;;GAQG;AACH,qBAAa,iBAAkB,SAAQ,aAAa;IACnD,MAAM,CAAC,aAAa,SAA4B;IAChD,OAAgB,MAAM,4BAAsB;IAC5C,OAAgB,UAAU;QAEzB,KAAK;YAAI,IAAI;;QACb,gBAAgB;YAAI,KAAK;;MACxB;IACM,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,KAAK,CAAmC;IAEhD,cAIC;IAED,IAAI,KAAK,IAAI,oBAAoB,GAAG,SAAS,CAE5C;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,GAAG,SAAS,EAIvD;IAED,OAAO,CAAC,QAAQ;IAIhB,8EAA8E;IAC9E,OAAO,CAAC,SAAS;IAMjB,UAAmB,UAAU,IAAI,IAAI,CAGpC;IAED,OAAO,CAAC,MAAM;IAgBd,OAAO,CAAC,QAAQ;IAahB,UAAmB,MAAM,sBAkExB;CACD;AAED,eAAO,MAAM,eAAe,+BAA2D,CAAC"}
+{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../src/chrome/status-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,aAAa,EAAiB,MAAM,SAAS,CAAC;AAKvD,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEpE,wFAAwF;AACxF,MAAM,WAAW,gBAAgB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC/C,kDAAkD;IAClD,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC;AAED,+FAA+F;AAC/F,MAAM,WAAW,kBAAkB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B;AAED,8FAA8F;AAC9F,MAAM,WAAW,oBAAoB;IACpC,KAAK,CAAC,EAAE,SAAS,gBAAgB,EAAE,GAAG,SAAS,CAAC;IAChD,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACpD,8FAA8F;IAC9F,KAAK,CAAC,EAAE,SAAS,kBAAkB,EAAE,GAAG,KAAK,GAAG,SAAS,CAAC;IAC1D,4FAA4F;IAC5F,IAAI,CAAC,EACF;QACA,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,MAAM,CAAC;QAChB,qDAAqD;QACrD,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;QAC7B,0CAA0C;QAC1C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;KAC3B,GACD,SAAS,CAAC;CACb;AAED;;;;;;;;;;GAUG;AACH,qBAAa,iBAAkB,SAAQ,aAAa;IACnD,MAAM,CAAC,aAAa,SAA4B;IAChD,OAAgB,MAAM,4BAAsB;IAC5C,OAAgB,UAAU;QAEzB,KAAK;YAAI,IAAI;;QACb,gBAAgB;YAAI,KAAK;;MACxB;IACM,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,gBAAgB,EAAE,OAAO,CAAC;IAClC,OAAO,CAAC,KAAK,CAAmC;IAEhD,cAIC;IAED,IAAI,KAAK,IAAI,oBAAoB,GAAG,SAAS,CAE5C;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,oBAAoB,GAAG,IAAI,GAAG,SAAS,EAIvD;IAED,OAAO,CAAC,QAAQ;IAIhB,8EAA8E;IAC9E,OAAO,CAAC,SAAS;IAMjB,UAAmB,UAAU,IAAI,IAAI,CAGpC;IAED,OAAO,CAAC,MAAM;IAgBd,OAAO,CAAC,QAAQ;IAahB,UAAmB,MAAM,sBAmExB;CACD;AAED,eAAO,MAAM,eAAe,+BAA2D,CAAC"}

package/dist/{chunk-JFJXBYRD.js → chunk-2WLRFPMW.js}

@@ -38,6 +38,8 @@ var OFFICE_TOKENS = {
   "--office-font-size-md": "14px",
   "--office-font-size-lg": "15px",
   "--office-font-size-xl": "18px",
+  /** Smallest text size that keeps mobile browsers from zooming a focused field. */
+  "--office-font-size-touch": "16px",
   "--office-font-weight-medium": "500",
   "--office-font-weight-bold": "600",
   "--office-line-height": "1.4",
@@ -70,6 +72,8 @@ var OFFICE_TOKENS = {
   // Sizes
   "--office-target-size": "28px",
   "--office-target-size-touch": "44px",
+  /** Minimum pointer target on touch layouts. */
+  "--office-touch-target": "36px",
   "--office-control-height": "24px",
   "--office-control-height-md": "28px",
   "--office-control-height-lg": "32px",
@@ -158,6 +162,7 @@ var OFFICE_TOKENS = {
   "--office-launcher-height": "14px",
   "--office-tab-indicator-width": "2.5px",
   "--office-status-bar-height": "24px",
+  "--office-status-bar-separator-opacity": "1",
   "--office-tab-height": "28px",
   "--office-tab-max-width": "220px",
   "--office-zoom-slider-width": "120px",
@@ -207,6 +212,8 @@ var OFFICE_TOKENS = {
   "--office-avatar-size": "48px",
   "--office-avatar-color": "var(--office-muted-foreground, #6b7280)",
   "--office-toast-width": "360px",
+  "--office-comments-pane-width": "300px",
+  "--office-comment-avatar-size": "24px",
   "--office-account-field-width": "320px",
   // Component: galleries
   "--office-gallery-trigger-height": "24px",
@@ -225,6 +232,8 @@ var OFFICE_TOKENS = {
   "--office-title-bar-mark-size": "20px",
   "--office-title-bar-mark-background": "var(--office-accent, #2563eb)",
   "--office-title-bar-mark-foreground": "var(--office-accent-foreground, #ffffff)",
+  "--office-title-bar-name-foreground": "var(--office-title-bar-foreground, var(--office-foreground, #1f2937))",
+  "--office-title-bar-result-selected": "var(--office-selected, #e5e7eb)",
   "--office-title-bar-name-max-width": "240px",
   "--office-title-bar-name-max-width-narrow": "140px",
   "--office-title-bar-search-max-width": "448px",

package/dist/{chunk-X7RINDJQ.js → chunk-56A2JK63.js}

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

package/dist/{chunk-KVKKXRL7.js → chunk-5OFAJDMQ.js}

@@ -1,8 +1,8 @@
-import { THEME_CSS, installOfficeUiTheme } from './chunk-X7RINDJQ.js';
-import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-M5DTJSOV.js';
-import { registerIcon, getIcon } from './chunk-BOX43CZD.js';
-import { initialsOf, definePresence } from './chunk-3FPW7M6U.js';
-import { definer, OfficeElement, controlStyles } from './chunk-USDLALB5.js';
+import { THEME_CSS, installOfficeUiTheme } from './chunk-56A2JK63.js';
+import { defineMenuButton, defineMenuItem, registerControls, defineSwitch } from './chunk-723JC3OC.js';
+import { registerIcon, getIcon } from './chunk-M6GF5ED2.js';
+import { initialsOf, definePresence } from './chunk-TWQ45BFL.js';
+import { definer, OfficeElement, controlStyles } from './chunk-IY7QJLQG.js';
 import { html, nothing, LitElement, unsafeCSS, svg } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { live } from 'lit/directives/live.js';
@@ -395,7 +395,7 @@ var OfficeUiChannelList = class extends TeamsElement {
 var defineChannelList = definer("office-ui-channel-list", () => OfficeUiChannelList);
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/chat-composer.css?raw
-var chat_composer_default = ":host {\n	display: block;\n	padding: 0 var(--office-space-5) var(--office-space-4);\n}\n.typing {\n	min-height: 1.4em;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.box {\n	position: relative;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-block-end: var(--office-border-width-thick) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-field-background);\n}\n.box:focus-within {\n	border-block-end-color: var(--office-teams-brand);\n}\n.banner {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n}\ntextarea {\n	display: block;\n	width: 100%;\n	min-height: 3.2em;\n	max-height: 12em;\n	padding: var(--office-space-3);\n	border: 0;\n	outline: 0;\n	resize: none;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	field-sizing: content;\n}\n.bar {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2) var(--office-space-2);\n}\n.spacer {\n	flex: 1;\n}\n.bar button,\n.banner button,\n.pending button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\n.bar button:hover:not(:disabled),\n.banner button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.bar .send:not(:disabled) {\n	color: var(--office-teams-brand);\n}\n.pending {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\n.pending button {\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-foreground);\n}\n.emoji {\n	position: relative;\n}\n.picker {\n	position: absolute;\n	inset-block-end: calc(100% + var(--office-space-1));\n	inset-inline-start: 0;\n	z-index: 2;\n	display: grid;\n	grid-template-columns: repeat(5, 1fr);\n	gap: var(--office-space-0);\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.picker button {\n	font-size: 1.3em;\n}\n";
+var chat_composer_default = ":host {\n	display: block;\n	min-width: 0;\n	flex: none;\n	padding: 0 var(--office-space-5) var(--office-space-4);\n}\n.typing {\n	min-height: 1.4em;\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-xs);\n}\n.box {\n	position: relative;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-block-end: var(--office-border-width-thick) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-field-background);\n}\n.box:focus-within {\n	border-block-end-color: var(--office-teams-brand);\n}\n.banner {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-1) var(--office-space-3);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n}\ntextarea {\n	display: block;\n	width: 100%;\n	min-height: 3.2em;\n	max-height: 12em;\n	padding: var(--office-space-3);\n	border: 0;\n	outline: 0;\n	resize: none;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	overflow-y: auto;\n	line-height: 1.5;\n}\n.bar {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1);\n	padding: 0 var(--office-space-2) var(--office-space-2);\n}\n.spacer {\n	flex: 1;\n}\n.bar button,\n.banner button,\n.pending button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-1);\n	min-width: 2.2em;\n	height: 2.2em;\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: var(--office-teams-text-subtle);\n}\n.bar button:hover:not(:disabled),\n.banner button:hover {\n	background: var(--office-selected);\n	color: var(--office-foreground);\n}\n.bar button:disabled {\n	opacity: 0.45;\n	cursor: not-allowed;\n}\n.bar .send:not(:disabled) {\n	color: var(--office-teams-brand);\n}\n.pending {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\n.pending button {\n	padding: 0 var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	background: var(--office-teams-panel);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-foreground);\n}\n.emoji {\n	position: relative;\n}\n.picker {\n	position: absolute;\n	inset-block-end: calc(100% + var(--office-space-1));\n	inset-inline-start: 0;\n	z-index: 2;\n	display: grid;\n	grid-template-columns: repeat(5, 1fr);\n	gap: var(--office-space-0);\n	padding: var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.picker button {\n	font-size: 1.3em;\n}\n\ntextarea:focus-visible {\n	outline: none;\n}\n.box:focus-within {\n	border-color: var(--office-teams-brand);\n}\n.pending {\n	max-height: 7em;\n	overflow-y: auto;\n	padding-block-end: var(--office-space-2);\n}\n.pending li {\n	min-width: 0;\n	max-width: 100%;\n}\n.pending button {\n	max-width: 100%;\n	height: auto;\n	min-height: 2.4em;\n}\n.file-label {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	min-width: 0;\n}\n@media (max-width: 600px) {\n	:host {\n		padding: 0 var(--office-space-2) var(--office-space-2);\n	}\n	textarea {\n		font-size: var(--office-font-size-touch);\n		min-height: 3em;\n	}\n	.bar button {\n		min-width: var(--office-touch-target);\n		height: var(--office-touch-target);\n	}\n}\n";
 var EMOJI = [
   "\u{1F600}",
   "\u{1F604}",
@@ -445,7 +445,19 @@ var OfficeUiChatComposer = class extends TeamsElement {
     this.missingFiles = [];
     this.emojiOpen = false;
   }
+  focusMessage() {
+    void this.updateComplete.then(
+      () => this.renderRoot.querySelector("textarea")?.focus({ preventScroll: true })
+    );
+  }
+  resizeMessage() {
+    const area = this.renderRoot.querySelector("textarea");
+    if (!area) return;
+    area.style.height = "auto";
+    area.style.height = `${Math.min(area.scrollHeight, 160)}px`;
+  }
   updated(changed) {
+    if (changed.has("value")) this.resizeMessage();
     if (changed.has("replyingTo") || changed.has("editing")) {
       if (this.replyingTo !== null || this.editing)
         this.renderRoot.querySelector("textarea")?.focus();
@@ -461,6 +473,7 @@ var OfficeUiChatComposer = class extends TeamsElement {
     this.files = [];
     this.emojiOpen = false;
     this.fire("office-chat-send", { text, files });
+    this.focusMessage();
   }
   onInput(event) {
     this.value = event.target.value;
@@ -472,6 +485,11 @@ var OfficeUiChatComposer = class extends TeamsElement {
     }
   }
   onKeydown(event) {
+    if (event.key === "Escape" && this.emojiOpen) {
+      this.emojiOpen = false;
+      this.focusMessage();
+      return;
+    }
     if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
       event.preventDefault();
       this.submit();
@@ -481,12 +499,17 @@ var OfficeUiChatComposer = class extends TeamsElement {
   }
   pick(event) {
     const input = event.target;
-    this.files = [...this.files, ...Array.from(input.files ?? [])].slice(0, MAX_FILES);
+    this.addFiles(Array.from(input.files ?? []));
     input.value = "";
+  }
+  addFiles(files) {
+    if (this.disabled) return;
+    this.files = [...this.files, ...files].slice(0, MAX_FILES);
     this.missingFiles = this.missingFiles.filter(
       (name) => !this.files.some((file) => file.name === name)
     );
     this.saveDraft();
+    this.focusMessage();
   }
   saveDraft() {
     this.fire("office-chat-draft", {
@@ -504,7 +527,22 @@ var OfficeUiChatComposer = class extends TeamsElement {
     const banner = this.editing ? "Editing message" : this.replyingTo !== null ? `Replying to ${this.replyingTo}` : "";
     return html`
 			<div class="typing" aria-live="polite">${this.typingLine()}</div>
-			<div class="box">
+			<div
+				class="box"
+				@dragover=${(event) => {
+      if (event.dataTransfer?.types.includes("Files")) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }}
+				@drop=${(event) => {
+      if (event.dataTransfer?.files.length) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.addFiles([...event.dataTransfer.files]);
+      }
+    }}
+			>
 				${this.missingFiles.length ? html`<div role="status">
 								Reattach or discard these draft attachments before sending:
 								<ul>
@@ -541,6 +579,12 @@ var OfficeUiChatComposer = class extends TeamsElement {
 					placeholder=${this.placeholder}
 					?disabled=${this.disabled}
 					@input=${this.onInput}
+					@paste=${(event) => {
+      if (event.clipboardData?.files.length) {
+        event.preventDefault();
+        this.addFiles([...event.clipboardData.files]);
+      }
+    }}
 					@keydown=${this.onKeydown}
 				></textarea>
 				${this.files.length ? html`<ul class="pending">
@@ -551,10 +595,11 @@ var OfficeUiChatComposer = class extends TeamsElement {
 											aria-label=${`Remove ${f.name}`}
 											@click=${() => {
         this.files = this.files.filter((_, j) => j !== i);
+        this.focusMessage();
         this.saveDraft();
       }}
 										>
-											${f.name} ${icon("close")}
+											<span class="file-label" title=${f.name}>${f.name}</span>${icon("close")}
 										</button>
 									</li>`
     )}
@@ -586,7 +631,13 @@ var OfficeUiChatComposer = class extends TeamsElement {
 												type="button"
 												role="menuitem"
 												@click=${() => {
-        this.value += e;
+        const area = this.renderRoot.querySelector("textarea");
+        const start = area?.selectionStart ?? this.value.length, end = area?.selectionEnd ?? start;
+        this.value = this.value.slice(0, start) + e + this.value.slice(end);
+        void this.updateComplete.then(() => {
+          area?.focus({ preventScroll: true });
+          area?.setSelectionRange(start + e.length, start + e.length);
+        });
         this.saveDraft();
         this.emojiOpen = false;
         this.renderRoot.querySelector("textarea")?.focus();
@@ -915,7 +966,8 @@ var XLSX_EDITOR_EVENTS = [
   "file-command",
   "selection-change",
   "sheet-change",
-  "dirty-change"
+  "dirty-change",
+  "collaboration-change"
 ];
 var CANCELABLE = /* @__PURE__ */ new Set(["file-command"]);
 function emitEvent(target, type, detail) {
@@ -1342,7 +1394,8 @@ var TeamsChannelTab = class extends LitElement {
     embeds: { attribute: false },
     canSave: { type: Boolean },
     detail: { state: true },
-    error: { state: true }
+    error: { state: true },
+    hostOpened: { state: true }
   };
   key = "";
   owner = null;
@@ -1355,6 +1408,7 @@ var TeamsChannelTab = class extends LitElement {
     this.canSave = false;
     this.detail = null;
     this.error = "";
+    this.hostOpened = false;
   }
   updated(changed) {
     if (changed.has("tab") || changed.has("client")) void this.resolve();
@@ -1378,6 +1432,7 @@ var TeamsChannelTab = class extends LitElement {
     const generation = ++this.generation;
     this.detail = null;
     this.error = "";
+    this.hostOpened = false;
     if (!tab || !client) return;
     const attachment = tab.content.type === "file" ? tab.content.attachment : { name: tab.name, kind: "other", mime: "text/html", url: tab.content.url };
     try {
@@ -1385,6 +1440,7 @@ var TeamsChannelTab = class extends LitElement {
       if (generation !== this.generation || !this.isConnected) return;
       if (!url) throw new Error("Could not resolve the tab content");
       this.detail = { attachment, url, channelId: tab.channelId };
+      if (tab.content.type === "file") this.openInHost();
     } catch (error) {
       if (generation === this.generation)
         this.error = error instanceof Error ? error.message : "Could not open the tab";
@@ -1397,7 +1453,20 @@ var TeamsChannelTab = class extends LitElement {
       await client.saveFileCopy(tab.channelId, file, options);
     };
   }
+  openInHost() {
+    this.hostOpened = !this.dispatchEvent(
+      new CustomEvent("teams-open-file", {
+        detail: this.detail,
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    );
+  }
   render() {
+    if (this.hostOpened)
+      return html`<p>${this.detail?.attachment.name}</p>
+				<button type="button" @click=${() => this.openInHost()}>Open document</button>`;
     return html`${this.error ? html`<p role="alert">${this.error}</p>
 						<button
 							type="button"
@@ -1496,6 +1565,15 @@ var TeamsFileActions = class extends LitElement {
   async transfer(action) {
     if (this.busy || !this.file || !this.client) return;
     const { file, client } = this;
+    if (!this.dispatchEvent(
+      new CustomEvent("teams-file-transfer", {
+        detail: { attachment: file, action },
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      })
+    ))
+      return;
     const abort = new AbortController();
     this.abort = abort;
     this.busy = true;
@@ -2356,7 +2434,7 @@ function loadConfig() {
 var saveConfig = (config) => safeStorage.setItem("teams:config", JSON.stringify(config));
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/teams/app/teams-app.css?raw
-var teams_app_default = "/* <teams-app>: the shell. Colours, spacing and radii come from the ooxml-ui tokens, so a host\n   retheme or dark mode reaches the whole app. The elements inside bring their own styles. */\n:host {\n	display: block;\n	height: 100%;\n	min-height: 28em;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n	background: var(--office-background);\n}\n:host([data-office-theme='dark']) {\n	--office-background: var(--office-teams-panel);\n	--office-surface: var(--office-teams-bubble);\n	--office-popover: var(--office-teams-panel);\n}\n:host([data-chat-density='compact']) {\n	--office-teams-message-gap: var(--office-space-1);\n	--office-teams-message-padding: var(--office-space-1) var(--office-space-2);\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([data-office-theme='light'])) {\n		--office-background: var(--office-teams-panel);\n		--office-surface: var(--office-teams-bubble);\n		--office-popover: var(--office-teams-panel);\n	}\n}\n*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n\n.shell {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n}\n\n/* ---- top bar ---------------------------------------------------------------------------- */\n.topbar {\n	display: grid;\n	grid-template-columns: 16em minmax(0, 1fr) auto;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-teams-rail);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.navigation-toggle {\n	display: none;\n	padding: var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n}\n.navigation-toggle:hover {\n	background: var(--office-selected);\n}\n.navigation-toggle svg {\n	width: 1.3em;\n	height: 1.3em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n}\n.brand {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	font-size: var(--office-font-size-lg);\n	font-weight: var(--office-font-weight-bold);\n}\n.logo {\n	display: inline-grid;\n	place-items: center;\n	width: 1.8em;\n	height: 1.8em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: 0.85em;\n}\n.search {\n	position: relative;\n	justify-self: center;\n	width: min(34em, 100%);\n}\n.search input {\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n}\n.results {\n	position: absolute;\n	inset-inline: 0;\n	inset-block-start: calc(100% + var(--office-space-1));\n	z-index: 5;\n	max-height: 22em;\n	margin: 0;\n	padding: var(--office-space-1);\n	overflow: auto;\n	list-style: none;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.results button {\n	display: grid;\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	text-align: start;\n}\n.results button:hover {\n	background: var(--office-selected);\n}\n.results .in,\n.results .none {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.results .none {\n	padding: var(--office-space-3);\n}\n.snippet {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.me {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n}\n.me office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head svg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* ---- body ------------------------------------------------------------------------------- */\n.body {\n	display: grid;\n	grid-template-columns: auto 19em minmax(0, 1fr);\n	min-height: 0;\n	grid-template-rows: minmax(0, 1fr);\n}\n.body > office-ui-app-rail {\n	grid-column: 1;\n	grid-row: 1;\n}\n.body > .side {\n	grid-column: 2;\n	grid-row: 1;\n}\n.body > .main {\n	grid-column: 3;\n	grid-row: 1;\n}\n.body > teams-settings {\n	grid-column: 2 / -1;\n	grid-row: 1;\n	min-width: 0;\n	min-height: 0;\n	z-index: 1;\n}\n.body > teams-settings:not([open]) {\n	display: none;\n}\n.body > [inert] {\n	visibility: hidden;\n}\n.side {\n	min-height: 0;\n	overflow: auto;\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.side h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n.main {\n	display: flex;\n	flex-direction: column;\n	min-width: 0;\n	min-height: 0;\n}\n.popout-view {\n	display: flex;\n	height: 100%;\n	min-height: 0;\n}\n.popout-view teams-content-preview {\n	flex: 1;\n}\n.main office-ui-chat-list,\n.main office-ui-prejoin {\n	flex: 1;\n}\n\nul.plain {\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\nul.plain li {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2) var(--office-space-2);\n}\nul.plain li > :first-child:not(office-ui-avatar) {\n	flex: 1;\n}\n.hint {\n	padding: 0 var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n}\n.join {\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.join.live {\n	border-color: transparent;\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n\n/* ---- conversation ----------------------------------------------------------------------- */\n.channel-head {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-5);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.channel-head > button:not(.meet),\n.thread-head button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.channel-head > button:hover:not(:disabled),\n.thread-head button:hover {\n	background: var(--office-selected);\n}\n.channel-head > button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.channel-head h1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	white-space: nowrap;\n}\n.hash {\n	color: var(--office-teams-text-subtle);\n}\n.tabs {\n	display: flex;\n	gap: var(--office-space-1);\n}\n.tabs button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-bottom: var(--office-border-width-thick) solid transparent;\n	background: transparent;\n}\n.tabs button[aria-selected='true'] {\n	border-bottom-color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.topic {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.people {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.more {\n	margin-inline-start: var(--office-space-1);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.meet {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.meet:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.meet:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.callbar {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-2) var(--office-space-5);\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n.callbar button {\n	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid currentColor;\n	border-radius: var(--office-radius);\n	background: transparent;\n}\n\n/* ---- files ------------------------------------------------------------------------------ */\n/* ---- meeting ---------------------------------------------------------------------------- */\n.meeting {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n	background: var(--office-call-background);\n}\n.stage {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) auto;\n	min-height: 0;\n}\n.panel {\n	display: flex;\n	flex-direction: column;\n	width: 22em;\n	min-height: 0;\n	background: var(--office-background);\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.panel office-ui-chat-list {\n	flex: 1;\n	padding-inline: var(--office-space-3);\n}\n.panel office-ui-chat-composer {\n	padding-inline: var(--office-space-3);\n}\n.people-panel h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n\n/* ---- welcome and toast ------------------------------------------------------------------ */\n.welcome {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	background: var(--office-teams-panel);\n}\n.welcome form {\n	display: grid;\n	justify-items: center;\n	gap: var(--office-space-3);\n	width: min(24em, 90%);\n	padding: var(--office-space-6);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow-teams);\n}\n.welcome h1 {\n	margin: 0;\n	font-size: var(--office-font-size-xl);\n}\n.welcome p {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n}\n.welcome input {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\n.welcome button {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.toast {\n	position: fixed;\n	inset-block-end: var(--office-space-4);\n	inset-inline-start: 50%;\n	z-index: 10;\n	transform: translateX(-50%);\n	padding: var(--office-space-2) var(--office-space-4);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n\n.conversation-grid {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr);\n	flex: 1;\n	min-height: 0;\n}\n.conversation-grid[data-thread='true'] {\n	grid-template-columns: minmax(0, 1fr) minmax(18em, 0.8fr);\n}\n.conversation-main,\n.thread-pane {\n	display: flex;\n	flex-direction: column;\n	min-height: 0;\n	min-width: 0;\n}\n.tab-conversation teams-channel-tab {\n	flex: 1;\n	min-height: 0;\n}\n.thread-pane {\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.thread-head {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n}\n.thread-head h2 {\n	margin: 0;\n	font-size: 1em;\n}\n.followed-threads {\n	overflow: auto;\n	padding: var(--office-space-4);\n}\n.message-transfer {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.message-transfer span {\n	flex: 1;\n	overflow-wrap: anywhere;\n}\n.message-transfer button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads ul {\n	list-style: none;\n	padding: 0;\n}\n.followed-threads fieldset {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-4);\n	padding: var(--office-space-3);\n	margin-block: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.followed-threads li {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.followed-threads button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads button:hover {\n	background: var(--office-selected);\n}\n.followed-threads li button:first-child {\n	display: grid;\n	gap: var(--office-space-2);\n	flex: 1;\n	text-align: start;\n	min-width: 0;\n	overflow-wrap: anywhere;\n	border-color: transparent;\n}\n.followed-threads li[data-unread='true'] button:first-child span {\n	font-weight: var(--office-font-weight-bold);\n}\n@media (max-width: 56em) {\n	.conversation-grid[data-thread='true'] {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.conversation-grid[data-thread='true'] .conversation-main {\n		display: none;\n	}\n}\n.tabs {\n	overflow-x: auto;\n	min-width: 0;\n	flex: 1 1 16em;\n}\n\n@media (max-width: 56.25em) {\n	.navigation-toggle {\n		display: inline-flex;\n	}\n	.brand > .logo,\n	.brand > span:last-child {\n		display: none;\n	}\n	.channel-head .topic,\n	.channel-head .people {\n		display: none;\n	}\n	.channel-head .tabs {\n		flex-basis: 100%;\n	}\n	.body {\n		grid-template-columns: auto minmax(0, 1fr);\n	}\n	.body > .main {\n		grid-column: 2;\n	}\n	.side {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: auto minmax(0, 1fr) auto;\n	}\n}\n";
+var teams_app_default = "/* <teams-app>: the shell. Colours, spacing and radii come from the ooxml-ui tokens, so a host\n   retheme or dark mode reaches the whole app. The elements inside bring their own styles. */\n:host {\n	display: block;\n	height: 100%;\n	min-height: 28em;\n	font: var(--office-font-size) var(--office-font);\n	color: var(--office-foreground);\n	background: var(--office-background);\n}\n:host([data-office-theme='dark']) {\n	--office-background: var(--office-teams-panel);\n	--office-surface: var(--office-teams-bubble);\n	--office-popover: var(--office-teams-panel);\n}\n:host([data-chat-density='compact']) {\n	--office-teams-message-gap: var(--office-space-1);\n	--office-teams-message-padding: var(--office-space-1) var(--office-space-2);\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([data-office-theme='light'])) {\n		--office-background: var(--office-teams-panel);\n		--office-surface: var(--office-teams-bubble);\n		--office-popover: var(--office-teams-panel);\n	}\n}\n*,\n*::before,\n*::after {\n	box-sizing: border-box;\n}\nbutton {\n	font: inherit;\n	color: inherit;\n	cursor: pointer;\n}\n:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n\n.shell {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n}\n\n/* ---- top bar ---------------------------------------------------------------------------- */\n.topbar {\n	display: grid;\n	grid-template-columns: 16em minmax(0, 1fr) auto;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-4);\n	background: var(--office-teams-rail);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.navigation-toggle {\n	display: none;\n	padding: var(--office-space-2);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: transparent;\n}\n.navigation-toggle:hover {\n	background: var(--office-selected);\n}\n.navigation-toggle svg {\n	width: 1.3em;\n	height: 1.3em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n}\n.brand {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	font-size: var(--office-font-size-lg);\n	font-weight: var(--office-font-weight-bold);\n}\n.logo {\n	display: inline-grid;\n	place-items: center;\n	width: 1.8em;\n	height: 1.8em;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-size: 0.85em;\n}\n.search {\n	position: relative;\n	justify-self: center;\n	width: min(34em, 100%);\n}\n.search input {\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-4);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-full);\n	background: var(--office-background);\n	color: inherit;\n	font: inherit;\n}\n.results {\n	position: absolute;\n	inset-inline: 0;\n	inset-block-start: calc(100% + var(--office-space-1));\n	z-index: 5;\n	max-height: 22em;\n	margin: 0;\n	padding: var(--office-space-1);\n	overflow: auto;\n	list-style: none;\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-popover);\n	box-shadow: var(--office-shadow-teams);\n}\n.results button {\n	display: grid;\n	width: 100%;\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius);\n	background: transparent;\n	text-align: start;\n}\n.results button:hover {\n	background: var(--office-selected);\n}\n.results .in,\n.results .none {\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.results .none {\n	padding: var(--office-space-3);\n}\n.snippet {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.me {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-3);\n}\n.me office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head office-ui-menu-button::part(caret) {\n	display: none;\n}\n.channel-head svg {\n	width: 1em;\n	height: 1em;\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n\n/* ---- body ------------------------------------------------------------------------------- */\n.body {\n	display: grid;\n	grid-template-columns: auto 19em minmax(0, 1fr);\n	min-height: 0;\n	grid-template-rows: minmax(0, 1fr);\n}\n.body > office-ui-app-rail {\n	grid-column: 1;\n	grid-row: 1;\n}\n.body > .side {\n	grid-column: 2;\n	grid-row: 1;\n}\n.body > .main {\n	grid-column: 3;\n	grid-row: 1;\n}\n.body > teams-settings {\n	grid-column: 2 / -1;\n	grid-row: 1;\n	min-width: 0;\n	min-height: 0;\n	z-index: 1;\n}\n.body > teams-settings:not([open]) {\n	display: none;\n}\n.body > [inert] {\n	visibility: hidden;\n}\n.side {\n	min-height: 0;\n	overflow: auto;\n	background: var(--office-teams-panel);\n	border-inline-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.side h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n.main {\n	display: flex;\n	flex-direction: column;\n	min-width: 0;\n	min-height: 0;\n}\n.popout-view {\n	display: flex;\n	height: 100%;\n	min-height: 0;\n}\n.popout-view teams-content-preview {\n	flex: 1;\n}\n.main office-ui-chat-list,\n.main office-ui-prejoin {\n	flex: 1;\n}\n\nul.plain {\n	margin: 0;\n	padding: 0 var(--office-space-3);\n	list-style: none;\n}\nul.plain li {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2) var(--office-space-2);\n}\nul.plain li > :first-child:not(office-ui-avatar) {\n	flex: 1;\n}\n.hint {\n	padding: 0 var(--office-space-4);\n	color: var(--office-teams-text-subtle);\n}\n.join {\n	padding: var(--office-space-1) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.join.live {\n	border-color: transparent;\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n\n/* ---- conversation ----------------------------------------------------------------------- */\n.channel-head {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-4);\n	padding: var(--office-space-2) var(--office-space-5);\n	border-bottom: var(--office-border-width) solid var(--office-teams-divider);\n}\n.channel-head > button:not(.meet),\n.thread-head button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	background: var(--office-background);\n}\n.channel-head > button:hover:not(:disabled),\n.thread-head button:hover {\n	background: var(--office-selected);\n}\n.channel-head > button:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.channel-head h1 {\n	margin: 0;\n	font-size: var(--office-font-size-lg);\n	white-space: nowrap;\n}\n.hash {\n	color: var(--office-teams-text-subtle);\n}\n.tabs {\n	display: flex;\n	gap: var(--office-space-1);\n}\n.tabs button {\n	padding: var(--office-space-2) var(--office-space-3);\n	border: 0;\n	border-bottom: var(--office-border-width-thick) solid transparent;\n	background: transparent;\n}\n.tabs button[aria-selected='true'] {\n	border-bottom-color: var(--office-teams-brand);\n	font-weight: var(--office-font-weight-bold);\n}\n.topic {\n	flex: 1;\n	min-width: 0;\n	overflow: hidden;\n	color: var(--office-teams-text-subtle);\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n.people {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.more {\n	margin-inline-start: var(--office-space-1);\n	color: var(--office-teams-text-subtle);\n	font-size: var(--office-font-size-sm);\n}\n.meet {\n	padding: var(--office-space-2) var(--office-space-4);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.meet:hover:not(:disabled) {\n	background: var(--office-teams-brand-hover);\n}\n.meet:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n.callbar {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: var(--office-space-2) var(--office-space-5);\n	background: var(--office-call-live);\n	color: var(--office-call-foreground);\n}\n.callbar button {\n	padding: 0 var(--office-space-3);\n	border: var(--office-border-width) solid currentColor;\n	border-radius: var(--office-radius);\n	background: transparent;\n}\n\n/* ---- files ------------------------------------------------------------------------------ */\n/* ---- meeting ---------------------------------------------------------------------------- */\n.meeting {\n	display: grid;\n	grid-template-rows: auto minmax(0, 1fr);\n	height: 100%;\n	background: var(--office-call-background);\n}\n.stage {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) auto;\n	min-height: 0;\n}\n.panel {\n	display: flex;\n	flex-direction: column;\n	width: 22em;\n	min-height: 0;\n	background: var(--office-background);\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.panel office-ui-chat-list {\n	flex: 1;\n	padding-inline: var(--office-space-3);\n}\n.panel office-ui-chat-composer {\n	padding-inline: var(--office-space-3);\n}\n.people-panel h2 {\n	margin: 0;\n	padding: var(--office-space-3) var(--office-space-4);\n	font-size: var(--office-font-size-lg);\n}\n\n/* ---- welcome and toast ------------------------------------------------------------------ */\n.welcome {\n	display: grid;\n	place-items: center;\n	height: 100%;\n	background: var(--office-teams-panel);\n}\n.welcome form {\n	display: grid;\n	justify-items: center;\n	gap: var(--office-space-3);\n	width: min(24em, 90%);\n	padding: var(--office-space-6);\n	border-radius: var(--office-radius-lg);\n	background: var(--office-background);\n	box-shadow: var(--office-shadow-teams);\n}\n.welcome h1 {\n	margin: 0;\n	font-size: var(--office-font-size-xl);\n}\n.welcome p {\n	margin: 0;\n	color: var(--office-teams-text-subtle);\n}\n.welcome input {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-field-border);\n	border-radius: var(--office-radius);\n	background: var(--office-field-background);\n	color: inherit;\n	font: inherit;\n}\n.welcome button {\n	width: 100%;\n	padding: var(--office-space-3);\n	border: 0;\n	border-radius: var(--office-radius-md);\n	background: var(--office-teams-brand);\n	color: var(--office-teams-brand-foreground);\n	font-weight: var(--office-font-weight-bold);\n}\n.toast {\n	position: fixed;\n	inset-block-end: var(--office-space-4);\n	inset-inline-start: 50%;\n	z-index: 10;\n	transform: translateX(-50%);\n	padding: var(--office-space-2) var(--office-space-4);\n	border-radius: var(--office-radius-md);\n	background: var(--office-call-background);\n	color: var(--office-call-foreground);\n}\n\n.conversation-grid {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr);\n	flex: 1;\n	min-height: 0;\n}\n.conversation-grid[data-thread='true'] {\n	grid-template-columns: minmax(0, 1fr) minmax(18em, 0.8fr);\n}\n.conversation-main,\n.thread-pane {\n	display: flex;\n	flex-direction: column;\n	min-height: 0;\n	min-width: 0;\n}\n.tab-conversation teams-channel-tab {\n	flex: 1;\n	min-height: 0;\n}\n.thread-pane {\n	border-inline-start: var(--office-border-width) solid var(--office-teams-divider);\n}\n.thread-head {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n}\n.thread-head h2 {\n	margin: 0;\n	font-size: 1em;\n}\n.followed-threads {\n	overflow: auto;\n	padding: var(--office-space-4);\n}\n.message-transfer {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding: var(--office-space-3);\n	background: var(--office-teams-panel);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.message-transfer span {\n	flex: 1;\n	overflow-wrap: anywhere;\n}\n.message-transfer button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads ul {\n	list-style: none;\n	padding: 0;\n}\n.followed-threads fieldset {\n	display: flex;\n	flex-wrap: wrap;\n	gap: var(--office-space-4);\n	padding: var(--office-space-3);\n	margin-block: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n}\n.followed-threads li {\n	display: flex;\n	flex-wrap: wrap;\n	align-items: center;\n	gap: var(--office-space-3);\n	padding-block: var(--office-space-3);\n	border-block-end: var(--office-border-width) solid var(--office-teams-divider);\n}\n.followed-threads button {\n	font: inherit;\n	color: inherit;\n	background: var(--office-background);\n	border: var(--office-border-width) solid var(--office-teams-divider);\n	border-radius: var(--office-radius-md);\n	padding: var(--office-space-2) var(--office-space-3);\n	cursor: pointer;\n}\n.followed-threads button:hover {\n	background: var(--office-selected);\n}\n.followed-threads li button:first-child {\n	display: grid;\n	gap: var(--office-space-2);\n	flex: 1;\n	text-align: start;\n	min-width: 0;\n	overflow-wrap: anywhere;\n	border-color: transparent;\n}\n.followed-threads li[data-unread='true'] button:first-child span {\n	font-weight: var(--office-font-weight-bold);\n}\n@media (max-width: 56em) {\n	.conversation-grid[data-thread='true'] {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.conversation-grid[data-thread='true'] .conversation-main {\n		display: none;\n	}\n}\n.tabs {\n	overflow-x: auto;\n	min-width: 0;\n	flex: 1 1 16em;\n}\n\n@media (max-width: 56.25em) {\n	.navigation-toggle {\n		display: inline-flex;\n	}\n	.brand > .logo,\n	.brand > span:last-child {\n		display: none;\n	}\n	.channel-head .topic,\n	.channel-head .people {\n		display: none;\n	}\n	.channel-head .tabs {\n		flex-basis: 100%;\n	}\n	.body {\n		grid-template-columns: auto minmax(0, 1fr);\n	}\n	.body > .main {\n		grid-column: 2;\n	}\n	.side {\n		display: none;\n	}\n	.topbar {\n		grid-template-columns: auto minmax(0, 1fr) auto;\n	}\n}\n\n/* An application host can own the single suite-level account control. */\n:host([host-profile]) teams-profile-menu {\n	display: none;\n}\n";
 function threadPane(state, client, openFile, close) {
   const thread = state.thread;
   if (!thread) return nothing;
@@ -3241,7 +3319,8 @@ var TeamsApp = class extends LitElement {
     const workspaceId = /^[\w-]{1,100}$/u.test(this.workspaceId) ? this.workspaceId : "demo";
     this.themeStorageKey = `teams:theme:${encodeURIComponent(workspaceId)}:${encodeURIComponent(named.id)}`;
     const rememberedTheme = safeStorage.getItem(this.themeStorageKey);
-    this.theme = rememberedTheme === "dark" || rememberedTheme === "light" ? rememberedTheme : "system";
+    if (!this.hasAttribute("host-theme"))
+      this.theme = rememberedTheme === "dark" || rememberedTheme === "light" ? rememberedTheme : "system";
     this.applyTheme();
     this.showAppNames = safeStorage.getItem(this.themeStorageKey.replace("teams:theme:", "teams:app-names:")) !== "false";
     this.chatDensity = safeStorage.getItem(this.themeStorageKey.replace("teams:theme:", "teams:density:")) === "compact" ? "compact" : "comfy";