Fixed some small bugs

flightscore/src/pages/dev-page.ts

@@ -13,6 +13,9 @@ import '../components/form-input';
 import '../components/horizontal-divider';
 import '../components/notify-bar';
 import '../components/ui-link';
+import '../components/circle-chart';
+import '../components/loading-bar';
+import '../components/line-chart';
 
 @customElement('dev-page')
 export class DevPage extends LitElement {
@@ -571,6 +574,102 @@ export class DevPage extends LitElement {
             </div>
           </div>
         </div>
+
+        <div class="section">
+          <div class="section-head">
+            <h2>Loading Bars</h2>
+            <p>Progress indicators with variants and states</p>
+          </div>
+          <div class="component-group">
+            <div class="component-label">Variants</div>
+            <div class="component-preview col">
+              <loading-bar label="Accent" value="72"></loading-bar>
+              <loading-bar label="Success" value="100" variant="success"></loading-bar>
+              <loading-bar label="Warning" value="45" variant="warning"></loading-bar>
+              <loading-bar label="Error" value="18" variant="error"></loading-bar>
+            </div>
+            <div class="component-label">Sizes</div>
+            <div class="component-preview col">
+              <loading-bar label="Small" value="60" size="sm"></loading-bar>
+              <loading-bar label="Medium" value="60" size="md"></loading-bar>
+              <loading-bar label="Large" value="60" size="lg"></loading-bar>
+            </div>
+            <div class="component-label">Indeterminate</div>
+            <div class="component-preview col">
+              <loading-bar label="Loading…" indeterminate hideValue></loading-bar>
+            </div>
+          </div>
+        </div>
+
+
+        <div class="section">
+          <div class="section-head">
+            <h2>Line Chart</h2>
+            <p>Trend lines with optional area fill</p>
+          </div>
+          <div class="component-group">
+            <div class="component-label">Multi-Series</div>
+            <div class="component-preview col">
+              <line-chart
+                heading="Score Progression"
+                subtitle="Last 6 Rounds"
+                xLabel="Round"
+                yLabel="Score"
+                showArea
+                .series=${[
+                  {
+                    label: 'Pilot A',
+                    color: 'var(--color-accent)',
+                    points: [
+                      { x: 0, y: 420 },
+                      { x: 1, y: 420 },
+                      { x: 2, y: 580 },
+                      { x: 3, y: 540 },
+                      { x: 4, y: 710 },
+                      { x: 5, y: 690 },
+                      { x: 6, y: 820 },
+                    ],
+                  },
+                  {
+                    label: 'Pilot B',
+                    color: '#30a46c',
+                    points: [
+                      { x: 1, y: 380 },
+                      { x: 2, y: 450 },
+                      { x: 3, y: 620 },
+                      { x: 4, y: 590 },
+                      { x: 5, y: 750 },
+                      { x: 6, y: 780 },
+                    ],
+                  },
+                ]}
+              ></line-chart>
+            </div>
+          </div>
+        </div>
+
+      
+        <div class="section">
+          <div class="section-head">
+            <h2>Circle Chart</h2>
+            <p>Donut chart for proportional data</p>
+          </div>
+          <div class="component-group">
+            <div class="component-label">Example</div>
+            <div class="component-preview col">
+              <circle-chart
+                heading="Pilots by Category"
+                centerText="Pilots"
+                .segments=${[
+                  { label: 'Sport', value: 124 },
+                  { label: 'Serial', value: 89 },
+                  { label: 'Open', value: 47 },
+                  { label: 'Tandem', value: 18 },
+                ]}
+              ></circle-chart>
+            </div>
+          </div>
+        </div>
       </div>
     `;
   }