3 files changed, 30 insertions, 26 deletions

diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
deleted file mode 100644
index 4fcb1a4..0000000
--- a/tpl/objects/bubble-group.pug
+++ /dev/null
@@ -1,17 +0,0 @@
-mixin bubble-group(user)
-    -
-        let classes = {
-            'l-bubble-group':          true,
-            'l-bubble-group--compact': attributes.compact,
-            'l-bubble-group--left':    attributes.left,
-            'l-bubble-group--right':   attributes.right,
-            'l-bubble-group--arrow':   attributes.arrow
-        }
-        if (attributes.class) {
-            classes[attributes.class] = true
-        }
-
-    section(class=classes)
-        .l-bubble-group__avatar.u-p-sticky-top
-            +avatar= user.slice(0, 2)
-        block
diff --git a/tpl/objects/message-group.pug b/tpl/objects/message-group.pug
new file mode 100644
index 0000000..e5e055c
--- /dev/null
+++ b/tpl/objects/message-group.pug
@@ -0,0 +1,19 @@
+mixin message-group(user)
+    -
+        let classes = {
+            'l-message-group':          true,
+            'l-message-group--compact': attributes.compact,
+            'l-message-group--left':    attributes.left,
+            'l-message-group--right':   attributes.right,
+            'l-message-group--arrow':   attributes.arrow,
+            'l-message-group--group':   attributes.group,
+            'l-message-group--merge':   attributes.merge
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true
+        }
+
+    section(class=classes)
+        .l-message-group__avatar.u-p-sticky-top
+            +avatar= user.slice(0, 2)
+        block
diff --git a/tpl/objects/bubble.pug b/tpl/objects/message.pug
index 6a3ea8b..d644347 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/message.pug
@@ -1,4 +1,4 @@
-mixin bubble(user)
+mixin message(user)
     - const slots = {}
 
     mixin slot(key)
@@ -8,10 +8,11 @@ mixin bubble(user)
         block ? block() : undefined
 
         let classes = {
-            'o-bubble':            true,
-            'o-bubble--75':        attributes.compact,
-            'o-bubble--highlight': attributes.highlight,
-            't-up':            !attributes.theme
+            'o-message':                true,
+            'o-message--bubble':        attributes.bubble || !!attributes.theme,
+            'o-message--75':            attributes.compact,
+            'o-message--highlight':     attributes.highlight,
+            'l-message-group__message': attributes.group
         }
         if (attributes.class) {
             classes[attributes.class] = true
@@ -21,8 +22,9 @@ mixin bubble(user)
         }
 
         let headerClasses = {
-            'o-bubble__header': true,
-            'u-mb-50':          !attributes.compact,
+            'o-message__header':           true,
+            'l-message-group__merge-hide': true,
+            'u-mb-50':                    !attributes.compact,
         }
 
     mixin content 
@@ -35,10 +37,10 @@ mixin bubble(user)
         span.s-links.s-links--colored
             - slots.body()
         if slots.time
-            small.o-bubble__suffix
+            small.o-message__suffix
                 - slots.time()
         if slots.footer
-            footer.o-bubble__footer
+            footer.o-message__footer
                 - slots.footer()
 
     article(class=classes)