ooxml-ui 0.12.0 → 0.14.0

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

@@ -1,4 +1,5 @@
-import { definer, attachStyles, controlCss, emit } from './chunk-EY266IK3.js';
+import { definer, attachStyles, controlCss, emit } from './chunk-3BHP4IFP.js';
+import { tok } from './chunk-BDJW2KDI.js';
 
 // src/presence.ts
 function participantsFromAwareness(states, selfId) {
@@ -27,14 +28,14 @@ var initialsOf = (name) => {
 var CSS = `
 :host { display: inline-flex; align-items: center; }
 ul { display: flex; margin: 0; padding: 0; list-style: none; }
-li { margin-inline-start: -6px; }
+li { margin-inline-start: calc(-1 * ${tok("--office-space-1-5")}); }
 li:first-child { margin-inline-start: 0; }
 button, .more { box-sizing: border-box; display: inline-grid; place-items: center;
-	width: var(--office-target-size, 28px); height: var(--office-target-size, 28px); padding: 0; border-radius: 50%;
-	border: 2px solid var(--office-avatar-color, #6b7280); background: var(--office-surface, #f3f4f6);
-	color: var(--office-foreground, #1f2937); font: 600 11px var(--office-font, system-ui, sans-serif); cursor: pointer; }
-.more { cursor: default; border-color: var(--office-border, #d1d5db); }
-button:focus-visible { outline: 2px solid var(--office-ring, #2563eb); outline-offset: 1px; z-index: 1; }
+	width: ${tok("--office-target-size")}; height: ${tok("--office-target-size")}; padding: 0; border-radius: 50%;
+	border: ${tok("--office-border-width-thick")} solid ${tok("--office-avatar-color")}; background: ${tok("--office-surface")};
+	color: ${tok("--office-foreground")}; font: 600 ${tok("--office-font-size-xs")} ${tok("--office-font")}; cursor: pointer; }
+.more { cursor: default; border-color: ${tok("--office-border")}; }
+button:focus-visible { outline: ${tok("--office-focus-width")} solid ${tok("--office-ring")}; outline-offset: calc(${tok("--office-focus-offset")} / 2); z-index: 1; }
 button[data-status="idle"] { opacity: .7; }
 button[data-status="away"] { opacity: .45; border-style: dashed; }
 @media (forced-colors: active) {

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

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

package/dist/controls.js

@@ -1,4 +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-BN3UBHTC.js';
-export { defineIcon } from './chunk-YZ2JQNHX.js';
-import './chunk-RLPL7Q6J.js';
-import './chunk-EY266IK3.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 { defineIcon } from './chunk-WNSUNQIY.js';
+import './chunk-WKLVWPI7.js';
+import './chunk-3BHP4IFP.js';
+import './chunk-BDJW2KDI.js';

package/dist/document-notices.d.ts

@@ -47,7 +47,7 @@ export interface OfficePasteOptionsState {
     label?: string;
 }
 /**
- * `<office-ui-paste-options>`: the strip anchored 4px past a just-pasted object's bottom-right
+ * `<office-ui-paste-options>`: the strip anchored one `--office-space-1` step past a just-pasted object's bottom-right
  * corner (the host is the fixed box). A choice emits `office-paste-options-request`
  * `{ format }` then `office-paste-options-dismiss`; the first pointerdown or keydown outside
  * (Escape inside too) dismisses, armed one task after connecting so the paste gesture does not.

package/dist/icons.js

@@ -1,2 +1,3 @@
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-YZ2JQNHX.js';
-import './chunk-EY266IK3.js';
+export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-WNSUNQIY.js';
+import './chunk-3BHP4IFP.js';
+import './chunk-BDJW2KDI.js';

package/dist/index.js

@@ -1,13 +1,14 @@
-import { installOfficeUiTheme } from './chunk-H4KFVIGT.js';
-export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-H4KFVIGT.js';
-import { registerControls } from './chunk-BN3UBHTC.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-BN3UBHTC.js';
-export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-YZ2JQNHX.js';
-import { definePresence } from './chunk-RLPL7Q6J.js';
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-RLPL7Q6J.js';
-import { defineSmartArt } from './chunk-KJV76AB7.js';
-export { defineSmartArt, renderDiagramDrawing } from './chunk-KJV76AB7.js';
-export { CONTRACT_REVISION } from './chunk-EY266IK3.js';
+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';
 
 // src/index.ts
 var OFFICE_UI_TAGS = [

package/dist/presence.js

@@ -1,2 +1,3 @@
-export { definePresence, initialsOf, participantsFromAwareness } from './chunk-RLPL7Q6J.js';
-import './chunk-EY266IK3.js';
+export { definePresence, initialsOf, participantsFromAwareness } from './chunk-WKLVWPI7.js';
+import './chunk-3BHP4IFP.js';
+import './chunk-BDJW2KDI.js';

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,2 +1,3 @@
-export { defineSmartArt, renderDiagramDrawing } from './chunk-KJV76AB7.js';
-import './chunk-EY266IK3.js';
+export { defineSmartArt, renderDiagramDrawing } from './chunk-4WUYOQRL.js';
+import './chunk-3BHP4IFP.js';
+import './chunk-BDJW2KDI.js';

package/dist/styles.d.ts

@@ -4,5 +4,5 @@ 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`.
  */
-export declare const COMMON_CONTROL_CSS = "\n:host([hidden]) { display: none !important; }\n@media (pointer: coarse), (max-width: 767px) {\n\t:host { --office-target-size: 44px; }\n}\n@media (forced-colors: active) {\n\t:host(:focus-visible), :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }\n}\n";
+export declare const COMMON_CONTROL_CSS: string;
 export declare const controlCss: (css: string) => string;

package/dist/theme.d.ts

@@ -1,9 +1,10 @@
+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
  * document head themes every control. Every token also has a fallback inside each control, so
  * installing the theme is optional; a host overrides any token on `:root` or on a container.
  */
 export declare const THEME_STYLE_ID = "office-ui-theme";
-export declare const THEME_CSS = "\n:root {\n\t--office-foreground: #1f2937;\n\t--office-muted-foreground: #6b7280;\n\t--office-background: #ffffff;\n\t--office-surface: #f3f4f6;\n\t--office-border: #d1d5db;\n\t--office-accent: #2563eb;\n\t--office-accent-foreground: #ffffff;\n\t--office-ring: #2563eb;\n\t--office-danger: #b91c1c;\n\t--office-target-size: 28px;\n\t--office-radius: 4px;\n\t--office-font: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n}\n@media (prefers-color-scheme: dark) {\n\t:root:not([data-office-theme=\"light\"]) {\n\t--office-foreground: #f9fafb;\n\t--office-muted-foreground: #9ca3af;\n\t--office-background: #111827;\n\t--office-surface: #1f2937;\n\t--office-border: #374151;\n\t--office-accent: #6366f1;\n\t--office-ring: #818cf8;\n\t--office-danger: #f87171;\n\t}\n}\n:root[data-office-theme=\"dark\"] {\n\t--office-foreground: #f9fafb;\n\t--office-muted-foreground: #9ca3af;\n\t--office-background: #111827;\n\t--office-surface: #1f2937;\n\t--office-border: #374151;\n\t--office-accent: #6366f1;\n\t--office-ring: #818cf8;\n\t--office-danger: #f87171;\n}\n@media (pointer: coarse), (max-width: 767px) {\n\t:root { --office-target-size: 44px; }\n}\n@media (forced-colors: active) {\n\t:root {\n\t\t--office-foreground: CanvasText;\n\t\t--office-muted-foreground: GrayText;\n\t\t--office-background: Canvas;\n\t\t--office-surface: Canvas;\n\t\t--office-border: CanvasText;\n\t\t--office-accent: Highlight;\n\t\t--office-accent-foreground: HighlightText;\n\t\t--office-ring: Highlight;\n\t\t--office-danger: CanvasText;\n\t}\n}\n";
+export declare const THEME_CSS: string;
 /** Idempotent. Browser-only; returns false (and does nothing) without a document. */
 export declare function installOfficeUiTheme(doc?: Document | undefined): boolean;

package/dist/theme.js

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

package/dist/tokens.d.ts

@@ -0,0 +1,194 @@
+/**
+ * The ooxml-ui design tokens: the single source of every colour, size, space, radius, type,
+ * shadow, motion and layering value the controls use. Controls never write a literal; they read
+ * `tok('--office-…')`, which expands to `var(--office-…, <default>)`, so a control renders
+ * correctly with or without the installed theme and a host overrides any token on `:root` or on
+ * any container. `THEME_CSS` (theme.ts) declares these defaults on `:root` plus dark and
+ * forced-colours values. Component tokens default to the semantic ones.
+ */
+export declare const OFFICE_TOKENS: {
+    readonly '--office-foreground': "#1f2937";
+    readonly '--office-muted-foreground': "#6b7280";
+    readonly '--office-background': "#ffffff";
+    readonly '--office-surface': "#f3f4f6";
+    readonly '--office-selected': "#e5e7eb";
+    readonly '--office-border': "#d1d5db";
+    readonly '--office-accent': "#2563eb";
+    readonly '--office-accent-foreground': "#ffffff";
+    readonly '--office-ring': "#2563eb";
+    readonly '--office-danger': "#b91c1c";
+    readonly '--office-danger-foreground': "#ffffff";
+    readonly '--office-warning': "#d97706";
+    readonly '--office-warning-foreground': "#ffffff";
+    readonly '--office-info': "#3b82f6";
+    readonly '--office-popover': "var(--office-background, #ffffff)";
+    readonly '--office-popover-foreground': "var(--office-foreground, #1f2937)";
+    readonly '--office-overlay': "rgb(0 0 0 / 40%)";
+    readonly '--office-notice-background': "#fef3c7";
+    readonly '--office-notice-foreground': "#78350f";
+    readonly '--office-notice-border': "rgb(180 83 9 / 30%)";
+    readonly '--office-notice-accent': "#d97706";
+    readonly '--office-keytip-background': "#ffffff";
+    readonly '--office-keytip-foreground': "#1f1f1f";
+    readonly '--office-keytip-border': "#8a8886";
+    readonly '--office-highlight': "#dc2626";
+    readonly '--office-paper': "#ffffff";
+    readonly '--office-accent-hover': "color-mix(in srgb, var(--office-accent, #2563eb) 85%, #000)";
+    readonly '--office-font': "system-ui, -apple-system, \"Segoe UI\", sans-serif";
+    readonly '--office-font-size-3xs': "9px";
+    readonly '--office-font-size-2xs': "10px";
+    readonly '--office-font-size-xs': "11px";
+    readonly '--office-font-size-sm': "12px";
+    readonly '--office-font-size': "13px";
+    readonly '--office-font-size-md': "14px";
+    readonly '--office-font-size-lg': "15px";
+    readonly '--office-font-size-xl': "18px";
+    readonly '--office-font-weight-medium': "500";
+    readonly '--office-font-weight-bold': "600";
+    readonly '--office-line-height': "1.4";
+    readonly '--office-line-height-tight': "1.2";
+    readonly '--office-icon-stroke': "1.5";
+    readonly '--office-space-px': "1px";
+    readonly '--office-space-0': "2px";
+    readonly '--office-space-1': "4px";
+    readonly '--office-space-1-5': "6px";
+    readonly '--office-space-2': "8px";
+    readonly '--office-space-2-5': "10px";
+    readonly '--office-space-3': "12px";
+    readonly '--office-space-3-5': "14px";
+    readonly '--office-space-4': "16px";
+    readonly '--office-space-5': "20px";
+    readonly '--office-space-6': "24px";
+    readonly '--office-border-width': "1px";
+    readonly '--office-border-width-thick': "2px";
+    readonly '--office-radius-xs': "2px";
+    readonly '--office-radius-sm': "3px";
+    readonly '--office-radius': "4px";
+    readonly '--office-radius-md': "6px";
+    readonly '--office-radius-lg': "8px";
+    readonly '--office-radius-full': "999px";
+    readonly '--office-focus-width': "2px";
+    readonly '--office-focus-offset': "2px";
+    readonly '--office-target-size': "28px";
+    readonly '--office-target-size-touch': "44px";
+    readonly '--office-control-height': "24px";
+    readonly '--office-control-height-md': "28px";
+    readonly '--office-control-height-lg': "32px";
+    readonly '--office-input-height': "26px";
+    readonly '--office-control-height-xs': "22px";
+    readonly '--office-icon-size-xs': "10px";
+    readonly '--office-icon-size-sm': "12px";
+    readonly '--office-icon-size': "14px";
+    readonly '--office-icon-size-md': "16px";
+    readonly '--office-icon-size-ml': "18px";
+    readonly '--office-icon-size-lg': "20px";
+    readonly '--office-shadow-sm': "0 1px 3px rgb(0 0 0 / 20%)";
+    readonly '--office-shadow': "0 6px 20px rgb(0 0 0 / 18%)";
+    readonly '--office-shadow-lg': "0 10px 25px rgb(0 0 0 / 20%)";
+    readonly '--office-z-popover': "1100";
+    readonly '--office-z-dialog': "1000";
+    readonly '--office-z-backstage': "30";
+    readonly '--office-duration-fast': ".12s";
+    readonly '--office-duration': ".15s";
+    readonly '--office-duration-spin': ".8s";
+    readonly '--office-field-height': "28px";
+    readonly '--office-field-height-lg': "40px";
+    readonly '--office-field-radius': "5px";
+    readonly '--office-field-border': "var(--office-border, #d1d5db)";
+    readonly '--office-field-border-focus': "var(--office-ring, #2563eb)";
+    readonly '--office-field-background': "var(--office-background, #ffffff)";
+    readonly '--office-field-foreground': "var(--office-foreground, #1f2937)";
+    readonly '--office-field-placeholder': "var(--office-muted-foreground, #6b7280)";
+    readonly '--office-checkbox-size': "16px";
+    readonly '--office-checkbox-size-touch': "22px";
+    readonly '--office-checkbox-radius': "3px";
+    readonly '--office-checkbox-border': "var(--office-border, #d1d5db)";
+    readonly '--office-checkbox-background': "var(--office-background, #ffffff)";
+    readonly '--office-checkbox-accent': "var(--office-accent, #2563eb)";
+    readonly '--office-checkbox-accent-foreground': "var(--office-accent-foreground, #ffffff)";
+    readonly '--office-radio-dot-size': "8px";
+    readonly '--office-radio-dot-size-touch': "12px";
+    readonly '--office-switch-width': "32px";
+    readonly '--office-switch-height': "18px";
+    readonly '--office-switch-width-touch': "44px";
+    readonly '--office-switch-height-touch': "24px";
+    readonly '--office-switch-border-width': "1px";
+    readonly '--office-switch-knob-size': "12px";
+    readonly '--office-switch-knob-size-touch': "18px";
+    readonly '--office-switch-knob-offset': "2px";
+    readonly '--office-switch-border': "var(--office-border, #d1d5db)";
+    readonly '--office-switch-track': "var(--office-surface, #f3f4f6)";
+    readonly '--office-switch-track-on': "var(--office-accent, #2563eb)";
+    readonly '--office-switch-thumb': "var(--office-foreground, #1f2937)";
+    readonly '--office-switch-thumb-on': "var(--office-accent-foreground, #ffffff)";
+    readonly '--office-ribbon-tab-height': "35px";
+    readonly '--office-ribbon-group-gap': "2px";
+    readonly '--office-ribbon-group-height': "78px";
+    readonly '--office-ribbon-caption-line-height': "12px";
+    readonly '--office-ribbon-row-height': "22px";
+    readonly '--office-ribbon-file-min-width': "52px";
+    readonly '--office-launcher-width': "16px";
+    readonly '--office-launcher-height': "14px";
+    readonly '--office-tab-indicator-width': "2.5px";
+    readonly '--office-status-bar-height': "24px";
+    readonly '--office-tab-height': "28px";
+    readonly '--office-tab-max-width': "220px";
+    readonly '--office-zoom-slider-width': "120px";
+    readonly '--office-zoom-slider-min-width': "48px";
+    readonly '--office-zoom-value-width': "40px";
+    readonly '--office-dialog-width': "auto";
+    readonly '--office-dialog-max-width': "min(640px, 100vw)";
+    readonly '--office-dialog-max-height': "90vh";
+    readonly '--office-dialog-min-width': "min(320px, 100vw)";
+    readonly '--office-dialog-button-min-width': "76px";
+    readonly '--office-options-width': "min(820px, 100vw)";
+    readonly '--office-options-nav-width': "180px";
+    readonly '--office-options-min-height': "min(440px, 70vh)";
+    readonly '--office-options-label-width': "180px";
+    readonly '--office-options-row-height': "30px";
+    readonly '--office-options-number-width': "80px";
+    readonly '--office-info-size': "15px";
+    readonly '--office-selection-bar-width': "3px";
+    readonly '--office-backstage-nav-width': "200px";
+    readonly '--office-backstage-nav-background': "var(--office-accent, #2563eb)";
+    readonly '--office-backstage-nav-foreground': "var(--office-accent-foreground, #ffffff)";
+    readonly '--office-backstage-item-hover': "rgb(0 0 0 / 22%)";
+    readonly '--office-backstage-padding': "28px 40px";
+    readonly '--office-backstage-back-size': "36px";
+    readonly '--office-backstage-item-height': "38px";
+    readonly '--office-menu-min-width': "180px";
+    readonly '--office-menu-max-height': "60vh";
+    readonly '--office-context-menu-min-width': "200px";
+    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";
+    readonly '--office-find-bar-height': "40px";
+    readonly '--office-ruler-size': "18px";
+    readonly '--office-avatar-size': "48px";
+    readonly '--office-avatar-color': "var(--office-muted-foreground, #6b7280)";
+    readonly '--office-toast-width': "360px";
+    readonly '--office-account-field-width': "320px";
+};
+export type OfficeToken = keyof typeof OFFICE_TOKENS;
+/** `var(--office-…, <default>)` for a declared token. The default comes from the table. */
+export declare function tok(name: OfficeToken): string;
+/** The standard keyboard focus ring. */
+export declare const FOCUS_RING: string;
+/**
+ * Layout breakpoints. CSS forbids custom properties in media queries, so these are the only
+ * lengths written literally; every control uses these two.
+ */
+export declare const COMPACT = "(max-width: 767px)";
+export declare const TOUCH = "(pointer: coarse), (max-width: 767px)";

package/package.json

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