Lots of updates, especially dialog

8 files changed, 78 insertions, 37 deletions

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