diff --git a/foundations.html b/foundations.html
index 7adc265..46d31d9 100644
--- a/foundations.html
+++ b/foundations.html
@@ -138,6 +138,8 @@
| input-field-desktop-width | 400px | Fixe Desktop-Breite von ein- und mehrzeiligen Eingabefeldern in der Input-Component-Preview. |
| input-field-max-width | 600px | Maximale Breite von ein- und mehrzeiligen Eingabefeldern (ohne Suchfeld). |
| search-field-width | 15.3rem | Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. |
+ | multiselect-pulldown-panel-desktop-width | 500px | Desktop-Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern. |
+ | multiselect-pulldown-panel-mobile-width | 80vw | Mobile Breite des geöffneten Multiselektions-Pulldown-Panels im gleichnamigen Pattern. |
| options-row-mode-toggle-width | 7rem | Breite des Modus-Schiebers in der Options Row. |
| options-row-help-panel-width | 16rem | Breite des Help-Panels in der Options Row. |
| card-list-drawer-width | 40% | Relative Breite des ausziehbaren Card-Listenbereichs. |
diff --git a/patterns/multiselektions-pulldown.html b/patterns/multiselektions-pulldown.html
index 6a38cf6..f568ccd 100644
--- a/patterns/multiselektions-pulldown.html
+++ b/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) {
- offsetX -= initialRect.right - (window.innerWidth - viewportInset);
+ if (initialRect.right > maxRight) {
+ offsetX -= initialRect.right - maxRight;
}
- if (initialRect.left + offsetX < viewportInset) {
- offsetX += viewportInset - (initialRect.left + offsetX);
+ if (initialRect.left + offsetX < 0) {
+ offsetX += 0 - (initialRect.left + offsetX);
}
panel.style.left = `${offsetX}px`;
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index ebe52cd..c14d431 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -109,6 +109,8 @@
| layout-pulldown-chevron-offset | compact-interaction-padding-horizontal | Rechter Innenabstand des Chevron-Icons im Pulldown. |
| layout-pulldown-chevron-reserved-space | spacing-large | Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich. |
| layout-pulldown-panel-form-mobile-width | 90% | Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt. |
+ | layout-multiselect-pulldown-panel-desktop-width | dimension-multiselect-pulldown-panel-desktop-width | Desktop-Breite des geöffneten Panels im Pattern Multiselektions-Pulldown. |
+ | layout-multiselect-pulldown-panel-mobile-width | dimension-multiselect-pulldown-panel-mobile-width | Mobile Breite des geöffneten Panels im Pattern Multiselektions-Pulldown. |
| 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 generischen Schließen-Kontrollfelds in aktivierbaren Varianten. |
diff --git a/styleguide.css b/styleguide.css
index 30f9fa5..5df7b45 100644
--- a/styleguide.css
+++ b/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);
}
}