Start modal, page, form, form fields, logical components, session service, login page

src/layout/Modal.component.ts

@@ -3,7 +3,7 @@ import {Attribute, Component, Element, Renders} from '../decorators.js'
 
 @Component('ex-modal')
 export class ModalComponent extends ExComponent {
-    protected static html = `
+    protected static styles = `
         <style>
             :root {
                 display: none;
@@ -87,7 +87,9 @@ export class ModalComponent extends ExComponent {
                 margin-right: 14px;
             }
         </style>
-        
+    `
+
+    protected static html = `
         <div class="container">
             <div class="ex-modal" tabindex="0">
                 <header>

src/layout/Page.component.ts

@@ -3,7 +3,7 @@ import {Component} from '../decorators.js'
 
 @Component('ex-page')
 export class PageComponent extends ExComponent {
-    protected static html = `
+    protected static styles = `
         <style>
             .container {
                 display: flex;
@@ -26,6 +26,9 @@ export class PageComponent extends ExComponent {
                 }
             }
         </style>
+    `
+
+    protected static html = `
         <div class="container">
             <div class="inner">
                 <slot></slot>

src/layout/Section.component.ts

@@ -3,12 +3,15 @@ import {Component} from '../decorators.js'
 
 @Component('ex-section')
 export class SectionComponent extends ExComponent {
-    protected static html = `
+    protected static styles = `
         <style>
             .container {
                 min-height: 100vh;
             }
         </style>
+    `
+
+    protected static html = `
 
         <div class="container">
             <slot></slot>