ooxml-ui 0.19.0 → 0.21.0

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

@@ -0,0 +1,80 @@
+import { type TemplateResult } from 'lit';
+import { OfficeElement } from '../base.js';
+export type OfficeStatusActivateEvent = CustomEvent<{
+    id: string;
+}>;
+/** A text segment at the start of the bar (page count, words, language, save state). */
+export interface OfficeStatusText {
+    id: string;
+    text: string;
+    title?: string | undefined;
+    tone?: 'idle' | 'saving' | 'error' | undefined;
+    /** Announce changes politely (a page counter). */
+    live?: boolean | undefined;
+    /** Hide on phone widths. */
+    narrowHide?: boolean | undefined;
+}
+/** A status-bar button (Notes, Comments, a view switch). `label` is its name and ScreenTip. */
+export interface OfficeStatusButton {
+    id: string;
+    icon: string;
+    label: string;
+    /** Visible text after the glyph; hidden on phone widths. */
+    text?: string | undefined;
+    pressed?: boolean | undefined;
+    hidden?: boolean | undefined;
+}
+/** Everything the controlled bar shows, already translated. Absent parts are not rendered. */
+export interface OfficeStatusBarState {
+    items?: readonly OfficeStatusText[] | undefined;
+    toggles?: readonly OfficeStatusButton[] | undefined;
+    /** The view switches (Normal, Sorter, Reading); hidden while empty, all hidden or `false`. */
+    views?: readonly OfficeStatusButton[] | false | undefined;
+    /** Zoom out, percentage (zoom to fit) and zoom in; emits `zoomOut`, `zoomFit`, `zoomIn`. */
+    zoom?: {
+        percent: number;
+        outLabel: string;
+        fitLabel: string;
+        inLabel: string;
+        /** Keeps the named buttons but hides the cluster. */
+        hidden?: boolean | undefined;
+        /** Glyphs; default `minus` and `plus`. */
+        outIcon?: string | undefined;
+        inIcon?: string | undefined;
+    } | undefined;
+}
+/**
+ * Status bar: `role="group"` named by its `label` attribute (default "Status"). Two ways to fill
+ * it. Composed: children, with `slot="end"` pushed to the trailing edge (zoom, view switches).
+ * 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
+ * children are patched in place, so a focused button survives updates.
+ */
+export declare class OfficeUiStatusBar extends OfficeElement {
+    static activateEvent: string;
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        hasCollaboration: {
+            state: boolean;
+        };
+    };
+    label: string | null;
+    hasCollaboration: boolean;
+    private model;
+    constructor();
+    get state(): OfficeStatusBarState | undefined;
+    set state(value: OfficeStatusBarState | null | undefined);
+    private activate;
+    /** Keep native activation out of the host document's navigation shortcuts. */
+    private onKeydown;
+    protected willUpdate(): void;
+    private button;
+    private zoomStep;
+    protected render(): TemplateResult<1>;
+}
+export declare const defineStatusBar: import("../registry.js").Definer;

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

@@ -0,0 +1,40 @@
+import { OfficeElement } from '../base.js';
+/**
+ * One status entry: `label` and `value` attributes (textual, so assistive tech reads both).
+ * With the `interactive` attribute it renders a button and emits `office-status-activate`
+ * `{ id }` (`id` attribute) on click, Enter or Space; zoom or language pickers are examples.
+ */
+export declare class OfficeUiStatusItem extends OfficeElement {
+    static shadowRootOptions: {
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        delegatesFocus: boolean;
+    };
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        interactive: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+        };
+    };
+    label: string;
+    value: string;
+    interactive: boolean;
+    constructor();
+    protected render(): import("lit").TemplateResult<1>;
+}
+export declare const defineStatusItem: import("../registry.js").Definer;

package/dist/chrome/tab-strip.d.ts

@@ -0,0 +1,88 @@
+import { type PropertyValues } from 'lit';
+import { OfficeElement } from '../base.js';
+export interface OfficeTab {
+    id: string;
+    label: string;
+    /** Tooltip; defaults to the label. */
+    title?: string;
+}
+export type OfficeTabSelectEvent = CustomEvent<{
+    id: string;
+}>;
+/**
+ * Bottom document tabs (Visio pages, Excel sheets). Set `tabs` (`OfficeTab[]`) and `selected`
+ * (a tab id). Labels are inserted as text. The previous/next buttons and arrow, Home and End
+ * keys move the selection; the tab list uses a roving tabindex. User selection emits
+ * `office-tab-select` `{ id }` (cancelable); setting properties never emits.
+ * Attributes: `label` (tab list name, default "Tabs"), `previous-label` and `next-label`
+ * (step button names, default "Previous" and "Next"), `disabled`, and `add-label` to show an
+ * add button after the tabs (Insert Page, New Sheet) that emits `office-command`
+ * `{ command: 'tab-add' }`; `add-disabled` and `add-title` disable and explain it.
+ */
+export declare class OfficeUiTabStrip extends OfficeElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        selected: {
+            type: StringConstructor;
+            noAccessor: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        previousLabel: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        nextLabel: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        addLabel: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        addTitle: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        addDisabled: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+            attribute: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+        };
+    };
+    label: string | null;
+    previousLabel: string | null;
+    nextLabel: string | null;
+    addLabel: string | null;
+    addTitle: string | null;
+    addDisabled: boolean;
+    disabled: boolean;
+    private items;
+    private picked;
+    constructor();
+    get tabs(): OfficeTab[];
+    set tabs(value: readonly OfficeTab[]);
+    get selected(): string;
+    set selected(id: string | null);
+    private index;
+    private move;
+    private choose;
+    private onListClick;
+    private onKey;
+    protected updated(_changed: PropertyValues<this>): void;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export declare const defineTabStrip: import("../registry.js").Definer;

package/dist/chrome/title-bar-types.d.ts

@@ -0,0 +1,75 @@
+export type OfficeTitleBarPlacement = 'titleBar' | 'belowRibbon';
+export type OfficeTitleBarTone = 'idle' | 'saving' | 'error';
+/** The AutoSave switch. The host owns the state; a change is only a request. */
+export interface OfficeTitleBarAutosave {
+    enabled: boolean;
+    /** Default true. False renders the switch inert. */
+    available?: boolean | undefined;
+    /** "AutoSave". */
+    label: string;
+    /** "On" / "Off", shown after the switch. */
+    stateLabel: string;
+    /** Accessible name of the switch. */
+    toggleLabel: string;
+    /** ScreenTip of the switch; defaults to `toggleLabel`. */
+    title?: string | undefined;
+}
+/** One Quick Access Toolbar button; every string arrives translated from the host. */
+export interface OfficeQuickAccessItem {
+    id: string;
+    /** Registered glyph name (see `registerIcon`). */
+    icon: string;
+    /** Accessible name, and the visible text when labels show. */
+    label: string;
+    /** ScreenTip; absent leaves the button without a `title`. */
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+}
+/** One command the title-bar search can run. `category` shows on the right of its row. */
+export interface OfficeTitleBarCommand {
+    id: string;
+    label: string;
+    category?: string | undefined;
+}
+/** The centred command search. Every string arrives translated from the host. */
+export interface OfficeTitleBarSearch {
+    placeholder: string;
+    label: string;
+    /** Heading over the matches and the live-region text when there are some. */
+    heading: string;
+    /** Row and live-region text when nothing matches. */
+    empty: string;
+    /** Searched by label when `match` is absent. */
+    commands?: readonly OfficeTitleBarCommand[] | undefined;
+    /** Host ranking (synonyms, keywords); replaces the default label search. */
+    match?: ((query: string) => readonly OfficeTitleBarCommand[]) | undefined;
+    /** Text of the trailing "search the document" row; absent drops that row. */
+    content?: ((query: string) => string) | undefined;
+    /** Glyph of the content row; defaults to `search`. */
+    contentIcon?: string | undefined;
+}
+/** Detail of the search request: a chosen command, or a document search when `command` is absent. */
+export interface OfficeTitleBarSearchDetail {
+    query: string;
+    command?: string;
+}
+/** Everything the bar shows, already translated. Absent parts are not rendered. */
+export interface OfficeTitleBarState {
+    /** One or two letters in the product-coloured app mark; absent hides the mark. */
+    appMark?: string | undefined;
+    fileName: string;
+    /** Save-location or save-progress text after the name. */
+    status?: string | undefined;
+    tone?: OfficeTitleBarTone | undefined;
+    autosave?: OfficeTitleBarAutosave | undefined;
+    quickAccess?: {
+        label: string;
+        items: readonly OfficeQuickAccessItem[];
+        showLabels?: boolean | undefined;
+    } | undefined;
+    search?: OfficeTitleBarSearch | undefined;
+}
+/** The dropdown shows at most this many commands so it never outgrows its box. */
+export declare const OFFICE_TITLE_BAR_SEARCH_LIMIT = 8;
+/** The default search: commands whose label contains the query. */
+export declare function matchTitleBarCommands(search: OfficeTitleBarSearch, query: string): readonly OfficeTitleBarCommand[];

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

@@ -0,0 +1,81 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { OfficeElement } from '../base.js';
+import { type OfficeTitleBarCommand, type OfficeTitleBarPlacement, type OfficeTitleBarState } from './title-bar-types.js';
+export * from './title-bar-types.js';
+/**
+ * `<office-ui-title-bar>`: Office's title bar above the ribbon (app mark, AutoSave, Quick
+ * Access Toolbar, file name and status, centred command search, `collaboration` and `account`
+ * slots). Controlled: set `state` (`OfficeTitleBarState`, every string translated); the bar
+ * owns no effects. `placement="belowRibbon"` renders only the Quick Access row and hides
+ * itself (`data-empty`) while that row is empty. Events (bubbling, composed; static names let a
+ * product subclass keep its published ones): `office-autosave-toggle`, `office-command`
+ * `{ command }` from a Quick Access button and `office-command-search` `{ query, command? }`.
+ * Override `activate(id)` to route Quick Access buttons differently and `rendered()` to mirror
+ * state onto the host. Tokens: `--office-title-bar-*`. The search query stays local to the bar,
+ * so hosts never round-trip keystrokes; they receive one request per commit.
+ */
+export declare class OfficeUiTitleBar extends OfficeElement {
+    static autosaveEvent: string;
+    static commandEvent: string;
+    static searchEvent: string;
+    /** Inner controls; a product subclass may use its own aliased tags. */
+    static switchTag: string;
+    static searchTag: string;
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        placement: {
+            type: StringConstructor;
+            noAccessor: boolean;
+        };
+        stop: {
+            state: boolean;
+        };
+        found: {
+            state: boolean;
+        };
+        active: {
+            state: boolean;
+        };
+        resultsOpen: {
+            state: boolean;
+        };
+        live: {
+            state: boolean;
+        };
+    };
+    stop: string;
+    found: readonly OfficeTitleBarCommand[];
+    active: number;
+    resultsOpen: boolean;
+    live: string;
+    private model;
+    constructor();
+    get state(): OfficeTitleBarState;
+    set state(value: OfficeTitleBarState | null | undefined);
+    /** Read from the attribute, so a subclass that intercepts attribute changes still sees it. */
+    get placement(): OfficeTitleBarPlacement;
+    set placement(value: OfficeTitleBarPlacement);
+    /** The search field inside the bar, for hosts that move focus to it (Alt+Q). */
+    get searchField(): HTMLElement;
+    /** A Quick Access button was pressed; subclasses may route by id. */
+    activate(id: string): void;
+    /** Called after every render; subclasses mirror state onto the host here. */
+    rendered(): void;
+    private enabledButtons;
+    private onQatFocus;
+    private onQatKey;
+    private quickAccess;
+    private get query();
+    private openResults;
+    private closeResults;
+    private commit;
+    private onSearchKey;
+    private onSearchBlur;
+    private results;
+    private searchBox;
+    private autosave;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(): void;
+    protected render(): TemplateResult<1>;
+}
+export declare const defineTitleBar: import("../registry.js").Definer;

package/dist/{chunk-5L3NYLAW.js → chunk-2X6QYQ3Q.js}

@@ -1,4 +1,4 @@
-import { OFFICE_TOKENS, TOUCH } from './chunk-A3QNC6VS.js';
+import { OFFICE_TOKENS, TOUCH } from './chunk-HSJH6SUW.js';
 
 // src/theme.ts
 var THEME_STYLE_ID = "office-ui-theme";
@@ -17,6 +17,15 @@ var DARK = `
 	--office-notice-accent: #fbbf24;
 	--office-info: #60a5fa;
 	--office-warning: #f59e0b;
+	--office-teams-brand: #7f85f5;
+	--office-teams-brand-hover: #96a0ff;
+	--office-teams-brand-subtle: #2f2f4a;
+	--office-teams-rail: #141414;
+	--office-teams-panel: #1f1f1f;
+	--office-teams-bubble: #2d2d2d;
+	--office-teams-bubble-own: #2f2f4a;
+	--office-teams-divider: #3d3d3d;
+	--office-teams-text-subtle: #adadad;
 	--office-shadow: 0 6px 20px rgb(0 0 0 / 45%);
 	--office-shadow-lg: 0 10px 25px rgb(0 0 0 / 45%);`;
 var LIGHT = Object.entries(OFFICE_TOKENS).map(([name, value]) => `	${name}: ${value};`).join("\n");

package/dist/{chunk-OAGGHX23.js → chunk-3MDKXKKQ.js}

@@ -1,5 +1,5 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-UYPH4ESZ.js';
-import { tok } from './chunk-A3QNC6VS.js';
+import { OfficeElement, controlStyles, definer } from './chunk-5A4REH6T.js';
+import { html } from 'lit';
 import { normalizeHexColor } from 'ooxml-core/color';
 
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -152,71 +152,59 @@ function textElement(doc, shape, scheme) {
   return text;
 }
 
-// src/smartart.ts
-var CSS = `
-:host { display: block; }
-svg { display: block; width: 100%; height: auto; max-height: 100%; }
-text { font-family: ${tok("--office-font")}; pointer-events: none; }
-.empty { padding: ${tok("--office-space-2")}; font-size: ${tok("--office-font-size-sm")}; color: ${tok("--office-muted-foreground")}; }
-@media (forced-colors: active) { text { fill: CanvasText; } }
-`;
-var defineSmartArt = definer("office-ui-smartart", () => {
-  class OfficeUiSmartArt extends HTMLElement {
-    static observedAttributes = ["label"];
-    model;
-    scheme = {};
-    lastReport;
-    root;
-    constructor() {
-      super();
-      this.root = this.attachShadow({ mode: "open" });
-      attachStyles(this.root, controlCss(CSS));
-    }
-    connectedCallback() {
-      this.render();
-    }
-    attributeChangedCallback() {
-      this.render();
-    }
-    get drawing() {
-      return this.model;
-    }
-    set drawing(next) {
-      this.model = next;
-      this.render();
-    }
-    get schemeColors() {
-      return this.scheme;
-    }
-    set schemeColors(next) {
-      this.scheme = next;
-      this.render();
-    }
-    /** The report of the last render (undefined while empty). */
-    get report() {
-      return this.lastReport;
-    }
-    render() {
-      const doc = this.ownerDocument;
-      for (const el of this.root.querySelectorAll("svg, .empty")) el.remove();
-      const label = this.getAttribute("label") ?? "Diagram";
-      if (!this.model || this.model.shapes.length === 0) {
+// raw-css:/home/runner/work/ooxml/ooxml/packages/ui/src/smartart/smartart.css?raw
+var smartart_default = ":host {\n	display: block;\n}\nsvg {\n	display: block;\n	width: 100%;\n	height: auto;\n	max-height: 100%;\n}\ntext {\n	font-family: var(--office-font);\n	pointer-events: none;\n}\n.empty {\n	padding: var(--office-space-2);\n	font-size: var(--office-font-size-sm);\n	color: var(--office-muted-foreground);\n}\n@media (forced-colors: active) {\n	text {\n		fill: CanvasText;\n	}\n}\n";
+
+// src/smartart/smartart.ts
+var OfficeUiSmartArt = class extends OfficeElement {
+  static styles = controlStyles(smartart_default);
+  static properties = {
+    drawing: { attribute: false },
+    schemeColors: { attribute: false },
+    label: { type: String }
+  };
+  figure;
+  lastReport;
+  constructor() {
+    super();
+    this.drawing = void 0;
+    this.schemeColors = {};
+    this.label = null;
+  }
+  /** The report of the last render (undefined while empty). */
+  get report() {
+    return this.lastReport;
+  }
+  /** The SVG is rebuilt only when the drawing or the scheme colours change. */
+  willUpdate(changed) {
+    if (changed.has("drawing") || changed.has("schemeColors")) {
+      if (!this.drawing || this.drawing.shapes.length === 0) {
+        this.figure = void 0;
         this.lastReport = void 0;
-        const empty = doc.createElement("div");
-        empty.className = "empty";
-        empty.textContent = this.model ? "This diagram has no cached drawing to show." : "";
-        this.root.append(empty);
-        return;
+      } else {
+        const { svg, report } = renderDiagramDrawing(
+          this.ownerDocument,
+          this.drawing,
+          this.schemeColors
+        );
+        svg.setAttribute("role", "img");
+        this.figure = svg;
+        this.lastReport = report;
       }
-      const { svg, report } = renderDiagramDrawing(doc, this.model, this.scheme);
-      svg.setAttribute("role", "img");
-      svg.setAttribute("aria-label", label);
-      this.root.append(svg);
-      this.lastReport = report;
-      emit(this, "office-smartart-render", report);
     }
+    this.figure?.setAttribute("aria-label", this.label ?? "Diagram");
+  }
+  updated(changed) {
+    if (this.lastReport && (changed.has("drawing") || changed.has("schemeColors")))
+      this.fire("office-smartart-render", this.lastReport);
+  }
+  render() {
+    if (this.figure) return this.figure;
+    return html`<div class="empty"
+			>${this.drawing ? "This diagram has no cached drawing to show." : ""}</div
+		>`;
   }
-  return OfficeUiSmartArt;
-});
+};
+var defineSmartArt = definer("office-ui-smartart", () => OfficeUiSmartArt);
 
-export { defineSmartArt, renderDiagramDrawing };
+export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing };