@jumoo/usync 18.2.0 → 18.2.1

package/dist/components/usync-change-detail.js

@@ -68,59 +68,59 @@ let uSyncChangeDetail = class uSyncChangeDetail extends UmbLitElement {
         const failed = detail.success === false;
         const expandable = __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_isExpandable).call(this, classified.strategy);
         const isOpen = this.open;
-        return html `
-			<div class=${classMap({ 'change-row': true, danger: failed })}>
-				<div
-					class=${classMap({ summary: true, expanded: isOpen, static: !expandable })}
-					@click=${expandable ? __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleOpen) : undefined}>
-					<div class="summary-left">
-						${when(failed, () => html `<umb-icon name="icon-alert" class="color-red"></umb-icon>`)}
-						${when(this._label?.prefix, () => html `<span class="prefix"
-									>${this.localize.term('uSync_changeProperty')}</span
-								>`)}
-						<span class="label" title=${detail.path}
-							>${this._label?.label || detail.name}</span
-						>
-						${when(this._label?.culture, () => html `<uui-tag size="s" look="secondary"
-									>${this._label.culture}</uui-tag
-								>`)}
-					</div>
-					<div class="summary-right">
-						<span class=${classMap({ danger: classified.strategy === 'notice' })}
-							>${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderSummary).call(this, classified)}</span
-						>
-						${when(expandable, () => html `<uui-icon
-									name="icon-play"
-									class=${classMap({ expanded: isOpen })}></uui-icon>`)}
-					</div>
-				</div>
-				${when(isOpen && expandable, () => html `
-						<div class="body">
-							${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderBody).call(this, classified)}
-							<div class="path-line">
-								<span class="muted"
-									>${this.localize.term('uSync_diffPath', detail.path)}</span
-								>
-								<div class="path-line-actions">
-									${when(classified.strategy === 'json', () => html `
-											<uui-button look="text" compact @click=${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleRaw)}>
+        return html `
+			<div class=${classMap({ 'change-row': true, danger: failed })}>
+				<div
+					class=${classMap({ summary: true, expanded: isOpen, static: !expandable })}
+					@click=${expandable ? __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleOpen) : undefined}>
+					<div class="summary-left">
+						${when(failed, () => html `<umb-icon name="icon-alert" class="color-red"></umb-icon>`)}
+						${when(this._label?.prefix, () => html `<span class="prefix"
+									>${this.localize.term('uSync_changeProperty')}</span
+								>`)}
+						<span class="label" title=${detail.path}
+							>${this._label?.label || detail.name}</span
+						>
+						${when(this._label?.culture, () => html `<uui-tag size="s" look="secondary"
+									>${this._label.culture}</uui-tag
+								>`)}
+					</div>
+					<div class="summary-right">
+						<span class=${classMap({ danger: classified.strategy === 'notice' })}
+							>${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderSummary).call(this, classified)}</span
+						>
+						${when(expandable, () => html `<uui-icon
+									name="icon-play"
+									class=${classMap({ expanded: isOpen })}></uui-icon>`)}
+					</div>
+				</div>
+				${when(isOpen && expandable, () => html `
+						<div class="body">
+							${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderBody).call(this, classified)}
+							<div class="path-line">
+								<span class="muted"
+									>${this.localize.term('uSync_diffPath', detail.path)}</span
+								>
+								<div class="path-line-actions">
+									${when(classified.strategy === 'json', () => html `
+											<uui-button look="text" compact @click=${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleRaw)}>
 												${this._showRaw
             ? this.localize.term('uSync_diffHideRaw')
-            : this.localize.term('uSync_diffShowRaw')}
-											</uui-button>
-										`)}
-									<uui-button
-										look="text"
-										compact
-										label=${this.localize.term('uSync_diffCopyPath')}
-										@click=${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_copyPath)}>
-										<uui-icon name="icon-documents"></uui-icon>
-									</uui-button>
-								</div>
-							</div>
-						</div>
-					`)}
-			</div>
+            : this.localize.term('uSync_diffShowRaw')}
+											</uui-button>
+										`)}
+									<uui-button
+										look="text"
+										compact
+										label=${this.localize.term('uSync_diffCopyPath')}
+										@click=${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_copyPath)}>
+										<uui-icon name="icon-documents"></uui-icon>
+									</uui-button>
+								</div>
+							</div>
+						</div>
+					`)}
+			</div>
 		`;
     }
 };
@@ -173,8 +173,8 @@ _uSyncChangeDetail_lineCounts = function _uSyncChangeDetail_lineCounts() {
 _uSyncChangeDetail_renderSummary = function _uSyncChangeDetail_renderSummary(c) {
     switch (c.strategy) {
         case 'scalar':
-            return html `<span class="inline-change"
-					><del>${c.oldText}</del> → <ins>${c.newText}</ins></span
+            return html `<span class="inline-change"
+					><del>${c.oldText}</del> → <ins>${c.newText}</ins></span
 				>`;
         case 'json': {
             const diff = this._json;
@@ -232,50 +232,50 @@ _uSyncChangeDetail_renderJsonBody = function _uSyncChangeDetail_renderJsonBody(c
     const diff = this._json;
     if (!diff)
         return nothing;
-    return html `
-			<ul class="leaf-list">
-				${diff.changes.map((leaf, index) => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLeaf).call(this, leaf, index))}
-			</ul>
-			${when(diff.truncated, () => html `<p class="muted">
-						${this.localize.term(diff.stopped ? 'uSync_diffMoreChangesAtLeast' : 'uSync_diffMoreChanges', diff.totalCount - diff.changes.length)}
-					</p>`)}
-			${when(diff.reordered.length > 0, () => html `<p class="muted">
-						${this.localize.term('uSync_diffReordered')}: ${diff.reordered.join(', ')}
-					</p>`)}
-			${when(this._showRaw, () => html `
-					<div class="raw-values">
-						<div>
-							<div class="muted">${this.localize.term('uSync_diffOldValue')}</div>
-							<umb-code-block language="json" copy
-								>${prettyJson(c.oldJson)}</umb-code-block
-							>
-						</div>
-						<div>
-							<div class="muted">${this.localize.term('uSync_diffNewValue')}</div>
-							<umb-code-block language="json" copy
-								>${prettyJson(c.newJson)}</umb-code-block
-							>
-						</div>
-					</div>
-				`)}
+    return html `
+			<ul class="leaf-list">
+				${diff.changes.map((leaf, index) => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLeaf).call(this, leaf, index))}
+			</ul>
+			${when(diff.truncated, () => html `<p class="muted">
+						${this.localize.term(diff.stopped ? 'uSync_diffMoreChangesAtLeast' : 'uSync_diffMoreChanges', diff.totalCount - diff.changes.length)}
+					</p>`)}
+			${when(diff.reordered.length > 0, () => html `<p class="muted">
+						${this.localize.term('uSync_diffReordered')}: ${diff.reordered.join(', ')}
+					</p>`)}
+			${when(this._showRaw, () => html `
+					<div class="raw-values">
+						<div>
+							<div class="muted">${this.localize.term('uSync_diffOldValue')}</div>
+							<umb-code-block language="json" copy
+								>${prettyJson(c.oldJson)}</umb-code-block
+							>
+						</div>
+						<div>
+							<div class="muted">${this.localize.term('uSync_diffNewValue')}</div>
+							<umb-code-block language="json" copy
+								>${prettyJson(c.newJson)}</umb-code-block
+							>
+						</div>
+					</div>
+				`)}
 		`;
 };
 _uSyncChangeDetail_renderLeaf = function _uSyncChangeDetail_renderLeaf(leaf, index) {
     const path = formatDiffPath(leaf.path);
     const symbol = leaf.kind === 'added' ? '+' : leaf.kind === 'removed' ? '−' : '~';
-    return html `
-			<li class=${classMap({ leaf: true, [leaf.kind]: true })}>
-				<div class="leaf-path" title=${leaf.path}>
-					<span class="symbol">${symbol}</span>${path}
-					${when(leaf.expanded, () => html `<uui-tag
-								size="s"
-								look="secondary"
-								title=${this.localize.term('uSync_diffExpandedNote')}
-								>»</uui-tag
-							>`)}
-				</div>
-				<div class="leaf-value">${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLeafValue).call(this, leaf, index)}</div>
-			</li>
+    return html `
+			<li class=${classMap({ leaf: true, [leaf.kind]: true })}>
+				<div class="leaf-path" title=${leaf.path}>
+					<span class="symbol">${symbol}</span>${path}
+					${when(leaf.expanded, () => html `<uui-tag
+								size="s"
+								look="secondary"
+								title=${this.localize.term('uSync_diffExpandedNote')}
+								>»</uui-tag
+							>`)}
+				</div>
+				<div class="leaf-value">${__classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLeafValue).call(this, leaf, index)}</div>
+			</li>
 		`;
 };
 _uSyncChangeDetail_renderLeafValue = function _uSyncChangeDetail_renderLeafValue(leaf, index) {
@@ -290,8 +290,8 @@ _uSyncChangeDetail_renderLeafValue = function _uSyncChangeDetail_renderLeafValue
     const bothSingleLine = !oldText.includes('\n') && !newText.includes('\n');
     const combinedLen = oldText.length + newText.length;
     if (bothSingleLine && combinedLen <= USYNC_DIFF_LIMITS.inlineScalarChars) {
-        return html `<span class="inline-change"
-				><del>${oldText}</del> → <ins>${newText}</ins></span
+        return html `<span class="inline-change"
+				><del>${oldText}</del> → <ins>${newText}</ins></span
 			>`;
     }
     const bothStrings = typeof leaf.oldValue === 'string' && typeof leaf.newValue === 'string';
@@ -300,36 +300,36 @@ _uSyncChangeDetail_renderLeafValue = function _uSyncChangeDetail_renderLeafValue
         hasWhitespace &&
         combinedLen <= USYNC_DIFF_LIMITS.maxScalarWordDiffBytes) {
         const words = diffWords(oldText, newText);
-        return html `<span class="word-diff"
+        return html `<span class="word-diff"
 				>${words.map((word) => word.added
             ? html `<ins>${word.value}</ins>`
             : word.removed
                 ? html `<del>${word.value}</del>`
-                : html `<span>${word.value}</span>`)}</span
+                : html `<span>${word.value}</span>`)}</span
 			>`;
     }
     const expanded = this._expandedLeaves.has(index);
-    return html `
-			<uui-button look="text" compact @click=${() => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleLeaf).call(this, index)}>
+    return html `
+			<uui-button look="text" compact @click=${() => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleLeaf).call(this, index)}>
 				${expanded
         ? this.localize.term('uSync_diffHideRaw')
-        : this.localize.term('uSync_diffShowRaw')}
-			</uui-button>
-			${when(expanded, () => html `
-					<pre class="stacked"><del>- ${oldText}</del>
-<ins>+ ${newText}</ins></pre>
-				`)}
+        : this.localize.term('uSync_diffShowRaw')}
+			</uui-button>
+			${when(expanded, () => html `
+					<pre class="stacked"><del>- ${oldText}</del>
+<ins>+ ${newText}</ins></pre>
+				`)}
 		`;
 };
 _uSyncChangeDetail_renderLinesBody = function _uSyncChangeDetail_renderLinesBody() {
     const blocks = this._lines ?? [];
-    return html `
-			${when(this._lineDegraded, () => html `<p class="muted">${this.localize.term('uSync_diffDegraded')}</p>`)}
-			<uui-scroll-container class="line-diff">
+    return html `
+			${when(this._lineDegraded, () => html `<p class="muted">${this.localize.term('uSync_diffDegraded')}</p>`)}
+			<uui-scroll-container class="line-diff">
 				${blocks.map((block, index) => block.type === 'row'
         ? __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLineRow).call(this, block.row)
-        : __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderCollapsed).call(this, block, index))}
-			</uui-scroll-container>
+        : __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderCollapsed).call(this, block, index))}
+			</uui-scroll-container>
 		`;
 };
 _uSyncChangeDetail_renderLineRow = function _uSyncChangeDetail_renderLineRow(row) {
@@ -339,37 +339,37 @@ _uSyncChangeDetail_renderLineRow = function _uSyncChangeDetail_renderLineRow(row
             ? 'color-mix(in srgb, var(--uui-color-danger) 12%, transparent)'
             : undefined;
     const marker = row.type === 'add' ? '+' : row.type === 'remove' ? '-' : ' ';
-    return html `
-			<div
-				class="line-row ${row.type}"
-				style=${styleMap({ background: tint ?? 'transparent' })}>
-				<span class="gutter">${row.oldLine ?? ''}</span>
-				<span class="gutter">${row.newLine ?? ''}</span>
-				<span class="marker">${marker}</span>
-				<span class="text">${row.text}</span>
-			</div>
+    return html `
+			<div
+				class="line-row ${row.type}"
+				style=${styleMap({ background: tint ?? 'transparent' })}>
+				<span class="gutter">${row.oldLine ?? ''}</span>
+				<span class="gutter">${row.newLine ?? ''}</span>
+				<span class="marker">${marker}</span>
+				<span class="text">${row.text}</span>
+			</div>
 		`;
 };
 _uSyncChangeDetail_renderCollapsed = function _uSyncChangeDetail_renderCollapsed(block, index) {
     const expanded = this._expandedRuns.has(index);
-    return html `
-			<div class="collapsed-toggle" @click=${() => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleRun).call(this, index)}>
-				<uui-icon name="icon-navigation"></uui-icon>
+    return html `
+			<div class="collapsed-toggle" @click=${() => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_toggleRun).call(this, index)}>
+				<uui-icon name="icon-navigation"></uui-icon>
 				${expanded
         ? this.localize.term('uSync_diffHideUnchanged')
-        : this.localize.term('uSync_diffShowUnchanged', block.count)}
-			</div>
-			${when(expanded, () => html `${block.rows.map((row) => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLineRow).call(this, row))}`)}
+        : this.localize.term('uSync_diffShowUnchanged', block.count)}
+			</div>
+			${when(expanded, () => html `${block.rows.map((row) => __classPrivateFieldGet(this, _uSyncChangeDetail_instances, "m", _uSyncChangeDetail_renderLineRow).call(this, row))}`)}
 		`;
 };
 _uSyncChangeDetail_renderWordsBody = function _uSyncChangeDetail_renderWordsBody(c) {
     const changes = diffWords(c.oldText, c.newText);
-    return html `<pre class="word-diff">
+    return html `<pre class="word-diff">
 ${changes.map((word) => word.added
         ? html `<ins>${word.value}</ins>`
         : word.removed
             ? html `<del>${word.value}</del>`
-            : html `<span>${word.value}</span>`)}</pre
+            : html `<span>${word.value}</span>`)}</pre
 		>`;
 };
 _uSyncChangeDetail_renderSingleBody = function _uSyncChangeDetail_renderSingleBody(c) {
@@ -378,305 +378,305 @@ _uSyncChangeDetail_renderSingleBody = function _uSyncChangeDetail_renderSingleBo
     const tint = isAdded
         ? 'color-mix(in srgb, var(--uui-color-positive) 12%, transparent)'
         : 'color-mix(in srgb, var(--uui-color-danger) 12%, transparent)';
-    return html `
-			<div class="muted">
+    return html `
+			<div class="muted">
 				${isAdded
         ? this.localize.term('uSync_diffValueAdded')
-        : this.localize.term('uSync_diffValueRemoved')}
-			</div>
-			<div class="tinted" style=${styleMap({ background: tint })}>
-				<umb-code-block language=${c.language} copy>${value}</umb-code-block>
-			</div>
+        : this.localize.term('uSync_diffValueRemoved')}
+			</div>
+			<div class="tinted" style=${styleMap({ background: tint })}>
+				<umb-code-block language=${c.language} copy>${value}</umb-code-block>
+			</div>
 		`;
 };
 _uSyncChangeDetail_renderMaskedBody = function _uSyncChangeDetail_renderMaskedBody() {
     return html `<p class="muted">${this.localize.term('uSync_diffMasked')}</p>`;
 };
 _uSyncChangeDetail_renderOversizedBody = function _uSyncChangeDetail_renderOversizedBody(c) {
-    return html `
-			<p class="muted">${this.localize.term('uSync_diffTooLarge')}</p>
-			<div class="raw-values">
-				<div>
-					<div class="muted">${this.localize.term('uSync_diffOldValue')}</div>
-					<umb-code-block language=${c.language} copy>${c.oldText}</umb-code-block>
-				</div>
-				<div>
-					<div class="muted">${this.localize.term('uSync_diffNewValue')}</div>
-					<umb-code-block language=${c.language} copy>${c.newText}</umb-code-block>
-				</div>
-			</div>
+    return html `
+			<p class="muted">${this.localize.term('uSync_diffTooLarge')}</p>
+			<div class="raw-values">
+				<div>
+					<div class="muted">${this.localize.term('uSync_diffOldValue')}</div>
+					<umb-code-block language=${c.language} copy>${c.oldText}</umb-code-block>
+				</div>
+				<div>
+					<div class="muted">${this.localize.term('uSync_diffNewValue')}</div>
+					<umb-code-block language=${c.language} copy>${c.newText}</umb-code-block>
+				</div>
+			</div>
 		`;
 };
 _uSyncChangeDetail_renderNoticeBody = function _uSyncChangeDetail_renderNoticeBody(c) {
     const label = this.detail?.change === ChangeDetailType.ERROR
         ? this.localize.term('uSync_changeError')
         : this.localize.term('uSync_changeWarning');
-    return html `
-			<div class="notice-callout danger">
-				<strong>${label}</strong>
-				<p>${c.oldText}</p>
-			</div>
+    return html `
+			<div class="notice-callout danger">
+				<strong>${label}</strong>
+				<p>${c.oldText}</p>
+			</div>
 		`;
 };
-uSyncChangeDetail.styles = css `
-		:host {
-			display: block;
-			border-bottom: 1px solid var(--uui-color-border);
-		}
-
-		.change-row.danger {
-			border-left: 3px solid var(--uui-color-danger);
-		}
-
-		.summary {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			gap: var(--uui-size-space-4);
-			padding: var(--uui-size-space-3) var(--uui-size-space-5);
-			cursor: pointer;
-		}
-
-		.summary.static {
-			cursor: default;
-		}
-
-		.summary:hover:not(.static) {
-			background-color: var(--uui-color-surface-alt);
-		}
-
-		.summary-left {
-			display: flex;
-			align-items: center;
-			gap: var(--uui-size-space-3);
-			min-width: 0;
-			overflow: hidden;
-		}
-
-		.summary-left .label {
-			font-weight: bold;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
-		.prefix {
-			color: var(--uui-color-disabled-contrast);
-		}
-
-		.summary-right {
-			display: flex;
-			align-items: center;
-			gap: var(--uui-size-space-4);
-			flex-shrink: 0;
-		}
-
-		.summary-right uui-icon {
-			transition: transform 90ms ease;
-		}
-
-		.summary-right uui-icon.expanded {
-			transform: rotate(90deg);
-		}
-
-		.danger {
-			color: var(--uui-color-danger);
-		}
-
-		.color-red {
-			color: var(--uui-color-danger);
-		}
-
-		.muted {
-			color: var(--uui-color-disabled-contrast);
-			font-size: smaller;
-		}
-
-		.body {
-			padding: 0 var(--uui-size-space-5) var(--uui-size-space-4);
-		}
-
-		.path-line {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			gap: var(--uui-size-space-3);
-			margin-top: var(--uui-size-space-3);
-		}
-
-		.path-line > .muted {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
-		.path-line-actions {
-			display: flex;
-			align-items: center;
-			gap: var(--uui-size-space-1, 3px);
-			flex-shrink: 0;
-		}
-
-		.leaf-list {
-			list-style: none;
-			margin: 0;
-			padding: 0;
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-3);
-		}
-
-		.leaf {
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-1, 3px);
-			padding: var(--uui-size-space-2) var(--uui-size-space-3);
-			border-radius: var(--uui-border-radius);
-			border: 1px solid var(--uui-color-border);
-			background: var(--uui-color-surface-alt);
-		}
-
-		.leaf.added {
-			background: color-mix(in srgb, var(--uui-color-positive) 8%, transparent);
-			border-color: color-mix(in srgb, var(--uui-color-positive) 30%, transparent);
-		}
-
-		.leaf.removed {
-			background: color-mix(in srgb, var(--uui-color-danger) 8%, transparent);
-			border-color: color-mix(in srgb, var(--uui-color-danger) 30%, transparent);
-		}
-
-		.leaf-path {
-			font-family: monospace;
-			font-size: smaller;
-			font-weight: 600;
-			color: var(--uui-color-text);
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
-		.symbol {
-			display: inline-block;
-			width: 1em;
-			font-weight: bold;
-		}
-
-		.added-value {
-			color: var(--uui-color-positive);
-		}
-
-		.removed-value {
-			color: var(--uui-color-danger);
-		}
-
-		.inline-change del {
-			color: var(--uui-color-danger);
-			text-decoration: line-through;
-		}
-
-		.inline-change ins {
-			color: var(--uui-color-positive);
-			text-decoration: none;
-		}
-
-		.word-diff {
-			white-space: pre-wrap;
-		}
-
-		.word-diff ins {
-			color: var(--uui-color-positive);
-			text-decoration: none;
-		}
-
-		.word-diff del {
-			color: var(--uui-color-danger);
-			text-decoration: line-through;
-		}
-
-		.stacked {
-			margin: 0;
-			white-space: pre;
-		}
-
-		.stacked del {
-			display: block;
-			color: var(--uui-color-danger);
-			text-decoration: none;
-		}
-
-		.stacked ins {
-			display: block;
-			color: var(--uui-color-positive);
-			text-decoration: none;
-		}
-
-		.raw-values {
-			display: flex;
-			flex-direction: column;
-			gap: var(--uui-size-space-4);
-			margin-top: var(--uui-size-space-3);
-		}
-
-		.tinted {
-			border-radius: var(--uui-border-radius);
-		}
-
-		uui-scroll-container.line-diff {
-			max-height: 400px;
-			display: block;
-			border: 1px solid var(--uui-color-border);
-			border-radius: var(--uui-border-radius);
-		}
-
-		.line-row {
-			display: flex;
-			gap: var(--uui-size-space-2);
-			font-family: monospace;
-			white-space: pre;
-			padding: 0 var(--uui-size-space-2);
-		}
-
-		.line-row .gutter {
-			display: inline-block;
-			width: 3em;
-			text-align: right;
-			color: var(--uui-color-disabled-contrast);
-			flex-shrink: 0;
-		}
-
-		.line-row .marker {
-			flex-shrink: 0;
-			width: 1em;
-		}
-
-		.line-row .text {
-			white-space: pre;
-		}
-
-		.collapsed-toggle {
-			display: flex;
-			align-items: center;
-			gap: var(--uui-size-space-2);
-			padding: var(--uui-size-space-2);
-			color: var(--uui-color-disabled-contrast);
-			cursor: pointer;
-			font-size: smaller;
-		}
-
-		.collapsed-toggle:hover {
-			background-color: var(--uui-color-surface-alt);
-		}
-
-		.notice-callout {
-			padding: var(--uui-size-space-4);
-			border-radius: var(--uui-border-radius);
-			background: color-mix(in srgb, var(--uui-color-danger) 10%, transparent);
-		}
-
-		.notice-callout p {
-			margin: var(--uui-size-space-2) 0 0;
-		}
+uSyncChangeDetail.styles = css `
+		:host {
+			display: block;
+			border-bottom: 1px solid var(--uui-color-border);
+		}
+
+		.change-row.danger {
+			border-left: 3px solid var(--uui-color-danger);
+		}
+
+		.summary {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: var(--uui-size-space-4);
+			padding: var(--uui-size-space-3) var(--uui-size-space-5);
+			cursor: pointer;
+		}
+
+		.summary.static {
+			cursor: default;
+		}
+
+		.summary:hover:not(.static) {
+			background-color: var(--uui-color-surface-alt);
+		}
+
+		.summary-left {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-3);
+			min-width: 0;
+			overflow: hidden;
+		}
+
+		.summary-left .label {
+			font-weight: bold;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.prefix {
+			color: var(--uui-color-disabled-contrast);
+		}
+
+		.summary-right {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-4);
+			flex-shrink: 0;
+		}
+
+		.summary-right uui-icon {
+			transition: transform 90ms ease;
+		}
+
+		.summary-right uui-icon.expanded {
+			transform: rotate(90deg);
+		}
+
+		.danger {
+			color: var(--uui-color-danger);
+		}
+
+		.color-red {
+			color: var(--uui-color-danger);
+		}
+
+		.muted {
+			color: var(--uui-color-disabled-contrast);
+			font-size: smaller;
+		}
+
+		.body {
+			padding: 0 var(--uui-size-space-5) var(--uui-size-space-4);
+		}
+
+		.path-line {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: var(--uui-size-space-3);
+			margin-top: var(--uui-size-space-3);
+		}
+
+		.path-line > .muted {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.path-line-actions {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-1, 3px);
+			flex-shrink: 0;
+		}
+
+		.leaf-list {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-3);
+		}
+
+		.leaf {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-1, 3px);
+			padding: var(--uui-size-space-2) var(--uui-size-space-3);
+			border-radius: var(--uui-border-radius);
+			border: 1px solid var(--uui-color-border);
+			background: var(--uui-color-surface-alt);
+		}
+
+		.leaf.added {
+			background: color-mix(in srgb, var(--uui-color-positive) 8%, transparent);
+			border-color: color-mix(in srgb, var(--uui-color-positive) 30%, transparent);
+		}
+
+		.leaf.removed {
+			background: color-mix(in srgb, var(--uui-color-danger) 8%, transparent);
+			border-color: color-mix(in srgb, var(--uui-color-danger) 30%, transparent);
+		}
+
+		.leaf-path {
+			font-family: monospace;
+			font-size: smaller;
+			font-weight: 600;
+			color: var(--uui-color-text);
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.symbol {
+			display: inline-block;
+			width: 1em;
+			font-weight: bold;
+		}
+
+		.added-value {
+			color: var(--uui-color-positive);
+		}
+
+		.removed-value {
+			color: var(--uui-color-danger);
+		}
+
+		.inline-change del {
+			color: var(--uui-color-danger);
+			text-decoration: line-through;
+		}
+
+		.inline-change ins {
+			color: var(--uui-color-positive);
+			text-decoration: none;
+		}
+
+		.word-diff {
+			white-space: pre-wrap;
+		}
+
+		.word-diff ins {
+			color: var(--uui-color-positive);
+			text-decoration: none;
+		}
+
+		.word-diff del {
+			color: var(--uui-color-danger);
+			text-decoration: line-through;
+		}
+
+		.stacked {
+			margin: 0;
+			white-space: pre;
+		}
+
+		.stacked del {
+			display: block;
+			color: var(--uui-color-danger);
+			text-decoration: none;
+		}
+
+		.stacked ins {
+			display: block;
+			color: var(--uui-color-positive);
+			text-decoration: none;
+		}
+
+		.raw-values {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uui-size-space-4);
+			margin-top: var(--uui-size-space-3);
+		}
+
+		.tinted {
+			border-radius: var(--uui-border-radius);
+		}
+
+		uui-scroll-container.line-diff {
+			max-height: 400px;
+			display: block;
+			border: 1px solid var(--uui-color-border);
+			border-radius: var(--uui-border-radius);
+		}
+
+		.line-row {
+			display: flex;
+			gap: var(--uui-size-space-2);
+			font-family: monospace;
+			white-space: pre;
+			padding: 0 var(--uui-size-space-2);
+		}
+
+		.line-row .gutter {
+			display: inline-block;
+			width: 3em;
+			text-align: right;
+			color: var(--uui-color-disabled-contrast);
+			flex-shrink: 0;
+		}
+
+		.line-row .marker {
+			flex-shrink: 0;
+			width: 1em;
+		}
+
+		.line-row .text {
+			white-space: pre;
+		}
+
+		.collapsed-toggle {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-2);
+			padding: var(--uui-size-space-2);
+			color: var(--uui-color-disabled-contrast);
+			cursor: pointer;
+			font-size: smaller;
+		}
+
+		.collapsed-toggle:hover {
+			background-color: var(--uui-color-surface-alt);
+		}
+
+		.notice-callout {
+			padding: var(--uui-size-space-4);
+			border-radius: var(--uui-border-radius);
+			background: color-mix(in srgb, var(--uui-color-danger) 10%, transparent);
+		}
+
+		.notice-callout p {
+			margin: var(--uui-size-space-2) 0 0;
+		}
 	`;
 __decorate([
     property({ type: Object })