diff --git a/docs/styleguide/.claude/settings.json b/docs/styleguide/.claude/settings.json
new file mode 100644
index 0000000..02613c3
--- /dev/null
+++ b/docs/styleguide/.claude/settings.json
@@ -0,0 +1,9 @@
+{
+ "permissions": {
+ "allow": [
+ "Write",
+ "Edit",
+ "Bash"
+ ]
+ }
+}
diff --git a/docs/styleguide/semantic-tokens-components.html b/docs/styleguide/semantic-tokens-components.html
index 7eba895..303e833 100644
--- a/docs/styleguide/semantic-tokens-components.html
+++ b/docs/styleguide/semantic-tokens-components.html
@@ -136,7 +136,6 @@
| layout-pulldown-panel-form-mobile-width | 90% | Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt. |
| layer-pulldown-panel | dimension-layer-pulldown-panel | Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten. |
| layout-multiselect-pulldown-panel-desktop-width | dimension-multiselect-pulldown-panel-desktop-width | Semantische Obergrenze für die Panelbreite geöffneter Pulldowns; das Panel darf über Triggerbreite wachsen, bleibt aber durch diese Breite und die Viewport-Kappe begrenzt. |
- | layout-multiselect-pulldown-panel-mobile-width | dimension-multiselect-pulldown-panel-mobile-width | Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert. |
| surface-menu-panel-portal | color-light-grey | Fläche des Sandwich-Menü-Panels für große und kleine Variante. |
| text-menu-link-portal | color-font-dark | Linktextfarbe im Sandwich-Menü für große und kleine Variante. |
| text-activatable-remove | text-control-default | Zeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche. |
diff --git a/docs/styleguide/styles/01-foundations.css b/docs/styleguide/styles/01-foundations.css
index aff2570..9a8329e 100644
--- a/docs/styleguide/styles/01-foundations.css
+++ b/docs/styleguide/styles/01-foundations.css
@@ -77,7 +77,6 @@
--layout-pulldown-panel-form-mobile-width: 90%;
--layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
--layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
- --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
--layout-multiselect-pulldown-label-column-width-fallback: max-content;
--layout-input-label-width: var(--dimension-input-label-width);
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
@@ -277,7 +276,6 @@
--dimension-search-field-width: 15.3rem;
--dimension-layer-pulldown-panel: 40;
--dimension-multiselect-pulldown-panel-desktop-width: 500px;
- --dimension-multiselect-pulldown-panel-mobile-width: 80vw;
--dimension-options-row-mode-toggle-width: 7rem;
--dimension-options-row-help-panel-width: 16rem;
--dimension-card-list-drawer-width: 40%;
diff --git a/docs/styleguide/styles/25-patterns-form-sections.css b/docs/styleguide/styles/25-patterns-form-sections.css
index 5bba2fe..ff19e5c 100644
--- a/docs/styleguide/styles/25-patterns-form-sections.css
+++ b/docs/styleguide/styles/25-patterns-form-sections.css
@@ -205,7 +205,7 @@
opacity: var(--disabled-opacity);
}
-.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
min-width: 100%;
width: max-content;
max-width: calc(100vw - (2 * var(--spacing-large)));
@@ -213,9 +213,7 @@
@media (max-width: 48rem) {
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
- min-width: 100%;
- width: max-content;
- max-width: calc(100vw - (2 * var(--spacing-large)));
+ min-width: auto;
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css
index f39af61..1406d9d 100644
--- a/public/assets/styleguide.upstream.css
+++ b/public/assets/styleguide.upstream.css
@@ -77,7 +77,6 @@
--layout-pulldown-panel-form-mobile-width: 90%;
--layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
--layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
- --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
--layout-multiselect-pulldown-label-column-width-fallback: max-content;
--layout-input-label-width: var(--dimension-input-label-width);
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
@@ -277,7 +276,6 @@
--dimension-search-field-width: 15.3rem;
--dimension-layer-pulldown-panel: 40;
--dimension-multiselect-pulldown-panel-desktop-width: 500px;
- --dimension-multiselect-pulldown-panel-mobile-width: 80vw;
--dimension-options-row-mode-toggle-width: 7rem;
--dimension-options-row-help-panel-width: 16rem;
--dimension-card-list-drawer-width: 40%;
@@ -2511,7 +2509,7 @@ section + section {
opacity: var(--disabled-opacity);
}
-.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
min-width: 100%;
width: max-content;
max-width: calc(100vw - (2 * var(--spacing-large)));
@@ -2519,9 +2517,7 @@ section + section {
@media (max-width: 48rem) {
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
- min-width: 100%;
- width: max-content;
- max-width: calc(100vw - (2 * var(--spacing-large)));
+ min-width: auto;
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json
index 74f9fb3..9e28d6e 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": "a5e286f",
- "syncedAtUtc": "2026-06-05T06:08:46Z",
+ "syncedAtUtc": "2026-06-09T06:55:23Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
diff --git a/public/assets/styles.css b/public/assets/styles.css
index f39af61..1406d9d 100644
--- a/public/assets/styles.css
+++ b/public/assets/styles.css
@@ -77,7 +77,6 @@
--layout-pulldown-panel-form-mobile-width: 90%;
--layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
--layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
- --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
--layout-multiselect-pulldown-label-column-width-fallback: max-content;
--layout-input-label-width: var(--dimension-input-label-width);
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
@@ -277,7 +276,6 @@
--dimension-search-field-width: 15.3rem;
--dimension-layer-pulldown-panel: 40;
--dimension-multiselect-pulldown-panel-desktop-width: 500px;
- --dimension-multiselect-pulldown-panel-mobile-width: 80vw;
--dimension-options-row-mode-toggle-width: 7rem;
--dimension-options-row-help-panel-width: 16rem;
--dimension-card-list-drawer-width: 40%;
@@ -2511,7 +2509,7 @@ section + section {
opacity: var(--disabled-opacity);
}
-.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
+.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
min-width: 100%;
width: max-content;
max-width: calc(100vw - (2 * var(--spacing-large)));
@@ -2519,9 +2517,7 @@ section + section {
@media (max-width: 48rem) {
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
- min-width: 100%;
- width: max-content;
- max-width: calc(100vw - (2 * var(--spacing-large)));
+ min-width: auto;
}
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {