From a50ed1d8e8ce8d9521efecb90a20855111ffd0aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 10 Jun 2026 13:27:33 +0200
Subject: [PATCH] Remove gridfield and tune pulldown spacing

---
 components/gridfield.html                     | 42 ---------------
 index.html                                    |  1 -
 semantic-tokens-components.html               |  8 ---
 styleguide.css                                |  1 -
 styles/01-foundations.css                     |  4 --
 styles/10-components-interactive-elements.css |  8 +--
 styles/11-components-gridfield.css            | 52 -------------------
 7 files changed, 4 insertions(+), 112 deletions(-)
 delete mode 100644 components/gridfield.html
 delete mode 100644 styles/11-components-gridfield.css
diff --git a/components/gridfield.html b/components/gridfield.html
deleted file mode 100644
index b951e44..0000000
--- a/components/gridfield.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!doctype html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Styleguide – Gridfield</title>
-  <link rel="stylesheet" href="../styleguide.css">
-</head>
-<body class="sg-page-gridfield">
-
-  <h1 class="sg-main-heading">Components – Gridfield</h1>
-
-  <section id="component-gridfield">
-    <p class="sg-preview-label">Component: Gridfield</p>
-
-    <div class="sg-gridfield-demo" data-component="gridfield">
-      <div class="sg-gridfield-row" data-gridfield-state="normal">
-        <p class="sg-table-label">Komponente normal</p>
-        <span class="sg-label">Label</span>
-        <select class="sg-interaction-element sg-pulldown" aria-label="Gridfield Pulldown">
-          <option selected>Auswahl</option>
-        </select>
-      </div>
-
-      <div class="sg-gridfield-row" data-gridfield-state="input">
-        <p class="sg-table-label">Eingabefeld</p>
-        <span class="sg-label">Label</span>
-        <input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Einzeiliges Eingabefeld" aria-label="Gridfield Eingabefeld">
-      </div>
-
-      <div class="sg-gridfield-row" data-gridfield-state="disabled">
-        <p class="sg-table-label">form-disabled</p>
-        <span class="sg-label">Label</span>
-        <select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Gridfield deaktivierter Pulldown" disabled>
-          <option>Nicht verfügbar</option>
-        </select>
-      </div>
-    </div>
-  </section>
-
-</body>
-</html>
diff --git a/index.html b/index.html
index 0cc891b..3643483 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,6 @@
 
       <ul class="sg-index-list">
         <li><a href="./components/cards.html">Cards</a></li>
-        <li><a href="./components/gridfield.html">Gridfield</a></li>
         <li><a href="./components/interactive-elements.html">Interactive Elements</a></li>
         <li><a href="./components/charts.html">Charts</a></li>
         <li><a href="./components/data-display.html">Data Display</a></li>
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index fdc8df5..303e833 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -122,14 +122,6 @@
       <tr><td>layout-search-field-width</td><td>dimension-search-field-width</td><td>Fixe Breite des Suchfeld-Inputs.</td></tr>
     </tbody></table>
 
-    <h3 class="sg-sub-heading sg-section-h3">Gridfield</h3>
-    <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
-      <tr><td>layout-gridfield-label-column-width</td><td>layout-input-label-width</td><td>Breite der Label-Spalte der Gridfield-Zeile.</td></tr>
-      <tr><td>layout-gridfield-column-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Label und Control in der Gridfield-Zeile.</td></tr>
-      <tr><td>layout-gridfield-row-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen Label und Control in gestapelten Gridfield-Zeilen.</td></tr>
-      <tr><td>layout-gridfield-field-max-width</td><td>layout-input-field-max-width</td><td>Maximale Breite des Control-Bereichs im Gridfield.</td></tr>
-    </tbody></table>
-
     <h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</h3>
     <p class="sg-table-label">Changelog (2026-05-25): Overlay-Layer vereinheitlicht; Pulldowns liegen über Scorebars (Fix Relativmodus).</p>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
diff --git a/styleguide.css b/styleguide.css
index 59d91fc..66b3a38 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2,7 +2,6 @@
 @import "./styles/02-base.css";
 @import "./styles/03-typography-helpers.css";
 @import "./styles/10-components-interactive-elements.css";
-@import "./styles/11-components-gridfield.css";
 @import "./styles/20-patterns-portal-header.css";
 @import "./styles/21-patterns-options-row.css";
 @import "./styles/22-patterns-object-card.css";
diff --git a/styles/01-foundations.css b/styles/01-foundations.css
index 05089f9..9a8329e 100644
--- a/styles/01-foundations.css
+++ b/styles/01-foundations.css
@@ -81,10 +81,6 @@
   --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);
-  --layout-gridfield-label-column-width: var(--layout-input-label-width);
-  --layout-gridfield-column-gap: var(--spacing-small);
-  --layout-gridfield-row-gap: var(--spacing-small);
-  --layout-gridfield-field-max-width: var(--layout-input-field-max-width);
   --layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
   --layout-search-field-width: var(--dimension-search-field-width);
   --layout-mode-toggle-local-height: var(--compact-interaction-height);
diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index 2c0a203..9c89d3f 100644
--- a/styles/10-components-interactive-elements.css
+++ b/styles/10-components-interactive-elements.css
@@ -520,10 +520,9 @@
       }
 
       #component-pulldown .sg-labeled-input-row {
-        display: grid;
-        grid-template-columns: max-content minmax(0, 1fr);
-        align-items: center;
-        column-gap: var(--spacing-small);
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-small);
         width: 100%;
         max-width: 100%;
       }
@@ -554,6 +553,7 @@
       .sg-labeled-input-row {
         flex-direction: column;
         align-items: flex-start;
+        gap: var(--spacing-small);
         width: 100%;
         max-width: 100%;
       }
diff --git a/styles/11-components-gridfield.css b/styles/11-components-gridfield.css
deleted file mode 100644
index 1486693..0000000
--- a/styles/11-components-gridfield.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/* ========================================================= */
-/* Components: Gridfield                                     */
-/* ========================================================= */
-
-    .sg-gridfield-demo {
-      display: inline-flex;
-      flex-direction: column;
-      gap: var(--spacing-small);
-      width: fit-content;
-      padding: var(--spacing-large);
-      border-radius: var(--radius-card);
-      background: var(--surface-form-preview);
-    }
-
-    .sg-gridfield-row {
-      display: grid;
-      grid-template-columns: var(--layout-gridfield-label-column-width) minmax(0, 1fr);
-      column-gap: var(--layout-gridfield-column-gap);
-      align-items: center;
-      width: 100%;
-      max-width: var(--layout-gridfield-field-max-width);
-    }
-
-    .sg-gridfield-row .sg-label {
-      min-width: 0;
-      margin: 0;
-      line-height: 1;
-      color: var(--text-control-default);
-    }
-
-    .sg-gridfield-row .sg-interaction-element,
-    .sg-gridfield-row .sg-pulldown-demo,
-    .sg-gridfield-row .sg-pulldown {
-      width: 100%;
-      min-width: 0;
-      max-width: 100%;
-    }
-
-    @media (max-width: 48rem) {
-      .sg-gridfield-demo {
-        width: 100%;
-        max-width: 100%;
-        box-sizing: border-box;
-      }
-
-      .sg-gridfield-row {
-        grid-template-columns: 1fr;
-        row-gap: var(--layout-gridfield-row-gap);
-        align-items: start;
-        max-width: 100%;
-      }
-    }

Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck in der Komponente
layout-gridfield-label-column-width	layout-input-label-width	Breite der Label-Spalte der Gridfield-Zeile.
layout-gridfield-column-gap	spacing-small	Horizontaler Abstand zwischen Label und Control in der Gridfield-Zeile.
layout-gridfield-row-gap	spacing-small	Vertikaler Abstand zwischen Label und Control in gestapelten Gridfield-Zeilen.
layout-gridfield-field-max-width	layout-input-field-max-width	Maximale Breite des Control-Bereichs im Gridfield.