diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html index 9530030..8f2e2a2 100644 --- a/semantic-tokens-patterns.html +++ b/semantic-tokens-patterns.html @@ -86,6 +86,11 @@ text-align-text-layout-column-centercenterTextausrichtung der mittleren Spalte im Pattern Dreispaltig verteilt. text-align-text-layout-column-rightrightTextausrichtung der rechten Spalte im Pattern Dreispaltig verteilt. + +

Multiselektions-Pulldown

+ + +
Semantischer TokenVerwendeter Foundation-TokenBeschreibung Verwendungszweck im Pattern
layout-multiselect-pulldown-label-column-width-fallbackmax-contentFallback-Breite der gemeinsamen Labelspalte im Panel, bis die längste Labelbreite per Pattern-Logik ermittelt wurde.
diff --git a/styles/01-foundations.css b/styles/01-foundations.css index adbcf3b..6a67329 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -77,6 +77,7 @@ --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); --layout-input-field-max-width: var(--dimension-input-field-max-width); @@ -279,4 +280,3 @@ --sg-slider-progress: 0%; --chart-label-position: var(--chart-label-position-default); } - diff --git a/styles/25-patterns-form-sections.css b/styles/25-patterns-form-sections.css index 7613c87..e9c6673 100644 --- a/styles/25-patterns-form-sections.css +++ b/styles/25-patterns-form-sections.css @@ -74,7 +74,7 @@ } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { - --sg-multiselect-label-column-width: max-content; + --sg-multiselect-label-column-width: var(--layout-multiselect-pulldown-label-column-width-fallback); } .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label, @@ -274,4 +274,3 @@ flex-direction: column; gap: var(--layout-content-cards-group-gap); } -