pptx-angular-viewer 1.16.1 → 1.17.1

package/CHANGELOG.md

@@ -4,6 +4,24 @@ All notable changes to this project are documented here.
 This file is generated from [Conventional Commits](https://www.conventionalcommits.org)
 by [git-cliff](https://git-cliff.org); do not edit it by hand.
 
+## [1.17.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.17.0) - 2026-07-13
+
+### Bug Fixes
+
+- **build:** Restore compatibility after dependency updates (by @ChristopherVR) ([ddbfae6](https://github.com/ChristopherVR/pptx-viewer/commit/ddbfae687669b9e6c64fd3c3b16a592623b79c10))
+
+### Dependencies
+
+- **deps:** Update html2canvas-pro to 2.2.3 (by @dependabot[bot]) ([0fe015b](https://github.com/ChristopherVR/pptx-viewer/commit/0fe015b83722534f14864b2054ce6561b09386ca))
+- **deps:** Update angular compiler to 22.0.6 (by @dependabot[bot]) ([3990f82](https://github.com/ChristopherVR/pptx-viewer/commit/3990f821128012438f9e72337b293fce7110d0fc))
+- **deps:** Update fast-xml-parser to 5.10.0 (by @dependabot[bot]) ([6080273](https://github.com/ChristopherVR/pptx-viewer/commit/6080273f6a6f603d10d69a71d54faad1e6d9bf05))
+- **deps:** Update angular vite plugin to 2.6.3 (by @dependabot[bot]) ([f3c664e](https://github.com/ChristopherVR/pptx-viewer/commit/f3c664e28425ff0059073b3119f215e981f56d00))
+- **deps:** Update dompurify to 3.4.12 (by @dependabot[bot]) ([00a6ca4](https://github.com/ChristopherVR/pptx-viewer/commit/00a6ca49609d5a0e922a9e20447460b11ec690ba))
+- **deps:** Update minor and patch dependencies (by @dependabot[bot]) ([5cd81fb](https://github.com/ChristopherVR/pptx-viewer/commit/5cd81fb0c8708e53990ac4858660d0b6a4b17a7a))
+- **deps:** Update typescript to 7.0.2 (by @dependabot[bot]) ([0a7c1f1](https://github.com/ChristopherVR/pptx-viewer/commit/0a7c1f1f7f0ccdee9537f1e11177b6a39839d221))
+
+## [1.16.1](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.16.1) - 2026-07-13
+
 ## [1.16.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.16.0) - 2026-07-11
 
 ## [1.15.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/pptx-angular-viewer@1.15.0) - 2026-07-11

package/fesm2022/pptx-angular-viewer.mjs

@@ -3736,6 +3736,80 @@ function getWarpCssTransform(preset, adj, adj2) {
     return undefined;
 }
 
+/**
+ * Read the first explicit DrawingML run colour nested inside an OMML tree.
+ * Office Math stores formatting in `a:rPr`, not in `m:rPr`, so this colour
+ * must travel with the generated MathML rather than the text shape's default
+ * paragraph style.
+ */
+function getOmmlMathColor(node) {
+    if (!node || typeof node !== 'object') {
+        return undefined;
+    }
+    const drawingRunProperties = node['a:rPr'];
+    if (drawingRunProperties && typeof drawingRunProperties === 'object') {
+        const solidFill = drawingRunProperties['a:solidFill'];
+        const srgbColor = solidFill && typeof solidFill === 'object'
+            ? solidFill['a:srgbClr']
+            : undefined;
+        const value = srgbColor?.['@_val'];
+        if (typeof value === 'string' && /^[0-9a-f]{6}$/iu.test(value)) {
+            return `#${value.toUpperCase()}`;
+        }
+    }
+    for (const value of Object.values(node)) {
+        if (Array.isArray(value)) {
+            for (const child of value) {
+                if (child && typeof child === 'object') {
+                    const color = getOmmlMathColor(child);
+                    if (color) {
+                        return color;
+                    }
+                }
+            }
+        }
+        else if (value && typeof value === 'object') {
+            const color = getOmmlMathColor(value);
+            if (color) {
+                return color;
+            }
+        }
+    }
+    return undefined;
+}
+/** Read the first explicit DrawingML run size, stored in hundredths of a point. */
+function getOmmlMathFontSize(node) {
+    if (!node || typeof node !== 'object') {
+        return undefined;
+    }
+    const drawingRunProperties = node['a:rPr'];
+    if (drawingRunProperties && typeof drawingRunProperties === 'object') {
+        const size = Number(drawingRunProperties['@_sz']);
+        if (Number.isFinite(size) && size > 0) {
+            return size / 100;
+        }
+    }
+    for (const value of Object.values(node)) {
+        if (Array.isArray(value)) {
+            for (const child of value) {
+                if (child && typeof child === 'object') {
+                    const size = getOmmlMathFontSize(child);
+                    if (size) {
+                        return size;
+                    }
+                }
+            }
+        }
+        else if (value && typeof value === 'object') {
+            const size = getOmmlMathFontSize(value);
+            if (size) {
+                return size;
+            }
+        }
+    }
+    return undefined;
+}
+
 /**
  * omml-to-mathml.ts — pure OMML → MathML conversion.
  *
@@ -4250,7 +4324,11 @@ function convertOmmlToMathMl(ommlNode) {
     if (inner.length === 0) {
         return '';
     }
-    return `<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline">${inner}</math>`;
+    const color = getOmmlMathColor(ommlNode);
+    const colorAttribute = color ? ` mathcolor="${color}"` : '';
+    const fontSize = getOmmlMathFontSize(ommlNode);
+    const sizeAttribute = fontSize ? ` mathsize="${fontSize}pt"` : '';
+    return `<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"${colorAttribute}${sizeAttribute}>${inner}</math>`;
 }
 /**
  * Convenience alias used by the Vue viewer: `ommlToMathml(omml)`.
@@ -16722,6 +16800,37 @@ function mergeAdditiveSelection(baseSelectionIds, hitIds) {
     return Array.from(new Set([...(baseSelectionIds ?? []), ...hitIds]));
 }
 
+/** Union of all selected element boxes, or null for an empty selection. */
+function selectionBounds(boxes) {
+    if (boxes.length === 0) {
+        return null;
+    }
+    const minX = Math.min(...boxes.map((box) => box.x));
+    const minY = Math.min(...boxes.map((box) => box.y));
+    const maxX = Math.max(...boxes.map((box) => box.x + box.width));
+    const maxY = Math.max(...boxes.map((box) => box.y + box.height));
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY, rotation: 0 };
+}
+/** Move all boxes by the same slide-space delta. */
+function moveSelection(boxes, dx, dy) {
+    return boxes.map((box) => ({ ...box, x: box.x + dx, y: box.y + dy }));
+}
+/**
+ * Scale boxes from one selection boundary into another. Each element keeps its
+ * relative position and size within the collective selection.
+ */
+function resizeSelection(boxes, from, to) {
+    const scaleX = from.width === 0 ? 1 : to.width / from.width;
+    const scaleY = from.height === 0 ? 1 : to.height / from.height;
+    return boxes.map((box) => ({
+        ...box,
+        x: to.x + (box.x - from.x) * scaleX,
+        y: to.y + (box.y - from.y) * scaleY,
+        width: Math.max(1, box.width * scaleX),
+        height: Math.max(1, box.height * scaleY),
+    }));
+}
+
 /** Map a number to a CSS pixel string. */
 function px(n) {
     return `${n}px`;
@@ -20459,7 +20568,14 @@ function sanitizeMarkupOrEmpty(markup, config) {
  * @returns The sanitised markup, or the raw input when no DOM is available.
  */
 function sanitizeMathMl(markup) {
-    return sanitizeMarkupOrRaw(markup, { USE_PROFILES: { mathMl: true, svg: true } });
+    const sanitized = sanitizeMarkupOrRaw(markup, { USE_PROFILES: { mathMl: true, svg: true } });
+    // DOMPurify's HTML parser can retain MathML descendants while dropping the
+    // outer namespace-bearing <math> node. Restore that generated, constant
+    // wrapper so browsers keep the fragment in the MathML rendering context.
+    if (/<math(?:\s|>)/iu.test(markup) && !/<math(?:\s|>)/iu.test(sanitized) && sanitized) {
+        return `<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline">${sanitized}</math>`;
+    }
+    return sanitized;
 }
 
 /**
@@ -29437,6 +29553,23 @@ function buildFontFaceRule(variant) {
         '}',
     ].join('\n');
 }
+/** Build a safe `@font-face` stylesheet for host-provided font sources. */
+function buildUserFontFaceStyles(fonts) {
+    const rules = [];
+    for (const font of fonts ?? []) {
+        const family = typeof font.family === 'string' ? font.family.trim() : '';
+        const src = typeof font.src === 'string' ? font.src.trim() : '';
+        const isRemoteUrl = /^https?:\/\/[^"\\\n\r{};]+$/iu.test(src);
+        if (!family || FONT_NAME_UNSAFE_CHARS.test(family) || !(isInjectableUrl(src) || isRemoteUrl)) {
+            continue;
+        }
+        const format = normalizeFontFormat(font.format);
+        const weight = typeof font.weight === 'number' || typeof font.weight === 'string' ? font.weight : '400';
+        const style = font.style === 'italic' ? 'italic' : 'normal';
+        rules.push(buildFontFaceRule({ name: family, url: src, format, weight: String(weight), style }));
+    }
+    return rules.join('\n\n');
+}
 /**
  * Resolve a list of embedded fonts into the injectable `@font-face` stylesheet,
  * the distinct substitution-resolved family strings, and any object URLs minted
@@ -32593,6 +32726,60 @@ function createTouchGestureRecognizer(config) {
     };
 }
 
+/**
+ * Build the stable presentation-control state shared by every UI binding.
+ * Empty presentations disable both directions and use the same 0 / 0 label.
+ */
+function buildPresentationTouchControlState(currentSlideIndex, totalSlides) {
+    if (totalSlides <= 0) {
+        return {
+            previousDisabled: true,
+            nextDisabled: true,
+            counterLabel: '0 / 0',
+        };
+    }
+    return {
+        previousDisabled: currentSlideIndex <= 0,
+        nextDisabled: currentSlideIndex >= totalSlides - 1,
+        counterLabel: `${currentSlideIndex + 1} / ${totalSlides}`,
+    };
+}
+
+/** Framework-neutral downward drag recognizer for mobile bottom sheets. */
+function createSheetDismissGesture(onOffset, onDismiss, threshold = 120) {
+    let startY = null;
+    const finish = (event, allowDismiss) => {
+        if (startY === null) {
+            return;
+        }
+        const delta = Math.max(0, event.clientY - startY);
+        startY = null;
+        event.currentTarget?.releasePointerCapture?.(event.pointerId);
+        onOffset(0, false);
+        if (allowDismiss && delta > threshold) {
+            onDismiss();
+        }
+    };
+    return {
+        pointerDown(event) {
+            startY = event.clientY;
+            event.currentTarget?.setPointerCapture?.(event.pointerId);
+            onOffset(0, true);
+        },
+        pointerMove(event) {
+            if (startY !== null) {
+                onOffset(Math.max(0, event.clientY - startY), true);
+            }
+        },
+        pointerUp(event) {
+            finish(event, true);
+        },
+        cancel(event) {
+            finish(event, false);
+        },
+    };
+}
+
 /**
  * insert-chart.ts - framework-agnostic factory for a sensible DEFAULT new
  * chart element, the single source of truth every binding (React, Vue,
@@ -33299,6 +33486,39 @@ function deserializeElementClipboard(text) {
     };
 }
 
+/** Immutably replace one slide's inherited element list. */
+function setTemplateElements(map, slideId, elements) {
+    return { ...map, [slideId]: elements };
+}
+/** Find an inherited element on one slide. */
+function findTemplateElement(map, slideId, elementId) {
+    return slideId ? map[slideId]?.find((element) => element.id === elementId) : undefined;
+}
+/** Gate layout/master hits unless template editing is enabled. */
+function isElementIdInteractive(elementId, editTemplateMode) {
+    return !isTemplateElementId(elementId) || editTemplateMode;
+}
+/** Split layout/master elements out of each loaded slide while preserving order. */
+function partitionTemplateElements(slides) {
+    const templateElementsBySlideId = {};
+    const nextSlides = slides.map((slide) => {
+        const template = slide.elements.filter(isTemplateElement);
+        if (template.length === 0) {
+            return slide;
+        }
+        templateElementsBySlideId[slide.id] = template;
+        return { ...slide, elements: slide.elements.filter((element) => !isTemplateElement(element)) };
+    });
+    return { slides: nextSlides, templateElementsBySlideId };
+}
+/** Merge editable layout/master elements behind slide-owned elements for save/export. */
+function buildSaveSlides$1(slides, templateElementsBySlideId) {
+    return slides.map((slide) => {
+        const template = templateElementsBySlideId[slide.id];
+        return template?.length ? { ...slide, elements: [...template, ...slide.elements] } : slide;
+    });
+}
+
 /**
  * shape-preset-catalog.ts: the Insert > Shape picker catalogue shared by every
  * binding's toolbar/inspector.
@@ -39621,7 +39841,7 @@ const translationsEn = {
     'pptx.collaboration.status.connecting': 'Connecting...',
     'pptx.collaboration.status.disconnected': 'Disconnected',
     'pptx.collaboration.status.error': 'Connection error',
-    'pptx.collaboration.statusAriaLabel': 'Collaboration: {{status}}. {{count}} user(s) connected.',
+    'pptx.collaboration.statusAriaLabel': 'Collaboration: {{status}}',
     'pptx.collaboration.userCount': '{{count}} user(s)',
     'pptx.collaboration.youLabel': '{{name}} (you)',
     'pptx.collaboration.usersConnected': '{{count}} user(s) connected',
@@ -53255,6 +53475,7 @@ class SmartArtPropertiesComponent {
 					@for (layout of layoutTypes; track layout) {
 						<button
 							type="button"
+							[attr.data-testid]="'smartart-layout-' + layout"
 							class="pptx-sa-props__layout"
 							[class.is-active]="activeLayout() === layout"
 							[disabled]="!canEdit()"
@@ -53272,6 +53493,8 @@ class SmartArtPropertiesComponent {
 				<span class="pptx-sa-props__label">{{ 'pptx.smartart.colorScheme' | translate }}</span>
 				<select
 					class="pptx-sa-props__select"
+					data-testid="smartart-color-scheme"
+					[attr.aria-label]="'pptx.smartart.colorScheme' | translate"
 					[disabled]="!canEdit()"
 					[value]="activeColorScheme()"
 					(change)="onColorScheme($event)"
@@ -53335,11 +53558,13 @@ class SmartArtPropertiesComponent {
 						<span class="pptx-sa-props__bullet">{{ isChild(node) ? '•' : i + 1 }}</span>
 						<input
 							type="text"
+							data-testid="smartart-node-text"
+							[attr.aria-label]="node.text"
 							class="pptx-sa-props__node-input"
 							[disabled]="!canEdit()"
 							[value]="node.text"
 							[attr.placeholder]="'pptx.smartArt.nodePlaceholder' | translate"
-							(change)="onNodeText($event, node.id)"
+							(input)="onNodeText($event, node.id)"
 							(keydown)="onNodeKeydown($event, node.id)"
 						/>
 						<div class="pptx-sa-props__node-actions">
@@ -53481,6 +53706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 					@for (layout of layoutTypes; track layout) {
 						<button
 							type="button"
+							[attr.data-testid]="'smartart-layout-' + layout"
 							class="pptx-sa-props__layout"
 							[class.is-active]="activeLayout() === layout"
 							[disabled]="!canEdit()"
@@ -53498,6 +53724,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 				<span class="pptx-sa-props__label">{{ 'pptx.smartart.colorScheme' | translate }}</span>
 				<select
 					class="pptx-sa-props__select"
+					data-testid="smartart-color-scheme"
+					[attr.aria-label]="'pptx.smartart.colorScheme' | translate"
 					[disabled]="!canEdit()"
 					[value]="activeColorScheme()"
 					(change)="onColorScheme($event)"
@@ -53561,11 +53789,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 						<span class="pptx-sa-props__bullet">{{ isChild(node) ? '•' : i + 1 }}</span>
 						<input
 							type="text"
+							data-testid="smartart-node-text"
+							[attr.aria-label]="node.text"
 							class="pptx-sa-props__node-input"
 							[disabled]="!canEdit()"
 							[value]="node.text"
 							[attr.placeholder]="'pptx.smartArt.nodePlaceholder' | translate"
-							(change)="onNodeText($event, node.id)"
+							(input)="onNodeText($event, node.id)"
 							(keydown)="onNodeKeydown($event, node.id)"
 						/>
 						<div class="pptx-sa-props__node-actions">
@@ -56137,10 +56367,7 @@ class InspectorPanelComponent {
 			mid-edit: the caret stays put and the on-screen keyboard does not dismiss.
 			All commits happen on (change) (blur), reading event.target.value.
 		-->
-		<aside
-			[class]="inspectorClass()"
-			[attr.aria-label]="'pptx.inspector.elementProperties' | translate"
-		>
+		<aside [class]="inspectorClass()" [attr.aria-label]="'pptx.inspector.properties' | translate">
 			<!-- ── Transform: Position & Size ─────────────────────────────────── -->
 			<section class="pptx-ng-inspector__section">
 				<h3 class="pptx-ng-inspector__heading">{{ 'pptx.inspector.transform' | translate }}</h3>
@@ -56515,10 +56742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 			mid-edit: the caret stays put and the on-screen keyboard does not dismiss.
 			All commits happen on (change) (blur), reading event.target.value.
 		-->
-		<aside
-			[class]="inspectorClass()"
-			[attr.aria-label]="'pptx.inspector.elementProperties' | translate"
-		>
+		<aside [class]="inspectorClass()" [attr.aria-label]="'pptx.inspector.properties' | translate">
 			<!-- ── Transform: Position & Size ─────────────────────────────────── -->
 			<section class="pptx-ng-inspector__section">
 				<h3 class="pptx-ng-inspector__heading">{{ 'pptx.inspector.transform' | translate }}</h3>
@@ -56995,6 +57219,7 @@ class MobileBottomBarComponent {
             {
                 key: 'notes',
                 labelKey: 'pptx.notes.title',
+                ariaLabelKey: 'pptx.statusBar.toggleNotes',
                 // Note / document-text icon
                 svgPath: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M8 13h8 M8 17h5',
                 disabled: noSlides,
@@ -57013,7 +57238,7 @@ class MobileBottomBarComponent {
 					class="pptx-ng-mbar-btn"
 					[class.is-active]="action.active"
 					[attr.aria-pressed]="action.active ? true : null"
-					[attr.aria-label]="action.labelKey | translate"
+					[attr.aria-label]="action.ariaLabelKey ?? action.labelKey | translate"
 					[disabled]="action.disabled"
 					(click)="action.emit()"
 				>
@@ -57054,7 +57279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 					class="pptx-ng-mbar-btn"
 					[class.is-active]="action.active"
 					[attr.aria-pressed]="action.active ? true : null"
-					[attr.aria-label]="action.labelKey | translate"
+					[attr.aria-label]="action.ariaLabelKey ?? action.labelKey | translate"
 					[disabled]="action.disabled"
 					(click)="action.emit()"
 				>
@@ -57505,7 +57730,6 @@ class MobileMenuSheetComponent {
 							[class.is-active]="row.active"
 							[class.is-danger]="row.danger"
 							[disabled]="row.disabled"
-							role="menuitem"
 							[attr.aria-label]="row.labelKey | translate"
 							(click)="onRowClick(row)"
 						>
@@ -57558,7 +57782,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 							[class.is-active]="row.active"
 							[class.is-danger]="row.danger"
 							[disabled]="row.disabled"
-							role="menuitem"
 							[attr.aria-label]="row.labelKey | translate"
 							(click)="onRowClick(row)"
 						>
@@ -68720,8 +68943,12 @@ class PresentationTransitionOverlayComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PresentationTransitionOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: PresentationTransitionOverlayComponent, isStandalone: true, selector: "pptx-presentation-transition-overlay", inputs: { outgoingSlide: { classPropertyName: "outgoingSlide", publicName: "outgoingSlide", isSignal: true, isRequired: true, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: true, transformFunction: null }, templateElements: { classPropertyName: "templateElements", publicName: "templateElements", isSignal: true, isRequired: false, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, durationMs: { classPropertyName: "durationMs", publicName: "durationMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete" }, ngImport: i0, template: `
-		<div class="pptx-ng-transition-layer" [ngStyle]="layerStyle()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: PresentationTransitionOverlayComponent, isStandalone: true, selector: "pptx-presentation-transition-overlay", inputs: { outgoingSlide: { classPropertyName: "outgoingSlide", publicName: "outgoingSlide", isSignal: true, isRequired: true, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: true, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: true, transformFunction: null }, templateElements: { classPropertyName: "templateElements", publicName: "templateElements", isSignal: true, isRequired: false, transformFunction: null }, mediaDataUrls: { classPropertyName: "mediaDataUrls", publicName: "mediaDataUrls", isSignal: true, isRequired: false, transformFunction: null }, durationMs: { classPropertyName: "durationMs", publicName: "durationMs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { complete: "complete" }, host: { attributes: { "data-pptx-transition-overlay": "" } }, ngImport: i0, template: `
+		<div
+			class="pptx-ng-transition-layer"
+			data-pptx-transition-layer="outgoing"
+			[ngStyle]="layerStyle()"
+		>
 			<div [ngStyle]="slideBoxStyle()">
 				<pptx-slide-canvas
 					[slide]="layerSlide()"
@@ -68736,8 +68963,12 @@ class PresentationTransitionOverlayComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PresentationTransitionOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pptx-presentation-transition-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, SlideCanvasComponent], template: `
-		<div class="pptx-ng-transition-layer" [ngStyle]="layerStyle()">
+            args: [{ selector: 'pptx-presentation-transition-overlay', host: { 'data-pptx-transition-overlay': '' }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, SlideCanvasComponent], template: `
+		<div
+			class="pptx-ng-transition-layer"
+			data-pptx-transition-layer="outgoing"
+			[ngStyle]="layerStyle()"
+		>
 			<div [ngStyle]="slideBoxStyle()">
 				<pptx-slide-canvas
 					[slide]="layerSlide()"
@@ -73066,6 +73297,7 @@ class RibbonFileSectionComponent {
 			class="pptx-rb-pill"
 			[disabled]="slideCount() === 0"
 			(click)="save.emit()"
+			[attr.aria-label]="'pptx.file.saveAsPptx' | translate"
 			[title]="'pptx.ribbon.saveAsPptx' | translate"
 		>
 			{{ 'pptx.toolbar.save' | translate }}
@@ -73171,6 +73403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 			class="pptx-rb-pill"
 			[disabled]="slideCount() === 0"
 			(click)="save.emit()"
+			[attr.aria-label]="'pptx.file.saveAsPptx' | translate"
 			[title]="'pptx.ribbon.saveAsPptx' | translate"
 		>
 			{{ 'pptx.toolbar.save' | translate }}
@@ -76880,7 +77113,7 @@ class RibbonComponent {
 			/>
 
 			<!-- ── Tab bar ───────────────────────────────────────────────────── -->
-			<div class="flex items-center border-b border-border/60 px-1">
+			<div role="tablist" class="flex items-center border-b border-border/60 px-1">
 				<!-- Scrollable tab strip: on narrow widths the tabs scroll instead of
 				     clipping (mirrors React's max-md:overflow-x-auto scrollbar-none),
 				     while the Record/Share actions and collapse toggle stay pinned. -->
@@ -76888,6 +77121,8 @@ class RibbonComponent {
 					@for (t of tabs; track t.id) {
 						<button
 							type="button"
+							role="tab"
+							[attr.aria-selected]="activeTab() === t.id"
 							(click)="activeTab.set(t.id)"
 							class="relative whitespace-nowrap px-3.5 py-2 text-[12px] font-medium transition-colors"
 							[ngClass]="
@@ -76915,29 +77150,39 @@ class RibbonComponent {
 							<span>{{ 'pptx.titleBar.record' | translate }}</span>
 						</button>
 					}
-					<button
-						type="button"
-						class="relative inline-flex items-center gap-1 whitespace-nowrap rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
-						[ngClass]="
-							collabConnected()
-								? 'bg-green-600 hover:bg-green-500'
-								: 'bg-primary hover:bg-primary/90'
-						"
-						[title]="
+					<div
+						role="status"
+						[attr.aria-label]="
 							collabConnected()
-								? ('pptx.toolbar.sharingUsers' | translate: { count: connectedCount() })
-								: ('pptx.toolbar.share' | translate)
+								? ('pptx.collaboration.statusAriaLabel'
+									| translate: { status: 'pptx.collaboration.status.connected' | translate })
+								: null
 						"
-						[attr.aria-label]="'pptx.toolbar.share' | translate"
-						(click)="share.emit()"
 					>
-						<svg lucideShare2 class="h-3.5 w-3.5"></svg>
-						<span>{{
-							collabConnected()
-								? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
-								: ('pptx.toolbar.share' | translate)
-						}}</span>
-					</button>
+						<button
+							type="button"
+							class="relative inline-flex items-center gap-1 whitespace-nowrap rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
+							[ngClass]="
+								collabConnected()
+									? 'bg-green-600 hover:bg-green-500'
+									: 'bg-primary hover:bg-primary/90'
+							"
+							[title]="
+								collabConnected()
+									? ('pptx.toolbar.sharingUsers' | translate: { count: connectedCount() })
+									: ('pptx.toolbar.share' | translate)
+							"
+							[attr.aria-label]="'pptx.toolbar.share' | translate"
+							(click)="share.emit()"
+						>
+							<svg lucideShare2 class="h-3.5 w-3.5"></svg>
+							<span>{{
+								collabConnected()
+									? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
+									: ('pptx.toolbar.share' | translate)
+							}}</span>
+						</button>
+					</div>
 				</div>
 
 				<button
@@ -77186,7 +77431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 			/>
 
 			<!-- ── Tab bar ───────────────────────────────────────────────────── -->
-			<div class="flex items-center border-b border-border/60 px-1">
+			<div role="tablist" class="flex items-center border-b border-border/60 px-1">
 				<!-- Scrollable tab strip: on narrow widths the tabs scroll instead of
 				     clipping (mirrors React's max-md:overflow-x-auto scrollbar-none),
 				     while the Record/Share actions and collapse toggle stay pinned. -->
@@ -77194,6 +77439,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 					@for (t of tabs; track t.id) {
 						<button
 							type="button"
+							role="tab"
+							[attr.aria-selected]="activeTab() === t.id"
 							(click)="activeTab.set(t.id)"
 							class="relative whitespace-nowrap px-3.5 py-2 text-[12px] font-medium transition-colors"
 							[ngClass]="
@@ -77221,29 +77468,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 							<span>{{ 'pptx.titleBar.record' | translate }}</span>
 						</button>
 					}
-					<button
-						type="button"
-						class="relative inline-flex items-center gap-1 whitespace-nowrap rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
-						[ngClass]="
-							collabConnected()
-								? 'bg-green-600 hover:bg-green-500'
-								: 'bg-primary hover:bg-primary/90'
-						"
-						[title]="
+					<div
+						role="status"
+						[attr.aria-label]="
 							collabConnected()
-								? ('pptx.toolbar.sharingUsers' | translate: { count: connectedCount() })
-								: ('pptx.toolbar.share' | translate)
+								? ('pptx.collaboration.statusAriaLabel'
+									| translate: { status: 'pptx.collaboration.status.connected' | translate })
+								: null
 						"
-						[attr.aria-label]="'pptx.toolbar.share' | translate"
-						(click)="share.emit()"
 					>
-						<svg lucideShare2 class="h-3.5 w-3.5"></svg>
-						<span>{{
-							collabConnected()
-								? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
-								: ('pptx.toolbar.share' | translate)
-						}}</span>
-					</button>
+						<button
+							type="button"
+							class="relative inline-flex items-center gap-1 whitespace-nowrap rounded-sm px-2.5 py-1 text-[11px] font-medium text-white transition-colors"
+							[ngClass]="
+								collabConnected()
+									? 'bg-green-600 hover:bg-green-500'
+									: 'bg-primary hover:bg-primary/90'
+							"
+							[title]="
+								collabConnected()
+									? ('pptx.toolbar.sharingUsers' | translate: { count: connectedCount() })
+									: ('pptx.toolbar.share' | translate)
+							"
+							[attr.aria-label]="'pptx.toolbar.share' | translate"
+							(click)="share.emit()"
+						>
+							<svg lucideShare2 class="h-3.5 w-3.5"></svg>
+							<span>{{
+								collabConnected()
+									? ('pptx.toolbar.sharingCount' | translate: { count: connectedCount() })
+									: ('pptx.toolbar.share' | translate)
+							}}</span>
+						</button>
+					</div>
 				</div>
 
 				<button
@@ -85035,9 +85292,9 @@ class ViewerInspectorPanelService {
             case 'selection':
                 return 'pptx.selectionPane.title';
             case 'element':
-                return 'pptx.viewer.elementProperties';
+                return 'pptx.inspector.properties';
             case 'slide':
-                return 'pptx.viewer.slideProperties';
+                return 'pptx.inspector.properties';
             default:
                 return '';
         }
@@ -86705,6 +86962,7 @@ class PowerPointViewerComponent {
 					-->
 					@if (inspectorPanel.visibleInspectorKind(); as kind) {
 						<aside
+							data-pptx-inspector
 							class="pptx-ng-inspector-host"
 							[attr.aria-label]="inspectorPanel.inspectorLabel() | translate"
 							[style.transform]="
@@ -87382,6 +87640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 					-->
 					@if (inspectorPanel.visibleInspectorKind(); as kind) {
 						<aside
+							data-pptx-inspector
 							class="pptx-ng-inspector-host"
 							[attr.aria-label]="inspectorPanel.inspectorLabel() | translate"
 							[style.transform]="