Add Multiselektionspulldown pattern based on form sections structure

styleguide.css

@@ -150,6 +150,14 @@
   --layout-options-row-group-gap: var(--spacing-small);
   --layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width);
   --layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width);
+  --surface-multiselect-pulldown: var(--color-light-grey);
+  --surface-multiselect-pulldown-shell: var(--color-light-grey);
+  --surface-multiselect-pulldown-control: var(--surface-control-default);
+  --surface-multiselect-pulldown-control-selected: var(--surface-control-active);
+  --text-multiselect-pulldown-default: var(--text-control-default);
+  --text-multiselect-pulldown-muted: var(--text-control-disabled);
+  --layout-multiselect-pulldown-width: var(--dimension-multiselect-pulldown-width);
+  --layout-multiselect-pulldown-row-label-width: var(--dimension-multiselect-pulldown-row-label-width);
   --layout-object-card-min-width: var(--dimension-object-card-min-width);
   --layout-object-card-max-width: var(--dimension-object-card-max-width);
   --layout-object-card-height: var(--dimension-object-card-height);
@@ -222,6 +230,8 @@
   --dimension-search-field-width: 15.3rem;
   --dimension-options-row-mode-toggle-width: 7rem;
   --dimension-options-row-help-panel-width: 16rem;
+  --dimension-multiselect-pulldown-width: 48rem;
+  --dimension-multiselect-pulldown-row-label-width: 15rem;
   --dimension-card-list-drawer-width: 40%;
   --dimension-slider-track-height: 6px;
   --dimension-slider-thumb-size: 22px;
@@ -1616,6 +1626,136 @@ section + section {
   }
 }
 
+/* ========================================================= */
+/* Patterns: Multiselektionspulldown                         */
+/* ========================================================= */
+
+.sg-multiselect-pulldown-demo {
+  width: var(--layout-multiselect-pulldown-width);
+  max-width: 100%;
+}
+
+.sg-multiselect-pulldown-demo__controls {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-small);
+  width: 100%;
+  margin-bottom: var(--spacing-small);
+  padding: var(--spacing-small);
+  border-radius: var(--radius-card);
+  background: var(--surface-multiselect-pulldown-shell);
+}
+
+.sg-multiselect-pulldown-demo__search-wrap {
+  flex: 0 1 15rem;
+}
+
+.sg-multiselect-pulldown-demo__results {
+  color: var(--text-multiselect-pulldown-default);
+}
+
+.sg-multiselect-pulldown {
+  --surface-pulldown-panel: var(--surface-multiselect-pulldown);
+  --surface-control-default: var(--surface-multiselect-pulldown-control);
+  --surface-control-active: var(--surface-multiselect-pulldown-control-selected);
+  --text-control-default: var(--text-multiselect-pulldown-default);
+  --text-control-disabled: var(--text-multiselect-pulldown-muted);
+}
+
+.sg-multiselect-pulldown > .sg-pulldown-demo__trigger {
+  display: none;
+}
+
+.sg-multiselect-pulldown > .sg-pulldown-panel {
+  position: static;
+  display: flex;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  padding: var(--spacing-large);
+}
+
+.sg-multiselect-pulldown__form-wrapper,
+.sg-multiselect-pulldown__form {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.sg-multiselect-pulldown__form {
+  box-shadow: none;
+}
+
+.sg-multiselect-pulldown__form-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  padding: 0;
+  background: var(--surface-multiselect-pulldown);
+}
+
+.sg-multiselect-pulldown__actions-segment {
+  display: none;
+}
+
+.sg-multiselect-pulldown__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.sg-multiselect-pulldown__section-title {
+  margin: 0;
+}
+
+.sg-multiselect-pulldown__section .sg-slider-row,
+.sg-multiselect-pulldown__row-label,
+.sg-multiselect-pulldown__radio-row {
+  display: grid;
+  grid-template-columns: var(--layout-multiselect-pulldown-row-label-width) minmax(0, 1fr) auto auto;
+  align-items: center;
+  column-gap: var(--spacing-small);
+}
+
+.sg-multiselect-pulldown__section .sg-slider-row .sg-label,
+.sg-multiselect-pulldown__row-label .sg-label,
+.sg-multiselect-pulldown__radio-row > .sg-label {
+  min-width: 0;
+  margin: 0;
+}
+
+.sg-multiselect-pulldown__section .sg-slider-row .sg-slider {
+  min-width: 0;
+  width: 100%;
+}
+
+.sg-multiselect-pulldown__section .sg-slider-row .sg-slider-value {
+  min-width: calc(var(--interaction-height) * 1.25);
+  text-align: right;
+}
+
+.sg-multiselect-pulldown__radio-row {
+  grid-template-columns: var(--layout-multiselect-pulldown-row-label-width) auto auto;
+}
+
+.sg-multiselect-pulldown__compact-pulldown {
+  width: max-content;
+  min-width: 7.5rem;
+}
+
+@media (max-width: 48rem) {
+  .sg-multiselect-pulldown-demo {
+    width: 100%;
+  }
+
+  .sg-multiselect-pulldown__section .sg-slider-row,
+  .sg-multiselect-pulldown__row-label,
+  .sg-multiselect-pulldown__radio-row {
+    grid-template-columns: 1fr;
+    row-gap: var(--spacing-small);
+  }
+}
+
 /* ========================================================= */
 /* Patterns: Object Card                                     */
 /* ========================================================= */