1 files changed, 63 insertions, 43 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 510e09b..0b74ed8 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -17,6 +17,8 @@ include objects/status-indicator.pug
 include objects/avatar.pug
 include objects/action-menu.pug
 include objects/menu.pug
+include objects/backdrop.pug
+include objects/dialog.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
@@ -44,46 +46,46 @@ html
     body
         +container(padX=true padY=true narrow=true)
 
-            +h1-heading(level='xl')= 'Heading'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Heading'
+            +rule('medium')
 
             +box
-                +div-heading(level='xxl')= 'XXL Heading'
-                +div-heading(level='xl')= 'XL Heading'
-                +div-heading(level='lg')= 'LG Heading'
-                +div-heading(level='md')= 'MD Heading'
-                +div-heading(level='sm')= 'SM Heading'
-                +div-heading(level='xs')= 'XS Heading'
+                +div-heading('xxl')= 'XXL Heading'
+                +div-heading('xl')= 'XL Heading'
+                +div-heading('lg')= 'LG Heading'
+                +div-heading('md')= 'MD Heading'
+                +div-heading('sm')= 'SM Heading'
+                +div-heading('xs')= 'XS Heading'
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Rule'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Rule'
+            +rule('medium')
 
             +box
-                +div-heading(level='lg')= 'Heading'
-                +rule(level='strong')
+                +div-heading('lg')= 'Heading'
+                +rule('strong')
                 p= loremIpsum
 
             +box
-                +div-heading(level='sm')= 'Heading'
-                +rule(level='medium')
+                +div-heading('sm')= 'Heading'
+                +rule('medium')
                 p= loremIpsum
 
             +box
-                +div-heading(level='xs')= 'Heading'
-                +rule(level='faint')
+                +div-heading('xs')= 'Heading'
+                +rule('faint')
                 p= loremIpsum
 
             +box
-                +rule(level='strong')= 'Strong'
-                +rule(level='medium')= 'Medium'
-                +rule(level='faint')= 'Faint'
+                +rule('strong')= 'Strong'
+                +rule('medium')= 'Medium'
+                +rule('faint')= 'Faint'
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Button'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Button'
+            +rule('medium')
 
             +box
                 +a-button(variant='accent')= 'Button'
@@ -114,8 +116,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Text field'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Text field'
+            +rule('medium')
 
             +box
                 +text-field(placeholder='Placeholder')
@@ -143,8 +145,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Field label'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Field label'
+            +rule('medium')
 
             +box
                 +field-label('First name')
@@ -220,8 +222,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Radio'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Radio'
+            +rule('medium')
 
             +box
                 +radio(name="radio-demo-1")= 'Cats'
@@ -242,8 +244,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Checkbox'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Checkbox'
+            +rule('medium')
 
             +box
                 +checkbox(indeterminate=true)= 'Cats'
@@ -264,8 +266,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Switch'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Switch'
+            +rule('medium')
 
             +box
                 +switch= 'Cats'
@@ -286,8 +288,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Form'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Form'
+            +rule('medium')
 
             +box
                 +form(labelsAlign="left")
@@ -319,8 +321,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Action button'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Action button'
+            +rule('medium')
 
             +box
                 +action-button= 'Idle'
@@ -378,8 +380,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Status indicator'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Status indicator'
+            +rule('medium')
 
             +box
                 +status-indicator
@@ -392,8 +394,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Avatar'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Avatar'
+            +rule('medium')
 
             +box
                 div(style={ display: 'flex', gap: '.3em' })
@@ -449,8 +451,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Action menu'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Action menu'
+            +rule('medium')
 
             +box
                 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
@@ -472,8 +474,8 @@ html
 
             //-----------------------------------------
 
-            +h1-heading(level='xl')= 'Menu'
-            +rule(level='medium')
+            +h1-heading('xl')= 'Menu'
+            +rule('medium')
 
             +box
                 div(style={ display: 'flex', gap: '3rem' })
@@ -516,4 +518,22 @@ html
                         +menu-item
                             +user-card('johndoe', 270)
 
+            //-----------------------------------------
+
+            +h1-heading('xl')= 'Backdrop'
+            +rule('medium')
+
+            +box
+                +backdrop
+
+            //-----------------------------------------
+
+            +h1-heading('xl')= 'Dialog'
+            +rule('medium')
+
+            +box
+                +backdrop
+                    +dialog('Lorem ipsum')
+                        = loremIpsum
+