12 files changed, 132 insertions, 26 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index c4baa64..7d73c75 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -24,6 +24,7 @@ include objects/avatar.pug
 include objects/card.pug
 include objects/popover.pug
 include objects/menu.pug
+include objects/navbar.pug
 include objects/side-nav.pug
 include objects/icon-nav.pug
 include objects/emoji.pug
@@ -40,7 +41,7 @@ mixin view(id, title)
     -
         views.push({ id, title });
 
-    +container(narrow=!attributes.wide class='u-p-700 c-view' id=id)
+    +container(fixed=!attributes.wide class='u-p-700 c-view' id=id)
         +h1-heading('xl')(class='u-mt-0')= title
         +divider('medium')
         block
@@ -76,6 +77,7 @@ include views/avatar.pug
 include views/card.pug
 include views/popover.pug
 include views/menu.pug
+include views/navbar.pug
 include views/side-nav.pug
 include views/icon-nav.pug
 include views/backdrop.pug
@@ -124,6 +126,7 @@ html
             +view-side-nav
             +view-popover
             +view-menu
+            +view-navbar
             //+view-icon-nav
             +view-backdrop
             //+view-dialog
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index 56c0b86..522eb1a 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -1,10 +1,10 @@
 mixin container
     -
         let classes = {
-            'l-container':            true,
-            'l-container--narrow':    attributes.narrow,
-            'l-container--narrow-75': attributes.narrow50,
-            'u-themed':               !!attributes.theme
+            'l-container':           true,
+            'l-container--fixed':    attributes.fixed,
+            'l-container--fixed-75': attributes.fixed50,
+            'u-themed':              !!attributes.theme
         }
         if (!!attributes.theme) {
             classes['t-' + attributes.theme] = true
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index c3a9b53..e9b6fe3 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -26,4 +26,9 @@ mixin action-button
         if attributes.icon
             +icon(attributes.icon)
             = ' '
-        block
+        if block
+            span.o-action-button__label
+                block
+        if attributes.postIcon
+            = ' '
+            +icon(attributes.postIcon)
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 227700c..f577961 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -8,7 +8,10 @@ mixin backdrop
             classes[attributes.class] = true;
         }
 
-        let styles = { width: '100%', 'min-height': '5em', 'max-height': '40em' }
+        let styles = { width: '100%', 'min-height': '5em' }
+        if (attributes.maxHeight) {
+            styles['max-height'] = '40em';
+        }
         if (attributes.pad) {
             styles['padding'] = '2em';
         }
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index 2ab9bef..e0f6a15 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -26,7 +26,16 @@ mixin card-image
             classes[attributes.class] = true;
         }
 
-    img(class=classes src=attributes.src style=attributes.style)
+        let imgClasses = {
+            'o-card__image-img': true,
+            'l-card-list__card-image': attributes.list
+        }
+
+    div(class=classes)
+        img(class=imgClasses src=attributes.src style=attributes.style)
+        if block
+            .o-card__image-overlay 
+                block
 
 mixin card-body
     .o-card__body(style=attributes.style)
diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug
index 46425cd..ed4d27a 100644
--- a/tpl/objects/divider.pug
+++ b/tpl/objects/divider.pug
@@ -3,6 +3,8 @@ mixin divider(level)
         let classes = {
             'o-divider':                        true,
             'o-divider--labelled':              !!block,
+            'o-divider--vertical':              !!attributes.vertical,
+            'o-divider--dot':                   !!attributes.dot,
             ['o-divider--' + level]:            true,
             ['o-divider--' + attributes.color]: !!attributes.color
         }
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 02a3200..842d44a 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -4,14 +4,19 @@ mixin lightbox(images)
     -
         let classes = {
             'o-lightbox': true,
+            'o-lightbox--interactive': attributes.interactive,
         }
         let linksClasses = {
             's-links': true,
         }
+        let thumbnailClasses = {
+            'o-thumbnail': true,
+        }
 
         if (attributes.theme) {
             classes[`o-lightbox--${attributes.theme}`] = true;
             linksClasses[`s-links--${attributes.theme}`] = true;
+            thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true;
         }
 
     div(class=classes)
@@ -19,21 +24,23 @@ mixin lightbox(images)
             div(class=linksClasses)
                 block
             +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
+
         each img, i in images
-            img.o-lightbox__img(src=images[i] id='image-' + i)
-            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
-            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+            img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
 
-        img.o-lightbox__img.o-lightbox__img--default(src=images[0])
         if images.length > 1
             +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
             +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+
         .o-lightbox__thumbnails
             each img, i in images
-                - classes = i === 0 ? 'is-selected' : ''
-                a.o-lightbox__thumbnail(class=classes href='#image-' + i)
-                    img.o-lightbox__thumbnail-img(src=img)
-            button.o-lightbox__thumbnail
-                +icon('volume-2')(class='o-lightbox__thumbnail-icon')
-            button.o-lightbox__thumbnail
-                +icon('video')(class='o-lightbox__thumbnail-icon')
+                -
+                    let classes = { 'is-selected': i === 0 }
+                    Object.assign(classes, thumbnailClasses)
+
+                a.o-thumbnail(class=classes href='#image-' + i)
+                    img.o-thumbnail__image(src=img)
+            button(class=thumbnailClasses)
+                +icon('volume-2')(class='o-thumbnail__icon')
+            button(class=thumbnailClasses)
+                +icon('video')(class='o-thumbnail__icon')
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug
new file mode 100644
index 0000000..5c7642c
--- /dev/null
+++ b/tpl/objects/navbar.pug
@@ -0,0 +1,37 @@
+include icon.pug
+include status-indicator.pug
+include action-button.pug
+
+mixin navbar
+    -
+        let classes = {
+            'o-navbar': true,
+            'o-navbar--quiet': attributes.quiet,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    div(class=classes)&attributes(attributes)
+        block
+
+mixin navbar-item
+    -
+        let classes = {
+            'o-navbar__item': true,
+            'is-selected':    attributes.selected,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+    #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
+        .o-navbar__item-content
+            if attributes.icon
+                +icon(attributes.icon)
+                = ' '
+            span.o-navbar__item-content-text
+                block
+            if attributes.postIcon
+                = ' '
+                +icon(attributes.postIcon)
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 3163b00..61081a9 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -27,17 +27,16 @@ mixin view-card
                     .l-media
                         .l-media__block
                             +badge('positive')(quiet=true icon='repeat' href='#')
-                                +icon('repeat')
-                                strong.u-mis-50= '12'
+                                strong= '12'
                         .l-media__block
                             +badge('warning')(quiet=true icon='star' href='#')
-                                +icon('star')
-                                strong.u-mis-50= '34'
+                                strong= '34'
                         .l-media__block.u-mis-auto
                             +a-button(primary=true)= 'Reply'
 
             +card(quiet=true href='#' class='l-card-list__card')
                 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
+                    +badge= 'Drawings'
                 +card-body
                     +card-title= 'XS Heading'
                     +card-content
@@ -61,7 +60,7 @@ mixin view-card
             div(class=classes)
                 each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
                     +card(quiet=quiet href='#' class='l-card-list__card')
-                        +card-image(src=img class='l-card-list__card-image')
+                        +card-image(src=img list=true)
                         +card-body
                             .l-media
                                 .l-media__block.l-media__block--main
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index ee7b372..ea08984 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -23,7 +23,17 @@ mixin view-divider
             +divider('medium')
             +divider('faint')
 
-        each theme in ['blue', 'purple', 'red', 'green', 'yellow']
+        .c-box
+            .l-media(style="height: 1em")
+                +divider('strong')(vertical=true class="l-media__block")
+                +divider('medium')(vertical=true class="l-media__block")
+                +divider('faint')(vertical=true class="l-media__block")
+            .l-media(style="height: 1em")
+                +divider('strong')(dot=true class="l-media__block")
+                +divider('medium')(dot=true class="l-media__block")
+                +divider('faint')(dot=true class="l-media__block")
+
+        each theme in ['accent', 'negative']
             .c-box
                 +divider('strong')(color=theme)= 'Strong'
                 +divider('medium')(color=theme)= 'Medium'
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 4eb234a..7e366c0 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -1,5 +1,5 @@
 mixin view-lightbox 
-    +view('lightbox', 'Lightbox')
+    +view('lightbox', 'Lightbox')(wide=true)
         .c-box
             +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
                 = "Let's try multiple links! "
@@ -37,3 +37,15 @@ mixin view-lightbox
                     = ' '
                     a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
                         = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
+
+        +backdrop(maxHeight=true)
+            +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white' interactive=true)
+                = "Let's try multiple links! "
+                a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
+                    = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
+                = ' '
+                a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
+                    = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
+                = ' '
+                a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
+                    = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
diff --git a/tpl/views/navbar.pug b/tpl/views/navbar.pug
new file mode 100644
index 0000000..345a22b
--- /dev/null
+++ b/tpl/views/navbar.pug
@@ -0,0 +1,19 @@
+mixin view-navbar 
+    +view('navbar', 'Navbar')
+        .c-box
+            +navbar
+                +navbar-item= 'Home'
+                +navbar-item(selected=true)= 'Art'
+                +navbar-item= 'Emojis'
+
+        .c-box
+            +navbar(quiet=true)
+                +navbar-item= 'Home'
+                +navbar-item(selected=true)= 'Art'
+                +navbar-item= 'Emojis'
+
+        .c-box
+            +navbar(quiet=true)
+                +navbar-item(selected=true icon="arrow-left")= 'Home'
+                +navbar-item= 'Art'
+                +navbar-item= 'Emojis'