Removed more generated assets

flightscore/src/components/icons.ts

@@ -13,6 +13,7 @@ export class Icons {
     mail: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /></svg>`,
     desktop: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25" /></svg>`,
     tools: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437 1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008Z" /></svg>`,
+    map: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498 4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 0 0-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0Z" /></svg>`,
     map_pin: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /></svg>`,
     clock: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`,
     table: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5" /></svg>`,
@@ -23,5 +24,12 @@ export class Icons {
     document_text: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" /></svg>`,
     bin: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>`,
     stack: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3" /></svg>`,
+    visible: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>`,
+    hide: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" /></svg>`,
+    folder: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776" /></svg>`,
+    warning: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>`,
+    info: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>`,
+    error: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`,
+    success: html`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>`,
   };
 }

flightscore/src/components/notify-bar.ts

@@ -1,9 +1,10 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css } from "lit";
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property } from "lit/decorators.js";
+import { Icons } from "./icons";
 
-export type NotificationType = 'success' | 'warning' | 'error';
+export type NotificationType = "success" | "warning" | "error" | "info";
 
-@customElement('notify-bar')
+@customElement("notify-bar")
 export class NotifyBar extends LitElement {
   static styles = css`
     :host {
@@ -87,57 +88,56 @@ export class NotifyBar extends LitElement {
       background: color-mix(in srgb, #30a46c 8%, transparent);
       border-color: color-mix(in srgb, #30a46c 25%, transparent);
     }
+
+    .bar.info {
+      color: var(--color-accent);
+      background: color-mix(in srgb, var(--color-accent) 8%, transparent);
+      border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
+    }
   `;
 
-  @property() type: NotificationType = 'error';
+  @property() type: NotificationType = "error";
   @property() message: string | null = null;
   @property({ type: Boolean }) dismissible = true;
 
   private dismiss() {
     this.message = null;
     this.dispatchEvent(
-      new CustomEvent('dismissed', { bubbles: true, composed: true })
+      new CustomEvent("dismissed", { bubbles: true, composed: true }),
     );
     this.requestUpdate();
   }
 
   private renderIcon() {
-    if (this.type === 'error') {
+    if (this.type === "error") {
-      return html`
+      return Icons.icons.error;
-        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="12" cy="12" r="10" />
-          <line x1="15" y1="9" x2="9" y2="15" />
-          <line x1="9" y1="9" x2="15" y2="15" />
-        </svg>
-      `;
     }
-    if (this.type === 'warning') {
+    if (this.type === "warning") {
-      return html`
+      return Icons.icons.warning;
-        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
-          <line x1="12" y1="9" x2="12" y2="13" />
-          <line x1="12" y1="17" x2="12.01" y2="17" />
-        </svg>
-      `;
     }
-    return html`
+    if (this.type === "info") {
-      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      return Icons.icons.info;
-        <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+    }
-        <polyline points="22 4 12 14.01 9 11.01" />
+    return Icons.icons.success;
-      </svg>
-    `;
   }
 
   render() {
     if (!this.message) return null;
     return html`
       <div class="bar ${this.type}">
-        ${this.renderIcon()}
+        <span class="icon">${this.renderIcon()}</span>
         <span class="content">${this.message}</span>
         ${this.dismissible
           ? html`
               <button class="close" @click=${this.dismiss} aria-label="Close">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
                   <line x1="18" y1="6" x2="6" y2="18" />
                   <line x1="6" y1="6" x2="18" y2="18" />
                 </svg>

flightscore/src/pages/dev-page.ts

@@ -1,23 +1,24 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css } from "lit";
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, state } from "lit/decorators.js";
-import '../components/ui-button';
+import "../components/ui-button";
-import '../components/ui-button-secondary';
+import "../components/ui-button-secondary";
-import '../components/ui-badge';
+import "../components/ui-badge";
-import '../components/ui-card';
+import "../components/ui-card";
-import '../components/card-backdrop';
+import "../components/card-backdrop";
-import '../components/card-header';
+import "../components/card-header";
-import '../components/auth-card';
+import "../components/auth-card";
-import '../components/stat-card';
+import "../components/stat-card";
-import '../components/icon-card';
+import "../components/icon-card";
-import '../components/form-input';
+import "../components/form-input";
-import '../components/horizontal-divider';
+import "../components/horizontal-divider";
-import '../components/notify-bar';
+import "../components/notify-bar";
-import '../components/ui-link';
+import "../components/ui-link";
-import '../components/circle-chart';
+import "../components/circle-chart";
-import '../components/loading-bar';
+import "../components/loading-bar";
-import '../components/line-chart';
+import "../components/line-chart";
+import { Icons } from "../components/icons";
 
-@customElement('dev-page')
+@customElement("dev-page")
 export class DevPage extends LitElement {
   static styles = css`
     :host {
@@ -171,7 +172,7 @@ export class DevPage extends LitElement {
     }
   `;
 
-  @state() inputValue = '';
+  @state() inputValue = "";
   @state() notifyVisible = true;
 
   render() {
@@ -179,9 +180,7 @@ export class DevPage extends LitElement {
       <div class="container">
         <div class="page-header">
           <h1>Component Library</h1>
-          <p>
+          <p>All available UI components with variants and states</p>
-            All available UI components with variants and states
-          </p>
         </div>
 
         <div class="section">
@@ -232,9 +231,7 @@ export class DevPage extends LitElement {
                 </svg>
                 With Icon
               </ui-button-secondary>
-              <ui-button-secondary disabled>
+              <ui-button-secondary disabled> Disabled </ui-button-secondary>
-                Disabled
-              </ui-button-secondary>
             </div>
             <div class="component-label">Secondary Full Width</div>
             <div class="component-preview col">
@@ -262,50 +259,15 @@ export class DevPage extends LitElement {
             <div class="component-label">With Icon</div>
             <div class="component-preview">
               <ui-badge variant="accent">
-                <svg
+                <span slot="icon">${Icons.icons.stack}</span>
-                  slot="icon"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M12 2L2 7l10 5 10-5-10-5z" />
-                  <path d="M2 17l10 5 10-5" />
-                  <path d="M2 12l10 5 10-5" />
-                </svg>
                 Platform
               </ui-badge>
               <ui-badge variant="success">
-                <svg
+                <span slot="icon">${Icons.icons.success}</span>
-                  slot="icon"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <path d="M8 12l2.5 2.5L16 9" />
-                </svg>
                 Live
               </ui-badge>
               <ui-badge variant="error">
-                <svg
+                <span slot="icon">${Icons.icons.error}</span>
-                  slot="icon"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <line x1="15" y1="9" x2="9" y2="15" />
-                  <line x1="9" y1="9" x2="15" y2="15" />
-                </svg>
                 Offline
               </ui-badge>
             </div>
@@ -320,6 +282,10 @@ export class DevPage extends LitElement {
           <div class="component-group">
             <div class="component-label">Types</div>
             <div class="component-preview col">
+              <notify-bar
+                type="info"
+                message="Competition is currently active."
+              ></notify-bar>
               <notify-bar
                 type="success"
                 message="Competition successfully created."
@@ -389,7 +355,9 @@ export class DevPage extends LitElement {
             </div>
             <div class="component-label">Live Value</div>
             <div class="component-preview">
-              <span style="font-size:0.85rem;color:color-mix(in srgb,var(--color-text) 60%,transparent)">
+              <span
+                style="font-size:0.85rem;color:color-mix(in srgb,var(--color-text) 60%,transparent)"
+              >
                 Current value: "${this.inputValue}"
               </span>
             </div>
@@ -404,22 +372,10 @@ export class DevPage extends LitElement {
           <div class="component-group">
             <div class="component-label">Grid</div>
             <div class="component-preview grid-4">
-              <stat-card
+              <stat-card value="42" label="Competitions"></stat-card>
-                value="42"
+              <stat-card value="318" label="Pilots"></stat-card>
-                label="Competitions"
+              <stat-card value="1,240" label="Tasks"></stat-card>
-              ></stat-card>
+              <stat-card value="12" label="Countries"></stat-card>
-              <stat-card
-                value="318"
-                label="Pilots"
-              ></stat-card>
-              <stat-card
-                value="1,240"
-                label="Tasks"
-              ></stat-card>
-              <stat-card
-                value="12"
-                label="Countries"
-              ></stat-card>
             </div>
           </div>
         </div>
@@ -436,35 +392,13 @@ export class DevPage extends LitElement {
                 heading="Real-Time Scoring"
                 description="Scores update live as judges submit results."
               >
-                <svg
+                ${Icons.icons.clock}
-                  slot="icon"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <polyline points="12 6 12 12 16 14" />
-                </svg>
               </icon-card>
               <icon-card
                 heading="GPS Integration"
                 description="Import GPS tracks and calculate distances automatically."
               >
-                <svg
+                ${Icons.icons.map_pin}
-                  slot="icon"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
-                  <circle cx="12" cy="10" r="3" />
-                </svg>
               </icon-card>
             </div>
           </div>
@@ -486,8 +420,8 @@ export class DevPage extends LitElement {
                 <p
                   style="margin:0;font-size:0.9rem;color:color-mix(in srgb,var(--color-text) 60%,transparent)"
                 >
-                  This is the default card layout with a header
+                  This is the default card layout with a header component
-                  component inside.
+                  inside.
                 </p>
                 <horizontal-divider></horizontal-divider>
                 <ui-button full>Action</ui-button>
@@ -584,9 +518,21 @@ export class DevPage extends LitElement {
             <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
-              <loading-bar label="Warning" value="45" variant="warning"></loading-bar>
+                label="Success"
-              <loading-bar label="Error" value="18" variant="error"></loading-bar>
+                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">
@@ -596,12 +542,15 @@ export class DevPage extends LitElement {
             </div>
             <div class="component-label">Indeterminate</div>
             <div class="component-preview col">
-              <loading-bar label="Loading…" indeterminate hideValue></loading-bar>
+              <loading-bar
+                label="Loading…"
+                indeterminate
+                hideValue
+              ></loading-bar>
             </div>
           </div>
         </div>
 
-
         <div class="section">
           <div class="section-head">
             <h2>Line Chart</h2>
@@ -618,8 +567,8 @@ export class DevPage extends LitElement {
                 showArea
                 .series=${[
                   {
-                    label: 'Pilot A',
+                    label: "Pilot A",
-                    color: 'var(--color-accent)',
+                    color: "var(--color-accent)",
                     points: [
                       { x: 0, y: 20 },
                       { x: 1, y: 420 },
@@ -631,8 +580,8 @@ export class DevPage extends LitElement {
                     ],
                   },
                   {
-                    label: 'Pilot B',
+                    label: "Pilot B",
-                    color: '#30a46c',
+                    color: "#30a46c",
                     points: [
                       { x: 1, y: 380 },
                       { x: 2, y: 450 },
@@ -654,7 +603,6 @@ export class DevPage extends LitElement {
           </div>
         </div>
 
-      
         <div class="section">
           <div class="section-head">
             <h2>Circle Chart</h2>
@@ -667,10 +615,10 @@ export class DevPage extends LitElement {
                 heading="Pilots by Category"
                 centerText="Pilots"
                 .segments=${[
-    { label: 'Sport', value: 124, color: 'var(--color-accent)' },
+                  { label: "Sport", value: 124, color: "var(--color-accent)" },
-    { label: 'Serial', value: 89, color: '#30a46c' },
+                  { label: "Serial", value: 89, color: "#30a46c" },
-    { label: 'Open', value: 47, color: '#e79d13' },
+                  { label: "Open", value: 47, color: "#e79d13" },
-    { label: 'Tandem', value: 18, color: '#e5484d' },
+                  { label: "Tandem", value: 18, color: "#e5484d" },
                 ]}
               ></circle-chart>
             </div>