6 files changed, 85 insertions, 44 deletions

diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index e99e5ab..61ba0b6 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -9,11 +9,14 @@ mixin a-button
         if (attributes.variant) {
             classes['o-button--' + attributes.variant] = true
         }
+        if (attributes.size) {
+            classes['o-button--' + attributes.size] = true
+        }
 
         let href = attributes.disabled ? null : '#';
 
     a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled))
         if attributes.icon
-            +icon(attributes.icon)(block=!block)
+            +icon(attributes.icon)
             = ' '
         block
diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug
index 151e084..fb96443 100644
--- a/tpl/objects/field-label.pug
+++ b/tpl/objects/field-label.pug
@@ -1,17 +1,18 @@
 mixin field-label(label, hint=null)
     -
         let classes = {
-            'o-field-label':        true,
-            'o-field-label--left':  attributes.align === 'left',
-            'o-field-label--right': attributes.align === 'right',
-            'is-invalid':           attributes.invalid,
-            'is-disabled':          attributes.disabled,
+            'o-field-label': true,
+            'is-invalid':    attributes.invalid,
+            'is-disabled':   attributes.disabled,
+        }
+        if (attributes.align) {
+            classes['o-field-label--align-' + attributes.align] = true;
         }
         if (attributes.class) {
             classes[attributes.class] = true;
         }
 
-        let needsLabelWidth = attributes.align === 'left' || attributes.align === 'right';
+        let needsLabelWidth = !!attributes.align;
 
         let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : '';
 
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 895770d..f8e5263 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -24,7 +24,11 @@ mixin text-field
 
         const attr = {
             placeholder: attributes.placeholder,
-            disabled:    attributes.disabled
+            disabled:    attributes.disabled,
+            readonly:    attributes.readonly,
+            pattern:     attributes.pattern,
+            required:    attributes.required,
+            value:       attributes.value,
         }
 
     div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index 1e1b88f..a55baca 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -1,75 +1,75 @@
 mixin view-badge 
     +view('badge', 'Badge')
         .c-box
-            +badge(size=50 href='#')= '50'
+            +badge(size='sm' href='#')= '50'
             = ' '
             +badge= '100'
             = ' '
-            +badge(size=200 href='#')= '200'
+            +badge(size='lg' href='#')= '200'
             = ' '
-            +badge(size=300 href='#')= '300'
+            +badge(size='xl' href='#')= '300'
 
         .c-box
-            +badge(size=50 href='#' quiet=true)= '50'
+            +badge(size='sm' href='#' quiet=true)= '50'
             = ' '
             +badge(quiet=true)= '100'
             = ' '
-            +badge(size=200 href='#' quiet=true)= '200'
+            +badge(size='lg' href='#' quiet=true)= '200'
             = ' '
-            +badge(size=300 href='#' quiet=true)= '300'
+            +badge(size='xl' href='#' quiet=true)= '300'
 
         each theme in ['accent', 'positive', 'negative', 'warning']
             .c-box
-                +badge(theme)(size=50 href='#')= 'new'
+                +badge(theme)(size='sm' href='#')= 'new'
                 = ' '
                 +badge(theme)= 'new'
                 = ' '
-                +badge(theme)(size=200 href='#')= 'new'
+                +badge(theme)(size='lg' href='#')= 'new'
                 = ' '
-                +badge(theme)(size=300 href='#')= 'new'
+                +badge(theme)(size='xl' href='#')= 'new'
 
             .c-box
-                +badge(theme)(size=50 href='#' quiet=true)= 'new'
+                +badge(theme)(size='sm' href='#' quiet=true)= 'new'
                 = ' '
                 +badge(theme)(quiet=true)= 'new'
                 = ' '
-                +badge(theme)(size=200 href='#' quiet=true)= 'new'
+                +badge(theme)(size='lg' href='#' quiet=true)= 'new'
                 = ' '
-                +badge(theme)(size=300 href='#' quiet=true)= 'new'
+                +badge(theme)(size='xl' href='#' quiet=true)= 'new'
 
         .c-box
-            +badge(size=50, pill=true)= '50'
+            +badge(size='sm', pill=true)= '50'
             = ' '
             +badge(pill=true)= '100'
             = ' '
-            +badge(size=200 pill=true)= '200'
+            +badge(size='lg' pill=true)= '200'
             = ' '
-            +badge(size=300 pill=true)= '300'
+            +badge(size='xl' pill=true)= '300'
 
         .c-box
-            +badge(size=50 pill=true quiet=true)= 'new'
+            +badge(size='sm' pill=true quiet=true)= 'new'
             = ' '
             +badge(pill=true quiet=true)= 'new'
             = ' '
-            +badge(size=200 pill=true quiet=true)= 'new'
+            +badge(size='lg' pill=true quiet=true)= 'new'
             = ' '
-            +badge(size=300 pill=true quiet=true)= 'new'
+            +badge(size='xl' pill=true quiet=true)= 'new'
 
         each theme in ['accent', 'positive', 'negative', 'warning']
             .c-box
-                +badge(theme)(size=50 pill=true href='#')= 'new'
+                +badge(theme)(size='sm' pill=true href='#')= 'new'
                 = ' '
                 +badge(theme)(pill=true)= 'new'
                 = ' '
-                +badge(theme)(size=200 pill=true href='#')= 'new'
+                +badge(theme)(size='lg' pill=true href='#')= 'new'
                 = ' '
-                +badge(theme)(size=300 pill=true href='#')= 'new'
+                +badge(theme)(size='xl' pill=true href='#')= 'new'
 
             .c-box
-                +badge(theme)(size=50 pill=true href='#' quiet=true)= 'new'
+                +badge(theme)(size='sm' pill=true href='#' quiet=true)= 'new'
                 = ' '
                 +badge(theme)(pill=true quiet=true)= 'new'
                 = ' '
-                +badge(theme)(size=200 pill=true href='#' quiet=true)= 'new'
+                +badge(theme)(size='lg' pill=true href='#' quiet=true)= 'new'
                 = ' '
-                +badge(theme)(size=300 pill=true href='#' quiet=true)= 'new'
+                +badge(theme)(size='xl' pill=true href='#' quiet=true)= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 7c96419..4b2281e 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -1,6 +1,39 @@
 mixin view-button 
     +view('button', 'Button')
         .c-box
+            +a-button(size='sm')= 'Button'
+            = ' '
+            +a-button= 'Button'
+            = ' '
+            +a-button(size='lg')= 'Button'
+            = ' '
+            +a-button(size='xl')= 'Button'
+            br
+            +a-button(size='sm' disabled=true)= 'Button'
+            = ' '
+            +a-button(disabled=true)= 'Button'
+            = ' '
+            +a-button(size='lg' disabled=true)= 'Button'
+            = ' '
+            +a-button(size='xl' disabled=true)= 'Button'
+            br
+            +a-button(size='sm' outline=true)= 'Button'
+            = ' '
+            +a-button(outline=true)= 'Button'
+            = ' '
+            +a-button(size='lg' outline=true)= 'Button'
+            = ' '
+            +a-button(size='xl' outline=true)= 'Button'
+            br
+            +a-button(size='sm' outline=true disabled=true)= 'Button'
+            = ' '
+            +a-button(outline=true disabled=true)= 'Button'
+            = ' '
+            +a-button(size='lg' outline=true disabled=true)= 'Button'
+            = ' '
+            +a-button(size='xl' outline=true disabled=true)= 'Button'
+
+        .c-box
             .l-button-group
                 +a-button= 'Button'
                 +a-button(disabled=true)= 'Button'
diff --git a/tpl/views/field-label.pug b/tpl/views/field-label.pug
index 37ffb1a..448370a 100644
--- a/tpl/views/field-label.pug
+++ b/tpl/views/field-label.pug
@@ -20,39 +20,39 @@ mixin view-field-label
                 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
 
         .c-box
-            +field-label('First name')(align='left' labelWidth='100px')
+            +field-label('First name')(align='start' labelWidth='100px')
                 +text-field(placeholder='Placeholder')
             br
-            +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
+            +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px')
                 +text-field(placeholder='Placeholder' type='password')
             br
-            +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
+            +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' invalid=true)
                 +text-field(placeholder='Placeholder' type='password' invalid=true)
             br
-            +field-label('First name')(align='left' labelWidth='100px' disabled=true)
+            +field-label('First name')(align='start' labelWidth='100px' disabled=true)
                 +text-field(placeholder='Placeholder' disabled=true)
             br
-            +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
+            +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' disabled=true)
                 +text-field(placeholder='Placeholder' type='password' disabled=true)
             br
-            +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
+            +field-label('Password', 'At least 6 characters required')(align='start' labelWidth='100px' invalid=true disabled=true)
                 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
 
         .c-box
-            +field-label('First name')(align='right' labelWidth='100px')
+            +field-label('First name')(align='end' labelWidth='100px')
                 +text-field(placeholder='Placeholder')
             br
-            +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
+            +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px')
                 +text-field(placeholder='Placeholder' type='password')
             br
-            +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
+            +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' invalid=true)
                 +text-field(placeholder='Placeholder' type='password' invalid=true)
             br
-            +field-label('First name')(align='right' labelWidth='100px' disabled=true)
+            +field-label('First name')(align='end' labelWidth='100px' disabled=true)
                 +text-field(placeholder='Placeholder' disabled=true)
             br
-            +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
+            +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' disabled=true)
                 +text-field(placeholder='Placeholder' type='password' disabled=true)
             br
-            +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
+            +field-label('Password', 'At least 6 characters required')(align='end' labelWidth='100px' invalid=true disabled=true)
                 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)