diff --git a/docs/styleguide/foundations.html b/docs/styleguide/foundations.html
index 679126d..ace804a 100644
--- a/docs/styleguide/foundations.html
+++ b/docs/styleguide/foundations.html
@@ -166,8 +166,11 @@
| object-group-card-min-width | 450px | Mindestbreite der Group Card im Pattern Object Group Card. |
| object-group-card-max-width | 650px | Maximale Breite der Group Card im Pattern Object Group Card. |
| object-group-card-height | 700px | Fixe Desktop-Höhe der Group Card im Pattern Object Group Card. |
- | delete-confirmation-overlay-offset-block-start | 10% | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. |
- | delete-confirmation-overlay-max-height | calc(100vh - 10vh) | Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays. |
+ | delete-confirmation-target-max-width | 35rem | Maximalbreite der Ziel-Card im Overlay-Card-Pattern. |
+ | delete-confirmation-overlay-width-factor | 0.8 | Breitenfaktor des Overlay-Fensters relativ zur Ziel-Card. |
+ | delete-confirmation-overlay-offset-block-start | 10% | Vertikaler Startabstand des Overlay-Fensters relativ zur Parent-Höhe. |
+ | delete-confirmation-target-dim-opacity | 0.5 | Deckkraft der Abdunklung des Zielobjekts bei geöffnetem Overlay. |
+ | layer-delete-confirmation-overlay | 50 | Layer-Stufe des Overlay-Fensters. |
| notifications-card-min-width | 445px | Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns. |
| search-field-width | 15.3rem | Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. |
| layer-pulldown-panel | 40 | Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen. |
diff --git a/docs/styleguide/patterns/delete-confirmation-overlay.html b/docs/styleguide/patterns/delete-confirmation-overlay.html
index 4e96d0d..7c3189d 100644
--- a/docs/styleguide/patterns/delete-confirmation-overlay.html
+++ b/docs/styleguide/patterns/delete-confirmation-overlay.html
@@ -223,12 +223,6 @@
);
let draftListIds = new Set(committedListIds);
let resetAddToListDraftState = () => {};
- const updateFloatingCardHeight = (dialog) => {
- const stageHeight = stage.getBoundingClientRect().height;
- const floatingCardHeight = Math.max(0, Math.round(stageHeight * 0.9));
- dialog.style.setProperty('--layout-delete-confirmation-overlay-height', `${floatingCardHeight}px`);
- };
-
const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => {
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
dialog.hidden = true;
@@ -389,7 +383,6 @@
closeStageDialogs({ resetAddToListDraft: target === 'add-to-list' });
dialog.hidden = false;
- updateFloatingCardHeight(dialog);
stage.dataset.dialogOpen = 'true';
const menuWrap = link.closest('.sg-sandwich-menu-wrap');
diff --git a/docs/styleguide/semantic-tokens-patterns.html b/docs/styleguide/semantic-tokens-patterns.html
index 1055d13..56e8f80 100644
--- a/docs/styleguide/semantic-tokens-patterns.html
+++ b/docs/styleguide/semantic-tokens-patterns.html
@@ -131,16 +131,16 @@
| surface-delete-confirmation-overlay | color-light-grey | Hintergrundfläche des schwebenden Bestätigungsfensters. |
| surface-delete-confirmation-target-dim-overlay | color-black | Overlay-Farbe zur Ausgrauung des Zielobjekts hinter dem Bestätigungsfenster. |
| text-delete-confirmation-overlay | color-font-dark | Textfarbe im Bestätigungsfenster. |
- | layout-delete-confirmation-target-max-width | 35rem | Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. |
- | layout-delete-confirmation-overlay-width-factor | 0.8 | Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%). |
- | layout-delete-confirmation-overlay-offset-block-start | 10% | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. |
- | layout-delete-confirmation-overlay-max-height | calc(100vh - 10vh) | Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays. |
+ | layout-delete-confirmation-target-max-width | dimension-delete-confirmation-target-max-width | Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. |
+ | layout-delete-confirmation-overlay-width-factor | dimension-delete-confirmation-overlay-width-factor | Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts. |
+ | layout-delete-confirmation-overlay-offset-block-start | dimension-delete-confirmation-overlay-offset-block-start | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Parent-Höhe. |
+ | layout-delete-confirmation-overlay-max-height | 100% minus 2 × offset-block-start | Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich. |
| layout-delete-confirmation-content-gap | spacing-small | Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay. |
| layout-delete-confirmation-actions-gap | spacing-small | Horizontaler Abstand zwischen Abbrechen- und Löschen-Button. |
| layout-delete-confirmation-actions-offset-block-start | spacing-large | Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile. |
| layout-delete-confirmation-label-width | dimension-input-label-width | Label-Spaltenbreite der einzeiligen Bestätigungseingabe. |
- | layout-delete-confirmation-target-dim-opacity | 0.5 | Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt (50% ausgegraut). |
- | layer-delete-confirmation-overlay | 50 | Z-Index-Layer des schwebenden Bestätigungsfensters. |
+ | layout-delete-confirmation-target-dim-opacity | opacity-delete-confirmation-target-dim | Deckkraft der grauen Überlagerung auf dem zu löschenden Objekt. |
+ | layer-delete-confirmation-overlay | dimension-layer-delete-confirmation-overlay | Z-Index-Layer des schwebenden Bestätigungsfensters. |
diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css
index 8c0ff27..9fcb76a 100644
--- a/docs/styleguide/styles/01-foundations.css
+++ b/docs/styleguide/styles/01-foundations.css
@@ -229,16 +229,16 @@
--surface-delete-confirmation-overlay: var(--color-light-grey);
--surface-delete-confirmation-target-dim-overlay: var(--color-black);
--text-delete-confirmation-overlay: var(--color-font-dark);
- --layout-delete-confirmation-target-max-width: 35rem;
- --layout-delete-confirmation-overlay-width-factor: 0.8;
- --layout-delete-confirmation-overlay-offset-block-start: 10%;
- --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
+ --layout-delete-confirmation-target-max-width: var(--dimension-delete-confirmation-target-max-width);
+ --layout-delete-confirmation-overlay-width-factor: var(--dimension-delete-confirmation-overlay-width-factor);
+ --layout-delete-confirmation-overlay-offset-block-start: var(--dimension-delete-confirmation-overlay-offset-block-start);
+ --layout-delete-confirmation-overlay-max-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start) - var(--layout-delete-confirmation-overlay-offset-block-start));
--layout-delete-confirmation-content-gap: var(--spacing-small);
--layout-delete-confirmation-actions-gap: var(--spacing-small);
--layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
--layout-delete-confirmation-label-width: var(--dimension-input-label-width);
- --layout-delete-confirmation-target-dim-opacity: 0.5;
- --layer-delete-confirmation-overlay: 50;
+ --layout-delete-confirmation-target-dim-opacity: var(--opacity-delete-confirmation-target-dim);
+ --layer-delete-confirmation-overlay: var(--dimension-layer-delete-confirmation-overlay);
/* Typography */
--font-family-base: "Open Sans", sans-serif;
@@ -292,6 +292,11 @@
--dimension-object-group-card-min-width: 450px;
--dimension-object-group-card-max-width: 650px;
--dimension-object-group-card-height: 700px;
+ --dimension-delete-confirmation-target-max-width: 35rem;
+ --dimension-delete-confirmation-overlay-width-factor: 0.8;
+ --dimension-delete-confirmation-overlay-offset-block-start: 10%;
+ --opacity-delete-confirmation-target-dim: 0.5;
+ --dimension-layer-delete-confirmation-overlay: 50;
--dimension-notification-card-width: 50%;
--dimension-user-notification-card-width: 70%;
--dimension-input-label-width: 9rem;
diff --git a/docs/styleguide/styles/27-patterns-delete-confirmation.css b/docs/styleguide/styles/27-patterns-delete-confirmation.css
index dd319df..f44caac 100644
--- a/docs/styleguide/styles/27-patterns-delete-confirmation.css
+++ b/docs/styleguide/styles/27-patterns-delete-confirmation.css
@@ -42,13 +42,14 @@
.sg-delete-confirmation-pattern__floating-card {
position: absolute;
- top: 50%;
+ top: var(--layout-delete-confirmation-overlay-offset-block-start);
left: 50%;
- transform: translate(-50%, -50%);
+ transform: translateX(-50%);
width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
box-sizing: border-box;
max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
- height: var(--layout-delete-confirmation-overlay-height, auto);
+ height: auto;
+ max-height: var(--layout-delete-confirmation-overlay-max-height);
overflow: hidden;
z-index: var(--layer-delete-confirmation-overlay);
box-shadow: var(--shadow-overlay);
diff --git a/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css b/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css
index f1f6704..2c8080d 100644
--- a/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css
+++ b/docs/styleguide/styles/33-layouts-vsf-list-detailseite.css
@@ -48,10 +48,10 @@
.sg-vsf-list-detail-page__meldungen-overlay-pattern {
max-width: 100%;
+ --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5);
}
.sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
- top: calc(var(--spacing-large) * 5);
transform: translateX(-50%);
}
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index f942bad..890c4cd 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -229,16 +229,16 @@
--surface-delete-confirmation-overlay: var(--color-light-grey);
--surface-delete-confirmation-target-dim-overlay: var(--color-black);
--text-delete-confirmation-overlay: var(--color-font-dark);
- --layout-delete-confirmation-target-max-width: 35rem;
- --layout-delete-confirmation-overlay-width-factor: 0.8;
- --layout-delete-confirmation-overlay-offset-block-start: 10%;
- --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
+ --layout-delete-confirmation-target-max-width: var(--dimension-delete-confirmation-target-max-width);
+ --layout-delete-confirmation-overlay-width-factor: var(--dimension-delete-confirmation-overlay-width-factor);
+ --layout-delete-confirmation-overlay-offset-block-start: var(--dimension-delete-confirmation-overlay-offset-block-start);
+ --layout-delete-confirmation-overlay-max-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start) - var(--layout-delete-confirmation-overlay-offset-block-start));
--layout-delete-confirmation-content-gap: var(--spacing-small);
--layout-delete-confirmation-actions-gap: var(--spacing-small);
--layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
--layout-delete-confirmation-label-width: var(--dimension-input-label-width);
- --layout-delete-confirmation-target-dim-opacity: 0.5;
- --layer-delete-confirmation-overlay: 50;
+ --layout-delete-confirmation-target-dim-opacity: var(--opacity-delete-confirmation-target-dim);
+ --layer-delete-confirmation-overlay: var(--dimension-layer-delete-confirmation-overlay);
/* Typography */
--font-family-base: "Open Sans", sans-serif;
@@ -292,6 +292,11 @@
--dimension-object-group-card-min-width: 450px;
--dimension-object-group-card-max-width: 650px;
--dimension-object-group-card-height: 700px;
+ --dimension-delete-confirmation-target-max-width: 35rem;
+ --dimension-delete-confirmation-overlay-width-factor: 0.8;
+ --dimension-delete-confirmation-overlay-offset-block-start: 10%;
+ --opacity-delete-confirmation-target-dim: 0.5;
+ --dimension-layer-delete-confirmation-overlay: 50;
--dimension-notification-card-width: 50%;
--dimension-user-notification-card-width: 70%;
--dimension-input-label-width: 9rem;
@@ -2969,13 +2974,14 @@ section + section {
.sg-delete-confirmation-pattern__floating-card {
position: absolute;
- top: 50%;
+ top: var(--layout-delete-confirmation-overlay-offset-block-start);
left: 50%;
- transform: translate(-50%, -50%);
+ transform: translateX(-50%);
width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
box-sizing: border-box;
max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
- height: var(--layout-delete-confirmation-overlay-height, auto);
+ height: auto;
+ max-height: var(--layout-delete-confirmation-overlay-max-height);
overflow: hidden;
z-index: var(--layer-delete-confirmation-overlay);
box-shadow: var(--shadow-overlay);
@@ -3646,10 +3652,10 @@ main {
.sg-vsf-list-detail-page__meldungen-overlay-pattern {
max-width: 100%;
+ --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5);
}
.sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
- top: calc(var(--spacing-large) * 5);
transform: translateX(-50%);
}
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 42031c7..9b5e139 100644
--- a/public/assets/styleguide.upstream.meta.json
+++ b/public/assets/styleguide.upstream.meta.json
@@ -1,7 +1,7 @@
{
"styleguideVersion": "2026.05.18.1",
- "styleguideCommit": "ed1c450",
- "syncedAtUtc": "2026-08-31T10:57:00Z",
+ "styleguideCommit": "3f4ec38",
+ "syncedAtUtc": "2026-09-03T15:57:49Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
diff --git a/public/assets/styles.css b/public/assets/styles.css
index f942bad..890c4cd 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -229,16 +229,16 @@
--surface-delete-confirmation-overlay: var(--color-light-grey);
--surface-delete-confirmation-target-dim-overlay: var(--color-black);
--text-delete-confirmation-overlay: var(--color-font-dark);
- --layout-delete-confirmation-target-max-width: 35rem;
- --layout-delete-confirmation-overlay-width-factor: 0.8;
- --layout-delete-confirmation-overlay-offset-block-start: 10%;
- --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
+ --layout-delete-confirmation-target-max-width: var(--dimension-delete-confirmation-target-max-width);
+ --layout-delete-confirmation-overlay-width-factor: var(--dimension-delete-confirmation-overlay-width-factor);
+ --layout-delete-confirmation-overlay-offset-block-start: var(--dimension-delete-confirmation-overlay-offset-block-start);
+ --layout-delete-confirmation-overlay-max-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start) - var(--layout-delete-confirmation-overlay-offset-block-start));
--layout-delete-confirmation-content-gap: var(--spacing-small);
--layout-delete-confirmation-actions-gap: var(--spacing-small);
--layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
--layout-delete-confirmation-label-width: var(--dimension-input-label-width);
- --layout-delete-confirmation-target-dim-opacity: 0.5;
- --layer-delete-confirmation-overlay: 50;
+ --layout-delete-confirmation-target-dim-opacity: var(--opacity-delete-confirmation-target-dim);
+ --layer-delete-confirmation-overlay: var(--dimension-layer-delete-confirmation-overlay);
/* Typography */
--font-family-base: "Open Sans", sans-serif;
@@ -292,6 +292,11 @@
--dimension-object-group-card-min-width: 450px;
--dimension-object-group-card-max-width: 650px;
--dimension-object-group-card-height: 700px;
+ --dimension-delete-confirmation-target-max-width: 35rem;
+ --dimension-delete-confirmation-overlay-width-factor: 0.8;
+ --dimension-delete-confirmation-overlay-offset-block-start: 10%;
+ --opacity-delete-confirmation-target-dim: 0.5;
+ --dimension-layer-delete-confirmation-overlay: 50;
--dimension-notification-card-width: 50%;
--dimension-user-notification-card-width: 70%;
--dimension-input-label-width: 9rem;
@@ -2969,13 +2974,14 @@ section + section {
.sg-delete-confirmation-pattern__floating-card {
position: absolute;
- top: 50%;
+ top: var(--layout-delete-confirmation-overlay-offset-block-start);
left: 50%;
- transform: translate(-50%, -50%);
+ transform: translateX(-50%);
width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
box-sizing: border-box;
max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
- height: var(--layout-delete-confirmation-overlay-height, auto);
+ height: auto;
+ max-height: var(--layout-delete-confirmation-overlay-max-height);
overflow: hidden;
z-index: var(--layer-delete-confirmation-overlay);
box-shadow: var(--shadow-overlay);
@@ -3646,10 +3652,10 @@ main {
.sg-vsf-list-detail-page__meldungen-overlay-pattern {
max-width: 100%;
+ --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5);
}
.sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
- top: calc(var(--spacing-large) * 5);
transform: translateX(-50%);
}