ooxml-ui 0.13.0 → 0.15.0

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-JROJGF7A.js';
-export { defineIcon } from './chunk-4NUKVNSJ.js';
-import './chunk-NOQAM6ZS.js';
-import './chunk-D6EREKYF.js';
-import './chunk-MDW2Y5UN.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-ZBFAPBNU.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-4NUKVNSJ.js';
-import './chunk-D6EREKYF.js';
-import './chunk-MDW2Y5UN.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-LI6OV55P.js';
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-LI6OV55P.js';
-import { registerControls } from './chunk-JROJGF7A.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-JROJGF7A.js';
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-4NUKVNSJ.js';
-import { definePresence } from './chunk-NOQAM6ZS.js';
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-NOQAM6ZS.js';
-import { defineSmartArt } from './chunk-SDFQ7U2I.js';
-export { defineSmartArt, renderDiagramDrawing } from './chunk-SDFQ7U2I.js';
-export { CONTRACT_REVISION } from './chunk-D6EREKYF.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-MDW2Y5UN.js';
+import { installOfficeUiTheme } from './chunk-F4TM7U4P.js';
+export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-F4TM7U4P.js';
+import { registerControls } from './chunk-ZBFAPBNU.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-ZBFAPBNU.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/presence.js

@@ -1,3 +1,3 @@
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-NOQAM6ZS.js';
-import './chunk-D6EREKYF.js';
-import './chunk-MDW2Y5UN.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/select-menu.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Popup helpers of `office-ui-select`. Moved from pptx-viewer
+ * (`packages/shared/src/web-components/select-menu.ts`, `select-trigger.ts`).
+ */
+/** Mutations that can change a select's value, labels or font preview. */
+export declare const SELECT_OPTION_ATTRIBUTES: string[];
+/** The flattened option data the popup renders. */
+export interface SelectChoice {
+    value: string;
+    label: string;
+    disabled: boolean;
+    hidden: boolean;
+    group: string;
+    displayLabel?: string;
+    description?: string;
+    fontFamily?: string;
+}
+/** Flatten `<option>` children, keeping optgroup labels and disabled or hidden state. */
+export declare function collectSelectChoices(options: HTMLOptionElement[]): SelectChoice[];
+/** Build the popup's options (only while it is open or has been opened). */
+export declare function renderSelectMenu(menu: HTMLElement, choices: SelectChoice[], value: string): void;
+/**
+ * Prefer below the trigger, flipping above when that offers more room. Margins, the gap and the
+ * height cap come from `--office-space-2`, `--office-space-1` and `--office-select-max-height`
+ * (`--office-font-picker-max-height` for a font family picker).
+ */
+export declare function positionSelectMenu(menu: HTMLElement, trigger: HTMLElement, host: HTMLElement): void;
+/** Expose the keyboard target while keeping the selected state separate. */
+export declare function markSelectActive(menu: HTMLElement, trigger: HTMLElement, active: number, open: boolean): void;
+/** The next enabled, visible option when moving with the arrow keys (wrapping). */
+export declare function nextSelectActive(choices: SelectChoice[], active: number, step: number): number;
+/** Options a PageUp/PageDown press moves, like the visible rows of a native listbox. */
+export declare const SELECT_PAGE_SIZE = 8;
+/** Jump a page of options up (-1) or down (+1), clamped to the nearest enabled option. */
+export declare function pageSelectActive(choices: SelectChoice[], active: number, direction: 1 | -1): number;
+/** Trigger with an `icon` slot, the value text and a chevron. */
+export declare function createSelectTrigger(doc: Document): {
+    trigger: HTMLButtonElement;
+    text: HTMLSpanElement;
+};
+/** Optional editable content (`slot="custom"`) stays in the light DOM so hosts own its events. */
+export declare function prependSelectCustomSlot(host: HTMLElement, menu: HTMLElement): void;

package/dist/select-styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * `office-ui-select` styles, moved from pptx-viewer (`select-styles.ts`, `select-ribbon-styles.ts`)
+ * and expressed in tokens. `variant="ribbon-font"` and `variant="ribbon-icon"` are the compact
+ * ribbon combo and icon picker; `data-font-picker="family"` widens and lengthens the popup.
+ */
+export declare const SELECT_CSS: string;

package/dist/select.d.ts

@@ -1,13 +1,19 @@
+/** A programmatic choice; `<option>` elements satisfy the same shape. */
 export interface OfficeSelectOption {
     value: string;
     label: string;
     disabled?: boolean;
 }
 /**
- * Single-select dropdown. Properties: `options` (array), `value`, `disabled`, `selectedIndex`;
- * attributes `value`, `disabled`, `aria-label`. Trigger has `role="combobox"` and the popup is a
- * `listbox`. Keyboard: ArrowDown/Up (open, move), Home, End, Enter/Space (choose), Escape
- * (close), printable keys (typeahead); disabled options are skipped. `input` then `change`
- * bubble when the user picks; setting a property is silent.
+ * Single-select combobox. Moved from pptx-viewer `pptx-ui-select` (the declarative, most complete
+ * implementation). Choices come from `<option>` / `<optgroup>` children (with `data-display-label`,
+ * `data-description` and font previews through `style="font-family"`), or from the `options`
+ * property when there are none. `value`, `disabled`, `selectedIndex`, `aria-label`;
+ * `variant="ribbon-font"` (compact ribbon combo that accepts unlisted values, such as a typed font
+ * size) or `"ribbon-icon"`; `data-font-picker="family|size"`; an `icon` slot and a `custom` slot at
+ * the top of the popup. Keyboard: arrows, Home, End, PageUp/PageDown (8 options), typeahead,
+ * Enter/Space, Escape, Tab; disabled and hidden choices are skipped. The popup is a top-layer
+ * `popover`, flipped above the trigger when there is more room. `input` then `change` bubble on a
+ * user choice; setting a property is silent. Form-associated.
  */
 export declare const defineSelect: import("./registry.js").Definer;

package/dist/smartart.js

@@ -1,3 +1,3 @@
-export { defineSmartArt, renderDiagramDrawing } from './chunk-SDFQ7U2I.js';
-import './chunk-D6EREKYF.js';
-import './chunk-MDW2Y5UN.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-LI6OV55P.js';
-export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-MDW2Y5UN.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";
@@ -162,6 +184,15 @@ export declare const OFFICE_TOKENS: {
     readonly '--office-search-popup-min-width': "240px";
     readonly '--office-search-popup-max-height': "320px";
     readonly '--office-select-max-height': "240px";
+    readonly '--office-select-background': "var(--office-background, #ffffff)";
+    readonly '--office-select-menu-min-width': "90px";
+    readonly '--office-select-option-active': "color-mix(in srgb, var(--office-accent, #2563eb) 20%, var(--office-popover, #ffffff))";
+    readonly '--office-select-ribbon-menu-width': "192px";
+    readonly '--office-font-picker-max-height': "320px";
+    readonly '--office-font-picker-width': "256px";
+    readonly '--office-chevron-size': "6px";
+    readonly '--office-ribbon-combo-height': "28px";
+    readonly '--office-ribbon-icon-select-width': "36px";
     readonly '--office-search-width': "320px";
     readonly '--office-print-preview-width': "420px";
     readonly '--office-find-max-width': "640px";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "0.13.0",
+	"version": "0.15.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",