ooxml-ui 1.6.2 → 1.8.0

package/dist/xlsx.js

@@ -1,17 +1,19 @@
-import './chunk-Z7CS3UUK.js';
+import './chunk-KF72ZA6V.js';
+import { syncRibbonAddIns } from './chunk-W6AV3GHC.js';
+export { RIBBON_ADD_IN_EVENT } from './chunk-W6AV3GHC.js';
 import { defineSmartArt } from './chunk-PXIYHFZ5.js';
-import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-QAIVGTQZ.js';
-export { XLSX_EDITOR_EVENTS } from './chunk-QAIVGTQZ.js';
+import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-7US5GCXF.js';
+export { XLSX_EDITOR_EVENTS } from './chunk-7US5GCXF.js';
 import './chunk-SNV6YKPC.js';
 import { shadcnBridge } from './chunk-BCH2ZLWI.js';
-import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineRibbonActions, defineTitleBar, defineStatusBar, defineZoomSlider, rangeControl, defineDialog, runKeyTips, assignKeyTips, defineCheckbox, defineGallery, defineContextMenu, defineCommentsPane, parseSvgPreview } from './chunk-QHAE6Y5B.js';
+import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineRibbonActions, defineTitleBar, defineStatusBar, defineZoomSlider, rangeControl, defineDialog, runKeyTips, assignKeyTips, defineCheckbox, defineGallery, defineColorGrid, defineContextMenu, defineCommentsPane, parseSvgPreview } from './chunk-O7APCA5N.js';
 import { getIcon, registerIcon } from './chunk-M6GF5ED2.js';
 import { definePresence } from './chunk-L7JV5FVE.js';
 import { withTokens } from './chunk-OGNNNTKI.js';
 import './chunk-SPNWHKSR.js';
 import { SPECIAL_CODES, FRACTION_CODES, AUTOSUM_FUNCTIONS, themeToCssVars, lightTheme, darkTheme, ICON_ACCENTS, ICON_PATHS, normalizeThemeMode, applyThemeColors, parseSelectionRef, selectionRef, normalizeEditorLocale, DirtyState, createCommandRegistry, createDialogRegistry, activeRef, createSelectionModel, SheetSelections, translator, initialSelection, sheetBaseName, historyOf, onRibbonTabsChange, activeChart, editChart, ribbonTabs, isTabHidden, selectTab, setTabHidden, tabButton, searchCommands, formatNumber, TEMPLATES, createTemplateWorkbook, isMenuSeparator, registerRibbonTabs, installFormatPainter, SHEET_ICONS, clipboardCommands, fontCommands, alignmentCommands, numberCommands, cellCommands, editingCommands, pageLayoutCommands, formulaCommands, dataCommands, contextualCommands, reviewTab, viewTab, helpTab, editBridge, CellViewCache, QUADRANTS, columnHeaderHeight, rowHeaderWidth, GridGeometry, cellRange, scrollToReveal, buildItems, fitNumber, cssFont, clampAddress, selectCell, movingEnd, extendSelection, moveWithinSelection, rowsRange, colsRange, ALL_RANGE, tabMenu, editing, icon, DATA_BAR_COLORS, dataBarRule, COLOR_SCALES, colorScaleRule, iconSetRule, target, tableAt, viewing, activeTable, numberFormatOptions, FONT_NAMES, FONT_SIZES, BORDER_PRESETS, ORIENTATIONS, ACCOUNTING_FORMATS, themePaletteItems, MARGIN_PRESETS, PAPER_SIZES, FUNCTION_MENUS, MORE_FUNCTION_CATEGORIES, functionsIn, isSingleCell, spanRange, selectionCellCount, addRange, activeStyle, selectSpecial, insertFunctionCall, guessHeader, regionOf, HIGHLIGHT_STYLES, ICON_SETS, TABLE_STYLES, tableStylePreview, resolveNameBox, absoluteReference, nameForRange, fillPaint, iconSvg, colSelected, rowSelected, rowHeaderMenu, columnHeaderMenu, cellMenu, recentFunctions, evaluateRef, buildChart, detectCategory, CATEGORIES, TIME_CODES, DATE_CODES, DEFAULT_OPTIONS, cellStyleItems, textDecoration, justify, alignItems, textAlign, hasBorders, edgeCss, diagonalSvg, SYMBOLS, buildCode, UNSET, dxfCss, negativeCodes, iconCount, iconThresholds, rowsOf, colsOf } from 'ooxml-core/xlsx/ui';
 export { EDITOR_LOCALES, THEME_KEYS, normalizeEditorLocale, registerRibbonTabs, themeToCssVars, darkTheme as xlsxDarkTheme, lightTheme as xlsxLightTheme } from 'ooxml-core/xlsx/ui';
-import { createWorksheet, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, chartView, createRefEvaluator, chartBarSpacing, CHART_FILL_PARTS, selectionStats, formatSelectionStat, formatRange, chartSeriesTransparencyPatch, chartSeriesTransparency, chartSeriesGradientPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, chartWithElementFills, chartElementTransparencyPatch, chartElementTransparency, chartElementGradientPatch, chartElementSolidFillPatch, chartElementFillPatch, chartElementFill, usedRange, chartGradientStopTransparency, createGridMetrics, mergeView, cellView, DEFAULT_THEME, resolveColor, nextSheetName, FUNCTION_CATALOG, mergeAt, visibleCells, getCell, cellInputText, closeParens, isFormulaText, parseCellInput, referenceTarget, formatAddress, navigate, anchorToPixelBox, renderChartSvg, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, resolvePasteOptions, DEFAULT_COL_WIDTH, nameAtCaret, functionMatches, callAtCaret, splice, acceptsReference, translateFormula, isCellError, layoutRemoteSelections, parseHtmlTable, toggleAbsolute, rangeContains, formatValue, isDateFormat, pictureAnchorAt, validateDefinedName, parseAddress, styleAt, parseRange, rangesIntersect, chartColorScheme, coloredReferences, syntaxParams, activeParam, columnLabel, THEME_SLOTS, normalizeRange, currentRegion, autoFitColumnWidth, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, sheetByName, quoteSheetName, serialToDate, BUILTIN_NUMBER_FORMATS, pixelsToColumnWidth, validateTableName } from 'ooxml-core/xlsx';
+import { createWorksheet, createEditSession, approximateMeasure, createWorkbook, MAX_ROW, MAX_COL, chartView, createRefEvaluator, chartBarSpacing, CHART_FILL_PARTS, selectionStats, formatSelectionStat, formatRange, chartSeriesTransparencyPatch, chartSeriesTransparency, chartSeriesGradientPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, chartWithElementFills, chartElementTransparencyPatch, chartElementTransparency, chartElementGradientPatch, chartElementSolidFillPatch, chartElementFillPatch, chartElementFill, usedRange, chartGradientStopTransparency, createGridMetrics, mergeView, cellView, resolveColor, DEFAULT_THEME, nextSheetName, FUNCTION_CATALOG, mergeAt, visibleCells, getCell, cellInputText, closeParens, isFormulaText, parseCellInput, referenceTarget, formatAddress, navigate, anchorToPixelBox, renderChartSvg, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, resolvePasteOptions, DEFAULT_COL_WIDTH, nameAtCaret, functionMatches, callAtCaret, splice, acceptsReference, translateFormula, isCellError, layoutRemoteSelections, parseHtmlTable, toggleAbsolute, rangeContains, formatValue, isDateFormat, pictureAnchorAt, validateDefinedName, parseAddress, styleAt, parseRange, rangesIntersect, chartColorScheme, coloredReferences, syntaxParams, activeParam, columnLabel, THEME_SLOTS, normalizeRange, currentRegion, autoFitColumnWidth, validateSheetName, dateToSerial, IMAGE_EXTENSIONS, verifySheetPassword, verifyWorkbookPassword, sheetByName, quoteSheetName, serialToDate, BUILTIN_NUMBER_FORMATS, pixelsToColumnWidth, validateTableName } from 'ooxml-core/xlsx';
 import { hyperlinkPolicy } from 'ooxml-core/opc';
 import { resolveChartGradient, sortGradientStops, withChartGradientDirection, buildChartGradientDef, chartGradientMarkup, CHART_COLOR_PALETTES, chartPaletteColors } from 'ooxml-core/chart';
 import { render } from 'lit';
@@ -24,7 +26,7 @@ var shell_default = "/* Frame, title bar and status bar. Mirrors docx-viewer's c
 var ribbon_default = "/* Ribbon: tabs, panels, groups and controls. Mirrors docx-viewer's styles/ribbon*.css. */\n.xve-ribbon-gallery[data-office-gallery] .trigger {\n	flex-direction: column;\n	justify-content: center;\n	min-width: 56px;\n	height: 78px;\n	white-space: normal;\n	text-align: center;\n}\n.xve-ribbon-gallery[data-office-gallery] .trigger > svg {\n	width: 28px;\n	height: 28px;\n}\n.xve-ribbon-gallery[data-office-gallery] .trigger > span:not([aria-hidden]) {\n	max-width: 56px;\n}\n.xve-ribbon {\n	position: relative;\n	display: flex;\n	flex: none;\n	min-width: 0;\n	flex-direction: column;\n	background: var(--surface);\n	border-bottom: 1px solid var(--line);\n}\n/* The tab row, File button and collapse button are the shared office-ui-ribbon; these colour it. */\n.xve-ribbon {\n	--office-ribbon-contextual: #0f7b6c;\n}\n.xve-ribbon::part(file) {\n	font-weight: 600;\n}\n.ribbon-panel {\n	display: flex;\n	flex: none;\n	box-sizing: border-box;\n	height: 104px;\n	min-width: 0;\n	align-items: stretch;\n	gap: 4px;\n	padding: 6px 10px 4px;\n	overflow-x: auto;\n	overflow-y: hidden;\n	scrollbar-width: thin;\n}\n.ribbon-group {\n	position: relative;\n	display: flex;\n	flex: 0 0 auto;\n	align-items: flex-start;\n	min-width: 0;\n	gap: 2px;\n	padding: 2px 10px 18px 2px;\n	border-right: 1px solid var(--line);\n}\n.ribbon-group:last-child {\n	border: 0;\n}\n.ribbon-group::after {\n	position: absolute;\n	right: 0;\n	bottom: 2px;\n	left: 0;\n	color: var(--muted);\n	font-size: 10px;\n	line-height: 1.1;\n	text-align: center;\n	white-space: nowrap;\n	content: attr(data-caption);\n}\n.ribbon-caption-sizer {\n	position: absolute;\n	visibility: hidden;\n	font-size: 10px;\n	white-space: nowrap;\n}\n.ribbon-stack {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	gap: 2px;\n}\n.ribbon-stack > .ribbon-stack {\n	flex-direction: row;\n	align-items: center;\n}\n.ribbon-separator {\n	align-self: stretch;\n	width: 1px;\n	margin: 2px 3px;\n	background: var(--line);\n}\n.ribbon-stack > .ribbon-separator {\n	width: auto;\n	height: 1px;\n}\n.ribbon-stack > .ribbon-stack > .ribbon-separator {\n	width: 1px;\n	height: 20px;\n}\n\n/* Buttons */\n.ribbon-group button {\n	flex: none;\n	min-width: 28px;\n	height: 28px;\n	max-width: 100%;\n	padding: 0 4px;\n	overflow: hidden;\n	border: 1px solid transparent;\n	border-radius: 4px;\n	background: transparent;\n	color: var(--ink);\n	font:\n		400 12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-group button:hover:not(:disabled) {\n	border-color: var(--line);\n	background: var(--accent-soft);\n}\n.ribbon-group button[aria-pressed='true'],\n.ribbon-group button[aria-expanded='true'] {\n	border-color: color-mix(in srgb, var(--xl) 45%, transparent);\n	background: color-mix(in srgb, var(--xl) 20%, transparent);\n}\n.ribbon-group button:active:not(:disabled) {\n	background: color-mix(in srgb, var(--xl) 28%, transparent);\n}\n.ribbon-group button:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: -2px;\n}\n.ribbon-group button:disabled,\n.ribbon-group input:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n.ribbon-group button.ribbon-small {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	gap: 4px;\n	height: 24px;\n	padding: 0 3px;\n}\n.ribbon-group button.ribbon-small.ribbon-labelled {\n	justify-content: flex-start;\n	padding: 0 6px 0 4px;\n}\n.ribbon-group button.ribbon-large {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: flex-start;\n	gap: 2px;\n	width: auto;\n	min-width: 48px;\n	height: 76px;\n	padding: 3px 3px 2px;\n	font-size: 11px;\n	line-height: 1.15;\n	white-space: normal;\n	text-align: center;\n}\n.ribbon-large > .ribbon-icon:last-child:not(:first-child) {\n	margin-top: auto;\n}\n.ribbon-large > span,\n.ribbon-caption {\n	/* Two balanced lines (see ribbon/caption.ts); the button grows to the widest. */\n	white-space: pre;\n}\n.ribbon-icon {\n	flex: none;\n}\n.ribbon-icon[data-icon$='-caret'],\n.ribbon-icon[data-icon='caret'] {\n	opacity: 0.8;\n}\n\n/* Split buttons: a main half and a caret that opens a menu or the colour grid. */\n.ribbon-split {\n	display: inline-flex;\n	align-items: stretch;\n}\n.ribbon-split.ribbon-split-large {\n	flex-direction: column;\n}\n.ribbon-group .ribbon-split > button:first-child {\n	border-top-right-radius: 0;\n	border-bottom-right-radius: 0;\n}\n.ribbon-group .ribbon-split > .ribbon-caret {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	width: 14px;\n	min-width: 14px;\n	padding: 0;\n	border-top-left-radius: 0;\n	border-bottom-left-radius: 0;\n}\n.ribbon-group .ribbon-split-large > button:first-child {\n	height: 46px;\n	border-radius: 4px 4px 0 0;\n}\n.ribbon-group .ribbon-split-large > .ribbon-caret {\n	width: auto;\n	height: 26px;\n	border-radius: 0 0 4px 4px;\n	font-size: 11px;\n	flex-direction: column;\n	gap: 0;\n}\n.ribbon-color {\n	position: relative;\n}\n.ribbon-group button.ribbon-color::after {\n	position: absolute;\n	right: 4px;\n	bottom: 2px;\n	left: 4px;\n	height: 3px;\n	background: var(--bar, transparent);\n	outline: 1px solid var(--line);\n	content: '';\n}\n\n/* Editable combo boxes (font name and size) and plain selects. */\n.ribbon-combo {\n	display: inline-flex;\n	align-items: stretch;\n	height: 24px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: var(--surface);\n}\n.ribbon-combo:focus-within {\n	border-color: var(--xl);\n	outline: 1px solid var(--xl);\n}\n.ribbon-combo input {\n	flex: 1;\n	min-width: 0;\n	padding: 0 6px;\n	border: 0;\n	background: transparent;\n	color: var(--ink);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	outline: none;\n}\n.ribbon-group .ribbon-combo .ribbon-caret {\n	width: 18px;\n	min-width: 18px;\n	height: 100%;\n	padding: 0;\n	border: 0;\n	border-radius: 0;\n}\n\n/* Plain drop-downs (Number Format) and gallery previews. */\n.ribbon-group select.ribbon-select {\n	height: 24px;\n	padding: 0 6px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: var(--surface);\n	color: var(--ink);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-overflow: ellipsis;\n}\n.ribbon-group select.ribbon-select:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: -1px;\n}\n.ribbon-gallery-preview {\n	display: block;\n	height: 36px;\n	margin-bottom: 3px;\n	border: 1px solid var(--line);\n	border-radius: 2px;\n	background: #fff;\n	color: #1f1f1f;\n	font-size: 11px;\n	line-height: 36px;\n	text-align: center;\n	overflow: hidden;\n	white-space: nowrap;\n	text-overflow: ellipsis;\n}\n.ribbon-gallery-preview > svg {\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n\n/* Dialog launcher: the corner arrow of a group. */\n.ribbon-group button.ribbon-launcher {\n	position: absolute;\n	right: 2px;\n	bottom: 0;\n	z-index: 1;\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	width: 14px;\n	min-width: 14px;\n	height: 14px;\n	padding: 0;\n	color: var(--muted);\n}\n\n/* Collapsed groups: a narrow ribbon folds its rightmost groups into one dropdown each. */\n.ribbon-group > .ribbon-overflow-button {\n	display: none;\n}\n.ribbon-group[data-collapsed] {\n	padding-right: 4px;\n}\n.ribbon-group[data-collapsed] > :not(.ribbon-overflow-button) {\n	display: none !important;\n}\n.ribbon-group[data-collapsed] > button.ribbon-overflow-button {\n	display: flex;\n}\n.ribbon-group[data-collapsed]::after {\n	display: none;\n}\n.ribbon-overflow-panel .ribbon-group {\n	height: 84px;\n	padding-right: 2px;\n	border: 0;\n}\n\n/* KeyTips */\n.xve-keytip {\n	position: absolute;\n	bottom: -2px;\n	left: 50%;\n	z-index: 70;\n	min-width: 16px;\n	padding: 1px 4px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: #1f1f1f;\n	color: #fff;\n	font:\n		600 11px/14px 'Segoe UI',\n		Arial,\n		sans-serif;\n	text-align: center;\n	pointer-events: none;\n	transform: translateX(-50%);\n}\n.xve-keytip-command {\n	position: fixed;\n	bottom: auto;\n}\n\n/* Accent hues on command icons, as in Office. */\n:host {\n	--ribbon-accent-blue: #2b7cd3;\n	--ribbon-accent-green: #2f9e5f;\n	--ribbon-accent-red: #d13438;\n	--ribbon-accent-orange: #d9822b;\n}\n@media (prefers-color-scheme: dark) {\n	:host(:not([theme='light'])) {\n		--ribbon-accent-blue: #5ea5f0;\n		--ribbon-accent-green: #5cc98a;\n		--ribbon-accent-red: #f07a7d;\n		--ribbon-accent-orange: #f0a35e;\n	}\n}\n:host([theme='dark']) {\n	--ribbon-accent-blue: #5ea5f0;\n	--ribbon-accent-green: #5cc98a;\n	--ribbon-accent-red: #f07a7d;\n	--ribbon-accent-orange: #f0a35e;\n}\n.ribbon-icon[data-accent='blue'] {\n	color: var(--ribbon-accent-blue);\n}\n.ribbon-icon[data-accent='green'] {\n	color: var(--ribbon-accent-green);\n}\n.ribbon-icon[data-accent='red'] {\n	color: var(--ribbon-accent-red);\n}\n.ribbon-icon[data-accent='orange'] {\n	color: var(--ribbon-accent-orange);\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/popups.css?raw
-var popups_default = "/* Floating surfaces: ribbon popovers, menus, the colour grid, Tell me, toasts and the shell dialogs. */\n.ribbon-popover {\n	position: fixed;\n	z-index: 1000;\n	box-sizing: border-box;\n	padding: 4px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n	background: var(--xve-popover);\n	box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);\n	color: var(--xve-popover-foreground);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.ribbon-popover.ribbon-menu-list,\n.ribbon-popover.ribbon-list {\n	display: flex;\n	min-width: 180px;\n	max-height: min(70vh, 420px);\n	flex-direction: column;\n	overflow-y: auto;\n}\n.ribbon-menu-list [role='menuitem'],\n.ribbon-menu-list [role='menuitemcheckbox'],\n.ribbon-list [role='option'] {\n	display: flex;\n	align-items: center;\n	gap: 10px;\n	width: 100%;\n	padding: 5px 12px 5px 8px;\n	border: 0;\n	border-radius: 3px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	text-align: left;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-menu-list [role^='menuitem']:hover:not(:disabled),\n.ribbon-menu-list [role^='menuitem']:focus-visible,\n.ribbon-list [role='option']:hover,\n.ribbon-list [role='option']:focus-visible {\n	background: var(--accent-soft);\n	outline: none;\n}\n.ribbon-menu-list [role^='menuitem']:disabled {\n	opacity: 0.45;\n	cursor: default;\n}\n.ribbon-menu-list [aria-checked='true'] {\n	font-weight: 600;\n}\n.ribbon-menu-list .ribbon-menu-icon {\n	display: inline-flex;\n	width: 16px;\n}\n.ribbon-menu-list .ribbon-menu-shortcut {\n	margin-left: auto;\n	padding-left: 18px;\n	color: var(--muted);\n}\n.ribbon-menu-list [role='separator'] {\n	height: 1px;\n	margin: 4px 2px;\n	background: var(--line);\n}\n.ribbon-list [aria-selected='true'] {\n	color: var(--xl);\n	font-weight: 600;\n}\n.ribbon-popover.ribbon-gallery-menu {\n	display: grid;\n	grid-template-columns: repeat(4, 96px);\n	gap: 4px;\n	max-height: min(70vh, 420px);\n	overflow-y: auto;\n}\n.ribbon-gallery-menu button {\n	padding: 4px;\n	border: 1px solid transparent;\n	border-radius: 3px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.ribbon-gallery-menu button:hover,\n.ribbon-gallery-menu button:focus-visible {\n	border-color: var(--line);\n	background: var(--accent-soft);\n	outline: none;\n}\n\n/* Colour picker: Automatic, Theme Colors (ten columns over five tints), Standard Colors, More. */\n.ribbon-popover.color-grid {\n	display: block;\n	width: 236px;\n	padding: 8px 10px;\n}\n.color-grid-title {\n	margin: 6px 0 4px;\n	color: var(--muted);\n	font-weight: 600;\n	font-size: 11px;\n}\n.color-grid-cells {\n	display: grid;\n	grid-template-columns: repeat(10, 20px);\n	gap: 2px 3px;\n}\n.color-grid .swatch {\n	width: 20px;\n	height: 20px;\n	padding: 0;\n	border: 1px solid var(--line);\n	border-radius: 2px;\n	background: var(--swatch);\n	cursor: pointer;\n}\n.color-grid .swatch:hover,\n.color-grid .swatch:focus-visible {\n	outline: 2px solid var(--xl);\n	outline-offset: 1px;\n}\n.color-grid-command {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	width: 100%;\n	margin: 2px 0;\n	padding: 5px 6px;\n	border: 0;\n	border-radius: 3px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	text-align: left;\n	cursor: pointer;\n}\n.color-grid-command:hover,\n.color-grid-command:focus-visible {\n	background: var(--accent-soft);\n}\n.color-grid-input {\n	position: absolute;\n	width: 0;\n	height: 0;\n	padding: 0;\n	border: 0;\n	opacity: 0;\n	pointer-events: none;\n}\n\n/* Toasts */\n.xve-toasts {\n	position: absolute;\n	z-index: 90;\n	right: 16px;\n	bottom: 40px;\n	display: flex;\n	max-width: min(420px, calc(100% - 32px));\n	flex-direction: column;\n	gap: 8px;\n	pointer-events: none;\n}\n.xve-toast {\n	display: flex;\n	align-items: flex-start;\n	gap: 8px;\n	padding: 10px 12px;\n	border: 1px solid var(--line);\n	border-left: 4px solid var(--xl);\n	border-radius: 6px;\n	background: var(--xve-popover);\n	box-shadow: 0 8px 24px #0003;\n	color: var(--xve-popover-foreground);\n	pointer-events: auto;\n}\n.xve-toast[data-kind='warning'] {\n	border-left-color: #b7791f;\n}\n.xve-toast[data-kind='error'] {\n	border-left-color: var(--xve-destructive);\n}\n.xve-toast-text {\n	flex: 1;\n}\n\n/* Shell dialogs (shortcut help, prompts) */\n.xve-dialog {\n	position: absolute;\n	z-index: 85;\n	top: 120px;\n	left: 50%;\n	display: grid;\n	box-sizing: border-box;\n	width: min(440px, calc(100% - 32px));\n	gap: 10px;\n	padding: 18px 20px;\n	border: 1px solid var(--line);\n	border-radius: 8px;\n	background: var(--xve-popover);\n	box-shadow: 0 12px 32px #0003;\n	color: var(--ink);\n	transform: translateX(-50%);\n}\n.xve-dialog h2 {\n	margin: 0 0 4px;\n	font-size: 16px;\n	font-weight: 600;\n}\n.xve-dialog-actions {\n	display: flex;\n	justify-content: flex-end;\n	gap: 8px;\n	margin-top: 6px;\n}\n.xve-dialog-actions button {\n	min-height: 30px;\n	padding: 0 14px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n	cursor: pointer;\n}\n.xve-dialog-actions .xve-dialog-primary {\n	border-color: var(--xl);\n	background: var(--xl);\n	color: var(--xve-primary-foreground);\n}\n.xve-shortcut-help {\n	width: min(620px, calc(100% - 32px));\n	max-height: calc(100% - 160px);\n	overflow: auto;\n}\n.xve-shortcut-help p {\n	margin: 0;\n	color: var(--muted);\n	font-size: 12px;\n}\n.xve-shortcut-help table {\n	width: 100%;\n	border-collapse: collapse;\n}\n.xve-shortcut-help th,\n.xve-shortcut-help td {\n	padding: 5px 8px;\n	border-bottom: 1px solid var(--line);\n	text-align: left;\n	vertical-align: top;\n}\n.xve-shortcut-help th {\n	color: var(--muted);\n	font-size: 12px;\n	font-weight: 600;\n}\n.xve-shortcut-help kbd {\n	padding: 1px 6px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	font:\n		12px/1.4 ui-monospace,\n		Consolas,\n		monospace;\n	white-space: nowrap;\n}\n";
+var popups_default = "/* Floating surfaces: ribbon popovers, menus, the colour grid, Tell me, toasts and the shell dialogs. */\n.ribbon-popover {\n	position: fixed;\n	z-index: 1000;\n	box-sizing: border-box;\n	padding: 4px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n	background: var(--xve-popover);\n	box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);\n	color: var(--xve-popover-foreground);\n	font:\n		12px 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.ribbon-popover.ribbon-menu-list,\n.ribbon-popover.ribbon-list {\n	display: flex;\n	min-width: 180px;\n	max-height: min(70vh, 420px);\n	flex-direction: column;\n	overflow-y: auto;\n}\n.ribbon-menu-list [role='menuitem'],\n.ribbon-menu-list [role='menuitemcheckbox'],\n.ribbon-list [role='option'] {\n	display: flex;\n	align-items: center;\n	gap: 10px;\n	width: 100%;\n	padding: 5px 12px 5px 8px;\n	border: 0;\n	border-radius: 3px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	text-align: left;\n	white-space: nowrap;\n	cursor: pointer;\n}\n.ribbon-menu-list [role^='menuitem']:hover:not(:disabled),\n.ribbon-menu-list [role^='menuitem']:focus-visible,\n.ribbon-list [role='option']:hover,\n.ribbon-list [role='option']:focus-visible {\n	background: var(--accent-soft);\n	outline: none;\n}\n.ribbon-menu-list [role^='menuitem']:disabled {\n	opacity: 0.45;\n	cursor: default;\n}\n.ribbon-menu-list [aria-checked='true'] {\n	font-weight: 600;\n}\n.ribbon-menu-list .ribbon-menu-icon {\n	display: inline-flex;\n	width: 16px;\n}\n.ribbon-menu-list .ribbon-menu-shortcut {\n	margin-left: auto;\n	padding-left: 18px;\n	color: var(--muted);\n}\n.ribbon-menu-list [role='separator'] {\n	height: 1px;\n	margin: 4px 2px;\n	background: var(--line);\n}\n.ribbon-list [aria-selected='true'] {\n	color: var(--xl);\n	font-weight: 600;\n}\n.ribbon-popover.ribbon-gallery-menu {\n	display: grid;\n	grid-template-columns: repeat(4, 96px);\n	gap: 4px;\n	max-height: min(70vh, 420px);\n	overflow-y: auto;\n}\n.ribbon-gallery-menu button {\n	padding: 4px;\n	border: 1px solid transparent;\n	border-radius: 3px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.ribbon-gallery-menu button:hover,\n.ribbon-gallery-menu button:focus-visible {\n	border-color: var(--line);\n	background: var(--accent-soft);\n	outline: none;\n}\n\n/* Colour picker: the shared office-ui-color-grid in a ribbon popover. */\n.ribbon-popover.color-grid {\n	display: block;\n	padding: 4px;\n}\n.color-grid-input {\n	position: absolute;\n	width: 0;\n	height: 0;\n	padding: 0;\n	border: 0;\n	opacity: 0;\n	pointer-events: none;\n}\n\n/* Toasts */\n.xve-toasts {\n	position: absolute;\n	z-index: 90;\n	right: 16px;\n	bottom: 40px;\n	display: flex;\n	max-width: min(420px, calc(100% - 32px));\n	flex-direction: column;\n	gap: 8px;\n	pointer-events: none;\n}\n.xve-toast {\n	display: flex;\n	align-items: flex-start;\n	gap: 8px;\n	padding: 10px 12px;\n	border: 1px solid var(--line);\n	border-left: 4px solid var(--xl);\n	border-radius: 6px;\n	background: var(--xve-popover);\n	box-shadow: 0 8px 24px #0003;\n	color: var(--xve-popover-foreground);\n	pointer-events: auto;\n}\n.xve-toast[data-kind='warning'] {\n	border-left-color: #b7791f;\n}\n.xve-toast[data-kind='error'] {\n	border-left-color: var(--xve-destructive);\n}\n.xve-toast-text {\n	flex: 1;\n}\n\n/* Shell dialogs (shortcut help, prompts) */\n.xve-dialog {\n	position: absolute;\n	z-index: 85;\n	top: 120px;\n	left: 50%;\n	display: grid;\n	box-sizing: border-box;\n	width: min(440px, calc(100% - 32px));\n	gap: 10px;\n	padding: 18px 20px;\n	border: 1px solid var(--line);\n	border-radius: 8px;\n	background: var(--xve-popover);\n	box-shadow: 0 12px 32px #0003;\n	color: var(--ink);\n	transform: translateX(-50%);\n}\n.xve-dialog h2 {\n	margin: 0 0 4px;\n	font-size: 16px;\n	font-weight: 600;\n}\n.xve-dialog-actions {\n	display: flex;\n	justify-content: flex-end;\n	gap: 8px;\n	margin-top: 6px;\n}\n.xve-dialog-actions button {\n	min-height: 30px;\n	padding: 0 14px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n	cursor: pointer;\n}\n.xve-dialog-actions .xve-dialog-primary {\n	border-color: var(--xl);\n	background: var(--xl);\n	color: var(--xve-primary-foreground);\n}\n.xve-shortcut-help {\n	width: min(620px, calc(100% - 32px));\n	max-height: calc(100% - 160px);\n	overflow: auto;\n}\n.xve-shortcut-help p {\n	margin: 0;\n	color: var(--muted);\n	font-size: 12px;\n}\n.xve-shortcut-help table {\n	width: 100%;\n	border-collapse: collapse;\n}\n.xve-shortcut-help th,\n.xve-shortcut-help td {\n	padding: 5px 8px;\n	border-bottom: 1px solid var(--line);\n	text-align: left;\n	vertical-align: top;\n}\n.xve-shortcut-help th {\n	color: var(--muted);\n	font-size: 12px;\n	font-weight: 600;\n}\n.xve-shortcut-help kbd {\n	padding: 1px 6px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	font:\n		12px/1.4 ui-monospace,\n		Consolas,\n		monospace;\n	white-space: nowrap;\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/backstage.css?raw
 var backstage_default = "/* File backstage: the shared office-ui-backstage draws the navigation; these style the page content.\n   The nav colours come from its tokens. */\n.xve-backstage {\n	z-index: 40;\n	--office-background: var(--surface);\n	--office-backstage-nav-background: var(--xl);\n	--office-backstage-nav-foreground: var(--xve-primary-foreground);\n}\n.xve-backstage-content {\n	overflow: auto;\n	padding: 28px 40px;\n	color: var(--ink);\n}\n.xve-backstage-content h2 {\n	margin: 0 0 20px;\n	font-size: 30px;\n	font-weight: 300;\n}\n.xve-backstage-content h3 {\n	margin: 24px 0 10px;\n	font-size: 15px;\n	font-weight: 600;\n}\n.xve-backstage-title {\n	margin: 0 0 4px;\n	font-size: 26px;\n	font-weight: 400;\n	overflow-wrap: anywhere;\n}\n.xve-backstage-muted {\n	color: var(--muted);\n}\n.xve-backstage-facts {\n	display: grid;\n	grid-template-columns: max-content minmax(0, 1fr);\n	gap: 6px 24px;\n	margin: 0;\n}\n.xve-backstage-facts dt {\n	color: var(--muted);\n}\n.xve-backstage-facts dd {\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.xve-compatibility-notes {\n	display: grid;\n	gap: 8px;\n	max-width: 760px;\n	margin: 0;\n	padding: 0;\n	list-style: none;\n}\n.xve-compatibility-notes li {\n	display: flex;\n	gap: 8px;\n	padding: 10px 12px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n	line-height: 1.45;\n}\n.xve-compatibility-notes .xve-icon {\n	margin-top: 2px;\n	color: #b7791f;\n}\n.xve-backstage-columns {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) 300px;\n	gap: 40px;\n	align-items: start;\n}\n.xve-backstage-properties {\n	padding: 4px 0 0 24px;\n	border-left: 1px solid var(--line);\n}\n.xve-backstage-properties h3 {\n	margin-top: 0;\n}\n.xve-backstage-tiles {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n}\n.xve-backstage-tile {\n	display: inline-flex;\n	flex-direction: column;\n	gap: 8px;\n	padding: 8px;\n	border: 1px solid transparent;\n	border-radius: 6px;\n	background: none;\n	color: var(--ink);\n	font: inherit;\n	cursor: pointer;\n}\n.xve-backstage-tile:hover {\n	border-color: var(--line);\n	background: var(--xl-soft);\n}\n.xve-backstage-tile-preview {\n	display: block;\n	width: 150px;\n	height: 112px;\n	border: 1px solid var(--line);\n	background-color: #fff;\n	background-image:\n		linear-gradient(#e1e1e1 1px, transparent 1px),\n		linear-gradient(90deg, #e1e1e1 1px, transparent 1px);\n	background-size: 30px 14px;\n	box-shadow: 0 1px 3px #0002;\n}\n.xve-backstage-tile-preview[data-template]::before {\n	display: block;\n	height: 14px;\n	background: var(--xl);\n	content: '';\n	opacity: 0.85;\n}\n.xve-backstage-card {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: 24px;\n	max-width: 760px;\n	margin-bottom: 12px;\n	padding: 14px 18px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n}\n.xve-backstage-card h3 {\n	margin: 0 0 4px;\n}\n.xve-backstage-card p {\n	margin: 0;\n}\n.xve-backstage-primary {\n	padding: 8px 18px;\n	border: 0;\n	border-radius: 4px;\n	background: var(--xl);\n	color: var(--xve-primary-foreground);\n	font: inherit;\n	cursor: pointer;\n	white-space: nowrap;\n}\n.xve-backstage-field {\n	display: grid;\n	gap: 4px;\n	max-width: 420px;\n	margin-bottom: 14px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.xve-backstage-field input,\n.xve-backstage-field select {\n	height: 32px;\n	padding: 0 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font:\n		14px 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.xve-backstage-check {\n	display: flex;\n	align-items: center;\n	gap: 8px;\n	margin-bottom: 10px;\n}\n.xve-customize-group {\n	margin: 0 0 8px;\n	padding: 6px 10px 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n}\n.xve-customize-group legend {\n	padding: 0 4px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.xve-customize-row {\n	display: inline-flex;\n	align-items: center;\n	gap: 6px;\n	min-width: 180px;\n	padding: 2px 8px 2px 0;\n	font-size: 13px;\n}\n@media (max-width: 760px) {\n	.xve-backstage-content {\n		padding: 20px;\n	}\n	.xve-backstage-columns {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.xve-backstage-properties {\n		padding-left: 0;\n		border-left: 0;\n	}\n}\n";
@@ -1299,7 +1301,7 @@ var DIALOG_CSS = `
 	border: 1px solid var(--xve-border, #c8c6c4); background: var(--xve-secondary, #fff); color: inherit; font: inherit; }
 .xve-btn:hover:not(:disabled) { background: var(--xve-accent, #f3f2f1); }
 .xve-btn:focus-visible, .xve-input:focus-visible, .xve-tab:focus-visible, .xve-listbox:focus-visible,
-	.xve-swatch:focus-visible, .xve-tile:focus-visible { outline: 2px solid var(--xve-ring, #217346); outline-offset: 1px; }
+	.xve-tile:focus-visible { outline: 2px solid var(--xve-ring, #217346); outline-offset: 1px; }
 .xve-btn-primary { background: var(--xve-primary, #217346); color: var(--xve-primary-foreground, #fff);
 	border-color: var(--xve-primary, #217346); }
 .xve-btn-primary:hover:not(:disabled) { background: var(--xve-primary, #1b5e38); filter: brightness(.95); }
@@ -1329,9 +1331,6 @@ textarea.xve-input { resize: vertical; }
 .xve-option[aria-selected="true"] { background: var(--xve-selection, #cce8d6); color: inherit; }
 .xve-sample { min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 6px;
 	border: 1px solid var(--xve-border, #e1dfdd); background: var(--xve-sheet-bg, #fff); color: #000; overflow: hidden; }
-.xve-swatches { display: grid; grid-template-columns: repeat(10, 18px); gap: 3px; }
-.xve-swatch { width: 18px; height: 18px; border: 1px solid #c8c6c4; padding: 0; cursor: pointer; border-radius: 2px; }
-.xve-swatch[aria-pressed="true"] { outline: 2px solid var(--xve-primary, #217346); outline-offset: 1px; }
 .xve-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
 .xve-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; cursor: pointer;
 	border: 1px solid var(--xve-border, #e1dfdd); border-radius: var(--xve-radius, 4px); background: transparent; color: inherit; font: inherit; }
@@ -2073,23 +2072,17 @@ function openList(anchor, items2, current, choose, options = {}) {
 
 // src/xlsx/ribbon/color-grid.ts
 var THEME_COLUMNS = [
-  [0, "Background 1"],
-  [1, "Text 1"],
-  [2, "Background 2"],
-  [3, "Text 2"],
-  [4, "Accent 1"],
-  [5, "Accent 2"],
-  [6, "Accent 3"],
-  [7, "Accent 4"],
-  [8, "Accent 5"],
-  [9, "Accent 6"]
+  "Background 1",
+  "Text 1",
+  "Background 2",
+  "Text 2",
+  "Accent 1",
+  "Accent 2",
+  "Accent 3",
+  "Accent 4",
+  "Accent 5",
+  "Accent 6"
 ];
-function themeTints(slot) {
-  if (slot === 0) return [-0.05, -0.15, -0.25, -0.35, -0.5];
-  if (slot === 1) return [0.5, 0.35, 0.25, 0.15, 0.05];
-  if (slot === 2) return [-0.1, -0.25, -0.5, -0.75, -0.9];
-  return [0.8, 0.6, 0.4, -0.25, -0.5];
-}
 var STANDARD_COLORS = [
   ["C00000", "Dark Red"],
   ["FF0000", "Red"],
@@ -2102,170 +2095,101 @@ var STANDARD_COLORS = [
   ["002060", "Dark Blue"],
   ["7030A0", "Purple"]
 ];
-var tintName = (tint, t) => tint > 0 ? t("Lighter {percent}%", { percent: Math.round(tint * 100) }) : t("Darker {percent}%", { percent: Math.round(-tint * 100) });
 function cssColor(color, theme = DEFAULT_THEME) {
   return resolveColor(color, theme) ?? "transparent";
 }
+var hex = (css) => {
+  const digits = css?.replace(/^#/, "").slice(-6);
+  return digits && /^[0-9a-f]{6}$/i.test(digits) ? `#${digits.toLowerCase()}` : void 0;
+};
+function excelColorGrid(doc, theme, t, options = {}) {
+  defineColorGrid();
+  const grid = doc.createElement("office-ui-color-grid");
+  grid.themeColors = THEME_COLUMNS.map((_, slot) => hex(resolveColor({ theme: slot }, theme)));
+  grid.themeNames = THEME_COLUMNS.map((name) => t(name));
+  grid.variantLabel = (column, variant) => `${column}, ${t(variant.kind === "lighter" ? "Lighter {percent}%" : "Darker {percent}%", {
+    percent: variant.percent
+  })}`;
+  grid.standardColors = STANDARD_COLORS.map(([rgb, name]) => ({
+    hex: `#${rgb.toLowerCase()}`,
+    label: t(name)
+  }));
+  grid.themeHeading = t("Theme Colors");
+  grid.standardHeading = t("Standard Colors");
+  if (options.label) grid.label = options.label;
+  if (options.noneLabel) grid.automaticLabel = t(options.noneLabel);
+  if (options.moreLabel) grid.moreLabel = t(options.moreLabel);
+  return grid;
+}
+function pickedExcelColor(pick, alpha = false) {
+  if (pick.source === "automatic" || pick.source === "none") return void 0;
+  if (pick.source === "theme" && pick.theme) {
+    const variant = pick.theme.variant;
+    const tint = variant ? (variant.kind === "lighter" ? 1 : -1) * (variant.percent / 100) : 0;
+    return tint ? { theme: pick.theme.column, tint } : { theme: pick.theme.column };
+  }
+  const rgb = pick.color.slice(1).toUpperCase();
+  return { rgb: alpha ? `FF${rgb}` : rgb };
+}
+function excelGridValue(color, theme) {
+  return (color ? hex(resolveColor(color, theme)) : void 0) ?? "automatic";
+}
 function openColorGrid(anchor, choose, options) {
-  const { t } = options;
   const theme = options.theme ?? DEFAULT_THEME;
   const doc = anchor.ownerDocument;
   const pop = doc.createElement("div");
   pop.className = "ribbon-popover color-grid";
-  pop.setAttribute("role", "menu");
   const pick = (color) => {
     closeRibbonPopover();
     choose(color);
   };
-  const swatch = (color, name) => {
-    const item = doc.createElement("button");
-    item.type = "button";
-    item.setAttribute("role", "menuitem");
-    item.className = "swatch";
-    item.style.setProperty("--swatch", cssColor(color, theme));
-    item.setAttribute("aria-label", name);
-    item.title = name;
-    item.addEventListener("mousedown", (event) => event.preventDefault());
-    item.addEventListener("click", () => pick(color));
-    return item;
-  };
-  const title = (text3) => {
-    const el3 = doc.createElement("div");
-    el3.className = "color-grid-title";
-    el3.textContent = t(text3);
-    return el3;
-  };
-  const cells = (items2) => {
-    const el3 = doc.createElement("div");
-    el3.className = "color-grid-cells";
-    el3.append(...items2);
-    return el3;
-  };
-  const command = (text3, run) => {
-    const button2 = doc.createElement("button");
-    button2.type = "button";
-    button2.setAttribute("role", "menuitem");
-    button2.className = "color-grid-command";
-    button2.textContent = text3;
-    button2.addEventListener("mousedown", (event) => event.preventDefault());
-    button2.addEventListener("click", run);
-    return button2;
-  };
-  if (options.automaticLabel) pop.append(command(t(options.automaticLabel), () => pick(void 0)));
-  const top = THEME_COLUMNS.map(([slot, name]) => swatch({ theme: slot }, t(name)));
-  const rows = [0, 1, 2, 3, 4].flatMap(
-    (row2) => THEME_COLUMNS.map(([slot, name]) => {
-      const tint = themeTints(slot)[row2] ?? 0;
-      return swatch({ theme: slot, tint }, `${t(name)}, ${tintName(tint, t)}`);
-    })
-  );
-  pop.append(
-    title("Theme Colors"),
-    cells([...top, ...rows]),
-    title("Standard Colors"),
-    cells(STANDARD_COLORS.map(([rgb, name]) => swatch({ rgb }, t(name))))
-  );
+  const grid = excelColorGrid(doc, theme, options.t, {
+    ...options.automaticLabel ? { noneLabel: options.automaticLabel } : {},
+    moreLabel: "More Colors..."
+  });
   const input = doc.createElement("input");
   input.type = "color";
   input.className = "color-grid-input";
   input.tabIndex = -1;
   input.addEventListener("change", () => pick({ rgb: input.value.slice(1).toUpperCase() }));
-  pop.append(
-    command(t("More Colors..."), () => input.click()),
-    input
+  grid.addEventListener(
+    "office-color-pick",
+    (event) => pick(pickedExcelColor(event.detail))
   );
-  arrowNavigation(pop, '[role="menuitem"]');
+  grid.addEventListener("office-color-more", () => input.click());
+  pop.addEventListener("mousedown", (event) => event.preventDefault());
+  pop.append(grid, input);
   if (!mountPopover(anchor, pop)) return;
-  pop.querySelector('[role="menuitem"]')?.focus();
+  grid.focus();
 }
 
 // src/xlsx/dialogs/format-cells/color-swatches.ts
-var THEME_NAMES = [
-  [0, "Background 1"],
-  [1, "Text 1"],
-  [2, "Background 2"],
-  [3, "Text 2"],
-  [4, "Accent 1"],
-  [5, "Accent 2"],
-  [6, "Accent 3"],
-  [7, "Accent 4"],
-  [8, "Accent 5"],
-  [9, "Accent 6"]
-];
-var colorKey = (color) => color ? JSON.stringify([
-  color.rgb?.slice(-6).toUpperCase(),
-  color.theme,
-  color.tint,
-  color.indexed,
-  color.auto
-]) : "none";
 function swatchGrid(ctx, label, noneLabel, initial, onChange) {
   const theme = ctx.workbook()?.theme ?? { colors: [], majorFont: "", minorFont: "" };
-  const wrapper = el(ctx, "div", "xve-swatch-picker");
-  wrapper.setAttribute("role", "group");
-  wrapper.setAttribute("aria-label", ctx.t(label));
+  const grid = excelColorGrid(ctx.host.ownerDocument, theme, ctx.t, {
+    noneLabel,
+    label: ctx.t(label)
+  });
+  grid.classList.add("xve-swatch-picker");
   let current = initial;
-  const buttons = [];
   const paint = () => {
-    const key = colorKey(current);
-    for (const { button: button2, color } of buttons)
-      button2.setAttribute("aria-pressed", String(colorKey(color) === key));
+    grid.value = excelGridValue(current, theme);
   };
-  const choose = (color) => {
-    current = color;
+  grid.addEventListener("office-color-pick", (event) => {
+    event.stopPropagation();
+    current = pickedExcelColor(event.detail, true);
     paint();
-    onChange?.(color);
-  };
-  const none = el(ctx, "button", "xve-btn xve-swatch-none");
-  none.type = "button";
-  none.textContent = ctx.t(noneLabel);
-  none.addEventListener("click", () => choose(void 0));
-  buttons.push({ button: none, color: void 0 });
-  const swatch = (color, name) => {
-    const b = el(ctx, "button", "xve-swatch");
-    b.type = "button";
-    b.style.background = resolveColor(color, theme) ?? "transparent";
-    b.setAttribute("aria-label", name);
-    b.title = name;
-    b.addEventListener("click", () => choose(color));
-    buttons.push({ button: b, color });
-    return b;
-  };
-  const tintName2 = (tint) => tint > 0 ? ctx.t("Lighter {percent}%", { percent: Math.round(tint * 100) }) : ctx.t("Darker {percent}%", { percent: Math.round(-tint * 100) });
-  const themeGrid = el(ctx, "div", "xve-swatches");
-  for (const [slot, name] of THEME_NAMES) themeGrid.append(swatch({ theme: slot }, ctx.t(name)));
-  for (let row2 = 0; row2 < 5; row2++)
-    for (const [slot, name] of THEME_NAMES) {
-      const tint = themeTints(slot)[row2] ?? 0;
-      themeGrid.append(swatch({ theme: slot, tint }, `${ctx.t(name)}, ${tintName2(tint)}`));
-    }
-  const standard = el(ctx, "div", "xve-swatches");
-  for (const [rgb, name] of STANDARD_COLORS)
-    standard.append(swatch({ rgb: `FF${rgb}` }, ctx.t(name)));
-  const cap = (key) => {
-    const d = el(ctx, "div", "xve-note");
-    d.textContent = ctx.t(key);
-    return d;
-  };
-  wrapper.append(none, cap("Theme Colors"), themeGrid, cap("Standard Colors"), standard);
-  wrapper.addEventListener("keydown", (event) => {
-    const list = buttons.map((b) => b.button);
-    const index = list.indexOf(event.target);
-    if (index < 0) return;
-    const delta = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: 10, ArrowUp: -10 }[event.key];
-    if (!delta) return;
-    event.preventDefault();
-    const next = index === 0 ? delta > 0 ? 1 : 0 : Math.max(0, Math.min(list.length - 1, index + delta));
-    list[next]?.focus();
+    onChange?.(current);
   });
   paint();
   return {
-    element: wrapper,
+    element: grid,
     value: () => current,
     set(color) {
       current = color;
       paint();
-    }
+    },
+    focus: () => grid.focus()
   };
 }
 
@@ -2989,7 +2913,7 @@ function openTabColorDialog(ctx) {
     name: "tab-color",
     heading: "Tab Color",
     body: grid.element,
-    opened: () => grid.element.querySelector('[aria-pressed="true"]')?.focus(),
+    opened: () => grid.focus(),
     submit: () => {
       const color = grid.value();
       session.setTabColor(index, color);
@@ -4908,7 +4832,7 @@ var TYPES2 = [
   ["percentile", "Percentile"],
   ["formula", "Formula"]
 ];
-var hex = (c, fallback) => `#${(c?.rgb ?? fallback).slice(-6)}`;
+var hex2 = (c, fallback) => `#${(c?.rgb ?? fallback).slice(-6)}`;
 var argb = (css) => ({ rgb: `FF${css.replace("#", "").toUpperCase()}` });
 function point(ctx, label, types, initial, color) {
   const type = select(
@@ -4947,7 +4871,7 @@ var loadPoint = (p, cfvo, color) => {
     p.value.value = cfvo.value ?? "";
     p.type.dispatchEvent(new Event("change"));
   }
-  if (color) p.color.value = hex(color, "000000");
+  if (color) p.color.value = hex2(color, "000000");
 };
 function valuesPanel(ctx) {
   const style = select(
@@ -5048,7 +4972,7 @@ function valuesPanel(ctx) {
         style.value = "dataBar";
         loadPoint(min, rule.min);
         loadPoint(max, rule.max);
-        bar.value = hex(rule.color, "638EC6");
+        bar.value = hex2(rule.color, "638EC6");
       } else if (rule.type === "iconSet") {
         style.value = "iconSet";
         iconSet.value = rule.iconSet;
@@ -13918,7 +13842,9 @@ var visibleSheetIndices = (workbook) => workbook.sheets.flatMap((sheet, index) =
 function renderTabs(doc, strip, options) {
   const { workbook, active: active2, focusable } = options;
   const previous = /* @__PURE__ */ new Map();
-  for (const node of [...strip.children].filter((node2) => node2.classList.contains("xst-tab")))
+  for (const node of [...strip.children].filter(
+    (node2) => node2.classList.contains("xst-tab")
+  ))
     if (node.dataset.sheet !== void 0) previous.set(node.dataset.sheet, node);
   const tabs2 = visibleSheetIndices(workbook).map((index) => {
     const sheet = workbook.sheets[index];
@@ -14395,7 +14321,9 @@ function showTabKeyTips(root, select2) {
   active?.();
   const file = root.fileButton();
   const targets = file ? [{ key: "F", element: file, activate: () => file.click() }] : [];
-  for (const panel3 of [...root.children].filter((node) => node.classList.contains("ribbon-panel"))) {
+  for (const panel3 of [...root.children].filter(
+    (node) => node.classList.contains("ribbon-panel")
+  )) {
     const id = panel3.dataset.tab ?? "";
     const tab = tabButton(root, id);
     if (!tab || isTabHidden(panel3)) continue;
@@ -14442,7 +14370,9 @@ function applyRibbonVisibility(root, isHidden) {
     stack.toggleAttribute(HIDDEN, empty(stack));
   for (const group of root.querySelectorAll(".ribbon-group"))
     group.toggleAttribute(HIDDEN, empty(group));
-  for (const panel3 of [...root.children].filter((node) => node.classList.contains("ribbon-panel")))
+  for (const panel3 of [...root.children].filter(
+    (node) => node.classList.contains("ribbon-panel")
+  ))
     setTabHidden(root, panel3.dataset.tab ?? "", "custom", empty(panel3));
 }
 
@@ -14530,7 +14460,13 @@ function createRibbon(ctx, handlers) {
   let tabs2 = [];
   let stopOverflow = () => {
   };
-  const panels = () => [...[...root.children].filter((node) => node.classList.contains("ribbon-panel"))];
+  let addIns = [];
+  const syncAddIns = () => syncRibbonAddIns(root, addIns, { panelClass: "ribbon-panel" });
+  const panels = () => [
+    ...[...root.children].filter(
+      (node) => node.classList.contains("ribbon-panel")
+    )
+  ];
   const panelFor = (id) => panels().find((panel3) => panel3.dataset.tab === id);
   const select2 = (id) => {
     const panel3 = panelFor(id);
@@ -14566,6 +14502,7 @@ function createRibbon(ctx, handlers) {
       }
       root.append(panel3);
     }
+    syncAddIns();
     refresh();
     stopOverflow = attachRibbonOverflow(root);
   };
@@ -14589,6 +14526,14 @@ function createRibbon(ctx, handlers) {
     refresh,
     rebuild: build,
     selectTab: select2,
+    setAddIns: (next) => {
+      addIns = next;
+      const before = root.querySelector("[data-add-in]");
+      syncAddIns();
+      if (root.querySelector("[data-add-in]") === before) return;
+      stopOverflow();
+      stopOverflow = attachRibbonOverflow(root);
+    },
     activeTab: () => root.selected || void 0,
     showKeyTips: () => {
       root.focusTab();
@@ -16017,11 +15962,13 @@ var XlsxEditorElement = class extends XlsxEditorApi {
     return XLSX_EDITOR_ATTRIBUTES;
   }
   shell;
+  addIns = [];
   connectedCallback() {
     if (this.shell) return;
     this.shell = buildShell(this.core);
     this.chrome = this.shell.chrome;
     this.openShare = () => this.shell?.backstage.open("share");
+    if (this.addIns.length) this.shell.ribbon.setAddIns(this.addIns);
     this.core.requestRender();
   }
   attributeChangedCallback(name, _old, value) {
@@ -16103,6 +16050,17 @@ var XlsxEditorElement = class extends XlsxEditorApi {
     this.core.hiddenActions = [...value ?? []];
     this.core.requestRender();
   }
+  /**
+   * Tabs a host adds after Excel's own, as an Office add-in does. Each command runs its `run`
+   * callback and dispatches `office-ribbon-add-in` (`{ tab, command }`) from the editor.
+   */
+  get ribbonAddIns() {
+    return this.addIns;
+  }
+  set ribbonAddIns(value) {
+    this.addIns = value ?? [];
+    this.shell?.ribbon.setAddIns(this.addIns);
+  }
   /** The open workbook model, or null. Assigning one shows it with a fresh undo history. */
   get workbook() {
     return this.core.workbook ?? null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ooxml-ui",
-	"version": "1.6.2",
+	"version": "1.8.0",
 	"description": "Shared, format-neutral web components and styles for the Office viewers (Word, PowerPoint, Excel)",
 	"keywords": [
 		"custom-elements",
@@ -146,7 +146,7 @@
 		"dompurify": "^3.4.16",
 		"emf-converter": "4.11.2",
 		"lit": "^3.3.3",
-		"ooxml-core": "^1.6.2",
+		"ooxml-core": "^1.8.0",
 		"opentype.js": "^2.0.0",
 		"prosemirror-collab": "^1.3.1",
 		"prosemirror-commands": "^1.7.2",
@@ -166,6 +166,7 @@
 		"@types/three": "^0.186.0",
 		"ai": "^7.0.127",
 		"fake-indexeddb": "^6.2.5",
+		"happy-dom": "^20.14.5",
 		"jsdom": "^30.1.2",
 		"jszip": "^3.10.2",
 		"three": "^0.186.1",

package/dist/pptx/render/connector-router-astar.d.ts

@@ -1,24 +0,0 @@
-/**
- * A*-based orthogonal path search and path simplification.
- *
- * Pure (no framework imports). Deterministic  -  no Math.random / Date.
- */
-import type { RouterPoint, RouterRect } from './connector-router-types.js';
-/**
- * Run A* over the navigation graph to find the shortest orthogonal path from
- * `start` to `end` that avoids all `inflated` obstacle rectangles.
- *
- * Returns an array of waypoints (possibly including intermediate bend points
- * when L-shaped edges are taken). Falls back to `[start, end]` when no path is
- * found within {@link MAX_ASTAR_ITERATIONS}.
- */
-export declare function aStarOrthogonal(nodes: ReadonlyArray<RouterPoint>, start: RouterPoint, end: RouterPoint, inflated: ReadonlyArray<RouterRect>): RouterPoint[];
-/**
- * Remove collinear intermediate waypoints from a path.
- *
- * A waypoint is dropped when the previous and next waypoints are collinear on
- * both axes with it (three consecutive collinear points). Every directional
- * change is preserved.
- */
-export declare function simplifyPath(points: ReadonlyArray<RouterPoint>): RouterPoint[];
-//# sourceMappingURL=connector-router-astar.d.ts.map

package/dist/pptx/render/connector-router-astar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"connector-router-astar.d.ts","sourceRoot":"","sources":["../../../src/pptx/render/connector-router-astar.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAKxE;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC9B,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,EACjC,KAAK,EAAE,WAAW,EAClB,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,GACjC,WAAW,EAAE,CAkKf;AAMD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,aAAa,CAAC,WAAW,CAAC,GAAG,WAAW,EAAE,CAuB9E"}

package/dist/pptx/render/connector-router-graph.d.ts

@@ -1,38 +0,0 @@
-/**
- * Graph-building helpers for the orthogonal connector router.
- *
- * Provides geometry primitives, collision detection, and navigation-graph
- * construction used by the A* search. Pure (no framework imports).
- */
-import type { RouterPoint, RouterRect } from './connector-router-types.js';
-export { PADDING_DEFAULT } from './connector-router-types.js';
-/** Expand a rect by `pad` pixels on every side. Returns a new rect. */
-export declare function inflateRect(r: RouterRect, pad: number): RouterRect;
-/** Return true when point `p` lies inside (or on the border of) `r`. */
-export declare function pointInRect(p: RouterPoint, r: RouterRect): boolean;
-/**
- * Return true when the axis-aligned segment `a→b` intersects rectangle `r`.
- *
- * Only horizontal and vertical segments are handled exactly; diagonal segments
- * are treated as intersecting (safe / conservative fallback).
- */
-export declare function segmentIntersectsRect(a: RouterPoint, b: RouterPoint, r: RouterRect): boolean;
-/**
- * Return true when the direct segment `start→end` is clear of all inflated
- * obstacle rectangles.
- */
-export declare function directPathClear(start: RouterPoint, end: RouterPoint, inflated: ReadonlyArray<RouterRect>): boolean;
-/** Manhattan-distance heuristic for A*. */
-export declare function heuristic(a: RouterPoint, b: RouterPoint): number;
-/** Stable string key for a point (rounded to nearest pixel). Used as Map keys. */
-export declare function pointKey(p: RouterPoint): string;
-/**
- * Build the set of candidate navigation nodes for A*:
- * - Start and end points.
- * - Corners of each inflated obstacle (with a small clearance margin).
- * - Orthogonal projections of every node onto start/end rows and columns.
- *
- * Nodes that fall inside an obstacle or outside the canvas are discarded.
- */
-export declare function buildGraphNodes(start: RouterPoint, end: RouterPoint, inflated: ReadonlyArray<RouterRect>, canvasWidth: number, canvasHeight: number): RouterPoint[];
-//# sourceMappingURL=connector-router-graph.d.ts.map

package/dist/pptx/render/connector-router-graph.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"connector-router-graph.d.ts","sourceRoot":"","sources":["../../../src/pptx/render/connector-router-graph.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAExE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAM3D,uEAAuE;AACvE,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,UAAU,CAOlE;AAED,wEAAwE;AACxE,wBAAgB,WAAW,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,OAAO,CAElE;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,UAAU,GAAG,OAAO,CAyB5F;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC9B,KAAK,EAAE,WAAW,EAClB,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,GACjC,OAAO,CAOT;AAED,2CAA2C;AAC3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,GAAG,MAAM,CAEhE;AAED,kFAAkF;AAClF,wBAAgB,QAAQ,CAAC,CAAC,EAAE,WAAW,GAAG,MAAM,CAE/C;AAMD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC9B,KAAK,EAAE,WAAW,EAClB,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,EACnC,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GAClB,WAAW,EAAE,CAqDf"}

package/dist/visio/format-shape-dialog.d.ts

@@ -1,21 +0,0 @@
-import type { PaintButton, PaintDialog, PaintInput } from './viewer-paint-dialog.js';
-/** Format Shape fields: Visio's Fill, Line and Effects sections over the format-shape edit. */
-export declare const FORMAT_SHAPE_FIELDS: {
-    readonly Fill: readonly [readonly ['fillColor', 'Color', 'color'], readonly ['fillTransparency', 'Transparency (%)', 'percent']];
-    readonly Line: readonly [readonly ['lineColor', 'Color', 'color'], readonly ['lineWeight', 'Width (pt)', 'points'], readonly ['linePattern', 'Dash type', 'pattern'], readonly ['lineTransparency', 'Transparency (%)', 'percent']];
-    readonly Effects: readonly [readonly ['shadow', 'Shadow', 'shadow'], readonly ['glowSize', 'Glow size (pt)', 'points'], readonly ['glowColor', 'Glow color', 'color'], readonly ['glowTransparency', 'Glow transparency (%)', 'percent'], readonly ['softEdges', 'Soft edges size (pt)', 'points'], readonly ['reflectionSize', 'Reflection size (%)', 'percent'], readonly ['reflectionTransparency', 'Reflection transparency (%)', 'percent'], readonly ['reflectionDistance', 'Reflection distance (pt)', 'points'], readonly ['reflectionBlur', 'Reflection blur (pt)', 'points']];
-};
-type Section = keyof typeof FORMAT_SHAPE_FIELDS;
-export type FormatShapeField = (typeof FORMAT_SHAPE_FIELDS)[Section][number][0];
-export type FormatShapeKind = (typeof FORMAT_SHAPE_FIELDS)[Section][number][2];
-export declare const FORMAT_SHAPE_UNSUPPORTED = "Arrows, gradients, bevel and 3-D rotation are not available in this pane: arrowheads have no edit command yet, and bevel and 3-D rotation need a 3-D renderer.";
-/** The Format Shape dialog, built from shared `office-ui-*` controls. */
-export declare function createFormatShapeDialog(doc: Document): {
-    dialog: PaintDialog;
-    fields: Map<"fillColor" | "fillTransparency" | "glowColor" | "glowSize" | "glowTransparency" | "lineColor" | "linePattern" | "lineTransparency" | "lineWeight" | "reflectionBlur" | "reflectionDistance" | "reflectionSize" | "reflectionTransparency" | "shadow" | "softEdges", PaintInput>;
-    kinds: Map<"fillColor" | "fillTransparency" | "glowColor" | "glowSize" | "glowTransparency" | "lineColor" | "linePattern" | "lineTransparency" | "lineWeight" | "reflectionBlur" | "reflectionDistance" | "reflectionSize" | "reflectionTransparency" | "shadow" | "softEdges", "color" | "pattern" | "percent" | "points" | "shadow">;
-    error: HTMLParagraphElement;
-    apply: PaintButton;
-    cancel: PaintButton;
-};
-export {};