ooxml-ui 0.14.0 → 0.16.0

package/dist/{chunk-3BHP4IFP.js → chunk-NDEB6EBU.js}

@@ -1,4 +1,4 @@
-import { TOUCH, tok } from './chunk-BDJW2KDI.js';
+import { TOUCH, tok } from './chunk-4MT4OIAJ.js';
 
 // src/registry.ts
 var CONTRACT_REVISION = 1;

package/dist/{chunk-WNSUNQIY.js → chunk-VUXNXH4Q.js}

@@ -1,4 +1,4 @@
-import { definer, attachStyles, controlCss } from './chunk-3BHP4IFP.js';
+import { definer, attachStyles, controlCss } from './chunk-NDEB6EBU.js';
 
 // src/icons.ts
 var registry = /* @__PURE__ */ new Map();

package/dist/{chunk-WKLVWPI7.js → chunk-VYF7LGXZ.js}

@@ -1,5 +1,5 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-3BHP4IFP.js';
-import { tok } from './chunk-BDJW2KDI.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-NDEB6EBU.js';
+import { tok } from './chunk-4MT4OIAJ.js';
 
 // src/presence.ts
 function participantsFromAwareness(states, selfId) {

package/dist/context-menu.d.ts

@@ -1,10 +1,20 @@
 /** A `role="separator"` rule between groups of menu items. */
 export declare const defineMenuSeparator: import("./registry.js").Definer;
 /**
- * Right-click menu of `office-ui-menu-item` and `office-ui-menu-separator` children (Office's
- * shape and text context menus). `openAt(x, y)` shows it at client coordinates in the popover
- * top layer, kept inside the viewport; `close()` hides it. Arrow keys, Home and End move between
- * enabled items; Escape and Tab close and return focus to the element that was focused. Choosing
- * an item closes the menu and its `office-command` bubbles to the host. `label` names the menu.
+ * Office's right-click menu, in two modes sharing keyboard, type-ahead and dismissal:
+ *
+ * - **Children** (self-managed): `office-ui-menu-item` and `office-ui-menu-separator` children.
+ *   `openAt(x, y)` shows it in the popover top layer, kept inside the viewport; `close()` hides it.
+ *   Choosing an item closes the menu and its `office-command` bubbles to the host.
+ * - **Controlled** (moved from pptx-viewer `pptx-ui-context-menu`): set `state`
+ *   (`{ x, y, label, items: [{ id, label, separatorBefore?, heading?, danger?, disabled?,
+ *   checked?, icon? }], markers?, zIndex?, autoFocus? }`). The host is the fixed box at the
+ *   pointer, clamped into the window. It emits `office-menu-request` `{ id }` when a row is chosen
+ *   and `office-menu-close` `{ reason: 'escape' | 'outside' | 'tab' }` when dismissed, and never
+ *   closes itself: the host removes it or clears its items. While open it takes focus on the first
+ *   enabled row and returns focus to the opener when it goes away, unless something else took it.
+ *
+ * Arrow keys, Home, End and type-ahead (repeating a letter cycles) move between enabled rows.
+ * Static `requestEvent`, `closeEvent` and `markerPattern` let a product keep its published names.
  */
 export declare const defineContextMenu: import("./registry.js").Definer;

package/dist/controls.d.ts

@@ -35,6 +35,7 @@ export type { OfficeFindInputEvent, OfficeFindStepEvent } from './find-bar.js';
 export type { OfficePrintPreviewPageEvent } from './print-preview.js';
 export type { OfficeRibbonSelectEvent } from './ribbon-tabs.js';
 export { rulerDivisions } from './ruler.js';
+export { clampFlyoutPosition, EMPTY_MENU_STATE, nextEnabledIndex, typeAheadIndex, type FlyoutPositionInput, type OfficeMenuCloseReason, type OfficeMenuItem, type OfficeMenuState, } from './menu-model.js';
 export { OFFICE_TOAST_VISIBLE_LIMIT, type OfficeDialogFooterAction, type OfficeDialogFooterState, type OfficeDialogFooterVariant, type OfficeToast, type OfficeToastsState, } from './chrome-controls.js';
 export type { OfficePasteOption, OfficePasteOptionsState, OfficeReadOnlyBannerIntent, OfficeReadOnlyBannerState, } from './document-notices.js';
 export { clearOfficeProfile, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, profileInitials, readOfficeProfile, sanitizeOfficeProfile, writeOfficeProfile, type OfficeProfile, type OfficeProfileChangeEvent, } from './account.js';

package/dist/controls.js

@@ -1,5 +1,5 @@
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-EWNLGZPX.js';
-export { defineIcon } from './chunk-WNSUNQIY.js';
-import './chunk-WKLVWPI7.js';
-import './chunk-3BHP4IFP.js';
-import './chunk-BDJW2KDI.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-G2ZIAXOV.js';
+export { defineIcon } from './chunk-VUXNXH4Q.js';
+import './chunk-VYF7LGXZ.js';
+import './chunk-NDEB6EBU.js';
+import './chunk-4MT4OIAJ.js';

package/dist/icons.js

@@ -1,3 +1,3 @@
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-WNSUNQIY.js';
-import './chunk-3BHP4IFP.js';
-import './chunk-BDJW2KDI.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-VUXNXH4Q.js';
+import './chunk-NDEB6EBU.js';
+import './chunk-4MT4OIAJ.js';

package/dist/index.js

@@ -1,14 +1,14 @@
-import { installOfficeUiTheme } from './chunk-7CCQN3VM.js';
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-7CCQN3VM.js';
-import { registerControls } from './chunk-EWNLGZPX.js';
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, writeOfficeProfile } from './chunk-EWNLGZPX.js';
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-WNSUNQIY.js';
-import { definePresence } from './chunk-WKLVWPI7.js';
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-WKLVWPI7.js';
-import { defineSmartArt } from './chunk-4WUYOQRL.js';
-export { defineSmartArt, renderDiagramDrawing } from './chunk-4WUYOQRL.js';
-export { CONTRACT_REVISION } from './chunk-3BHP4IFP.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-BDJW2KDI.js';
+import { installOfficeUiTheme } from './chunk-F4TM7U4P.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-F4TM7U4P.js';
+import { registerControls } from './chunk-G2ZIAXOV.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-G2ZIAXOV.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-VUXNXH4Q.js';
+import { definePresence } from './chunk-VYF7LGXZ.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-VYF7LGXZ.js';
+import { defineSmartArt } from './chunk-A46H2JBV.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-A46H2JBV.js';
+export { CONTRACT_REVISION } from './chunk-NDEB6EBU.js';
+export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-4MT4OIAJ.js';
 
 // src/index.ts
 var OFFICE_UI_TAGS = [

package/dist/menu-model.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Menu data and the pure helpers both menu modes share. Moved from pptx-viewer
+ * (`web-components/context-menu-model.ts`, `render/flyout-position.ts`).
+ */
+/** One row of a controlled menu. Hosts decide `id`, wording, gating and what activation does. */
+export interface OfficeMenuItem {
+    /** Stable command id, echoed by the request event. */
+    id: string;
+    /** Translated visible label. */
+    label: string;
+    /** Draw a rule before this row. */
+    separatorBefore?: boolean;
+    /** Group heading shown before this row; the row and the ones after it join that group. */
+    heading?: string;
+    /** Destructive command (Delete): tinted. */
+    danger?: boolean;
+    /** Offered but unavailable: announced and drawn dim, skipped by the arrow keys. */
+    disabled?: boolean;
+    /** A toggle (Grid, Ruler) in this state; omitted for one-shot commands. */
+    checked?: boolean;
+    /** A registered icon drawn before the label. */
+    icon?: string;
+}
+/** Everything a controlled menu needs to draw. */
+export interface OfficeMenuState {
+    /** Pointer position, in viewport pixels; the menu clamps itself into the window. */
+    x: number;
+    y: number;
+    /** Accessible name. */
+    label: string;
+    items: readonly OfficeMenuItem[];
+    /** Test-hook attributes copied onto the host (names matching the element's `markerPattern`). */
+    markers?: readonly string[];
+    /** Stacking order; the `--office-z-popover` token applies when omitted. */
+    zIndex?: number;
+    /** Move focus onto the first enabled command on open. Default true. */
+    autoFocus?: boolean;
+}
+export type OfficeMenuCloseReason = 'escape' | 'outside' | 'tab';
+export declare const EMPTY_MENU_STATE: OfficeMenuState;
+/** Index of the next enabled row from `from` in `step` direction, wrapping; -1 if none. */
+export declare function nextEnabledIndex(items: readonly {
+    disabled?: boolean;
+}[], from: number, step: 1 | -1): number;
+/**
+ * Type-ahead target: the next enabled row after `from` whose label starts with `query`.
+ * Repeating one character cycles through the rows that start with it.
+ */
+export declare function typeAheadIndex(items: readonly {
+    label: string;
+    disabled?: boolean;
+}[], from: number, query: string): number;
+/** Where a flyout wants to sit, how big it is, and what it must fit inside. */
+export interface FlyoutPositionInput {
+    /** Anchor point in viewport coordinates (a pointer event's clientX/Y). */
+    x: number;
+    y: number;
+    /** Measured size; zero means "not measured yet". */
+    width: number;
+    height: number;
+    /** The box it must stay inside, normally the window's inner size. */
+    viewportWidth: number;
+    viewportHeight: number;
+    /** Gap kept from every edge, in px. Default 8. */
+    margin?: number;
+}
+/**
+ * The top-left corner keeping a pointer-anchored flyout fully on screen. Flips inwards at the
+ * right and bottom edges, as desktop menus do, and never returns a negative coordinate, so a
+ * flyout larger than the viewport stays reachable from the top.
+ */
+export declare function clampFlyoutPosition(input: FlyoutPositionInput): {
+    left: number;
+    top: number;
+};

package/dist/presence.js

@@ -1,3 +1,3 @@
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-WKLVWPI7.js';
-import './chunk-3BHP4IFP.js';
-import './chunk-BDJW2KDI.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-VYF7LGXZ.js';
+import './chunk-NDEB6EBU.js';
+import './chunk-4MT4OIAJ.js';

package/dist/ribbon.d.ts

@@ -1,7 +1,14 @@
 /**
- * Labelled group of ribbon commands: `role="group"`, `label` attribute is caption and name.
- * `launcher="<command>"` adds Office's corner dialog launcher, which emits `office-command`
- * `{ command }`; `launcher-disabled` disables it.
+ * 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 const defineRibbonGroup: import("./registry.js").Definer;
 /**

package/dist/smartart.js

@@ -1,3 +1,3 @@
-export { defineSmartArt, renderDiagramDrawing } from './chunk-4WUYOQRL.js';
-import './chunk-3BHP4IFP.js';
-import './chunk-BDJW2KDI.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-A46H2JBV.js';
+import './chunk-NDEB6EBU.js';
+import './chunk-4MT4OIAJ.js';

package/dist/theme.js

@@ -1,2 +1,2 @@
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-7CCQN3VM.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-BDJW2KDI.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-F4TM7U4P.js';
+export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-4MT4OIAJ.js';

package/dist/tokens.d.ts

@@ -124,6 +124,28 @@ export declare const OFFICE_TOKENS: {
     readonly '--office-ribbon-tab-height': "35px";
     readonly '--office-ribbon-group-gap': "2px";
     readonly '--office-ribbon-group-height': "78px";
+    readonly '--office-ribbon-group-padding': "4px 8px 2px";
+    readonly '--office-ribbon-separator-inset': "0px";
+    readonly '--office-ribbon-separator': "color-mix(in srgb, var(--office-border, #d1d5db) 60%, transparent)";
+    readonly '--office-ribbon-caption-size': "10px";
+    readonly '--office-ribbon-caption-padding': "2px 0 0";
+    readonly '--office-launcher-inset-end': "-6px";
+    readonly '--office-launcher-inset-bottom': "-1px";
+    readonly '--office-ribbon-compact-row-max': "36px";
+    readonly '--office-ribbon-stack-max-height': "80px";
+    readonly '--office-ribbon-collapse-x': "8px";
+    readonly '--office-ribbon-collapse-y': "120px";
+    readonly '--office-command-icon-color': "currentColor";
+    readonly '--office-command-large-height': "66px";
+    readonly '--office-command-large-min-width': "48px";
+    readonly '--office-command-large-max-width': "80px";
+    readonly '--office-command-large-icon': "32px";
+    readonly '--office-command-small-icon': "16px";
+    readonly '--office-command-tall-height': "62px";
+    readonly '--office-command-tall-min-width': "40px";
+    readonly '--office-command-tall-icon': "30px";
+    readonly '--office-command-active': "color-mix(in srgb, var(--office-accent, #2563eb) 15%, transparent)";
+    readonly '--office-collapsed-group-min-width': "56px";
     readonly '--office-ribbon-caption-line-height': "12px";
     readonly '--office-ribbon-row-height': "22px";
     readonly '--office-ribbon-file-min-width': "52px";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "0.14.0",
+	"version": "0.16.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",
@@ -35,27 +35,33 @@
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js"
+			"import": "./dist/index.js",
+			"default": "./dist/index.js"
 		},
 		"./theme": {
 			"types": "./dist/theme.d.ts",
-			"import": "./dist/theme.js"
+			"import": "./dist/theme.js",
+			"default": "./dist/theme.js"
 		},
 		"./icons": {
 			"types": "./dist/icons.d.ts",
-			"import": "./dist/icons.js"
+			"import": "./dist/icons.js",
+			"default": "./dist/icons.js"
 		},
 		"./controls": {
 			"types": "./dist/controls.d.ts",
-			"import": "./dist/controls.js"
+			"import": "./dist/controls.js",
+			"default": "./dist/controls.js"
 		},
 		"./presence": {
 			"types": "./dist/presence.d.ts",
-			"import": "./dist/presence.js"
+			"import": "./dist/presence.js",
+			"default": "./dist/presence.js"
 		},
 		"./smartart": {
 			"types": "./dist/smartart.d.ts",
-			"import": "./dist/smartart.js"
+			"import": "./dist/smartart.js",
+			"default": "./dist/smartart.js"
 		},
 		"./package.json": "./package.json"
 	},