Sync styleguide 2026.05.18.1

docs/styleguide/.claude/settings.json

@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Write",
+      "Edit",
+      "Bash"
+    ]
+  }
+}

docs/styleguide/semantic-tokens-components.html

@@ -136,7 +136,6 @@
       <tr><td>layout-pulldown-panel-form-mobile-width</td><td>90%</td><td>Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.</td></tr>
       <tr><td>layer-pulldown-panel</td><td>dimension-layer-pulldown-panel</td><td>Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten.</td></tr>
       <tr><td>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>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.</td></tr>
-      <tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
       <tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
       <tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
       <tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.</td></tr>

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%;

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%;
+    min-width: auto;
-    width: max-content;
-    max-width: calc(100vw - (2 * var(--spacing-large)));
   }
 
   .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {

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%;
+    min-width: auto;
-    width: max-content;
-    max-width: calc(100vw - (2 * var(--spacing-large)));
   }
 
   .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {

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"
 }

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%;
+    min-width: auto;
-    width: max-content;
-    max-width: calc(100vw - (2 * var(--spacing-large)));
   }
 
   .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {