ooxml-ui 1.25.0 → 1.26.0

package/dist/{chunk-SC44SOIS.js → chunk-WDOWQKKC.js}

@@ -1,15 +1,20 @@
 import { createIconSvg, paintIcon, getIcon } from './chunk-M6GF5ED2.js';
+import { CHART_FORMAT_STRINGS, CHART_FORMAT_LOCALES } from './chunk-VM6ZTKB3.js';
 import { initialsOf } from './chunk-YZH2QS7J.js';
-import { OfficeElement, controlStyles, definer, valueOn, flag, present, triState, withTokens, emit } from './chunk-QLHCGV4C.js';
+import { parseSvgPreview } from './chunk-FN7IF6M6.js';
+import { OfficeElement, controlStyles, definer, valueOn, flag, present, emit, triState, withTokens } from './chunk-QLHCGV4C.js';
 import { tok, OFFICE_TOKENS } from './chunk-XL77FR4B.js';
 import { html, LitElement, nothing, render, svg } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
-import 'ooxml-core/i18n';
+import { normalizeLocale } from 'ooxml-core/i18n';
 import { unsafeStatic, html as html$1 } from 'lit/static-html.js';
 import { live } from 'lit/directives/live.js';
+import { applyChartDataSheetEdits, chartDataSheetCellEdit, chartDataSheetPasteEdits, chartSeriesEntries, chartGroupPaintsLine, chartTargetShape, chartFormatTargetKey, resolveChartGradient } from 'ooxml-core/chart';
+import { resolveDrawingColor } from 'ooxml-core/drawingml';
 import { keyed } from 'lit/directives/keyed.js';
 import { OFFICE_STANDARD_COLORS, normalizePaletteHex, buildThemePalette, hslToRgb, toHex, hexToRgbChannels, rgbToHsl } from 'ooxml-core/color';
+import { parseLocaleNumber, formatLocaleNumber, parseTsv } from 'ooxml-core/text';
 
 function glyph(name, className = "glyph", hidden = false) {
   const found = getIcon(name);
@@ -358,15 +363,15 @@ function groupOf(radio, scope) {
     (other) => other.name === name && other.form === radio.form
   );
 }
-function labelText(label, self) {
-  let text = "";
-  for (const node of label.childNodes) {
+function labelText(label2, self) {
+  let text2 = "";
+  for (const node of label2.childNodes) {
     if (node === self) continue;
-    if (node.nodeType === 3) text += node.textContent ?? "";
+    if (node.nodeType === 3) text2 += node.textContent ?? "";
     else if (node instanceof Element && !node.localName.includes("-") && !/^(select|input|textarea)$/u.test(node.localName))
-      text += labelText(node, self);
+      text2 += labelText(node, self);
   }
-  return text;
+  return text2;
 }
 function refreshTabStops(group) {
   const enabled = group.filter((item) => !present(item.disabled));
@@ -441,11 +446,11 @@ var OfficeUiRadio = class extends OfficeElement {
   syncName() {
     if (this.hasAttribute("aria-labelledby")) return;
     if (this.hasAttribute("aria-label") && !this.autoNamed) return;
-    const label = this.closest("label") ?? this.internals?.labels?.[0];
-    const text = label ? labelText(label, this).replace(/\s+/gu, " ").trim() : "";
-    if (text) {
+    const label2 = this.closest("label") ?? this.internals?.labels?.[0];
+    const text2 = label2 ? labelText(label2, this).replace(/\s+/gu, " ").trim() : "";
+    if (text2) {
       this.autoNamed = true;
-      this.setAttribute("aria-label", text);
+      this.setAttribute("aria-label", text2);
     }
   }
   peers() {
@@ -768,8 +773,8 @@ var OfficeUiBackstage = class extends OfficeElement {
       ...child.querySelectorAll(
         'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
       )
-    ]).filter((control) => !control.disabled);
-    return [...chrome, ...page].filter((control) => control.getClientRects().length > 0);
+    ]).filter((control2) => !control2.disabled);
+    return [...chrome, ...page].filter((control2) => control2.getClientRects().length > 0);
   }
   /** Keeps Tab inside the open File view: past the last control it returns to the first. */
   trapTab(event) {
@@ -777,7 +782,7 @@ var OfficeUiBackstage = class extends OfficeElement {
     if (stops.length === 0) return;
     const root = this.getRootNode();
     const current = this.shadowRoot?.activeElement ?? root.activeElement;
-    const index = stops.findIndex((control) => control === current || control.contains(current));
+    const index = stops.findIndex((control2) => control2 === current || control2.contains(current));
     const last = stops.length - 1;
     if (event.shiftKey ? index > 0 : index < last) return;
     event.preventDefault();
@@ -844,11 +849,11 @@ var OfficeUiBackstage = class extends OfficeElement {
 		>`;
   }
   render() {
-    const label = this.label ?? "File";
+    const label2 = this.label ?? "File";
     const back = this.backLabel ?? "Back";
     return html`
-			<div class="frame" role="dialog" aria-modal="true" aria-label=${label}>
-				<nav part="nav" aria-label=${label} @click=${this.onNavClick}>
+			<div class="frame" role="dialog" aria-modal="true" aria-label=${label2}>
+				<nav part="nav" aria-label=${label2} @click=${this.onNavClick}>
 					<button
 						type="button"
 						class="back"
@@ -1211,17 +1216,17 @@ var OfficeUiCommentsPane = class extends OfficeElement {
   }
   submitNew() {
     const box = this.renderRoot.querySelector("textarea.new");
-    const text = box?.value.trim();
-    if (!box || !text || this.locked || present(this.addDisabled)) return;
+    const text2 = box?.value.trim();
+    if (!box || !text2 || this.locked || present(this.addDisabled)) return;
     box.value = "";
-    this.fire("comment-add", { text });
+    this.fire("comment-add", { text: text2 });
   }
   submitReply(threadId) {
     const box = this.card(threadId)?.querySelector("textarea.reply-box");
-    const text = box?.value.trim();
-    if (!box || !text || this.locked) return;
+    const text2 = box?.value.trim();
+    if (!box || !text2 || this.locked) return;
     box.value = "";
-    this.fire("comment-reply", { threadId, text });
+    this.fire("comment-reply", { threadId, text: text2 });
   }
   startEdit(commentId) {
     this.editingId = commentId;
@@ -1234,10 +1239,10 @@ var OfficeUiCommentsPane = class extends OfficeElement {
   }
   saveEdit(thread, comment) {
     const box = this.renderRoot.querySelector("textarea.edit-box");
-    const text = box?.value.trim();
+    const text2 = box?.value.trim();
     this.stopEdit();
-    if (!text || text === comment.text || this.locked) return;
-    this.fire("comment-edit", { threadId: thread.id, commentId: comment.id, text });
+    if (!text2 || text2 === comment.text || this.locked) return;
+    this.fire("comment-edit", { threadId: thread.id, commentId: comment.id, text: text2 });
   }
   /** Ctrl+Enter (Cmd+Enter) posts from any box, like Office. */
   onBoxKey(event, submit) {
@@ -1406,6 +1411,2060 @@ var OfficeUiCommentsPane = class extends OfficeElement {
 };
 var defineCommentsPane = definer("office-ui-comments-pane", () => OfficeUiCommentsPane);
 
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/range-control.css?raw
+var range_control_default = ".office-range-control {\n	accent-color: var(--office-accent);\n}\n.office-range-control:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n.office-range-control:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n";
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chart/format-pane.css?raw
+var format_pane_default = ":host {\n	display: block;\n	box-sizing: border-box;\n	min-width: 0;\n	min-height: 0;\n	color: var(--office-foreground);\n	background: var(--office-background);\n	font-family: var(--office-font);\n	font-size: var(--office-font-size-sm);\n	line-height: var(--office-line-height);\n}\n:host([hidden]) {\n	display: none;\n}\n* {\n	box-sizing: border-box;\n}\n.panel {\n	display: flex;\n	flex-direction: column;\n	height: 100%;\n	min-height: 0;\n}\nheader {\n	display: flex;\n	flex: none;\n	align-items: center;\n	justify-content: space-between;\n	gap: var(--office-space-2);\n	padding: var(--office-space-2-5) var(--office-space-2-5) var(--office-space-1-5);\n}\nh3 {\n	margin: 0;\n	font-size: var(--office-font-size-md);\n	font-weight: var(--office-font-weight-bold);\n}\n.options-row {\n	display: flex;\n	flex: none;\n	align-items: end;\n	gap: var(--office-space-1-5);\n	padding: 0 var(--office-space-2-5) var(--office-space-1-5);\n}\n.picker {\n	flex: 1;\n	min-width: 0;\n}\n.picker > span,\n.caption {\n	display: block;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\n.picker > span {\n	margin-bottom: var(--office-space-1);\n}\n.tabs {\n	display: flex;\n	flex: none;\n	gap: var(--office-space-px);\n	padding: 0 var(--office-space-2-5);\n	overflow-x: auto;\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n.tabs button {\n	padding: var(--office-space-1-5) var(--office-space-2);\n	border: 0;\n	border-bottom: var(--office-border-width-thick) solid transparent;\n	border-radius: 0;\n	background: transparent;\n	white-space: nowrap;\n}\n.tabs button[aria-selected='true'] {\n	border-bottom-color: var(--office-accent);\n	font-weight: var(--office-font-weight-bold);\n}\n.content {\n	display: grid;\n	flex: 1;\n	align-content: start;\n	gap: var(--office-space-1);\n	min-height: 0;\n	padding: var(--office-space-1-5) var(--office-space-2-5) var(--office-space-3);\n	overflow-y: auto;\n}\nsection {\n	padding-bottom: var(--office-space-1-5);\n	border-bottom: var(--office-border-width) solid var(--office-border);\n}\n.section-toggle {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n	width: 100%;\n	padding: var(--office-space-1-5) 0;\n	border: 0;\n	background: transparent;\n	font-weight: var(--office-font-weight-bold);\n	text-align: left;\n}\n.section-toggle::before {\n	content: '';\n	width: 0;\n	height: 0;\n	border-top: var(--office-space-1) solid transparent;\n	border-bottom: var(--office-space-1) solid transparent;\n	border-left: var(--office-space-1-5) solid currentColor;\n	transition: transform 0.12s;\n}\n.section-toggle[aria-expanded='true']::before {\n	transform: rotate(90deg);\n}\n.fields {\n	display: grid;\n	gap: var(--office-space-1-5);\n	padding: var(--office-space-px) 0 var(--office-space-1) var(--office-space-3);\n}\n.fields[hidden] {\n	display: none;\n}\n.radio-group {\n	display: grid;\n	gap: var(--office-space-1);\n	margin: 0;\n	padding: 0;\n	border: 0;\n}\n.radio-group legend {\n	position: absolute;\n	width: var(--office-space-px);\n	height: var(--office-space-px);\n	overflow: hidden;\n	clip: rect(0 0 0 0);\n}\n.choice,\n.field-checkbox {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n}\n.choice .caption,\n.field-checkbox .caption {\n	color: inherit;\n	font-size: var(--office-font-size-sm);\n}\n.field {\n	display: grid;\n	grid-template-columns: 1fr minmax(0, calc(var(--office-space-6) * 4 + var(--office-space-4))) auto;\n	align-items: center;\n	gap: var(--office-space-1-5);\n}\n.field-checkbox {\n	display: flex;\n}\n.unit {\n	min-width: var(--office-space-3-5);\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\n.slider {\n	display: grid;\n	padding-right: var(--office-space-5);\n}\n.slider input {\n	width: 100%;\n}\nselect,\ninput[type='number'],\ninput[type='text'] {\n	display: block;\n	width: 100%;\n	min-height: var(--office-input-height);\n	padding: var(--office-space-1) var(--office-space-1-5);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-surface);\n	color: inherit;\n	font: inherit;\n}\ninput[type='color'] {\n	justify-self: start;\n	width: calc(var(--office-space-5) * 2 + var(--office-space-1));\n	height: var(--office-input-height);\n	padding: 0;\n	border: var(--office-border-width) solid var(--office-border);\n	background: transparent;\n}\nbutton {\n	padding: var(--office-space-1) var(--office-space-2);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-surface);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-selected);\n}\nbutton:disabled,\ninput:disabled,\nselect:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\n.text-options[aria-pressed='true'] {\n	border-color: var(--office-accent);\n	background: var(--office-selected);\n}\n.file-button {\n	justify-self: start;\n}\n.close {\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	border: 0;\n	background: transparent;\n	font-size: var(--office-font-size-xl);\n	line-height: 1;\n}\n.note {\n	margin: var(--office-space-px) 0 0;\n	color: var(--office-muted-foreground);\n	font-size: var(--office-font-size-xs);\n}\nbutton:focus-visible,\ninput:focus-visible,\nselect:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: var(--office-focus-offset);\n}\n@media (pointer: coarse), (max-width: 767px) {\n	select,\n	input[type='number'],\n	input[type='text'],\n	.close,\n	.tabs button {\n		min-height: var(--office-target-size-touch);\n	}\n	.choice,\n	.field-checkbox {\n		min-height: var(--office-control-height-lg);\n	}\n}\n@media (forced-colors: active) {\n	section,\n	button,\n	input,\n	select {\n		border-color: CanvasText;\n	}\n	.tabs button[aria-selected='true'] {\n		border-bottom-color: Highlight;\n	}\n}\n";
+
+// src/chart/format-pane-common.ts
+var t = (key, fallback) => ({
+  key: `chartFormat.${key}`,
+  fallback
+});
+var choice = (value, key, fallback, extra) => ({ value, label: t(key, fallback), ...extra });
+var pct = (value) => Math.round(value ?? 0);
+function hexForInput(color, fallback = "#000000") {
+  if (color && /^#?[0-9a-f]{6}$/iu.test(color)) {
+    return `#${color.replace(/^#/u, "").toUpperCase()}`;
+  }
+  return fallback;
+}
+var fill = (text2, params) => text2.replace(/\{\{(\w+)\}\}/gu, (_, name) => String(params?.[name] ?? ""));
+function translateChartFormatText(value, tr) {
+  const nested = Object.entries(value.paramTexts ?? {}).map(
+    ([name, caption2]) => [name, translateChartFormatText(caption2, tr)]
+  );
+  const params = value.params || nested.length > 0 ? { ...value.params, ...Object.fromEntries(nested) } : void 0;
+  const translated = tr(value.key, params, value.fallback);
+  return fill(translated && translated !== value.key ? translated : value.fallback, params);
+}
+function rangeControl(options) {
+  return html`<input
+		class="office-range-control"
+		type="range"
+		aria-label=${options.label}
+		aria-valuetext=${options.valueText}
+		min=${options.min}
+		max=${options.max}
+		step=${options.step ?? 1}
+		.value=${String(options.value)}
+		?disabled=${options.disabled}
+		@input=${(event) => {
+    if (!options.disabled) options.onInput(event.target.valueAsNumber);
+  }}
+		@change=${() => {
+    if (!options.disabled) options.onChange();
+  }}
+	/>`;
+}
+
+// src/chart/format-pane-fields.ts
+var caption = (text2) => html`<span class="caption">${text2}</span>`;
+function readValue(field, input) {
+  if (field.kind === "checkbox") return Boolean(input.checked);
+  if (field.kind === "number") return input.value.trim() === "" ? "" : Number(input.value);
+  return input.value;
+}
+function radioGroup(field, ctx) {
+  const tag = unsafeStatic(ctx.tags.radio);
+  return html`<fieldset class="radio-group" data-chart-format-field=${field.id}
+		><legend>${ctx.tr(field.label)}</legend>${field.choices.map(
+    (choice2) => html`<label class="choice" title=${choice2.hint ? ctx.tr(choice2.hint) : nothing}
+					>${html$1`<${tag}
+					name=${`cfp-${field.id}`}
+					.value=${choice2.value}
+					data-chart-format-choice=${choice2.value}
+					.checked=${live(choice2.value === field.value)}
+					?disabled=${ctx.locked || Boolean(choice2.disabled) || Boolean(field.disabled)}
+					@change=${(event) => {
+      if (event.currentTarget.checked) ctx.change(field.id, choice2.value);
+    }}
+				></${tag}>`}${caption(ctx.tr(choice2.label))}</label
+				>`
+  )}</fieldset
+	>`;
+}
+function fileField(field, ctx) {
+  const pick = (event) => {
+    const input = event.currentTarget;
+    const file = input.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      if (typeof reader.result === "string") ctx.change(field.id, reader.result);
+    });
+    reader.readAsDataURL(file);
+    input.value = "";
+  };
+  return html`<div
+		class="field field-file"
+		data-chart-format-field=${field.id}
+		data-chart-format-file-set=${String(field.value)}
+		>${caption(ctx.tr(field.label))}<button
+			type="button"
+			class="file-button"
+			?disabled=${ctx.locked || Boolean(field.disabled)}
+			@click=${(event) => event.currentTarget.nextElementSibling?.click()}
+			>${ctx.tr(field.button)}</button
+		><input type="file" accept=${field.accept} hidden @change=${pick}
+	/></div>`;
+}
+function control(field, ctx, label2) {
+  const disabled = ctx.locked || Boolean(field.disabled);
+  const commit = (event) => ctx.change(field.id, readValue(field, event.currentTarget));
+  if (field.kind === "select") {
+    const tag = unsafeStatic(ctx.tags.select);
+    return html$1`<${tag}
+			aria-label=${label2}
+			data-value=${field.value}
+			?disabled=${disabled}
+			@change=${commit}
+		>${field.choices.map(
+      (choice2) => html`<option
+					value=${choice2.value}
+					.selected=${live(choice2.value === field.value)}
+					?disabled=${Boolean(choice2.disabled)}
+					>${ctx.tr(choice2.label)}</option
+				>`
+    )}</${tag}>`;
+  }
+  if (field.kind === "checkbox") {
+    const tag = unsafeStatic(ctx.tags.checkbox);
+    return html$1`<${tag}
+			aria-label=${label2}
+			.checked=${live(field.value)}
+			?disabled=${disabled}
+			@change=${commit}
+		></${tag}>`;
+  }
+  const number2 = field.kind === "number" ? field : void 0;
+  return html`<input
+		type=${field.kind === "color" ? "color" : number2 ? "number" : "text"}
+		aria-label=${label2}
+		data-value=${String(field.value)}
+		min=${number2?.min ?? nothing}
+		max=${number2?.max ?? nothing}
+		step=${number2 ? number2.step ?? "any" : nothing}
+		placeholder=${number2?.auto ? ctx.autoLabel : nothing}
+		inputmode=${number2 ? "decimal" : nothing}
+		?disabled=${disabled}
+		@change=${commit}
+	/>`;
+}
+function slider(field, ctx, label2) {
+  const value = field.value === "" ? field.min ?? 0 : field.value;
+  let last = value;
+  return html`<div class="slider" data-chart-format-slider=${field.id}
+		>${rangeControl({
+    label: label2,
+    value,
+    valueText: `${value}${field.unit ?? ""}`,
+    min: field.min ?? 0,
+    max: field.max ?? 100,
+    ...field.step === void 0 ? {} : { step: field.step },
+    disabled: ctx.locked || Boolean(field.disabled),
+    onInput: (next) => {
+      last = next;
+      ctx.preview(field.id, next, `${next}${field.unit ?? ""}`);
+    },
+    onChange: () => ctx.change(field.id, last)
+  })}</div
+	>`;
+}
+function fieldTemplate(field, ctx) {
+  if (field.kind === "radio") return radioGroup(field, ctx);
+  if (field.kind === "file") return fileField(field, ctx);
+  const label2 = ctx.tr(field.label);
+  const title = field.hint ? ctx.tr(field.hint) : nothing;
+  if (field.kind === "checkbox")
+    return html`<label
+			class="field field-checkbox"
+			data-chart-format-field=${field.id}
+			title=${title}
+			>${control(field, ctx, label2)}${caption(label2)}</label
+		>`;
+  const unit = field.kind === "number" && field.unit ? html`<span class="unit">${field.unit}</span>` : nothing;
+  return html`<label
+			class="field field-${field.kind}"
+			data-chart-format-field=${field.id}
+			title=${title}
+			>${caption(label2)}${control(field, ctx, label2)}${unit}</label
+		>${field.kind === "number" && field.slider ? slider(field, ctx, label2) : nothing}`;
+}
+
+// src/chart/format-pane-intent.ts
+var number = (value) => {
+  if (value === "" || typeof value === "boolean") return null;
+  const n = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(n) ? n : null;
+};
+function drawingColorFromHex(hex, transparency3 = 0) {
+  const value = /^#?([0-9a-f]{6})$/iu.exec(hex)?.[1];
+  if (!value) return null;
+  const alpha = Math.round((100 - Math.min(100, Math.max(0, transparency3))) * 1e3);
+  return {
+    kind: "srgb",
+    value: value.toUpperCase(),
+    transforms: alpha < 1e5 ? [{ name: "alpha", value: String(alpha) }] : []
+  };
+}
+function drawingGradientFrom(gradient) {
+  const stops = gradient.stops.flatMap((stop) => {
+    const color = drawingColorFromHex(stop.color, 100 - (stop.opacity ?? 1) * 100);
+    return color ? [{ position: stop.position, color }] : [];
+  });
+  if (stops.length < 2) return null;
+  return gradient.type === "radial" ? { kind: "gradient", stops, path: gradient.path ?? "circle" } : { kind: "gradient", stops, angle: gradient.angle ?? 0, scaled: gradient.scaled ?? false };
+}
+function defaultPaneGradient(color = "#4472C4") {
+  return {
+    type: "linear",
+    angle: 90,
+    stops: [
+      { color, position: 0 },
+      { color: "#FFFFFF", position: 100 }
+    ]
+  };
+}
+var GRADIENT = /^(fill|line)\.gradient(Type|Start|End|Angle)$/u;
+function gradientEdit(current, part, value) {
+  const stops = current.stops.map((stop) => ({ ...stop }));
+  switch (part) {
+    case "Type":
+      return value === "linear" || value === "radial" ? { ...current, type: value, stops } : null;
+    case "Start":
+    case "End": {
+      const stop = part === "Start" ? stops[0] : stops[stops.length - 1];
+      if (!stop || !drawingColorFromHex(String(value))) return null;
+      stop.color = String(value);
+      return { ...current, stops };
+    }
+    default: {
+      const n = number(value);
+      return n === null ? null : { ...current, stops, angle: (n % 360 + 360) % 360 };
+    }
+  }
+}
+function paintIntent(view, target, field, value) {
+  const n = number(value);
+  const text2 = String(value);
+  const gradient = GRADIENT.exec(field);
+  if (gradient) {
+    const paint = gradient[1] === "fill" ? view.fill : view.line;
+    const next = gradientEdit(
+      paint.gradient ?? defaultPaneGradient(paint.color),
+      gradient[2],
+      value
+    );
+    const fill3 = next && drawingGradientFrom(next);
+    if (!fill3) return null;
+    return gradient[1] === "fill" ? { op: "fill", target, fill: fill3 } : { op: "line", target, line: { fill: fill3 }, merge: true };
+  }
+  switch (field) {
+    case "fill.kind": {
+      if (text2 === "none") return { op: "fill", target, fill: { kind: "none" } };
+      if (text2 === "automatic") return { op: "fill", target, fill: void 0 };
+      if (text2 === "solid") {
+        const color = drawingColorFromHex(view.fill.color ?? "#4472C4", view.fill.transparency);
+        return color && { op: "fill", target, fill: { kind: "solid", color } };
+      }
+      if (text2 === "gradient") {
+        const fill3 = drawingGradientFrom(
+          view.fill.gradient ?? defaultPaneGradient(view.fill.color)
+        );
+        return fill3 && { op: "fill", target, fill: fill3 };
+      }
+      return null;
+    }
+    case "fill.color": {
+      const color = drawingColorFromHex(text2, view.fill.transparency);
+      return color && { op: "fill", target, fill: { kind: "solid", color } };
+    }
+    case "fill.transparency":
+    case "line.transparency":
+      return n === null || n < 0 || n > 100 ? null : {
+        op: "transparency",
+        target,
+        paint: field === "fill.transparency" ? "fill" : "line",
+        percent: n
+      };
+    case "line.kind": {
+      if (text2 === "none")
+        return { op: "line", target, line: { fill: { kind: "none" } }, merge: true };
+      if (text2 === "automatic") return { op: "line", target, line: void 0 };
+      if (text2 === "solid") {
+        const color = drawingColorFromHex(view.line.color ?? "#000000", view.line.transparency);
+        return color && { op: "line", target, line: { fill: { kind: "solid", color } }, merge: true };
+      }
+      if (text2 === "gradient") {
+        const fill3 = drawingGradientFrom(
+          view.line.gradient ?? defaultPaneGradient(view.line.color)
+        );
+        return fill3 && { op: "line", target, line: { fill: fill3 }, merge: true };
+      }
+      return null;
+    }
+    case "line.color": {
+      const color = drawingColorFromHex(text2, view.line.transparency);
+      return color && { op: "line", target, line: { fill: { kind: "solid", color } }, merge: true };
+    }
+    case "line.width":
+      return n === null || n < 0 || n > 1584 ? null : { op: "line", target, line: { widthEmu: Math.round(n * 12700) }, merge: true };
+    case "line.dash":
+      return { op: "line", target, line: { dash: text2 }, merge: true };
+    case "line.cap":
+      return { op: "line", target, line: { cap: text2 }, merge: true };
+    default:
+      return null;
+  }
+}
+var DISPLAY_UNITS = /* @__PURE__ */ new Set([
+  "hundreds",
+  "thousands",
+  "tenThousands",
+  "hundredThousands",
+  "millions",
+  "tenMillions",
+  "hundredMillions",
+  "billions",
+  "trillions"
+]);
+var one = (key, value) => {
+  const edit = {};
+  edit[key] = value;
+  return edit;
+};
+function axisEdit(field, value) {
+  const n = number(value);
+  const text2 = String(value);
+  switch (field) {
+    case "axis.min":
+    case "axis.max": {
+      const key = field === "axis.min" ? "min" : "max";
+      return value === "" ? one(key, null) : n === null ? null : one(key, n);
+    }
+    case "axis.majorUnit":
+    case "axis.minorUnit": {
+      const key = field === "axis.majorUnit" ? "majorUnit" : "minorUnit";
+      if (value === "") return one(key, null);
+      return n === null || n <= 0 ? null : one(key, n);
+    }
+    case "axis.crosses":
+      return text2 === "autoZero" || text2 === "min" || text2 === "max" ? { crosses: text2 } : text2 === "value" ? { crosses: 0 } : null;
+    case "axis.crossesAt":
+      return n === null ? null : { crosses: n };
+    case "axis.displayUnits":
+      return text2 === "none" ? { displayUnits: null } : DISPLAY_UNITS.has(text2) ? { displayUnits: text2 } : null;
+    case "axis.logScale":
+      return { logBase: value ? 10 : null };
+    case "axis.logBase":
+      return n === null || n < 2 || n > 1e3 ? null : { logBase: n };
+    case "axis.reverseOrder":
+      return { reverse: Boolean(value) };
+    case "axis.majorTickMark":
+    case "axis.minorTickMark":
+      return text2 === "none" || text2 === "in" || text2 === "out" || text2 === "cross" ? one(field === "axis.majorTickMark" ? "majorTickMark" : "minorTickMark", text2) : null;
+    case "axis.tickLabelPosition":
+      return text2 === "nextTo" || text2 === "high" || text2 === "low" || text2 === "none" ? { tickLabelPosition: text2 } : null;
+    case "axis.numberFormat":
+      return { numberFormat: text2.trim() };
+    default:
+      return null;
+  }
+}
+var LABEL_SWITCHES = {
+  "labels.showSeriesName": "showSeriesName",
+  "labels.showCategory": "showCategoryName",
+  "labels.showValue": "showValue",
+  "labels.showPercent": "showPercent",
+  "labels.showLegendKey": "showLegendKey"
+};
+var SPACING = {
+  "series.gapWidth": ["gapWidth", 0, 500],
+  "series.overlap": ["overlap", -100, 100],
+  "series.firstSliceAngle": ["firstSliceAngle", 0, 360],
+  "series.holeSize": ["holeSize", 10, 90]
+};
+function chartFormatFieldIntent(view, target, field, value) {
+  if (field.startsWith("fill.") || field.startsWith("line."))
+    return paintIntent(view, target, field, value);
+  if (field.startsWith("axis.")) {
+    if (target.kind !== "axis") return null;
+    const edit = axisEdit(field, value);
+    return edit && { op: "axis", axisIndex: target.axisIndex, edit };
+  }
+  if (field === "legend.position")
+    return ["t", "b", "l", "r", "tr"].includes(String(value)) ? { op: "legend", edit: { position: String(value) } } : null;
+  if (field === "legend.noOverlap") return { op: "legend", edit: { overlay: !value } };
+  if (field.startsWith("labels.") && target.kind === "dataLabels") {
+    const seriesIndex = target.seriesIndex;
+    const scope = seriesIndex === void 0 ? {} : { seriesIndex };
+    const key = LABEL_SWITCHES[field];
+    if (key) {
+      const edit = {};
+      edit[key] = Boolean(value);
+      return { op: "dataLabels", ...scope, edit };
+    }
+    return field === "labels.position" && value !== "" ? { op: "dataLabels", ...scope, edit: { position: String(value) } } : null;
+  }
+  const spacing = SPACING[field];
+  if (spacing && target.kind === "series") {
+    const n = number(value);
+    const [key, min, max] = spacing;
+    if (n === null || !Number.isInteger(n) || n < min || n > max) return null;
+    const edit = {};
+    edit[key] = n;
+    return { op: "groupOptions", seriesIndex: target.seriesIndex, edit };
+  }
+  return null;
+}
+
+// src/chart/format-pane-3d.ts
+var CHART_BEVEL_TYPES = [
+  "circle",
+  "relaxedInset",
+  "cross",
+  "coolSlant",
+  "angle",
+  "softRound",
+  "convex",
+  "slope",
+  "divot",
+  "riblet",
+  "hardEdge",
+  "artDeco"
+];
+var MATERIALS = [
+  "warmMatte",
+  "matte",
+  "plastic",
+  "metal",
+  "dkEdge",
+  "softEdge",
+  "flat",
+  "softmetal",
+  "clear",
+  "powder",
+  "translucentPowder"
+];
+var LIGHTING = [
+  ["threePt", "Three Point"],
+  ["balanced", "Balanced"],
+  ["soft", "Soft"],
+  ["harsh", "Harsh"],
+  ["flood", "Flood"],
+  ["contrasting", "Contrasting"],
+  ["flat", "Flat"],
+  ["twoPt", "Two Point"],
+  ["brightRoom", "Bright Room"]
+];
+var label = (key, fallback) => ({ key, fallback });
+var bevelChoices = () => [
+  { value: "none", label: label("pptx.bevelTypes.none", "None") },
+  ...CHART_BEVEL_TYPES.map((type) => ({
+    value: type,
+    label: label(`pptx.bevelTypes.${type}`, type)
+  }))
+];
+var size = (id, key, fallback, value) => ({
+  id,
+  kind: "number",
+  label: t(key, fallback),
+  value: Math.round(value * 100) / 100,
+  min: 0,
+  max: 1584,
+  step: 0.5,
+  unit: "pt"
+});
+function bevelFields(which, bevel) {
+  const fields = [
+    {
+      id: `threeD.bevel${which}`,
+      kind: "select",
+      label: which === "Top" ? t("bevelTop", "Top bevel") : t("bevelBottom", "Bottom bevel"),
+      value: bevel?.type ?? "none",
+      choices: bevelChoices()
+    }
+  ];
+  if (bevel) {
+    fields.push(
+      size(`threeD.bevel${which}Width`, "width", "Width", bevel.width),
+      size(`threeD.bevel${which}Height`, "height", "Height", bevel.height)
+    );
+  }
+  return fields;
+}
+function threeDSection(threeD) {
+  return {
+    id: "threeD",
+    title: t("section.threeD", "3-D Format"),
+    fields: [
+      ...bevelFields("Top", threeD.bevelTop),
+      ...bevelFields("Bottom", threeD.bevelBottom),
+      {
+        id: "threeD.depthColor",
+        kind: "color",
+        label: t("depthColor", "Depth color"),
+        value: hexForInput(threeD.depth?.color)
+      },
+      size("threeD.depthSize", "depthSize", "Depth size", threeD.depth?.size ?? 0),
+      {
+        id: "threeD.contourColor",
+        kind: "color",
+        label: t("contourColor", "Contour color"),
+        value: hexForInput(threeD.contour?.color)
+      },
+      size("threeD.contourSize", "contourSize", "Contour size", threeD.contour?.size ?? 0),
+      {
+        id: "threeD.material",
+        kind: "select",
+        label: t("material", "Material"),
+        value: threeD.material ?? "warmMatte",
+        choices: MATERIALS.map((material) => ({
+          value: material,
+          label: label(`pptx.material.${material}`, material)
+        }))
+      },
+      {
+        id: "threeD.lighting",
+        kind: "select",
+        label: t("lighting", "Lighting"),
+        value: threeD.lighting ?? "threePt",
+        choices: LIGHTING.map(([value, fallback]) => ({
+          value,
+          label: t(`lighting.${value}`, fallback)
+        }))
+      }
+    ],
+    note: t(
+      "threeDNote",
+      "Bevels and material are drawn as shading on the slide; depth, contour and lighting are saved for PowerPoint and drawn approximately."
+    )
+  };
+}
+
+// src/chart/format-pane-effects.ts
+var num = (id, key, fallback, value, max, unit, step2 = 1) => ({
+  id,
+  kind: "number",
+  label: t(key, fallback),
+  value: Math.round(value * 100) / 100,
+  min: 0,
+  max,
+  step: step2,
+  unit
+});
+function shadowSection(prefix, shadow) {
+  const section = {
+    id: `${prefix}shadow`,
+    title: t("section.shadow", "Shadow"),
+    fields: [
+      {
+        id: `${prefix}shadow.enabled`,
+        kind: "checkbox",
+        label: t("shadow.enabled", "Outer shadow"),
+        value: Boolean(shadow)
+      }
+    ]
+  };
+  if (shadow) {
+    section.fields.push(
+      {
+        id: `${prefix}shadow.color`,
+        kind: "color",
+        label: t("color", "Color"),
+        value: hexForInput(shadow.color)
+      },
+      num(
+        `${prefix}shadow.transparency`,
+        "transparency",
+        "Transparency",
+        shadow.transparency ?? 0,
+        100,
+        "%"
+      ),
+      num(`${prefix}shadow.blur`, "blur", "Blur", shadow.blur, 100, "pt", 0.5),
+      num(`${prefix}shadow.angle`, "angle", "Angle", shadow.angle, 359, "\xB0"),
+      num(`${prefix}shadow.distance`, "distance", "Distance", shadow.distance, 200, "pt", 0.5)
+    );
+  }
+  return section;
+}
+function glowSection(prefix, glow) {
+  const section = {
+    id: `${prefix}glow`,
+    title: t("section.glow", "Glow"),
+    fields: [
+      {
+        id: `${prefix}glow.enabled`,
+        kind: "checkbox",
+        label: t("glow.enabled", "Glow"),
+        value: Boolean(glow)
+      }
+    ]
+  };
+  if (glow) {
+    section.fields.push(
+      {
+        id: `${prefix}glow.color`,
+        kind: "color",
+        label: t("color", "Color"),
+        value: hexForInput(glow.color)
+      },
+      num(`${prefix}glow.radius`, "size", "Size", glow.radius, 150, "pt", 0.5),
+      num(
+        `${prefix}glow.transparency`,
+        "transparency",
+        "Transparency",
+        glow.transparency ?? 0,
+        100,
+        "%"
+      )
+    );
+  }
+  return section;
+}
+function effectsSections(view) {
+  const effects = view.effects ?? {};
+  return [
+    shadowSection("", effects.shadow),
+    glowSection("", effects.glow),
+    {
+      id: "softEdges",
+      title: t("section.softEdges", "Soft Edges"),
+      fields: [num("softEdge.size", "size", "Size", effects.softEdge ?? 0, 100, "pt", 0.5)]
+    },
+    ...view.support.threeD && view.threeD ? [threeDSection(view.threeD)] : []
+  ];
+}
+
+// src/chart/format-pane-fill-kinds.ts
+function gradientFields(prefix, gradient) {
+  const stops = gradient.stops;
+  const fields = [
+    {
+      id: `${prefix}.gradientType`,
+      kind: "select",
+      label: t("gradientType", "Type"),
+      value: gradient.type,
+      choices: [
+        choice("linear", "gradientType.linear", "Linear"),
+        choice("radial", "gradientType.radial", "Radial")
+      ]
+    },
+    {
+      id: `${prefix}.gradientStart`,
+      kind: "color",
+      label: t("gradientStart", "Start color"),
+      value: hexForInput(stops[0]?.color, "#FFFFFF")
+    },
+    {
+      id: `${prefix}.gradientEnd`,
+      kind: "color",
+      label: t("gradientEnd", "End color"),
+      value: hexForInput(stops[stops.length - 1]?.color)
+    }
+  ];
+  if (gradient.type === "linear") {
+    fields.push({
+      id: `${prefix}.gradientAngle`,
+      kind: "number",
+      label: t("angle", "Angle"),
+      value: Math.round(gradient.angle ?? 0),
+      min: 0,
+      max: 359,
+      step: 1,
+      unit: "\xB0"
+    });
+  }
+  return fields;
+}
+function patternFields(pattern, presets) {
+  return [
+    {
+      id: "fill.patternPreset",
+      kind: "select",
+      label: t("pattern", "Pattern"),
+      value: pattern.preset,
+      choices: [...presets]
+    },
+    {
+      id: "fill.patternForeground",
+      kind: "color",
+      label: t("foreground", "Foreground"),
+      value: hexForInput(pattern.foreground)
+    },
+    {
+      id: "fill.patternBackground",
+      kind: "color",
+      label: t("background", "Background"),
+      value: hexForInput(pattern.background, "#FFFFFF")
+    }
+  ];
+}
+function pictureFields(picture) {
+  const fields = [
+    {
+      id: "fill.picture",
+      kind: "file",
+      label: t("pictureSource", "Picture source"),
+      accept: "image/png,image/jpeg,image/gif,image/bmp",
+      button: t("insertPicture", "Insert..."),
+      value: Boolean(picture?.src || picture?.relId)
+    }
+  ];
+  if (picture?.src || picture?.relId) {
+    fields.push(
+      {
+        id: "fill.pictureTransparency",
+        kind: "number",
+        label: t("transparency", "Transparency"),
+        value: Math.round(picture.transparency ?? 0),
+        min: 0,
+        max: 100,
+        step: 1,
+        unit: "%"
+      },
+      {
+        id: "fill.pictureTile",
+        kind: "checkbox",
+        label: t("pictureTile", "Tile picture as texture"),
+        value: Boolean(picture.tile)
+      }
+    );
+  }
+  return fields;
+}
+
+// src/chart/format-pane-fill-line.ts
+var DASHES = [
+  ["solid", "Solid"],
+  ["sysDot", "Round Dot"],
+  ["sysDash", "Square Dot"],
+  ["dash", "Dash"],
+  ["dashDot", "Dash Dot"],
+  ["lgDash", "Long Dash"],
+  ["lgDashDot", "Long Dash Dot"],
+  ["lgDashDotDot", "Long Dash Dot Dot"]
+];
+var COMPOUNDS = [
+  ["sng", "Single"],
+  ["dbl", "Double"],
+  ["thickThin", "Thick Thin"],
+  ["thinThick", "Thin Thick"],
+  ["tri", "Triple"]
+];
+var CAPS = [
+  ["flat", "Flat"],
+  ["sq", "Square"],
+  ["rnd", "Round"]
+];
+var JOINS = [
+  ["round", "Round"],
+  ["bevel", "Bevel"],
+  ["miter", "Miter"]
+];
+var ARROWS = [
+  ["none", "None"],
+  ["arrow", "Open Arrow"],
+  ["triangle", "Arrow"],
+  ["stealth", "Stealth Arrow"],
+  ["diamond", "Diamond Arrow"],
+  ["oval", "Oval Arrow"]
+];
+var choices = (prefix, list) => list.map(([value, label2]) => choice(value, `${prefix}.${value}`, label2));
+function fillSection(view, source) {
+  if (!view.support.fill) {
+    return void 0;
+  }
+  if (source.slots?.fill) {
+    return { id: "fill", title: t("section.fill", "Fill"), fields: [], slot: source.slots.fill };
+  }
+  const kind = view.fill.kind;
+  const presets = source.patternPresets ?? [];
+  const support = view.support;
+  const section = {
+    id: "fill",
+    title: t("section.fill", "Fill"),
+    fields: [
+      {
+        id: "fill.kind",
+        kind: "radio",
+        label: t("section.fill", "Fill"),
+        value: kind,
+        choices: [
+          choice("none", "fill.none", "No fill"),
+          choice("solid", "fill.solid", "Solid fill"),
+          ...support.gradient ? [choice("gradient", "fill.gradient", "Gradient fill")] : [],
+          ...support.picture ? [choice("picture", "fill.picture", "Picture or texture fill")] : [],
+          ...support.pattern && presets.length > 0 ? [choice("pattern", "fill.pattern", "Pattern fill")] : [],
+          choice("automatic", "fill.automatic", "Automatic")
+        ]
+      }
+    ]
+  };
+  if (kind === "solid") {
+    section.fields.push(
+      {
+        id: "fill.color",
+        kind: "color",
+        label: t("color", "Color"),
+        value: hexForInput(view.fill.color)
+      },
+      {
+        id: "fill.transparency",
+        kind: "number",
+        label: t("transparency", "Transparency"),
+        value: pct(view.fill.transparency),
+        min: 0,
+        max: 100,
+        step: 1,
+        unit: "%"
+      }
+    );
+  } else if (kind === "gradient" && view.fill.gradient) {
+    section.fields.push(...gradientFields("fill", view.fill.gradient));
+  } else if (kind === "pattern" && view.fill.pattern) {
+    section.fields.push(...patternFields(view.fill.pattern, presets));
+  } else if (kind === "picture") {
+    section.fields.push(...pictureFields(view.fill.picture));
+  }
+  return section;
+}
+function lineSection(view, target) {
+  const isLine = !view.support.fill;
+  const line = view.line;
+  const details = view.support.lineDetails !== false;
+  const section = {
+    id: "line",
+    title: isLine ? t("section.line", "Line") : t("section.border", "Border"),
+    fields: [
+      {
+        id: "line.kind",
+        kind: "radio",
+        label: isLine ? t("section.line", "Line") : t("section.border", "Border"),
+        value: line.kind,
+        choices: [
+          choice("none", "line.none", "No line"),
+          choice("solid", "line.solid", "Solid line"),
+          ...details ? [choice("gradient", "line.gradient", "Gradient line")] : [],
+          choice("automatic", "fill.automatic", "Automatic")
+        ]
+      }
+    ]
+  };
+  if (line.kind === "none") {
+    return section;
+  }
+  if (line.kind === "solid") {
+    section.fields.push(
+      {
+        id: "line.color",
+        kind: "color",
+        label: t("color", "Color"),
+        value: hexForInput(line.color)
+      },
+      {
+        id: "line.transparency",
+        kind: "number",
+        label: t("transparency", "Transparency"),
+        value: pct(line.transparency),
+        min: 0,
+        max: 100,
+        step: 1,
+        unit: "%"
+      }
+    );
+  } else if (line.kind === "gradient" && line.gradient) {
+    section.fields.push(...gradientFields("line", line.gradient));
+  }
+  section.fields.push({
+    id: "line.width",
+    kind: "number",
+    label: t("width", "Width"),
+    value: line.width ?? "",
+    min: 0,
+    max: 1584,
+    step: 0.25,
+    unit: "pt",
+    auto: true
+  });
+  if (details) {
+    section.fields.push({
+      id: "line.compound",
+      kind: "select",
+      label: t("compound", "Compound type"),
+      value: line.compound ?? "sng",
+      choices: choices("compound", COMPOUNDS)
+    });
+  }
+  section.fields.push(
+    {
+      id: "line.dash",
+      kind: "select",
+      label: t("dash", "Dash type"),
+      value: line.dash ?? "solid",
+      choices: choices("dash", DASHES)
+    },
+    {
+      id: "line.cap",
+      kind: "select",
+      label: t("cap", "Cap type"),
+      value: line.cap ?? "flat",
+      choices: choices("cap", CAPS)
+    }
+  );
+  if (!details) {
+    return section;
+  }
+  section.fields.push({
+    id: "line.join",
+    kind: "select",
+    label: t("join", "Join type"),
+    value: line.join ?? "round",
+    choices: choices("join", JOINS)
+  });
+  if (isLine || target.kind === "axis") {
+    section.fields.push(
+      {
+        id: "line.beginArrow",
+        kind: "select",
+        label: t("beginArrow", "Begin Arrow type"),
+        value: line.beginArrow ?? "none",
+        choices: choices("arrow", ARROWS)
+      },
+      {
+        id: "line.endArrow",
+        kind: "select",
+        label: t("endArrow", "End Arrow type"),
+        value: line.endArrow ?? "none",
+        choices: choices("arrow", ARROWS)
+      }
+    );
+  }
+  return section;
+}
+function fillLineSections(view, target, source = {}) {
+  const fill3 = fillSection(view, source);
+  const line = view.support.line === false ? [] : [lineSection(view, target)];
+  return [...fill3 ? [fill3] : [], ...line];
+}
+
+// src/chart/format-pane-axis.ts
+var auto = (id, key, fallback, value, extra = {}) => ({
+  id,
+  kind: "number",
+  label: t(key, fallback),
+  value: value ?? "",
+  auto: true,
+  ...extra
+});
+var TICKS = [
+  ["none", "None"],
+  ["in", "Inside"],
+  ["out", "Outside"],
+  ["cross", "Cross"]
+];
+var tickChoices = () => TICKS.map(([value, label2]) => choice(value, `tick.${value}`, label2));
+function axisOptions(axis) {
+  const value = axis.kind === "val" || axis.kind === "date";
+  const fields = [];
+  if (value) {
+    fields.push(
+      auto("axis.min", "minimum", "Minimum", axis.min),
+      auto("axis.max", "maximum", "Maximum", axis.max),
+      auto("axis.majorUnit", "majorUnit", "Major unit", axis.majorUnit, { min: 0 }),
+      auto("axis.minorUnit", "minorUnit", "Minor unit", axis.minorUnit, { min: 0 })
+    );
+  }
+  const crosses = axis.crossesAt !== void 0 ? "value" : axis.crosses ?? "autoZero";
+  fields.push({
+    id: "axis.crosses",
+    kind: "select",
+    label: value ? t("crossesValue", "Horizontal axis crosses") : t("crossesCategory", "Vertical axis crosses"),
+    value: crosses,
+    choices: [
+      choice("autoZero", "crosses.auto", "Automatic"),
+      choice("min", "crosses.min", "At minimum"),
+      choice("max", "crosses.max", "At maximum"),
+      choice("value", "crosses.value", "At value")
+    ]
+  });
+  if (crosses === "value") {
+    fields.push({
+      id: "axis.crossesAt",
+      kind: "number",
+      label: t("crossesAt", "Axis value"),
+      value: axis.crossesAt ?? 0
+    });
+  }
+  if (axis.kind === "val") {
+    fields.push(
+      {
+        id: "axis.displayUnits",
+        kind: "select",
+        label: t("displayUnits", "Display units"),
+        value: axis.displayUnits ?? "none",
+        choices: [
+          choice("none", "units.none", "None"),
+          choice("hundreds", "units.hundreds", "Hundreds"),
+          choice("thousands", "units.thousands", "Thousands"),
+          choice("tenThousands", "units.tenThousands", "Ten Thousands"),
+          choice("hundredThousands", "units.hundredThousands", "Hundred Thousands"),
+          choice("millions", "units.millions", "Millions"),
+          choice("tenMillions", "units.tenMillions", "Ten Millions"),
+          choice("hundredMillions", "units.hundredMillions", "Hundred Millions"),
+          choice("billions", "units.billions", "Billions"),
+          choice("trillions", "units.trillions", "Trillions")
+        ]
+      },
+      {
+        id: "axis.logScale",
+        kind: "checkbox",
+        label: t("logScale", "Logarithmic scale"),
+        value: Boolean(axis.logScale)
+      }
+    );
+    if (axis.logScale) {
+      fields.push({
+        id: "axis.logBase",
+        kind: "number",
+        label: t("logBase", "Base"),
+        value: axis.logBase ?? 10,
+        min: 2,
+        max: 1e3,
+        step: 1
+      });
+    }
+  }
+  fields.push({
+    id: "axis.reverseOrder",
+    kind: "checkbox",
+    label: value ? t("reverseValues", "Values in reverse order") : t("reverseCategories", "Categories in reverse order"),
+    value: axis.reverse
+  });
+  return [
+    { id: "axisOptions", title: t("section.axisOptions", "Axis Options"), fields },
+    {
+      id: "tickMarks",
+      title: t("section.tickMarks", "Tick Marks"),
+      fields: [
+        {
+          id: "axis.majorTickMark",
+          kind: "select",
+          label: t("majorTick", "Major type"),
+          value: axis.majorTickMark ?? "out",
+          choices: tickChoices()
+        },
+        {
+          id: "axis.minorTickMark",
+          kind: "select",
+          label: t("minorTick", "Minor type"),
+          value: axis.minorTickMark ?? "none",
+          choices: tickChoices()
+        }
+      ]
+    },
+    {
+      id: "labels",
+      title: t("section.labels", "Labels"),
+      fields: [
+        {
+          id: "axis.tickLabelPosition",
+          kind: "select",
+          label: t("labelPosition", "Label Position"),
+          value: axis.tickLabelPosition ?? "nextTo",
+          choices: [
+            choice("nextTo", "labelPos.nextTo", "Next to Axis"),
+            choice("high", "labelPos.high", "High"),
+            choice("low", "labelPos.low", "Low"),
+            choice("none", "labelPos.none", "None")
+          ]
+        }
+      ]
+    },
+    {
+      id: "number",
+      title: t("section.number", "Number"),
+      fields: [
+        {
+          id: "axis.numberFormat",
+          kind: "text",
+          label: t("formatCode", "Format Code"),
+          value: axis.numberFormat ?? ""
+        }
+      ]
+    }
+  ];
+}
+
+// src/chart/format-pane-options.ts
+var pctField = (id, key, fallback, value, min, max, unit = "%", slider2 = false) => ({
+  id,
+  kind: "number",
+  label: t(key, fallback),
+  value,
+  min,
+  max,
+  step: 1,
+  unit,
+  ...slider2 ? { slider: slider2 } : {}
+});
+function seriesOptions(series) {
+  const type = series.chartType;
+  const sliders = Boolean(series.sliders);
+  const fields = [];
+  if (series.secondaryAxis !== void 0) {
+    fields.push({
+      id: "series.axis",
+      kind: "radio",
+      label: t("plotSeriesOn", "Plot Series On"),
+      value: series.secondaryAxis ? "secondary" : "primary",
+      choices: [
+        choice("primary", "axis.primary", "Primary Axis"),
+        choice("secondary", "axis.secondary", "Secondary Axis")
+      ]
+    });
+  }
+  if (type === "bar" || type === "bar3D") {
+    if (type === "bar") {
+      fields.push(
+        pctField(
+          "series.overlap",
+          "seriesOverlap",
+          "Series Overlap",
+          series.overlap ?? 0,
+          -100,
+          100,
+          "%",
+          sliders
+        )
+      );
+    }
+    fields.push(
+      pctField(
+        "series.gapWidth",
+        "gapWidth",
+        "Gap Width",
+        series.gapWidth ?? 150,
+        0,
+        500,
+        "%",
+        sliders
+      )
+    );
+  } else if (type === "pie" || type === "pie3D" || type === "doughnut") {
+    fields.push(
+      pctField(
+        "series.firstSliceAngle",
+        "firstSliceAngle",
+        "Angle of first slice",
+        series.firstSliceAngle ?? 0,
+        0,
+        360,
+        "\xB0"
+      )
+    );
+    if (type === "doughnut") {
+      fields.push(
+        pctField(
+          "series.holeSize",
+          "holeSize",
+          "Doughnut Hole Size",
+          series.holeSize ?? 50,
+          10,
+          90
+        )
+      );
+    }
+  } else if (type === "ofPie") {
+    fields.push(
+      pctField("series.gapWidth", "gapWidth", "Gap Width", series.gapWidth ?? 100, 0, 500)
+    );
+  }
+  const section = {
+    id: "seriesOptions",
+    title: t("section.seriesOptions", "Series Options"),
+    fields
+  };
+  if (fields.length === 0) {
+    section.note = t("noSeriesOptions", "This chart type has no series spacing options");
+  }
+  return [section];
+}
+function legendOptions(legend) {
+  const fields = [
+    {
+      id: "legend.position",
+      kind: "radio",
+      label: t("legendPosition", "Legend Position"),
+      value: legend.position ?? "r",
+      choices: [
+        choice("t", "legendPos.top", "Top"),
+        choice("b", "legendPos.bottom", "Bottom"),
+        choice("l", "legendPos.left", "Left"),
+        choice("r", "legendPos.right", "Right"),
+        choice("tr", "legendPos.topRight", "Top Right")
+      ]
+    }
+  ];
+  if (legend.overlaySupported !== false) {
+    fields.push({
+      id: "legend.noOverlap",
+      kind: "checkbox",
+      label: t("legendNoOverlap", "Show the legend without overlapping the chart"),
+      value: legend.overlay === false
+    });
+  }
+  return [{ id: "legendOptions", title: t("section.legendOptions", "Legend Options"), fields }];
+}
+function labelPositions(type) {
+  if (type === "pie" || type === "pie3D" || type === "ofPie") {
+    return [
+      ["ctr", "center", "Center"],
+      ["inEnd", "insideEnd", "Inside End"],
+      ["outEnd", "outsideEnd", "Outside End"],
+      ["bestFit", "bestFit", "Best Fit"]
+    ];
+  }
+  if (type === "bar") {
+    return [
+      ["ctr", "center", "Center"],
+      ["inEnd", "insideEnd", "Inside End"],
+      ["inBase", "insideBase", "Inside Base"],
+      ["outEnd", "outsideEnd", "Outside End"]
+    ];
+  }
+  if (type === "line" || type === "scatter" || type === "bubble") {
+    return [
+      ["ctr", "center", "Center"],
+      ["l", "left", "Left"],
+      ["r", "right", "Right"],
+      ["t", "above", "Above"],
+      ["b", "below", "Below"]
+    ];
+  }
+  return [];
+}
+function labelOptions(labels) {
+  const check = (id, key, fallback, value) => ({
+    id,
+    kind: "checkbox",
+    label: t(key, fallback),
+    value: Boolean(value)
+  });
+  const fields = [
+    check("labels.showSeriesName", "labelSeriesName", "Series Name", labels.showSeriesName),
+    check("labels.showCategory", "labelCategoryName", "Category Name", labels.showCategory),
+    check("labels.showValue", "labelValue", "Value", labels.showValue)
+  ];
+  const type = labels.chartType;
+  if (type === "pie" || type === "pie3D" || type === "doughnut" || type === "ofPie") {
+    fields.push(check("labels.showPercent", "labelPercentage", "Percentage", labels.showPercent));
+  }
+  fields.push(check("labels.showLegendKey", "labelLegendKey", "Legend key", labels.showLegendKey));
+  const positions = labelPositions(type);
+  if (positions.length > 0) {
+    fields.push({
+      id: "labels.position",
+      kind: "radio",
+      label: t("labelPosition", "Label Position"),
+      value: labels.position ?? "",
+      choices: positions.map(
+        ([value, key, fallback]) => choice(value, `dataLabelPos.${key}`, fallback)
+      )
+    });
+  }
+  const note = labels.seriesScoped ? t("labelsOneSeries", "Label options apply to this series only") : t("labelsAllSeries", "Label options apply to every series");
+  return [{ id: "labelOptions", title: t("section.labelOptions", "Label Options"), fields, note }];
+}
+function optionsSections(source, target) {
+  switch (target.kind) {
+    case "series": {
+      const view = source.seriesOptions?.(target.seriesIndex);
+      return view && seriesOptions(view);
+    }
+    case "axis": {
+      const view = source.axisOptions?.(target.axisIndex);
+      return view && axisOptions(view);
+    }
+    case "legend": {
+      const view = source.legendOptions?.();
+      return view && legendOptions(view);
+    }
+    case "dataLabels": {
+      const view = source.labelOptions?.(target.seriesIndex);
+      return view && labelOptions(view);
+    }
+    default:
+      return void 0;
+  }
+}
+var text = (key, fallback, params) => params ? { ...t(key, fallback), params } : t(key, fallback);
+function axisCaption(info) {
+  if (!info) return text("target.axis", "Axis");
+  if (info.kind === "ser") return text("target.depthAxis", "Depth (Series) Axis");
+  const value = info.kind === "val";
+  const orientation = info.vertical ? "Vertical" : "Horizontal";
+  const id = info.secondary ? `secondary${orientation}` : orientation.toLowerCase();
+  const english = `${info.secondary ? "Secondary " : ""}${orientation} (${value ? "Value" : "Category"}) Axis`;
+  return text(`target.axis.${id}${value ? "Value" : "Category"}`, english);
+}
+function chartFormatTargetLabel(target, describe) {
+  switch (target.kind) {
+    case "plotArea":
+      return text("target.plotArea", "Plot Area");
+    case "title":
+      return text("target.title", "Chart Title");
+    case "legend":
+      return text("target.legend", "Legend");
+    case "axis":
+      return axisCaption(describe.axis(target.axisIndex));
+    case "majorGridlines":
+    case "minorGridlines": {
+      const major = target.kind === "majorGridlines";
+      return {
+        ...text(
+          major ? "target.majorGridlines" : "target.minorGridlines",
+          major ? "{{axis}} Major Gridlines" : "{{axis}} Minor Gridlines"
+        ),
+        paramTexts: { axis: axisCaption(describe.axis(target.axisIndex)) }
+      };
+    }
+    case "series":
+      return text("target.series", 'Series "{{name}}"', {
+        name: describe.seriesName(target.seriesIndex)
+      });
+    case "dataLabels":
+      return target.seriesIndex === void 0 ? text("target.dataLabels", "Data Labels") : text("target.seriesDataLabels", 'Series "{{name}}" Data Labels', {
+        name: describe.seriesName(target.seriesIndex)
+      });
+    default:
+      return text("target.chartArea", "Chart Area");
+  }
+}
+function chartFormatPaneTitle(target) {
+  switch (target.kind) {
+    case "plotArea":
+      return text("title.plotArea", "Format Plot Area");
+    case "title":
+      return text("title.title", "Format Chart Title");
+    case "legend":
+      return text("title.legend", "Format Legend");
+    case "axis":
+      return text("title.axis", "Format Axis");
+    case "majorGridlines":
+      return text("title.majorGridlines", "Format Major Gridlines");
+    case "minorGridlines":
+      return text("title.minorGridlines", "Format Minor Gridlines");
+    case "series":
+      return text("title.series", "Format Data Series");
+    case "dataLabels":
+      return text("title.dataLabels", "Format Data Labels");
+    default:
+      return text("title.chartArea", "Format Chart Area");
+  }
+}
+function chartFormatTargetOptions(targets, describe) {
+  return targets.map((target) => ({
+    key: chartFormatTargetKey(target),
+    target,
+    label: chartFormatTargetLabel(target, describe)
+  }));
+}
+var CHART_AREA_TARGET = {
+  key: "chartArea",
+  target: { kind: "chartArea" },
+  label: text("target.chartArea", "Chart Area")
+};
+
+// src/chart/format-pane-text.ts
+function chartTextTabs() {
+  return [
+    { id: "textFill", label: t("tab.textFill", "Text Fill & Outline") },
+    { id: "textEffects", label: t("tab.textEffects", "Text Effects") },
+    { id: "textBox", label: t("tab.textBox", "Textbox") }
+  ];
+}
+var transparency = (id, value) => ({
+  id,
+  kind: "number",
+  label: t("transparency", "Transparency"),
+  value: pct(value),
+  min: 0,
+  max: 100,
+  step: 1,
+  unit: "%"
+});
+function textFillSections(text2) {
+  const fill3 = text2.fill ?? { kind: "automatic" };
+  const fillSection2 = {
+    id: "textFill",
+    title: t("section.textFill", "Text Fill"),
+    fields: [
+      {
+        id: "text.fill.kind",
+        kind: "radio",
+        label: t("section.textFill", "Text Fill"),
+        value: fill3.kind,
+        choices: [
+          choice("none", "fill.none", "No fill"),
+          choice("solid", "fill.solid", "Solid fill"),
+          choice("gradient", "fill.gradient", "Gradient fill"),
+          choice("automatic", "fill.automatic", "Automatic")
+        ]
+      }
+    ]
+  };
+  if (fill3.kind === "solid") {
+    fillSection2.fields.push(
+      {
+        id: "text.fill.color",
+        kind: "color",
+        label: t("color", "Color"),
+        value: hexForInput(fill3.color)
+      },
+      transparency("text.fill.transparency", fill3.transparency)
+    );
+  } else if (fill3.kind === "gradient" && fill3.gradient) {
+    fillSection2.fields.push(...gradientFields("text.fill", fill3.gradient));
+  }
+  const outline = text2.outline ?? { kind: "automatic" };
+  const outlineSection = {
+    id: "textOutline",
+    title: t("section.textOutline", "Text Outline"),
+    fields: [
+      {
+        id: "text.outline.kind",
+        kind: "radio",
+        label: t("section.textOutline", "Text Outline"),
+        value: outline.kind,
+        choices: [
+          choice("none", "line.none", "No line"),
+          choice("solid", "line.solid", "Solid line"),
+          choice("automatic", "fill.automatic", "Automatic")
+        ]
+      }
+    ]
+  };
+  if (outline.kind === "solid") {
+    outlineSection.fields.push(
+      {
+        id: "text.outline.color",
+        kind: "color",
+        label: t("color", "Color"),
+        value: hexForInput(outline.color)
+      },
+      transparency("text.outline.transparency", outline.transparency),
+      {
+        id: "text.outline.width",
+        kind: "number",
+        label: t("width", "Width"),
+        value: outline.width ?? 0.75,
+        min: 0,
+        max: 1584,
+        step: 0.25,
+        unit: "pt"
+      }
+    );
+  }
+  return [fillSection2, outlineSection];
+}
+function textBoxSection(text2) {
+  return {
+    id: "textBox",
+    title: t("section.textBox", "Text Box"),
+    fields: [
+      {
+        id: "text.anchor",
+        kind: "select",
+        label: t("verticalAlignment", "Vertical alignment"),
+        value: text2.anchor ?? "ctr",
+        choices: [
+          choice("t", "anchor.top", "Top"),
+          choice("ctr", "anchor.middle", "Middle"),
+          choice("b", "anchor.bottom", "Bottom")
+        ]
+      },
+      {
+        id: "text.direction",
+        kind: "select",
+        label: t("textDirection", "Text direction"),
+        value: text2.direction ?? "horz",
+        choices: [
+          choice("horz", "direction.horizontal", "Horizontal"),
+          choice("vert", "direction.rotate90", "Rotate all text 90\xB0"),
+          choice("vert270", "direction.rotate270", "Rotate all text 270\xB0"),
+          choice("wordArtVert", "direction.stacked", "Stacked")
+        ]
+      },
+      {
+        id: "text.rotation",
+        kind: "number",
+        label: t("customAngle", "Custom angle"),
+        value: text2.rotation ?? "",
+        min: -90,
+        max: 90,
+        step: 1,
+        unit: "\xB0",
+        auto: true
+      }
+    ]
+  };
+}
+function textOptionsSections(text2, tab) {
+  if (tab === "textEffects") {
+    return [shadowSection("text.", text2.effects?.shadow), glowSection("text.", text2.effects?.glow)];
+  }
+  return tab === "textBox" ? [textBoxSection(text2)] : textFillSections(text2);
+}
+
+// src/chart/format-pane-model.ts
+function resolveChartFormatSourceTarget(source, key) {
+  const match = key ? source?.targets.find((option) => option.key === key) : void 0;
+  return match ?? (key ? source?.resolve?.(key) : void 0) ?? source?.targets[0] ?? CHART_AREA_TARGET;
+}
+var hasText = (view) => view.support.text && view.text !== void 0;
+var hasEffects = (view) => view.support.effects !== false && view.effects !== void 0;
+function optionsLabel(target) {
+  switch (target.kind) {
+    case "series":
+      return t("tab.seriesOptions", "Series Options");
+    case "axis":
+      return t("tab.axisOptions", "Axis Options");
+    case "legend":
+      return t("tab.legendOptions", "Legend Options");
+    default:
+      return t("tab.labelOptions", "Label Options");
+  }
+}
+function chartFormatSourceTabs(source, target, mode = "chart") {
+  const view = source.element(target);
+  if (mode === "text" && hasText(view)) return chartTextTabs();
+  const tabs = [{ id: "fillLine", label: t("tab.fillLine", "Fill & Line") }];
+  if (hasEffects(view)) tabs.push({ id: "effects", label: t("tab.effects", "Effects") });
+  if (optionsSections(source, target)) tabs.push({ id: "options", label: optionsLabel(target) });
+  return tabs;
+}
+function tabSections(source, target, view, tab) {
+  switch (tab) {
+    case "textFill":
+    case "textEffects":
+    case "textBox":
+      return view.text ? textOptionsSections(view.text, tab) : [];
+    case "effects":
+      return hasEffects(view) ? effectsSections(view) : [];
+    case "options":
+      return optionsSections(source, target) ?? [];
+    default:
+      return fillLineSections(view, target, source);
+  }
+}
+function buildChartFormatModel(source, targetKey, tab = "fillLine", mode = "chart") {
+  const resolved = resolveChartFormatSourceTarget(source, targetKey);
+  const view = source.element(resolved.target);
+  const activeMode = mode === "text" && hasText(view) ? "text" : "chart";
+  const tabs = chartFormatSourceTabs(source, resolved.target, activeMode);
+  const activeTab = tabs.some((candidate) => candidate.id === tab) ? tab : tabs[0].id;
+  const flat = Boolean(source.flat) && activeMode === "chart";
+  const sections = flat ? tabs.flatMap((entry) => tabSections(source, resolved.target, view, entry.id)) : tabSections(source, resolved.target, view, activeTab);
+  return {
+    title: chartFormatPaneTitle(resolved.target),
+    targetKey: resolved.key,
+    target: resolved.target,
+    targets: [...source.targets],
+    picker: source.picker ?? t("chartOptions", "Chart Options"),
+    tabs: flat ? [] : tabs,
+    activeTab: flat ? "fillLine" : activeTab,
+    sections,
+    mode: activeMode,
+    textOptions: hasText(view)
+  };
+}
+var transparency2 = (alpha) => Math.round((1 - alpha) * 100);
+function fillView(fill3, resolve) {
+  switch (fill3?.kind) {
+    case "none":
+      return { kind: "none" };
+    case "solid": {
+      const color = resolve(fill3.color);
+      return color ? { kind: "solid", color: color.hex, transparency: transparency2(color.alpha) } : { kind: "solid" };
+    }
+    case "gradient":
+      return { kind: "gradient", gradient: resolveChartGradient(fill3, resolve) };
+    case "pattern":
+      return { kind: "pattern" };
+    case "picture":
+      return { kind: "picture" };
+    default:
+      return { kind: "automatic" };
+  }
+}
+function lineView(line, resolve) {
+  const paint = fillView(line?.fill, resolve);
+  const kind = paint.kind === "pattern" || paint.kind === "picture" ? "automatic" : paint.kind;
+  return {
+    kind,
+    ...paint.color === void 0 ? {} : { color: paint.color },
+    ...paint.transparency === void 0 ? {} : { transparency: paint.transparency },
+    ...paint.gradient === void 0 ? {} : { gradient: paint.gradient },
+    ...line?.widthEmu === void 0 ? {} : { width: Math.round(line.widthEmu / 12700 * 100) / 100 },
+    ...line?.dash === void 0 ? {} : { dash: line.dash },
+    ...line?.cap === void 0 ? {} : { cap: line.cap }
+  };
+}
+var chartTypeOf = (group) => group.element.replace(/Chart$/u, "");
+var vertical = (axis, space) => {
+  if (axis.position) return axis.position === "l" || axis.position === "r";
+  const horizontalBars = space.plotArea.groups.some((group) => group.barDirection === "bar");
+  return axis.kind === "val" ? !horizontalBars : horizontalBars;
+};
+var seriesName = (series, index) => series?.tx?.text || series?.tx?.value || `Series ${index + 1}`;
+function axisView(axis) {
+  const view = {
+    kind: axis.kind,
+    reverse: axis.scaling.orientation === "maxMin",
+    logScale: axis.scaling.logBase !== void 0,
+    numberFormat: axis.numberFormat && !axis.numberFormat.sourceLinked ? axis.numberFormat.formatCode : ""
+  };
+  const copy = (key, value) => {
+    if (value !== void 0) view[key] = value;
+  };
+  copy("min", axis.scaling.min);
+  copy("max", axis.scaling.max);
+  copy("logBase", axis.scaling.logBase);
+  copy("majorUnit", axis.majorUnit);
+  copy("minorUnit", axis.minorUnit);
+  copy("crosses", axis.crosses);
+  copy("crossesAt", axis.crossesAt);
+  copy("displayUnits", axis.displayUnits?.builtInUnit);
+  copy("majorTickMark", axis.majorTickMark);
+  copy("minorTickMark", axis.minorTickMark);
+  copy("tickLabelPosition", axis.tickLabelPosition);
+  return view;
+}
+function targetsOf(space) {
+  const targets = [{ kind: "chartArea" }];
+  if (space.title) targets.push({ kind: "title" });
+  space.plotArea.axes.forEach((axis, axisIndex) => {
+    if (axis.deleted) return;
+    targets.push({ kind: "axis", axisIndex });
+    if (axis.majorGridlines) targets.push({ kind: "majorGridlines", axisIndex });
+    if (axis.minorGridlines) targets.push({ kind: "minorGridlines", axisIndex });
+  });
+  if (space.legend) targets.push({ kind: "legend" });
+  targets.push({ kind: "plotArea" });
+  if (space.plotArea.groups.some((group) => group.dataLabels && !group.dataLabels.deleted))
+    targets.push({ kind: "dataLabels" });
+  chartSeriesEntries(space).forEach((_, seriesIndex) => {
+    targets.push({ kind: "series", seriesIndex }, { kind: "dataLabels", seriesIndex });
+  });
+  return targets;
+}
+function chartSpaceFormatSource(space, options = {}) {
+  const resolve = (color) => {
+    const resolved = resolveDrawingColor(color, options.theme);
+    return resolved && { hex: resolved.hex, alpha: resolved.alpha };
+  };
+  const entries = chartSeriesEntries(space);
+  const describe = {
+    axis: (axisIndex) => {
+      const axis = space.plotArea.axes[axisIndex];
+      if (!axis) return void 0;
+      const secondary = space.plotArea.axes.slice(0, axisIndex).some((other) => other.kind === axis.kind);
+      return { kind: axis.kind, vertical: vertical(axis, space), secondary };
+    },
+    seriesName: (seriesIndex) => seriesName(entries[seriesIndex]?.series, seriesIndex)
+  };
+  const element = (target) => {
+    const lineTarget = target.kind === "axis" || target.kind === "majorGridlines" || target.kind === "minorGridlines" || target.kind === "series" && entries[target.seriesIndex] !== void 0 && chartGroupPaintsLine(entries[target.seriesIndex].group);
+    let shape;
+    try {
+      shape = chartTargetShape(space, target);
+    } catch {
+      shape = void 0;
+    }
+    return {
+      support: {
+        fill: !lineTarget,
+        gradient: true,
+        pattern: false,
+        picture: false,
+        threeD: false,
+        text: false,
+        lineDetails: false,
+        effects: false
+      },
+      fill: fillView(shape?.fill, resolve),
+      line: lineView(shape?.line, resolve)
+    };
+  };
+  const labels = (seriesIndex) => {
+    const entry = seriesIndex === void 0 ? void 0 : entries[seriesIndex];
+    if (seriesIndex !== void 0 && !entry) return void 0;
+    const group = entry?.group ?? space.plotArea.groups[0];
+    const chart = group?.dataLabels;
+    const own = entry?.series.dataLabels;
+    const pick = (key) => own?.[key] ?? chart?.[key];
+    const view = { seriesScoped: entry !== void 0 };
+    const set = (key, value) => {
+      if (value !== void 0) view[key] = value;
+    };
+    set("chartType", group && chartTypeOf(group));
+    set("showSeriesName", pick("showSeriesName"));
+    set("showCategory", pick("showCategoryName"));
+    set("showValue", pick("showValue"));
+    set("showPercent", pick("showPercent"));
+    set("showLegendKey", pick("showLegendKey"));
+    set("position", pick("position"));
+    return view;
+  };
+  return {
+    targets: chartFormatTargetOptions(targetsOf(space), describe),
+    textOptions: false,
+    element,
+    seriesOptions: (seriesIndex) => {
+      const group = entries[seriesIndex]?.group;
+      if (!group) return void 0;
+      const view = { chartType: chartTypeOf(group) };
+      if (group.overlap !== void 0) view.overlap = group.overlap;
+      if (group.gapWidth !== void 0) view.gapWidth = group.gapWidth;
+      if (group.firstSliceAngle !== void 0) view.firstSliceAngle = group.firstSliceAngle;
+      if (group.holeSize !== void 0) view.holeSize = group.holeSize;
+      return view;
+    },
+    axisOptions: (axisIndex) => {
+      const axis = space.plotArea.axes[axisIndex];
+      return axis && axisView(axis);
+    },
+    legendOptions: () => space.legend && {
+      ...space.legend.position === void 0 ? {} : { position: space.legend.position },
+      overlay: space.legend.overlay ?? false
+    },
+    labelOptions: labels
+  };
+}
+var chartFormatLocale = (value) => normalizeLocale(value, CHART_FORMAT_LOCALES, "en");
+function chartFormatTranslator(locale, override) {
+  const strings = CHART_FORMAT_STRINGS[chartFormatLocale(locale)];
+  return (key, params, fallback) => {
+    const own = override?.(key, params, fallback);
+    if (own && own !== key) return own;
+    return strings[key] ?? CHART_FORMAT_STRINGS.en[key] ?? key;
+  };
+}
+
+// src/chart/format-pane.ts
+var echo = (key) => key;
+var OfficeUiChartFormatPane = class extends OfficeElement {
+  static editEvent = "office-chart-format-edit";
+  static targetEvent = "office-chart-format-target";
+  static closeEvent = "office-chart-format-close";
+  static controlTags = {
+    select: "select",
+    radio: "office-ui-radio",
+    checkbox: "office-ui-checkbox"
+  };
+  static styles = controlStyles(range_control_default, format_pane_default);
+  static properties = { disabled: flag };
+  /** Properties a host may set before the element is defined; replayed through their setters. */
+  static replayed = [
+    "source",
+    "chartSpace",
+    "theme",
+    "target",
+    "translateLabel",
+    "locale"
+  ];
+  sourceValue;
+  spaceValue;
+  themeValue;
+  targetValue = "chartArea";
+  translator = echo;
+  localeValue = "en";
+  /** The translator captions go through: the product's, then the pane's own dictionary. */
+  captions = chartFormatTranslator("en");
+  paneTab = "fillLine";
+  paneMode = "chart";
+  collapsed = /* @__PURE__ */ new Set();
+  /** After an edit, write the model's values even into the focused box (a refused value). */
+  forceSync = false;
+  /** The pane title, the host's accessible name. */
+  hostLabel = "";
+  /** The value each box and select was last given, to tell typing from a stale value. */
+  synced = /* @__PURE__ */ new WeakMap();
+  constructor() {
+    super();
+    this.disabled = false;
+  }
+  connectedCallback() {
+    const self = this;
+    for (const name of this.constructor.replayed) {
+      if (!Object.prototype.hasOwnProperty.call(this, name)) continue;
+      const value = self[name];
+      delete self[name];
+      self[name] = value;
+    }
+    super.connectedCallback();
+  }
+  /** What the pane reads; replaces `chartSpace`. */
+  get source() {
+    return this.sourceValue;
+  }
+  set source(value) {
+    this.sourceValue = value;
+    this.spaceValue = void 0;
+    this.requestUpdate("source");
+  }
+  /** A chart part model, read through `chartSpaceFormatSource` with `theme`. */
+  get chartSpace() {
+    return this.spaceValue;
+  }
+  set chartSpace(value) {
+    this.spaceValue = value;
+    this.sourceValue = value && chartSpaceFormatSource(value, this.themeOptions());
+    this.requestUpdate("chartSpace");
+  }
+  /** Resolves scheme colours of a `chartSpace`. */
+  get theme() {
+    return this.themeValue;
+  }
+  set theme(value) {
+    this.themeValue = value;
+    if (this.spaceValue) this.chartSpace = this.spaceValue;
+  }
+  /** The element the pane formats (`chartArea`, `series:0`, `axis:1`, ...). */
+  get target() {
+    return this.targetValue;
+  }
+  set target(value) {
+    this.targetValue = value || "chartArea";
+    this.requestUpdate("target");
+  }
+  /** Translates captions: `(key, params, fallback)`, returning the key when it has none. */
+  get translateLabel() {
+    return this.translator;
+  }
+  set translateLabel(value) {
+    this.translator = value ?? echo;
+    this.captions = chartFormatTranslator(this.localeValue, this.translator);
+    this.requestUpdate("translateLabel");
+  }
+  /**
+   * The display locale of the pane's own captions (`en`, `fr`, `de`, `es`, `zh-CN`; any BCP 47
+   * tag maps onto them). `translateLabel` still wins where it knows a key.
+   */
+  get locale() {
+    return this.localeValue;
+  }
+  set locale(value) {
+    this.localeValue = value || "en";
+    this.captions = chartFormatTranslator(this.localeValue, this.translator);
+    this.requestUpdate("locale");
+  }
+  themeOptions() {
+    return this.themeValue ? { theme: this.themeValue } : {};
+  }
+  statics() {
+    return this.constructor;
+  }
+  tr = (text2) => translateChartFormatText(text2, (key, params, fallback) => this.captions(key, params, fallback));
+  label(key, fallback) {
+    return this.tr({ key: `chartFormat.${key}`, fallback });
+  }
+  /** The pane for the current source, target, tab and mode, or undefined without a source. */
+  model() {
+    const source = this.sourceValue;
+    return source && buildChartFormatModel(source, this.targetValue, this.paneTab, this.paneMode);
+  }
+  /** A committed field: its edit (with the neutral intent) goes to {@link commit}. */
+  edit(field, value) {
+    const source = this.sourceValue;
+    const model = this.model();
+    if (this.disabled || !source || !model) {
+      this.refreshValues();
+      return;
+    }
+    const view = source.element(model.target);
+    this.commit({
+      target: model.targetKey,
+      field,
+      value,
+      intent: chartFormatFieldIntent(view, model.target, field, value)
+    });
+    this.refreshValues();
+  }
+  /**
+   * Fires the edit event. A product subclass that applies edits itself overrides this (PowerPoint
+   * maps the edit onto its own chart model); either way the pane repaints afterwards.
+   */
+  commit(edit) {
+    emit(this, this.statics().editEvent, edit);
+  }
+  /** Repaints every value from the model, even the box being typed in (a refused value). */
+  refreshValues() {
+    this.forceSync = true;
+    this.requestUpdate();
+  }
+  pickTarget(target) {
+    this.targetValue = target;
+    this.requestUpdate("target");
+    emit(this, this.statics().targetEvent, { target });
+  }
+  requestClose() {
+    emit(this, this.statics().closeEvent, void 0);
+  }
+  toggleText() {
+    this.paneMode = this.paneMode === "text" ? "chart" : "text";
+    this.paneTab = this.paneMode === "text" ? "textFill" : "fillLine";
+    this.requestUpdate();
+  }
+  onKey = (event) => {
+    event.stopPropagation();
+    if (event.key === "Escape" && !event.defaultPrevented) {
+      event.preventDefault();
+      this.requestClose();
+    }
+  };
+  preview = (id, value, text2) => {
+    const field = CSS.escape(id);
+    const box = this.renderRoot.querySelector(
+      `[data-chart-format-field="${field}"] input`
+    );
+    if (box) box.value = String(value);
+    this.renderRoot.querySelector(`[data-chart-format-slider="${field}"] input`)?.setAttribute("aria-valuetext", text2);
+  };
+  section(section, ctx) {
+    const open = !this.collapsed.has(section.id);
+    const toggle = () => {
+      if (open) this.collapsed.add(section.id);
+      else this.collapsed.delete(section.id);
+      this.requestUpdate();
+    };
+    const body = section.slot ? html`<slot name=${section.slot}></slot>` : html`${repeat(
+      section.fields,
+      (field) => field.id,
+      (field) => fieldTemplate(field, ctx)
+    )}${section.note ? html`<p class="note">${this.tr(section.note)}</p>` : nothing}`;
+    return html`<section data-chart-format-section=${section.id}
+			><button type="button" class="section-toggle" aria-expanded=${String(open)} @click=${toggle}
+				>${this.tr(section.title)}</button
+			><div class="fields" ?hidden=${!open}>${body}</div></section
+		>`;
+  }
+  render() {
+    const model = this.model();
+    const closeLabel = this.label("close", "Close");
+    const header = html`<header
+			><h3>${model ? this.tr(model.title) : ""}</h3
+			><button
+				type="button"
+				class="close"
+				data-chart-format-close
+				aria-label=${closeLabel}
+				title=${closeLabel}
+				@click=${() => this.requestClose()}
+				>×</button
+			></header
+		>`;
+    if (!model) {
+      this.hostLabel = "";
+      return html`<div class="panel">${header}</div>`;
+    }
+    this.paneTab = model.activeTab;
+    this.paneMode = model.mode;
+    const title = this.tr(model.title);
+    this.hostLabel = title;
+    const tags = this.statics().controlTags;
+    const picker = this.tr(model.picker);
+    const select = unsafeStatic(tags.select);
+    const ctx = {
+      tags,
+      tr: this.tr,
+      change: (id, value) => this.edit(id, value),
+      preview: this.preview,
+      locked: this.disabled,
+      autoLabel: this.label("automatic", "Auto")
+    };
+    const textToggle = this.sourceValue?.textOptions === false ? nothing : html`<button
+						type="button"
+						class="text-options"
+						data-chart-format-text-options
+						aria-pressed=${String(model.mode === "text")}
+						title=${model.textOptions ? this.label("textOptionsHint", "Fill, outline, effects and text box of the text") : this.label("textOptionsNone", "This element has no text")}
+						?disabled=${this.disabled || !model.textOptions}
+						@click=${() => this.toggleText()}
+						>${this.label("textOptions", "Text Options")}</button
+					>`;
+    const tabs = model.tabs.length ? html`<div class="tabs" role="tablist" aria-label=${this.label("tabs", "Format categories")}
+					>${model.tabs.map(
+      (tab) => html`<button
+								type="button"
+								role="tab"
+								data-chart-format-tab=${tab.id}
+								aria-selected=${String(tab.id === model.activeTab)}
+								tabindex=${tab.id === model.activeTab ? 0 : -1}
+								@click=${() => {
+        this.paneTab = tab.id;
+        this.requestUpdate();
+      }}
+								>${this.tr(tab.label)}</button
+							>`
+    )}</div
+				>` : nothing;
+    return html`<div
+			class="panel"
+			data-chart-format-pane
+			data-chart-format-mode=${model.mode}
+			data-chart-format-target-key=${model.targetKey}
+			@keydown=${this.onKey}
+			>${header}<div class="options-row"
+				><label class="picker"
+					><span>${picker}</span>${html$1`<${select}
+						data-chart-format-target
+						aria-label=${picker}
+						data-value=${model.targetKey}
+						?disabled=${this.disabled}
+						@change=${(event) => this.pickTarget(event.currentTarget.value)}
+					>${model.targets.map(
+      (option) => html`<option value=${option.key} .selected=${live(option.key === model.targetKey)}
+								>${this.tr(option.label)}</option
+							>`
+    )}</${select}>`}</label
+				>${textToggle}</div
+			>${tabs}<div class="content" role="tabpanel"
+				>${repeat(
+      model.sections,
+      (section) => section.id,
+      (section) => this.section(section, ctx)
+    )}</div
+			></div
+		>`;
+  }
+  updated(changed) {
+    super.updated(changed);
+    this.setAttribute("role", "complementary");
+    if (this.hostLabel) this.setAttribute("aria-label", this.hostLabel);
+    else this.removeAttribute("aria-label");
+    const force = this.forceSync;
+    this.forceSync = false;
+    for (const node of this.renderRoot.querySelectorAll(
+      "[data-value]"
+    )) {
+      const value = node.dataset.value ?? "";
+      const typing = node.matches(":focus, :focus-within") && node.value !== (this.synced.get(node) ?? value);
+      if (node.value !== value && (force || !typing)) node.value = value;
+      this.synced.set(node, value);
+    }
+  }
+};
+var defineChartFormatPane = definer(
+  "office-ui-chart-format-pane",
+  () => OfficeUiChartFormatPane,
+  [defineRadio, defineCheckbox]
+);
+
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chrome/print-preview.css?raw
 var print_preview_default = ":host {\n	display: block;\n	max-width: var(--office-print-preview-width);\n	font: var(--office-font-size-sm) var(--office-font);\n	color: var(--office-foreground);\n}\n.sheet {\n	padding: var(--office-space-3);\n	border: var(--office-border-width) solid var(--office-border);\n	background: var(--office-paper);\n	box-shadow: var(--office-shadow-sm);\n}\n.sheet > * {\n	display: block;\n	width: 100%;\n	height: auto;\n}\n.empty {\n	color: var(--office-muted-foreground);\n}\n.nav {\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	gap: var(--office-space-2);\n	margin-top: var(--office-space-2);\n}\n.nav[hidden] {\n	display: none;\n}\nbutton {\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	font: inherit;\n	color: inherit;\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-background);\n	cursor: pointer;\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: default;\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n";
 
@@ -1466,12 +3525,12 @@ var OfficeUiPrintPreview = class extends OfficeElement {
   }
   render() {
     const total = this.list.length;
-    const label = this.label ?? "Print preview";
+    const label2 = this.label ?? "Print preview";
     return html`
 			<div
 				class="sheet"
 				role="img"
-				aria-label=${total > 1 ? `${label}, page ${this.current + 1} of ${total}` : label}
+				aria-label=${total > 1 ? `${label2}, page ${this.current + 1} of ${total}` : label2}
 				>${this.clone ?? html`<p class="empty">${this.emptyLabel ?? "Nothing to print."}</p>`}</div
 			>
 			<div class="nav" ?hidden=${total < 2}>
@@ -1662,8 +3721,8 @@ var OfficeUiRibbon = class extends OfficeElement {
     const tabs = [...this.renderRoot.querySelectorAll('[role="tab"]')];
     const focused = event.target.closest?.('[role="tab"]');
     const at = focused ? tabs.indexOf(focused) : tabs.findIndex((tab) => tab.dataset.tab === this.selected);
-    const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key];
-    const next = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs.at(-1) : step ? tabs[(at + step + tabs.length) % tabs.length] : void 0;
+    const step2 = { ArrowRight: 1, ArrowLeft: -1 }[event.key];
+    const next = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs.at(-1) : step2 ? tabs[(at + step2 + tabs.length) % tabs.length] : void 0;
     if (!next) return;
     event.preventDefault();
     this.choose(next.dataset.tab);
@@ -1873,8 +3932,8 @@ var OfficeUiButton = class extends OfficeElement {
     return this.getAttribute("icon");
   }
   /** The tooltip: `title`, else the label of an icon-only button; a product may always show it. */
-  tooltip(label, iconOnly) {
-    return this.getAttribute("title") ?? (iconOnly ? label : "");
+  tooltip(label2, iconOnly) {
+    return this.getAttribute("title") ?? (iconOnly ? label2 : "");
   }
   /** Whether the trailing menu chevron shows. */
   showsCaret() {
@@ -1891,24 +3950,24 @@ var OfficeUiButton = class extends OfficeElement {
     if (!present(this.disabled) && id) this.fire(requestEvent, { [detailKey]: id });
   }
   render() {
-    const label = this.getAttribute("label") ?? "";
+    const label2 = this.getAttribute("label") ?? "";
     const iconOnly = this.hasAttribute("icon-only");
     const badge = this.getAttribute("badge") ?? "";
     const expanded = this.getAttribute("expanded");
-    const tooltip = this.tooltip(label, iconOnly);
+    const tooltip = this.tooltip(label2, iconOnly);
     return html`<button
 			part="button"
 			type="button"
 			?disabled=${present(this.disabled)}
 			title=${tooltip || nothing}
-			aria-label=${ifDefined(iconOnly && label ? label : void 0)}
+			aria-label=${ifDefined(iconOnly && label2 ? label2 : void 0)}
 			aria-keyshortcuts=${ifDefined(this.getAttribute("keyshortcuts") || void 0)}
 			aria-pressed=${ifDefined(asAttribute(this.pressed))}
 			aria-expanded=${ifDefined(expanded === null ? void 0 : String(expanded !== "false"))}
 			@click=${this.onClick}
 			@keydown=${this.onKeydown}
 			>${glyph(this.iconName())}<span class="label" ?hidden=${iconOnly}
-				>${label}${glyph("chevronDown", "caret", !this.showsCaret())}</span
+				>${label2}${glyph("chevronDown", "caret", !this.showsCaret())}</span
 			><span class="badge" aria-hidden="true" ?hidden=${!badge}>${badge}</span></button
 		>`;
   }
@@ -2001,25 +4060,25 @@ var OfficeUiRibbonGroup = class extends OfficeElement {
     this.setAttribute("aria-label", this.getAttribute("label") ?? "");
   }
   render() {
-    const label = this.getAttribute("label") ?? "";
-    const launcherLabel = this.getAttribute("launcher-label") ?? `${label} options`;
+    const label2 = this.getAttribute("label") ?? "";
+    const launcherLabel = this.getAttribute("launcher-label") ?? `${label2} options`;
     return html`
 			<div class="group">
 				<button
 					class="face"
 					type="button"
 					aria-haspopup="true"
-					aria-label=${label}
+					aria-label=${label2}
 					aria-expanded=${String(this.hasAttribute("data-open"))}
-					title=${label}
+					title=${label2}
 					@click=${this.onFace}
-					>${glyph(this.iconName(), "face-icon")}<span>${label}</span>${glyph("chevronDown", "chev")}</button
+					>${glyph(this.iconName(), "face-icon")}<span>${label2}</span>${glyph("chevronDown", "chev")}</button
 				>
 				<div class="row">
 					<slot @slotchange=${this.observe}></slot>
 				</div>
 				<div class="foot">
-					<span class="caption">${label}</span>
+					<span class="caption">${label2}</span>
 					<button
 						class="launcher"
 						type="button"
@@ -2173,30 +4232,6 @@ function attachGalleryStyles(host) {
   injected.add(root);
 }
 
-// src/ribbon/safe-svg.ts
-var BLOCKED_ELEMENTS = /* @__PURE__ */ new Set(["script", "foreignobject", "iframe", "object", "embed"]);
-function parseSvgPreview(doc, svg2) {
-  const Parser = doc.defaultView?.DOMParser ?? globalThis.DOMParser;
-  if (typeof Parser !== "function") return null;
-  const parsed = new Parser().parseFromString(svg2, "image/svg+xml");
-  const root = parsed.documentElement;
-  if (root.localName !== "svg" || parsed.getElementsByTagName("parsererror").length > 0)
-    return null;
-  for (const node of Array.from(root.querySelectorAll("*"))) {
-    if (BLOCKED_ELEMENTS.has(node.localName.toLowerCase())) {
-      node.remove();
-      continue;
-    }
-    for (const attribute of Array.from(node.attributes))
-      if (/^on/iu.test(attribute.name) || /^\s*javascript:/iu.test(attribute.value))
-        node.removeAttribute(attribute.name);
-  }
-  for (const attribute of Array.from(root.attributes))
-    if (/^on/iu.test(attribute.name) || /^\s*javascript:/iu.test(attribute.value))
-      root.removeAttribute(attribute.name);
-  return doc.importNode(root, true);
-}
-
 // src/ribbon/gallery.ts
 var HOST_CSS = ":host { display: inline-flex; position: relative; flex: none; }";
 var OfficeUiGallery = class extends OfficeElement {
@@ -2383,8 +4418,8 @@ var OfficeUiGallery = class extends OfficeElement {
     } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
       event.preventDefault();
       event.stopPropagation();
-      const step = event.key === "ArrowDown" ? 1 : -1;
-      items[(index + step + items.length) % items.length]?.focus();
+      const step2 = event.key === "ArrowDown" ? 1 : -1;
+      items[(index + step2 + items.length) % items.length]?.focus();
     } else if (event.key === "Tab") {
       this.closeMenu();
     }
@@ -2816,14 +4851,14 @@ var OfficeUiRuler = class extends OfficeElement {
     const canvas = this.renderRoot.querySelector("canvas");
     if (!canvas) return;
     const view = this.ownerDocument.defaultView;
-    const vertical = this.orientation === "vertical";
+    const vertical2 = this.orientation === "vertical";
     const reverse = this.direction === "reverse";
     const box = this.getBoundingClientRect();
-    const length = (vertical ? this.offsetHeight : this.offsetWidth) || (vertical ? box.height : box.width);
-    const thickness = (vertical ? this.offsetWidth || box.width : this.offsetHeight || box.height) || parseFloat(OFFICE_TOKENS["--office-ruler-size"]);
+    const length = (vertical2 ? this.offsetHeight : this.offsetWidth) || (vertical2 ? box.height : box.width);
+    const thickness = (vertical2 ? this.offsetWidth || box.width : this.offsetHeight || box.height) || parseFloat(OFFICE_TOKENS["--office-ruler-size"]);
     const ratio = (view?.devicePixelRatio ?? 1) * this.zoomFactor;
-    canvas.width = Math.max(1, Math.round((vertical ? thickness : length) * ratio));
-    canvas.height = Math.max(1, Math.round((vertical ? length : thickness) * ratio));
+    canvas.width = Math.max(1, Math.round((vertical2 ? thickness : length) * ratio));
+    canvas.height = Math.max(1, Math.round((vertical2 ? length : thickness) * ratio));
     const context = canvas.getContext?.("2d");
     if (!context || !length) return;
     context.scale(ratio, ratio);
@@ -2837,17 +4872,17 @@ var OfficeUiRuler = class extends OfficeElement {
     const unit = Math.max(1, Number.isFinite(this.scale) ? this.scale : 96);
     const density = this.density > 0 && this.density <= 1 ? this.density : 1;
     const divisions = Math.max(1, Math.round(rulerDivisions(unit) * density));
-    const step = unit / divisions;
+    const step2 = unit / divisions;
     const sign = reverse ? -1 : 1;
-    const a = (0 - origin) / (sign * step);
-    const b = (length - origin) / (sign * step);
+    const a = (0 - origin) / (sign * step2);
+    const b = (length - origin) / (sign * step2);
     const first = Math.floor(Math.min(a, b)) - 1;
     const last = Math.ceil(Math.max(a, b)) + 1;
     context.beginPath();
     for (let index = first; index <= last; index++) {
-      const at = Math.round(origin + sign * index * step) + 0.5;
+      const at = Math.round(origin + sign * index * step2) + 0.5;
       const tick = index % divisions === 0 ? thickness : index % (divisions / 2) === 0 ? thickness * 0.5 : thickness * 0.3;
-      if (vertical) {
+      if (vertical2) {
         context.moveTo(thickness, at);
         context.lineTo(thickness - tick, at);
       } else {
@@ -2857,31 +4892,31 @@ var OfficeUiRuler = class extends OfficeElement {
       if (index % divisions !== 0) continue;
       if (this.labelsWithinMargins && (index < 0 || at < this.marginStart || at > length - this.marginEnd))
         continue;
-      const label = String(index / divisions);
-      if (!vertical) context.fillText(label, at + 2, 9);
+      const label2 = String(index / divisions);
+      if (!vertical2) context.fillText(label2, at + 2, 9);
       else {
         context.save();
         context.translate(9, at - 2);
         context.rotate(-Math.PI / 2);
-        context.fillText(label, 0, 0);
+        context.fillText(label2, 0, 0);
         context.restore();
       }
     }
     context.stroke();
   }
   render() {
-    const vertical = this.orientation === "vertical";
-    const band = (side, size) => size > 0 ? html`<div
+    const vertical2 = this.orientation === "vertical";
+    const band = (side, size2) => size2 > 0 ? html`<div
 						class="margin"
 						data-margin=${side}
-						style="${side === "start" ? vertical ? "top" : "left" : vertical ? "bottom" : "right"}:0;${vertical ? "height" : "width"}:${size}px"
+						style="${side === "start" ? vertical2 ? "top" : "left" : vertical2 ? "bottom" : "right"}:0;${vertical2 ? "height" : "width"}:${size2}px"
 					></div>` : nothing;
     return html`${band("start", this.marginStart)}${band("end", this.marginEnd)}<canvas
 			></canvas>${this.markers.map(
       (marker) => html`<div
 						class="marker ${marker.edge === "top" ? "top" : "bottom"}"
 						data-marker=${marker.name}
-						style="${vertical ? "top" : "left"}:${marker.position}px"
+						style="${vertical2 ? "top" : "left"}:${marker.position}px"
 						aria-label=${marker.label ?? nothing}
 						@pointerdown=${(event) => this.dragMarker(event, marker.name)}
 					></div>`
@@ -2960,12 +4995,12 @@ var OfficeUiAccount = class extends OfficeElement {
     this.fire("office-profile-change", { profile: this.profile });
   }
   onSwatchKey(event) {
-    const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
-    if (!step) return;
+    const step2 = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+    if (!step2) return;
     event.preventDefault();
     const colors = OFFICE_AVATAR_SWATCHES;
     const at = Math.max(0, colors.indexOf(this.current.avatarColor));
-    const color = colors[(at + step + colors.length) % colors.length];
+    const color = colors[(at + step2 + colors.length) % colors.length];
     this.change({ ...this.current, avatarColor: color });
     this.renderRoot.querySelector(`[data-color="${color}"]`)?.focus();
   }
@@ -3077,8 +5112,27 @@ var OfficeUiDialog = class extends OfficeElement {
   get closeButton() {
     return this.renderRoot.querySelector(".close");
   }
+  /**
+   * The body's focusable controls in order, including those inside the shadow root of a
+   * composite element (a picker) that is not itself focusable.
+   */
   focusables() {
-    return [...this.querySelectorAll(FOCUSABLE)];
+    const found = [];
+    const walk = (root) => {
+      for (const child of Array.from(root.children)) {
+        if (child.matches(FOCUSABLE)) found.push(child);
+        else if (child.shadowRoot) walk(child.shadowRoot);
+        else walk(child);
+      }
+    };
+    walk(this);
+    return found;
+  }
+  /** The focused element, followed into open shadow roots. */
+  deepActive() {
+    let active = this.ownerDocument.activeElement;
+    while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+    return active;
   }
   onOpen() {
     const active = this.ownerDocument.activeElement;
@@ -3099,10 +5153,10 @@ var OfficeUiDialog = class extends OfficeElement {
     } else if (event.key === "Tab") {
       const closeButton = this.closeButton;
       const items = [...this.focusables(), ...closeButton ? [closeButton] : []];
-      const current = this.ownerDocument.activeElement;
+      const current = this.deepActive();
       const inside = (el) => el === current || el.contains(current);
       const index = items.findIndex(inside);
-      const shadowFocus = this.shadowRoot?.activeElement === closeButton;
+      const shadowFocus = current !== null && current === closeButton;
       const at = shadowFocus ? items.length - 1 : index;
       const last = items.length - 1;
       if (at < 0 || !event.shiftKey && at === last || event.shiftKey && at === 0) {
@@ -3231,11 +5285,11 @@ var OfficeUiCommandSearch = class extends OfficeElement {
   hide() {
     this.isOpen = false;
   }
-  move(step) {
+  move(step2) {
     const enabled = this.found.map((item, index) => item.disabled ? -1 : index).filter((i) => i >= 0);
     if (!enabled.length) return;
     const at = enabled.indexOf(this.active);
-    this.active = enabled[(at + step + enabled.length) % enabled.length];
+    this.active = enabled[(at + step2 + enabled.length) % enabled.length];
   }
   choose(index) {
     const item = this.found[index];
@@ -3335,10 +5389,10 @@ var defineCommandSearch = definer("office-ui-command-search", () => OfficeUiComm
 
 // src/menu/menu-model.ts
 var EMPTY_MENU_STATE = { x: 0, y: 0, label: "", items: [] };
-function nextEnabledIndex(items, from, step) {
+function nextEnabledIndex(items, from, step2) {
   const count = items.length;
   for (let offset = 1; offset <= count; offset += 1) {
-    const index = ((from + step * offset) % count + count) % count;
+    const index = ((from + step2 * offset) % count + count) % count;
     if (!items[index]?.disabled) return index;
   }
   return -1;
@@ -3964,10 +6018,10 @@ var OfficeUiMenuButton = class _OfficeUiMenuButton extends OfficeElement {
     if (present(this.disabled)) this.hide(false);
   }
   render() {
-    const { label, split, open } = this;
+    const { label: label2, split, open } = this;
     const iconOnly = present(this.iconOnly);
     const disabled = present(this.disabled);
-    const title = this.getAttribute("title") ?? label;
+    const title = this.getAttribute("title") ?? label2;
     const popover = this.nativePopover;
     return html`
 			<div class="wrap ${disabled ? "disabled" : ""}">
@@ -3976,7 +6030,7 @@ var OfficeUiMenuButton = class _OfficeUiMenuButton extends OfficeElement {
 					part="button"
 					type="button"
 					title=${title}
-					aria-label=${ifDefined(iconOnly ? label : void 0)}
+					aria-label=${ifDefined(iconOnly ? label2 : void 0)}
 					aria-keyshortcuts=${ifDefined(this.keyshortcuts || void 0)}
 					aria-haspopup=${ifDefined(split ? void 0 : "menu")}
 					role=${ifDefined(present(this.submenu) ? "menuitem" : void 0)}
@@ -3986,15 +6040,15 @@ var OfficeUiMenuButton = class _OfficeUiMenuButton extends OfficeElement {
 					@click=${this.onMain}
 					@keydown=${this.onTriggerKey}
 					@pointerenter=${() => present(this.submenu) && this.show(-1)}
-					>${glyph(this.icon)}<span class="text" ?hidden=${iconOnly}>${label}</span></button
+					>${glyph(this.icon)}<span class="text" ?hidden=${iconOnly}>${label2}</span></button
 				>
 				<!-- Without a split command the caret is decoration on one control, not a second button. -->
 				<button
 					class="caret"
 					part="caret"
 					type="button"
-					title=${split ? `${label} options` : title}
-					aria-label=${ifDefined(split ? `${label} options` : void 0)}
+					title=${split ? `${label2} options` : title}
+					aria-label=${ifDefined(split ? `${label2} options` : void 0)}
 					aria-hidden=${ifDefined(split ? void 0 : "true")}
 					aria-haspopup="menu"
 					aria-expanded=${String(open)}
@@ -4023,69 +6077,69 @@ function clampOptionNumber(raw, min, max) {
   const parsed = Number(raw);
   return Number.isFinite(parsed) && raw.trim() !== "" ? Math.min(max, Math.max(min, parsed)) : void 0;
 }
-function optionRow(host, control) {
+function optionRow(host, control2) {
   const { draft } = host;
-  const value = draft[control.key];
-  const locked = Boolean(control.disabled) || control.enabledBy && draft[control.enabledBy] !== true;
+  const value = draft[control2.key];
+  const locked = Boolean(control2.disabled) || control2.enabledBy && draft[control2.enabledBy] !== true;
   const disabled = Boolean(locked);
-  const info = control.info ? html`<span class="info" title=${control.info} role="img" aria-label=${control.info}>i</span>` : "";
-  const label = html`<span class="label">${control.label}${info}</span>`;
+  const info = control2.info ? html`<span class="info" title=${control2.info} role="img" aria-label=${control2.info}>i</span>` : "";
+  const label2 = html`<span class="label">${control2.label}${info}</span>`;
   let body;
-  if (control.kind === "toggle")
-    body = html`${label}<input
+  if (control2.kind === "toggle")
+    body = html`${label2}<input
 				type="checkbox"
 				.checked=${value === true}
 				?disabled=${disabled}
-				@change=${(event) => host.set(control.key, event.target.checked)}
+				@change=${(event) => host.set(control2.key, event.target.checked)}
 			/>`;
-  else if (control.kind === "select") {
-    const current = String(value ?? control.choices[0]?.value ?? "");
-    body = html`${label}<select
-				aria-label=${control.label}
+  else if (control2.kind === "select") {
+    const current = String(value ?? control2.choices[0]?.value ?? "");
+    body = html`${label2}<select
+				aria-label=${control2.label}
 				?disabled=${disabled}
-				@change=${(event) => host.set(control.key, event.target.value)}
+				@change=${(event) => host.set(control2.key, event.target.value)}
 			>
-				${control.choices.map(
-      (choice) => html`<option value=${choice.value} .selected=${choice.value === current}
-							>${choice.label}</option
+				${control2.choices.map(
+      (choice2) => html`<option value=${choice2.value} .selected=${choice2.value === current}
+							>${choice2.label}</option
 						>`
     )}
 			</select>`;
-  } else if (control.kind === "number")
-    body = html`${label}<span class="number"
+  } else if (control2.kind === "number")
+    body = html`${label2}<span class="number"
 				><input
 					type="number"
-					min=${control.min}
-					max=${control.max}
-					step=${ifDefined(control.step ? String(control.step) : void 0)}
-					aria-label=${control.label}
+					min=${control2.min}
+					max=${control2.max}
+					step=${ifDefined(control2.step ? String(control2.step) : void 0)}
+					aria-label=${control2.label}
 					.value=${value === void 0 ? "" : String(value)}
 					?disabled=${disabled}
 					@change=${(event) => {
       const field = event.target;
-      const next = clampOptionNumber(field.value, control.min, control.max);
-      if (next === void 0) field.value = String(draft[control.key] ?? "");
+      const next = clampOptionNumber(field.value, control2.min, control2.max);
+      if (next === void 0) field.value = String(draft[control2.key] ?? "");
       else {
         field.value = String(next);
-        host.set(control.key, next);
+        host.set(control2.key, next);
       }
     }}
-				/>${control.unit ? html`<span class="unit">${control.unit}</span>` : ""}</span
+				/>${control2.unit ? html`<span class="unit">${control2.unit}</span>` : ""}</span
 			>`;
   else
-    body = html`${label}<input
+    body = html`${label2}<input
 				type="text"
-				maxlength=${ifDefined(control.maxLength ? String(control.maxLength) : void 0)}
-				aria-label=${control.label}
+				maxlength=${ifDefined(control2.maxLength ? String(control2.maxLength) : void 0)}
+				aria-label=${control2.label}
 				.value=${value === void 0 ? "" : String(value)}
 				?disabled=${disabled}
-				@input=${(event) => host.set(control.key, event.target.value)}
+				@input=${(event) => host.set(control2.key, event.target.value)}
 			/>`;
   return html`<label
-		class="row${control.indent ? " indent" : ""}"
-		data-key=${control.key}
+		class="row${control2.indent ? " indent" : ""}"
+		data-key=${control2.key}
 		?data-disabled=${disabled}
-		title=${ifDefined(control.disabled)}
+		title=${ifDefined(control2.disabled)}
 		>${body}</label
 	>`;
 }
@@ -4179,8 +6233,8 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
   onNavKey(event) {
     const tabs = [...this.renderRoot.querySelectorAll('nav [role="tab"]')];
     const at = tabs.findIndex((tab) => tab.getAttribute("aria-selected") === "true");
-    const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
-    const target = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs.at(-1) : step ? tabs[(at + step + tabs.length) % tabs.length] : void 0;
+    const step2 = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+    const target = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs.at(-1) : step2 ? tabs[(at + step2 + tabs.length) % tabs.length] : void 0;
     if (!target) return;
     event.preventDefault();
     this.category = target.dataset.category;
@@ -4227,7 +6281,7 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
       (section) => html`<section>
 						<h3>${section.title}</h3>
 						${section.description ? html`<p class="desc">${section.description}</p>` : ""}
-						${section.controls.map((control) => optionRow(this, control))}
+						${section.controls.map((control2) => optionRow(this, control2))}
 						${section.slot ? html`<slot name=${section.slot}></slot>` : ""}
 					</section>`
     )}
@@ -4236,11 +6290,11 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
   }
   render() {
     const category = this.categories.find((entry) => entry.id === this.active);
-    const text = { ...DEFAULT_LABELS, ...this.labels };
+    const text2 = { ...DEFAULT_LABELS, ...this.labels };
     return html`
 			<office-ui-dialog
 				heading=${this.heading ?? "Options"}
-				close-label=${text.close}
+				close-label=${text2.close}
 				?open=${present(this.open)}
 				@office-dialog-close=${(event) => {
       if (event.defaultPrevented) return;
@@ -4248,17 +6302,17 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
       else this.close();
     }}
 			>
-				${present(this.customBody) ? html`<div class="custom" @keydown=${this.onPaneKey}><slot name="body"></slot></div>` : this.layout(category, text)}
+				${present(this.customBody) ? html`<div class="custom" @keydown=${this.onPaneKey}><slot name="body"></slot></div>` : this.layout(category, text2)}
 			</office-ui-dialog>
 		`;
   }
-  layout(category, text) {
+  layout(category, text2) {
     return html`
 			<div class="layout">
 				<nav
 					role="tablist"
 					aria-orientation="vertical"
-					aria-label=${text.categories}
+					aria-label=${text2.categories}
 					@keydown=${this.onNavKey}
 				>
 					${this.categories.map(
@@ -4285,11 +6339,11 @@ var OfficeUiOptionsDialog = class extends OfficeElement {
 			</div>
 			<div slot="footer" class="actions">
 				${this.defaults ? html`<button type="button" class="reset" data-action="reset" @click=${this.resetAll}>
-								${text.reset}
+								${text2.reset}
 							</button>` : ""}
-				<button type="button" data-action="cancel" @click=${this.close}>${text.cancel}</button>
+				<button type="button" data-action="cancel" @click=${this.close}>${text2.cancel}</button>
 				<button type="button" class="primary" data-action="ok" @click=${this.commit}>
-					${text.ok}
+					${text2.ok}
 				</button>
 			</div>
 		`;
@@ -4330,9 +6384,9 @@ var OfficeUiToolbar = class extends OfficeElement {
     );
   }
   onKey(event) {
-    const vertical = this.getAttribute("aria-orientation") === "vertical";
-    const next = vertical ? "ArrowDown" : "ArrowRight";
-    const prev = vertical ? "ArrowUp" : "ArrowLeft";
+    const vertical2 = this.getAttribute("aria-orientation") === "vertical";
+    const next = vertical2 ? "ArrowDown" : "ArrowRight";
+    const prev = vertical2 ? "ArrowUp" : "ArrowLeft";
     if (![next, prev, "Home", "End"].includes(event.key)) return;
     const items = this.items();
     const from = items.findIndex((el) => el === event.target || el.contains(event.target));
@@ -4401,17 +6455,17 @@ function positionSelectMenu(menu, trigger, host) {
   menu.style.top = `${Math.max(margin, flip ? rect.top - gap - height : rect.bottom + gap)}px`;
   menu.style.left = `${Math.max(margin, Math.min(rect.left, view.innerWidth - menuWidth - margin))}px`;
 }
-function nextSelectActive(choices, active, step) {
-  for (let i = 0; i < choices.length; i++) {
-    active = (active + step + choices.length) % choices.length;
-    if (!choices[active].disabled && !choices[active].hidden) return active;
+function nextSelectActive(choices2, active, step2) {
+  for (let i = 0; i < choices2.length; i++) {
+    active = (active + step2 + choices2.length) % choices2.length;
+    if (!choices2[active].disabled && !choices2[active].hidden) return active;
   }
   return active;
 }
 var SELECT_PAGE_SIZE = 8;
-function pageSelectActive(choices, active, direction) {
-  const usable = (index) => !choices[index]?.disabled && !choices[index]?.hidden;
-  const last = choices.length - 1;
+function pageSelectActive(choices2, active, direction) {
+  const usable = (index) => !choices2[index]?.disabled && !choices2[index]?.hidden;
+  const last = choices2.length - 1;
   const target = Math.max(0, Math.min(last, Math.max(active, 0) + direction * SELECT_PAGE_SIZE));
   for (let index = target; index >= 0 && index <= last; index -= direction)
     if (usable(index)) return index;
@@ -4480,11 +6534,11 @@ var OfficeUiSelect = class extends OfficeElement {
   }
   get value() {
     const requested = this.requested;
-    const choices = this.choices.length ? this.choices : this.collect();
+    const choices2 = this.choices.length ? this.choices : this.collect();
     if (requested !== null && this.getAttribute("variant") === "ribbon-font") return requested;
-    if (requested !== null && (!choices.length || choices.some((c) => c.value === requested)))
+    if (requested !== null && (!choices2.length || choices2.some((c) => c.value === requested)))
       return requested;
-    return [...this.querySelectorAll("option")].find((option) => option.selected)?.value ?? choices.find((choice) => !choice.disabled && !choice.hidden)?.value ?? choices[0]?.value ?? requested ?? "";
+    return [...this.querySelectorAll("option")].find((option) => option.selected)?.value ?? choices2.find((choice2) => !choice2.disabled && !choice2.hidden)?.value ?? choices2[0]?.value ?? requested ?? "";
   }
   set value(next) {
     this.requested = String(next ?? "");
@@ -4551,8 +6605,8 @@ var OfficeUiSelect = class extends OfficeElement {
     this.choices = this.collect();
     this.requestUpdate();
   }
-  isUsable(choice) {
-    return Boolean(choice) && !choice.disabled && !choice.hidden;
+  isUsable(choice2) {
+    return Boolean(choice2) && !choice2.disabled && !choice2.hidden;
   }
   show() {
     this.choices = this.collect();
@@ -4595,15 +6649,15 @@ var OfficeUiSelect = class extends OfficeElement {
     const { menu, trigger } = this;
     if (this.open && menu && trigger) positionSelectMenu(menu, trigger, this);
   };
-  move(step) {
+  move(step2) {
     if (!this.open) this.show();
-    if (this.open) this.active = nextSelectActive(this.choices, this.active, step);
+    if (this.open) this.active = nextSelectActive(this.choices, this.active, step2);
   }
   commit(index) {
-    const choice = this.choices[index];
-    if (!choice || !this.isUsable(choice)) return;
-    const changed = this.value !== choice.value;
-    this.value = choice.value;
+    const choice2 = this.choices[index];
+    if (!choice2 || !this.isUsable(choice2)) return;
+    const changed = this.value !== choice2.value;
+    this.value = choice2.value;
     this.close();
     this.trigger?.focus();
     if (changed || this.hasAttribute("commit-on-reselect")) {
@@ -4651,7 +6705,7 @@ var OfficeUiSelect = class extends OfficeElement {
     }, 700) ?? 0;
     this.show();
     const index = this.choices.findIndex(
-      (choice) => this.isUsable(choice) && choice.label.toLocaleLowerCase().startsWith(this.search)
+      (choice2) => this.isUsable(choice2) && choice2.label.toLocaleLowerCase().startsWith(this.search)
     );
     if (index >= 0) this.active = index;
   }
@@ -4676,28 +6730,28 @@ var OfficeUiSelect = class extends OfficeElement {
   }
   optionTemplates() {
     let previousGroup = "";
-    return this.choices.map((choice, index) => {
-      if (choice.hidden) return "";
-      const heading = choice.group && choice.group !== previousGroup ? html`<div class="group" role="presentation">${choice.group}</div>` : "";
-      previousGroup = choice.group;
-      const text = choice.displayLabel ?? choice.label;
-      const note = choice.description ? html`<span class="description">${choice.description}</span>` : "";
+    return this.choices.map((choice2, index) => {
+      if (choice2.hidden) return "";
+      const heading = choice2.group && choice2.group !== previousGroup ? html`<div class="group" role="presentation">${choice2.group}</div>` : "";
+      previousGroup = choice2.group;
+      const text2 = choice2.displayLabel ?? choice2.label;
+      const note = choice2.description ? html`<span class="description">${choice2.description}</span>` : "";
       return html`${heading}<div
 					class="option"
 					role="option"
 					id="${this.menuId}-${index}"
 					data-index=${index}
 					?data-active=${this.open && index === this.active}
-					aria-selected=${String(choice.value === this.value)}
-					aria-disabled=${String(choice.disabled)}
-					style=${ifDefined(choice.fontFamily ? `font-family:${choice.fontFamily}` : void 0)}
-					>${text}${note}</div
+					aria-selected=${String(choice2.value === this.value)}
+					aria-disabled=${String(choice2.disabled)}
+					style=${ifDefined(choice2.fontFamily ? `font-family:${choice2.fontFamily}` : void 0)}
+					>${text2}${note}</div
 				>`;
     });
   }
   render() {
     const value = this.value;
-    const shown = this.choices.find((choice) => choice.value === value);
+    const shown = this.choices.find((choice2) => choice2.value === value);
     const name = this.getAttribute("aria-label");
     const open = present(this.open);
     const native = typeof HTMLElement.prototype.showPopover === "function";
@@ -4809,13 +6863,13 @@ var OfficeUiStatusBar = class extends OfficeElement {
 			>${glyph(spec.icon, "icon")}${spec.text ? html`<span class="label">${spec.text}</span>` : ""}</button
 		>`;
   }
-  zoomStep(id, label, icon) {
+  zoomStep(id, label2, icon) {
     return html`<button
 			type="button"
 			class="zoom-step"
 			data-id=${id}
-			title=${label}
-			aria-label=${label}
+			title=${label2}
+			aria-label=${label2}
 			@click=${() => this.activate(id)}
 			@keydown=${this.onKeydown}
 			>${glyph(icon, "icon")}</button
@@ -5397,28 +7451,6 @@ var defineTitleBar = definer("office-ui-title-bar", () => OfficeUiTitleBar, [
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/zoom-slider.css?raw
 var zoom_slider_default = ":host {\n	display: inline-flex;\n	align-items: center;\n	gap: var(--office-space-0);\n	font-size: var(--office-font-size-xs);\n	color: var(--office-foreground);\n	font-family: var(--office-font);\n}\nbutton {\n	box-sizing: border-box;\n	display: inline-grid;\n	place-items: center;\n	min-width: var(--office-target-size);\n	min-height: var(--office-target-size);\n	padding: 0;\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	font-size: var(--office-font-size-lg);\n	line-height: 1;\n	cursor: pointer;\n}\nbutton:hover:not(:disabled) {\n	background: var(--office-background);\n}\nbutton:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\nbutton:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\ninput {\n	width: var(--office-zoom-slider-width);\n	min-width: var(--office-zoom-slider-min-width);\n	margin: 0 var(--office-space-0);\n}\noutput {\n	min-width: var(--office-zoom-value-width);\n	text-align: center;\n	font-variant-numeric: tabular-nums;\n}\nsvg {\n	width: var(--office-icon-size-md);\n	height: var(--office-icon-size-md);\n	fill: none;\n	stroke: currentColor;\n	stroke-width: var(--office-icon-stroke);\n	stroke-linecap: round;\n	stroke-linejoin: round;\n}\n:host(:not([fit])) .fit {\n	display: none;\n}\n\n@media (pointer: coarse), (max-width: 767px) {\n	input {\n		flex: 1;\n	}\n}\n@media (forced-colors: active) {\n	button {\n		color: ButtonText;\n	}\n	button:disabled {\n		color: GrayText;\n	}\n}\n";
 
-// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/form/range-control.css?raw
-var range_control_default = ".office-range-control {\n	accent-color: var(--office-accent);\n}\n.office-range-control:focus-visible {\n	outline: var(--office-focus-width) solid var(--office-ring);\n	outline-offset: calc(var(--office-focus-offset) / 2);\n}\n.office-range-control:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n";
-function rangeControl(options) {
-  return html`<input
-		class="office-range-control"
-		type="range"
-		aria-label=${options.label}
-		aria-valuetext=${options.valueText}
-		min=${options.min}
-		max=${options.max}
-		step=${options.step ?? 1}
-		.value=${String(options.value)}
-		?disabled=${options.disabled}
-		@input=${(event) => {
-    if (!options.disabled) options.onInput(event.target.valueAsNumber);
-  }}
-		@change=${() => {
-    if (!options.disabled) options.onChange();
-  }}
-	/>`;
-}
-
 // src/form/zoom-slider.ts
 var clampTo = (value, min, max) => Math.min(max, Math.max(min, Math.round(value)));
 var finite = (value, fallback) => Number.isFinite(value) ? value : fallback;
@@ -5466,9 +7498,9 @@ var OfficeUiZoomSlider = class extends OfficeElement {
   }
   /** Office buttons snap to the next multiple of `step`, so 67% steps to 70%, not 77%. */
   stepBy(direction) {
-    const step = Math.max(1, finite(this.step, 10));
+    const step2 = Math.max(1, finite(this.step, 10));
     const current = this.value;
-    const next = direction > 0 ? Math.floor(current / step) * step + step : Math.ceil(current / step) * step - step;
+    const next = direction > 0 ? Math.floor(current / step2) * step2 + step2 : Math.ceil(current / step2) * step2 - step2;
     this.commit(next, "change");
   }
   commit(next, type) {
@@ -5586,8 +7618,8 @@ var OFFICE_SYMBOLS = [
   "\u263A",
   "\xBD"
 ];
-function parseOfficeSymbolCode(text) {
-  const match = /^\s*(?:u\+|0x)?([0-9a-f]{1,6})\s*$/i.exec(text);
+function parseOfficeSymbolCode(text2) {
+  const match = /^\s*(?:u\+|0x)?([0-9a-f]{1,6})\s*$/i.exec(text2);
   if (!match) return void 0;
   const code = parseInt(match[1], 16);
   if (code < 32 || code >= 127 && code <= 159 || code >= 55296 && code <= 57343 || (code & 65534) === 65534 || code >= 64976 && code <= 65007 || code > 1114111)
@@ -5685,6 +7717,7 @@ var OfficeUiColorGrid = class extends OfficeElement {
     extraColors: { attribute: false },
     standardColors: { attribute: false },
     recentColors: { attribute: false },
+    recentLabel: { attribute: false },
     value: { type: String },
     label: { type: String },
     noneLabel: { attribute: "none-label", type: String },
@@ -5705,6 +7738,7 @@ var OfficeUiColorGrid = class extends OfficeElement {
     this.extraColors = [];
     this.standardColors = OFFICE_STANDARD_COLORS;
     this.recentColors = [];
+    this.recentLabel = null;
     this.value = null;
     this.label = null;
     this.noneLabel = null;
@@ -5725,9 +7759,9 @@ var OfficeUiColorGrid = class extends OfficeElement {
   items() {
     return [...this.renderRoot.querySelectorAll("button:not(:disabled)")];
   }
-  pick(color, source, label, more = {}) {
+  pick(color, source, label2, more = {}) {
     if (present(this.disabled)) return;
-    emit(this, "office-color-pick", { color, source, label, ...more });
+    emit(this, "office-color-pick", { color, source, label: label2, ...more });
   }
   more() {
     if (!present(this.disabled)) emit(this, "office-color-more", {});
@@ -5743,14 +7777,14 @@ var OfficeUiColorGrid = class extends OfficeElement {
     const from = at(items[current]);
     const inRow = (row) => items.filter((item) => at(item).row === row);
     const rows = [...new Set(items.map((item) => at(item).row))];
-    const vertical = (step) => {
-      const target = rows[rows.indexOf(from.row) + step];
+    const vertical2 = (step2) => {
+      const target = rows[rows.indexOf(from.row) + step2];
       if (target === void 0) return void 0;
       return inRow(target).reduce(
         (best, item) => Math.abs(at(item).column - from.column) < Math.abs(at(best).column - from.column) ? item : best
       );
     };
-    const next = event.key === "ArrowRight" ? items[current + 1] : event.key === "ArrowLeft" ? items[current - 1] : event.key === "ArrowDown" ? vertical(1) : event.key === "ArrowUp" ? vertical(-1) : event.key === "Home" ? items[0] : event.key === "End" ? items.at(-1) : void 0;
+    const next = event.key === "ArrowRight" ? items[current + 1] : event.key === "ArrowLeft" ? items[current - 1] : event.key === "ArrowDown" ? vertical2(1) : event.key === "ArrowUp" ? vertical2(-1) : event.key === "Home" ? items[0] : event.key === "End" ? items.at(-1) : void 0;
     if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(event.key))
       return;
     if (!next && (event.key === "ArrowDown" || event.key === "ArrowUp")) return;
@@ -5768,7 +7802,7 @@ var OfficeUiColorGrid = class extends OfficeElement {
     const position = this.selectedTheme;
     const checked = (item, source, column) => position ? source === "theme" && column === position.column && item.variant?.kind === position.variant?.kind && item.variant?.percent === position.variant?.percent : value === item.hex;
     let row = 0;
-    const command = (text, name2, checked2, run) => html`<button
+    const command = (text2, name2, checked2, run) => html`<button
 				type="button"
 				class="command"
 				data-command=${name2}
@@ -5778,7 +7812,7 @@ var OfficeUiColorGrid = class extends OfficeElement {
 				aria-checked=${checked2 === void 0 ? nothing : String(checked2)}
 				?disabled=${disabled}
 				@click=${run}
-				>${text}</button
+				>${text2}</button
 			>`;
     const swatch = (item, source, column) => html`<button
 				type="button"
@@ -5817,7 +7851,10 @@ var OfficeUiColorGrid = class extends OfficeElement {
       const item = column.variants[index];
       return item && name ? { ...item, label: name(column.name, item.variant) } : item;
     });
-    const recent = (this.recentColors ?? []).map((hex) => normalizePaletteHex(hex)).filter((hex) => !!hex).slice(0, COLUMNS).map((hex) => ({ hex, label: hex.toUpperCase() }));
+    const recent = (this.recentColors ?? []).map((hex) => normalizePaletteHex(hex)).filter((hex) => !!hex).slice(0, COLUMNS).map((hex) => {
+      const upper = hex.toUpperCase();
+      return { hex, label: this.recentLabel?.(upper) ?? upper };
+    });
     const automatic = this.automaticLabel;
     const none = this.noneLabel;
     const more = this.moreLabel;
@@ -5828,17 +7865,17 @@ var OfficeUiColorGrid = class extends OfficeElement {
       value === "automatic",
       () => this.pick("automatic", "automatic", automatic)
     ) : nothing}${none ? command(none, "none", value === "none", () => this.pick("none", "none", none)) : nothing}
-			<div class="heading">${this.themeHeading}</div>
-			${cells(
+			${palette.length ? html`<div class="heading">${this.themeHeading}</div>
+							${cells(
       palette.map((column) => column.base),
       "theme",
-      palette.length || COLUMNS
+      palette.length
     )}
-			<div class="variants"
-				>${[0, 1, 2, 3, 4].map(
-      (index) => cells(variants(index), "theme", palette.length || COLUMNS)
+							<div class="variants"
+								>${[0, 1, 2, 3, 4].map(
+      (index) => cells(variants(index), "theme", palette.length)
     )}</div
-			>
+							>` : nothing}
 			${extra.length ? cells(extra, "extra") : nothing}
 			${standard.length ? html`<div class="heading">${this.standardHeading}</div> ${cells(standard, "standard")}` : nothing}
 			${recent.length ? html`<div class="heading">${this.recentHeading}</div> ${cells(recent, "recent")}` : nothing}
@@ -5932,18 +7969,18 @@ var OfficeUiColorCustom = class extends OfficeElement {
     };
   }
   squareKey(event) {
-    const step = event.shiftKey ? 10 : 1;
+    const step2 = event.shiftKey ? 10 : 1;
     const { h, s } = this.hsl;
-    const next = event.key === "ArrowRight" ? { h: clamp(h + step * (360 / SCALE), 359.999) } : event.key === "ArrowLeft" ? { h: clamp(h - step * (360 / SCALE), 359.999) } : event.key === "ArrowUp" ? { s: clamp(s + step / SCALE) } : event.key === "ArrowDown" ? { s: clamp(s - step / SCALE) } : event.key === "Home" ? { h: 0 } : event.key === "End" ? { h: 359.999 } : void 0;
+    const next = event.key === "ArrowRight" ? { h: clamp(h + step2 * (360 / SCALE), 359.999) } : event.key === "ArrowLeft" ? { h: clamp(h - step2 * (360 / SCALE), 359.999) } : event.key === "ArrowUp" ? { s: clamp(s + step2 / SCALE) } : event.key === "ArrowDown" ? { s: clamp(s - step2 / SCALE) } : event.key === "Home" ? { h: 0 } : event.key === "End" ? { h: 359.999 } : void 0;
     if (!next) return;
     event.preventDefault();
     event.stopPropagation();
     this.set(next);
   }
   sliderKey(event) {
-    const step = (event.shiftKey ? 10 : 1) / SCALE;
+    const step2 = (event.shiftKey ? 10 : 1) / SCALE;
     const { l } = this.hsl;
-    const next = event.key === "ArrowUp" || event.key === "ArrowRight" ? clamp(l + step) : event.key === "ArrowDown" || event.key === "ArrowLeft" ? clamp(l - step) : event.key === "Home" ? 0 : event.key === "End" ? 1 : void 0;
+    const next = event.key === "ArrowUp" || event.key === "ArrowRight" ? clamp(l + step2) : event.key === "ArrowDown" || event.key === "ArrowLeft" ? clamp(l - step2) : event.key === "Home" ? 0 : event.key === "End" ? 1 : void 0;
     if (next === void 0) return;
     event.preventDefault();
     event.stopPropagation();
@@ -5978,10 +8015,10 @@ var OfficeUiColorCustom = class extends OfficeElement {
   }
   onHex(event) {
     if (present(this.disabled)) return;
-    const text = event.target.value;
-    const color = /^#?[0-9a-f]{6}$/i.test(text.trim()) ? normalizePaletteHex(text) : void 0;
+    const text2 = event.target.value;
+    const color = /^#?[0-9a-f]{6}$/i.test(text2.trim()) ? normalizePaletteHex(text2) : void 0;
     if (!color) {
-      this.typed = text;
+      this.typed = text2;
       return;
     }
     const rgb = hexToRgbChannels(color);
@@ -6051,8 +8088,8 @@ var OfficeUiColorCustom = class extends OfficeElement {
 						@input=${this.onHex}
 				/></label>
 				${CHANNELS.map(
-      ([name, text]) => html`<label
-							><span>${text}</span
+      ([name, text2]) => html`<label
+							><span>${text2}</span
 							><input
 								type="number"
 								min="0"
@@ -6200,17 +8237,17 @@ var OfficeUiChartPicker = class extends OfficeElement {
   }
   render() {
     defineGallery(this.ownerDocument.defaultView?.customElements);
-    const text = this.text;
+    const text2 = this.text;
     const hasGrouping = this.groupingList.length > 0 && this.grouped.includes(this.choice.type);
     return html`<office-ui-gallery
 				mode="panel"
 				@office-gallery-pick=${(event) => this.picked(event)}
 			></office-ui-gallery
 			>${hasGrouping ? html`<label class="field"
-							><span>${text.grouping}</span
+							><span>${text2.grouping}</span
 							><select
 								data-key="grouping"
-								aria-label=${text.grouping}
+								aria-label=${text2.grouping}
 								@change=${(event) => this.edit({ grouping: event.target.value })}
 								>${this.groupingList.map(
       (grouping) => html`<option
@@ -6221,28 +8258,315 @@ var OfficeUiChartPicker = class extends OfficeElement {
     )}</select
 							></label
 						>` : nothing}${this.changeOnly ? nothing : html`<label class="field"
-							><span>${text.title}</span
+							><span>${text2.title}</span
 							><input
 								data-key="title"
 								type="text"
-								aria-label=${text.title}
+								aria-label=${text2.title}
 								.value=${this.choice.title}
 								@input=${(event) => this.edit({ title: event.target.value })}
 						/></label>`}${this.choice.data === void 0 || this.changeOnly ? nothing : html`<label class="field"
-							><span>${text.data}</span
+							><span>${text2.data}</span
 							><textarea
 								data-key="data"
 								rows="5"
 								spellcheck="false"
-								aria-label=${text.data}
+								aria-label=${text2.data}
 								.value=${this.choice.data}
 								@input=${(event) => this.edit({ data: event.target.value })}
 							></textarea
-							><small>${text.dataHint}</small></label
-						>`} <div class="preview" role="img" aria-label=${text.preview}></div>`;
+							><small>${text2.dataHint}</small></label
+						>`} <div class="preview" role="img" aria-label=${text2.preview}></div>`;
   }
 };
 var defineChartPicker = definer("office-ui-chart-picker", () => OfficeUiChartPicker);
+
+// src/chart/data-sheet-keys.ts
+var STEPS = {
+  ArrowUp: [-1, 0],
+  ArrowDown: [1, 0],
+  ArrowLeft: [0, -1],
+  ArrowRight: [0, 1]
+};
+function exists(row, col, rows, cols) {
+  return row >= 0 && col >= 0 && row < rows && col < cols && !(row === 0 && col === 0);
+}
+function step(row, col, [dr, dc], rows, cols) {
+  return exists(row + dr, col + dc, rows, cols) ? { row: row + dr, col: col + dc } : { row, col };
+}
+function chartDataSheetKeyAction(key, mode, row, col, rows, cols) {
+  if (key.ctrlKey || key.metaKey || key.altKey) return { type: "native" };
+  const arrow = STEPS[key.key];
+  if (arrow) {
+    return mode === "edit" ? { type: "native" } : { type: "move", ...step(row, col, arrow, rows, cols) };
+  }
+  switch (key.key) {
+    case "F2":
+      return { type: "edit" };
+    case "Escape":
+      return { type: "revert" };
+    case "Enter":
+      return { type: "move", ...step(row, col, key.shiftKey ? [-1, 0] : [1, 0], rows, cols) };
+    case "Tab": {
+      const target = step(row, col, key.shiftKey ? [0, -1] : [0, 1], rows, cols);
+      return target.col === col ? { type: "native" } : { type: "move", ...target };
+    }
+    case "Backspace":
+    case "Delete":
+      return mode === "ready" ? { type: "typing" } : { type: "native" };
+    default:
+      return key.key.length === 1 && mode === "ready" ? { type: "typing" } : { type: "native" };
+  }
+}
+
+// src/chart/data-sheet-labels.ts
+var CHART_DATA_SHEET_ENGLISH = {
+  heading: "Data",
+  addCategory: "Add category",
+  addSeries: "Add series",
+  addCategoryShort: "Cat",
+  addSeriesShort: "Series",
+  removeCategory: "Remove category",
+  removeSeries: "Remove series",
+  categories: "Categories",
+  seriesName: "Series {number}",
+  categoryLabel: "Categories {number}",
+  valueCell: "{name} value {number}",
+  summary: "{series} series \xB7 {categories} categories",
+  invalidNumber: "Enter a number"
+};
+function fill2(template, values) {
+  return template.replace(
+    /\{\{?(\w+)\}?\}/g,
+    (whole, key) => key in values ? String(values[key]) : whole
+  );
+}
+
+// raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/chart/data-sheet.css?raw
+var data_sheet_default = ":host {\n	display: flex;\n	flex-direction: column;\n	gap: var(--office-space-1-5);\n	min-width: 0;\n	font-family: var(--office-font);\n	font-size: var(--office-font-size-xs);\n	color: var(--office-foreground);\n}\n:host([hidden]),\n[hidden] {\n	display: none !important;\n}\n.head {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-1-5);\n}\n.heading {\n	font-weight: var(--office-font-weight-bold);\n}\n.actions {\n	display: flex;\n	gap: var(--office-space-1);\n	margin-inline-start: auto;\n}\n.actions button {\n	min-height: var(--office-control-height-xs);\n	padding: 0 var(--office-space-1-5);\n	border: var(--office-border-width) solid var(--office-border);\n	border-radius: var(--office-radius-sm);\n	background: var(--office-surface);\n	color: inherit;\n	font: inherit;\n	cursor: pointer;\n}\n.actions button:hover {\n	background: var(--office-selected);\n}\n.summary,\n.status {\n	color: var(--office-muted-foreground);\n}\n.status:empty {\n	display: none;\n}\n/* Wide sheets scroll inside the element; the pane around it never scrolls sideways. */\n.scroll {\n	overflow-x: auto;\n}\ntable {\n	width: 100%;\n	border-collapse: collapse;\n}\nth,\ntd {\n	min-width: calc(var(--office-space-4) * 4);\n	padding: var(--office-space-px);\n	border: var(--office-border-width) solid var(--office-border);\n	font-weight: normal;\n	text-align: start;\n}\nthead th,\nth.category {\n	background: var(--office-surface);\n}\n/* The category column stays in view while the value columns scroll. */\nth.corner,\nth.category {\n	position: sticky;\n	inset-inline-start: 0;\n	z-index: 1;\n}\n.header {\n	display: flex;\n	align-items: center;\n	gap: var(--office-space-0);\n}\n.cell {\n	box-sizing: border-box;\n	width: 100%;\n	min-width: 0;\n	height: var(--office-control-height-xs);\n	padding: 0 var(--office-space-1);\n	border: var(--office-border-width) solid transparent;\n	border-radius: var(--office-radius-xs);\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	outline: none;\n}\ntd .cell {\n	text-align: end;\n	font-variant-numeric: tabular-nums;\n}\n.cell:focus {\n	border-color: var(--office-accent);\n	background: var(--office-background);\n}\n.cell:disabled {\n	opacity: 0.6;\n}\n/* The cell of the chart part picked on the canvas. */\n.cell.highlight {\n	box-shadow: inset 0 0 0 var(--office-border-width) var(--office-accent);\n}\n.remove {\n	flex: none;\n	width: var(--office-icon-size-md);\n	padding: 0;\n	border: none;\n	background: transparent;\n	color: var(--office-muted-foreground);\n	cursor: pointer;\n}\n.remove:hover {\n	color: var(--office-danger);\n}\n@media (pointer: coarse), (max-width: 767px) {\n	.actions button,\n	.remove {\n		min-width: var(--office-touch-target);\n		min-height: var(--office-touch-target);\n	}\n}\n";
+
+// src/chart/data-sheet.ts
+var EMPTY2 = { categories: [], series: [] };
+var OfficeUiChartDataSheet = class extends OfficeElement {
+  static styles = controlStyles(data_sheet_default);
+  static properties = {
+    data: { attribute: false },
+    highlight: { attribute: false },
+    disabled: { type: Boolean, reflect: true },
+    locale: { type: String }
+  };
+  text = CHART_DATA_SHEET_ENGLISH;
+  mode = "ready";
+  invalid = false;
+  highlightKey = null;
+  constructor() {
+    super();
+    this.data = EMPTY2;
+    this.highlight = null;
+    this.disabled = false;
+    this.locale = "";
+  }
+  get labels() {
+    return this.text;
+  }
+  set labels(value) {
+    this.text = { ...CHART_DATA_SHEET_ENGLISH, ...value };
+    this.requestUpdate("labels");
+  }
+  /** The number convention: `locale`, else the browser's, as Office follows the system locale. */
+  get language() {
+    return this.locale || globalThis.navigator?.language || void 0;
+  }
+  parse = (raw) => parseLocaleNumber(raw, this.language);
+  /** The text a cell shows for the current data. */
+  cellText(row, col) {
+    if (row === 0) return this.data.series[col - 1]?.name ?? "";
+    if (col === 0) return this.data.categories[row - 1] ?? "";
+    const value = this.data.series[col - 1]?.values[row - 1];
+    return typeof value === "number" ? formatLocaleNumber(value, this.language) : "";
+  }
+  /**
+   * Applies `edits` to the shown data and emits them. Product subclasses override this to map
+   * the edits onto their own model as well.
+   */
+  emitEdits(edits) {
+    if (edits.length === 0 || this.disabled) return;
+    this.data = applyChartDataSheetEdits(this.data, edits);
+    const detail = { edits, data: this.data };
+    this.fire("office-chart-data-change", detail);
+  }
+  position(input) {
+    return { row: Number(input.dataset.row), col: Number(input.dataset.col) };
+  }
+  commit(input) {
+    const cell = this.position(input);
+    if (input.value === this.cellText(cell.row, cell.col)) return;
+    const edit = chartDataSheetCellEdit(cell, input.value, this.parse);
+    this.invalid = edit === null;
+    if (edit) this.emitEdits([edit]);
+    this.requestUpdate();
+  }
+  focusCell(row, col) {
+    const cell = this.renderRoot.querySelector(
+      `input[data-row="${row}"][data-col="${col}"]`
+    );
+    cell?.focus();
+    cell?.select();
+  }
+  onKeyDown(event) {
+    event.stopPropagation();
+    const input = event.target;
+    const { row, col } = this.position(input);
+    const rows = this.data.categories.length + 1;
+    const cols = this.data.series.length + 1;
+    const action = chartDataSheetKeyAction(event, this.mode, row, col, rows, cols);
+    if (action.type === "native") return;
+    if (action.type === "typing") {
+      this.mode = "enter";
+      return;
+    }
+    event.preventDefault();
+    if (action.type === "edit") {
+      this.mode = "edit";
+      input.setSelectionRange(input.value.length, input.value.length);
+    } else if (action.type === "revert") {
+      input.value = this.cellText(row, col);
+      this.mode = "ready";
+      this.invalid = false;
+      this.requestUpdate();
+      input.select();
+    } else {
+      this.commit(input);
+      this.focusCell(action.row, action.col);
+    }
+  }
+  onFocus(event) {
+    this.mode = "ready";
+    event.target.select();
+  }
+  onPaste(event) {
+    event.stopPropagation();
+    const text2 = event.clipboardData?.getData("text/plain") ?? "";
+    if (!/[\t\n\r]/.test(text2.replace(/\r?\n$/, ""))) return;
+    event.preventDefault();
+    const anchor = this.position(event.target);
+    this.emitEdits(chartDataSheetPasteEdits(this.data, anchor, parseTsv(text2), this.parse));
+  }
+  updated() {
+    const { highlight } = this;
+    const key = highlight ? `${highlight.series}:${highlight.point ?? ""}` : null;
+    if (key !== null && key !== this.highlightKey) {
+      this.renderRoot.querySelector(".highlight")?.scrollIntoView?.({
+        block: "nearest",
+        inline: "nearest"
+      });
+    }
+    this.highlightKey = key;
+  }
+  cell(row, col, label2, marked) {
+    return html`<input
+			type="text"
+			class=${marked ? "cell highlight" : "cell"}
+			inputmode=${row > 0 && col > 0 ? "decimal" : "text"}
+			data-row=${row}
+			data-col=${col}
+			aria-label=${label2}
+			?disabled=${this.disabled}
+			.value=${live(this.cellText(row, col))}
+			@focus=${this.onFocus}
+			@keydown=${this.onKeyDown}
+			@change=${(event) => this.commit(event.target)}
+			@paste=${this.onPaste}
+			@copy=${(event) => event.stopPropagation()}
+			@cut=${(event) => event.stopPropagation()}
+		/>`;
+  }
+  removeButton(label2, edit) {
+    return html`<button
+			type="button"
+			class="remove"
+			title=${label2}
+			aria-label=${label2}
+			@click=${() => this.emitEdits([edit])}
+			>×</button
+		>`;
+  }
+  render() {
+    const { categories, series } = this.data;
+    const t2 = this.text;
+    const edit = !this.disabled;
+    const mark = this.highlight;
+    return html`<div class="head"
+				><span class="heading">${t2.heading}</span>${edit ? html`<span class="actions"
+								><button
+									type="button"
+									data-action="add-category"
+									title=${t2.addCategory}
+									aria-label=${t2.addCategory}
+									@click=${() => this.emitEdits([{ kind: "add-category" }])}
+									>+ ${t2.addCategoryShort}</button
+								><button
+									type="button"
+									data-action="add-series"
+									title=${t2.addSeries}
+									aria-label=${t2.addSeries}
+									@click=${() => this.emitEdits([{ kind: "add-series" }])}
+									>+ ${t2.addSeriesShort}</button
+								></span
+							>` : nothing}</div
+			><div class="summary"
+				>${fill2(t2.summary, { series: series.length, categories: categories.length })}</div
+			><div class="scroll"
+				><table role="grid" aria-label=${t2.heading}
+					><thead
+						><tr
+							><th class="corner" aria-label=${t2.categories}></th>${series.map(
+      (entry, index) => html`<th
+										><span class="header"
+											>${this.cell(
+        0,
+        index + 1,
+        fill2(t2.seriesName, { number: index + 1 }),
+        mark?.series === index && mark.point === void 0
+      )}${edit && series.length > 1 ? this.removeButton(t2.removeSeries, {
+        kind: "remove-series",
+        series: index
+      }) : nothing}</span
+										></th
+									>`
+    )}</tr
+						></thead
+					><tbody
+						>${categories.map(
+      (_, row) => html`<tr
+									><th class="category"
+										><span class="header"
+											>${this.cell(row + 1, 0, fill2(t2.categoryLabel, { number: row + 1 }), false)}${edit && categories.length > 1 ? this.removeButton(t2.removeCategory, {
+        kind: "remove-category",
+        category: row
+      }) : nothing}</span
+										></th
+									>${series.map(
+        (entry, col) => html`<td
+												>${this.cell(
+          row + 1,
+          col + 1,
+          fill2(t2.valueCell, { name: entry.name, number: row + 1 }),
+          mark?.series === col && mark.point === row
+        )}</td
+											>`
+      )}</tr
+								>`
+    )}</tbody
+					></table
+				></div
+			><div class="status" role="status">${this.invalid ? t2.invalidNumber : ""}</div>`;
+  }
+};
+var defineChartDataSheet = definer(
+  "office-ui-chart-data-sheet",
+  () => OfficeUiChartDataSheet
+);
 function deepActiveElement(doc) {
   let active = doc.activeElement;
   while (active?.shadowRoot?.activeElement) {
@@ -6519,14 +8843,14 @@ function attachKeyTips(scope) {
 
 // src/ribbon/keytip-run.ts
 var clash = (used, key) => used.some((other) => other.startsWith(key) || key.startsWith(other));
-function assignKeyTips(targets, label) {
+function assignKeyTips(targets, label2) {
   const used = [];
   for (const target of targets) {
     if (target.key && !clash(used, target.key)) used.push(target.key);
     else target.key = "";
   }
   for (const target of targets.filter((item) => !item.key)) {
-    const source = label(target).toUpperCase().replace(/[^A-Z0-9]/g, "") || "ZZ";
+    const source = label2(target).toUpperCase().replace(/[^A-Z0-9]/g, "") || "ZZ";
     let key = "";
     for (let a = 0; a < source.length && !key; a++)
       for (let b = a + 1; b < source.length && !key; b++) {
@@ -6595,17 +8919,17 @@ function ensureRibbonTouchStyle(node) {
   style.textContent = scroll_more_default;
   host.append(style);
 }
-function syncScrollMore(panel, label = "More") {
+function syncScrollMore(panel, label2 = "More") {
   panel.querySelector(`:scope > .${CLASS}`)?.remove();
   if (panel.hidden || panel.scrollWidth <= panel.clientWidth + 1) return;
   ensureRibbonTouchStyle(panel);
   const doc = panel.ownerDocument;
-  const text = typeof label === "function" ? label(panel) : label;
+  const text2 = typeof label2 === "function" ? label2(panel) : label2;
   const button = doc.createElement("button");
   button.type = "button";
   button.className = CLASS;
-  button.setAttribute("aria-label", text);
-  button.title = text;
+  button.setAttribute("aria-label", text2);
+  button.title = text2;
   button.textContent = "\u203A";
   button.addEventListener("mousedown", (event) => event.preventDefault());
   button.addEventListener("click", () => {
@@ -6721,12 +9045,12 @@ function createRibbonOverflow(options) {
         button = overflowButton(group);
         group.append(button);
       }
-      const label = group.dataset.caption ?? group.dataset.label ?? "";
+      const label2 = group.dataset.caption ?? group.dataset.label ?? "";
       const span = button.querySelector("span");
-      if (options.setCaption) options.setCaption(span, label);
-      else span.textContent = label;
-      button.setAttribute("aria-label", label);
-      button.title = label;
+      if (options.setCaption) options.setCaption(span, label2);
+      else span.textContent = label2;
+      button.setAttribute("aria-label", label2);
+      button.title = label2;
       group.setAttribute("data-collapsed", "");
     }
     syncScrollMore(panel, options.moreLabel);
@@ -6970,48 +9294,48 @@ var UNAVAILABLE = {
     reason: "Not available. Documents stay local and active content is never run."
   }
 };
-function optionText(context, text) {
-  return context.t(text).replace("{product}", context.product);
+function optionText(context, text2) {
+  return context.t(text2).replace("{product}", context.product);
 }
-function unavailableCategory(context, kind, text = {}) {
+function unavailableCategory(context, kind, text2 = {}) {
   const entry = UNAVAILABLE[kind];
   return {
     id: entry.id,
     label: context.t(entry.label),
-    description: optionText(context, text.description ?? entry.description),
+    description: optionText(context, text2.description ?? entry.description),
     sections: [],
-    disabled: optionText(context, text.reason ?? entry.reason)
+    disabled: optionText(context, text2.reason ?? entry.reason)
   };
 }
-function unavailableControl(context, control, reason) {
-  return { ...control, disabled: context.t(reason) };
+function unavailableControl(context, control2, reason) {
+  return { ...control2, disabled: context.t(reason) };
 }
 function userInterfaceSection(context) {
-  const { t } = context;
+  const { t: t2 } = context;
   return {
     id: "ui",
-    title: t("User Interface options"),
+    title: t2("User Interface options"),
     controls: [
       {
         kind: "toggle",
         key: "miniToolbar",
-        label: t("Show Mini Toolbar on selection"),
-        disabled: t("Not available yet. Needs rich text formatting.")
+        label: t2("Show Mini Toolbar on selection"),
+        disabled: t2("Not available yet. Needs rich text formatting.")
       },
       {
         kind: "toggle",
         key: "livePreview",
-        label: t("Enable Live Preview"),
-        disabled: t(
+        label: t2("Enable Live Preview"),
+        disabled: t2(
           "Not available yet. Styles are applied on click; hover previews are not drawn yet."
         )
       },
       {
         kind: "select",
         key: "screenTips",
-        label: t("ScreenTip style"),
-        choices: [{ value: "descriptions", label: t("Show feature descriptions in ScreenTips") }],
-        disabled: t("Not available yet. ScreenTips always describe the command.")
+        label: t2("ScreenTip style"),
+        choices: [{ value: "descriptions", label: t2("Show feature descriptions in ScreenTips") }],
+        disabled: t2("Not available yet. ScreenTips always describe the command.")
       }
     ]
   };
@@ -7025,13 +9349,13 @@ function personalizeSection(context, controls, description) {
   };
 }
 function optionsLabels(context) {
-  const { t } = context;
+  const { t: t2 } = context;
   return {
-    ok: t("OK"),
-    cancel: t("Cancel"),
-    reset: t("Reset all options"),
-    categories: t("Categories"),
-    close: t("Close")
+    ok: t2("OK"),
+    cancel: t2("Cancel"),
+    reset: t2("Reset all options"),
+    categories: t2("Categories"),
+    close: t2("Close")
   };
 }
 
@@ -7075,14 +9399,16 @@ var CONTROL_DEFINERS = [
   defineRibbonSection,
   defineGallery,
   defineCommentsPane,
+  defineChartFormatPane,
   defineSymbolPicker,
   defineColorGrid,
   defineColorCustom,
   defineChartPicker,
+  defineChartDataSheet,
   defineProgressDialog
 ];
 function registerControls(registry) {
   for (const define of CONTROL_DEFINERS) define(registry);
 }
 
-export { CONTROL_DEFINERS, DEFAULT_COMMENTS_LABELS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_COLOR_SWATCHES, OFFICE_COLOR_SWATCH_HEXES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_SYMBOLS, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, assignKeyTips, attachKeyTips, attachRibbonGroupOverflow, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, commentInitials, createRibbonOverflow, defineAccount, defineBackstage, defineButton, defineChartPicker, defineCheckbox, defineColorCustom, defineColorGrid, defineCommandSearch, defineCommentsPane, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineProgressDialog, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonActions, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineSymbolPicker, defineTabStrip, defineTaskPane, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, fitRibbonGroups, formatCommentTime, glyph, nextEnabledIndex, optionText, optionsLabels, parseOfficeSymbolCode, parseSvgPreview, personalizeSection, profileInitials, rangeControl, range_control_default, readOfficeProfile, registerControls, rulerDivisions, runKeyTips, sanitizeOfficeProfile, typeAheadIndex, unavailableCategory, unavailableControl, userInterfaceSection, writeOfficeProfile };
+export { CONTROL_DEFINERS, DEFAULT_COMMENTS_LABELS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_COLOR_SWATCHES, OFFICE_COLOR_SWATCH_HEXES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_SYMBOLS, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, OfficeUiChartFormatPane, assignKeyTips, attachKeyTips, attachRibbonGroupOverflow, buildChartFormatModel, chartFormatFieldIntent, chartFormatLocale, chartFormatPaneTitle, chartFormatSourceTabs, chartFormatTargetLabel, chartFormatTargetOptions, chartFormatTranslator, chartSpaceFormatSource, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, commentInitials, createRibbonOverflow, defaultPaneGradient, defineAccount, defineBackstage, defineButton, defineChartDataSheet, defineChartFormatPane, defineChartPicker, defineCheckbox, defineColorCustom, defineColorGrid, defineCommandSearch, defineCommentsPane, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineProgressDialog, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonActions, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineSymbolPicker, defineTabStrip, defineTaskPane, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, drawingColorFromHex, drawingGradientFrom, fitRibbonGroups, formatCommentTime, glyph, hexForInput, nextEnabledIndex, optionText, optionsLabels, parseOfficeSymbolCode, personalizeSection, profileInitials, rangeControl, range_control_default, readOfficeProfile, registerControls, resolveChartFormatSourceTarget, rulerDivisions, runKeyTips, sanitizeOfficeProfile, translateChartFormatText, typeAheadIndex, unavailableCategory, unavailableControl, userInterfaceSection, writeOfficeProfile };