Lots of updates, especially dialog

13 files changed, 134 insertions, 60 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 400ec64..14bfa10 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -7,7 +7,7 @@
 include layouts/container.pug
 
 include objects/heading.pug
-include objects/rule.pug
+include objects/divider.pug
 include objects/badge.pug
 include objects/button.pug
 include objects/text-field.pug
@@ -27,14 +27,16 @@ include objects/lightbox.pug
 include objects/list-group.pug
 include objects/table.pug
 include objects/alert.pug
+include objects/header.pug
+include objects/sidebar.pug
 
 mixin view(id, title)
     -
         views.push({ id, title });
 
-    +container(padX=true padY=true narrow=true)(class='c-view' id=id)
+    +container(padX=true padY=true narrow=true class='c-view' id=id)
         +h1-heading('xl')= title
-        +rule('medium')
+        +divider('medium')
         block
 
 mixin user-card(name, hue)
@@ -47,7 +49,7 @@ mixin user-card(name, hue)
         = name
 
 include views/heading.pug
-include views/rule.pug
+include views/divider.pug
 include views/colored-links.pug
 include views/badge.pug
 include views/button.pug
@@ -80,9 +82,9 @@ html
         script(src="script.js")
 
     body
-        .c-content
+        .c-content.l-overflow
             +view-heading
-            +view-rule
+            +view-divider
             +view-colored-links
             +view-badge
             +view-button
@@ -104,7 +106,7 @@ html
             +view-table
             +view-alert 
 
-        .c-sidebar
+        +sidebar(class='c-sidebar')
             +menu
                 each view in views
                     +menu-item(tag='a' href='#' + view.id)= view.title
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index 0467bd7..f99d789 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -4,7 +4,7 @@ mixin action-button
     -
         let classes = {
             'o-action-button':        true,
-            'o-action-button--block': attributes.block,
+            'u-d-block':              attributes.block,
             'o-action-button--quiet': attributes.quiet,
             'o-action-button--round': attributes.round,
             'is-selected':            attributes.selected
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 2823e41..2474cc3 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -1,7 +1,6 @@
-include rule.pug
-include button.pug
 include heading.pug
-include action-button.pug
+include header.pug
+include sidebar.pug
 
 mixin dialog(title)
     - const slots = {}
@@ -13,9 +12,7 @@ mixin dialog(title)
         block ? block() : undefined 
 
         let classes = {
-            'o-dialog':        true,
-            't-raised':        true,
-            'o-dialog--split': !!slots.sidebar,
+            'o-dialog': true,
         }
 
         let bodyClass = {
@@ -26,16 +23,26 @@ mixin dialog(title)
         }
 
     div(class=classes)
+        if slots['sidebar-header']
+            +header(class='o-dialog__sidebar-header')
+                - slots['sidebar-header']()
+
         if slots.sidebar
-            .o-dialog__sidebar
+            +sidebar(class='o-dialog__sidebar')
                 - slots.sidebar()
-        header.o-dialog__header
-            +div-heading('md')(class='o-dialog__title')
-                = title
-        +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
+
+        +header(class='o-dialog__header')
+            if slots.header
+                - slots.header()
+            else
+                if title
+                    +div-heading('sm')(class='o-dialog__label')= title
+            +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
+
         section(class=bodyClass)
             if slots.body
                 - slots.body()
+
         footer.o-dialog__footer.l-button-group
             +a-button(outline=true)= 'Cancel'
             = ' '
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug
new file mode 100644
index 0000000..094df07
--- /dev/null
+++ b/tpl/objects/divider.pug
@@ -0,0 +1,12 @@
+mixin divider(level)
+    -
+        let classes = {
+            'o-divider':             true,
+            'o-divider--labelled':   !!block,
+            ['o-divider--' + level]: true
+        }
+
+    div(class=classes)&attributes(attributes)
+        if block
+            .o-divider__label
+                block
diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug
new file mode 100644
index 0000000..4518afc
--- /dev/null
+++ b/tpl/objects/header.pug
@@ -0,0 +1,12 @@
+mixin header
+    -
+        let classes = {
+            'o-header': true
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    header(class=classes)
+        .o-header__content.t-lowered
+            block
diff --git a/tpl/objects/list-group.pug b/tpl/objects/list-group.pug
index 36be264..ad3c212 100644
--- a/tpl/objects/list-group.pug
+++ b/tpl/objects/list-group.pug
@@ -5,8 +5,8 @@ mixin list-group
 mixin list-group-item
     -
         let classes = {
-            'o-list-group__item':         true,
-            'o-list-group__item--action': attributes.action,
+            'o-list-group__item':              true,
+            'o-list-group__item--interactive': attributes.interactive,
         }
 
     div(class=classes)
diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug
deleted file mode 100644
index b2f3a38..0000000
--- a/tpl/objects/rule.pug
+++ /dev/null
@@ -1,12 +0,0 @@
-mixin rule(level)
-    -
-        let classes = {
-            'o-rule':             true,
-            'o-rule--labelled':   !!block,
-            ['o-rule--' + level]: true
-        }
-
-    div(class=classes)&attributes(attributes)
-        if block
-            .o-rule__label
-                block
diff --git a/tpl/objects/sidebar.pug b/tpl/objects/sidebar.pug
new file mode 100644
index 0000000..caa0f1f
--- /dev/null
+++ b/tpl/objects/sidebar.pug
@@ -0,0 +1,12 @@
+mixin sidebar
+    -
+        let classes = {
+            'o-sidebar': true
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    aside(class=classes)
+        .o-sidebar__content.l-overflow
+            block
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index cbdb8c4..673aa27 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -10,23 +10,33 @@ mixin text-field
         block ? block() : undefined 
 
         let classes = {
-            'o-text-field':      true,
-            'o-text-field--ext': attributes.ext,
-            'is-invalid':        attributes.invalid,
-            'is-disabled':       attributes.disabled,
-            'l-card':            !!block,
-            'l-card--flush':     !!block,
-            'l-card--gapless':   !!block
+            'o-text-field':           true,
+            'o-text-field--extended': !!block,
+            'is-invalid':             attributes.invalid,
+            'is-disabled':            attributes.disabled,
+            'l-card':                 !!block,
+            'l-card--flush':          !!block,
+            'l-card--gapless':        !!block
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+        const attr = {
+            placeholder: attributes.placeholder,
+            disabled:    attributes.disabled
         }
 
     div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
         if !!block
             if slots.pre
-                - slots.pre()
-            input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes)
+                .u-d-contents.t-raised
+                    - slots.pre()
+            input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr)
             if slots.post
-                - slots.post()
+                .u-d-contents.t-raised
+                    - slots.post()
             .o-text-field__bg
         else
-            input.o-text-field__native&attributes(attributes)
+            input.o-text-field__native&attributes(attr)
             .o-text-field__bg
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 6aaead5..0b6f8e7 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -18,10 +18,40 @@ mixin view-dialog
 
         .c-box
             +backdrop
-                +dialog('Lorem ipsum')(noRule=true)
+                +dialog('Tags')
+                    +slot('sidebar-header')
+                        +div-heading('sm')(class='o-dialog__label')= '#channel'
+                    +slot('sidebar')
+                        +menu(style={ 'min-width': '10em' })
+                            +menu-item(icon='bookmark')= 'Bookmark'
+                            +menu-item(icon='tags', selected=true)= 'Tags'
+                            +menu-item(icon='hash')= 'achannel'
+                    +slot('body')
+                        p.u-mt-0= loremIpsum
+
+        .c-box
+            +backdrop
+                +dialog('#channel')
+                    +slot('sidebar')
+                        +menu(style={ 'min-width': '10em' })
+                            +menu-item(icon='bookmark')= 'Bookmark'
+                            +menu-item(icon='tags', selected=true)= 'Tags'
+                            +menu-item(icon='hash')= 'achannel'
+                    +slot('body')
+                        p.u-mt-0= loremIpsum
+
+        .c-box
+            +backdrop
+                +dialog
+                    +slot('header')
+                        .l-card.l-card--flush
+                            .l-card__block.l-flex
+                                +action-button(quiet=true icon='chevron-left')
+                                +action-button(quiet=true icon='chevron-right')
+                            .l-card__block.l-card__block--main
+                                +div-heading('sm')= 'Tags'
                     +slot('sidebar')
                         +menu(style={ 'min-width': '10em' })
-                            +menu-header= '#channel'
                             +menu-item(icon='bookmark')= 'Bookmark'
                             +menu-item(icon='tags', selected=true)= 'Tags'
                             +menu-item(icon='hash')= 'achannel'
diff --git a/tpl/views/rule.pug b/tpl/views/divider.pug
index 495c804..8c3ec0c 100644
--- a/tpl/views/rule.pug
+++ b/tpl/views/divider.pug
@@ -1,21 +1,21 @@
-mixin view-rule 
-    +view('rule', 'Rule')
+mixin view-divider 
+    +view('divider', 'Divider')
         .c-box
             +div-heading('lg')= 'Heading'
-            +rule('strong')
+            +divider('strong')
             p= loremIpsum
 
         .c-box
             +div-heading('sm')= 'Heading'
-            +rule('medium')
+            +divider('medium')
             p= loremIpsum
 
         .c-box
             +div-heading('xs')= 'Heading'
-            +rule('faint')
+            +divider('faint')
             p= loremIpsum
 
         .c-box
-            +rule('strong')= 'Strong'
-            +rule('medium')= 'Medium'
-            +rule('faint')= 'Faint'
+            +divider('strong')= 'Strong'
+            +divider('medium')= 'Medium'
+            +divider('faint')= 'Faint'
diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug
index 970f0fb..9acef31 100644
--- a/tpl/views/list-group.pug
+++ b/tpl/views/list-group.pug
@@ -9,7 +9,7 @@ mixin view-list-group
 
         .c-box
             +list-group
-                +list-group-item(action=true)= 'First item'
-                +list-group-item(action=true)= 'Second item'
-                +list-group-item(action=true)= 'Third item'
-                +list-group-item(action=true)= 'Fourth item'
+                +list-group-item(interactive=true)= 'First item'
+                +list-group-item(interactive=true)= 'Second item'
+                +list-group-item(interactive=true)= 'Third item'
+                +list-group-item(interactive=true)= 'Fourth item'
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 0ba84be..262195d 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -14,9 +14,10 @@ mixin view-text-field
                 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
             br
             div
-                +text-field(placeholder='Just landed in L.A.')
+                +text-field(placeholder='Just landed in L.A.' class="u-p-50")
                     +slot('pre')
-                        +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
+                        +action-button(quiet=true class='l-card__block')= 'Volpeon'
+                        +divider('vertical')(class='u-ml-50')
                     +slot('post')
                         +action-button(quiet=true icon='smile' class='l-card__block')
                         +action-button(quiet=true icon='send' class='l-card__block')