From be83f6e69cb29d615af45f8085cb6c93b6568c64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 4 Jun 2026 14:30:00 +0200
Subject: [PATCH] Add left-only options row variant

---
 patterns/options-row.html          | 91 ++++++++++++++++++++++++++++++
 styles/21-patterns-options-row.css | 19 ++++++-
 2 files changed, 109 insertions(+), 1 deletion(-)

diff --git a/patterns/options-row.html b/patterns/options-row.html
index f23be96..9c8bdb2 100644
--- a/patterns/options-row.html
+++ b/patterns/options-row.html
@@ -120,6 +120,97 @@
     </div>
   </section>
 
+  <section id="pattern-options-row-left-only">
+    <p class="sg-preview-label">Pattern: Options row left only</p>
+
+    <p class="sg-table-label" style="color: var(--text-options-row-description);">
+      Desktop/Tablet: nur linksbündige Elemente innerhalb einer gemeinsamen Options Row.
+    </p>
+
+    <p class="sg-table-label" style="color: var(--text-options-row-description);">
+      Mobile: keine zweite Segmentierung, die linke Gruppe bleibt als einziger Block erhalten.
+    </p>
+
+    <div class="sg-options-row sg-options-row--left-only" aria-label="Optionszeile nur links" data-pattern="options-row-left-only">
+
+      <div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
+        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
+          <button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Kategorie" data-component-part="pulldown-trigger" data-label-base="Kategorie">
+            Kategorie
+          </button>
+
+          <div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Kategorie" data-component-part="pulldown-panel">
+            <ul class="sg-pulldown-option-list" aria-label="Kategorienoptionen">
+              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                <span>Menüpunkt 1</span>
+              </li>
+
+              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                <span>Menüpunkt 2</span>
+              </li>
+
+              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                <span>Menüpunkt 3</span>
+              </li>
+
+              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                <span>Menüpunkt 4</span>
+              </li>
+
+              <li class="sg-pulldown-option sg-pulldown-option--disabled">
+                <span>Menüpunkt 5</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="sg-search-field-row">
+          <span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
+            <input
+              class="sg-interaction-element sg-input-single-line"
+              type="text"
+              placeholder="Suche"
+              aria-label="Suche"
+            >
+            <button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
+          </span>
+          <span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
+        </div>
+
+        <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
+          <button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Status" data-component-part="pulldown-trigger" data-label-base="Status">
+            Status
+          </button>
+
+          <div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Status" data-component-part="pulldown-panel">
+            <ul class="sg-pulldown-option-list" aria-label="Statusoptionen">
+              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                <span>Menüpunkt 1</span>
+              </li>
+
+              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                <span>Menüpunkt 2</span>
+              </li>
+
+              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                <span>Menüpunkt 3</span>
+              </li>
+
+              <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
+                <span>Menüpunkt 4</span>
+              </li>
+
+              <li class="sg-pulldown-option sg-pulldown-option--disabled">
+                <span>Menüpunkt 5</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+
   <script src="../scripts/help-icon-overlays.js"></script>
   <script>
 
diff --git a/styles/21-patterns-options-row.css b/styles/21-patterns-options-row.css
index 610ca3b..7459299 100644
--- a/styles/21-patterns-options-row.css
+++ b/styles/21-patterns-options-row.css
@@ -29,6 +29,10 @@
   background: var(--surface-options-row);
 }
 
+.sg-options-row--left-only {
+  justify-content: flex-start;
+}
+
 .sg-options-row__left,
 .sg-options-row__right {
   display: flex;
@@ -73,6 +77,20 @@
     box-shadow: inset 0 1px 0 var(--divider-options-row-mobile);
   }
 
+  .sg-options-row--left-only {
+    flex-direction: row;
+    gap: var(--layout-options-row-main-gap);
+    padding:
+      var(--card-segment-padding-vertical)
+      var(--layout-page-content-inset-inline);
+  }
+
+  .sg-options-row--left-only .sg-options-row__left {
+    order: 0;
+    padding: 0;
+    box-shadow: none;
+  }
+
   .sg-options-row__left > .sg-pulldown-demo,
   .sg-options-row__left > .sg-input-single-line-wrap,
   .sg-options-row__left > .sg-search-field-row {
@@ -161,4 +179,3 @@
     grid-column: 1 / -1;
   }
 }
-