ooxml-ui 0.20.0 → 0.22.0

package/dist/presence/presence.d.ts

@@ -0,0 +1,53 @@
+import { OfficeElement } from '../base.js';
+/**
+ * One collaborator as the avatar stack needs it. This is a deliberately minimal structural
+ * view of an awareness entry (identity, colour, activity); core's `collab` awareness model
+ * satisfies it, and `participantsFromAwareness` adapts raw `{ user }` awareness states.
+ */
+export interface PresenceParticipant {
+    id: string;
+    name: string;
+    /** CSS colour of the participant's cursor and avatar ring. */
+    color?: string;
+    status?: 'active' | 'idle' | 'away';
+    /** The local user: sorted first and labelled "(you)". */
+    self?: boolean;
+}
+export type OfficePresenceSelectEvent = CustomEvent<{
+    id: string;
+}>;
+/** Adapt awareness-like states (`{ clientId?, user: { id?, name, color? } }`) to participants. */
+export declare function participantsFromAwareness(states: Iterable<{
+    clientId?: string | number;
+    user?: Partial<PresenceParticipant>;
+} | undefined>, selfId?: string): PresenceParticipant[];
+export declare const initialsOf: (name: string) => string;
+/**
+ * Presence avatar stack. `participants` property (array of `PresenceParticipant`), `max`
+ * attribute (visible avatars, default 4; the rest collapse into a "+N" chip). `role="list"`
+ * with one button per person (accessible name = name, status and "(you)"); activating one emits
+ * `office-presence-select` `{ id }` so the host can follow that user. Rendering carries no
+ * identity beyond what the host passes in.
+ */
+export declare class OfficeUiPresence extends OfficeElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        max: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+    };
+    max: string | null;
+    label: string | null;
+    private people;
+    constructor();
+    get participants(): PresenceParticipant[];
+    set participants(next: PresenceParticipant[]);
+    private get visible();
+    protected willUpdate(): void;
+    private person;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export declare const definePresence: import("../registry.js").Definer;

package/dist/presence.d.ts

@@ -1,31 +1 @@
-/**
- * One collaborator as the avatar stack needs it. This is a deliberately minimal structural
- * view of an awareness entry (identity, colour, activity); core's `collab` awareness model
- * satisfies it, and `participantsFromAwareness` adapts raw `{ user }` awareness states.
- */
-export interface PresenceParticipant {
-    id: string;
-    name: string;
-    /** CSS colour of the participant's cursor and avatar ring. */
-    color?: string;
-    status?: 'active' | 'idle' | 'away';
-    /** The local user: sorted first and labelled "(you)". */
-    self?: boolean;
-}
-export type OfficePresenceSelectEvent = CustomEvent<{
-    id: string;
-}>;
-/** Adapt awareness-like states (`{ clientId?, user: { id?, name, color? } }`) to participants. */
-export declare function participantsFromAwareness(states: Iterable<{
-    clientId?: string | number;
-    user?: Partial<PresenceParticipant>;
-} | undefined>, selfId?: string): PresenceParticipant[];
-export declare const initialsOf: (name: string) => string;
-/**
- * Presence avatar stack. `participants` property (array of `PresenceParticipant`), `max`
- * attribute (visible avatars, default 4; the rest collapse into a "+N" chip). `role="list"`
- * with one button per person (accessible name = name, status and "(you)"); activating one emits
- * `office-presence-select` `{ id }` so the host can follow that user. Rendering carries no
- * identity beyond what the host passes in.
- */
-export declare const definePresence: import("./registry.js").Definer;
+export * from './presence/presence.js';

package/dist/presence.js

@@ -1,3 +1,3 @@
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-24MMSCKW.js';
-import './chunk-UEJ4F33J.js';
-import './chunk-G3LAGZEW.js';
+export { OfficeUiPresence, definePresence, initialsOf, participantsFromAwareness } from './chunk-E47762NY.js';
+import './chunk-5A4REH6T.js';
+import './chunk-HSJH6SUW.js';

package/dist/ribbon/button.d.ts

@@ -0,0 +1,60 @@
+import { OfficeElement } from '../base.js';
+export type OfficeCommandEvent = CustomEvent<{
+    command: string;
+}>;
+/**
+ * Command button. Attributes: `label`, `icon`, `command`, `disabled`, `pressed` (aria-pressed),
+ * `expanded` (aria-expanded), `icon-only`, `variant="stacked"`, `size="large|small"` (ribbon
+ * large and small commands), `tall` (with `icon-only`: a tool tile), `active`, `badge`, `caret`
+ * (a trailing menu chevron), `title`, `keyshortcuts` (forwarded as aria-keyshortcuts).
+ * Activation (pointer, Enter, Space) emits one bubbling, composed `office-command` `{ command }`;
+ * Enter and Space never reach the host's own key handlers. Nothing happens when disabled.
+ * Static `requestEvent`, `idAttribute` and `detailKey`, and the `iconName()` and `showsCaret()`
+ * methods, let a product subclass keep its published contract and glyph set.
+ */
+export declare class OfficeUiButton extends OfficeElement {
+    static requestEvent: string;
+    static idAttribute: string;
+    static detailKey: string;
+    static shadowRootOptions: {
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        delegatesFocus: boolean;
+    };
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+        };
+        pressed: {
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean | undefined;
+                toAttribute: (value: unknown) => string | null;
+            };
+        };
+    };
+    /** Everything else is an attribute, as it always was (see `OfficeElement.watched`). */
+    static watched: string[];
+    disabled: boolean;
+    pressed: boolean | undefined;
+    constructor();
+    /** The registered icon to draw; a product subclass may map names onto its glyph set. */
+    protected iconName(): string | null;
+    /** The tooltip: `title`, else the label of an icon-only button; a product may always show it. */
+    protected tooltip(label: string, iconOnly: boolean): string;
+    /** Whether the trailing menu chevron shows. */
+    protected showsCaret(): boolean;
+    private onKeydown;
+    private onClick;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export declare const defineButton: import("../registry.js").Definer;

package/dist/ribbon/gallery-styles.d.ts

@@ -0,0 +1,2 @@
+/** Add the light-DOM rules to the root holding `host` (a document or a shadow root), once. */
+export declare function attachGalleryStyles(host: HTMLElement): void;

package/dist/ribbon/gallery.d.ts

@@ -0,0 +1,97 @@
+import { type TemplateResult } from 'lit';
+import { OfficeElement } from '../base.js';
+export type OfficeGalleryPickEvent = CustomEvent<{
+    gallery: string;
+    itemId: string;
+}>;
+/** One tile. `preview` is SVG markup, parsed as an SVG document with executable parts removed. */
+export interface OfficeGalleryItem {
+    id: string;
+    label: string;
+    applied?: boolean | undefined;
+    preview?: string | undefined;
+}
+export interface OfficeGallerySection {
+    title?: string | undefined;
+    columns: number;
+    tileWidth: number;
+    tileHeight: number;
+    items: readonly OfficeGalleryItem[];
+}
+/** A gallery, translated. With `command` it is a single button that picks the first item. */
+export interface OfficeGalleryState {
+    id: string;
+    label: string;
+    /** Trigger name in the inline strip; defaults to "More <label>". */
+    moreLabel?: string | undefined;
+    disabled?: boolean | undefined;
+    command?: {
+        icon: string;
+        large?: boolean | undefined;
+        hint?: string | undefined;
+    } | undefined;
+    sections: readonly OfficeGallerySection[];
+    /** Tiles shown inline (`mode="inline"`); defaults to the first section's items. */
+    inline?: readonly OfficeGalleryItem[] | undefined;
+}
+/**
+ * `<office-ui-gallery>`: Office's ribbon gallery (Shape Styles, Themes, Table Styles). Set
+ * `state` (`OfficeGalleryState`, translated). `mode="inline"` shows a strip of tiles beside a
+ * More button; otherwise the trigger is a labelled dropdown (`chevron-only` keeps just the
+ * chevron, `icon` names its glyph). The popup opens below the trigger, keeps inside the window
+ * and closes on Escape, an outside press or a pick. ArrowDown on the trigger opens it and focuses
+ * the first tile. A pick emits `office-gallery-pick` `{ gallery, itemId }`.
+ *
+ * Tiles render in the light DOM beside the host's children (Lit renders the template into the
+ * host itself) so products can query them (`data-gallery-item`); the rules join the host's root
+ * once. Static `pickEvent`, `triggerAttribute`, `popupAttribute`, `itemAttribute` and
+ * `compactAttribute` keep a product's published names; override `triggerIcon()` to draw a product
+ * glyph.
+ */
+export declare class OfficeUiGallery extends OfficeElement {
+    static pickEvent: string;
+    static triggerAttribute: string;
+    static popupAttribute: string;
+    static itemAttribute: string;
+    static compactAttribute: string | null;
+    static styles: import("lit").CSSResult[];
+    /** `mode`, `chevron-only` and `icon` are read from the attributes, as before. */
+    static get observedAttributes(): string[];
+    private model;
+    private locked;
+    private opened;
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    get state(): OfficeGalleryState | undefined;
+    set state(value: OfficeGalleryState | null | undefined);
+    get disabled(): boolean;
+    set disabled(value: unknown);
+    get open(): boolean;
+    set open(value: unknown);
+    close(): void;
+    get trigger(): HTMLButtonElement;
+    /** The open popup; while closed it is not in the DOM, so this is a detached hidden placeholder. */
+    get popup(): HTMLElement;
+    private readonly closedPopup;
+    /** The trigger glyph: `command.icon` for a command, else the `icon` attribute. */
+    triggerIcon(): Element | null;
+    connectedCallback(): void;
+    /** Host attributes (never written before the element is connected). */
+    private markHost;
+    disconnectedCallback(): void;
+    private unavailable;
+    private pick;
+    private onTrigger;
+    private onKey;
+    private readonly onOutside;
+    private readonly onEscape;
+    private readonly position;
+    private cleanup;
+    private tile;
+    private lightTemplate;
+    private section;
+    /** The tiles are light-DOM children of the host, shown through this slot. */
+    protected render(): TemplateResult<1>;
+    protected updated(): void;
+}
+export declare const defineGallery: import("../registry.js").Definer;
+export { parseSvgPreview } from './safe-svg.js';

package/dist/ribbon/ribbon-group.d.ts

@@ -0,0 +1,35 @@
+import { OfficeElement } from '../base.js';
+/**
+ * Labelled group of ribbon commands: `role="group"`, `label` is the caption and name. `launcher`
+ * adds Office's corner dialog launcher (`launcher="<command>"` emits `office-command`
+ * `{ command }`; `launcher-label` names it; `launcher-disabled` disables it). For narrow windows
+ * an overflow controller sets `data-collapsed` (the group becomes one button showing `icon` and
+ * the label; activating it emits `office-ribbon-collapse-toggle`) and `data-open` (its commands
+ * open in a popup at `--office-ribbon-collapse-x/-y`). The group marks itself `data-compact-row`
+ * when every command is one line tall (they centre vertically) and `data-stack` when it holds only
+ * small drop-down galleries (`[mode="dropdown"]` without `data-command-large`), which stack in
+ * columns. Static `launcherEvent`/`collapseEvent` and `launcherDetail()` let a product subclass
+ * keep its published events.
+ */
+export declare class OfficeUiRibbonGroup extends OfficeElement {
+    static launcherEvent: string;
+    static collapseEvent: string;
+    static styles: import("lit").CSSResult[];
+    /** The group is configured by attributes, as it always was (see `OfficeElement.watched`). */
+    static watched: string[];
+    private observer;
+    /** The launcher's event detail; null emits nothing. */
+    protected launcherDetail(): Record<string, unknown> | null;
+    /** The registered icon on the collapsed face; a product subclass may map names. */
+    protected iconName(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private observe;
+    private measure;
+    private onLauncher;
+    /** The overflow controller listens for this and owns which popup is open. */
+    private onFace;
+    protected willUpdate(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export declare const defineRibbonGroup: import("../registry.js").Definer;

package/dist/{ribbon-section.d.ts → ribbon/ribbon-section.d.ts}

@@ -1,3 +1,4 @@
+import { OfficeElement } from '../base.js';
 /** One ribbon command, translated. Booleans map to the command element's attributes. */
 export interface OfficeRibbonCommandView {
     id: string;
@@ -33,4 +34,16 @@ export interface OfficeRibbonGroupView {
  * light DOM, so their events (`office-command` and so on) bubble as usual. Static `groupTag`,
  * `commandTag`, `groupIdAttribute` and `commandIdAttribute` let a product keep its aliases.
  */
-export declare const defineRibbonSection: import("./registry.js").Definer;
+export declare class OfficeUiRibbonSection extends OfficeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static groupTag: string;
+    static commandTag: string;
+    static groupIdAttribute: string;
+    static commandIdAttribute: string;
+    protected render(): import("lit").TemplateResult<1>;
+    get groups(): readonly OfficeRibbonGroupView[];
+    set groups(value: readonly OfficeRibbonGroupView[] | null | undefined);
+    connectedCallback(): void;
+}
+export declare const defineRibbonSection: import("../registry.js").Definer;

package/dist/ribbon/ribbon-stack.d.ts

@@ -0,0 +1,10 @@
+import { OfficeElement } from '../base.js';
+/**
+ * Layout for small ribbon commands: a column (Office's three-row stack of Cut, Copy and Format
+ * Painter) or, with `orientation="horizontal"`, a row (Bold, Italic, Underline). Not a group.
+ */
+export declare class OfficeUiRibbonStack extends OfficeElement {
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1>;
+}
+export declare const defineRibbonStack: import("../registry.js").Definer;

package/dist/ribbon/ribbon-tabs.d.ts

@@ -0,0 +1,82 @@
+import { OfficeElement } from '../base.js';
+/** Emitted when the user picks a tab; cancelable (`preventDefault()` keeps the current tab). */
+export type OfficeRibbonSelectEvent = CustomEvent<{
+    tab: string;
+}>;
+interface RibbonTab {
+    id: string;
+    label: string;
+    keytip?: string;
+    keytipPanel?: string;
+}
+/**
+ * `<office-ui-ribbon>`: the Office tab row (Quick Access Toolbar, File, tabs, search) over the
+ * tab panels. Panels are light-DOM children carrying `data-ribbon-tab` (id), `data-label` and
+ * optionally `data-tab-keytip`; the element builds the tabs from them, keeps exactly one panel
+ * visible and moves between tabs with the arrow keys, Home and End. Slots: `quick-access`,
+ * `search`, `end`. Attributes: `selected`, `label` (tab list name), `file-label` (default "File"),
+ * `no-file`, `file-expanded`, `file-keytip`. Events: `office-ribbon-select` `{ tab }`
+ * (cancelable) and `office-ribbon-file` when File is activated.
+ */
+export declare class OfficeUiRibbon extends OfficeElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        selected: {
+            type: StringConstructor;
+            noAccessor: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        fileLabel: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        noFile: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+            attribute: string;
+        };
+        fileExpanded: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        fileKeytip: {
+            attribute: string;
+            type: StringConstructor;
+        };
+        tabs: {
+            state: boolean;
+        };
+    };
+    label: string | null;
+    fileLabel: string | null;
+    noFile: boolean;
+    fileExpanded: string | null;
+    fileKeytip: string | null;
+    tabs: RibbonTab[];
+    private chosen;
+    constructor();
+    get selected(): string;
+    set selected(tab: string | null);
+    /** Focus the File button (for example when the backstage it opened closes). */
+    focusFile(): void;
+    /** Focus the selected tab. */
+    focusTab(): void;
+    private panels;
+    /** Read the tabs off the panels (on connection and whenever the slotted panels change). */
+    private build;
+    private choose;
+    private onTabClick;
+    private onKey;
+    connectedCallback(): void;
+    /** Exactly one panel shows. */
+    protected updated(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export declare const defineRibbon: import("../registry.js").Definer;
+export {};

package/dist/ribbon/ribbon-toggle.d.ts

@@ -0,0 +1,49 @@
+import { OfficeElement } from '../base.js';
+/**
+ * A ribbon checkbox row (View > Ruler, Gridlines): a labelled `office-ui-checkbox` sharing its
+ * keyboard and focus behaviour. Moved from pptx-viewer `pptx-ui-ribbon-toggle`. Controlled:
+ * `label`, `checked`, `disabled`, `title` and `command` attributes; user activation emits
+ * `office-toggle` `{ command, checked }` (static `requestEvent`, `idAttribute` and `detailKey`
+ * let a product subclass keep its published names). The host reflects the new state.
+ */
+export declare class OfficeUiRibbonToggle extends OfficeElement {
+    static requestEvent: string;
+    static idAttribute: string;
+    static detailKey: string;
+    /** The checkbox drawn inside; a product subclass may use its own aliased tag. */
+    static checkboxTag: string;
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        checked: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: true;
+            converter: {
+                fromAttribute: (value: string | null) => boolean;
+                toAttribute: (value: unknown) => string | null;
+            };
+        };
+    };
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+    /** `title` is a native attribute, so it is watched rather than declared as a property. */
+    static get observedAttributes(): string[];
+    constructor();
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /** Clicking the label text presses the checkbox, which is the only control that toggles. */
+    private onLabelClick;
+    private onChange;
+    protected render(): import("lit").TemplateResult;
+}
+export declare const defineRibbonToggle: import("../registry.js").Definer;

package/dist/ribbon/ribbon-toolbar.d.ts

@@ -0,0 +1,15 @@
+import { OfficeElement } from '../base.js';
+/**
+ * `role="toolbar"` container. Left/Right/Home/End move focus between enabled direct or
+ * group-nested controls (Up/Down instead when `aria-orientation="vertical"`).
+ * All items stay in the tab order: roving tabindex is not implemented yet.
+ */
+export declare class OfficeUiToolbar extends OfficeElement {
+    static styles: import("lit").CSSResult[];
+    constructor();
+    private items;
+    private onKey;
+    protected willUpdate(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export declare const defineToolbar: import("../registry.js").Definer;

package/dist/smartart/smartart.d.ts

@@ -0,0 +1,43 @@
+import { type PropertyValues } from 'lit';
+import type { DiagramDrawing } from 'ooxml-core/diagram';
+import { OfficeElement } from '../base.js';
+import { type SchemeColors, type SmartArtRenderReport } from './smartart-svg.js';
+export type { SchemeColors, SmartArtRenderReport } from './smartart-svg.js';
+export { renderDiagramDrawing } from './smartart-svg.js';
+export type OfficeSmartArtRenderEvent = CustomEvent<SmartArtRenderReport>;
+/**
+ * `<office-ui-smartart>` draws the cached drawing of a SmartArt diagram (core
+ * `DiagramDrawing`, from `ooxml-core/diagram`) as SVG. Set `drawing` (and
+ * optionally `schemeColors`, resolved theme colours such as `{ accent1: '#4472c4' }`);
+ * `label` becomes the accessible name (`role="img"`). It never re-lays-out a diagram: it shows
+ * what the producing application last computed. Approximations (preset outlines drawn as
+ * rectangles, gradient and pattern fills, 3D) are reported honestly in the
+ * `office-smartart-render` event detail and in `data-approximated` attributes, never hidden.
+ */
+export declare class OfficeUiSmartArt extends OfficeElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        drawing: {
+            attribute: boolean;
+        };
+        schemeColors: {
+            attribute: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+    };
+    drawing: DiagramDrawing | undefined;
+    schemeColors: SchemeColors;
+    label: string | null;
+    private figure;
+    private lastReport;
+    constructor();
+    /** The report of the last render (undefined while empty). */
+    get report(): SmartArtRenderReport | undefined;
+    /** The SVG is rebuilt only when the drawing or the scheme colours change. */
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): SVGSVGElement | import("lit").TemplateResult<1>;
+}
+export declare const defineSmartArt: import("../registry.js").Definer;

package/dist/smartart.d.ts

@@ -1,14 +1 @@
-import { type SmartArtRenderReport } from './smartart-svg.js';
-export type { SchemeColors, SmartArtRenderReport } from './smartart-svg.js';
-export { renderDiagramDrawing } from './smartart-svg.js';
-export type OfficeSmartArtRenderEvent = CustomEvent<SmartArtRenderReport>;
-/**
- * `<office-ui-smartart>` draws the cached drawing of a SmartArt diagram (core
- * `DiagramDrawing`, from `ooxml-core/diagram`) as SVG. Set `drawing` (and
- * optionally `schemeColors`, resolved theme colours such as `{ accent1: '#4472c4' }`);
- * `label` becomes the accessible name (`role="img"`). It never re-lays-out a diagram: it shows
- * what the producing application last computed. Approximations (preset outlines drawn as
- * rectangles, gradient and pattern fills, 3D) are reported honestly in the
- * `office-smartart-render` event detail and in `data-approximated` attributes, never hidden.
- */
-export declare const defineSmartArt: import("./registry.js").Definer;
+export * from './smartart/smartart.js';

package/dist/smartart.js

@@ -1,3 +1,3 @@
-export { defineSmartArt, renderDiagramDrawing } from './chunk-4JQLQROF.js';
-import './chunk-UEJ4F33J.js';
-import './chunk-G3LAGZEW.js';
+export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-3MDKXKKQ.js';
+import './chunk-5A4REH6T.js';
+import './chunk-HSJH6SUW.js';

package/dist/styles.d.ts

@@ -1,8 +1,5 @@
-/** Attach scoped CSS to a shadow root: a constructed stylesheet when available, else a `<style>`. */
-export declare function attachStyles(root: ShadowRoot, css: string): void;
 /**
  * Rules every control repeats: `hidden`, the coarse-pointer touch target and the forced-colors
- * focus ring. Prepended to each control's own CSS by `controlCss`.
+ * focus ring. `controlStyles` (base.ts) puts it ahead of each element's own `.css` file.
  */
 export declare const COMMON_CONTROL_CSS: string;
-export declare const controlCss: (css: string) => string;

package/dist/teams/app-rail.d.ts

@@ -0,0 +1,29 @@
+import { TeamsElement } from './base.js';
+export interface RailItem {
+    id: string;
+    label: string;
+    /** An icon name from the ooxml-ui icon registry (`chat`, `users`, `phone`, `folder`, ...). */
+    icon: string;
+    badge?: number;
+}
+/**
+ * The narrow app bar on the far left (Chat, Teams, Calls, Files). Properties: `items`,
+ * `selected`. Emits `office-rail-select` `{ id }`.
+ */
+export declare class OfficeUiAppRail extends TeamsElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        items: {
+            attribute: boolean;
+        };
+        selected: {
+            type: StringConstructor;
+        };
+    };
+    items: RailItem[];
+    selected: string;
+    constructor();
+    connectedCallback(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export declare const defineAppRail: import("../registry.js").Definer;

package/dist/teams/avatar.d.ts

@@ -0,0 +1,39 @@
+import { type PropertyValues } from 'lit';
+import { TeamsElement } from './base.js';
+export type Presence = 'available' | 'busy' | 'away' | 'offline';
+/**
+ * Round avatar with initials and an optional presence badge, like the Teams persona.
+ * Attributes: `name`, `color` (default derived from `seed`/`name`), `size` (`sm` | `md` | `lg` |
+ * `xl`), `presence` (`available` | `busy` | `away` | `offline`, absent = no badge).
+ */
+export declare class OfficeUiAvatar extends TeamsElement {
+    static styles: import("lit").CSSResult[];
+    static properties: {
+        name: {
+            type: StringConstructor;
+        };
+        seed: {
+            type: StringConstructor;
+        };
+        color: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        presence: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    name: string;
+    seed: string;
+    color: string;
+    size: 'sm' | 'md' | 'lg' | 'xl';
+    presence: Presence | '';
+    constructor();
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export declare const defineAvatar: import("../registry.js").Definer;

package/dist/teams/base.d.ts

@@ -0,0 +1,17 @@
+import { type CSSResult } from 'lit';
+import { OfficeElement } from '../base.js';
+/** An element's style list: the shared control base, the team reset and its own .css file. */
+export declare const withStyles: (css: string) => CSSResult[];
+/**
+ * Base of the team-workspace elements. They keep Lit's batched (asynchronous) updates: a host
+ * awaits `updateComplete`, and a chat list redraws once however many properties it sets.
+ */
+export declare class TeamsElement extends OfficeElement {
+    static syncUpdates: boolean;
+}
+/** A stable colour per id, so one person looks the same in every list. */
+export declare function colorFor(id: string): string;
+export declare function formatTime(ts: number): string;
+/** "Today", "Yesterday" or a date, for the separators between days in a conversation. */
+export declare function dayLabel(ts: number, now?: number): string;
+export declare function formatSize(bytes?: number): string;