Tokenize multiselect panel sizing and remove local viewport magic values

foundations.html

@@ -138,6 +138,8 @@
         <tr><td>input-field-desktop-width</td><td>400px</td><td>Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview.</td></tr>
         <tr><td>input-field-max-width</td><td>600px</td><td>Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld).</td></tr>
         <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
+        <tr><td>multiselect-pulldown-panel-desktop-width</td><td>500px</td><td>Desktop-Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern.</td></tr>
+        <tr><td>multiselect-pulldown-panel-mobile-width</td><td>80vw</td><td>Mobile Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern.</td></tr>
         <tr><td>options-row-mode-toggle-width</td><td>7rem</td><td>Breite des Modus-Schiebers in der Options Row.</td></tr>
         <tr><td>options-row-help-panel-width</td><td>16rem</td><td>Breite des Help-Panels in der Options Row.</td></tr>
         <tr><td>card-list-drawer-width</td><td>40%</td><td>Relative Breite des ausziehbaren Card-Listenbereichs.</td></tr>

patterns/multiselektions-pulldown.html

@@ -404,20 +404,20 @@
             return;
           }
 
-          const viewportInset = 16;
           demo.dataset.align = 'left';
           panel.style.left = '0px';
           panel.style.right = 'auto';
 
           const initialRect = panel.getBoundingClientRect();
           let offsetX = 0;
+          const maxRight = window.innerWidth;
 
-          if (initialRect.right > window.innerWidth - viewportInset) {
+          if (initialRect.right > maxRight) {
-            offsetX -= initialRect.right - (window.innerWidth - viewportInset);
+            offsetX -= initialRect.right - maxRight;
           }
 
-          if (initialRect.left + offsetX < viewportInset) {
+          if (initialRect.left + offsetX < 0) {
-            offsetX += viewportInset - (initialRect.left + offsetX);
+            offsetX += 0 - (initialRect.left + offsetX);
           }
 
           panel.style.left = `${offsetX}px`;

semantic-tokens-components.html

@@ -109,6 +109,8 @@
       <tr><td>layout-pulldown-chevron-offset</td><td>compact-interaction-padding-horizontal</td><td>Rechter Innenabstand des Chevron-Icons im Pulldown.</td></tr>
       <tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
       <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>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>Desktop-Breite des geöffneten Panels im Pattern Multiselektions-Pulldown.</td></tr>
+      <tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Mobile Breite des geöffneten Panels im Pattern Multiselektions-Pulldown.</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 generischen Schließen-Kontrollfelds in aktivierbaren Varianten.</td></tr>

styleguide.css

@@ -73,6 +73,8 @@
   --layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
   --layout-pulldown-chevron-reserved-space: var(--spacing-large);
   --layout-pulldown-panel-form-mobile-width: 90%;
+  --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-input-label-width: var(--dimension-input-label-width);
   --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
   --layout-input-field-max-width: var(--dimension-input-field-max-width);
@@ -220,6 +222,8 @@
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;
   --dimension-search-field-width: 15.3rem;
+  --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%;
@@ -1874,13 +1878,13 @@ section + section {
 }
 
 .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel {
-  width: 500px;
+  width: var(--layout-multiselect-pulldown-panel-desktop-width);
   max-width: calc(100vw - (2 * var(--spacing-large)));
 }
 
 @media (max-width: 48rem) {
   .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel {
-    width: 80vw;
+    width: var(--layout-multiselect-pulldown-panel-mobile-width);
   }
 }