diff --git a/packages/temple-ui-src/src/compiler/Stylers.ts b/packages/temple-ui-src/src/compiler/Stylers.ts
index 95076b1..0297d11 100644
--- a/packages/temple-ui-src/src/compiler/Stylers.ts
+++ b/packages/temple-ui-src/src/compiler/Stylers.ts
@@ -8,7 +8,7 @@ import type {
 
 import Stylesheet from './StyleSheet';
 import StyleParser from './StyleParser';
-import { media } from './helpers';
+import { bna, media } from './helpers';
 
 /**
  * Returns a literal styler
@@ -18,19 +18,40 @@ export const literal = function(literals: LiteralToken[]) {
     for (const token of literals) {
       //extract the responsive, selector, 
       //and style from the definition
-      const { responsive: isResponsive, name, styles } = token;
+      const { name, styles } = token;
       if (name === classname) {
         stylesheet.map('all', `.${name}`, styles);
         //if the classname literally equals the literal name, 
         //then there is no need to check the other literals
         //because the literal name is unique.
         return;
-      //if the literal is responsive
-      } else if (isResponsive) {
-        for (const size of media) {
-          const selector = `${size}-${name}`;
+      }
+      //check before and after
+      for (const position of bna) {
+        const selector = `${position}-${name}`;
+        if (selector === classname) {
+          stylesheet.map('all', `.${selector}::${position}`, styles);
+          //if the classname literally equals the selector name, 
+          //then there is no need to check the other media sizes
+          //because the selector name is unique.
+          return;
+        }
+      }
+      //check responsive
+      for (const size of media) {
+        const selector = `${size}-${name}`;
+        if (selector === classname) {
+          stylesheet.map(size as Media, `.${selector}`, styles);
+          //if the classname literally equals the selector name, 
+          //then there is no need to check the other media sizes
+          //because the selector name is unique.
+          return;
+        }
+        //check before and after
+        for (const position of bna) {
+          const selector = `${size}-${position}-${name}`;
           if (selector === classname) {
-            stylesheet.map(size as Media, `.${selector}`, styles);
+            stylesheet.map(size as Media, `.${selector}::${position}`, styles);
             //if the classname literally equals the selector name, 
             //then there is no need to check the other media sizes
             //because the selector name is unique.
@@ -51,7 +72,7 @@ export const range = function(ranges: RangeToken[]) {
   for (const token of ranges) {
     //extract the responsive, selector, style,
     //range, and step from the definition
-    const { responsive, name, styles, range, step } = token;
+    const { name, styles, range, step } = token;
     const decimals = step.toString().split('.')[1]?.length || 0;
     const multiplier = Math.pow(10, decimals);
     //loop through the range
@@ -63,7 +84,6 @@ export const range = function(ranges: RangeToken[]) {
       //add the literal to the literals array
       literals.push({
         type: 'literal',
-        responsive: responsive,
         name: name.replaceAll('$', number),
         styles: styles.clone().replaceAll('$', value)
       });
@@ -81,7 +101,7 @@ export const expression = function(expressions: ExpressionToken[]) {
     for (const token of expressions) {
       //extract the responsive, selector, 
       //and style from the definition
-      const { responsive: isResponsive, name } = token;
+      const { name } = token;
       const matches = classname.match(new RegExp(`^${name}$`));
       if (matches) {
         //extract the selector and arguments
@@ -94,10 +114,39 @@ export const expression = function(expressions: ExpressionToken[]) {
         //add the styles to the stylesheet
         stylesheet.map('all', `.${classname}`, styles);
       //if the expression is responsive
-      } 
-      if (isResponsive) {
-        for (const size of media) {
-          const matches = classname.match(new RegExp(`^${size}\\-${name}$`));
+      }
+      //check before and after
+      for (const position of bna) {
+        const matches = classname.match(new RegExp(`^${position}\\-${name}$`));
+        if (matches) {
+          //extract the selector and arguments
+          const [ classname, ...args ] = Array.from(matches);
+          //replace the arguments in the style
+          const styles = token.styles.clone();
+          args.forEach(
+            (arg, index) => styles.replaceAll('$' + (index + 1), arg)
+          );
+          //add the styles to the stylesheet
+          stylesheet.map('all', `.${classname}::${position}`, styles);
+        }
+      }
+      //check responsive
+      for (const size of media) {
+        const matches = classname.match(new RegExp(`^${size}\\-${name}$`));
+        if (matches) {
+          //extract the selector and arguments
+          const [ classname, ...args ] = Array.from(matches);
+          //replace the arguments in the style
+          const styles = token.styles.clone();
+          args.forEach(
+            (arg, index) => styles.replaceAll('$' + (index + 1), arg)
+          );
+          //add the styles to the stylesheet
+          stylesheet.map(size as Media, `.${classname}`, styles);
+        }
+        //check before and after
+        for (const position of bna) {
+          const matches = classname.match(new RegExp(`^${size}\\-${position}\\-${name}$`));
           if (matches) {
             //extract the selector and arguments
             const [ classname, ...args ] = Array.from(matches);
@@ -107,7 +156,7 @@ export const expression = function(expressions: ExpressionToken[]) {
               (arg, index) => styles.replaceAll('$' + (index + 1), arg)
             );
             //add the styles to the stylesheet
-            stylesheet.map(size as Media, `.${classname}`, styles);
+            stylesheet.map(size as Media, `.${classname}::${position}`, styles);
           }
         }
       }
diff --git a/packages/temple-ui-src/src/compiler/data/definitions.ts b/packages/temple-ui-src/src/compiler/data/definitions.ts
index 4ef5c89..7c2216f 100644
--- a/packages/temple-ui-src/src/compiler/data/definitions.ts
+++ b/packages/temple-ui-src/src/compiler/data/definitions.ts
@@ -22,178 +22,204 @@ export function literals(): LiteralToken[] {
   return [
     //----------------------------------------------------------------//
     // FIXED VALUES
-
-    // Fonts
-    literal(false, 'arial', { 'font-family': [ 'Arial, sans-serif' ] }),
-    literal(false, 'courier', { 'font-family': [ "'Courier New', Courier, monospace" ] }),
-    literal(false, 'georgia', { 'font-family': [ 'Georgia, serif' ] }),
-    literal(false, 'verdana', { 'font-family': [ 'Verdana, sans-serif' ] }),
     
     // Display
-    literal(true, 'none', { display: [ 'none' ] }),
-    literal(true, 'block', { display: [ 'block' ] }),
-    literal(true, 'flex', { display: [ 'flex' ] }),
-    literal(true, 'inline', { display: [ 'inline' ] }),
-    literal(true, 'inline-block', { display: [ 'inline-block' ] }),
-    literal(true, 'transparent', { opacity: [ 0 ] }),
-    literal(true, 'hidden', { visibility: [ 'hidden' ] }),
+    literal('none', { display: [ 'none' ] }),
+    literal('block', { display: [ 'block' ] }),
+    literal('flex', { display: [ 'flex' ] }),
+    literal('inline', { display: [ 'inline' ] }),
+    literal('inline-block', { display: [ 'inline-block' ] }),
+    literal('table', { display: [ 'table' ] }),
+    literal('table-row', { display: [ 'table-row' ] }),
+    literal('table-cell', { display: [ 'table-cell' ] }),
+    literal('table-column', { display: [ 'table-column' ] }),
+    literal('table-caption', { display: [ 'table-caption' ] }),
+    literal('table-row-group', { display: [ 'table-row-group' ] }),
+    literal('table-column-group', { display: [ 'table-column-group' ] }),
+    literal('table-header-group', { display: [ 'table-header-group' ] }),
+    literal('table-footer-group', { display: [ 'table-footer-group' ] }),
+    literal('transparent', { opacity: [ 0 ] }),
+    literal('hidden', { visibility: [ 'hidden' ] }),
 
     // Position
-    literal(true, 'relative', { position: [ 'relative' ] }),
-    literal(true, 'absolute', { position: [ 'absolute' ] }),
-    literal(true, 'fixed', { position: [ 'fixed' ] }),
-    literal(true, 'sticky', { position: [ 'sticky' ] }),
-    literal(true, 'static', { position: [ 'static' ] }),
+    literal('relative', { position: [ 'relative' ] }),
+    literal('absolute', { position: [ 'absolute' ] }),
+    literal('fixed', { position: [ 'fixed' ] }),
+    literal('sticky', { position: [ 'sticky' ] }),
+    literal('static', { position: [ 'static' ] }),
 
     // Float
-    literal(true, 'float-left', { float: [ 'left' ] }),
-    literal(true, 'float-right', { float: [ 'right' ] }),
-    literal(true, 'float-none', { float: [ 'none' ] }),
+    literal('float-left', { float: [ 'left' ] }),
+    literal('float-right', { float: [ 'right' ] }),
+    literal('float-none', { float: [ 'none' ] }),
+
+    // Box
+    literal('box-border', { 'box-sizing': [ 'border-box' ] }),
+    literal('box-content', { 'box-sizing': [ 'content-box' ] }),
+    literal('box-unset', { 'box-sizing': [ 'unset' ] }),
   
     // Flex
-    literal(true, 'flex-row', { 'flex-direction': [ 'row' ] }),
-    literal(true, 'flex-col', { 'flex-direction': [ 'column' ] }),
-    literal(true, 'flex-grow', { 'flex-grow': [ 1 ] }),
-    literal(true, 'flex-shrink', { 'flex-shrink': [ 1 ] }),
-    literal(true, 'flex-center', { 
+    literal('flex-row', { 'flex-direction': [ 'row' ] }),
+    literal('flex-col', { 'flex-direction': [ 'column' ] }),
+    literal('flex-grow', { 'flex-grow': [ 1 ] }),
+    literal('flex-shrink', { 'flex-shrink': [ 1 ] }),
+    literal('flex-center', { 
       'align-items': [ 'center' ], 
       'justify-content': [ 'center' ] 
     }),
-    literal(true, 'flex-center-x', { 'justify-content': [ 'center' ] }),
-    literal(true, 'flex-center-y', { 'align-items': [ 'center' ] }),
-    literal(true, 'flex-wrap', { 'flex-wrap': [ 'wrap' ] }),
-    literal(true, 'flex-nowrap', { 'flex-wrap': [ 'nowrap' ] }),
-    literal(true, 'justify-center', { 'justify-content': [ 'center' ] }),
-    literal(true, 'justify-left', { 'justify-content': [ 'flex-start' ] }),
-    literal(true, 'justify-right', { 'justify-content': [ 'flex-end' ] }),
-    literal(true, 'justify-between', { 'justify-content': [ 'space-between' ] }),
-    literal(true, 'justify-around', { 'justify-content': [ 'space-around' ] }),
-    literal(true, 'justify-evenly', { 'justify-content': [ 'space-evenly' ] }),
-    literal(true, 'align-center', { 'align-items': [ 'center' ] }),
-    literal(true, 'align-left', { 'align-items': [ 'flex-start' ] }),
-    literal(true, 'align-right', { 'align-items': [ 'flex-end' ] }),
-    literal(true, 'align-baseline', { 'align-items': [ 'baseline' ] }),
+    literal('flex-center-x', { 'justify-content': [ 'center' ] }),
+    literal('flex-center-y', { 'align-items': [ 'center' ] }),
+    literal('flex-wrap', { 'flex-wrap': [ 'wrap' ] }),
+    literal('flex-nowrap', { 'flex-wrap': [ 'nowrap' ] }),
+    literal('justify-center', { 'justify-content': [ 'center' ] }),
+    literal('justify-left', { 'justify-content': [ 'flex-start' ] }),
+    literal('justify-right', { 'justify-content': [ 'flex-end' ] }),
+    literal('justify-between', { 'justify-content': [ 'space-between' ] }),
+    literal('justify-around', { 'justify-content': [ 'space-around' ] }),
+    literal('justify-evenly', { 'justify-content': [ 'space-evenly' ] }),
+    literal('align-center', { 'align-items': [ 'center' ] }),
+    literal('align-left', { 'align-items': [ 'flex-start' ] }),
+    literal('align-right', { 'align-items': [ 'flex-end' ] }),
+    literal('align-baseline', { 'align-items': [ 'baseline' ] }),
 
     // Overflow
-    literal(true, 'scroll', { 'overflow': [ 'scroll' ] }),
-    literal(true, 'scroll-auto', { 'overflow': [ 'auto' ] }),
-    literal(true, 'scroll-hidden', { 'overflow': [ 'hidden' ] }),
-    literal(true, 'scroll-x', { 'overflow-x': [ 'scroll' ] }),
-    literal(true, 'scroll-x-auto', { 'overflow-x': [ 'auto' ] }),
-    literal(true, 'scroll-x-hidden', { 'overflow-x': [ 'hidden' ] }),
-    literal(true, 'scroll-y', { 'overflow-y': [ 'scroll' ] }),
-    literal(true, 'scroll-y-auto', { 'overflow-y': [ 'auto' ] }),
-    literal(true, 'scroll-y-hidden', { 'overflow-y': [ 'hidden' ] }),
+    literal('scroll', { 'overflow': [ 'scroll' ] }),
+    literal('scroll-auto', { 'overflow': [ 'auto' ] }),
+    literal('scroll-hidden', { 'overflow': [ 'hidden' ] }),
+    literal('scroll-x', { 'overflow-x': [ 'scroll' ] }),
+    literal('scroll-x-auto', { 'overflow-x': [ 'auto' ] }),
+    literal('scroll-x-hidden', { 'overflow-x': [ 'hidden' ] }),
+    literal('scroll-y', { 'overflow-y': [ 'scroll' ] }),
+    literal('scroll-y-auto', { 'overflow-y': [ 'auto' ] }),
+    literal('scroll-y-hidden', { 'overflow-y': [ 'hidden' ] }),
 
     // Size
-    literal(true, 'h-auto', { height: [ 'auto' ] }),
-    literal(true, 'w-auto', { width: [ 'auto' ] }),
-    literal(true, 'vh', { height: [ '100vh' ] }),
-    literal(true, 'vw', { width: [ '100vw' ] }),
-    literal(true, 'wm-auto', { 'max-width': [ 'auto' ] }),
-    literal(true, 'wm-xs', { 'max-width': [ '360px' ] }),
-    literal(true, 'wm-sm', { 'max-width': [ '420px' ] }),
-    literal(true, 'wm-md', { 'max-width': [ '767px' ] }),
-    literal(true, 'wm-lg', { 'max-width': [ '992px' ] }),
-    literal(true, 'wm-xl', { 'max-width': [ '1024px' ] }),
-    literal(true, 'wm-full', { 'max-width': [ '100%' ] }),
+    literal('h-auto', { height: [ 'auto' ] }),
+    literal('w-auto', { width: [ 'auto' ] }),
+    literal('vh', { height: [ '100vh' ] }),
+    literal('vw', { width: [ '100vw' ] }),
+    literal('wm-auto', { 'max-width': [ 'auto' ] }),
+    literal('wm-xs', { 'max-width': [ '360px' ] }),
+    literal('wm-sm', { 'max-width': [ '420px' ] }),
+    literal('wm-md', { 'max-width': [ '767px' ] }),
+    literal('wm-lg', { 'max-width': [ '992px' ] }),
+    literal('wm-xl', { 'max-width': [ '1024px' ] }),
+    literal('wm-full', { 'max-width': [ '100%' ] }),
 
     // Background
-    literal(true, 'bg-none', { 'background-color': [ 'transparent', '!important' ] }),
-    literal(true, 'bg-cover', { 'background-size': [ 'cover' ] }),
-    literal(true, 'bg-contain', { 'background-size': [ 'contain' ] }),
-    literal(true, 'bg-repeat', { 'background-repeat': [ 'repeat' ] }),
-    literal(true, 'bg-repeat-x', { 'background-repeat': [ 'repeat-x' ] }),
-    literal(true, 'bg-repeat-y', { 'background-repeat': [ 'repeat-y' ] }),
-    literal(true, 'bg-norepeat', { 'background-repeat': [ 'no-repeat' ] }),
-    literal(true, 'bg-fixed', { 'background-attachment': [ 'fixed' ] }),
-    literal(true, 'bg-b', { 'background-position': [ 'bottom' ] }),
-    literal(true, 'bg-c', { 'background-position': [ 'center' ] }),
-    literal(true, 'bg-t', { 'background-position': [ 'top' ] }),
-    literal(true, 'bg-l', { 'background-position': [ 'left' ] }),
-    literal(true, 'bg-r', { 'background-position': [ 'right' ] }),
-    literal(true, 'bg-bl', { 'background-position': [ 'left', 'bottom' ] }),
-    literal(true, 'bg-cl', { 'background-position': [ 'left', 'center' ] }),
-    literal(true, 'bg-tl', { 'background-position': [ 'left', 'top' ] }),
-    literal(true, 'bg-bc', { 'background-position': [ 'center', 'bottom' ] }),
-    literal(true, 'bg-cc', { 'background-position': [ 'center' ] }),
-    literal(true, 'bg-tc', { 'background-position': [ 'center', 'top' ] }),
-    literal(true, 'bg-br', { 'background-position': [ 'right', 'bottom' ] }),
-    literal(true, 'bg-cr', { 'background-position': [ 'right', 'center' ] }),
-    literal(true, 'bg-tr', { 'background-position': [ 'right', 'top' ] }),
+    literal('bg-none', { 'background-color': [ 'transparent', '!important' ] }),
+    literal('bg-cover', { 'background-size': [ 'cover' ] }),
+    literal('bg-contain', { 'background-size': [ 'contain' ] }),
+    literal('bg-repeat', { 'background-repeat': [ 'repeat' ] }),
+    literal('bg-repeat-x', { 'background-repeat': [ 'repeat-x' ] }),
+    literal('bg-repeat-y', { 'background-repeat': [ 'repeat-y' ] }),
+    literal('bg-norepeat', { 'background-repeat': [ 'no-repeat' ] }),
+    literal('bg-fixed', { 'background-attachment': [ 'fixed' ] }),
+    literal('bg-b', { 'background-position': [ 'bottom' ] }),
+    literal('bg-c', { 'background-position': [ 'center' ] }),
+    literal('bg-t', { 'background-position': [ 'top' ] }),
+    literal('bg-l', { 'background-position': [ 'left' ] }),
+    literal('bg-r', { 'background-position': [ 'right' ] }),
+    literal('bg-bl', { 'background-position': [ 'left', 'bottom' ] }),
+    literal('bg-cl', { 'background-position': [ 'left', 'center' ] }),
+    literal('bg-tl', { 'background-position': [ 'left', 'top' ] }),
+    literal('bg-bc', { 'background-position': [ 'center', 'bottom' ] }),
+    literal('bg-cc', { 'background-position': [ 'center' ] }),
+    literal('bg-tc', { 'background-position': [ 'center', 'top' ] }),
+    literal('bg-br', { 'background-position': [ 'right', 'bottom' ] }),
+    literal('bg-cr', { 'background-position': [ 'right', 'center' ] }),
+    literal('bg-tr', { 'background-position': [ 'right', 'top' ] }),
 
     // Text
-    literal(true, 'tx-2xs', { 'font-size': [ '8px' ] }),
-    literal(true, 'tx-6xl', { 'font-size': [ '28px' ] }),
-    literal(true, 'tx-7xl', { 'font-size': [ '30px' ] }),
-    literal(true, 'tx-center', { 'text-align': [ 'center' ] }),
-    literal(true, 'tx-left', { 'text-align': [ 'left' ] }),
-    literal(true, 'tx-right', { 'text-align': [ 'right' ] }),
-    literal(true, 'tx-bold', { 'font-weight': [ 'bold' ] }),
-    literal(true, 'tx-normal', { 'font-weight': [ 'normal' ] }),
-    literal(true, 'tx-italic', { 'font-style': [ 'italic' ] }),
-    literal(true, 'tx-underline', { 'text-decoration': [ 'underline' ] }),
-    literal(true, 'tx-lowercase', { 'text-transform': [ 'lowercase' ] }),
-    literal(true, 'tx-uppercase', { 'text-transform': [ 'uppercase' ] }),
-    literal(true, 'tx-word-wrap', { 'word-wrap': [ 'break-word' ] }),
-    literal(true, 'tx-nowrap', { 'white-space': [ 'nowrap' ] }),
-    literal(true, 'tx-prewrap', { 'white-space': [ 'pre-wrap' ] }),
-    literal(true, 'tx-nodecor', { 'text-decoration': [ 'none' ] }),
-    literal(true, 'tx-top', { 'vertical-align': [ 'top' ] }),
-    literal(true, 'tx-middle', { 'vertical-align': [ 'middle' ] }),
-    literal(true, 'tx-bottom', { 'vertical-align': [ 'bottom' ] }),
+    literal('tx-2xs', { 'font-size': [ '8px' ] }),
+    literal('tx-6xl', { 'font-size': [ '28px' ] }),
+    literal('tx-7xl', { 'font-size': [ '30px' ] }),
+    literal('tx-center', { 'text-align': [ 'center' ] }),
+    literal('tx-left', { 'text-align': [ 'left' ] }),
+    literal('tx-right', { 'text-align': [ 'right' ] }),
+    literal('tx-bold', { 'font-weight': [ 'bold' ] }),
+    literal('tx-normal', { 'font-weight': [ 'normal' ] }),
+    literal('tx-italic', { 'font-style': [ 'italic' ] }),
+    literal('tx-arial', { 'font-family': [ 'Arial, sans-serif' ] }),
+    literal('tx-courier', { 'font-family': [ "'Courier New', Courier, monospace" ] }),
+    literal('tx-georgia', { 'font-family': [ 'Georgia, serif' ] }),
+    literal('tx-verdana', { 'font-family': [ 'Verdana, sans-serif' ] }),
+    literal('tx-inherit', { 'font-family': [ 'inherit' ] }),
+    literal('tx-underline', { 'text-decoration': [ 'underline' ] }),
+    literal('tx-lowercase', { 'text-transform': [ 'lowercase' ] }),
+    literal('tx-uppercase', { 'text-transform': [ 'uppercase' ] }),
+    literal('tx-word-wrap', { 'word-wrap': [ 'break-word' ] }),
+    literal('tx-nowrap', { 'white-space': [ 'nowrap' ] }),
+    literal('tx-prewrap', { 'white-space': [ 'pre-wrap' ] }),
+    literal('tx-nodecor', { 'text-decoration': [ 'none' ] }),
+    literal('tx-top', { 'vertical-align': [ 'top' ] }),
+    literal('tx-middle', { 'vertical-align': [ 'middle' ] }),
+    literal('tx-bottom', { 'vertical-align': [ 'bottom' ] }),
 
     // Border
-    literal(false, 'bd-solid', { 'border-style': [ 'solid' ] }),
-    literal(false, 'bd-dashed', { 'border-style': [ 'dashed' ] }),
-    literal(false, 'bd-dotted', { 'border-style': [ 'dotted' ] }),
-    literal(false, 'bd-collapse', { 'border-collapse': [ 'collapse' ] }),
-    literal(true, 'curved', { 'border-radius': [ '4px' ] }),
-    literal(true, 'curved-l', { 'border-radius': [ '4px', '0', '0', '4px' ] }),
-    literal(true, 'curved-r', { 'border-radius': [ '0', '4px', '4px', '0' ] }),
-    literal(true, 'curved-t', { 'border-radius': [ '4px', '4px', '0', '0' ] }),
-    literal(true, 'curved-b', { 'border-radius': [ '0', '0', '4px', '4px' ] }),
-    literal(true, 'rounded', { 'border-radius': [ '12px' ] }),
-    literal(true, 'rounded-l', { 'border-radius': [ '12px', '0', '0', '12px' ] }),
-    literal(true, 'rounded-r', { 'border-radius': [ '0', '12px', '12px', '0' ] }),
-    literal(true, 'rounded-t', { 'border-radius': [ '12px', '12px', '0', '0' ] }),
-    literal(true, 'rounded-b', { 'border-radius': [ '0', '0', '12px', '12px' ] }),
-    literal(true, 'pill', { 'border-radius': [ '10000px' ] }),
-    literal(true, 'pill-l', { 'border-radius': [ '10000px', '0', '0', '10000px' ] }),
-    literal(true, 'pill-r', { 'border-radius': [ '0', '10000px', '10000px', '0' ] }),
-    literal(true, 'pill-t', { 'border-radius': [ '10000px', '10000px', '0', '0' ] }),
-    literal(true, 'pill-b', { 'border-radius': [ '0', '0', '10000px', '10000px' ] }),
-    literal(true, 'curve-full', { 'border-radius': [ '10000px' ] }),
-    literal(true, 'curve-l-full', { 'border-radius': [ '10000px', '0', '0', '10000px' ] }),
-    literal(true, 'curve-r-full', { 'border-radius': [ '0', '10000px', '10000px', '0' ] }),
-    literal(true, 'curve-t-full', { 'border-radius': [ '10000px', '10000px', '0', '0' ] }),
-    literal(true, 'curve-b-full', { 'border-radius': [ '0', '0', '10000px', '10000px' ] }),
+    literal('bd-solid', { 'border-style': [ 'solid' ] }),
+    literal('bd-dashed', { 'border-style': [ 'dashed' ] }),
+    literal('bd-dotted', { 'border-style': [ 'dotted' ] }),
+    literal('bd-collapse', { 'border-collapse': [ 'collapse' ] }),
+    literal('bd-transparent', { 'border-color': [ 'transparent' ] }),
+    literal('bdb-transparent', { 'border-bottom-color': [ 'transparent' ] }),
+    literal('bdl-transparent', { 'border-left-color': [ 'transparent' ] }),
+    literal('bdr-transparent', { 'border-right-color': [ 'transparent' ] }),
+    literal('bdt-transparent', { 'border-top-color': [ 'transparent' ] }),
+    literal('bdx-transparent', { 
+      'border-left-color': [ 'transparent' ],
+      'border-right-color': [ 'transparent' ] 
+    }),
+    literal('bdy-transparent', { 
+      'border-bottom-color': [ 'transparent' ],
+      'border-top-color': [ 'transparent' ] 
+    }),
+    literal('curved', { 'border-radius': [ '4px' ] }),
+    literal('curved-l', { 'border-radius': [ '4px', '0', '0', '4px' ] }),
+    literal('curved-r', { 'border-radius': [ '0', '4px', '4px', '0' ] }),
+    literal('curved-t', { 'border-radius': [ '4px', '4px', '0', '0' ] }),
+    literal('curved-b', { 'border-radius': [ '0', '0', '4px', '4px' ] }),
+    literal('rounded', { 'border-radius': [ '12px' ] }),
+    literal('rounded-l', { 'border-radius': [ '12px', '0', '0', '12px' ] }),
+    literal('rounded-r', { 'border-radius': [ '0', '12px', '12px', '0' ] }),
+    literal('rounded-t', { 'border-radius': [ '12px', '12px', '0', '0' ] }),
+    literal('rounded-b', { 'border-radius': [ '0', '0', '12px', '12px' ] }),
+    literal('pill', { 'border-radius': [ '10000px' ] }),
+    literal('pill-l', { 'border-radius': [ '10000px', '0', '0', '10000px' ] }),
+    literal('pill-r', { 'border-radius': [ '0', '10000px', '10000px', '0' ] }),
+    literal('pill-t', { 'border-radius': [ '10000px', '10000px', '0', '0' ] }),
+    literal('pill-b', { 'border-radius': [ '0', '0', '10000px', '10000px' ] }),
+    literal('curve-full', { 'border-radius': [ '10000px' ] }),
+    literal('curve-l-full', { 'border-radius': [ '10000px', '0', '0', '10000px' ] }),
+    literal('curve-r-full', { 'border-radius': [ '0', '10000px', '10000px', '0' ] }),
+    literal('curve-t-full', { 'border-radius': [ '10000px', '10000px', '0', '0' ] }),
+    literal('curve-b-full', { 'border-radius': [ '0', '0', '10000px', '10000px' ] }),
 
     // Margin
-    literal(true, 'm-auto', { margin: [ 'auto' ] }),
-    literal(true, 'mx-auto', { 'margin-left': [ 'auto' ], 'margin-right': [ 'auto' ] }),
+    literal('m-auto', { margin: [ 'auto' ] }),
+    literal('mx-auto', { 'margin-left': [ 'auto' ], 'margin-right': [ 'auto' ] }),
 
     // List
-    literal(true, 'list-none', { 'list-style': [ 'none' ] }),
-    literal(true, 'list-disc', { 'list-style': [ 'disc' ] }),
-    literal(true, 'list-decimal', { 'list-style': [ 'decimal' ] }),
+    literal('list-none', { 'list-style': [ 'none' ] }),
+    literal('list-disc', { 'list-style': [ 'disc' ] }),
+    literal('list-decimal', { 'list-style': [ 'decimal' ] }),
   
     // Select
-    literal(true, 'select-none', { 'user-select': [ 'none' ] }),
-    literal(true, 'select-text', { 'user-select': [ 'text' ] }),
-    literal(true, 'select-all', { 'user-select': [ 'all' ] }),
-    literal(true, 'select-auto', { 'user-select': [ 'auto' ] }),
+    literal('select-none', { 'user-select': [ 'none' ] }),
+    literal('select-text', { 'user-select': [ 'text' ] }),
+    literal('select-all', { 'user-select': [ 'all' ] }),
+    literal('select-auto', { 'user-select': [ 'auto' ] }),
   
     //Cursor
-    literal(true, 'cursor-pointer', { 'cursor': [ 'pointer' ] }),
-    literal(true, 'cursor-default', { 'cursor': [ 'default' ] }),
-    literal(true, 'cursor-move', { 'cursor': [ 'move' ] }),
-    literal(true, 'cursor-not-allowed', { 'cursor': [ 'not-allowed' ] }),
-    literal(true, 'cursor-help', { 'cursor': [ 'help' ] }),
-    literal(true, 'cursor-text', { 'cursor': [ 'text' ] }),
-    literal(true, 'cursor-auto', { 'cursor': [ 'auto' ] }),
-    literal(true, 'cursor-wait', { 'cursor': [ 'wait' ] }),
-    literal(true, 'cursor-crosshair', { 'cursor': [ 'crosshair' ] }),
+    literal('cursor-pointer', { 'cursor': [ 'pointer' ] }),
+    literal('cursor-default', { 'cursor': [ 'default' ] }),
+    literal('cursor-move', { 'cursor': [ 'move' ] }),
+    literal('cursor-not-allowed', { 'cursor': [ 'not-allowed' ] }),
+    literal('cursor-help', { 'cursor': [ 'help' ] }),
+    literal('cursor-text', { 'cursor': [ 'text' ] }),
+    literal('cursor-auto', { 'cursor': [ 'auto' ] }),
+    literal('cursor-wait', { 'cursor': [ 'wait' ] }),
+    literal('cursor-crosshair', { 'cursor': [ 'crosshair' ] }),
 
     //----------------------------------------------------------------//
     // ITERATORS
@@ -202,7 +228,7 @@ export function literals(): LiteralToken[] {
     ...colors.map(
       //bg-primary, bg-secondary, bg-black, bg-white, 
       //bg-info, bg-error, bg-warning, bg-success, bg-muted
-      color => literal(false, `bg-${color}`, { 
+      color => literal(`bg-${color}`, { 
         'background-color': [ `var(--${color})`, '!important' ] 
       })
     ),
@@ -210,28 +236,28 @@ export function literals(): LiteralToken[] {
     // Flex
     ...percents.map(
       //basis-full, basis-half, basis-third, basis-fourth, basis-fifth
-      ([ name, value ]) => literal(true, `basis-${name}`, { 'flex-basis': [ `${value}%` ] })
+      ([ name, value ]) => literal(`basis-${name}`, { 'flex-basis': [ `${value}%` ] })
     ),
     
     // Size
     ...percents.map(
       //h-full, h-half, h-third, h-fourth, h-fifth
-      ([ name, value ]) => literal(true, `h-${name}`, { 'height': [ `${value}%` ] })
+      ([ name, value ]) => literal(`h-${name}`, { 'height': [ `${value}%` ] })
     ),
     ...percents.map(
       //w-full, w-half, w-third, w-fourth, w-fifth
-      ([ name, value ]) => literal(true, `w-${name}`, { 'width': [ `${value}%` ] })
+      ([ name, value ]) => literal(`w-${name}`, { 'width': [ `${value}%` ] })
     ),
 
     // Text
     ...colors.map(
       //tx-primary, tx-secondary, tx-black, tx-white, 
       //tx-info, tx-error, tx-warning, tx-success, tx-muted
-      color => literal(false, `tx-${color}`, { 'color': [ `var(--${color})`, '!important' ] })
+      color => literal(`tx-${color}`, { 'color': [ `var(--${color})`, '!important' ] })
     ),
     ...xsizes.map(
       //tx-xs, tx-sm, tx-md, tx-lg, tx-xl, tx-2xl, tx-3xl, tx-4xl, tx-5xl
-      (size, i) => literal(true, `tx-${size}`, { 
+      (size, i) => literal(`tx-${size}`, { 
         'font-size': [ `${(i + 5) * 2}px` ] 
       })
     ),
@@ -240,32 +266,32 @@ export function literals(): LiteralToken[] {
     ...colors.map(
       //bda-primary, bda-secondary, bda-black, bda-white, 
       //bda-info, bda-error, bda-warning, bda-success, bda-muted
-      color => literal(false, `bda-${color}`, { 'border': [ '1px', 'solid', `var(--${color})` ] })
+      color => literal(`bda-${color}`, { 'border': [ '1px', 'solid', `var(--${color})` ] })
     ),
     ...colors.map(
       //bdb-primary, bdb-secondary, bdb-black, bdb-white, 
       //bdb-info, bdb-error, bdb-warning, bdb-success, bdb-muted
-      color => literal(false, `bdb-${color}`, { 'border-bottom': [ '1px', 'solid', `var(--${color})` ] })
+      color => literal(`bdb-${color}`, { 'border-bottom': [ '1px', 'solid', `var(--${color})` ] })
     ),
     ...colors.map(
       //bdl-primary, bdl-secondary, bdl-black, bdl-white, bdl-info, 
       //bdl-error, bdl-warning, bdl-success, bdl-muted
-      color => literal(false, `bdl-${color}`, { 'border-left': [ '1px', 'solid', `var(--${color})` ] })
+      color => literal(`bdl-${color}`, { 'border-left': [ '1px', 'solid', `var(--${color})` ] })
     ),
     ...colors.map(
       //bdr-primary, bdr-secondary, bdr-black, bdr-white, 
       //bdr-info, bdr-error, bdr-warning, bdr-success, bdr-muted
-      color => literal(false, `bdr-${color}`, { 'border-right': [ '1px', 'solid', `var(--${color})` ] })
+      color => literal(`bdr-${color}`, { 'border-right': [ '1px', 'solid', `var(--${color})` ] })
     ),
     ...colors.map(
       //bdt-primary, bdt-secondary, bdt-black, bdt-white, 
       //bdt-info, bdt-error, bdt-warning, bdt-success, bdt-muted
-      color => literal(false, `bdt-${color}`, { 'border-top': [ '1px', 'solid', `var(--${color})` ] })
+      color => literal(`bdt-${color}`, { 'border-top': [ '1px', 'solid', `var(--${color})` ] })
     ),
     ...colors.map(
       //bdx-primary, bdx-secondary, bdx-black, bdx-white, 
       //bdx-info, bdx-error, bdx-warning, bdx-success, bdx-muted
-      color => literal(false, `bdx-${color}`, { 
+      color => literal(`bdx-${color}`, { 
         'border-left': [ '1px', 'solid', `var(--${color})` ],
         'border-right': [ '1px', 'solid', `var(--${color})` ]
       })
@@ -273,7 +299,7 @@ export function literals(): LiteralToken[] {
     ...colors.map(
       //bdy-primary, bdy-secondary, bdy-black, bdy-white, 
       //bdy-info, bdy-error, bdy-warning, bdy-success, bdy-muted
-      color => literal(false, `bdy-${color}`, { 
+      color => literal(`bdy-${color}`, { 
         'border-bottom': [ '1px', 'solid', `var(--${color})` ],
         'border-top': [ '1px', 'solid', `var(--${color})` ]
       })
@@ -281,43 +307,43 @@ export function literals(): LiteralToken[] {
     ...colors.map(
       //bd-primary, bd-secondary, bd-black, bd-white, 
       //bd-info, bd-error, bd-warning, bd-success, bd-muted
-      color => literal(false, `bd-${color}`, { 
+      color => literal(`bd-${color}`, { 
         'border-color': [ `var(--${color})`, '!important' ] 
       })
     ),
     ...sizes.map(//bd-xs, bd-sm, bd-md, bd-lg, bd-xl
-      (size, i) => literal(false, `bd-${size}`, { 
+      (size, i) => literal(`bd-${size}`, { 
         'border-width': [ `${i + 1}px` ] 
       })
     ),
     ...sizes.map(//bdt-xs, bdt-sm, bdt-md, bdt-lg, bdt-xl
-      (size, i) => literal(false, `bdt-${size}`, { 
+      (size, i) => literal(`bdt-${size}`, { 
         'border-top-width': [ `${i + 1}px` ] 
       })
     ),
     ...sizes.map(//bdb-xs, bdb-sm, bdb-md, bdb-lg, bdb-xl
-      (size, i) => literal(false, `bdb-${size}`, { 
+      (size, i) => literal(`bdb-${size}`, { 
         'border-bottom-width': [ `${i + 1}px` ] 
       })
     ),
     ...sizes.map(//bdl-xs, bdl-sm, bdl-md, bdl-lg, bdl-xl
-      (size, i) => literal(false, `bdl-${size}`, { 
+      (size, i) => literal(`bdl-${size}`, { 
         'border-left-width': [ `${i + 1}px` ] 
       })
     ),
     ...sizes.map(//bdr-xs, bdr-sm, bdr-md, bdr-lg, bdr-xl
-      (size, i) => literal(false, `bdr-${size}`, { 
+      (size, i) => literal(`bdr-${size}`, { 
         'border-right-width': [ `${i + 1}px` ] 
       })
     ),
     ...sizes.map(//bdx-xs, bdx-sm, bdx-md, bdx-lg, bdx-xl
-      (size, i) => literal(false, `bdx-${size}`, { 
+      (size, i) => literal(`bdx-${size}`, { 
         'border-left-width': [ `${i + 1}px` ],
         'border-right-width': [ `${i + 1}px` ]
       })
     ),
     ...sizes.map(//bdy-xs, bdy-sm, bdy-md, bdy-lg, bdy-xl
-      (size, i) => literal(false, `bdy-${size}`, { 
+      (size, i) => literal(`bdy-${size}`, { 
         'border-top-width': [ `${i + 1}px` ],
         'border-bottom-width': [ `${i + 1}px` ]
       })
@@ -325,35 +351,35 @@ export function literals(): LiteralToken[] {
     ...xsizes.map(
       //curve-xs, curve-sm, curve-md, curve-lg, curve-xl, 
       //curve-2xl, curve-3xl, curve-4xl, curve-5xl
-      (size, i) => literal(true, `curve-${size}`, { 
+      (size, i) => literal(`curve-${size}`, { 
         'border-radius': [ `${(i + 1) * 2}px` ] 
       })
     ),
     ...xsizes.map(
       //curve-l-xs, curve-l-sm, curve-l-md, curve-l-lg, curve-l-xl,
       //curve-l-2xl, curve-l-3xl, curve-l-4xl, curve-l-5xl
-      (size, i) => literal(true, `curve-l-${size}`, { 
+      (size, i) => literal(`curve-l-${size}`, { 
         'border-radius': [ `${(i + 1) * 2}px`, '0', '0', `${(i + 1) * 2}px` ] 
       })
     ),
     ...xsizes.map(
       //curve-r-xs, curve-r-sm, curve-r-md, curve-r-lg, curve-r-xl, 
       //curve-r-2xl, curve-r-3xl, curve-r-4xl, curve-r-5xl
-      (size, i) => literal(true, `curve-r-${size}`, { 
+      (size, i) => literal(`curve-r-${size}`, { 
         'border-radius': [ '0', `${(i + 1) * 2}px`, `${(i + 1) * 2}px`, '0' ] 
       })
     ),
     ...xsizes.map(
       //curve-t-xs, curve-t-sm, curve-t-md, curve-t-lg, curve-t-xl, 
       //curve-t-2xl, curve-t-3xl, curve-t-4xl, curve-t-5xl
-      (size, i) => literal(true, `curve-t-${size}`, { 
+      (size, i) => literal(`curve-t-${size}`, { 
         'border-radius': [ `${(i + 1) * 2}px`, `${(i + 1) * 2}px`, '0', '0' ] 
       })
     ),
     ...xsizes.map(
       //curve-b-xs, curve-b-sm, curve-b-md, curve-b-lg, curve-b-xl 
       //curve-b-2xl, curve-b-3xl, curve-b-4xl, curve-b-5xl
-      (size, i) => literal(true, `curve-b-${size}`, { 
+      (size, i) => literal(`curve-b-${size}`, { 
         'border-radius': [ '0', '0', `${(i + 1) * 2}px`, `${(i + 1) * 2}px` ] 
       })
     ),
@@ -366,18 +392,18 @@ export function literals(): LiteralToken[] {
 export function ranges(): RangeToken[] {
   return [
     // Opacity
-    range(true, 'o-$', { opacity: [ '$' ] }, 0, 1, 0.01),
+    range('o-$', { opacity: [ '$' ] }, 0, 1, 0.01),
     // Border
-    range(true, 'bd-$', { 'border-width': [ '$px' ] }, 0, 20),
-    range(true, 'bdb-$', { 'border-bottom-width': [ '$px' ] }, 0, 20),
-    range(true, 'bdl-$', { 'border-left-width': [ '$px' ] }, 0, 20),
-    range(true, 'bdr-$', { 'border-right-width': [ '$px' ] }, 0, 20),
-    range(true, 'bdt-$', { 'border-top-width': [ '$px' ] }, 0, 20),
-    range(true, 'bdx-$', {
+    range('bd-$', { 'border-width': [ '$px' ] }, 0, 20),
+    range('bdb-$', { 'border-bottom-width': [ '$px' ] }, 0, 20),
+    range('bdl-$', { 'border-left-width': [ '$px' ] }, 0, 20),
+    range('bdr-$', { 'border-right-width': [ '$px' ] }, 0, 20),
+    range('bdt-$', { 'border-top-width': [ '$px' ] }, 0, 20),
+    range('bdx-$', {
       'border-left-width': [ '$px' ],
       'border-right-width': [ '$px' ]
     }, 0, 20),
-    range(true, 'bdy-$', {
+    range('bdy-$', {
       'border-bottom-width': [ '$px' ],
       'border-top-width': [ '$px' ]
     }, 0, 20),
@@ -393,85 +419,83 @@ export function expressions(): ExpressionToken[] {
     // FIXED EXPRESSIONS
 
     // Position
-    expression(true, 'bottom\\-(\\-{0,1}\\d+)', { bottom: [ '$1px' ] }),
-    expression(true, 'left\\-(\\-{0,1}\\d+)', { left: [ '$1px' ] }),
-    expression(true, 'right\\-(\\-{0,1}\\d+)', { right: [ '$1px' ] }),
-    expression(true, 'top\\-(\\-{0,1}\\d+)', { top: [ '$1px' ] }),
-    expression(true, 'z\\-(\\d+)', { 'z-index': [ '$1' ] }),
+    expression('bottom\\-(\\-{0,1}\\d+)', { bottom: [ '$1px' ] }),
+    expression('left\\-(\\-{0,1}\\d+)', { left: [ '$1px' ] }),
+    expression('right\\-(\\-{0,1}\\d+)', { right: [ '$1px' ] }),
+    expression('top\\-(\\-{0,1}\\d+)', { top: [ '$1px' ] }),
+    expression('z\\-(\\d+)', { 'z-index': [ '$1' ] }),
     
     // Flex
-    expression(true, 'basis\\-(\\d+)', { 'flex-basis': [ '$1px' ] }),
-    expression(true, 'basis\\-p\\-(\\d+)', { 'flex-basis': [ '$1%' ] }),
-    expression(true, 'gap\\-(\\d+)', { 'gap': [ '$1px' ] }),
+    expression('basis\\-(\\d+)', { 'flex-basis': [ '$1px' ] }),
+    expression('basis\\-p\\-(\\d+)', { 'flex-basis': [ '$1%' ] }),
+    expression('gap\\-(\\d+)', { 'gap': [ '$1px' ] }),
   
     // Size
-    expression(true, 'h\\-(\\d+)', { height: [ '$1px' ] }),
-    expression(true, 'h\\-calc\\-(\\d+)-(\\d+)', { height: [ 'calc($1% - $2px)' ] }),
-    expression(true, 'w\\-(\\d+)', { width: [ '$1px' ] }),
-    expression(true, 'wp\\-(\\d+)', { width: [ '$1%' ] }),
-    expression(true, 'w\\-calc\\-(\\d+)-(\\d+)', { width: [ 'calc($1% - $2px)' ] }),
-    expression(true, 'wm\\-(\\d+)', { 'max-width': [ '$1px' ] }),
+    expression('h\\-(\\d+)', { height: [ '$1px' ] }),
+    expression('h\\-calc\\-(\\d+)-(\\d+)', { height: [ 'calc($1% - $2px)' ] }),
+    expression('w\\-(\\d+)', { width: [ '$1px' ] }),
+    expression('wp\\-(\\d+)', { width: [ '$1%' ] }),
+    expression('w\\-calc\\-(\\d+)-(\\d+)', { width: [ 'calc($1% - $2px)' ] }),
+    expression('wm\\-(\\d+)', { 'max-width': [ '$1px' ] }),
     
     // Background
-    expression(true, 'bg\\-t\\-(\\d+)', { 'background-color': [ 'var(--bg-$1)' ] }),
-    expression(true, 'bg\\-h\\-([0-9a-f]{3,6})', { 'background-color': [ '#$1' ] }),
+    expression('bg\\-t\\-(\\d+)', { 'background-color': [ 'var(--bg-$1)' ] }),
+    expression('bg\\-h\\-([0-9a-f]{3,6})', { 'background-color': [ '#$1' ] }),
   
     // Text
-    expression(true, 'tx\\-(\\d+)', { 'font-size': [ '$1px' ] }),
-    expression(true, 'tx\\-lh\\-(\\d+)', { 'line-height': [ '$1px' ] }),
-    expression(true, 'tx\\-t\\-(\\d+)', { 'color': [ 'var(--tx-$1)' ] }),
-    expression(true, 'tx\\-h\\-([0-9a-f]{3,6})', { 'color': [ '#$1' ] }),
+    expression('tx\\-(\\d+)', { 'font-size': [ '$1px' ] }),
+    expression('tx\\-lh\\-(\\d+)', { 'line-height': [ '$1px' ] }),
+    expression('tx\\-t\\-(\\d+)', { 'color': [ 'var(--tx-$1)' ] }),
+    expression('tx\\-h\\-([0-9a-f]{3,6})', { 'color': [ '#$1' ] }),
   
     // Border
-    expression(true, 'bd\\-t\\-(\\d+)', { 'border-color': [ 'var(--bd-$1)' ] }),
-    expression(true, 'bd\\-h\\-([0-9a-f]{3,6})', { 'border-color': [ '#$1' ] }),
-    expression(true, 'curve\\-(\\d+)', { 'border-radius': [ '$1px', '$1px', '$1px', '$1px' ] }),
-    expression(true, 'curve\\-b\\-(\\d+)', { 'border-radius': [ '0', '0', '$1px', '$1px' ] }),
-    expression(true, 'curve\\-l\\-(\\d+)', { 'border-radius': [ '$1px', '0', '0', '$1px' ] }),
-    expression(true, 'curve\\-r\\-(\\d+)', { 'border-radius': [ '0', '$1px', '$1px', '0' ] }),
-    expression(true, 'curve\\-t\\-(\\d+)', { 'border-radius': [ '$1px', '$1px', '0', '0' ] }),
+    expression('bd\\-t\\-(\\d+)', { 'border-color': [ 'var(--bd-$1)' ] }),
+    expression('bd\\-h\\-([0-9a-f]{3,6})', { 'border-color': [ '#$1' ] }),
+    expression('curve\\-(\\d+)', { 'border-radius': [ '$1px', '$1px', '$1px', '$1px' ] }),
+    expression('curve\\-b\\-(\\d+)', { 'border-radius': [ '0', '0', '$1px', '$1px' ] }),
+    expression('curve\\-l\\-(\\d+)', { 'border-radius': [ '$1px', '0', '0', '$1px' ] }),
+    expression('curve\\-r\\-(\\d+)', { 'border-radius': [ '0', '$1px', '$1px', '0' ] }),
+    expression('curve\\-t\\-(\\d+)', { 'border-radius': [ '$1px', '$1px', '0', '0' ] }),
   
     // Margin
-    expression(true, 'm\\-(\\-{0,1}\\d+)', { margin: [ '$1px' ] }),
-    expression(true, 'mb\\-(\\-{0,1}\\d+)', { 'margin-bottom': [ '$1px' ] }),
-    expression(true, 'ml\\-(\\-{0,1}\\d+)', { 'margin-left': [ '$1px' ] }),
-    expression(true, 'mr\\-(\\-{0,1}\\d+)', { 'margin-right': [ '$1px' ] }),
-    expression(true, 'mt\\-(\\-{0,1}\\d+)', { 'margin-top': [ '$1px' ] }),
-    expression(true, 'mx\\-(\\-{0,1}\\d+)', {
+    expression('m\\-(\\-{0,1}\\d+)', { margin: [ '$1px' ] }),
+    expression('mb\\-(\\-{0,1}\\d+)', { 'margin-bottom': [ '$1px' ] }),
+    expression('ml\\-(\\-{0,1}\\d+)', { 'margin-left': [ '$1px' ] }),
+    expression('mr\\-(\\-{0,1}\\d+)', { 'margin-right': [ '$1px' ] }),
+    expression('mt\\-(\\-{0,1}\\d+)', { 'margin-top': [ '$1px' ] }),
+    expression('mx\\-(\\-{0,1}\\d+)', {
       'margin-left': [ '$1px' ],
       'margin-right': [ '$1px' ]
     }),
-    expression(true, 'my\\-(\\-{0,1}\\d+)', {
+    expression('my\\-(\\-{0,1}\\d+)', {
       'margin-top': [ '$1px' ],
       'margin-bottom': [ '$1px' ]
     }),
   
     // Padding
-    expression(true, 'p\\-(\\d+)', { padding: [ '$1px' ] }),
-    expression(true, 'pb\\-(\\d+)', { 'padding-bottom': [ '$1px' ] }),
-    expression(true, 'pl\\-(\\d+)', { 'padding-left': [ '$1px' ] }),
-    expression(true, 'pr\\-(\\d+)', { 'padding-right': [ '$1px' ] }),
-    expression(true, 'pt\\-(\\d+)', { 'padding-top': [ '$1px' ] }),
-    expression(true, 'px\\-(\\d+)', {
+    expression('p\\-(\\d+)', { padding: [ '$1px' ] }),
+    expression('pb\\-(\\d+)', { 'padding-bottom': [ '$1px' ] }),
+    expression('pl\\-(\\d+)', { 'padding-left': [ '$1px' ] }),
+    expression('pr\\-(\\d+)', { 'padding-right': [ '$1px' ] }),
+    expression('pt\\-(\\d+)', { 'padding-top': [ '$1px' ] }),
+    expression('px\\-(\\d+)', {
       'padding-left': [ '$1px' ],
       'padding-right': [ '$1px' ]
     }),
-    expression(true, 'py\\-(\\d+)', {
+    expression('py\\-(\\d+)', {
       'padding-top': [ '$1px' ],
       'padding-bottom': [ '$1px' ]
     }),
   
     //Animation
-    expression(true, 'transition\\-(\\d+)', { 'transition-duration': [ '$1ms' ] }),
+    expression('transition\\-(\\d+)', { 'transition-duration': [ '$1ms' ] }),
   
     // Box Shadow
     expression(
-      true, 
       'shadow\\-(\\d+)\\-(\\d+)\\-(\\d+)\\-(\\d+)\\-([0-9a-fA-F]{6})', 
       { 'box-shadow': [ '$1px $2px $3px $4px #$5' ] } 
     ),
     expression(
-      true, 
       'shadow\\-(\\d+)\\-(\\d+)\\-(\\d+)\\-(\\d+)\\-(\\d+)\\-(\\d+)\\-(\\d+)', 
       { 'box-shadow': [ '$1px $2px $3px rgb($4, $5, $6, 0.$7)' ] }
     ),
@@ -482,13 +506,13 @@ export function expressions(): ExpressionToken[] {
     // Size
     ...percents.map(
       //h-calc-full-99, h-calc-half-99, h-calc-third-99, h-calc-fourth-99, h-calc-fifth-99
-      ([ name, value ]) => expression(true, `h\\-calc\\-${name}-(\\d+)`, { 
+      ([ name, value ]) => expression(`h\\-calc\\-${name}-(\\d+)`, { 
         'height': [ `calc(${value}% - $1px)` ] 
       })
     ),
     ...percents.map(
       //w-calc-full-99, w-calc-half-99, w-calc-third-99, w-calc-fourth-99, w-calc-fifth-99
-      ([ name, value ]) => expression(true, `w\\-calc\\-${name}-(\\d+)`, { 
+      ([ name, value ]) => expression(`w\\-calc\\-${name}-(\\d+)`, { 
         'width': [ `calc(${value}% - $1px)` ] 
       })
     )
diff --git a/packages/temple-ui-src/src/compiler/helpers.ts b/packages/temple-ui-src/src/compiler/helpers.ts
index 86ec793..e27f36f 100644
--- a/packages/temple-ui-src/src/compiler/helpers.ts
+++ b/packages/temple-ui-src/src/compiler/helpers.ts
@@ -10,6 +10,9 @@ import StyleMap from './StyleMap';
 import StyleSet from './StyleSet';
 import StyleSheet from './StyleSheet';
 
+//before and after
+export const bna = [ 'before', 'after' ];
+
 //responsive names and breakpoints
 export const media = [
   'all', 'xl4', 'xl3', 
@@ -46,14 +49,12 @@ export const percents = Object.entries({
  * Helper to form a literal token.
  */
 export function literal(
-  responsive: boolean, 
   name: string, 
   records: StyleRecord
 ): LiteralToken {
   const styles = new StyleMap(Object.entries(records));
   return { 
     type: 'literal', 
-    responsive, 
     name, 
     styles
   };
@@ -63,7 +64,6 @@ export function literal(
  * Helper to form a range token.
  */
 export function range(
-  responsive: boolean, 
   name: string, 
   records: StyleRecord, 
   min: number, 
@@ -73,7 +73,6 @@ export function range(
   const styles = new StyleMap(Object.entries(records));
   return {
     type: 'range',
-    responsive,
     name,
     styles,
     range: [ min, max ],
@@ -85,14 +84,12 @@ export function range(
  * Helper to form an expression token.
  */
 export function expression(
-  responsive: boolean, 
   name: string, 
   records: StyleRecord 
 ): ExpressionToken {
   const styles = new StyleMap(Object.entries(records));
   return { 
     type: 'expression', 
-    responsive, 
     name, 
     styles
   };
diff --git a/packages/temple-ui-src/src/compiler/types.ts b/packages/temple-ui-src/src/compiler/types.ts
index 9626f66..32187d7 100644
--- a/packages/temple-ui-src/src/compiler/types.ts
+++ b/packages/temple-ui-src/src/compiler/types.ts
@@ -9,7 +9,6 @@ export type StyleRecord = Record<string, Value[]>;
 
 export type LiteralToken = {
   type: 'literal',
-  responsive: boolean,
   //class name
   name: string,
   styles: StyleMap
@@ -17,7 +16,6 @@ export type LiteralToken = {
 
 export type RangeToken = {
   type: 'range',
-  responsive: boolean,
   //class name
   name: string,
   styles: StyleMap,
@@ -27,7 +25,6 @@ export type RangeToken = {
 
 export type ExpressionToken = {
   type: 'expression',
-  responsive: boolean,
   //class name
   name: string,
   styles: StyleMap
diff --git a/packages/temple-ui-src/src/components/alert.tml b/packages/temple-ui-src/src/components/alert.tml
index de890f3..ad3e5a8 100644
--- a/packages/temple-ui-src/src/components/alert.tml
+++ b/packages/temple-ui-src/src/components/alert.tml
@@ -1,83 +1,95 @@
 <script>
-  import { props, children, component } from '@ossph/temple';
   // Separate component related props from field attributes
   const { 
-    curved,      rounded,   pill,    
-    info,        warning,   success, 
-    error,       muted,     primary, 
-    color,       secondary, outline, 
-    transparent, solid,
-    //dont need these
-    style,     'class': _,
-    //get the rest
-    ...attributes 
-  } = props();
+    curved, rounded,   pill,    
+    info,   warning,   success, 
+    error,  muted,     primary, 
+    color,  secondary, outline,
+    solid,  transparent
+  } = this.props;
 
   //get the host element
-  const host = component();
-  //make a alert
-  const alert = document.createElement('div');
-  //add children to the alert
-  children().forEach(child => alert.appendChild(child));
-
-  host.classList.add('block');
-  alert.classList.add('block', 'p-16');
-
+  const classes = this.className.split(' ');
+  const children = this.originalChildren;
+  //determine display
+  if (!classes.find(
+    classname => classname.includes('block')
+      || classname.includes('flex')
+      || classname.includes('none')
+      || classname.includes('inline')
+      || classname.includes('inline-block')
+  )) {
+    this.classList.add('block');
+  }
+  //determine padding
+  if (!classes.find(
+    classname => classname.includes('p-')
+      || classname.includes('px-')
+      || classname.includes('py-')
+      || classname.includes('pt-')
+      || classname.includes('pr-')
+      || classname.includes('pb-')
+      || classname.includes('pl-')
+  )) {
+    this.classList.add('p-16');
+  }
+  //determine curve
   if (curved) {
-    alert.classList.add('curved');
+    this.classList.add('curved');
   } else if (rounded) {
-    alert.classList.add('rounded');
+    this.classList.add('rounded');
   } else if (pill) {
-    alert.classList.add('pill');
+    this.classList.add('pill');
   }
-
+  //determine layout
   const layout = outline ? 'outline' 
     : transparent ? 'transparent'
     : solid  ? 'solid'
     : 'solid';
-
+  //if outline or transparent
   if (layout === 'outline' || layout === 'transparent') {
-    alert.classList.add('bd-solid', 'bd-thin');
+    this.classList.add('bd-solid', 'bd-thin');
     if (layout === 'outline') {
-      alert.classList.add('bg-white');
+      this.classList.add('bg-white');
     }
     if (color) {
-      alert.style.color = color;
-      alert.style.borderColor = color;
+      this.style.color = color;
+      this.style.borderColor = color;
     } else if (info) {
-      alert.classList.add('bd-info', 'tx-info');
+      this.classList.add('bd-info', 'tx-info');
     } else if (warning) {
-      alert.classList.add('bd-warning', 'tx-warning');
+      this.classList.add('bd-warning', 'tx-warning');
     } else if (success) {
-      alert.classList.add('bd-success', 'tx-success');
+      this.classList.add('bd-success', 'tx-success');
     } else if (error) {
-      alert.classList.add('bd-error', 'tx-error');
+      this.classList.add('bd-error', 'tx-error');
     } else if (muted) {
-      alert.classList.add('bd-muted', 'tx-muted');
+      this.classList.add('bd-muted', 'tx-muted');
     } else if (primary) {
-      alert.classList.add('bd-primary', 'tx-primary');
+      this.classList.add('bd-primary', 'tx-primary');
     } else if (secondary) {
-      alert.classList.add('bd-secondary', 'tx-secondary');
+      this.classList.add('bd-secondary', 'tx-secondary');
     }
+  //it's solid
   } else {
-    alert.classList.add('tx-white');
+    this.classList.add('tx-white');
     if (color) {
-      alert.style.backgroundColor = color;
+      this.style.backgroundColor = color;
     } else if (info) {
-      alert.classList.add('bg-info');
+      this.classList.add('bg-info');
     } else if (warning) {
-      alert.classList.add('bg-warning');
+      this.classList.add('bg-warning');
     } else if (success) {
-      alert.classList.add('bg-success');
+      this.classList.add('bg-success');
     } else if (error) {
-      alert.classList.add('bg-error');
+      this.classList.add('bg-error');
     } else if (muted) {
-      alert.classList.add('bg-muted');
+      this.classList.add('bg-muted');
     } else if (primary) {
-      alert.classList.add('bg-primary');
+      this.classList.add('bg-primary');
     } else if (secondary) {
-      alert.classList.add('bg-secondary');
+      this.classList.add('bg-secondary');
     }
   } 
 </script>
-{[ alert ]}
\ No newline at end of file
+{children}
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/badge.tml b/packages/temple-ui-src/src/components/badge.tml
index 1969f09..68d6f0f 100644
--- a/packages/temple-ui-src/src/components/badge.tml
+++ b/packages/temple-ui-src/src/components/badge.tml
@@ -1,83 +1,95 @@
 <script>
-  import { props, children, component } from '@ossph/temple';
   // Separate component related props from field attributes
   const { 
-    curved,      rounded,   pill,    
-    info,        warning,   success, 
-    error,       muted,     primary, 
-    color,       secondary, outline, 
-    transparent, solid,
-    //dont need these
-    style,     'class': _,
-    //get the rest
-    ...attributes 
-  } = props();
+    curved, rounded,   pill,    
+    info,   warning,   success, 
+    error,  muted,     primary, 
+    color,  secondary, outline,
+    solid,  transparent
+  } = this.props;
 
   //get the host element
-  const host = component();
-  //make a badge
-  const badge = document.createElement('span');
-  //add children to the badge
-  children().forEach(child => badge.appendChild(child));
-
-  host.classList.add('inline-block');
-  badge.classList.add('inline-block', 'px-8', 'py-2');
-
+  const classes = this.className.split(' ');
+  const children = this.originalChildren;
+  //determine display
+  if (!classes.find(
+    classname => classname.includes('block')
+      || classname.includes('flex')
+      || classname.includes('none')
+      || classname.includes('inline')
+      || classname.includes('inline-block')
+  )) {
+    this.classList.add('inline-block');
+  }
+  //determine padding
+  if (!classes.find(
+    classname => classname.includes('p-')
+      || classname.includes('px-')
+      || classname.includes('py-')
+      || classname.includes('pt-')
+      || classname.includes('pr-')
+      || classname.includes('pb-')
+      || classname.includes('pl-')
+  )) {
+    this.classList.add('px-8', 'py-2');
+  }
+  //determine curve
   if (curved) {
-    badge.classList.add('curved');
+    this.classList.add('curved');
   } else if (rounded) {
-    badge.classList.add('rounded');
+    this.classList.add('rounded');
   } else if (pill) {
-    badge.classList.add('pill');
+    this.classList.add('pill');
   }
-
+  //determine layout
   const layout = outline ? 'outline' 
     : transparent ? 'transparent'
     : solid  ? 'solid'
     : 'solid';
-
+  //if outline or transparent
   if (layout === 'outline' || layout === 'transparent') {
-    badge.classList.add('bd-solid', 'bd-thin');
+    this.classList.add('bd-solid', 'bd-thin');
     if (layout === 'outline') {
-      badge.classList.add('bg-white');
+      this.classList.add('bg-white');
     }
     if (color) {
-      badge.style.color = color;
-      badge.style.borderColor = color;
+      this.style.color = color;
+      this.style.borderColor = color;
     } else if (info) {
-      badge.classList.add('bd-info', 'tx-info');
+      this.classList.add('bd-info', 'tx-info');
     } else if (warning) {
-      badge.classList.add('bd-warning', 'tx-warning');
+      this.classList.add('bd-warning', 'tx-warning');
     } else if (success) {
-      badge.classList.add('bd-success', 'tx-success');
+      this.classList.add('bd-success', 'tx-success');
     } else if (error) {
-      badge.classList.add('bd-error', 'tx-error');
+      this.classList.add('bd-error', 'tx-error');
     } else if (muted) {
-      badge.classList.add('bd-muted', 'tx-muted');
+      this.classList.add('bd-muted', 'tx-muted');
     } else if (primary) {
-      badge.classList.add('bd-primary', 'tx-primary');
+      this.classList.add('bd-primary', 'tx-primary');
     } else if (secondary) {
-      badge.classList.add('bd-secondary', 'tx-secondary');
+      this.classList.add('bd-secondary', 'tx-secondary');
     }
+  //it's solid
   } else {
-    badge.classList.add('tx-white');
+    this.classList.add('tx-white');
     if (color) {
-      badge.style.backgroundColor = color;
+      this.style.backgroundColor = color;
     } else if (info) {
-      badge.classList.add('bg-info');
+      this.classList.add('bg-info');
     } else if (warning) {
-      badge.classList.add('bg-warning');
+      this.classList.add('bg-warning');
     } else if (success) {
-      badge.classList.add('bg-success');
+      this.classList.add('bg-success');
     } else if (error) {
-      badge.classList.add('bg-error');
+      this.classList.add('bg-error');
     } else if (muted) {
-      badge.classList.add('bg-muted');
+      this.classList.add('bg-muted');
     } else if (primary) {
-      badge.classList.add('bg-primary');
+      this.classList.add('bg-primary');
     } else if (secondary) {
-      badge.classList.add('bg-secondary');
+      this.classList.add('bg-secondary');
     }
   } 
 </script>
-{[ badge ]}
\ No newline at end of file
+{children}
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/field/input.tml b/packages/temple-ui-src/src/components/field/input.tml
index 1d37de0..0dfa286 100644
--- a/packages/temple-ui-src/src/components/field/input.tml
+++ b/packages/temple-ui-src/src/components/field/input.tml
@@ -1,45 +1,65 @@
-<style>
-  :host {
-    --black: #222222;
-    --error: #DC3545;
-  }
-  input {
-    border-color: var(--black);
-    border-style: solid;
-    border-width: 1px;
-    box-sizing: border-box;
-    color: var(--black);
-    padding-bottom: 8px;
-    padding-left: 8px;
-    padding-right: 8px;
-    padding-top: 8px;
-    width: 100%;
-  }
-  input.error {
-    border-color: var(--error);
-    color: var(--error);
-  }
-</style>
-<script>
-  import { props, classnames } from '@ossph/temple';
-  // Separate component related props from field attributes
-  const { 
-    error, 
-    change,
-    update,
-    ...attributes 
-  } = props();
-  const classes = (classnames() || '').split(' ');
-  if (error) {
-    classes.unshift('error');
-  }
+<script observe="error,disabled">
+  const host = this;
+  //helper to extract attributes
+  const attr = () => {
+    const { 
+      error = false, change, update,
+      //dont need these...
+      style, 'class': _,
+      //input attributes
+      ...attributes
+    } = host.props;
+    const classlist = [ 
+      'p-7', 
+      'bd-1', 
+      'block',
+      'bd-solid', 
+      'box-border', 
+      'w-full',
+      'h-full'
+    ];
+    if (error) {
+      classlist.push('bd-error', 'tx-error');
+    } else {
+      classlist.push('bd-black', 'tx-black');
+    }
+    attributes['class'] = classlist.join(' ');
+    return { error, change, update, classlist, attributes };
+  };
+  //get props
+  const { error, change, update, attributes } = attr();
+  const exclude = ['error', 'change', 'update', 'class', 'style'];
+  //handlers
   const onchange = e => {
     change && change(e);
     update && update(e.target.value);
   };
+  const onattr = e => {
+    const { action, name, prev, value, target } = e.detail;
+    const input = target.querySelector('input');
+    //set new class
+    if (name === 'error') {
+      if (action === 'remove') {
+        input.classList.remove('bd-error', 'tx-error');
+        input.classList.add('bd-black', 'tx-black');
+      } else {
+        input.classList.remove('bd-black', 'tx-black');
+        input.classList.add('bd-error', 'tx-error');
+      }
+      return;
+      //dont update if these are the names
+    } else if (!input || exclude.includes(name)) {
+      return;
+    }
+    switch (action) {
+      case 'add':
+      case 'update':
+        input.setAttribute(name, value);
+        break;
+      case 'remove':
+        input.removeAttribute(name);
+        break;
+    }
+  }
 </script>
-<input 
-  {...attributes} 
-  class={classname.join(' ')}
-  change={onchange} 
-/>
\ No newline at end of file
+<input {...attributes} attr={onattr} change={onchange} />
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/field/textarea.tml b/packages/temple-ui-src/src/components/field/textarea.tml
index b2e7fd8..e88a975 100644
--- a/packages/temple-ui-src/src/components/field/textarea.tml
+++ b/packages/temple-ui-src/src/components/field/textarea.tml
@@ -1,45 +1,69 @@
-<style>
-  :host {
-    --black: #222222;
-    --error: #DC3545;
-  }
-  textarea {
-    border-color: var(--black);
-    border-style: solid;
-    border-width: 1px;
-    box-sizing: border-box;
-    color: var(--black);
-    padding-bottom: 8px;
-    padding-left: 8px;
-    padding-right: 8px;
-    padding-top: 8px;
-    width: 100%;
-  }
-  textarea.error {
-    border-color: var(--error);
-    color: var(--error);
-  }
-</style>
-<script>
-  import { props, classnames, innerHTML } from '@ossph/temple';
-  // Separate component related props from field attributes
-  const { 
-    error, 
-    change,
-    update,
-    ...attributes 
-  } = props();
-  const classes = (classnames() || '').split(' ');
-  if (error) {
-    classes.unshift('error');
-  }
+<script observe="error,disabled">
+  const host = this;
+  //helper to extract attributes
+  const attr = () => {
+    const { 
+      error = false, change, update,
+      //dont need these...
+      style, 'class': _,
+      //input attributes
+      ...attributes
+    } = host.props;
+    const classlist = [ 
+      'p-7', 
+      'bd-1', 
+      'block',
+      'bd-solid', 
+      'box-border', 
+      'w-full',
+      'h-full',
+      'tx-inherit'
+    ];
+    if (error) {
+      classlist.push('bd-error', 'tx-error');
+    } else {
+      classlist.push('bd-black', 'tx-black');
+    }
+    attributes['class'] = classlist.join(' ');
+    return { error, change, update, classlist, attributes };
+  };
+  //get props
+  const { error, change, update, attributes } = attr();
+  const exclude = ['error', 'change', 'update', 'class', 'style'];
+  const children = host.originalChildren;
+  //handlers
   const onchange = e => {
     change && change(e);
     update && update(e.target.value);
   };
+  const onattr = e => {
+    const { action, name, prev, value, target } = e.detail;
+    const input = target.querySelector('input');
+    //set new class
+    if (name === 'error') {
+      if (action === 'remove') {
+        input.classList.remove('bd-error', 'tx-error');
+        input.classList.add('bd-black', 'tx-black');
+      } else {
+        input.classList.remove('bd-black', 'tx-black');
+        input.classList.add('bd-error', 'tx-error');
+      }
+      return;
+      //dont update if these are the names
+    } else if (!input || exclude.includes(name)) {
+      return;
+    }
+    switch (action) {
+      case 'add':
+      case 'update':
+        input.setAttribute(name, value);
+        break;
+      case 'remove':
+        input.removeAttribute(name);
+        break;
+    }
+  }
 </script>
-<textarea 
-  {...attributes} 
-  class={classname.join(' ')}
-  change={onchange} 
->{innerHTML}</textarea>
\ No newline at end of file
+<textarea {...attributes} attr={onattr} change={onchange}>{
+  children
+}</textarea>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/form/button.tml b/packages/temple-ui-src/src/components/form/button.tml
index cf89456..4875657 100644
--- a/packages/temple-ui-src/src/components/form/button.tml
+++ b/packages/temple-ui-src/src/components/form/button.tml
@@ -1,5 +1,10 @@
 <script>
-  import { props, children, component } from '@ossph/temple';
+  import { 
+    props, 
+    classnames, 
+    children, 
+    component 
+  } from '@ossph/temple';
   // Separate component related props from field attributes
   const { 
     block,     full,    color,
@@ -19,6 +24,7 @@
 
   //get the host element
   const host = component();
+  const classes = classnames().split(' ');
   //make a button
   const button =  document.createElement(href ? 'a' : 'button');
   //add attributes to the button
@@ -30,38 +36,47 @@
   }
   //add children to the button
   children().forEach(child => button.appendChild(child));
-
+  //default styles
   button.classList.add(
-    'inline-block', 
     'tx-center', 
     'tx-nodecor', 
     'cursor-pointer'
   );
-
+  //determine display
   if (block) {
     host.classList.add('block');
     button.classList.add('block');
+  } else if (classes.find(classname => classname.includes('block'))) {
+    button.classList.add('block');
+  } else if (classes.find(classname => classname.includes('flex'))) {
+    button.classList.add('flex');
+  } else if (classes.find(classname => classname.includes('none'))) {
+    button.classList.add('none');
+  } else if (classes.find(classname => classname.includes('inline'))) {
+    button.classList.add('inline');
+  } else if (classes.find(classname => classname.includes('inline-block'))) {
+    button.classList.add('inline-block');
   } else {
     host.classList.add('inline-block');
     button.classList.add('inline-block');
   }
+  //determine size
   if (full) {
     host.classList.add('w-full');
     button.classList.add('w-full');
   }
-
-  //determine size
-  const size = xs ? button.classList.add('py-2', 'px-4')
-    : sm ? button.classList.add('py-4', 'px-8')
-    : md ? button.classList.add('py-6', 'px-12')
-    : lg ? button.classList.add('py-8', 'px-16')
-    : xl ? button.classList.add('py-10', 'px-20')
-    : xl2 ? button.classList.add('py-12', 'px-24')
-    : xl3 ? button.classList.add('py-14', 'px-28')
-    : xl4 ? button.classList.add('py-16', 'px-32')
-    : xl5 ? button.classList.add('py-18', 'px-36')
-    : button.classList.add('py-6', 'px-12');
-
+  //determine padding by size
+  xs ? button.classList.add('py-2', 'px-4')
+  : sm ? button.classList.add('py-5', 'px-10')
+  : md ? button.classList.add('py-8', 'px-16')
+  : lg ? button.classList.add('py-12', 'px-24')
+  : xl ? button.classList.add('py-15', 'px-30')
+  : xl2 ? button.classList.add('py-18', 'px-36')
+  : xl3 ? button.classList.add('py-22', 'px-44')
+  : xl4 ? button.classList.add('py-26', 'px-52')
+  : xl5 ? button.classList.add('py-30', 'px-60')
+  : null;
+  //determine curve
   if (curved) {
     button.classList.add('curved');
   } else if (rounded) {
@@ -69,12 +84,12 @@
   } else if (pill) {
     button.classList.add('pill');
   }
-
+  //determine layout
   const layout = outline ? 'outline' 
     : transparent ? 'transparent'
     : solid  ? 'solid'
     : 'solid';
-
+  //if layout is outline or transparent
   if (layout === 'outline' || layout === 'transparent') {
     button.classList.add('bd-solid', 'bd-thin');
     if (layout === 'outline') {
@@ -100,6 +115,7 @@
     } else if (secondary) {
       button.classList.add('bd-secondary', 'tx-secondary');
     }
+  //it's solid
   } else {
     button.classList.add('bd-0', 'tx-white');
     if (color) {
diff --git a/packages/temple-ui-src/src/components/form/control.tml b/packages/temple-ui-src/src/components/form/control.tml
index 4486aaa..a727d89 100644
--- a/packages/temple-ui-src/src/components/form/control.tml
+++ b/packages/temple-ui-src/src/components/form/control.tml
@@ -5,9 +5,9 @@
   classlist().add('block');
 </script>
 <if true={!!label}>
-  <label class="block">{label}</label>
+  <label class="block pb-3">{label}</label>
 </if>
-<div>{children}</div>
+<div>{children()}</div>
 <if true={!!error && error?.length > 0}>
-  <div class="tx-error">{error}</div>
+  <div class="tx-error pt-3">{error}</div>
 </if>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/icon.tml b/packages/temple-ui-src/src/components/icon.tml
index c510525..03472ec 100644
--- a/packages/temple-ui-src/src/components/icon.tml
+++ b/packages/temple-ui-src/src/components/icon.tml
@@ -1,7 +1,6 @@
 <script>
-  import { props, classlist, children } from '@ossph/temple';
-  const { name, block = false } = props();
-  classlist().add(
+  const { name, block = false } = this.props;
+  this.classList.add(
     'fa', 
     'fa-fw', 
     `fa-${name}`, 
diff --git a/packages/temple-ui-src/src/components/loader.tml b/packages/temple-ui-src/src/components/loader.tml
index 648ee22..299a66c 100644
--- a/packages/temple-ui-src/src/components/loader.tml
+++ b/packages/temple-ui-src/src/components/loader.tml
@@ -1,5 +1,4 @@
 <script>
-  import { props, classlist } from '@ossph/temple';
   const { 
     color,
     speed = 1000,
@@ -15,40 +14,43 @@
     muted,
     primary,
     secondary
-  } = props();
-  classlist().add('inline-block', 'inline-block', 'mr-5');
-  const styles = [
-    `width: ${size}px`, 
-    `height: ${size}px`,
-    `border-width: ${thickness}px`,
-    `border-style: ${dotted ? 'dotted' : dashed ? 'dashed' : 'solid'}`,
-    `animation-duration: ${speed}ms`,
-  ];
+  } = this.props;
+  //make an icon
+  const icon =  document.createElement('i');
+  //default classes
+  icon.classList.add('tui-loader');
+  this.classList.add('inline-block', 'mr-5');
+  //default styles
+  icon.style.width = `${size}px`;
+  icon.style.height = `${size}px`;
+  icon.style.borderWidth = `${thickness}px`;
+  icon.style.borderStyle = dotted ? 'dotted' : dashed ? 'dashed' : 'solid';
+  icon.style.animationDuration = `${speed}ms`;
   if (color) {
-    styles.push(`border-color: ${color}`);
+    icon.style.borderColor = color;
   } else if (info) {
-    styles.push(`border-color: var(--info)`);
+    icon.classList.add('bd-info');
   } else if (warning) {
-    styles.push(`border-color: var(--warning)`);
+    icon.classList.add('bd-warning');
   } else if (success) {
-    styles.push(`border-color: var(--success)`);
+    icon.classList.add('bd-success');
   } else if (error) {
-    styles.push(`border-color: var(--error)`);
+    icon.classList.add('bd-error');
   } else if (muted) {
-    styles.push(`border-color: var(--muted)`);
+    icon.classList.add('bd-muted');
   } else if (primary) {
-    styles.push(`border-color: var(--primary)`);
+    icon.classList.add('bd-primary');
   } else if (secondary) {
-    styles.push(`border-color: var(--secondary)`);
+    icon.classList.add('bd-secondary');
   }
   if (slice > 0) {
-    styles.push(`border-right-color: transparent`);
+    icon.classList.add('bdr-transparent');
   } 
   if (slice > 1) {
-    styles.push(`border-bottom-color: transparent`);
+    icon.classList.add('bdb-transparent');
   } 
   if (slice > 2) {
-    styles.push(`border-left-color: transparent`);
+    icon.classList.add('bdl-transparent');
   }
 </script>
-<i class="tui-loader" style={styles.join(';')}></i>
\ No newline at end of file
+{[ icon ]}
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/panel.tml b/packages/temple-ui-src/src/components/panel.tml
index 847da5f..106f507 100644
--- a/packages/temple-ui-src/src/components/panel.tml
+++ b/packages/temple-ui-src/src/components/panel.tml
@@ -1,54 +1,152 @@
 <script>
-  import { children, classlist, TempleRegistry } from '@ossph/temple';
-
-  classlist().add('relative', 'w-full', 'vh', 'scroll-hidden');
-  
-  const panels = children();
-  
-  const main = panels.find(panel => panel.nodeName.endsWith('PANEL-MAIN'));
-  const head = panels.find(panel => panel.nodeName.endsWith('PANEL-HEAD'));
-  const foot = panels.find(panel => panel.nodeName.endsWith('PANEL-FOOT'));
-  const left = panels.find(panel => panel.nodeName.endsWith('PANEL-LEFT'));
-  const right = panels.find(panel => panel.nodeName.endsWith('PANEL-RIGHT'));
-
-  const layout = {
-    head: !!head,
-    foot: !!foot,
-    left: !!left,
-    right: !!right,
+  //panels are this component's direct children
+  const panels = this.originalChildren;
+  //panel sections
+  const section = {
+    main: panels.find(panel => panel.nodeName === 'MAIN'),
+    head: panels.find(panel => panel.nodeName === 'HEADER'),
+    foot: panels.find(panel => panel.nodeName === 'FOOTER'),
+    left: panels.find(panel => panel.nodeName === 'ASIDE' && panel.hasAttribute('left')),
+    right: panels.find(panel => panel.nodeName === 'ASIDE' && panel.hasAttribute('right'))
   };
-
-  const listeners = new Set<() => void>();
-
-  const show = {
-    left: false,
-    right: false,
-    change: (listener: () => void) => listeners.add(listener),
-  };
-
-  main && TempleRegistry.get(main)
-    .setAttribute('show', show)
-    .setAttribute('layout', layout);
-
-  head && TempleRegistry.get(head)
-    .setAttribute('show', show)
-    .setAttribute('layout', layout);
-
-  foot && TempleRegistry.get(foot)
-    .setAttribute('show', show)
-    .setAttribute('layout', layout);
-  
-  left && TempleRegistry.get(left)
-    .setAttribute('show', show)
-    .setAttribute('layout', layout);
-
-  right && TempleRegistry.get(right)
-    .setAttribute('show', show)
-    .setAttribute('layout', layout);
-
+  //states
+  const show = { left: false, right: false };
+  //this can be accessed by other components like this
+  //document.querySelector('panel-layout').toggle('left');
   this.toggle = panel => {
     show[panel] = !show[panel];
-    listeners.forEach(listener => listener());
+    setClassNames.all()
+  };
+  //class name logic
+  const setClassNames = {
+    all() {
+      section.main && this.main();
+      section.head && this.head();
+      section.foot && this.foot();
+      section.left && this.left();
+      section.right && this.right();
+    },
+    head() {
+      const { classList } = section.head;
+      classList.add('absolute', 'top-0', 'right-0', 'h-60', 'transition-500');
+      if (section.left) {
+        classList.remove('left-0');
+        classList.add('left-226');
+      } else {
+        classList.remove('left-226');
+        classList.add('left-0');
+      }
+      if (show.left) {
+        classList.remove('md-left-0');
+        classList.add('md-left-226');
+      } else {
+        classList.remove('md-left-226');
+        classList.add('md-left-0');
+      }
+    },
+    foot() {
+      const { classList } = section.foot;
+      classList.add('absolute', 'bottom-0', 'right-0', 'h-60', 'transition-500');
+      if (section.left) {
+        classList.remove('left-0');
+        classList.add('left-226');
+      } else {
+        classList.remove('left-226');
+        classList.add('left-0');
+      }
+      if (show.left) {
+        classList.remove('md-left-0');
+        classList.add('md-left-226');
+      } else {
+        classList.remove('md-left-226');
+        classList.add('md-left-0');
+      }
+    },
+    left() {
+      const { classList } = section.left;
+      classList.add('w-226', 'absolute', 'bottom-0', 'left-0', 'top-0', 'transition-500');
+      if (show.left) {
+        classList.remove('md-left--226');
+        classList.add('md-left-0');
+      } else {
+        classList.remove('md-left-0');
+        classList.add('md-left--226');
+      }
+    },
+    right() {
+      const { classList } = section.right;
+      classList.add('w-200', 'absolute', 'right-0', 'transition-500');
+      if (section.foot) {
+        classList.remove('bottom-0');
+        classList.add('bottom-60');
+      } else {
+        classList.remove('bottom-60');
+        classList.add('bottom-0');
+      }
+      if (section.head) {
+        classList.remove('top-0');
+        classList.add('top-60');
+      } else {
+        classList.remove('top-60');
+        classList.add('top-0');
+      }
+      if (show.right) {
+        classList.remove('lg-right--200');
+        classList.add('lg-right-0');
+      } else {
+        classList.remove('lg-right-0');
+        classList.add('lg-right--200');
+      }
+    },
+    main() {
+      const { classList } = section.main;
+      classList.add('absolute', 'transition-500');
+      if (section.head) {
+        classList.remove('top-0');
+        classList.add('top-60');
+      } else {
+        classList.remove('top-60');
+        classList.add('top-0');
+      }
+      if (section.foot) {
+        classList.remove('bottom-0');
+        classList.add('bottom-60');
+      } else {
+        classList.remove('bottom-60');
+        classList.add('bottom-0');
+      }
+      if (section.left) {
+        classList.remove('left-0');
+        classList.add('left-226');
+      } else {
+        classList.remove('left-226');
+        classList.add('left-0');
+      }
+      if (section.right) {
+        classList.remove('right-0');
+        classList.add('right-200');
+      } else {
+        classList.remove('right-200');
+        classList.add('right-0');
+      }
+      if (show.left) {
+        classList.remove('md-left-0');
+        classList.add('md-left-226');
+      } else {
+        classList.remove('md-left-226');
+        classList.add('md-left-0');
+      }
+      if (show.right) {
+        classList.remove('lg-right-0');
+        classList.add('lg-right-200');
+      } else {
+        classList.remove('lg-right-200');
+        classList.add('lg-right-0');
+      }
+    }
   };
+  //initial setup
+  setClassNames.all();
+  this.classList.add('relative', 'w-full', 'vh', 'scroll-hidden');
 </script>
 {panels}
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/panel/foot.tml b/packages/temple-ui-src/src/components/panel/foot.tml
deleted file mode 100644
index a20f227..0000000
--- a/packages/temple-ui-src/src/components/panel/foot.tml
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-  import { children, classlist } from '@ossph/temple';
-  const { layout, show } = this.element.attributes;
-  const classes = classlist();
-  const setClassNames = _ => {
-    this.classList.add('absolute', 'bottom-0', 'right-0', 'h-60', 'transition-500');
-    if (layout?.left) {
-      classes.remove('left-0');
-      classes.add('left-226');
-    } else {
-      classes.add('left-0');
-    }
-    if (show.left) {
-      classes.remove('md-left-0');
-      classes.add('md-left-226');
-    } else {
-      classes.remove('md-left-226');
-      classes.add('md-left-0');
-    }
-  };
-
-  show.change(setClassNames);
-  setClassNames();
-</script>
-<footer class="block h-full w-full relative">{children()}</footer>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/panel/head.tml b/packages/temple-ui-src/src/components/panel/head.tml
deleted file mode 100644
index 8953080..0000000
--- a/packages/temple-ui-src/src/components/panel/head.tml
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-  import { children, classlist } from '@ossph/temple';
-  const { layout, show } = this.element.attributes;
-  const classes = classlist();
-  const setClassNames = _ => {
-    this.classList.add('absolute', 'top-0', 'right-0', 'h-60', 'transition-500');
-    if (layout?.left) {
-      this.classList.remove('left-0');
-      this.classList.add('left-226');
-    } else {
-      this.classList.add('left-0');
-    }
-    if (show.left) {
-      this.classList.remove('md-left-0');
-      this.classList.add('md-left-226');
-    } else {
-      this.classList.remove('md-left-226');
-      this.classList.add('md-left-0');
-    }
-  };
-
-  show.change(setClassNames);
-  setClassNames();
-</script>
-<header class="block w-full h-full relative">{children()}</header>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/panel/left.tml b/packages/temple-ui-src/src/components/panel/left.tml
deleted file mode 100644
index cc21275..0000000
--- a/packages/temple-ui-src/src/components/panel/left.tml
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-  import { children, classlist } from '@ossph/temple';
-  const { layout, show } = this.element.attributes;
-  const classes = classlist();
-  const setClassNames = _ => {
-    this.classList.add('w-226', 'absolute', 'bottom-0', 'left-0', 'top-0', 'transition-500');
-    if (show.left) {
-      this.classList.remove('md-left--226');
-      this.classList.add('md-left-0');
-    } else {
-      this.classList.add('md-left--226');
-    }
-  };
-
-  show.change(setClassNames);
-  setClassNames();
-</script>
-<aside class="block w-full h-full relative">{children()}</aside>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/panel/main.tml b/packages/temple-ui-src/src/components/panel/main.tml
deleted file mode 100644
index f56e356..0000000
--- a/packages/temple-ui-src/src/components/panel/main.tml
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-  import { children, classlist } from '@ossph/temple';
-  const { layout, show } = this.element.attributes;
-  const classes = classlist();
-  const setClassNames = _ => {
-    this.classList.add('absolute', 'transition-500');
-    if (layout?.head) {
-      this.classList.remove('top-0');
-      this.classList.add('top-60');
-    } else {
-      this.classList.add('top-0');
-    }
-    if (layout?.foot) {
-      this.classList.remove('bottom-0');
-      this.classList.add('bottom-60');
-    } else {
-      this.classList.add('bottom-0');
-    }
-    if (layout?.left) {
-      this.classList.remove('left-0');
-      this.classList.add('left-226');
-    } else {
-      this.classList.add('left-0');
-    }
-    if (layout?.right) {
-      this.classList.remove('right-0');
-      this.classList.add('right-200');
-    } else {
-      this.classList.add('right-0');
-    }
-    if (show.left) {
-      this.classList.remove('md-left-0');
-      this.classList.add('md-left-226');
-    } else {
-      this.classList.remove('md-left-226');
-      this.classList.add('md-left-0');
-    }
-    if (show.right) {
-      this.classList.remove('md-right-0');
-      this.classList.add('md-right-200');
-    } else {
-      this.classList.remove('md-right-200');
-      this.classList.add('md-right-0');
-    }
-  };
-
-  show.change(setClassNames);
-  setClassNames();
-</script>
-<main class="block w-full h-full relative">{children()}</main>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/panel/right.tml b/packages/temple-ui-src/src/components/panel/right.tml
deleted file mode 100644
index acf74be..0000000
--- a/packages/temple-ui-src/src/components/panel/right.tml
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-  import { children, classlist } from '@ossph/temple';
-  const { layout, show } = this.element.attributes;
-  const classes = classlist();
-  const setClassNames = _ => {
-    this.classList.add('w-200', 'absolute', 'right-0', 'transition-500');
-    if (layout?.foot) {
-      this.classList.remove('bottom-0');
-      this.classList.add('bottom-60');
-    } else {
-      this.classList.add('bottom-0');
-    }
-    if (layout?.head) {
-      this.classList.remove('top-0');
-      this.classList.add('top-60');
-    } else {
-      this.classList.add('top-0');
-    }
-    if (show.right) {
-      this.classList.remove('md-right--200');
-      this.classList.add('md-right-0');
-    } else {
-      this.classList.add('md-right--200');
-    }
-  };
-
-  show.change(setClassNames);
-  setClassNames();
-</script>
-<aside class="block w-full h-full relative">{children()}</aside>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/tab.tml b/packages/temple-ui-src/src/components/tab.tml
index db1c721..e7c298e 100644
--- a/packages/temple-ui-src/src/components/tab.tml
+++ b/packages/temple-ui-src/src/components/tab.tml
@@ -1,5 +1,4 @@
-<script accept="group,">
-  import { props, component, children } from '@ossph/temple';
+<script>
   const { 
     group, 
     selector = '',
@@ -10,18 +9,18 @@
     'class': _,
     //get the rest
     ...attributes 
-  } = props();
+  } = this.props;
 
-  const tab = component();
+  const children = this.originalChildren;
   const activeList = active.split(' ');
   const inactiveList = inactive.split(' ');
 
-  tab.classList.add('cursor-pointer');
+  this.classList.add('cursor-pointer');
 
   const init = () => {
-    const on = tab.hasAttribute('on');
-    tab.classList.remove(...(on ? inactiveList : activeList));
-    tab.classList.add(...(on ? activeList : inactiveList));
+    const on = this.hasAttribute('on');
+    this.classList.remove(...(on ? inactiveList : activeList));
+    this.classList.add(...(on ? activeList : inactiveList));
     //find all the content elements that this tab controls
     //and either show or hide it based on the active state
     Array.from(document.querySelectorAll(selector)).forEach(content => {
@@ -59,9 +58,8 @@
       }
       
     });
-    
   };
 </script>
 <a {...attributes} class="block h-full w-full" click=activate mount=init>
-  {children()}
+  {children}
 </a>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/table.tml b/packages/temple-ui-src/src/components/table.tml
new file mode 100644
index 0000000..6afa2da
--- /dev/null
+++ b/packages/temple-ui-src/src/components/table.tml
@@ -0,0 +1,88 @@
+<link rel="import" type="component" href="./table/thead.tml" name="table-thead" />
+<link rel="import" type="component" href="./table/tbody.tml" name="table-tbody" />
+<link rel="import" type="component" href="./table/tfoot.tml" name="table-tfoot" />
+<script>
+  const { top, bottom, left, right } = this.props;
+  const sticky = top || bottom || left || right;
+  const rows: Node[] = [];
+  const headers: Node[] = [];
+  const footers: Node[] = [];
+  const children = this.originalChildren;
+  const state = { mounted: false };
+  if (sticky) {
+    this.classList.add('block', 'relative', 'scroll-auto', 'w-full');
+  } else {
+    this.classList.add('table', 'w-full');
+  }
+
+  for (const [ i, child ] of children.entries()) {
+    if (child.nodeName.includes('HEAD')) {
+      if (top) {
+        child.classList.add('sticky', 'top-0', 'z-1');
+      }
+      headers.push(child);
+    } else if (child.nodeName.includes('FOOT')) {
+      if (bottom) {
+        child.classList.add('sticky', 'bottom-0', 'z-1');
+      }
+      footers.push(child);
+    } else if (child.nodeName.includes('ROW')) {
+      if (child.childElementCount > 1) {
+        const first = child.firstElementChild;
+        const last = child.lastElementChild;
+        if (left && first) {
+          first.classList.add('sticky', 'left-0', 'z-2');
+        } 
+        if (right && last) {
+          last.classList.add('sticky', 'right-0', 'z-2');
+        }
+      }
+      rows.push(child);
+    }
+  }
+
+  if (headers.length > 1) {
+    const first = headers[0];
+    const last = headers[headers.length - 1];
+    if (left && first) {
+      first.classList.add('sticky', 'left-0', 'z-3');
+    } 
+    if (right && last) {
+      last.classList.add('sticky', 'right-0', 'z-3');
+    }
+  }
+
+  if (footers.length > 1) {
+    const first = footers[0];
+    const last = footers[footers.length - 1];
+    if (left && first) {
+      first.classList.add('sticky', 'left-0', 'z-3');
+    } 
+    if (right && last) {
+      last.classList.add('sticky', 'right-0', 'z-3');
+    }
+  }
+</script>
+<if true={sticky}>
+  <div class="table">
+    <if true={headers.length > 0}>
+      <table-thead>{headers}</table-thead>
+    </if>
+    <if true={rows.length > 0}>
+      <table-tbody>{rows}</table-tbody>
+    </if>
+    <if true={footers.length > 0}>
+      <table-tfoot>{footers}</table-tfoot>
+    </if>
+  </div>
+<else />
+  <if true={headers.length > 0}>
+    <table-thead>{headers}</table-thead>
+  </if>
+  <if true={rows.length > 0}>
+    <table-tbody>{rows}</table-tbody>
+  </if>
+  <if true={footers.length > 0}>
+    <table-tfoot>{footers}</table-tfoot>
+  </if>
+</if>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/table/col.tml b/packages/temple-ui-src/src/components/table/col.tml
new file mode 100644
index 0000000..dd5f5c4
--- /dev/null
+++ b/packages/temple-ui-src/src/components/table/col.tml
@@ -0,0 +1,31 @@
+<script>
+  const { 
+    nowrap, 
+    'wrap-1': wrap1,
+    'wrap-2': wrap2,
+    'wrap-3': wrap3,
+    'wrap-4': wrap4,
+    'wrap-5': wrap5 
+  } = this.props;
+  const children = this.originalChildren;
+  this.classList.add(
+    'table-cell', 'py-16', 'px-12', 
+    'bdx-0',      'bdb-0', 'bdt-1', 
+    'bd-solid'
+  );
+  if (nowrap) {
+    this.classList.add('tx-nowrap');
+  }
+</script>
+{children}
+<if true={wrap1}>
+  <div class="w-100 h-1"></div>
+<elif true={wrap2} />
+  <div class="w-200 h-1"></div>
+<elif true={wrap3} />
+  <div class="w-300 h-1"></div>
+<elif true={wrap4} />
+  <div class="w-400 h-1"></div>
+<elif true={wrap5} />
+  <div class="w-500 h-1"></div>
+</if>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/table/foot.tml b/packages/temple-ui-src/src/components/table/foot.tml
new file mode 100644
index 0000000..8ed99bc
--- /dev/null
+++ b/packages/temple-ui-src/src/components/table/foot.tml
@@ -0,0 +1,27 @@
+<script>
+  const { 
+    nowrap, 
+    'wrap-1': wrap1,
+    'wrap-2': wrap2,
+    'wrap-3': wrap3,
+    'wrap-4': wrap4,
+    'wrap-5': wrap5 
+  } = this.props;
+  const children = this.originalChildren;
+  this.classList.add('table-cell', 'py-16', 'px-12');
+  if (nowrap) {
+    this.classList.add('tx-nowrap');
+  }
+</script>
+{children}
+<if true={wrap1}>
+  <div class="w-100 h-1"></div>
+<elif true={wrap2} />
+  <div class="w-200 h-1"></div>
+<elif true={wrap3} />
+  <div class="w-300 h-1"></div>
+<elif true={wrap4} />
+  <div class="w-400 h-1"></div>
+<elif true={wrap5} />
+  <div class="w-500 h-1"></div>
+</if>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/table/head.tml b/packages/temple-ui-src/src/components/table/head.tml
new file mode 100644
index 0000000..8ed99bc
--- /dev/null
+++ b/packages/temple-ui-src/src/components/table/head.tml
@@ -0,0 +1,27 @@
+<script>
+  const { 
+    nowrap, 
+    'wrap-1': wrap1,
+    'wrap-2': wrap2,
+    'wrap-3': wrap3,
+    'wrap-4': wrap4,
+    'wrap-5': wrap5 
+  } = this.props;
+  const children = this.originalChildren;
+  this.classList.add('table-cell', 'py-16', 'px-12');
+  if (nowrap) {
+    this.classList.add('tx-nowrap');
+  }
+</script>
+{children}
+<if true={wrap1}>
+  <div class="w-100 h-1"></div>
+<elif true={wrap2} />
+  <div class="w-200 h-1"></div>
+<elif true={wrap3} />
+  <div class="w-300 h-1"></div>
+<elif true={wrap4} />
+  <div class="w-400 h-1"></div>
+<elif true={wrap5} />
+  <div class="w-500 h-1"></div>
+</if>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/table/row.tml b/packages/temple-ui-src/src/components/table/row.tml
new file mode 100644
index 0000000..c7221cd
--- /dev/null
+++ b/packages/temple-ui-src/src/components/table/row.tml
@@ -0,0 +1,12 @@
+<script>
+  const { col } = this.props;
+  const children = this.originalChildren;
+  this.classList.add('table-row');
+  if (typeof col === 'string') {
+    const classList = col.split(' ').filter(col => col.length > 0);
+    if (classList.length > 0) {
+      children.forEach(child => child.classList?.add(...classList));
+    }
+  }
+</script>
+{children}
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/table/tbody.tml b/packages/temple-ui-src/src/components/table/tbody.tml
new file mode 100644
index 0000000..4a656dc
--- /dev/null
+++ b/packages/temple-ui-src/src/components/table/tbody.tml
@@ -0,0 +1,5 @@
+<script>
+  const children = this.originalChildren;
+  this.classList.add('table-row-group');
+</script>
+{children}
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/table/tfoot.tml b/packages/temple-ui-src/src/components/table/tfoot.tml
new file mode 100644
index 0000000..9fb6f21
--- /dev/null
+++ b/packages/temple-ui-src/src/components/table/tfoot.tml
@@ -0,0 +1,6 @@
+<link rel="import" type="component" href="./row.tml" name="table-row" />
+<script>
+  const children = this.originalChildren;
+  this.classList.add('table-footer-group');
+</script>
+<table-row>{children}</table-row>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/components/table/thead.tml b/packages/temple-ui-src/src/components/table/thead.tml
new file mode 100644
index 0000000..6b86c90
--- /dev/null
+++ b/packages/temple-ui-src/src/components/table/thead.tml
@@ -0,0 +1,6 @@
+<link rel="import" type="component" href="./row.tml" name="table-row" />
+<script>
+  const children = this.originalChildren;
+  this.classList.add('table-header-group');
+</script>
+<table-row>{children}</table-row>
\ No newline at end of file
diff --git a/packages/temple-ui-src/src/styles/grid.css b/packages/temple-ui-src/src/styles/grid.css
deleted file mode 100644
index 3268b28..0000000
--- a/packages/temple-ui-src/src/styles/grid.css
+++ /dev/null
@@ -1,85 +0,0 @@
-.tui-tbl {
-  border-collapse: collapse;
-  display: table;
-  width: 100%;
-}
-
-.tui-tbl-scroll {
-  overflow: auto;
-  flex-grow: 1;
-  height: 100%;
-  width: 100%;
-}
-
-.tui-tbl-nowrap {
-  white-space: nowrap;
-}
-
-.tui-tbl-z0 {
-  z-index: 0;
-}
-.tui-tbl-z1 {
-  z-index: 1;
-}
-.tui-tbl-z2 {
-  z-index: 2;
-}
-.tui-tbl-z3 {
-  z-index: 3;
-}
-.tui-tbl-z4 {
-  z-index: 4;
-}
-
-.tui-tbl-sticky {
-  position: sticky;
-}
-.tui-tbl-sticky-b {
-  bottom: 0;
-}
-.tui-tbl-sticky-l {
-  left: 0;
-}
-.tui-tbl-sticky-t {
-  top: 0;
-}
-.tui-tbl-sticky-r {
-  right: 0;
-}
-
-.tui-tbl-col {
-  border-color: black;
-  border-style: solid;
-  border-top-width: 1px;
-  padding-bottom: 16px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 16px;
-}
-
-.tui-tbl-foot {
-  border-color: black;
-  border-style: solid;
-  border-top-width: 1px;
-  padding-bottom: 16px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 16px;
-}
-
-.tui-tbl-row {
-  padding-bottom: 16px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 16px;
-}
-
-.tui-tbl-head {
-  border-color: black;
-  border-style: solid;
-  border-top-width: 1px;
-  padding-bottom: 16px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 16px;
-}
\ No newline at end of file