From a5e286fbc6d0a34ae255ee94615d111370195b7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Fri, 5 Jun 2026 08:06:07 +0200
Subject: [PATCH] feat: add empty score bar example

---
 components/charts.html          |  7 +++++++
 styles/41-components-charts.css | 19 +++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/components/charts.html b/components/charts.html
index 881e73f..5b8511d 100644
--- a/components/charts.html
+++ b/components/charts.html
@@ -38,6 +38,13 @@
             <div class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" data-component-part="score-median-marker" data-component-variant="outline"></div>
           </div>
         </div>
+
+        <div class="sg-score-bar-item" data-component="score-bar">
+          <p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Kirschen</p>
+          <div class="sg-score-bar sg-score-bar--marker-mid sg-score-bar--no-value" role="img" aria-label="Keine Daten" data-component-part="score-track">
+            <span class="sg-score-bar__empty-state" data-component-part="score-empty-state">keine Daten</span>
+          </div>
+        </div>
       </div>
     </div>
   </section>
diff --git a/styles/41-components-charts.css b/styles/41-components-charts.css
index 62dafa7..5e2d8e1 100644
--- a/styles/41-components-charts.css
+++ b/styles/41-components-charts.css
@@ -56,6 +56,10 @@
   --score-marker-position: 50%;
 }
 
+.sg-score-bar--no-value {
+  display: block;
+}
+
 .sg-score-bar__value {
   height: 100%;
   border-radius: var(--radius-graph-bar);
@@ -85,6 +89,21 @@
   background: transparent;
 }
 
+.sg-score-bar__empty-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-inline-start: var(--spacing-small);
+  color: var(--text-chart-default);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+  pointer-events: none;
+}
+
 .sg-chart-preview-area {
   min-width: var(--layout-object-card-min-width);
   max-width: var(--layout-object-card-max-width);