ooxml-ui 0.24.0 → 0.25.0

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

@@ -4,8 +4,8 @@ import { type OfficeTitleBarCommand, type OfficeTitleBarPlacement, type OfficeTi
 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
+ * Access Toolbar, file name and status, centred command search, `actions`, `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`

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

@@ -1,5 +1,39 @@
 import { OFFICE_TOKENS, TOUCH } from './chunk-HSJH6SUW.js';
 
+// src/theme-bridge.ts
+var SHADCN_NAMES = [
+  ["--office-foreground", "foreground"],
+  ["--office-muted-foreground", "muted-foreground"],
+  ["--office-background", "background"],
+  ["--office-surface", "card"],
+  ["--office-selected", "accent"],
+  ["--office-border", "border"],
+  ["--office-accent", "primary"],
+  ["--office-accent-foreground", "primary-foreground"],
+  ["--office-ring", "ring"],
+  ["--office-popover", "popover"],
+  // Popover text falls back to the plain foreground, as it does in the shadcn themes.
+  ["--office-popover-foreground", "popover-foreground", "foreground"],
+  ["--office-danger", "destructive"],
+  ["--office-danger-foreground", "destructive-foreground"]
+];
+function themeBridge(selector, map) {
+  const lines = Object.entries(map).filter(([, value]) => value).map(([name, value]) => `	${name}: ${value};`);
+  return `${selector} {
+${lines.join("\n")}
+}
+`;
+}
+function shadcnBridge(selector, prefix, options = {}) {
+  const map = {};
+  for (const [token, name, fallbackName] of SHADCN_NAMES) {
+    const fallback = options.fallbacks?.[name];
+    const inner = fallbackName ? `var(${prefix}${fallbackName})` : fallback;
+    map[token] = `var(${prefix}${name}${inner ? `, ${inner}` : ""})`;
+  }
+  return themeBridge(selector, { ...map, ...options.extra });
+}
+
 // src/theme.ts
 var THEME_STYLE_ID = "office-ui-theme";
 var DARK = `
@@ -67,4 +101,4 @@ function installOfficeUiTheme(doc = globalThis.document) {
   return true;
 }
 
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme };
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, shadcnBridge, themeBridge };

package/dist/{chunk-FWZIVXAV.js → chunk-SXCANAX7.js}

@@ -1085,7 +1085,9 @@ var OfficeUiRibbon = class extends OfficeElement {
     this.tabs = [];
   }
   get selected() {
-    return this.chosen ?? this.panels()[0]?.dataset.ribbonTab ?? "";
+    const shown = this.shown();
+    const chosen = shown.find((panel) => panel.dataset.ribbonTab === this.chosen);
+    return chosen?.dataset.ribbonTab ?? shown[0]?.dataset.ribbonTab ?? "";
   }
   set selected(tab) {
     this.chosen = tab;
@@ -1105,9 +1107,13 @@ var OfficeUiRibbon = class extends OfficeElement {
       (child) => child instanceof HTMLElement && !!child.dataset.ribbonTab
     );
   }
+  /** The panels that have a tab: those not marked `data-tab-hidden`. */
+  shown() {
+    return this.panels().filter((panel) => panel.dataset.tabHidden === void 0);
+  }
   /** Read the tabs off the panels (on connection and whenever the slotted panels change). */
   build() {
-    this.tabs = this.panels().map((panel) => {
+    this.tabs = this.shown().map((panel) => {
       const id = panel.dataset.ribbonTab;
       panel.setAttribute("role", "tabpanel");
       panel.setAttribute("aria-label", panel.dataset.label ?? id);
@@ -1140,9 +1146,23 @@ var OfficeUiRibbon = class extends OfficeElement {
     this.choose(next.dataset.tab);
     this.focusTab();
   }
+  /** Rebuild the tab row when a panel's label or visibility flag changes. */
+  watcher;
   connectedCallback() {
     this.build();
     super.connectedCallback();
+    const Observer = this.ownerDocument.defaultView?.MutationObserver;
+    this.watcher = Observer ? new Observer(() => this.build()) : void 0;
+    this.watcher?.observe(this, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ["data-tab-hidden", "data-label"]
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.watcher?.disconnect();
+    this.watcher = void 0;
   }
   /** Exactly one panel shows. */
   updated() {
@@ -4232,6 +4252,7 @@ var OfficeUiTitleBar = class extends OfficeElement {
 				</span>
 				${this.searchBox()}
 				<div class="end">
+					<slot name="actions"></slot>
 					<slot name="collaboration"></slot>
 					<slot name="account"></slot>
 				</div>

package/dist/controls.js

@@ -1,4 +1,4 @@
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-FWZIVXAV.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-SXCANAX7.js';
 import './chunk-HZ422LTR.js';
 import './chunk-XQWRKHC2.js';
 import './chunk-PCZJV6HQ.js';

package/dist/index.js

@@ -1,7 +1,7 @@
-import { installOfficeUiTheme } from './chunk-2X6QYQ3Q.js';
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-2X6QYQ3Q.js';
-import { registerControls } from './chunk-FWZIVXAV.js';
-export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-FWZIVXAV.js';
+import { installOfficeUiTheme } from './chunk-PAPKST6W.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, shadcnBridge, themeBridge } from './chunk-PAPKST6W.js';
+import { registerControls } from './chunk-SXCANAX7.js';
+export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, glyph, nextEnabledIndex, parseSvgPreview, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-SXCANAX7.js';
 import { defineSmartArt } from './chunk-RVZAYXTI.js';
 export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-RVZAYXTI.js';
 import { TEAMS_TAGS, registerTeams } from './chunk-TCBUC6BI.js';

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

@@ -15,7 +15,9 @@ interface RibbonTab {
  * 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 }`
+ * `no-file`, `file-expanded`, `file-keytip`. A panel with `data-tab-hidden` keeps its content but has
+ * no tab (a contextual tab, or one a customisation removed); if it was selected, the first
+ * remaining tab takes over. Events: `office-ribbon-select` `{ tab }`
  * (cancelable) and `office-ribbon-file` when File is activated.
  */
 export declare class OfficeUiRibbon extends OfficeElement {
@@ -68,12 +70,17 @@ export declare class OfficeUiRibbon extends OfficeElement {
     /** Focus the selected tab. */
     focusTab(): void;
     private panels;
+    /** The panels that have a tab: those not marked `data-tab-hidden`. */
+    private shown;
     /** Read the tabs off the panels (on connection and whenever the slotted panels change). */
     private build;
     private choose;
     private onTabClick;
     private onKey;
+    /** Rebuild the tab row when a panel's label or visibility flag changes. */
+    private watcher;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     /** Exactly one panel shows. */
     protected updated(): void;
     protected render(): import("lit").TemplateResult<1>;

package/dist/theme-bridge.d.ts

@@ -0,0 +1,25 @@
+import type { OfficeToken } from './tokens.js';
+/**
+ * Feeds the `--office-*` tokens from a product's own theme, so the shared elements follow it.
+ * Products (docx, xlsx, pptx, visio) already name their theme after shadcn/ui
+ * (`--<prefix>foreground`, `--<prefix>muted-foreground`, ...); `shadcnBridge('--dve-')` is the
+ * whole bridge for such a product. `themeBridge` takes any mapping for the rest.
+ *
+ * The CSS is declared on the selector you give (usually `:host` inside a shadow root, or the
+ * product's root element), not on `:root`: a product's colours often resolve where they are read,
+ * so a nested theme, a dark scheme or a host override keeps working. Pure strings, no DOM.
+ */
+export type ThemeBridgeMap = Partial<Record<OfficeToken, string>>;
+/** `selector { --office-x: value; ... }` for a mapping; entries without a value are skipped. */
+export declare function themeBridge(selector: string, map: ThemeBridgeMap): string;
+export interface ShadcnBridgeOptions {
+    /** Extra or overriding `--office-*` values, for example `{ '--office-font': '...' }`. */
+    extra?: ThemeBridgeMap;
+    /** A literal each theme variable falls back to when the product does not define it. */
+    fallbacks?: Partial<Record<string, string>>;
+}
+/**
+ * The bridge for a product whose theme variables are `<prefix><shadcn-name>`
+ * (`prefix` includes the dashes, for example `'--dve-'` or `'--pptx-'`).
+ */
+export declare function shadcnBridge(selector: string, prefix: string, options?: ShadcnBridgeOptions): string;

package/dist/theme.d.ts

@@ -1,3 +1,4 @@
+export { shadcnBridge, themeBridge, type ShadcnBridgeOptions, type ThemeBridgeMap, } from './theme-bridge.js';
 export { COMPACT, FOCUS_RING, OFFICE_TOKENS, tok, TOUCH, type OfficeToken } from './tokens.js';
 /**
  * Theme-token foundation. Custom properties cross shadow boundaries, so one `<style>` in the

package/dist/theme.js

@@ -1,2 +1,2 @@
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-2X6QYQ3Q.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, shadcnBridge, themeBridge } from './chunk-PAPKST6W.js';
 export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-HSJH6SUW.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "0.24.0",
+	"version": "0.25.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",
@@ -82,7 +82,7 @@
 	},
 	"dependencies": {
 		"lit": "^3.3.3",
-		"ooxml-core": "^0.16.0"
+		"ooxml-core": "^0.17.0"
 	},
 	"devDependencies": {
 		"@types/jsdom": "^30.0.0",