From 9f99482a93c65d4087087f6e0a2cff1a94468f91 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:22:40 +0200
Subject: [PATCH] Add gridfield component

---
 components/gridfield.html          | 42 ++++++++++++++++++++++++
 index.html                         |  1 +
 semantic-tokens-components.html    |  9 +++++-
 styleguide.css                     |  1 +
 styles/01-foundations.css          |  6 ++--
 styles/11-components-gridfield.css | 52 ++++++++++++++++++++++++++++++
 6 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 components/gridfield.html
 create mode 100644 styles/11-components-gridfield.css
diff --git a/components/gridfield.html b/components/gridfield.html
new file mode 100644
index 0000000..b951e44
--- /dev/null
+++ b/components/gridfield.html
@@ -0,0 +1,42 @@
+<!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 3643483..0cc891b 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,7 @@
 
       <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 7eba895..fdc8df5 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -122,6 +122,14 @@
       <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>
@@ -136,7 +144,6 @@
       <tr><td>layout-pulldown-panel-form-mobile-width</td><td>90%</td><td>Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.</td></tr>
       <tr><td>layer-pulldown-panel</td><td>dimension-layer-pulldown-panel</td><td>Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten.</td></tr>
       <tr><td>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>Semantische Obergrenze für die Panelbreite geöffneter Pulldowns; das Panel darf über Triggerbreite wachsen, bleibt aber durch diese Breite und die Viewport-Kappe begrenzt.</td></tr>
-      <tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
       <tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
       <tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
       <tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.</td></tr>
diff --git a/styleguide.css b/styleguide.css
index 66b3a38..59d91fc 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -2,6 +2,7 @@
 @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 aff2570..05089f9 100644
--- a/styles/01-foundations.css
+++ b/styles/01-foundations.css
@@ -77,11 +77,14 @@
   --layout-pulldown-panel-form-mobile-width: 90%;
   --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);
+  --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);
@@ -277,7 +280,6 @@
   --dimension-search-field-width: 15.3rem;
   --dimension-layer-pulldown-panel: 40;
   --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%;
diff --git a/styles/11-components-gridfield.css b/styles/11-components-gridfield.css
new file mode 100644
index 0000000..1486693
--- /dev/null
+++ b/styles/11-components-gridfield.css
@@ -0,0 +1,52 @@
+/* ========================================================= */
+/* 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.
Semantischer Token	Verwendeter Foundation-Token	Beschreibung Verwendungszweck in der Komponente
layout-pulldown-panel-form-mobile-width	90%	Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.
layer-pulldown-panel	dimension-layer-pulldown-panel	Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten.
layout-multiselect-pulldown-panel-desktop-width	dimension-multiselect-pulldown-panel-desktop-width	Semantische Obergrenze für die Panelbreite geöffneter Pulldowns; das Panel darf über Triggerbreite wachsen, bleibt aber durch diese Breite und die Viewport-Kappe begrenzt.
layout-multiselect-pulldown-panel-mobile-width	dimension-multiselect-pulldown-panel-mobile-width	Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.
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 Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.