ooxml-ui 0.30.0 → 0.31.0

package/dist/xlsx.js

@@ -1,16 +1,20 @@
-import './chunk-QHY7U7KK.js';
-import { defineSmartArt } from './chunk-C66U34OA.js';
-import './chunk-NEDNYLXX.js';
-import './chunk-7QLJS57B.js';
-import { createRibbonOverflow, defineBackstage, defineRibbon, defineTitleBar, defineStatusBar, defineZoomSlider, defineDialog, runKeyTips, assignKeyTips, defineCheckbox, defineContextMenu } from './chunk-4VKD3COE.js';
+import './chunk-RAZAJMHK.js';
+import { defineSmartArt } from './chunk-XDUYS4KK.js';
+import { withExtension, saveExtension, downloadBytes, emit, emitEvent, blobFor, announceFileCommand, pickFile } from './chunk-3GE2NHNG.js';
+export { XLSX_EDITOR_EVENTS } from './chunk-3GE2NHNG.js';
+import './chunk-SNV6YKPC.js';
+import './chunk-X7RINDJQ.js';
+import { range_control_default, createRibbonOverflow, defineBackstage, defineRibbon, defineTitleBar, defineStatusBar, defineZoomSlider, rangeControl, defineDialog, runKeyTips, assignKeyTips, defineCheckbox, defineGallery, defineContextMenu, parseSvgPreview } from './chunk-2QW4QE56.js';
 import { getIcon, registerIcon } from './chunk-HZ422LTR.js';
-import './chunk-4TSBX6J3.js';
-import './chunk-ZWBP2WTC.js';
-import './chunk-7Q7ZS2CC.js';
-import { SPECIAL_CODES, FRACTION_CODES, AUTOSUM_FUNCTIONS, themeToCssVars, ICON_ACCENTS, ICON_PATHS, lightTheme, darkTheme, normalizeThemeMode, applyThemeColors, parseSelectionRef, selectionRef, normalizeEditorLocale, DirtyState, createCommandRegistry, createDialogRegistry, activeRef, createSelectionModel, SheetSelections, translator, initialSelection, sheetBaseName, onRibbonTabsChange, 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, activeChart, 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, editChart, pasteWith, 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';
+import './chunk-OXKWNNNJ.js';
+import { withTokens } from './chunk-ZV2Z4IWH.js';
+import './chunk-JFJXBYRD.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, 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, selectionStats, formatRange, usedRange, createGridMetrics, mergeView, cellView, DEFAULT_THEME, resolveColor, nextSheetName, FUNCTION_CATALOG, mergeAt, visibleCells, getCell, cellInputText, closeParens, isFormulaText, parseCellInput, referenceTarget, formatAddress, navigate, anchorToPixelBox, createRefEvaluator, chartView, renderChartSvg, pixelBoxToAnchor, listValidationOptions, validationAt, getValue, DEFAULT_COL_WIDTH, nameAtCaret, functionMatches, callAtCaret, splice, acceptsReference, translateFormula, isCellError, parseHtmlTable, toggleAbsolute, rangeContains, formatValue, isDateFormat, pictureAnchorAt, validateDefinedName, parseAddress, styleAt, parseRange, rangesIntersect, 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, selectionStats, formatRange, usedRange, chartSeriesTransparency, createGridMetrics, mergeView, cellView, DEFAULT_THEME, resolveColor, chartSeriesTransparencyPatch, chartSeriesSolidFillPatch, chartSeriesFillPatch, 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, 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 { CHART_COLOR_PALETTES, chartPaletteColors } from 'ooxml-core/chart';
+import { render } from 'lit';
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/office-bridge.css?raw
 var office_bridge_default = "/*\n * The shared ooxml-ui elements read only --office-* tokens. This feeds them from the editor's\n * --xve-* theme, declared on the host so a theme, a dark scheme or a host override of --xve-*\n * keeps working (the same approach as pptx-viewer's office-token-bridge and docx-viewer's).\n */\n:host {\n	--office-font: 'Segoe UI', system-ui, -apple-system, sans-serif;\n	--office-foreground: var(--xve-foreground);\n	--office-muted-foreground: var(--xve-muted-foreground);\n	--office-background: var(--xve-background);\n	--office-surface: var(--xve-card);\n	--office-selected: var(--xve-accent);\n	--office-border: var(--xve-border);\n	--office-accent: var(--xve-primary);\n	--office-accent-foreground: var(--xve-primary-foreground);\n	--office-ring: var(--xve-ring);\n	--office-popover: var(--xve-popover);\n	--office-popover-foreground: var(--xve-popover-foreground, var(--xve-foreground));\n	--office-danger: var(--xve-destructive);\n	--office-danger-foreground: var(--xve-destructive-foreground);\n}\n";
@@ -19,7 +23,7 @@ var office_bridge_default = "/*\n * The shared ooxml-ui elements read only --off
 var shell_default = "/* Frame, title bar and status bar. Mirrors docx-viewer's chrome (styles/base.css,\n   chrome-titlebar.css, status-dialogs.css) with --xve-* tokens. */\n:host {\n	--xl: var(--xve-primary);\n	--xl-strong: color-mix(in srgb, var(--xve-primary) 70%, #000);\n	--xl-soft: color-mix(in srgb, var(--xve-primary) 12%, transparent);\n	--accent-soft: var(--xl-soft);\n	--ink: var(--xve-foreground);\n	--muted: var(--xve-muted-foreground);\n	--line: var(--xve-border);\n	--surface: var(--xve-card);\n	--chrome: var(--xve-background);\n	display: block;\n	box-sizing: border-box;\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	color: var(--ink);\n	font:\n		13px/1.35 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.xve-frame {\n	position: relative;\n	display: flex;\n	box-sizing: border-box;\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	min-width: 0;\n	flex-direction: column;\n	overflow: hidden;\n	background: var(--surface);\n}\n:focus-visible {\n	outline: 2px solid var(--xve-ring);\n	outline-offset: 1px;\n}\n[hidden],\n[data-xve-hidden] {\n	display: none !important;\n}\n.xve-icon {\n	flex: none;\n}\n.xve-icon-button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	min-width: 28px;\n	height: 28px;\n	padding: 0 6px;\n	border: 0;\n	border-radius: 4px;\n	background: none;\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.xve-icon-button:hover:not(:disabled),\n.xve-icon-button[aria-pressed='true'] {\n	background: var(--xl-soft);\n}\n.xve-icon-button:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n\n/* Workspace: formula bar, grid and sheet tabs between the ribbon and the status bar. */\n.xve-workspace {\n	position: relative;\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	flex-direction: column;\n	background: var(--xve-sheet-bg);\n}\n.xve-formula-row {\n	flex: none;\n	min-width: 0;\n	border-bottom: 1px solid var(--line);\n	background: var(--surface);\n}\n.xve-grid-host {\n	position: relative;\n	display: flex;\n	flex: 1;\n	min-height: 0;\n	min-width: 0;\n	overflow: hidden;\n	background: var(--xve-sheet-bg);\n	color-scheme: light;\n}\n.xve-grid-host > * {\n	flex: 1;\n	min-width: 0;\n}\n.xve-tabs-row {\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n	background: var(--chrome);\n}\n.xve-empty {\n	position: absolute;\n	z-index: 5;\n	inset: 0;\n	display: grid;\n	place-items: center;\n	color: var(--muted);\n	background: var(--chrome);\n}\n:host([show-formula-bar='false']) .xve-formula-row,\n:host([show-toolbar='false']) .xve-ribbon {\n	display: none;\n}\n\n/* Title bar: drawn by the shared office-ui-title-bar; the mark, background and borders come from its tokens. */\n.xve-titlebar {\n	display: block;\n	flex: none;\n	--office-title-bar-background: var(--chrome);\n	--office-title-bar-foreground: var(--ink);\n	--office-title-bar-border: var(--line);\n	--office-title-bar-mark-background: var(--xl);\n	--office-title-bar-mark-foreground: var(--xve-primary-foreground);\n}\n.xve-title-actions {\n	display: flex;\n	align-items: center;\n	gap: 2px;\n}\n.xve-mode-select {\n	height: 28px;\n	margin-left: 4px;\n	padding: 0 6px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n}\n\n/* Status bar: drawn by the shared office-ui-status-bar; this places it and styles the slotted stats. */\n.xve-status {\n	display: block;\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n}\n.xve-status-stats {\n	margin-inline-end: 10px;\n	overflow: hidden;\n	color: var(--ink);\n	font-size: 11px;\n	white-space: nowrap;\n}\n\n@media (max-width: 760px) {\n	.xve-status-stats {\n		display: none;\n	}\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/ribbon.css?raw
-var ribbon_default = "/* Ribbon: tabs, panels, groups and controls. Mirrors docx-viewer's styles/ribbon*.css. */\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";
+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";
@@ -27,6 +31,9 @@ var popups_default = "/* Floating surfaces: ribbon popovers, menus, the colour g
 // 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";
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/xlsx/theme/chart-series.css?raw
+var chart_series_default = ".xve-canvas-row {\n	display: flex;\n	flex: 1;\n	min-width: 0;\n	min-height: 0;\n}\n.xve-chart-series-pane {\n	box-sizing: border-box;\n	width: 300px;\n	max-width: 45%;\n	flex: none;\n	overflow: auto;\n	border-left: 1px solid var(--line);\n	background: var(--surface);\n}\n.xve-chart-series-header {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 12px 12px 12px 18px;\n	border-bottom: 1px solid var(--line);\n}\n.xve-chart-series-header h2 {\n	margin: 0;\n	font-size: 18px;\n	font-weight: 400;\n}\n.xve-chart-series-body,\n.xve-chart-series-pane > .xve-note {\n	margin: 0;\n	padding: 18px;\n}\n.xve-chart-series-body h3 {\n	margin: 0 0 20px;\n	font-size: 13px;\n	font-weight: 600;\n}\n.xve-chart-series-body .xve-field {\n	display: grid;\n	grid-template-columns: 1fr 70px 12px;\n	align-items: center;\n	gap: 6px;\n	margin: 14px 0;\n}\n.xve-chart-series-body .xve-input-number {\n	box-sizing: border-box;\n	width: 70px;\n	min-width: 0;\n}\n.xve-chart-series-range .office-range-control {\n	box-sizing: border-box;\n	width: 100%;\n	margin: 0 0 8px;\n}\n.xve-chart-series-fill {\n	margin-top: 20px;\n	padding-top: 18px;\n	border-top: 1px solid var(--line);\n}\n.xve-chart-series-body .xve-field:has(select),\n.xve-chart-series-body .xve-field:has(.xve-chart-series-color) {\n	grid-template-columns: 1fr minmax(100px, 1fr);\n}\n.xve-chart-series-color {\n	height: 28px;\n	background: var(--series-fill);\n	border: 1px solid var(--line);\n	cursor: pointer;\n}\n.xve-chart-series-color:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n";
+
 // src/xlsx/theme/styles.ts
 var declarations = (theme, scheme) => Object.entries(themeToCssVars(theme)).map(([name, value]) => `${name}:${value};`).join("") + `color-scheme:${scheme};`;
 var themeTokenText = `:host{${declarations(lightTheme, "light")}}
@@ -39,7 +46,9 @@ var editorStyleText = [
   shell_default,
   ribbon_default,
   popups_default,
-  backstage_default
+  backstage_default,
+  chart_series_default,
+  withTokens(range_control_default)
 ].join("\n");
 
 // src/xlsx/editor-attributes.ts
@@ -215,7 +224,7 @@ var runFile = (page, command, fileName) => () => {
 function customProperties(page, workbook) {
   const { doc, host, t } = page;
   const section = doc.createElement("section");
-  const render = () => {
+  const render3 = () => {
     section.replaceChildren(heading(page, t("Custom properties"), "h3"));
     const properties = workbook.properties.custom ?? [];
     for (const [index, property] of properties.entries()) {
@@ -254,7 +263,7 @@ function customProperties(page, workbook) {
           "custom",
           (workbook.properties.custom ?? []).filter((_, i) => i !== index)
         );
-        render();
+        render3();
       });
       remove.disabled = host.ctx.readOnly();
       section.append(labelled(page, property.name, input), remove);
@@ -268,7 +277,7 @@ function customProperties(page, workbook) {
       const current = workbook.properties.custom ?? [];
       if (!key || current.some((p) => p.name.toLowerCase() === key.toLowerCase())) return;
       host.setProperty("custom", [...current, { name: key, type: "lpwstr", value: value.value }]);
-      render();
+      render3();
     });
     add.disabled = host.ctx.readOnly();
     section.append(
@@ -277,7 +286,7 @@ function customProperties(page, workbook) {
       add
     );
   };
-  render();
+  render3();
   return section;
 }
 
@@ -414,92 +423,6 @@ function renderInfo(page) {
   layout.append(left, right);
   content.replaceChildren(heading(page, t("Info")), layout);
 }
-
-// src/xlsx/events.ts
-var XLSX_EDITOR_EVENTS = [
-  "workbook-change",
-  "workbook-error",
-  "workbook-warning",
-  "readonly-change",
-  "ribbon-action",
-  "ribbon-customize",
-  "file-command",
-  "selection-change",
-  "sheet-change",
-  "dirty-change"
-];
-var CANCELABLE = /* @__PURE__ */ new Set(["file-command"]);
-function emitEvent(target24, type, detail) {
-  if (typeof CustomEvent === "undefined") return true;
-  return target24.dispatchEvent(
-    new CustomEvent(type, {
-      detail,
-      bubbles: true,
-      composed: true,
-      cancelable: CANCELABLE.has(type)
-    })
-  );
-}
-function emit(target24, type, detail) {
-  return emitEvent(target24, type, detail);
-}
-
-// src/xlsx/file-commands.ts
-var XLSX_TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-var TYPES = {
-  xlsx: XLSX_TYPE,
-  xlsm: "application/vnd.ms-excel.sheet.macroEnabled.12",
-  csv: "text/csv;charset=utf-8",
-  xls: "application/vnd.ms-excel"
-};
-var OPEN_ACCEPT = ".xlsx,.xlsm,.xltx,.xls,.csv,.tsv,.txt";
-function announceFileCommand(host, command, fileName) {
-  return emit(host, "file-command", { command, ...fileName === void 0 ? {} : { fileName } });
-}
-var extensionOf = (fileName) => /\.([^./\\]+)$/.exec(fileName)?.[1]?.toLowerCase() ?? "";
-function withExtension(fileName, extension) {
-  const base = fileName.trim().replace(/\.[^./\\]+$/, "") || "Book1";
-  return `${base}.${extension}`;
-}
-function saveExtension(fileName) {
-  return extensionOf(fileName) === "xlsm" ? "xlsm" : "xlsx";
-}
-function blobFor(bytes, fileName) {
-  return new Blob([new Uint8Array(bytes)], { type: TYPES[extensionOf(fileName)] ?? XLSX_TYPE });
-}
-function downloadBytes(doc, bytes, fileName) {
-  if (typeof URL.createObjectURL !== "function") return;
-  const url = URL.createObjectURL(blobFor(bytes, fileName));
-  const anchor = doc.createElement("a");
-  anchor.href = url;
-  anchor.download = fileName;
-  anchor.style.display = "none";
-  doc.body.append(anchor);
-  anchor.click();
-  anchor.remove();
-  setTimeout(() => URL.revokeObjectURL(url), 1e3);
-}
-function pickFile(root, accept = OPEN_ACCEPT) {
-  const doc = root.ownerDocument ?? document;
-  const input = doc.createElement("input");
-  input.type = "file";
-  input.accept = accept;
-  input.hidden = true;
-  root.append(input);
-  return new Promise((resolve, reject) => {
-    input.addEventListener("change", () => {
-      const file = input.files?.[0];
-      input.remove();
-      if (!file) return resolve(void 0);
-      file.arrayBuffer().then((buffer) => resolve({ bytes: new Uint8Array(buffer), name: file.name }), reject);
-    });
-    input.addEventListener("cancel", () => {
-      input.remove();
-      resolve(void 0);
-    });
-    input.click();
-  });
-}
 var escapeHtml = (text3) => text3.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
 var edge = (view) => view ? `${view.style === "double" ? 3 : view.widthPx}px ${view.style} ${view.color}` : "none";
 function cellCss(view) {
@@ -1613,6 +1536,7 @@ var SHORTCUTS = [
   { keys: ["Mod+G", "F5"], label: "Go To", command: "home.go-to" },
   { keys: ["Mod+Z"], label: "Undo", command: "edit.undo" },
   { keys: ["Mod+Y", "Mod+Shift+Z"], label: "Redo", command: "edit.redo" },
+  { keys: ["Mod+Alt+V"], label: "Paste Special", command: "home.paste-special" },
   { keys: ["Mod+1"], label: "Format Cells", command: "format.cells" },
   { keys: ["Mod+B", "Mod+2"], label: "Bold", command: "home.bold" },
   { keys: ["Mod+I", "Mod+3"], label: "Italic", command: "home.italic" },
@@ -1997,12 +1921,12 @@ function openMenu(anchor, entries, label = "") {
     item.setAttribute("role", entry.checked === void 0 ? "menuitem" : "menuitemcheckbox");
     if (entry.checked !== void 0) item.setAttribute("aria-checked", String(entry.checked));
     item.disabled = entry.disabled ?? false;
-    const icon5 = doc.createElement("span");
-    icon5.className = "ribbon-menu-icon";
-    if (entry.icon) icon5.append(ribbonIcon(doc, entry.icon, 16));
+    const icon6 = doc.createElement("span");
+    icon6.className = "ribbon-menu-icon";
+    if (entry.icon) icon6.append(ribbonIcon(doc, entry.icon, 16));
     const text3 = doc.createElement("span");
     text3.textContent = entry.label;
-    item.append(icon5, text3);
+    item.append(icon6, text3);
     if (entry.shortcut) {
       const keys = doc.createElement("span");
       keys.className = "ribbon-menu-shortcut";
@@ -3121,7 +3045,7 @@ var SPECIAL = [
   ["conditional", "Conditional formats"],
   ["validation", "Data validation"]
 ];
-var TYPES2 = [
+var TYPES = [
   ["numbers", "Numbers"],
   ["text", "Text"],
   ["logicals", "Logicals"],
@@ -3129,7 +3053,7 @@ var TYPES2 = [
 ];
 function openGoToSpecial(ctx) {
   const choice = radios(ctx, "Select", SPECIAL, "comments");
-  const types = TYPES2.map(([value, label]) => ({ value, ...checkbox(ctx, label, true) }));
+  const types = TYPES.map(([value, label]) => ({ value, ...checkbox(ctx, label, true) }));
   const typeBox = ctx.host.ownerDocument.createElement("div");
   typeBox.className = "xve-row";
   typeBox.append(...types.map((t) => t.wrapper));
@@ -3580,6 +3504,31 @@ function setLargeCaption(caption, label) {
   caption.classList.add("ribbon-caption");
 }
 
+// src/xlsx/ribbon/shared-gallery.ts
+function renderSharedGallery(scope, control, command) {
+  const { ctx, doc } = scope;
+  defineGallery(doc.defaultView?.customElements);
+  const gallery = doc.createElement("office-ui-gallery");
+  gallery.classList.add("xve-ribbon-gallery");
+  if (command.icon) gallery.setAttribute("icon", command.icon);
+  tagCommand(gallery, command);
+  gallery.addEventListener("office-gallery-pick", (event) => {
+    const pick = event;
+    void ctx.commands.run(command.id, pick.detail.itemId);
+  });
+  scope.updates.push(() => {
+    gallery.state = {
+      id: command.id,
+      label: ctx.t(command.label),
+      disabled: !ctx.commands.isEnabled(command.id),
+      sections: control.sections?.(ctx) ?? []
+    };
+    const trigger = gallery.querySelector(".trigger");
+    if (trigger) tagCommand(trigger, command);
+  });
+  return gallery;
+}
+
 // src/xlsx/ribbon/controls-input.ts
 var optionsOf = (ctx, control) => {
   try {
@@ -3726,6 +3675,7 @@ function applyPreview(node, preview, label) {
   }
 }
 function renderGallery(scope, control, command) {
+  if (control.sections) return renderSharedGallery(scope, control, command);
   const { ctx, doc } = scope;
   const label = ctx.t(command.label);
   const button2 = el2(doc, "button", "ribbon-large ribbon-gallery-button");
@@ -4292,7 +4242,7 @@ function openNameManager(ctx) {
     deleteButton.disabled = !editable;
     newButton.disabled = ctx.readOnly();
   };
-  const render = () => {
+  const render3 = () => {
     const workbook = ctx.workbook();
     table.replaceChildren();
     const head = table.createTHead().insertRow();
@@ -4338,26 +4288,26 @@ function openNameManager(ctx) {
     }
     sync();
   };
-  filter.addEventListener("change", render);
+  filter.addEventListener("change", render3);
   newButton.addEventListener("click", async () => {
     await ctx.dialogs.open("define-name");
-    render();
+    render3();
   });
   editButton.addEventListener("click", async () => {
     if (!selected) return;
     const props2 = { name: selected.name };
     if (selected.localSheet !== void 0) props2.localSheet = selected.localSheet;
     await ctx.dialogs.open("define-name", props2);
-    render();
+    render3();
   });
   deleteButton.addEventListener("click", () => {
     const session = ctx.session();
     if (!selected || !session || ctx.readOnly()) return;
     session.deleteDefinedName(selected.name, selected.localSheet);
     selected = void 0;
-    render();
+    render3();
   });
-  render();
+  render3();
   return showDialog(ctx, {
     name: "name-manager",
     heading: "Name Manager",
@@ -4834,7 +4784,7 @@ function formulaPanel(ctx) {
     focus: () => input.focus()
   };
 }
-var TYPES3 = [
+var TYPES2 = [
   ["min", "Lowest Value"],
   ["max", "Highest Value"],
   ["num", "Number"],
@@ -4847,7 +4797,7 @@ var argb = (css) => ({ rgb: `FF${css.replace("#", "").toUpperCase()}` });
 function point(ctx, label, types, initial, color) {
   const type = select(
     ctx,
-    TYPES3.filter(([t]) => types.includes(t)),
+    TYPES2.filter(([t]) => types.includes(t)),
     initial
   );
   const value = textInput(ctx);
@@ -5189,7 +5139,7 @@ function cfManagerDialog(ctx) {
   const visible = () => entries.flatMap(
     (e, i) => scope.value === "sheet" || e.ranges.some((r) => t.ranges.some((s) => rangesIntersect(r, s))) ? [i] : []
   );
-  const render = () => {
+  const render3 = () => {
     appliesInputs.length = 0;
     const head = el(ctx, "tr");
     for (const key of ["Rule (applied in order shown)", "Format", "Applies to", "Stop If True"]) {
@@ -5210,7 +5160,7 @@ function cfManagerDialog(ctx) {
           return;
         }
         selected = i;
-        render();
+        render3();
       });
       const desc = el(ctx, "td");
       desc.textContent = describeRule(ctx, entry.rule);
@@ -5265,7 +5215,7 @@ function cfManagerDialog(ctx) {
     const [entry] = entries.splice(selected, 1);
     if (entry) entries.splice(to, 0, entry);
     selected = to;
-    render();
+    render3();
   };
   const newRule = button(ctx, "New Rule...");
   const editRule = button(ctx, "Edit Rule...");
@@ -5279,7 +5229,7 @@ function cfManagerDialog(ctx) {
     if (!result) return;
     entries.unshift(result);
     selected = 0;
-    render();
+    render3();
   });
   editRule.addEventListener("click", async () => {
     if (!commitRanges()) return;
@@ -5287,20 +5237,20 @@ function cfManagerDialog(ctx) {
     if (!entry) return;
     const result = await editRuleDialog(ctx, entry);
     if (result) entries[selected] = result;
-    render();
+    render3();
   });
   deleteRule.addEventListener("click", () => {
     if (selected < 0) return;
     entries.splice(selected, 1);
     selected = Math.min(selected, entries.length - 1);
-    render();
+    render3();
   });
   duplicate.addEventListener("click", () => {
     if (!commitRanges()) return;
     const entry = entries[selected];
     if (!entry) return;
     entries.splice(selected, 0, structuredClone(entry));
-    render();
+    render3();
   });
   up.addEventListener("click", () => move(-1));
   down.addEventListener("click", () => move(1));
@@ -5312,9 +5262,9 @@ function cfManagerDialog(ctx) {
     if (next === void 0) return;
     event.preventDefault();
     selected = next;
-    render();
+    render3();
   });
-  scope.addEventListener("change", render);
+  scope.addEventListener("change", render3);
   const apply = () => {
     if (!commitRanges()) return false;
     const formats = unstageRules(entries);
@@ -5326,12 +5276,12 @@ function cfManagerDialog(ctx) {
         formats.forEach((format2, i) => t.session.replaceConditionalFormat(t.sheet, i, format2));
       });
     entries = stageRules(formats);
-    render();
+    render3();
     return true;
   };
   const applyButton = button(ctx, "Apply");
   applyButton.addEventListener("click", () => void apply());
-  render();
+  render3();
   return showDialog(ctx, {
     name: "cf-manager",
     heading: "Conditional Formatting Rules Manager",
@@ -5872,7 +5822,7 @@ function sortDialog(ctx) {
     }
     return out;
   };
-  const render = () => {
+  const render3 = () => {
     list.replaceChildren(
       ...levels.map((level, i) => {
         level.element.setAttribute("aria-selected", String(i === selected));
@@ -5901,11 +5851,11 @@ function sortDialog(ctx) {
     const level = { element, column, order };
     element.addEventListener("focusin", () => {
       selected = levels.indexOf(level);
-      render();
+      render3();
     });
     levels.splice(at, 0, level);
     selected = at;
-    render();
+    render3();
   };
   addLevel(
     t.active.col >= region.start.col && t.active.col <= region.end.col ? t.active.col : region.start.col,
@@ -5934,7 +5884,7 @@ function sortDialog(ctx) {
     if (levels.length <= 1) return;
     levels.splice(selected, 1);
     selected = Math.max(0, Math.min(selected, levels.length - 1));
-    render();
+    render3();
   });
   copy.addEventListener("click", () => {
     const level = levels[selected];
@@ -5946,7 +5896,7 @@ function sortDialog(ctx) {
     const [level] = levels.splice(selected, 1);
     if (level) levels.splice(to, 0, level);
     selected = to;
-    render();
+    render3();
   };
   up.addEventListener("click", () => move(-1));
   down.addEventListener("click", () => move(1));
@@ -6583,69 +6533,75 @@ var GROUPINGS = [
   ["stacked", "Stacked"],
   ["percentStacked", "100% Stacked"]
 ];
-function svgNode(ctx, markup) {
-  const Parser = ctx.host.ownerDocument.defaultView?.DOMParser;
-  if (!Parser) return void 0;
-  const doc = new Parser().parseFromString(markup, "image/svg+xml");
-  if (doc.querySelector("parsererror")) return void 0;
-  return ctx.host.ownerDocument.importNode(doc.documentElement, true);
-}
 function openInsertChart(ctx, props2 = {}) {
   const t = target(ctx);
   if (!t) return Promise.resolve(void 0);
   const change = props2.change === true ? activeChart(ctx) : void 0;
   let type = props2.type ?? change?.chart.chartType ?? "column";
   const range2 = regionOf(t);
-  const tiles = el(ctx, "div", "xve-tiles");
-  tiles.setAttribute("role", "group");
-  tiles.setAttribute("aria-label", ctx.t("Chart type"));
+  defineGallery(ctx.host.ownerDocument.defaultView?.customElements);
+  const tiles = ctx.host.ownerDocument.createElement("office-ui-gallery");
+  tiles.setAttribute("mode", "panel");
   const grouping = select(ctx, GROUPINGS, change?.chart.grouping ?? "clustered");
   const groupingField = field(ctx, "Grouping", grouping);
   const title = textInput(ctx, change?.chart.title ?? "");
   const preview = el(ctx, "div", "xve-preview");
   preview.setAttribute("aria-label", ctx.t("Preview"));
   preview.setAttribute("role", "img");
-  const buttons = /* @__PURE__ */ new Map();
   const current = () => {
-    if (change) return { ...structuredClone(change.chart), chartType: type };
+    if (change)
+      return {
+        ...structuredClone(change.chart),
+        chartType: type,
+        grouping: grouping.value
+      };
     return buildChart(t.workbook, t.sheet, range2, type, {
       grouping: grouping.value,
       ...title.value.trim() ? { title: title.value.trim() } : {}
     });
   };
   const refresh = () => {
-    for (const [key, button2] of buttons) button2.setAttribute("aria-pressed", String(key === type));
-    groupingField.hidden = !!change || !(type === "column" || type === "bar");
+    tiles.state = {
+      id: "chart-type",
+      label: ctx.t("Chart type"),
+      sections: [
+        {
+          columns: 4,
+          tileWidth: 96,
+          tileHeight: 60,
+          items: CHART_TYPES.map(([key, label]) => ({
+            id: key,
+            label: ctx.t(label),
+            applied: key === type,
+            preview: renderChartSvg(
+              chartView(
+                t.workbook,
+                t.sheet,
+                { ...current(), chartType: key, title: "", showLegend: false },
+                (ref) => evaluateRef(t.workbook, t.sheet, ref)
+              ),
+              360,
+              220
+            )
+          }))
+        }
+      ]
+    };
+    groupingField.hidden = !(type === "column" || type === "bar");
     const model = chartView(
       t.workbook,
       t.sheet,
       current(),
       (ref) => evaluateRef(t.workbook, t.sheet, ref)
     );
-    const node = svgNode(ctx, renderChartSvg(model, 360, 220));
+    const node = parseSvgPreview(ctx.host.ownerDocument, renderChartSvg(model, 360, 220));
     preview.replaceChildren(...node ? [node] : []);
   };
-  for (const [key, label] of CHART_TYPES) {
-    const button2 = el(ctx, "button", "xve-tile");
-    button2.type = "button";
-    button2.textContent = ctx.t(label);
-    button2.dataset.type = key;
-    button2.addEventListener("click", () => {
-      type = key;
-      refresh();
-    });
-    buttons.set(key, button2);
-    tiles.append(button2);
-  }
-  tiles.addEventListener("keydown", (event) => {
-    const list = [...buttons.values()];
-    const i = list.indexOf(event.target);
-    const delta = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
-    if (i < 0 || !delta) return;
-    event.preventDefault();
-    const next = list[(i + delta + list.length) % list.length];
-    next?.focus();
-    next?.click();
+  tiles.addEventListener("office-gallery-pick", (event) => {
+    const key = event.detail.itemId;
+    if (!CHART_TYPES.some(([id]) => id === key)) return;
+    type = key;
+    refresh();
   });
   grouping.addEventListener("change", refresh);
   title.addEventListener("input", refresh);
@@ -6660,10 +6616,14 @@ function openInsertChart(ctx, props2 = {}) {
     heading: change ? "Change Chart Type" : "Insert Chart",
     wide: true,
     body,
-    opened: () => buttons.get(type)?.focus(),
+    opened: () => tiles.querySelector(`[data-gallery-item="${type}"]`)?.focus(),
     submit: () => {
       const chart = current();
-      if (change) editChart(ctx, () => ({ chartType: type }));
+      if (change)
+        editChart(ctx, () => ({
+          chartType: type,
+          ...type === "column" || type === "bar" ? { grouping: grouping.value } : {}
+        }));
       else {
         const { kind: _kind, ...model } = chart;
         ctx.selection.set({ drawing: t.session.addChart(t.sheet, model) });
@@ -6947,13 +6907,18 @@ function openPageSetup(ctx, props2 = {}) {
     }
   });
 }
+
+// src/xlsx/dialogs/paste-special.ts
 var PASTE = [
   ["all", "All"],
   ["formulas", "Formulas"],
   ["values", "Values"],
   ["formats", "Formats"],
   ["noBorders", "All except borders"],
-  ["widths", "Column widths"]
+  ["mergeFormats", "All merging conditional formats"],
+  ["widths", "Column widths"],
+  ["comments", "Comments"],
+  ["validation", "Validation"]
 ];
 var OPERATIONS = [
   ["none", "None"],
@@ -6964,29 +6929,21 @@ var OPERATIONS = [
 ];
 function openPasteSpecial(ctx) {
   const paste = radios(ctx, "Paste", PASTE, "all");
-  for (const input of paste.inputs)
-    if (input.value === "noBorders" || input.value === "widths") input.disabled = true;
   const operation = radios(ctx, "Operation", OPERATIONS, "none");
-  for (const input of operation.inputs) if (input.value !== "none") input.disabled = true;
   const skip = checkbox(ctx, "Skip blanks");
-  skip.input.disabled = true;
   const transpose = checkbox(ctx, "Transpose");
   return showDialog(ctx, {
     name: "paste-special",
     heading: "Paste Special",
-    body: [
-      row(ctx, paste.element, operation.element),
-      row(ctx, skip.wrapper, transpose.wrapper),
-      text(
-        ctx,
-        "Operations, skip blanks and transpose combined with values are not supported yet."
-      )
-    ],
+    body: [row(ctx, paste.element, operation.element), row(ctx, skip.wrapper, transpose.wrapper)],
     opened: () => paste.inputs[0]?.focus(),
     submit: () => {
-      const mode = transpose.input.checked ? "transpose" : paste.get();
-      pasteWith(ctx, mode);
-      return mode;
+      return {
+        mode: paste.get(),
+        transpose: transpose.input.checked,
+        skipBlanks: skip.input.checked,
+        operation: operation.get()
+      };
     }
   });
 }
@@ -7888,6 +7845,58 @@ var tableStyleGalleryItems = (ctx) => TABLE_STYLES.map((info) => ({
 }));
 var cellStyleGalleryItems = (ctx) => cellStyleItems(ctx.workbook()).map((item) => ({ ...item, label: ctx.t(item.label) }));
 
+// src/ribbon/svg-preview.ts
+function safeColor(color, fallback = "none") {
+  if (!color) {
+    return fallback;
+  }
+  const c = color.trim();
+  if (/^#[0-9a-f]{3,8}$/iu.test(c) || /^rgba?\([\d\s.,%]+\)$/iu.test(c) || c === "none") {
+    return c;
+  }
+  if (c === "transparent") {
+    return "none";
+  }
+  return fallback;
+}
+function svgTile(width, height, defs, body) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" aria-hidden="true" focusable="false">${""}${body}</svg>`;
+}
+
+// src/ribbon/color-preview.ts
+var num = (value) => String(Math.round(value * 100) / 100);
+function swatchStripSvg(colors, size) {
+  const w = size.width / Math.max(colors.length, 1);
+  const body = colors.map(
+    (color, i) => `<rect x="${num(i * w)}" y="0" width="${num(w)}" height="${size.height}" fill="${safeColor(color, "#808080")}"/>`
+  ).join("");
+  return svgTile(size.width, size.height, "", body);
+}
+
+// src/xlsx/commands/chart-colors.ts
+function chartColorGallerySections(ctx) {
+  const workbook = ctx.workbook();
+  const selectedChart = activeChart(ctx);
+  if (!workbook || !selectedChart) return [];
+  const scheme = chartColorScheme(workbook.theme);
+  const selected = selectedChart.chart.colorPalette ?? 10;
+  return ["colorful", "monochromatic"].map((group) => ({
+    title: ctx.t(group === "colorful" ? "Colorful" : "Monochromatic"),
+    columns: 1,
+    tileWidth: 96,
+    tileHeight: 14,
+    items: CHART_COLOR_PALETTES.filter((palette) => palette.group === group).map((palette) => ({
+      id: String(palette.id),
+      label: ctx.t(group === "colorful" ? "Colorful Palette {n}" : "Monochromatic Palette {n}", {
+        n: palette.index
+      }),
+      preview: swatchStripSvg(chartPaletteColors(palette, 6, scheme), { width: 96, height: 14 }),
+      applied: selected === palette.id
+    }))
+  }));
+}
+var chartColorGalleryItems = (ctx) => chartColorGallerySections(ctx).flatMap((section) => section.items);
+
 // src/xlsx/ribbon/tabs/contextual.ts
 function tableDesignTab() {
   return {
@@ -7944,6 +7953,18 @@ function chartDesignTab() {
     label: "Chart Design",
     contextual: (ctx) => !!activeChart(ctx),
     groups: [
+      {
+        id: "chart-styles",
+        label: "Chart Styles",
+        controls: [
+          {
+            kind: "gallery",
+            command: "chart.colors",
+            items: chartColorGalleryItems,
+            sections: chartColorGallerySections
+          }
+        ]
+      },
       {
         id: "chart-layouts",
         label: "Chart Layouts",
@@ -7964,6 +7985,11 @@ function chartDesignTab() {
           }
         ]
       },
+      {
+        id: "series-options",
+        label: "Series Options",
+        controls: [{ kind: "button", command: "chart.format-series", size: "large" }]
+      },
       {
         id: "chart-delete",
         label: "Delete",
@@ -8705,6 +8731,316 @@ function reviewCommands() {
     })
   ];
 }
+function createSeriesTransparency(ctx, selected) {
+  const element = el(ctx, "div");
+  const input = numberInput(ctx, 0, 0, 100);
+  const row2 = field(ctx, "Transparency", input);
+  const unit = el(ctx, "span");
+  unit.textContent = "%";
+  row2.append(unit);
+  const host = el(ctx, "div", "xve-chart-series-range");
+  element.append(row2, host);
+  let current;
+  const paint = () => render(
+    rangeControl({
+      label: ctx.t("Transparency"),
+      value: input.valueAsNumber,
+      valueText: `${input.value}%`,
+      min: 0,
+      max: 100,
+      disabled: input.disabled,
+      onInput: (value) => {
+        if (!ctx.commands.isEnabled("chart.format-series")) return;
+        input.value = String(value);
+        paint();
+      },
+      onChange: () => input.dispatchEvent(new Event("change"))
+    }),
+    host
+  );
+  const refresh = (chart) => {
+    current = chart;
+    const value = chart ? chartSeriesTransparency(chart, selected()) : void 0;
+    input.value = String(value ?? 0);
+    input.disabled = value === void 0 || !ctx.commands.isEnabled("chart.format-series");
+    row2.querySelector("span").textContent = ctx.t("Transparency");
+    input.setAttribute("aria-label", ctx.t("Transparency"));
+    paint();
+  };
+  input.addEventListener("change", () => {
+    if (!current || input.disabled || !ctx.commands.isEnabled("chart.format-series"))
+      return refresh(current);
+    if (!input.checkValidity() || !Number.isInteger(input.valueAsNumber)) {
+      ctx.toast(
+        ctx.t("Enter a whole number from {min} to {max}.", { min: 0, max: 100 }),
+        "warning"
+      );
+      return refresh(current);
+    }
+    const found = activeChart(ctx);
+    if (!found || found.chart !== current) return refresh(current);
+    const patch = chartSeriesTransparencyPatch(current, selected(), input.valueAsNumber);
+    if (patch) ctx.session()?.updateChart(ctx.activeSheet(), found.index, patch);
+    refresh(found.chart);
+  });
+  return { element, refresh };
+}
+
+// src/xlsx/chart-series-fill.ts
+function createSeriesFill(ctx, selected) {
+  const element = el(ctx, "div", "xve-chart-series-fill");
+  const heading2 = el(ctx, "h3");
+  const kind = select(ctx, []);
+  const kindField = field(ctx, "Fill", kind);
+  const color = el(ctx, "button", "xve-input xve-chart-series-color");
+  color.type = "button";
+  const colorField = field(ctx, "Color", color);
+  const transparency = createSeriesTransparency(ctx, selected);
+  element.append(heading2, kindField, colorField, transparency.element);
+  let current;
+  const apply = (value) => {
+    if (!current || !ctx.commands.isEnabled("chart.format-series")) return;
+    const found = activeChart(ctx);
+    if (!found || found.chart !== current) return;
+    const patch = chartSeriesFillPatch(current, selected(), value);
+    if (patch) ctx.session()?.updateChart(ctx.activeSheet(), found.index, patch);
+  };
+  kind.addEventListener("change", () => {
+    if (kind.value === "none") apply(null);
+    else if (kind.value === "solid") {
+      if (!current || !ctx.commands.isEnabled("chart.format-series")) return;
+      const found = activeChart(ctx);
+      if (!found || found.chart !== current) return;
+      const patch = chartSeriesSolidFillPatch(current, selected());
+      if (patch) ctx.session()?.updateChart(ctx.activeSheet(), found.index, patch);
+    }
+  });
+  color.addEventListener("click", () => {
+    if (!current || !ctx.commands.isEnabled("chart.format-series")) return;
+    const chart = current;
+    const index = selected();
+    const workbook = ctx.workbook();
+    openColorGrid(
+      color,
+      (choice) => {
+        if (current === chart && ctx.workbook() === workbook && selected() === index && choice)
+          apply(choice);
+      },
+      { t: ctx.t, ...workbook ? { theme: workbook.theme } : {} }
+    );
+  });
+  const refresh = (chart, model) => {
+    current = chart;
+    transparency.refresh(chart);
+    const series = chart?.series[selected()];
+    const fill = series?.fill;
+    const value = fill?.kind === "none" ? "none" : fill?.kind === "gradient" ? "gradient" : fill && fill.kind !== "solid" ? "imported" : "solid";
+    const entries = [
+      ["none", "No fill"],
+      ["solid", "Solid fill"]
+    ];
+    if (value === "gradient") entries.push(["gradient", "Gradient fill"]);
+    else if (value === "imported") entries.push(["imported", "Imported fill"]);
+    kind.replaceChildren(
+      ...entries.map(([key, label]) => {
+        const option = el(ctx, "option");
+        option.value = key;
+        option.textContent = ctx.t(label);
+        option.disabled = key === "gradient" || key === "imported";
+        return option;
+      })
+    );
+    kind.value = value;
+    kind.disabled = !series || !ctx.commands.isEnabled("chart.format-series");
+    color.disabled = kind.disabled || value !== "solid";
+    const paint = model?.series[selected()]?.color;
+    color.style.setProperty("--series-fill", paint && paint !== "none" ? paint : "transparent");
+    heading2.textContent = ctx.t("Fill");
+    for (const [row2, control, label] of [
+      [kindField, kind, "Fill"],
+      [colorField, color, "Color"]
+    ]) {
+      row2.querySelector("span").textContent = ctx.t(label);
+      control.setAttribute("aria-label", ctx.t(label));
+    }
+  };
+  return { element, refresh };
+}
+
+// src/xlsx/chart-series-pane.ts
+function chartSeriesCommand() {
+  return editing({
+    id: "chart.format-series",
+    label: "Format Data Series",
+    icon: icon("chartColumn"),
+    lock: "objects",
+    enabled: (ctx) => {
+      const type = activeChart(ctx)?.chart.chartType;
+      return type === "column" || type === "bar";
+    },
+    run: (ctx, arg) => void ctx.dialogs.open("format-chart-series", arg)
+  });
+}
+function createChartSeriesPane(ctx) {
+  const element = el(ctx, "aside", "xve-chart-series-pane");
+  element.hidden = true;
+  element.setAttribute("role", "complementary");
+  const header = el(ctx, "div", "xve-chart-series-header");
+  const title = el(ctx, "h2");
+  const closeButton = el(ctx, "button", "xve-icon-button");
+  closeButton.type = "button";
+  closeButton.textContent = "\xD7";
+  const close = () => {
+    element.hidden = true;
+    ctx.grid()?.focus();
+  };
+  closeButton.addEventListener("click", close);
+  const body = el(ctx, "div", "xve-chart-series-body");
+  let selected = 0;
+  let shownWorkbook;
+  let shownSheet = -1;
+  let shownChart = -1;
+  const seriesSelect = select(ctx, []);
+  const seriesField = field(ctx, "Series", seriesSelect);
+  const fills = createSeriesFill(ctx, () => selected);
+  seriesSelect.addEventListener("change", () => {
+    selected = Number(seriesSelect.value);
+    refresh();
+  });
+  const section = el(ctx, "h3");
+  const overlap = numberInput(ctx, 0, -100, 100);
+  const gap = numberInput(ctx, 150, 0, 500);
+  const overlapField = field(ctx, "Series Overlap", overlap);
+  const gapField = field(ctx, "Gap Width", gap);
+  const overlapRange = el(ctx, "div", "xve-chart-series-range");
+  const gapRange = el(ctx, "div", "xve-chart-series-range");
+  const ranges = [
+    [overlapRange, overlap, "Series Overlap"],
+    [gapRange, gap, "Gap Width"]
+  ];
+  const paintRange = (host, input, key) => {
+    const value = input.valueAsNumber;
+    render(
+      rangeControl({
+        label: ctx.t(key),
+        value,
+        valueText: `${value}%`,
+        min: Number(input.min),
+        max: Number(input.max),
+        disabled: input.disabled,
+        onInput: (next) => {
+          if (!ctx.commands.isEnabled("chart.format-series")) return refresh();
+          input.value = String(next);
+          paintRange(host, input, key);
+        },
+        onChange: () => input.dispatchEvent(new Event("change"))
+      }),
+      host
+    );
+  };
+  for (const row2 of [overlapField, gapField]) {
+    const unit = el(ctx, "span");
+    unit.textContent = "%";
+    row2.append(unit);
+  }
+  const empty = el(ctx, "p", "xve-note");
+  header.append(title, closeButton);
+  body.append(seriesField, section, overlapField, overlapRange, gapField, gapRange, fills.element);
+  element.append(header, body, empty);
+  element.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    event.stopPropagation();
+    close();
+  });
+  const relocalize = () => {
+    title.textContent = ctx.t("Format Data Series");
+    element.setAttribute("aria-label", title.textContent);
+    closeButton.setAttribute("aria-label", ctx.t("Close"));
+    section.textContent = ctx.t("Series Options");
+    seriesField.querySelector("span").textContent = ctx.t("Series");
+    seriesSelect.setAttribute("aria-label", ctx.t("Series"));
+    empty.textContent = ctx.t("Select a bar or column chart to format its series.");
+    for (const [row2, input, key] of [
+      [overlapField, overlap, "Series Overlap"],
+      [gapField, gap, "Gap Width"]
+    ]) {
+      row2.querySelector("span").textContent = ctx.t(key);
+      input.setAttribute("aria-label", ctx.t(key));
+    }
+    for (const [host, input, key] of ranges) paintRange(host, input, key);
+    refresh();
+  };
+  const refresh = () => {
+    if (element.hidden) return;
+    const found = activeChart(ctx);
+    const chart = found?.chart;
+    const workbook = ctx.workbook();
+    if (workbook !== shownWorkbook || shownSheet !== ctx.activeSheet() || shownChart !== found?.index)
+      selected = 0;
+    shownWorkbook = workbook;
+    shownSheet = ctx.activeSheet();
+    shownChart = found?.index ?? -1;
+    if (!chart?.series[selected]) selected = 0;
+    const model = workbook && chart ? chartView(
+      workbook,
+      ctx.activeSheet(),
+      chart,
+      createRefEvaluator(workbook, ctx.session()?.calc, { sheet: ctx.activeSheet() })
+    ) : void 0;
+    seriesSelect.replaceChildren(
+      ...(model?.series ?? []).map((series, index) => {
+        const option = el(ctx, "option");
+        option.value = String(index);
+        option.textContent = series.name;
+        return option;
+      })
+    );
+    seriesSelect.value = String(selected);
+    seriesSelect.disabled = !chart?.series.length || !ctx.commands.isEnabled("chart.format-series");
+    fills.refresh(chart, model);
+    const supported = chart?.chartType === "bar" || chart?.chartType === "column";
+    body.hidden = !supported;
+    empty.hidden = supported;
+    const spacing = chartBarSpacing(chart ?? {});
+    gap.value = String(spacing.barGapWidth);
+    overlap.value = String(spacing.barOverlap);
+    gap.disabled = overlap.disabled = !ctx.commands.isEnabled("chart.format-series");
+    for (const [host, input, key] of ranges) paintRange(host, input, key);
+  };
+  for (const [input, property] of [
+    [gap, "barGapWidth"],
+    [overlap, "barOverlap"]
+  ]) {
+    input.addEventListener("change", () => {
+      if (!ctx.commands.isEnabled("chart.format-series")) return refresh();
+      const value = input.valueAsNumber;
+      if (!Number.isInteger(value) || !input.checkValidity()) {
+        ctx.toast(
+          ctx.t("Enter a whole number from {min} to {max}.", { min: input.min, max: input.max }),
+          "warning"
+        );
+        refresh();
+        return;
+      }
+      if (activeChart(ctx)?.chart[property] !== value)
+        editChart(ctx, () => ({ [property]: value }));
+      refresh();
+    });
+  }
+  relocalize();
+  ctx.dialogs.register("format-chart-series", async (_ctx, props2) => {
+    if (!ctx.commands.isEnabled("chart.format-series")) return;
+    element.hidden = false;
+    refresh();
+    if (typeof props2 === "number" && Number.isInteger(props2) && activeChart(ctx)?.chart.series[props2]) {
+      selected = props2;
+      refresh();
+    }
+    overlap.focus();
+  });
+  return { element, refresh, relocalize };
+}
 
 // src/xlsx/commands/index.ts
 function allCommands() {
@@ -8723,7 +9059,8 @@ function allCommands() {
     ...dataCommands(),
     ...reviewCommands(),
     ...viewCommands(),
-    ...contextualCommands()
+    ...contextualCommands(),
+    chartSeriesCommand()
   ];
 }
 function installCommands(ctx) {
@@ -8769,12 +9106,17 @@ function createGridClipboard(host) {
   };
   const apply = (payload, mode) => {
     const session = ctx.session();
-    const at = ctx.selection.get().ranges[ctx.selection.get().ranges.length - 1]?.start;
+    const at = lastRange();
     if (!session || !at || ctx.readOnly()) return false;
+    if (ctx.selection.get().ranges.length > 1) {
+      ctx.toast(ctx.t("This action won't work on multiple selections."), "warning");
+      return false;
+    }
     try {
+      const wasCut = typeof payload !== "string" && payload.cut;
       const range2 = session.paste(ctx.activeSheet(), at, payload, mode);
       host.selectRange(range2);
-      if (typeof payload !== "string" && payload.cut) {
+      if (typeof payload !== "string" && wasCut) {
         internal = { ...payload, cut: false };
         clearMarquee();
       }
@@ -8897,7 +9239,7 @@ function place(node, left, top, width, height) {
   node.style.width = `${Math.max(0, width)}px`;
   node.style.height = `${Math.max(0, height)}px`;
 }
-function svgNode2(doc, markup) {
+function svgNode(doc, markup) {
   const holder = doc.createElement("div");
   holder.innerHTML = markup;
   return holder.firstElementChild ?? doc.createElement("span");
@@ -9540,6 +9882,7 @@ function paintSmartArt(ctx, node, obj2, theme) {
     art.style.width = "100%";
     art.style.height = "100%";
     art.schemeColors = smartArtSchemeColors(theme);
+    art.schemeFonts = theme ? { major: theme.majorFont, minor: theme.minorFont } : {};
     art.drawing = diagram;
     node.append(art);
   } else {
@@ -9608,14 +9951,23 @@ var DrawingLayer = class {
           node = h(view.doc, "div", "xg-obj");
           node.dataset.index = String(index);
           node.addEventListener("pointerdown", (event) => this.#press(event, index));
+          node.addEventListener("dblclick", (event) => {
+            const series = event.currentTarget.xgSeriesHit;
+            if (series === void 0) return;
+            event.stopPropagation();
+            view.ctx.selection.set({ drawing: index });
+            void view.ctx.commands.run("chart.format-series", series);
+          });
           this.#nodes.set(key, node);
         }
         if (node.parentNode !== parent) parent.append(node);
         place(node, box.x, box.y, box.w, box.h);
-        const sig = `${drawing.kind}:${Math.round(box.w)}x${Math.round(box.h)}:${this.#generation}:${this.#selected === index}`;
-        if (node.xgSig === sig) continue;
-        node.xgSig = sig;
-        this.#paint(node, drawing, box, index);
+        const sig = `${drawing.kind}:${Math.round(box.w)}x${Math.round(box.h)}:${this.#generation}`;
+        if (node.xgSig !== sig) {
+          node.xgSig = sig;
+          this.#paint(node, drawing, box, index);
+        }
+        this.#selection(node, index);
       }
     });
     for (const [key, node] of this.#nodes)
@@ -9648,7 +10000,7 @@ var DrawingLayer = class {
           });
           const model = chartView(workbook, view.sheetIndex(), drawing, evaluate);
           node.append(
-            svgNode2(
+            svgNode(
               doc,
               renderChartSvg(
                 model,
@@ -9669,10 +10021,15 @@ var DrawingLayer = class {
       node.classList.add("xg-obj-unsupported");
       node.textContent = view.ctx.t("{name} (not shown)", { name: drawing.description });
     }
-    if (this.#selected === index) {
-      node.classList.add("xg-obj-sel");
+  }
+  #selection(node, index) {
+    const selected = this.#selected === index;
+    node.classList.toggle("xg-obj-sel", selected);
+    if (!selected) {
+      for (const grip of node.querySelectorAll(".xg-grip")) grip.remove();
+    } else if (!node.querySelector(".xg-grip")) {
       for (const pos of ["nw", "ne", "sw", "se"]) {
-        const grip = h(doc, "div", "xg-grip", { "data-grip": pos });
+        const grip = h(this.#view.doc, "div", "xg-grip", { "data-grip": pos });
         grip.style.left = pos.includes("w") ? "-4px" : "calc(100% - 4px)";
         grip.style.top = pos.includes("n") ? "-4px" : "calc(100% - 4px)";
         grip.style.cursor = pos === "nw" || pos === "se" ? "nwse-resize" : "nesw-resize";
@@ -9692,6 +10049,9 @@ var DrawingLayer = class {
     const sheet = view.sheet();
     const drawing = sheet?.drawings[index];
     if (!sheet || !drawing) return;
+    const node = event.currentTarget;
+    const series = event.target.closest("[data-chart-series]")?.dataset.chartSeries;
+    node.xgSeriesHit = series === void 0 ? void 0 : Number(series);
     view.ctx.selection.set({ drawing: index });
     view.ctx.grid()?.focus();
     const session = view.ctx.session();
@@ -9699,7 +10059,6 @@ var DrawingLayer = class {
     const grip = event.target.closest("[data-grip]")?.dataset.grip;
     const start = view.clientToView(event.clientX, event.clientY);
     const origin = anchorToPixelBox(sheet, drawing.anchor, view.metrics);
-    const node = event.currentTarget;
     let box = origin;
     node.setPointerCapture?.(event.pointerId);
     const move = (e) => {
@@ -9720,7 +10079,7 @@ var DrawingLayer = class {
       node.removeEventListener("pointermove", move);
       node.removeEventListener("pointerup", up);
       node.releasePointerCapture?.(e.pointerId);
-      if (box !== origin)
+      if (box.x !== origin.x || box.y !== origin.y || box.w !== origin.w || box.h !== origin.h)
         session.setDrawingAnchor(
           view.sheetIndex(),
           index,
@@ -9783,9 +10142,9 @@ var GridA11y = class {
   }
   input;
   /** Updates the sink label and announces (debounced) after a selection change. */
-  update(selection, editing5) {
+  update(selection, editing6) {
     const text3 = describeSelection(this.#view, selection);
-    if (!editing5) this.input.setAttribute("aria-label", text3);
+    if (!editing6) this.input.setAttribute("aria-label", text3);
     if (this.#timer) clearTimeout(this.#timer);
     this.#timer = setTimeout(() => {
       this.live.textContent = text3;
@@ -9796,7 +10155,6 @@ var GridA11y = class {
     this.live.remove();
   }
 };
-var PASTE_MODES = ["all", "values", "formats", "formulas", "transpose"];
 function currentRegionOrAll(sheet, selection) {
   const region = normalizeRange(currentRegion(sheet, selection.active));
   const single = region.start.row === region.end.row && region.start.col === region.end.col;
@@ -9836,7 +10194,7 @@ function gridCommands(host) {
     session.batch(axis === "down" ? "Fill Down" : "Fill Right", () => {
       for (const range2 of ctx.selection.get().ranges) {
         const plan = fillPlan(range2, axis);
-        if (plan) session.fill(sheet, plan.source, plan.target);
+        if (plan) session.fill(sheet, plan.source, plan.target, "copy");
       }
     });
   };
@@ -9866,8 +10224,7 @@ function gridCommands(host) {
       editing: true,
       enabled: hasSession,
       run: async (_ctx, arg) => {
-        const mode = typeof arg === "string" && PASTE_MODES.includes(arg) ? arg : "all";
-        await host.clipboard.pasteSystem(mode);
+        await host.clipboard.pasteSystem(resolvePasteOptions(arg));
       }
     },
     {
@@ -9887,9 +10244,8 @@ function gridCommands(host) {
       enabled: hasSession,
       run: async (ctx) => {
         const result = await ctx.dialogs.open("paste-special");
-        const mode = typeof result === "string" ? result : result && typeof result === "object" && "mode" in result ? String(result.mode) : void 0;
-        if (mode && PASTE_MODES.includes(mode))
-          await host.clipboard.pasteSystem(mode);
+        if (result !== void 0) await host.clipboard.pasteSystem(resolvePasteOptions(result));
+        ctx.grid()?.focus();
       }
     },
     {
@@ -10795,7 +11151,7 @@ function paintBorders(doc, node, item) {
   node.append(box);
   const diagonal = diagonalSvg(b, item.w, item.h);
   if (diagonal) {
-    const svg = svgNode2(doc, diagonal);
+    const svg = svgNode(doc, diagonal);
     svg.setAttribute("class", "xg-diag");
     node.append(svg);
   }
@@ -10816,18 +11172,30 @@ function paintCell(doc, node, item, zoom) {
     const bar = h(doc, "div", "xg-db");
     const width = Math.max(0, Math.min(1, view.dataBar.fraction)) * (item.w - 4);
     bar.style.width = `${width}px`;
-    const color = view.dataBar.negative ? "#ff0000" : view.dataBar.color;
-    bar.style.background = `linear-gradient(90deg, ${color}, color-mix(in srgb, ${color} 15%, #fff))`;
-    bar.style.borderColor = color;
+    const color = view.dataBar.color;
+    const rtl = view.dataBar.direction === "rightToLeft";
+    bar.style.left = view.dataBar.start === void 0 ? rtl ? "auto" : "2px" : `${2 + view.dataBar.start * (item.w - 4)}px`;
+    bar.style.right = view.dataBar.start === void 0 && rtl ? "2px" : "auto";
+    bar.style.background = view.dataBar.gradient === false ? color : `linear-gradient(${rtl ? 270 : 90}deg, ${color}, color-mix(in srgb, ${color} 15%, #fff))`;
+    bar.style.border = view.dataBar.borderColor ? `1px solid ${view.dataBar.borderColor}` : "none";
     node.append(bar);
+    if (view.dataBar.axis) {
+      const axis = h(doc, "div", "xg-db-axis");
+      axis.style.position = "absolute";
+      axis.style.top = "1px";
+      axis.style.bottom = "1px";
+      axis.style.left = `${2 + view.dataBar.axis.fraction * (item.w - 4)}px`;
+      axis.style.borderLeft = `1px dashed ${view.dataBar.axis.color}`;
+      node.append(axis);
+    }
   }
   if (view.icon) {
-    const icon5 = svgNode2(
+    const icon6 = svgNode(
       doc,
       iconSvg(view.icon.set, view.icon.index, Math.round(16 * (zoom / 100)))
     );
-    icon5.setAttribute("class", "xg-ic");
-    node.append(icon5);
+    icon6.setAttribute("class", "xg-ic");
+    node.append(icon6);
   }
   if (item.text) {
     const box = h(doc, "div", "xg-t");
@@ -11608,6 +11976,7 @@ var GRID_CSS = `
 .xg-drawings{z-index:4}
 .xg-obj{position:absolute;box-sizing:border-box;pointer-events:auto;cursor:default}
 .xg-obj img,.xg-obj svg{display:block;width:100%;height:100%;pointer-events:none}
+.xg-chart svg [data-chart-series]{pointer-events:auto}
 .xg-obj.xg-chart{background:#fff;border:1px solid #d9d9d9}
 .xg-obj.xg-obj-sel{outline:1px solid #8a8a8a}
 .xg-obj .xg-grip{position:absolute;width:8px;height:8px;background:#fff;border:1px solid #555;box-sizing:border-box;border-radius:50%}
@@ -12003,10 +12372,10 @@ function createFormulaInput(ctx, doc, bar) {
   const onKey = (event) => {
     event.stopPropagation();
     if (assist.handleKey(event, field2)) return;
-    const editing5 = bridge.state().editing;
+    const editing6 = bridge.state().editing;
     if (event.key === "Escape") {
       event.preventDefault();
-      if (editing5) bridge.cancel();
+      if (editing6) bridge.cancel();
       else showCell();
       ctx.grid()?.focus();
       return;
@@ -12019,7 +12388,7 @@ function createFormulaInput(ctx, doc, bar) {
       onInput();
       return;
     }
-    if (!editing5) return;
+    if (!editing6) return;
     if (event.key === "Enter") {
       event.preventDefault();
       if (event.ctrlKey || event.metaKey) bridge.commit("none", true);
@@ -12616,7 +12985,7 @@ function mountSheetTabs(ctx, container) {
     else if (right > strip.scrollLeft + strip.clientWidth)
       strip.scrollLeft = right - strip.clientWidth;
   };
-  const render = () => {
+  const render3 = () => {
     if (renaming) return;
     const workbook = ctx.workbook();
     const active2 = ctx.activeSheet();
@@ -12634,7 +13003,7 @@ function mountSheetTabs(ctx, container) {
   const activate = (sheet) => {
     focusable = sheet;
     if (ctx.activeSheet() !== sheet) ctx.setActiveSheet(sheet);
-    render();
+    render3();
   };
   const rename = (sheet) => {
     if (!editable()) return;
@@ -12643,7 +13012,7 @@ function mountSheetTabs(ctx, container) {
     if (!tab) return;
     renaming = startRename(ctx, tab, sheet, () => {
       renaming = void 0;
-      render();
+      render3();
       tabFor(strip, sheet)?.focus();
     });
   };
@@ -12764,8 +13133,8 @@ function mountSheetTabs(ctx, container) {
       }
     }
   });
-  const disposeModel = ctx.onModelChange(() => render());
-  render();
+  const disposeModel = ctx.onModelChange(() => render3());
+  render3();
   return () => {
     renaming?.cancel();
     disposeModel();
@@ -12964,7 +13333,7 @@ function applyRibbonVisibility(root, isHidden) {
 var isSmall = (control) => control.kind === "button" || control.kind === "toggle" || control.kind === "split" || control.kind === "menu" ? control.size !== "large" : control.kind === "color" || control.kind === "select";
 function layoutSmall(scope, run) {
   const { doc } = scope;
-  const render = (controls) => {
+  const render3 = (controls) => {
     const box = el2(doc, "div", "ribbon-stack");
     for (const control of controls) {
       const node = renderControl(scope, control, true);
@@ -12985,14 +13354,14 @@ function layoutSmall(scope, run) {
   if (lines) {
     const column = el2(doc, "div", "ribbon-stack");
     for (const line of lines.filter((items2) => items2.length)) {
-      const row2 = render(line);
+      const row2 = render3(line);
       if (row2.childElementCount) column.append(row2);
     }
     return column.childElementCount ? [column] : [];
   }
   const columns = [];
   for (let at = 0; at < run.length; at += 3) {
-    const box = render(run.slice(at, at + 3));
+    const box = render3(run.slice(at, at + 3));
     if (box.childElementCount) columns.push(box);
   }
   return columns;
@@ -13124,10 +13493,10 @@ function adjacentSheet(ctx, step2) {
   return void 0;
 }
 function shellCommands(handlers) {
-  const file = (id, label, command, icon5, shortcut) => ({
+  const file = (id, label, command, icon6, shortcut) => ({
     id,
     label,
-    icon: icon5,
+    icon: icon6,
     ...shortcut ? { shortcut } : {},
     enabled: (ctx) => command === "new" || command === "open" || hasWorkbook(ctx),
     run: () => handlers.fileCommand(command)
@@ -13320,7 +13689,7 @@ function createStatusBar(ctx, handlers) {
   element.addEventListener("office-status-activate", (event) => {
     if (event.detail.id === "notes") handlers.showNotes();
   });
-  const render = () => {
+  const render3 = () => {
     const count = ctx.workbook()?.warnings.length ?? 0;
     const notesText = ctx.t(
       count === 1 ? "{count} compatibility note" : "{count} compatibility notes",
@@ -13352,7 +13721,7 @@ function createStatusBar(ctx, handlers) {
     };
   };
   const refresh = () => {
-    render();
+    render3();
     stats.textContent = statisticsText(ctx, shown2);
     slider.value = zoom();
   };
@@ -13391,7 +13760,7 @@ function createTitleBar(ctx, handlers) {
   element.append(actions);
   let fileName = "";
   let saveState = "saved";
-  const render = () => {
+  const render3 = () => {
     const session = ctx.session();
     const undoLabel = session?.undoLabel();
     const entries = [
@@ -13454,7 +13823,7 @@ function createTitleBar(ctx, handlers) {
     mode.setAttribute("aria-label", ctx.t("Editing mode"));
     mode.options[0].textContent = ctx.t("Editing");
     mode.options[1].textContent = ctx.t("Viewing");
-    render();
+    render3();
   };
   const refresh = () => {
     mode.value = ctx.readOnly() ? "viewing" : "editing";
@@ -13469,18 +13838,18 @@ function createTitleBar(ctx, handlers) {
       }
       comments.setAttribute("aria-pressed", String(pressed));
     }
-    render();
+    render3();
   };
   relocalize();
   return {
     element,
     setFileName(value) {
       fileName = value;
-      render();
+      render3();
     },
     setSaveState(value) {
       saveState = value;
-      render();
+      render3();
     },
     refresh,
     relocalize,
@@ -13641,6 +14010,8 @@ function buildShell(core) {
   });
   const toaster = createToaster(doc, () => ctx.t("Close"));
   const workspace = el2(doc, "div", "xve-workspace");
+  const chartSeriesPane = createChartSeriesPane(ctx);
+  const canvasRow = el2(doc, "div", "xve-canvas-row");
   const formulaRow = el2(doc, "div", "xve-formula-row");
   const gridHost = el2(doc, "div", "xve-grid-host");
   const tabsRow = el2(doc, "div", "xve-tabs-row");
@@ -13648,10 +14019,11 @@ function buildShell(core) {
   const emptyText = el2(doc, "p");
   empty.append(emptyText);
   workspace.append(formulaRow, gridHost, tabsRow, empty);
+  canvasRow.append(workspace, chartSeriesPane.element);
   frame.append(
     titleBar.element,
     ribbon.element,
-    workspace,
+    canvasRow,
     statusBar.element,
     backstage.element,
     help.element,
@@ -13666,9 +14038,14 @@ function buildShell(core) {
   if (!tabsRow.querySelector('[part~="sheet-tabs"]')) tabsRow.setAttribute("part", "sheet-tabs");
   if (!formulaRow.querySelector('[part~="formula-bar"]'))
     formulaRow.setAttribute("part", "formula-bar");
-  const regions = () => [ribbon.element, formulaRow, gridHost, tabsRow, statusBar.element].filter(
-    (region) => region.getClientRects().length
-  );
+  const regions = () => [
+    ribbon.element,
+    formulaRow,
+    gridHost,
+    tabsRow,
+    chartSeriesPane.element,
+    statusBar.element
+  ].filter((region) => region.getClientRects().length);
   const focusRegion = (region) => {
     if (region === ribbon.element) return ribbon.focus();
     if (region === gridHost) return ctx.grid()?.focus();
@@ -13705,6 +14082,7 @@ function buildShell(core) {
       ribbon.refresh();
       titleBar.refresh();
       statusBar.refresh();
+      chartSeriesPane.refresh();
       titleBar.setFileName(core.fileName);
       if (core.dirty.dirty && saveState !== "dirty" && saveState !== "saving")
         chrome.setSaveState("dirty");
@@ -13719,6 +14097,7 @@ function buildShell(core) {
       titleBar.relocalize();
       statusBar.relocalize();
       backstage.relocalize();
+      chartSeriesPane.relocalize();
       core.requestRender();
     }
   };
@@ -14035,6 +14414,11 @@ var XlsxEditorApi = class extends HTMLElementBase {
     this.core.dirty.set(false);
     this.chrome?.setSaveState("saved");
   }
+  /** Commits an in-progress cell edit before a host navigates or persists. False means validation blocked it. */
+  commitEdit() {
+    const grid = this.core.ctx.grid();
+    return !grid?.isEditing() || grid.commitEdit();
+  }
   /** Selects `B2`, `B2:C5`, `A:A`, `B2:C5,E1` or `'Sheet 2'!A1` and scrolls it into view. */
   select(ref) {
     const parsed = parseSelectionRef(ref, this.core.workbook);
@@ -14185,4 +14569,4 @@ function defineXlsxEditor() {
   customElements.define("xlsx-editor", XlsxEditorElement);
 }
 
-export { DEFAULT_AUTHOR_NAME, DEFAULT_FILE_NAME, XLSX_EDITOR_ATTRIBUTES, XLSX_EDITOR_EVENTS, XlsxEditorElement, defineXlsxEditor, registerRibbonIcon };
+export { DEFAULT_AUTHOR_NAME, DEFAULT_FILE_NAME, XLSX_EDITOR_ATTRIBUTES, XlsxEditorElement, defineXlsxEditor, registerRibbonIcon };