From ed9d7c0878a9fe485bb4f5d85372b4ed2bb61293 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:07:41 -0600
Subject: [PATCH 01/38] remove containerless yay

---
 src/layouts/l-box-link/l-box-link.ts | 3 +--
 src/layouts/l-box/l-box.css          | 1 +
 src/layouts/l-box/l-box.ts           | 3 +--
 src/layouts/l-center/l-center.ts     | 3 +--
 src/layouts/l-cluster/l-cluster.ts   | 3 +--
 src/layouts/l-cover/l-cover.ts       | 3 +--
 src/layouts/l-grid/l-grid.ts         | 3 +--
 src/layouts/l-sidebar/l-sidebar.ts   | 3 +--
 src/layouts/l-stack/l-stack.ts       | 3 +--
 src/layouts/l-switcher/l-switcher.ts | 3 +--
 10 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/layouts/l-box-link/l-box-link.ts b/src/layouts/l-box-link/l-box-link.ts
index d58ccd05..84c8a5bf 100644
--- a/src/layouts/l-box-link/l-box-link.ts
+++ b/src/layouts/l-box-link/l-box-link.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from '../l-box/l-box.css.json';
 
-@containerless
 export class LBoxLink {
     @bindable
     public background = 'var(--c_darkGray)';
diff --git a/src/layouts/l-box/l-box.css b/src/layouts/l-box/l-box.css
index 6a3a06c5..5355cdfe 100644
--- a/src/layouts/l-box/l-box.css
+++ b/src/layouts/l-box/l-box.css
@@ -32,6 +32,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
     padding-left:  var(--box-padding-sides);
     background: var(--box-background);
     color: var(--box-color);
+    display: block;
 }
 
 .border-top{
diff --git a/src/layouts/l-box/l-box.ts b/src/layouts/l-box/l-box.ts
index 431bdb07..10108ad0 100644
--- a/src/layouts/l-box/l-box.ts
+++ b/src/layouts/l-box/l-box.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-box.css.json';
 
-@containerless
 export class LBox {
     @bindable
     public background = 'var(--c_darkGray)';
diff --git a/src/layouts/l-center/l-center.ts b/src/layouts/l-center/l-center.ts
index 34da378b..4d57f601 100644
--- a/src/layouts/l-center/l-center.ts
+++ b/src/layouts/l-center/l-center.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-center.css.json';
 
-@containerless
 export class LCenter {
     @bindable
     public intrinsic = false;
diff --git a/src/layouts/l-cluster/l-cluster.ts b/src/layouts/l-cluster/l-cluster.ts
index 47890d22..3b33304b 100644
--- a/src/layouts/l-cluster/l-cluster.ts
+++ b/src/layouts/l-cluster/l-cluster.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-cluster.css.json';
 
-@containerless
 export class LCluster {
     @bindable
     public align = 'center';
diff --git a/src/layouts/l-cover/l-cover.ts b/src/layouts/l-cover/l-cover.ts
index 92628921..5f8f6214 100644
--- a/src/layouts/l-cover/l-cover.ts
+++ b/src/layouts/l-cover/l-cover.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-cover.css.json';
 
-@containerless
 export class LCover {
     @bindable
     public center = false;
diff --git a/src/layouts/l-grid/l-grid.ts b/src/layouts/l-grid/l-grid.ts
index 41816695..03a2a15e 100644
--- a/src/layouts/l-grid/l-grid.ts
+++ b/src/layouts/l-grid/l-grid.ts
@@ -3,12 +3,11 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import {generateRandom} from '../../helpers/generate-random';
 import {lazyLoadCheck} from '../../helpers/lazy-load-check';
 import * as styles from './l-grid.css.json';
 
-@containerless
 export class LGrid {
     @bindable
     public actions;
diff --git a/src/layouts/l-sidebar/l-sidebar.ts b/src/layouts/l-sidebar/l-sidebar.ts
index 23d21007..2c9e2294 100644
--- a/src/layouts/l-sidebar/l-sidebar.ts
+++ b/src/layouts/l-sidebar/l-sidebar.ts
@@ -3,11 +3,10 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import {generateRandom} from '../../helpers/generate-random';
 import * as styles from './l-sidebar.css.json';
 
-@containerless
 export class LSidebar {
     @bindable
     public contentMin = '65%';
diff --git a/src/layouts/l-stack/l-stack.ts b/src/layouts/l-stack/l-stack.ts
index fe191ad8..3e3c99c7 100644
--- a/src/layouts/l-stack/l-stack.ts
+++ b/src/layouts/l-stack/l-stack.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-stack.css.json';
 
-@containerless
 export class LStack {
     @bindable
     public list;
diff --git a/src/layouts/l-switcher/l-switcher.ts b/src/layouts/l-switcher/l-switcher.ts
index 1ccf81dd..8dc48786 100644
--- a/src/layouts/l-switcher/l-switcher.ts
+++ b/src/layouts/l-switcher/l-switcher.ts
@@ -3,10 +3,9 @@ Copyright 2020, Verizon Media
 Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
 */
 
-import {bindable, containerless} from 'aurelia-framework';
+import {bindable} from 'aurelia-framework';
 import * as styles from './l-switcher.css.json';
 
-@containerless
 export class LSwitcher {
     @bindable
     public doubleWidth;

From 596e52c9ae2e908d825ec57ff86d07ed1f28d81b Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:09:03 -0600
Subject: [PATCH 02/38] docs clean up

---
 .../forms/add-remove/properties/index.html    |  2 -
 .../forms/select/properties/index.html        | 12 +++--
 .../routes/layouts/grid/properties/index.html | 50 ++++++++++---------
 dev-app/routes/layouts/stack/index.html       |  2 +-
 dev-app/routes/layouts/switcher/index.html    | 33 ++++++------
 .../forms/c-disabled/c-disabled.css           |  2 +-
 6 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/dev-app/routes/components/forms/add-remove/properties/index.html b/dev-app/routes/components/forms/add-remove/properties/index.html
index 99cc7285..8ed6ab25 100644
--- a/dev-app/routes/components/forms/add-remove/properties/index.html
+++ b/dev-app/routes/components/forms/add-remove/properties/index.html
@@ -30,7 +30,6 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
-            <br>
         </div>
 
         <c-divider></c-divider>
@@ -50,7 +49,6 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
-            <br>
         </div>
 
         <c-divider></c-divider>
diff --git a/dev-app/routes/components/forms/select/properties/index.html b/dev-app/routes/components/forms/select/properties/index.html
index 81e1f523..d4a56ed8 100644
--- a/dev-app/routes/components/forms/select/properties/index.html
+++ b/dev-app/routes/components/forms/select/properties/index.html
@@ -60,11 +60,13 @@
     }];
 }</c-code>
                 <c-code-sample>
-                    <l-grid min-size="25ch">
-                        <c-form-select select-value.bind="vSelectOutput" options.bind="testOptions" label="Select Label" error-msg="This is an error"></c-form-select>
-                        <c-form-select options.bind="testOptions" error-msg="This is an error"></c-form-select>
-                    </l-grid>
-                    <c-p>select: ${vSelectOutput}</c-p>
+                    <l-stack spacing="var(--s0)">
+                        <l-grid min-size="25ch">
+                            <c-form-select select-value.bind="vSelectOutput" options.bind="testOptions" label="Select Label" error-msg="This is an error"></c-form-select>
+                            <c-form-select options.bind="testOptions" error-msg="This is an error"></c-form-select>
+                        </l-grid>
+                        <c-p>select: ${vSelectOutput}</c-p>
+                    </l-stack>
                 </c-code-sample>
             </l-stack>
         </div>
diff --git a/dev-app/routes/layouts/grid/properties/index.html b/dev-app/routes/layouts/grid/properties/index.html
index 1c89ffbb..0d6c55a9 100644
--- a/dev-app/routes/layouts/grid/properties/index.html
+++ b/dev-app/routes/layouts/grid/properties/index.html
@@ -52,21 +52,22 @@
             <l-stack spacing="var(--s-3)">
                 <c-h3>gap</c-h3>
                 <c-code-sample>
-                    <l-grid gap="var(--s5)">
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                        <l-box>Third Item</l-box>
-                        <l-box>Fourth Item</l-box>
-                        <l-box>Fifth Item</l-box>
-                    </l-grid>
-
-                    <l-grid gap="0px">
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                        <l-box>Third Item</l-box>
-                        <l-box>Fourth Item</l-box>
-                        <l-box>Fifth Item</l-box>
-                    </l-grid>
+                    <l-stack>
+                        <l-grid gap="var(--s5)">
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                            <l-box>Third Item</l-box>
+                            <l-box>Fourth Item</l-box>
+                            <l-box>Fifth Item</l-box>
+                        </l-grid>
+                        <l-grid gap="0px">
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                            <l-box>Third Item</l-box>
+                            <l-box>Fourth Item</l-box>
+                            <l-box>Fifth Item</l-box>
+                        </l-grid>
+                    </l-stack>
                 </c-code-sample>
             </l-stack>
         </div>
@@ -77,15 +78,16 @@
             <l-stack spacing="var(--s-3)">
                 <c-h3>auto-sizing</c-h3>
                 <c-code-sample>
-                    <l-grid>
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                    </l-grid>
-
-                    <l-grid auto-sizing="auto-fill">
-                        <l-box>First Item</l-box>
-                        <l-box>Second Item</l-box>
-                    </l-grid>
+                    <l-stack>
+                        <l-grid>
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                        </l-grid>
+                        <l-grid auto-sizing="auto-fill">
+                            <l-box>First Item</l-box>
+                            <l-box>Second Item</l-box>
+                        </l-grid>
+                    </l-stack>
                 </c-code-sample>
             </l-stack>
         </div>
diff --git a/dev-app/routes/layouts/stack/index.html b/dev-app/routes/layouts/stack/index.html
index af2fab5f..6243b138 100644
--- a/dev-app/routes/layouts/stack/index.html
+++ b/dev-app/routes/layouts/stack/index.html
@@ -118,7 +118,7 @@
 
             <c-divider></c-divider>
 
-            <div>
+            <div style="height: 500px;">
                 <l-stack spacing="var(--s-3)">
                     <c-h3>Split After</c-h3>
                     <c-code-sample class="example">
diff --git a/dev-app/routes/layouts/switcher/index.html b/dev-app/routes/layouts/switcher/index.html
index 9f97d7e0..2b5bd9b7 100644
--- a/dev-app/routes/layouts/switcher/index.html
+++ b/dev-app/routes/layouts/switcher/index.html
@@ -38,7 +38,7 @@
             <c-divider></c-divider>
 
             <div>
-                <l-stack spacing="var(-s-3)">
+                <l-stack spacing="var(--s-3)">
                     <c-h3>double-width</c-h3>
                     <c-code-sample>
                         <l-switcher double-width="second">
@@ -53,7 +53,7 @@
             <c-divider></c-divider>
 
             <div>
-                <l-stack spacing="var(-s-3)">
+                <l-stack spacing="var(--s-3)">
                     <c-h3>limit</c-h3>
                     <c-code-sample>
                         <l-switcher limit="three">
@@ -69,20 +69,21 @@
             <c-divider></c-divider>
 
             <div>
-                <l-stack spacing="var(-s-3)">
+                <l-stack spacing="var(--s-3)">
                     <c-h3>spacing</c-h3>
                     <c-code-sample>
-                        <l-switcher spacing="var(--s5)">
-                            <l-box>First Item</l-box>
-                            <l-box>Second Item</l-box>
-                            <l-box>Third Item</l-box>
-                        </l-switcher>
-
-                        <l-switcher spacing="0px">
-                            <l-box>First Item</l-box>
-                            <l-box>Second Item</l-box>
-                            <l-box>Third Item</l-box>
-                        </l-switcher>
+                        <l-stack>
+                            <l-switcher spacing="var(--s5)">
+                                <l-box>First Item</l-box>
+                                <l-box>Second Item</l-box>
+                                <l-box>Third Item</l-box>
+                            </l-switcher>
+                            <l-switcher spacing="0px">
+                                <l-box>First Item</l-box>
+                                <l-box>Second Item</l-box>
+                                <l-box>Third Item</l-box>
+                            </l-switcher>
+                        </l-stack>
                     </c-code-sample>
                 </l-stack>
             </div>
@@ -90,7 +91,7 @@
             <c-divider></c-divider>
 
             <div>
-                <l-stack spacing="var(-s-3)">
+                <l-stack spacing="var(--s-3)">
                     <c-h3>threshold</c-h3>
                     <c-code-sample>
                         <l-stack>
@@ -99,13 +100,11 @@
                                 <l-box>Second Item</l-box>
                                 <l-box>Third Item</l-box>
                             </l-switcher>
-
                             <l-switcher threshold="50rem">
                                 <l-box>First Item</l-box>
                                 <l-box>Second Item</l-box>
                                 <l-box>Third Item</l-box>
                             </l-switcher>
-
                             <l-switcher threshold="60rem">
                                 <l-box>First Item</l-box>
                                 <l-box>Second Item</l-box>
diff --git a/src/components/forms/c-disabled/c-disabled.css b/src/components/forms/c-disabled/c-disabled.css
index 5e985cd1..7fb1b115 100644
--- a/src/components/forms/c-disabled/c-disabled.css
+++ b/src/components/forms/c-disabled/c-disabled.css
@@ -21,7 +21,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 
 .disabled{
     display: inline-block;
-    margin-top: 8px;
+    margin-top: 6px;
     color: var(--c_subOneMain);
     font-style: italic;
     word-break: break-word;

From a9bc676794635b6afe1d7d74e24cc32c59c21e6a Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:14:49 -0600
Subject: [PATCH 03/38] c-form-select and c-form-add-remove fixes

---
 .../c-form-add-remove/c-form-add-remove.css   | 14 +++++++---
 .../select/c-form-select/c-form-select.css    |  3 ++-
 .../select/c-form-select/c-form-select.html   | 26 +++++++++++--------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/forms/select/c-form-add-remove/c-form-add-remove.css b/src/components/forms/select/c-form-add-remove/c-form-add-remove.css
index 4ae12f3c..72e628d1 100644
--- a/src/components/forms/select/c-form-add-remove/c-form-add-remove.css
+++ b/src/components/forms/select/c-form-add-remove/c-form-add-remove.css
@@ -22,7 +22,6 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 .container{
     display: flex;
     justify-content: space-between;
-    height: 100%;
 }
 
 .container c-form-select{
@@ -31,17 +30,24 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
     flex: 1;
 }
 
-.container c-form-select > div:nth-child(2){
+.container c-form-select > l-stack{
     height: 100%;
 }
 
+.container l-stack > div{
+    height: unset;
+}
+
 .container select,
 .container > div{
     flex: 1;
 }
 
-.container > div{
-    justify-content: center;
+.container > l-stack{
     flex: 0;
     margin: 20px var(--s-2) 0;
 }
+
+.container > l-stack > div{
+    justify-content: center;
+}
diff --git a/src/components/forms/select/c-form-select/c-form-select.css b/src/components/forms/select/c-form-select/c-form-select.css
index 354054fa..370a8ad7 100644
--- a/src/components/forms/select/c-form-select/c-form-select.css
+++ b/src/components/forms/select/c-form-select/c-form-select.css
@@ -40,6 +40,7 @@ c-form-select{
     -moz-appearance: none;
     display: block;
     width: 100%;
+    height: unset;
     padding: var(--s-5) var(--s-3);
     border: solid 1px var(--c_black);
     border-radius: 0;
@@ -157,7 +158,7 @@ select.error{
 
 .loader{
     position: absolute;
-    top: 60px;
+    top: 25px;
     bottom: 0;
     width: 100%;
     min-height: 109px;
diff --git a/src/components/forms/select/c-form-select/c-form-select.html b/src/components/forms/select/c-form-select/c-form-select.html
index 06d955ac..aea432f8 100644
--- a/src/components/forms/select/c-form-select/c-form-select.html
+++ b/src/components/forms/select/c-form-select/c-form-select.html
@@ -12,9 +12,12 @@
         </c-label>
         <slot name="tip"></slot>
     </div>
-    <l-stack spacing="var(--s-3)">
+    <l-stack
+        spacing="var(--s-3)"
+        if.bind="_state !== 'disabled'"
+    >
         <c-form-text
-            if.bind="search && _state !== 'hidden' && _state !== 'disabled'"
+            if.bind="search && _state !== 'hidden'"
             text-value.bind="searchText"
             class="${styles.search}"
             clearable.bind="true"
@@ -23,7 +26,7 @@
             button-action.call="searchSelect(textValue)">
         </c-form-text>
         <select
-            if.bind="!isLoading && _state !== 'hidden' && _state !== 'disabled'"
+            if.bind="!isLoading && _state !== 'hidden'"
             class="${styles.select}  ${styles[_state]}  ${multiple ? styles.multiple : ''}"
             value.bind="selectValue"
             multiple.bind="multiple"
@@ -32,14 +35,15 @@
             <option if.bind="!simple" repeat.for="option of filteredOptions" value="${option.value}">${option.text}</option>
             <option if.bind="simple" repeat.for="option of filteredOptions" value="${option}">${option}</option>
         </select>
-        <div if.bind="reorder">
-            <l-cluster spacing="var(--s-3)">
-                <div>
-                    <c-button size="small" color="neutral" icon="chevron-up" icon-position="center" click.trigger="moveItems(-1)" state="${selectValue.length ? '': 'disabled'}"></c-button>
-                    <c-button size="small" color="neutral" icon="chevron-down" icon-position="center" click.trigger="moveItems(1)" state="${selectValue.length ? '': 'disabled'}"></c-button>
-                </div>
-            </l-cluster>
-        </div>
+        <l-cluster
+            spacing="var(--s-3)"
+            if.bind="reorder"
+        >
+            <div>
+                <c-button size="small" color="neutral" icon="chevron-up" icon-position="center" click.trigger="moveItems(-1)" state="${selectValue.length ? '': 'disabled'}"></c-button>
+                <c-button size="small" color="neutral" icon="chevron-down" icon-position="center" click.trigger="moveItems(1)" state="${selectValue.length ? '': 'disabled'}"></c-button>
+            </div>
+        </l-cluster>
     </l-stack>
     <div class="${isLoading ? styles.loader : ''}  ${isLoadingMore ? styles.loadingMore : ''}" if.bind="(isLoading || isLoadingMore) && multiple">
         <c-spinner size="small"></c-spinner>

From f7c0af592a90cd6509d68f904ba714a63872d579 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:22:13 -0600
Subject: [PATCH 04/38] c-button code clean up

---
 src/components/buttons/c-button/c-button.html | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/buttons/c-button/c-button.html b/src/components/buttons/c-button/c-button.html
index e0ca1c63..a2c462a4 100644
--- a/src/components/buttons/c-button/c-button.html
+++ b/src/components/buttons/c-button/c-button.html
@@ -8,19 +8,35 @@
 
     <button
         disabled.bind="_state === 'thinking' || _state === 'disabled'"
-        hide.bind="title || _state === 'hidden'"
         class="${styles.button}  ${styles[color]}  ${styles[size]}  ${styles[_state]}  ${icon ? styles.icon : ''}  ${styles[iconPosition]}"
         click.trigger="actionFunction()"
         type="${type}"
+        hide.bind="title || _state === 'hidden'"
     >
-        <c-icon if.bind="showLeftIcon()" icon="${icon}"></c-icon>
+        <c-icon
+            icon="${icon}"
+            if.bind="showLeftIcon()"
+        ></c-icon>
         <slot></slot>
-        <c-icon if.bind="showRightOrCenterIcon()" icon="${icon}"></c-icon>
+        <c-icon
+            if.bind="showRightOrCenterIcon()"
+            icon="${icon}"
+        ></c-icon>
     </button>
-
-    <a href.bind="href" if.bind="title && _state !== 'hidden'" target="${targetNew ? '_blank' : '_self'}" class="${styles.button}  ${styles[color]}  ${styles[size]}  ${styles[_state]}  ${icon ? styles.icon : ''}  ${styles[iconPosition]}">
-        <c-icon if.bind="showLeftIcon()" icon="${icon}"></c-icon>
+    <a
+        href.bind="href"
+        target="${targetNew ? '_blank' : '_self'}"
+        class="${styles.button}  ${styles[color]}  ${styles[size]}  ${styles[_state]}  ${icon ? styles.icon : ''}  ${styles[iconPosition]}"
+        if.bind="title && _state !== 'hidden'"
+    >
+        <c-icon
+            if.bind="showLeftIcon()"
+            icon="${icon}"
+        ></c-icon>
         ${title}
-        <c-icon if.bind="showRightOrCenterIcon()" icon="${icon}"></c-icon>
+        <c-icon
+            if.bind="showRightOrCenterIcon()"
+            icon="${icon}"
+        ></c-icon>
     </a>
 </template>

From ec7af629a9a7b92acff444a163317a514f919fe7 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:27:36 -0600
Subject: [PATCH 05/38] c-copy html clean up

---
 src/components/copy/c-copy/c-copy.html | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/copy/c-copy/c-copy.html b/src/components/copy/c-copy/c-copy.html
index 12b60641..d12f66b9 100644
--- a/src/components/copy/c-copy/c-copy.html
+++ b/src/components/copy/c-copy/c-copy.html
@@ -17,8 +17,19 @@
             <div class="${styles.content}  ${wrap ? styles.wrap : ''}  ${!link ? '' : styles.hide}">
                 ${content}
             </div>
-            <a class="${styles.content}  ${wrap ? styles.wrap : ''}  ${link ? '' : styles.hide}" href="${content}" target="_blank">${content}</a>
-            <c-button color="neutral" click.delegate="copy(content)">Copy</c-button>
+            <a
+                class="${styles.content}  ${wrap ? styles.wrap : ''}  ${link ? '' : styles.hide}"
+                href="${content}"
+                target="_blank"
+            >
+                ${content}
+            </a>
+            <c-button
+                color="neutral"
+                click.delegate="copy(content)"
+            >
+                Copy
+            </c-button>
         </div>
     </div>
 </template>

From 8d0140c8a6333840ebed1f9b8ad4b005964c033e Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:32:09 -0600
Subject: [PATCH 06/38] c-form-image html clean up

---
 .../forms/c-form-image/c-form-image.html         | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/c-form-image/c-form-image.html b/src/components/forms/c-form-image/c-form-image.html
index c80a677f..d3936039 100644
--- a/src/components/forms/c-form-image/c-form-image.html
+++ b/src/components/forms/c-form-image/c-form-image.html
@@ -6,18 +6,28 @@
 <template>
 	<require from="./c-form-image.css"></require>
 
-    <label for="${id}" class="${styles.label}  ${styles[state]}">
+    <label
+        for="${id}"
+        class="${styles.label}  ${styles[state]}"
+    >
         <div class="${styles.container}">
             <div class="${styles.image}">
                 <div class="${styles.center}">
-                    <img src="${imageUrl}" alt="${id}">
+                    <img
+                        src="${imageUrl}"
+                        alt="${id}"
+                    >
                 </div>
             </div>
             <div class="${styles.input}">
                 <div class="${styles.inputCover}"></div>
                 <l-cluster spacing="var(--s-4)">
                     <div>
-                        <c-radio-input name="${name}" id="${id}" checked.bind="checked"></c-radio-input>
+                        <c-radio-input
+                            name="${name}"
+                            id="${id}"
+                            checked.bind="checked"
+                        ></c-radio-input>
                         <span class="${styles.desc}">${description}</span>
                     </div>
                 </l-cluster>

From 1b783af66607c8967a88c0d5b786d0f20c423430 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:39:31 -0600
Subject: [PATCH 07/38] c-form-radio-container html clean up

---
 src/components/forms/c-label/c-label.html     | 22 +++++++++++++---
 .../c-form-checkbox-radio-container.html      | 25 +++++++++++++++----
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/forms/c-label/c-label.html b/src/components/forms/c-label/c-label.html
index 43ec6110..66bb4e2a 100644
--- a/src/components/forms/c-label/c-label.html
+++ b/src/components/forms/c-label/c-label.html
@@ -7,9 +7,25 @@
 	<require from="./c-label.css"></require>
 
     <label class="${styles.label}  ${styles[state]}">
-        <c-icon icon="${icon}" color="${labelIconColor}" if.bind="icon"></c-icon>
+        <c-icon
+            icon="${icon}"
+            color="${labelIconColor}"
+            if.bind="icon"
+        ></c-icon>
         <slot></slot>
-        <span class="${styles.edit}" click.trigger="editingActionFunction()" if.bind="editable && notEditing">Edit</span>
-        <span class="${styles.edit}  ${styles.done}" click.trigger="doneEditingActionFunction()" if.bind="editable && editing">Done</span>
+        <span
+            class="${styles.edit}"
+            click.trigger="editingActionFunction()"
+            if.bind="editable && notEditing"
+        >
+            Edit
+        </span>
+        <span
+            class="${styles.edit}  ${styles.done}"
+            click.trigger="doneEditingActionFunction()"
+            if.bind="editable && editing"
+        >
+            Done
+        </span>
     </label>
 </template>
diff --git a/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html b/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html
index cbc950be..f41337f6 100644
--- a/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html
+++ b/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html
@@ -7,19 +7,34 @@
 	<require from="./c-form-checkbox-radio-container.css"></require>
 
     <l-stack spacing="var(--s-4)">
-        <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && _state !== 'disabled' && label">
+        <div
+            class="${styles.labelWrapper}"
+            show.bind="_state !== 'hidden' && _state !== 'disabled' && label"
+        >
             <c-label state="${_state}">
                 ${label}
             </c-label>
             <slot name="tip"></slot>
         </div>
-
-        <div class="${styles[layout]}  ${label === undefined ? styles.noLabel : ''}  js-input-list" show.bind="_state !== 'hidden' && _state !== 'disabled'">
+        <div
+            class="${styles[layout]}  ${label === undefined ? styles.noLabel : ''}  js-input-list"
+            show.bind="_state !== 'hidden' && _state !== 'disabled'"
+        >
             <l-stack spacing="var(--s-4)">
                 <slot></slot>
             </l-stack>
         </div>
-        <c-form-error state="${_state}" if.bind="_state !== 'hidden' && _state !== 'disabled' && errorMsg">${errorMsg}</c-form-error>
-        <c-form-warning state="${_state}" if.bind="_state !== 'hidden' && _state !== 'disabled' && warningMsg">${warningMsg}</c-form-warning>
+        <c-form-error
+            state="${_state}"
+            if.bind="_state !== 'hidden' && _state !== 'disabled' && errorMsg"
+        >
+            ${errorMsg}
+        </c-form-error>
+        <c-form-warning
+            state="${_state}"
+            if.bind="_state !== 'hidden' && _state !== 'disabled' && warningMsg"
+        >
+            ${warningMsg}
+        </c-form-warning>
     </l-stack>
 </template>

From 1a3b3fa66afb282c4e1caeaac098d1f68d1eff62 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:40:45 -0600
Subject: [PATCH 08/38] c-checkbox-input html clean up

---
 .../checkbox/c-checkbox-input/c-checkbox-input.html      | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html b/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html
index cc1dee21..26b735c8 100644
--- a/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html
+++ b/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html
@@ -6,5 +6,12 @@
 <template>
 	<require from="./c-checkbox-input.css"></require>
 
-    <input disabled.bind="state === 'disabled'" id="${id}" type="checkbox" class="${styles.check}  ${state === 'disabled' ? styles.disabled : ''}" checked.bind="checkedValue" change.delegate="valueChanged()">
+    <input
+        disabled.bind="state === 'disabled'"
+        id="${id}"
+        type="checkbox"
+        class="${styles.check}  ${state === 'disabled' ? styles.disabled : ''}"
+        checked.bind="checkedValue"
+        change.delegate="valueChanged()"
+    >
 </template>

From f98fd9dbbcdf264772b06c871662514f1370f91a Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:45:35 -0600
Subject: [PATCH 09/38] c-label-checkbox

---
 .../checkbox/c-checkbox-label/c-checkbox-label.html        | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html b/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html
index ac31ca54..d93c693a 100644
--- a/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html
+++ b/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html
@@ -6,5 +6,10 @@
 <template>
 	<require from="./c-checkbox-label.css"></require>
 
-    <label class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}" for="${id}"><slot></slot></label>
+    <label
+        class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}"
+        for="${id}"
+    >
+        <slot></slot>
+    </label>
 </template>

From 54467fd1e303a41dcd305da1d8e424820cfe5128 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:54:19 -0600
Subject: [PATCH 10/38] c-form-checkbox html clean up

---
 .../checkbox/c-form-checkbox/c-form-checkbox.css   |  1 +
 .../checkbox/c-form-checkbox/c-form-checkbox.html  | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.css b/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.css
index 261499e2..3de93a90 100644
--- a/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.css
+++ b/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.css
@@ -22,6 +22,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 .draggable{
     height: 15px;
     width: 11px;
+    margin-bottom: 0 !important;
     vertical-align: top;
 }
 
diff --git a/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.html b/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.html
index a0488b5f..d19b3ace 100644
--- a/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.html
+++ b/src/components/forms/checkbox-radio/checkbox/c-form-checkbox/c-form-checkbox.html
@@ -17,8 +17,18 @@
                     class="${styles.draggable}"
                     drag-options.bind="dragOptions"
                 ></c-drag-handle>
-                <c-checkbox-input id="${id}" checked-value.bind="checkedValue" state="${_state}" on-change.call="valueChanged(val)"></c-checkbox-input>
-                <c-checkbox-label id="${id}" state="${_state}"><slot></slot></c-checkbox-label>
+                <c-checkbox-input
+                    id="${id}"
+                    checked-value.bind="checkedValue"
+                    state="${_state}"
+                    on-change.call="valueChanged(val)"
+                ></c-checkbox-input>
+                <c-checkbox-label
+                    id="${id}"
+                    state="${_state}"
+                >
+                    <slot></slot>
+                </c-checkbox-label>
             </div>
         </l-cluster>
     </div>

From 55f65da065622493702e0d3ace484cd39d50ab56 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:57:09 -0600
Subject: [PATCH 11/38] c-form-radio html clean up

---
 .../radio/c-form-radio/c-form-radio.html          | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/forms/checkbox-radio/radio/c-form-radio/c-form-radio.html b/src/components/forms/checkbox-radio/radio/c-form-radio/c-form-radio.html
index 005ca817..0da08e02 100644
--- a/src/components/forms/checkbox-radio/radio/c-form-radio/c-form-radio.html
+++ b/src/components/forms/checkbox-radio/radio/c-form-radio/c-form-radio.html
@@ -7,8 +7,19 @@
     <div show.bind="_state !== 'hidden'">
         <l-cluster spacing="var(--s-5)">
             <div>
-                <c-radio-input name="${name}" id="${id}" checked.bind="checked" state="${_state}"></c-radio-input>
-                <c-radio-label name="${name}" id="${id}" state="${_state}"><slot></slot></c-radio-label>
+                <c-radio-input
+                    name="${name}"
+                    id="${id}"
+                    checked.bind="checked"
+                    state="${_state}"
+                ></c-radio-input>
+                <c-radio-label
+                    name="${name}"
+                    id="${id}"
+                    state="${_state}"
+                >
+                    <slot></slot>
+                </c-radio-label>
             </div>
         </l-cluster>
     </div>

From 40607117435c49d03032ffcd89974de8224b45bd Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 16:58:44 -0600
Subject: [PATCH 12/38] c-radio-input html clean up

---
 .../radio/c-radio-input/c-radio-input.html            | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html b/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html
index b0d87684..35b4da56 100644
--- a/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html
+++ b/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html
@@ -6,5 +6,14 @@
 <template>
 	<require from="./c-radio-input.css"></require>
 
-    <input disabled.bind="state === 'disabled'" id.bind="id" id="${id}" name="${name}" type="radio" class="${styles.radio}  ${state === 'disabled' ? styles.disabled : ''}  js-radio" checked.bind="checked" model="${id}">
+    <input
+        disabled.bind="state === 'disabled'"
+        id.bind="id"
+        id="${id}"
+        name="${name}"
+        type="radio"
+        class="${styles.radio}  ${state === 'disabled' ? styles.disabled : ''}  js-radio"
+        checked.bind="checked"
+        model="${id}"
+    >
 </template>

From caa835ad72ee9ffa89e35367c1316828518d04c3 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 17:03:32 -0600
Subject: [PATCH 13/38] c-radio-label html clean up

---
 .../checkbox-radio/radio/c-radio-label/c-radio-label.html  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html b/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html
index 24827c6e..68ef4924 100644
--- a/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html
+++ b/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html
@@ -6,5 +6,10 @@
 <template>
 	<require from="./c-radio-label.css"></require>
 
-    <label class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}" for="${id}"><slot></slot></label>
+    <label
+        class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}"
+        for="${id}"
+    >
+        <slot></slot>
+    </label>
 </template>

From d14ab50d5c0abac5680d1177176abbfe7de8c19d Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 17:06:26 -0600
Subject: [PATCH 14/38] c-form-toggle html clean up

---
 .../toggle/c-form-toggle/c-form-toggle.html   | 20 ++++++++++++++++---
 .../toggle/c-toggle-input/c-toggle-input.html | 10 +++++++++-
 .../toggle/c-toggle-label/c-toggle-label.html |  7 ++++++-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/checkbox-radio/toggle/c-form-toggle/c-form-toggle.html b/src/components/forms/checkbox-radio/toggle/c-form-toggle/c-form-toggle.html
index 54b4452d..0d9c812f 100644
--- a/src/components/forms/checkbox-radio/toggle/c-form-toggle/c-form-toggle.html
+++ b/src/components/forms/checkbox-radio/toggle/c-form-toggle/c-form-toggle.html
@@ -5,8 +5,22 @@
 
 <template>
 	<require from="./c-form-toggle.css"></require>
-    <div show.bind="_state !== 'hidden'" class="${styles.base}">
-        <c-toggle-input id="${id}" checked-value.bind="checkedValue" state="${_state}" on-change.call="valueChanged(val)"></c-toggle-input>
-        <c-toggle-label id="${id}" state="${_state}"><slot></slot></c-toggle-label>
+
+    <div
+        show.bind="_state !== 'hidden'"
+        class="${styles.base}"
+    >
+        <c-toggle-input
+            id="${id}"
+            checked-value.bind="checkedValue"
+            state="${_state}"
+            on-change.call="valueChanged(val)"
+        ></c-toggle-input>
+        <c-toggle-label
+            id="${id}"
+            state="${_state}"
+        >
+            <slot></slot>
+        </c-toggle-label>
     </div>
 </template>
diff --git a/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html b/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html
index c61530f2..849efd50 100644
--- a/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html
+++ b/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html
@@ -5,8 +5,16 @@
 
 <template>
 	<require from="./c-toggle-input.css"></require>
+
     <label class="${styles.bin} ${state === 'disabled' ? styles.disabled : ''}">
-        <input disabled.bind="state === 'disabled'" id="${id}" type="checkbox" class="${styles.check}" checked.bind="checkedValue" change.delegate="valueChanged()">
+        <input
+            disabled.bind="state === 'disabled'"
+            id="${id}"
+            type="checkbox"
+            class="${styles.check}"
+            checked.bind="checkedValue"
+            change.delegate="valueChanged()"
+        >
         <div class="${styles.bar}"></div>
         <div class="${styles.nub}"></div>
     </label>
diff --git a/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html b/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html
index f2e366c6..3478505e 100644
--- a/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html
+++ b/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html
@@ -6,5 +6,10 @@
 <template>
 	<require from="./c-toggle-label.css"></require>
 
-    <label class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}" for="${id}"><slot></slot></label>
+    <label
+        class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}"
+        for="${id}"
+    >
+        <slot></slot>
+    </label>
 </template>

From 5d22d82b3fbfa59b8700939f5d7c2c0ed01907f2 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 17:08:08 -0600
Subject: [PATCH 15/38] c-form-date html clean up

---
 .../forms/date/c-form-date/c-form-date.html   | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/forms/date/c-form-date/c-form-date.html b/src/components/forms/date/c-form-date/c-form-date.html
index 3b691a58..c15ad467 100644
--- a/src/components/forms/date/c-form-date/c-form-date.html
+++ b/src/components/forms/date/c-form-date/c-form-date.html
@@ -6,8 +6,15 @@
 <template>
 	<require from="./c-form-date.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
-        <c-label state="${_state}" icon="${labelIcon}" if.bind="label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="_state !== 'hidden' && label"
+    >
+        <c-label
+            state="${_state}"
+            icon="${labelIcon}"
+            if.bind="label"
+        >
             ${label}
         </c-label>
         <slot name="tip"></slot>
@@ -29,6 +36,16 @@
             <span if.bind="disabledText">${disabledText}</span>
         </c-disabled>
     </div>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
-    <c-form-warning state="${_state}" if.bind="_state !== 'hidden' && warningMsg">${warningMsg}</c-form-warning>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
+    <c-form-warning
+        state="${_state}"
+        if.bind="_state !== 'hidden' && warningMsg"
+    >
+        ${warningMsg}
+    </c-form-warning>
 </template>

From 2953c75271be7b74833bae84a2b08b345d08c1a6 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 17:13:38 -0600
Subject: [PATCH 16/38] c-form-file html clean up

---
 .../forms/file/c-file-input/c-file-input.html | 19 +++++-
 .../forms/file/c-form-file/c-form-file.html   | 68 ++++++++++++++++---
 2 files changed, 73 insertions(+), 14 deletions(-)

diff --git a/src/components/forms/file/c-file-input/c-file-input.html b/src/components/forms/file/c-file-input/c-file-input.html
index ee7ea0ee..71b253ca 100644
--- a/src/components/forms/file/c-file-input/c-file-input.html
+++ b/src/components/forms/file/c-file-input/c-file-input.html
@@ -6,11 +6,24 @@
 <template>
 	<require from="./c-file-input.css"></require>
 
-    <div class="${styles.image}" if.bind="imagePicker">
+    <div
+        class="${styles.image}"
+        if.bind="imagePicker"
+    >
         <span>
             <a href="#">Upload</a>
         </span>
-        <input type="file" class="${styles.file}  ${state === 'error' ? styles.error : ''}" change.delegate="filesUploaded($event)" accept="image/*">
+        <input
+            type="file"
+            class="${styles.file}  ${state === 'error' ? styles.error : ''}"
+            change.delegate="filesUploaded($event)"
+            accept="image/*"
+        >
     </div>
-    <input type="file" class="${styles.file}  ${state === 'error' ? styles.error : ''}" if.bind="!imagePicker" change.delegate="filesUploaded($event)">
+    <input
+        type="file"
+        class="${styles.file}  ${state === 'error' ? styles.error : ''}"
+        if.bind="!imagePicker"
+        change.delegate="filesUploaded($event)"
+    >
 </template>
diff --git a/src/components/forms/file/c-form-file/c-form-file.html b/src/components/forms/file/c-form-file/c-form-file.html
index db0efdbd..bd67271e 100644
--- a/src/components/forms/file/c-form-file/c-form-file.html
+++ b/src/components/forms/file/c-form-file/c-form-file.html
@@ -6,25 +6,71 @@
 <template>
 	<require from="./c-form-file.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
-        <c-label state="${_state}" if.bind="label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="_state !== 'hidden' && label"
+    >
+        <c-label
+            state="${_state}"
+            if.bind="label"
+        >
             ${label}
         </c-label>
         <slot name="tip"></slot>
     </div>
-    <div class="${styles.noImage}" if.bind="!imgUrl && imagePicker">
+    <div
+        class="${styles.noImage}"
+        if.bind="!imgUrl && imagePicker"
+    >
         <c-p>No Image</c-p>
     </div>
-    <div if.bind="imgUrl && imagePicker" class="${styles.imageSrcContainer}  ${isUploading ? styles.isUploading : ''}">
-        <c-spinner size="small" if.bind="isUploading"></c-spinner>
-        <img class="${styles.image}" src="${imgUrl}" alt="${label}">
+    <div
+        class="${styles.imageSrcContainer}  ${isUploading ? styles.isUploading : ''}"
+        if.bind="imgUrl && imagePicker"
+    >
+        <c-spinner
+            size="small"
+            if.bind="isUploading"
+        ></c-spinner>
+        <img
+            class="${styles.image}"
+            src="${imgUrl}"
+            alt="${label}"
+        >
     </div>
-    <c-file-input image-picker.bind="imagePicker" if.bind="_state !== 'disabled' && _state !== 'hidden'" state.bind="_state" files.bind="files"></c-file-input>
+    <c-file-input
+        image-picker.bind="imagePicker"
+        state.bind="_state"
+        files.bind="files"
+        if.bind="_state !== 'disabled' && _state !== 'hidden'"
+    ></c-file-input>
     <c-disabled if.bind="_state === 'disabled' && !imagePicker">
-        <span if.bind="files.length" repeat.for="f of files">${f.name}</span>
+        <span
+            if.bind="files.length"
+            repeat.for="f of files"
+        >
+            ${f.name}
+        </span>
         <span if.bind="!files.length">None</span>
     </c-disabled>
-    <a if.bind="imagePicker && imgUrl !== imageSrc && !showReset && _state !== 'disabled'" click.delegate="removeImage()" class="${styles.removeImage}">Reset</a>
-    <a if.bind="imagePicker && showReset && _state !== 'disabled'" click.delegate="resetImage()" class="${styles.removeImage}">Reset</a>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
+    <a
+        click.delegate="removeImage()"
+        class="${styles.removeImage}"
+        if.bind="imagePicker && imgUrl !== imageSrc && !showReset && _state !== 'disabled'"
+    >
+        Reset
+    </a>
+    <a
+        click.delegate="resetImage()"
+        class="${styles.removeImage}"
+        if.bind="imagePicker && showReset && _state !== 'disabled'"
+    >
+        Reset
+    </a>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
 </template>

From 3a7c35181454a7fccca27d0504ecf8afbc92e834 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 25 Mar 2020 17:20:03 -0600
Subject: [PATCH 17/38] c-form-add-remove and c-form-select html clean up

---
 .../c-form-add-remove/c-form-add-remove.html  | 29 ++++++++--
 .../select/c-form-select/c-form-select.html   | 58 ++++++++++++++++---
 2 files changed, 74 insertions(+), 13 deletions(-)

diff --git a/src/components/forms/select/c-form-add-remove/c-form-add-remove.html b/src/components/forms/select/c-form-add-remove/c-form-add-remove.html
index bc6d7b30..9ee21f17 100644
--- a/src/components/forms/select/c-form-add-remove/c-form-add-remove.html
+++ b/src/components/forms/select/c-form-add-remove/c-form-add-remove.html
@@ -6,7 +6,10 @@
 <template>
 	<require from="./c-form-add-remove.css"></require>
 
-    <div class="${styles.container}" hide.bind="_state === 'hidden'">
+    <div
+        class="${styles.container}"
+        hide.bind="_state === 'hidden'"
+    >
         <c-form-select
             options.two-way="listLeft"
             label="${titleLeft}"
@@ -20,8 +23,16 @@
             scroll-to-load.bind="scrollToLoadLeft"
             actions.bind="actionsLeft"
         >
-            <span slot="tip" show.bind="tipLeftContent">
-                <c-tip side="bottom" icon-tip.bind="true" arrow-position="leftEdge" size="medium">
+            <span
+                slot="tip"
+                show.bind="tipLeftContent"
+            >
+                <c-tip
+                    side="bottom"
+                    icon-tip.bind="true"
+                    arrow-position="leftEdge"
+                    size="medium"
+                >
                     <div slot="trigger">
                         <c-icon icon="question"></c-icon>
                     </div>
@@ -63,8 +74,16 @@
             scroll-to-load.bind="scrollToLoadRight"
             actions.bind="actionsRight"
         >
-            <span slot="tip" show.bind="tipRightContent">
-                <c-tip side="bottom" icon-tip.bind="true" arrow-position="rightEdge" size="medium">
+            <span
+                slot="tip"
+                show.bind="tipRightContent"
+            >
+                <c-tip
+                    side="bottom"
+                    icon-tip.bind="true"
+                    arrow-position="rightEdge"
+                    size="medium"
+                >
                     <div slot="trigger">
                         <c-icon icon="question"></c-icon>
                     </div>
diff --git a/src/components/forms/select/c-form-select/c-form-select.html b/src/components/forms/select/c-form-select/c-form-select.html
index aea432f8..017033b3 100644
--- a/src/components/forms/select/c-form-select/c-form-select.html
+++ b/src/components/forms/select/c-form-select/c-form-select.html
@@ -6,7 +6,10 @@
 <template>
     <require from="./c-form-select.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="_state !== 'hidden' && label"
+    >
         <c-label state="${_state}">
             ${label}
         </c-label>
@@ -32,25 +35,64 @@
             multiple.bind="multiple"
             scroll.trigger="onScroll() & throttle"
         >
-            <option if.bind="!simple" repeat.for="option of filteredOptions" value="${option.value}">${option.text}</option>
-            <option if.bind="simple" repeat.for="option of filteredOptions" value="${option}">${option}</option>
+            <option
+                repeat.for="option of filteredOptions"
+                value="${option.value}"
+                if.bind="!simple"
+            >
+                ${option.text}
+            </option>
+            <option
+                repeat.for="option of filteredOptions"
+                value="${option}"
+                if.bind="simple"
+            >
+                ${option}
+            </option>
         </select>
         <l-cluster
             spacing="var(--s-3)"
             if.bind="reorder"
         >
             <div>
-                <c-button size="small" color="neutral" icon="chevron-up" icon-position="center" click.trigger="moveItems(-1)" state="${selectValue.length ? '': 'disabled'}"></c-button>
-                <c-button size="small" color="neutral" icon="chevron-down" icon-position="center" click.trigger="moveItems(1)" state="${selectValue.length ? '': 'disabled'}"></c-button>
+                <c-button
+                    size="small"
+                    color="neutral"
+                    icon="chevron-up"
+                    icon-position="center"
+                    click.trigger="moveItems(-1)"
+                    state="${selectValue.length ? '': 'disabled'}"
+                ></c-button>
+                <c-button
+                    size="small"
+                    color="neutral"
+                    icon="chevron-down"
+                    icon-position="center"
+                    click.trigger="moveItems(1)"
+                    state="${selectValue.length ? '': 'disabled'}"
+                ></c-button>
             </div>
         </l-cluster>
     </l-stack>
-    <div class="${isLoading ? styles.loader : ''}  ${isLoadingMore ? styles.loadingMore : ''}" if.bind="(isLoading || isLoadingMore) && multiple">
+    <div
+        class="${isLoading ? styles.loader : ''}  ${isLoadingMore ? styles.loadingMore : ''}"
+        if.bind="(isLoading || isLoadingMore) && multiple"
+    >
         <c-spinner size="small"></c-spinner>
     </div>
     <c-disabled if.bind="_state === 'disabled'">
         ${selectValue || 'None'}
     </c-disabled>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
-    <c-form-warning state="${_state}" if.bind="_state !== 'hidden' && warningMsg">${warningMsg}</c-form-warning>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
+    <c-form-warning
+        state="${_state}"
+        if.bind="_state !== 'hidden' && warningMsg"
+    >
+        ${warningMsg}
+    </c-form-warning>
 </template>

From f033d8a9f9483d808960c37ac29bd606e98d4579 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 13:57:49 -0600
Subject: [PATCH 18/38] fill-space added to l-box and l-box-link

---
 dev-app/routes/layouts/box-link/index.html | 23 +++++++++
 dev-app/routes/layouts/box-link/index.ts   |  6 +++
 dev-app/routes/layouts/box/index.html      | 23 +++++++++
 dev-app/routes/layouts/box/index.ts        |  6 +++
 src/layouts/l-box-link/l-box-link.html     |  1 +
 src/layouts/l-box-link/l-box-link.test.ts  | 58 ++++++++++++++++++++++
 src/layouts/l-box-link/l-box-link.ts       |  6 +++
 src/layouts/l-box/l-box.css                |  4 ++
 src/layouts/l-box/l-box.html               |  1 +
 src/layouts/l-box/l-box.test.ts            | 16 ++++++
 src/layouts/l-box/l-box.ts                 |  6 +++
 11 files changed, 150 insertions(+)
 create mode 100644 src/layouts/l-box-link/l-box-link.test.ts

diff --git a/dev-app/routes/layouts/box-link/index.html b/dev-app/routes/layouts/box-link/index.html
index fa727e1e..2810468d 100644
--- a/dev-app/routes/layouts/box-link/index.html
+++ b/dev-app/routes/layouts/box-link/index.html
@@ -57,6 +57,29 @@
 
             <c-divider></c-divider>
 
+            <div>
+                <l-stack spacing="var(--s-3)">
+                    <c-h3>fill-space</c-h3>
+                    <c-code-sample>
+                        <l-grid>
+                            <l-box-link fill-space.bind="true">
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                            </l-box-link>
+                            <l-box-link fill-space.bind="true">
+                                <c-p>Single line yet the same height.</c-p>
+                            </l-box-link>
+                            <l-box-link fill-space.bind="false">
+                                <c-p>fill-space set to false</c-p>
+                            </l-box-link>
+                        </l-grid>
+                    </c-code-sample>
+                </l-stack>
+            </div>
+
+            <c-divider></c-divider>
+
             <div>
                 <l-stack spacing="var(--s-3)">
                     <c-h3>margin-sides &amp; margin-ends</c-h3>
diff --git a/dev-app/routes/layouts/box-link/index.ts b/dev-app/routes/layouts/box-link/index.ts
index 7473b152..6624bb2f 100644
--- a/dev-app/routes/layouts/box-link/index.ts
+++ b/dev-app/routes/layouts/box-link/index.ts
@@ -52,6 +52,12 @@ export class BoxLinkProperties {
             name: 'color',
             value: 'Any color value. It is advised that you use the Core Color CSS Properties.',
         },
+        {
+            default: 'false',
+            description: 'Set to true if you want height: 100% set on the box.',
+            name: 'fill-space',
+            value: 'boolean',
+        },
         {
             default: '#',
             description: 'Set the URL where the link should go.',
diff --git a/dev-app/routes/layouts/box/index.html b/dev-app/routes/layouts/box/index.html
index e9965c77..e514b5bf 100644
--- a/dev-app/routes/layouts/box/index.html
+++ b/dev-app/routes/layouts/box/index.html
@@ -55,6 +55,29 @@
 
             <c-divider></c-divider>
 
+            <div>
+                <l-stack spacing="var(--s-3)">
+                    <c-h3>fill-space</c-h3>
+                    <c-code-sample>
+                        <l-grid>
+                            <l-box fill-space.bind="true">
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                                <c-p>I am a tall box with muiltiple lines.</c-p>
+                            </l-box>
+                            <l-box fill-space.bind="true">
+                                <c-p>Single line yet the same height.</c-p>
+                            </l-box>
+                            <l-box fill-space.bind="false">
+                                <c-p>fill-space set to false</c-p>
+                            </l-box>
+                        </l-grid>
+                    </c-code-sample>
+                </l-stack>
+            </div>
+
+            <c-divider></c-divider>
+
             <div>
                 <l-stack spacing="var(--s-3)">
                     <c-h3>margin-sides &amp; margin-ends</c-h3>
diff --git a/dev-app/routes/layouts/box/index.ts b/dev-app/routes/layouts/box/index.ts
index 256381c1..08e02489 100644
--- a/dev-app/routes/layouts/box/index.ts
+++ b/dev-app/routes/layouts/box/index.ts
@@ -46,6 +46,12 @@ export class BoxProperties {
             name: 'color',
             value: 'Any color value. It is advised that you use the Core Color CSS Properties.',
         },
+        {
+            default: 'false',
+            description: 'Set to true if you want height: 100% set on the box.',
+            name: 'fill-space',
+            value: 'boolean',
+        },
         {
             default: '0px',
             description: 'Set the left and right margin of the box.',
diff --git a/src/layouts/l-box-link/l-box-link.html b/src/layouts/l-box-link/l-box-link.html
index c95011ba..3a38282d 100644
--- a/src/layouts/l-box-link/l-box-link.html
+++ b/src/layouts/l-box-link/l-box-link.html
@@ -12,6 +12,7 @@
             ${styles.backgroundHover}
             ${borderTop ? styles.borderTop : ''}
             ${scrolling ? styles.scrolling : ''}
+            ${fillSpace ? styles.fillSpace : ''}
         "
         css="
             --box-margin-ends: ${marginEnds};
diff --git a/src/layouts/l-box-link/l-box-link.test.ts b/src/layouts/l-box-link/l-box-link.test.ts
new file mode 100644
index 00000000..ee3f0f46
--- /dev/null
+++ b/src/layouts/l-box-link/l-box-link.test.ts
@@ -0,0 +1,58 @@
+/*
+Copyright 2020, Verizon Media
+Licensed under the terms of the MIT license. See the LICENSE file in the project root for license terms.
+*/
+
+import {StageComponent} from 'aurelia-testing';
+
+describe('l-box-link component', () => {
+    let component;
+
+    describe('Integration', () => {
+        afterEach(() => {
+            component.dispose();
+        });
+
+        it('is fill-space endabled', async done => {
+            component = StageComponent.withResources()
+                .inView('<l-box-link fill-space.bind="isFillSpace"></l-box-link>')
+                .boundTo({
+                    isFillSpace: 1,
+                });
+
+            try {
+                await bootStrapEnvironment(component);
+                expect(component.viewModel.fillSpace).toBe(false);
+                done();
+            } catch (e) {
+                done.fail(e);
+            }
+        });
+
+        describe('CSS Classes', () => {
+            it('css class: box', async done => {
+                component = StageComponent.withResources().inView('<l-box-link></l-box-link>');
+
+                try {
+                    await bootStrapEnvironment(component);
+                    expect(component.viewModel.styles.box).not.toBe(undefined);
+                    done();
+                } catch (e) {
+                    done.fail(e);
+                }
+            });
+
+            it('css class: scrolling', async done => {
+                component = StageComponent.withResources().inView('<l-box-link></l-box-link>');
+
+                try {
+                    await bootStrapEnvironment(component);
+                    expect(component.viewModel.styles.scrolling).not.toBe(undefined);
+                    done();
+                } catch (e) {
+                    done.fail(e);
+                }
+            });
+        });
+    });
+});
diff --git a/src/layouts/l-box-link/l-box-link.ts b/src/layouts/l-box-link/l-box-link.ts
index 84c8a5bf..44b79ab8 100644
--- a/src/layouts/l-box-link/l-box-link.ts
+++ b/src/layouts/l-box-link/l-box-link.ts
@@ -14,6 +14,8 @@ export class LBoxLink {
     @bindable
     public borderTop;
     @bindable
+    public fillSpace = false;
+    @bindable
     public color = 'var(--c_white)';
     @bindable
     public href = '#';
@@ -34,5 +36,9 @@ export class LBoxLink {
         if (this.target !== '_self' && this.target !== '_blank') {
             this.target = '_self';
         }
+
+        if (typeof this.fillSpace !== 'boolean') {
+            this.fillSpace = false;
+        }
     }
 }
diff --git a/src/layouts/l-box/l-box.css b/src/layouts/l-box/l-box.css
index 5355cdfe..31524b7c 100644
--- a/src/layouts/l-box/l-box.css
+++ b/src/layouts/l-box/l-box.css
@@ -35,6 +35,10 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
     display: block;
 }
 
+.fill-space{
+    height: 100%;
+}
+
 .border-top{
     border-top: solid 1px var(--box-top-border);
 }
diff --git a/src/layouts/l-box/l-box.html b/src/layouts/l-box/l-box.html
index c18ef6ee..cdcae2cd 100644
--- a/src/layouts/l-box/l-box.html
+++ b/src/layouts/l-box/l-box.html
@@ -11,6 +11,7 @@
             ${styles.box}
             ${borderTop ? styles.borderTop : ''}
             ${scrolling ? styles.scrolling : ''}
+            ${fillSpace ? styles.fillSpace : ''}
         "
         css="
             --box-margin-ends: ${marginEnds};
diff --git a/src/layouts/l-box/l-box.test.ts b/src/layouts/l-box/l-box.test.ts
index 46810b24..28609f06 100644
--- a/src/layouts/l-box/l-box.test.ts
+++ b/src/layouts/l-box/l-box.test.ts
@@ -29,6 +29,22 @@ describe('l-box component', () => {
             }
         });
 
+        it('is fill-space endabled', async done => {
+            component = StageComponent.withResources()
+                .inView('<l-box fill-space.bind="isFillSpace"></l-box>')
+                .boundTo({
+                    isFillSpace: 1,
+                });
+
+            try {
+                await bootStrapEnvironment(component);
+                expect(component.viewModel.fillSpace).toBe(false);
+                done();
+            } catch (e) {
+                done.fail(e);
+            }
+        });
+
         describe('CSS Classes', () => {
             it('css class: box', async done => {
                 component = StageComponent.withResources().inView('<l-box></l-box>');
diff --git a/src/layouts/l-box/l-box.ts b/src/layouts/l-box/l-box.ts
index 10108ad0..38e52e2b 100644
--- a/src/layouts/l-box/l-box.ts
+++ b/src/layouts/l-box/l-box.ts
@@ -14,6 +14,8 @@ export class LBox {
     @bindable
     public color = 'var(--c_white)';
     @bindable
+    public fillSpace = false;
+    @bindable
     public marginSides = '0px';
     @bindable
     public marginEnds = '0px';
@@ -30,5 +32,9 @@ export class LBox {
         if (typeof this.scrolling !== 'boolean') {
             this.scrolling = false;
         }
+
+        if (typeof this.fillSpace !== 'boolean') {
+            this.fillSpace = false;
+        }
     }
 }

From da52ce7e11c249d7ec0fce5400e015e9e1925819 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 13:59:42 -0600
Subject: [PATCH 19/38] c-form-slider html clean up

---
 .../slider/c-form-slider/c-form-slider.html     | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/slider/c-form-slider/c-form-slider.html b/src/components/forms/slider/c-form-slider/c-form-slider.html
index 488dae9e..3df72542 100644
--- a/src/components/forms/slider/c-form-slider/c-form-slider.html
+++ b/src/components/forms/slider/c-form-slider/c-form-slider.html
@@ -7,8 +7,14 @@
 	<require from="./c-form-slider.css"></require>
 
     <div class="${inline ? styles.inline : ''}">
-        <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
-            <c-label state="${_state}" if.bind="label">
+        <div
+            class="${styles.labelWrapper}"
+            show.bind="_state !== 'hidden' && label"
+        >
+            <c-label
+                state="${_state}"
+                if.bind="label"
+            >
                 ${label}
             </c-label>
             <slot name="tip"></slot>
@@ -21,5 +27,10 @@
             debounce-time.bind="debounceTime"
         ></c-slider>
     </div>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
 </template>

From 0a4521188faa0f53bfba1610a4b9bb97ad8f5cf0 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 14:46:21 -0600
Subject: [PATCH 20/38] c-form-text html clean up

---
 .../forms/text/c-form-text/c-form-text.html   | 25 ++++++++++++++++---
 .../forms/text/c-text-input/c-text-input.html | 11 ++++++--
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/forms/text/c-form-text/c-form-text.html b/src/components/forms/text/c-form-text/c-form-text.html
index 8245c3b8..b595f4ce 100644
--- a/src/components/forms/text/c-form-text/c-form-text.html
+++ b/src/components/forms/text/c-form-text/c-form-text.html
@@ -6,8 +6,15 @@
 <template>
     <require from="./c-form-text.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
-        <c-label state="${_state}" icon="${labelIcon}" label-icon-color="${labelIconColor}">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="_state !== 'hidden' && label"
+    >
+        <c-label
+            state="${_state}"
+            icon="${labelIcon}"
+            label-icon-color="${labelIconColor}"
+        >
             ${label}
         </c-label>
         <slot name="tip"></slot>
@@ -33,6 +40,16 @@
     <c-disabled if.bind="_state === 'disabled'">
         ${textValue || 'None'}
     </c-disabled>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
-    <c-form-warning state="${_state}" if.bind="_state !== 'hidden' && warningMsg">${warningMsg}</c-form-warning>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
+    <c-form-warning
+        state="${_state}"
+        if.bind="_state !== 'hidden' && warningMsg"
+    >
+        ${warningMsg}
+    </c-form-warning>
 </template>
diff --git a/src/components/forms/text/c-text-input/c-text-input.html b/src/components/forms/text/c-text-input/c-text-input.html
index 333cd23a..7c48fdc0 100644
--- a/src/components/forms/text/c-text-input/c-text-input.html
+++ b/src/components/forms/text/c-text-input/c-text-input.html
@@ -6,7 +6,10 @@
 <template>
 	<require from="./c-text-input.css"></require>
 
-    <c-icon if.bind="icon" icon="${icon}"></c-icon>
+    <c-icon
+        if.bind="icon"
+        icon="${icon}"
+    ></c-icon>
     <span class="${button || buttonText ? styles.buttonInput : ''} ${clearable ? styles.container : ''}">
         <input
             if.bind="placeholder"
@@ -29,7 +32,11 @@
             id="${id}"
             autocomplete="off"
         >
-        <a class="${styles.clearable} ${button ? styles.clearButton : ''}" click.delegate="clearText()" if.bind="clearable && textValue">
+        <a
+            class="${styles.clearable} ${button ? styles.clearButton : ''}"
+            click.delegate="clearText()"
+            if.bind="clearable && textValue"
+        >
             <c-icon icon="x"></c-icon>
         </a>
         <c-button

From e4594d3b029d420dd72159132ecc7dce5d418b5c Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 14:47:53 -0600
Subject: [PATCH 21/38] c-form-textarea html clean up

---
 .../c-form-textarea/c-form-textarea.html      | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/textarea/c-form-textarea/c-form-textarea.html b/src/components/forms/textarea/c-form-textarea/c-form-textarea.html
index 087a23e6..b0638e2e 100644
--- a/src/components/forms/textarea/c-form-textarea/c-form-textarea.html
+++ b/src/components/forms/textarea/c-form-textarea/c-form-textarea.html
@@ -6,7 +6,10 @@
 <template>
 	<require from="./c-form-textarea.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="_state !== 'hidden' && label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="_state !== 'hidden' && label"
+    >
         <c-label state="${_state}">
             ${label}
         </c-label>
@@ -22,6 +25,16 @@
     <c-disabled if.bind="_state === 'disabled'">
         ${textareaValue || 'None'}
     </c-disabled>
-    <c-form-error state="${_state}" if.bind="_state !== 'hidden' && errorMsg">${errorMsg}</c-form-error>
-    <c-form-warning state="${_state}" if.bind="_state !== 'hidden' && warningMsg">${warningMsg}</c-form-warning>
+    <c-form-error
+        state="${_state}"
+        if.bind="_state !== 'hidden' && errorMsg"
+    >
+        ${errorMsg}
+    </c-form-error>
+    <c-form-warning
+        state="${_state}"
+        if.bind="_state !== 'hidden' && warningMsg"
+    >
+        ${warningMsg}
+    </c-form-warning>
 </template>

From a8f5575873cff328d788026878846aff689b5b75 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 14:49:58 -0600
Subject: [PATCH 22/38] c-icon html clean up

---
 src/components/icons/c-icon/c-icon.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/icons/c-icon/c-icon.html b/src/components/icons/c-icon/c-icon.html
index 6ce0de8a..be32a51d 100644
--- a/src/components/icons/c-icon/c-icon.html
+++ b/src/components/icons/c-icon/c-icon.html
@@ -6,7 +6,10 @@
 <template>
 	<require from="./c-icon.css"></require>
 
-    <svg class="${styles.icon}  ${styles[color]}  ${styles[size]}  ${action ? styles.action : ''}" click.trigger="actionFunction()">
+    <svg
+        class="${styles.icon}  ${styles[color]}  ${styles[size]}  ${action ? styles.action : ''}"
+        click.trigger="actionFunction()"
+    >
         <use xlink:href="#${icon}"></use>
     </svg>
 </template>

From ae45eb6ddb3435b274ea93bda95f0072af41a61a Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 15:00:20 -0600
Subject: [PATCH 23/38] nav html clean up

---
 .../c-nav-horizontal-item.html                | 51 +++++++++++++++----
 .../c-nav-horizontal/c-nav-horizontal.html    | 17 +++++--
 .../c-nav-vertical-item.html                  | 27 ++++++++--
 .../c-nav-vertical-sliding.html               | 48 +++++++++++++----
 .../navs/c-nav-vertical/c-nav-vertical.html   | 10 +++-
 5 files changed, 123 insertions(+), 30 deletions(-)

diff --git a/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html b/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html
index 7fba24a9..46421e4c 100644
--- a/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html
+++ b/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html
@@ -6,23 +6,54 @@
 <template>
 	<require from="./c-nav-horizontal-item.css"></require>
 
-    <li class="${styles.navHorizontalItem}  ${styles[state]}  ${styles[position]}" hide.bind="state === 'hidden'">
-        <a if.bind="route" href.bind="generatedLink" click.trigger="toggleMobileNav()">
+    <li
+        class="${styles.navHorizontalItem}  ${styles[state]}  ${styles[position]}"
+        hide.bind="state === 'hidden'"
+    >
+        <a
+            href.bind="generatedLink"
+            click.trigger="toggleMobileNav()"
+            if.bind="route"
+        >
             ${title}
-            <div class="${styles.icon}" if.bind="icon">
-                <c-icon icon="${icon}" color="${iconColor}"></c-icon>
+            <div
+                class="${styles.icon}"
+                if.bind="icon"
+            >
+                <c-icon
+                    icon="${icon}"
+                    color="${iconColor}"
+                ></c-icon>
             </div>
         </a>
-        <a if.bind="href" href="${href}">
+        <a
+            href="${href}"
+            if.bind="href"
+        >
             ${title}
-            <div class="${styles.icon}" if.bind="icon">
-                <c-icon icon="${icon}" color="${iconColor}"></c-icon>
+            <div
+                class="${styles.icon}"
+                if.bind="icon"
+            >
+                <c-icon
+                    icon="${icon}"
+                    color="${iconColor}"
+                ></c-icon>
             </div>
         </a>
-        <a if.bind="action" click.trigger="actionFunction()">
+        <a
+            click.trigger="actionFunction()"
+            if.bind="action"
+        >
             ${title}
-            <div class="${styles.icon}" if.bind="icon">
-                <c-icon icon="${icon}" color="${iconColor}"></c-icon>
+            <div
+                class="${styles.icon}"
+                if.bind="icon"
+            >
+                <c-icon
+                    icon="${icon}"
+                    color="${iconColor}"
+                ></c-icon>
             </div>
         </a>
         <slot></slot>
diff --git a/src/components/navs/c-nav-horizontal/c-nav-horizontal.html b/src/components/navs/c-nav-horizontal/c-nav-horizontal.html
index 1d01e8a0..8d083435 100644
--- a/src/components/navs/c-nav-horizontal/c-nav-horizontal.html
+++ b/src/components/navs/c-nav-horizontal/c-nav-horizontal.html
@@ -6,11 +6,22 @@
 <template>
 	<require from="./c-nav-horizontal.css"></require>
 
-    <nav class="${styles.navHorizontal}  ${styles[size]}" hide.bind="state === 'hidden'">
-        <button class="${styles.mobileTrigger}  ${mobileNavOpen.open ? styles.mobileTriggerActive : ''}" if.bind="mobile" click.trigger="toggleMobileNav()">
+    <nav
+        class="${styles.navHorizontal}  ${styles[size]}"
+        hide.bind="state === 'hidden'"
+    >
+        <button
+            class="${styles.mobileTrigger}  ${mobileNavOpen.open ? styles.mobileTriggerActive : ''}"
+            click.trigger="toggleMobileNav()"
+            if.bind="mobile"
+        >
             <span>Mobile Nav</span>
         </button>
-        <l-cluster align="${align}" justify="{$justify}" spacing="${spacing}">
+        <l-cluster
+            align="${align}"
+            justify="{$justify}"
+            spacing="${spacing}"
+        >
             <ul class="${mobile ? styles.navMobile : ''}  ${mobileNavOpen.open ? styles.navMobileActive : ''}">
                 <slot></slot>
             </ul>
diff --git a/src/components/navs/c-nav-vertical-item/c-nav-vertical-item.html b/src/components/navs/c-nav-vertical-item/c-nav-vertical-item.html
index 9d230e80..69016ab4 100644
--- a/src/components/navs/c-nav-vertical-item/c-nav-vertical-item.html
+++ b/src/components/navs/c-nav-vertical-item/c-nav-vertical-item.html
@@ -18,19 +18,36 @@
         hide.bind="state === 'hidden'"
         drag-dropzone.bind="dropzoneActions"
     >
-        <span class="${styles.accordionArrow}" if.bind="accordionItem">
+        <span
+            class="${styles.accordionArrow}"
+            if.bind="accordionItem"
+        >
             <svg class="icon">
                 <use xlink:href="#chevron-right"></use>
             </svg>
         </span>
-        <a if.bind="accordionItem && title" click.trigger="toggleAccordion()" class="${styles.accordionLink}">
+        <a
+            click.trigger="toggleAccordion()"
+            class="${styles.accordionLink}"
+            if.bind="accordionItem && title"
+        >
             ${title}
         </a>
-        <a if.bind="!accordionItem && title" click.delegate="clickTrigger()">
+        <a
+            if.bind="!accordionItem && title"
+            click.delegate="clickTrigger()"
+        >
             ${title}
-            <span class="${styles.sub}" if.bind="subText">${subText}</span>
+            <span
+                class="${styles.sub}"
+                if.bind="subText"
+            >${subText}</span>
         </a>
-        <div if.bind="icon && iconAction" click.trigger="actionFunction()" class="${styles.iconContainer}">
+        <div
+            click.trigger="actionFunction()"
+            class="${styles.iconContainer}"
+            if.bind="icon && iconAction"
+        >
             <c-icon icon="${icon}"></c-icon>
         </div>
         <h4 if.bind="sectionTitle">${sectionTitle}</h4>
diff --git a/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html b/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html
index 979f0a0c..6d999ece 100644
--- a/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html
+++ b/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html
@@ -6,20 +6,46 @@
 <template>
 	<require from="./c-nav-vertical-sliding.css"></require>
 
-    <div class="${styles.container} ${navState === 'right' ? styles[navState] : ''}  ${!showHidden ? styles.hidden : ''}" show.bind="!isPageLoading">
-        <div class="${styles.block}" repeat.for="page of nav.pages">
+    <div
+        class="${styles.container} ${navState === 'right' ? styles[navState] : ''}  ${!showHidden ? styles.hidden : ''}"
+        show.bind="!isPageLoading"
+    >
+        <div
+            class="${styles.block}"
+            repeat.for="page of nav.pages"
+        >
             <div class="${styles.triggerContainer}  ${(isTriggerContentHidden && $index === 0) ? styles.triggerContentHidden : ''}">
                 <div>
-                    <div class="${styles.trigger}" click.trigger="toggleNav()" show.bind="page.prevText && (showTrigger || $index > 0)">
-                        <c-icon icon="chevron-left" size="itzy"></c-icon>
+                    <div
+                        class="${styles.trigger}"
+                        click.trigger="toggleNav()"
+                        show.bind="page.prevText && (showTrigger || $index > 0)"
+                    >
+                        <c-icon
+                            icon="chevron-left"
+                            size="itzy"
+                        ></c-icon>
                         <span>${page.prevText}</span>
                     </div>
-                    <div class="${styles.trigger}" click.trigger="toggleNav()" show.bind="page.nextText && (showTrigger || $index > 0)">
+                    <div
+                        class="${styles.trigger}"
+                        click.trigger="toggleNav()"
+                        show.bind="page.nextText && (showTrigger || $index > 0)"
+                    >
                         <span>${page.nextText}</span>
-                        <c-icon icon="chevron-right" size="itzy"></c-icon>
+                        <c-icon
+                            icon="chevron-right"
+                            size="itzy"
+                        ></c-icon>
                     </div>
                 </div>
-                <c-h3 truncate.bind="true" dark-back.bind="true" if.bind="page.title && (showTrigger || $index > 0)">${page.title}</c-h3>
+                <c-h3
+                    truncate.bind="true"
+                    dark-back.bind="true"
+                    if.bind="page.title && (showTrigger || $index > 0)"
+                >
+                    ${page.title}
+                </c-h3>
                 <c-form-text
                     placeholder.bind="page.searchPlaceholder"
                     button="search"
@@ -27,8 +53,7 @@
                     text-value.bind="page.searchQuery"
                     button-action.call="page.searchFn(textValue)"
                     if.bind="page.searchFn && page.searchPlaceholder && (showTrigger || $index > 0)"
-                >
-                </c-form-text>
+                ></c-form-text>
                 <c-notification if.bind="!page.navs.length">No Results Found</c-notification>
             </div>
             <c-nav-vertical
@@ -69,5 +94,8 @@
             </c-nav-vertical>
         </div>
     </div>
-    <c-spinner size="small" if.bind="isPageLoading"></c-spinner>
+    <c-spinner
+        size="small"
+        if.bind="isPageLoading"
+    ></c-spinner>
 </template>
diff --git a/src/components/navs/c-nav-vertical/c-nav-vertical.html b/src/components/navs/c-nav-vertical/c-nav-vertical.html
index 1e03a4ba..349fc7bc 100644
--- a/src/components/navs/c-nav-vertical/c-nav-vertical.html
+++ b/src/components/navs/c-nav-vertical/c-nav-vertical.html
@@ -7,10 +7,16 @@
 	<require from="./c-nav-vertical.css"></require>
 
     <nav class="${styles.navVertical}  ${navBottom ? styles.navBottom : ''}">
-        <ul class="${navBottom ? styles.overflow : ''}" scroll.trigger="onScroll($event) & throttle">
+        <ul
+            class="${navBottom ? styles.overflow : ''}"
+            scroll.trigger="onScroll($event) & throttle"
+        >
         	<slot></slot>
         </ul>
-        <ul class="${styles.secondList}" show.bind="navBottom">
+        <ul
+            class="${styles.secondList}"
+            show.bind="navBottom"
+        >
         	<slot name="bottom"></slot>
         </ul>
     </nav>

From e7dd12172dfe5da4f68f6690af85a7270d5a80a7 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 15:01:22 -0600
Subject: [PATCH 24/38] c-notification html clean up

---
 .../notifications/c-notification/c-notification.html   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/notifications/c-notification/c-notification.html b/src/components/notifications/c-notification/c-notification.html
index 4ba7c6d7..bce7640c 100644
--- a/src/components/notifications/c-notification/c-notification.html
+++ b/src/components/notifications/c-notification/c-notification.html
@@ -6,9 +6,15 @@
 <template>
 	<require from="./c-notification.css"></require>
 
-    <div class="${styles.notification}  ${styles[type]}" show.bind="_state !== 'hidden'">
+    <div
+        class="${styles.notification}  ${styles[type]}"
+        show.bind="_state !== 'hidden'"
+    >
         <c-icon icon="${type == 'info' ? 'info' : ''}${type == 'success' ? 'info' : ''}${type == 'warning' ? 'warning' : ''}${type == 'critical' ? 'warning' : ''}"></c-icon>
-        <div class="${styles.callout}" if.bind="calloutTitle || calloutContent">
+        <div
+            class="${styles.callout}"
+            if.bind="calloutTitle || calloutContent"
+        >
             <c-h5>${calloutTitle}</c-h5>
             <c-h2>${calloutContent}</c-h2>
         </div>

From bd52cb76522af2bbe7499cc4ca91b33ef09653a7 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 15:02:59 -0600
Subject: [PATCH 25/38] c-pill html clean up

---
 src/components/pills/c-pill/c-pill.html | 27 +++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/pills/c-pill/c-pill.html b/src/components/pills/c-pill/c-pill.html
index 3e889c9f..fe9a669b 100644
--- a/src/components/pills/c-pill/c-pill.html
+++ b/src/components/pills/c-pill/c-pill.html
@@ -6,12 +6,31 @@
 <template>
 	<require from="./c-pill.css"></require>
 
-    <span show.bind="!href" class="${styles.pill}  ${styles[color]}">
-        <c-icon icon="${icon}" color="white" size="itzy" action.call="actionFunction()" if.bind="icon"></c-icon>
+    <span
+        show.bind="!href"
+        class="${styles.pill}  ${styles[color]}"
+    >
+        <c-icon
+            icon="${icon}"
+            color="white"
+            size="itzy"
+            action.call="actionFunction()"
+            if.bind="icon"
+        ></c-icon>
         <slot name="pill-content"></slot>
     </span>
-    <a show.bind="href" href.bind="href" class="${styles.pill}  ${styles[color]}">
-        <c-icon icon="${icon}" color="white" size="itzy" action.call="actionFunction()" if.bind="icon"></c-icon>
+    <a
+        href.bind="href"
+        class="${styles.pill}  ${styles[color]}"
+        show.bind="href"
+    >
+        <c-icon
+            icon="${icon}"
+            color="white"
+            size="itzy"
+            action.call="actionFunction()"
+            if.bind="icon"
+        ></c-icon>
 		<slot name="pill-link-content"></slot>
 	</a>
 </template>

From 759c6fbd8ccc1fea0c5a10dcb053e38b9c4ddfb9 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 15:04:46 -0600
Subject: [PATCH 26/38] c-popover html clean up

---
 .../popover/c-popover/c-popover.html          | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/popover/c-popover/c-popover.html b/src/components/popover/c-popover/c-popover.html
index 95b2c763..79fabdbb 100644
--- a/src/components/popover/c-popover/c-popover.html
+++ b/src/components/popover/c-popover/c-popover.html
@@ -10,7 +10,10 @@
         class="${styles.overlay}"
         if.bind="vPopoverService.model"
     >
-        <div class="${styles.closeTrigger}" click.trigger="vPopoverService.close()"></div>
+        <div
+            class="${styles.closeTrigger}"
+            click.trigger="vPopoverService.close()"
+        ></div>
         <div
             class="
                 ${styles.popover}
@@ -26,12 +29,24 @@
                     margin-top: ${vPopoverService.model.top ? vPopoverService.model.top + 'px' : ''};
                 "
             >
-                <div class="${tipStyles.tip}  ${styles.container}" id="popover-container">
+                <div
+                    class="${tipStyles.tip}  ${styles.container}"
+                    id="popover-container"
+                >
                     <div class="${styles.containerInner}">
-                        <compose if.bind="vPopoverService.model.contentViewModel && vPopoverService.model.data" view-model.bind="vPopoverService.model.contentViewModel" model.bind="{data: vPopoverService.model.data}"></compose>
+                        <compose
+                            view-model.bind="vPopoverService.model.contentViewModel"
+                            model.bind="{data: vPopoverService.model.data}"
+                            if.bind="vPopoverService.model.contentViewModel && vPopoverService.model.data"
+                        ></compose>
                         <p else>Empty</p>
                     </div>
-                    <span class="${tipStyles.close}  ${styles.close}" click.trigger="vPopoverService.close()">×</span>
+                    <span
+                        class="${tipStyles.close}  ${styles.close}"
+                        click.trigger="vPopoverService.close()"
+                    >
+                        ×
+                    </span>
                     <span
                         class="${tipStyles.color}"
                         css="--tip-bar-color: ${vPopoverService.color};"

From 79389b4dd0114c04c42c303f54173053a3d932ac Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 15:13:36 -0600
Subject: [PATCH 27/38] table html clean up

---
 .../c-table-fixed-header.html                 | 16 ++++++++--
 src/components/tables/c-table/c-table.html    |  9 ++++--
 src/components/tables/c-td/c-td.html          |  7 ++++-
 .../td-contents/c-td-action/c-td-action.html  | 24 +++++++++++----
 .../td-contents/c-td-button/c-td-button.html  | 13 +++++----
 .../c-td-drag-check/c-td-drag-check.html      |  5 +---
 .../td-contents/c-td-image/c-td-image.html    |  6 +++-
 .../c-td-text-input/c-td-text-input.html      |  6 +++-
 .../tables/td-contents/c-td-tip/c-td-tip.html | 13 +++++++--
 .../c-td-truncate/c-td-truncate.html          | 29 +++++++++++++------
 10 files changed, 94 insertions(+), 34 deletions(-)

diff --git a/src/components/tables/c-table-fixed-header/c-table-fixed-header.html b/src/components/tables/c-table-fixed-header/c-table-fixed-header.html
index b4803bca..13e76d95 100644
--- a/src/components/tables/c-table-fixed-header/c-table-fixed-header.html
+++ b/src/components/tables/c-table-fixed-header/c-table-fixed-header.html
@@ -6,11 +6,21 @@
 <template>
 	<require from="./c-table-fixed-header.css"></require>
 
-    <div class="${styles.fixedTableHeaderBg}" css="${(totalWidth > windowWidth) ? 'width:' + totalWidth + 'px' : ''}"></div>
-    <div class="${styles.fixedTableHeader}" css="${(totalWidth > windowWidth) ? 'width:' + totalWidth + 'px' : ''}" scroll.trigger="onScroll() & throttle">
+    <div
+        class="${styles.fixedTableHeaderBg}"
+        css="${(totalWidth > windowWidth) ? 'width:' + totalWidth + 'px' : ''}"
+    ></div>
+    <div
+        class="${styles.fixedTableHeader}"
+        css="${(totalWidth > windowWidth) ? 'width:' + totalWidth + 'px' : ''}"
+        scroll.trigger="onScroll() & throttle"
+    >
         <slot></slot>
     </div>
-    <div if.bind="isLoading" class="${styles.loader}">
+    <div
+        class="${styles.loader}"
+        if.bind="isLoading"
+    >
         <c-spinner size="small"></c-spinner>
     </div>
 </template>
diff --git a/src/components/tables/c-table/c-table.html b/src/components/tables/c-table/c-table.html
index 97b74e2c..50cef036 100644
--- a/src/components/tables/c-table/c-table.html
+++ b/src/components/tables/c-table/c-table.html
@@ -8,7 +8,13 @@
 
     <table
         if.bind="_state !== 'hidden'"
-        class="${styles.table}  ${striped ? styles.striped : ''}  ${hover ? styles.hover : ''}  ${noVerticalBorders ? styles.noVerticalBorders : ''}  ${responsive ? styles.responsive : ''}"
+        class="
+            ${styles.table}
+            ${striped ? styles.striped : ''}
+            ${hover ? styles.hover : ''}
+            ${noVerticalBorders ? styles.noVerticalBorders : ''}
+            ${responsive ? styles.responsive : ''}
+        "
     >
         <colgroup>
             <col
@@ -65,5 +71,4 @@
             </tr>
         </tbody>
     </table>
-
 </template>
diff --git a/src/components/tables/c-td/c-td.html b/src/components/tables/c-td/c-td.html
index 4c5d67f9..8c51a760 100644
--- a/src/components/tables/c-td/c-td.html
+++ b/src/components/tables/c-td/c-td.html
@@ -6,7 +6,12 @@
 <template>
 	<require from="./c-td.css"></require>
 
-    <compose if.bind="col.view" view.bind="col.view" view-model.bind="col.viewModel" model.bind="modelData"></compose>
+    <compose
+        view.bind="col.view"
+        view-model.bind="col.viewModel"
+        model.bind="modelData"
+        if.bind="col.view"
+    ></compose>
     <span if.bind="!col.view">
         ${modelData.value | meta:col.valueConverter:col.valueConverterFormat}
     </span>
diff --git a/src/components/tables/td-contents/c-td-action/c-td-action.html b/src/components/tables/td-contents/c-td-action/c-td-action.html
index 38ca1d1a..52cb3482 100644
--- a/src/components/tables/td-contents/c-td-action/c-td-action.html
+++ b/src/components/tables/td-contents/c-td-action/c-td-action.html
@@ -6,11 +6,25 @@
 <template>
 	<require from="./c-td-action.css"></require>
 
-    <span class="${styles.base}" if.bind="row[col.colHeadName + 'Icon'] && col.colAction" click.delegate="col.colAction(row)">
+    <span
+        class="${styles.base}"
+        if.bind="row[col.colHeadName + 'Icon'] && col.colAction"
+        click.delegate="col.colAction(row)"
+    >
         <c-icon icon="${row[col.colHeadName + 'Icon']}"></c-icon>
     </span>
-
-    <a class="${styles.base}" if.bind="row[col.colHeadName + 'URL']" href="${row[col.colHeadName + 'URL']}">${value}</a>
-
-    <span class="${styles.base}  ${styles.textAction}" if.bind="col.colAction" click.delegate="col.colAction(row)">${value}</span>
+    <a
+        class="${styles.base}"
+        href="${row[col.colHeadName + 'URL']}"
+        if.bind="row[col.colHeadName + 'URL']"
+    >
+        ${value}
+    </a>
+    <span
+        class="${styles.base}  ${styles.textAction}"
+        click.delegate="col.colAction(row)"
+        if.bind="col.colAction"
+    >
+        ${value}
+    </span>
 </template>
diff --git a/src/components/tables/td-contents/c-td-button/c-td-button.html b/src/components/tables/td-contents/c-td-button/c-td-button.html
index cafe83b0..d88b01c5 100644
--- a/src/components/tables/td-contents/c-td-button/c-td-button.html
+++ b/src/components/tables/td-contents/c-td-button/c-td-button.html
@@ -5,12 +5,13 @@
 
 <template>
     <c-button
-            size="small"
-            color="${row[col.colHeadName + 'ButtonColor'] ? row[col.colHeadName + 'ButtonColor'] : 'primary'}"
-            state="${row[col.colHeadName + 'ButtonState']}"
-            icon="${row[col.colHeadName + 'ButtonIcon']}"
-            icon-position="center"
-            action.call="col.colAction(row)">
+        size="small"
+        color="${row[col.colHeadName + 'ButtonColor'] ? row[col.colHeadName + 'ButtonColor'] : 'primary'}"
+        state="${row[col.colHeadName + 'ButtonState']}"
+        icon="${row[col.colHeadName + 'ButtonIcon']}"
+        icon-position="center"
+        action.call="col.colAction(row)"
+    >
         ${value}
     </c-button>
 </template>
diff --git a/src/components/tables/td-contents/c-td-drag-check/c-td-drag-check.html b/src/components/tables/td-contents/c-td-drag-check/c-td-drag-check.html
index afcc8b66..b4234006 100644
--- a/src/components/tables/td-contents/c-td-drag-check/c-td-drag-check.html
+++ b/src/components/tables/td-contents/c-td-drag-check/c-td-drag-check.html
@@ -4,9 +4,6 @@
 -->
 
 <template>
-    <c-drag-handle
-        drag-options.bind="col.getDragOptions(row)"
-    >
-    </c-drag-handle>
+    <c-drag-handle drag-options.bind="col.getDragOptions(row)"></c-drag-handle>
     <c-checkbox-input checked-value.bind="row[col.colHeadName]"></c-checkbox-input>
 </template>
diff --git a/src/components/tables/td-contents/c-td-image/c-td-image.html b/src/components/tables/td-contents/c-td-image/c-td-image.html
index c6eb5352..48b1c8f2 100644
--- a/src/components/tables/td-contents/c-td-image/c-td-image.html
+++ b/src/components/tables/td-contents/c-td-image/c-td-image.html
@@ -6,5 +6,9 @@
 <template>
 	<require from="./c-td-image.css"></require>
 
-    <img class="${styles.image}" src="${value}" alt="${row[col.colHeadName + 'Alt']}">
+    <img
+        class="${styles.image}"
+        src="${value}"
+        alt="${row[col.colHeadName + 'Alt']}"
+    >
 </template>
diff --git a/src/components/tables/td-contents/c-td-text-input/c-td-text-input.html b/src/components/tables/td-contents/c-td-text-input/c-td-text-input.html
index 79f83aeb..20620ff0 100644
--- a/src/components/tables/td-contents/c-td-text-input/c-td-text-input.html
+++ b/src/components/tables/td-contents/c-td-text-input/c-td-text-input.html
@@ -4,5 +4,9 @@
 -->
 
 <template>
-    <c-form-text acl-restricted text-value.bind="row[col.colHeadName]" keyup.delegate="changeDetection(row, col)"></c-form-text>
+    <c-form-text
+        acl-restricted
+        text-value.bind="row[col.colHeadName]"
+        keyup.delegate="changeDetection(row, col)"
+    ></c-form-text>
 </template>
diff --git a/src/components/tables/td-contents/c-td-tip/c-td-tip.html b/src/components/tables/td-contents/c-td-tip/c-td-tip.html
index 4d8a71d8..f9faad0f 100644
--- a/src/components/tables/td-contents/c-td-tip/c-td-tip.html
+++ b/src/components/tables/td-contents/c-td-tip/c-td-tip.html
@@ -4,7 +4,12 @@
 -->
 
 <template>
-    <c-tip side="${row[col.colHeadName + 'TipSide']}" arrow-position="${row[col.colHeadName + 'TipArrowPosition']}" size="${row[col.colHeadName + 'TipSize']}" icon-tip.bind="true">
+    <c-tip
+        side="${row[col.colHeadName + 'TipSide']}"
+        arrow-position="${row[col.colHeadName + 'TipArrowPosition']}"
+        size="${row[col.colHeadName + 'TipSize']}"
+        icon-tip.bind="true"
+    >
         <div slot="trigger">
             <span if.bind="row[col.colHeadName + 'TipTriggerIcon']">
                 <c-icon icon="${row[col.colHeadName + 'TipTriggerIcon']}"></c-icon>
@@ -12,7 +17,11 @@
             <span if.bind="row[col.colHeadName + 'TipTriggerText']">${row[col.colHeadName + 'TipTriggerText']}</span>
         </div>
         <div slot="content">
-            <compose if.bind="row[col.colHeadName + 'TipViewModel']" view-model.bind="row[col.colHeadName + 'TipViewModel']" model.bind="{row:row, col:col}"></compose>
+            <compose
+                if.bind="row[col.colHeadName + 'TipViewModel']"
+                view-model.bind="row[col.colHeadName + 'TipViewModel']"
+                model.bind="{row:row, col:col}"
+            ></compose>
         </div>
     </c-tip>
 </template>
diff --git a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
index e759916d..1d44a9bd 100644
--- a/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
+++ b/src/components/tables/td-contents/c-td-truncate/c-td-truncate.html
@@ -7,12 +7,13 @@
 	<require from="./c-td-truncate.css"></require>
 
 	<c-tip
-	if.bind="row[col.colHeadName + 'Tip']"
-	side="${row[col.colHeadName + 'TipSide']}"
-	arrow-position="${row[col.colHeadName + 'TipArrowPosition']}"
-	size="${row[col.colHeadName + 'TipSize']}"
-	fill-width-trigger.bind="true"
-	force-close.bind="true">
+        if.bind="row[col.colHeadName + 'Tip']"
+        side="${row[col.colHeadName + 'TipSide']}"
+        arrow-position="${row[col.colHeadName + 'TipArrowPosition']}"
+        size="${row[col.colHeadName + 'TipSize']}"
+        fill-width-trigger.bind="true"
+        force-close.bind="true"
+    >
 		<div slot="trigger" >
 			<div class="${styles.container}">
 				<div class="${styles.truncate}">
@@ -22,17 +23,27 @@
 			</div>
 		</div>
 		<div slot="content">
-			<compose if.bind="row[col.colHeadName + 'TipViewModel']" view-model.bind="row[col.colHeadName + 'TipViewModel']" model.bind="{row:row, col:col}"></compose>
+			<compose
+                if.bind="row[col.colHeadName + 'TipViewModel']"
+                view-model.bind="row[col.colHeadName + 'TipViewModel']"
+                model.bind="{row:row, col:col}"
+            ></compose>
 			<div else>${value}</div>
 		</div>
 	</c-tip>
 
     <div else class="${styles.container}">
-        <c-icon icon="${row[col.colHeadName + 'Icon']}" if.bind="row[col.colHeadName + 'Icon']"></c-icon>
+        <c-icon
+            icon="${row[col.colHeadName + 'Icon']}"
+            if.bind="row[col.colHeadName + 'Icon']"
+        ></c-icon>
         <div class="${styles.truncate}">
             <span title="${value}">
                 <span if.bind="!searchHighlight">${value}</span>
-                <span if.bind="searchHighlight" innerhtml.bind="searchHighlight"></span>
+                <span
+                    if.bind="searchHighlight"
+                    innerhtml.bind="searchHighlight"
+                ></span>
             </span>
         </div>
     </div>

From 1b5ee9634467ee37b65ad55a5a8d7dd333d25713 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 15:17:55 -0600
Subject: [PATCH 28/38] c-tile html clean up

---
 src/components/tile/c-tile/c-tile.html | 79 +++++++++++++++++++++-----
 1 file changed, 65 insertions(+), 14 deletions(-)

diff --git a/src/components/tile/c-tile/c-tile.html b/src/components/tile/c-tile/c-tile.html
index fd0686e1..82fc4a04 100644
--- a/src/components/tile/c-tile/c-tile.html
+++ b/src/components/tile/c-tile/c-tile.html
@@ -6,42 +6,93 @@
 <template>
 	<require from="./c-tile.css"></require>
 
-    <div class="${styles.tile}  ${checkedValue ? styles.checked : ''}  ${hover ? styles.hover : ''}" id="${id}" if.bind="_state !== 'hidden'">
-        <div title="${title}" class="${styles.container}">
-            <c-tip side="left" size="small" icon-tip.bind="true" class="${styles.tip}" if.bind="showTip">
+    <div
+        class="${styles.tile}  ${checkedValue ? styles.checked : ''}  ${hover ? styles.hover : ''}"
+        id="${id}"
+        if.bind="_state !== 'hidden'"
+    >
+        <div
+            title="${title}"
+            class="${styles.container}"
+        >
+            <c-tip
+                side="left"
+                size="small"
+                icon-tip.bind="true"
+                class="${styles.tip}"
+                if.bind="showTip"
+            >
                 <div slot="trigger">
-                    <c-icon icon="${tipIcon}" color="lightGray"></c-icon>
+                    <c-icon
+                        icon="${tipIcon}"
+                        color="lightGray"
+                    ></c-icon>
                 </div>
                 <div slot="content">
                     <template part="tip-content" replaceable></template>
                 </div>
             </c-tip>
-            <div class="${styles.image}" css="height: ${imageContainerHeight}px;" click.trigger="tileClick()">
+            <div
+                class="${styles.image}"
+                css="height: ${imageContainerHeight}px;"
+                click.trigger="tileClick()"
+            >
                 <c-drag-handle
                     class="${styles.drag}"
                     if.bind="showDrag"
                     drag-draggable.bind="dragOptions"
+                ></c-drag-handle>
+                <div
+                    class="${styles.status}  ${styles[status]}"
+                    if.bind="status"
+                ></div>
+                <img
+                    if.bind="imageUrl"
+                    src="${imageUrl}"
+                    alt="Image Loading"
+                    title="${id}"
                 >
-                </c-drag-handle>
-                <div class="${styles.status}  ${styles[status]}" if.bind="status"></div>
-                <img if.bind="imageUrl" src="${imageUrl}" alt="Image Loading" title="${id}">
-                <c-h5 color="smoke" if.bind="!imageUrl">${noImageMessage}</c-h5>
+                <c-h5
+                    color="smoke"
+                    if.bind="!imageUrl"
+                >
+                    ${noImageMessage}
+                </c-h5>
             </div>
             <div class="${styles.title}">
                 <l-cluster spacing="var(--s-4)">
                     <div>
-                        <div class="${styles.checkboxContainer}" if.bind="showCheckbox && _state !== 'disabled'">
+                        <div
+                            class="${styles.checkboxContainer}"
+                            if.bind="showCheckbox && _state !== 'disabled'"
+                        >
                             <c-checkbox-input checked-value.bind="checkedValue"></c-checkbox-input>
                         </div>
-                        <c-h4 spacing-bottom="sbNone" truncate.bind="true" click.trigger="showCheckbox && state !== 'disabled' ? checkedValue = !checkedValue : ''">
-                            <c-icon icon="${titleIcon}" size="tiny" if.bind="titleIcon"></c-icon>
+                        <c-h4
+                            truncate.bind="true"
+                            click.trigger="showCheckbox && state !== 'disabled' ? checkedValue = !checkedValue : ''"
+                        >
+                            <c-icon
+                                icon="${titleIcon}"
+                                size="tiny"
+                                if.bind="titleIcon"
+                            ></c-icon>
                             <span if.bind="!searchHighlight">${title}</span>
-                            <span if.bind="searchHighlight" innerhtml.bind="searchHighlight"></span>
+                            <span
+                                if.bind="searchHighlight"
+                                innerhtml.bind="searchHighlight"
+                            ></span>
                         </c-h4>
                     </div>
                 </l-cluster>
             </div>
-            <c-p size="small" truncate.bind="true" spacing-bottom="sbNone" click.trigger="tileClick()" if.bind="message">${message}</c-p>
+            <c-p
+                size="small"
+                truncate.bind="true"
+                spacing-bottom="sbNone"
+                click.trigger="tileClick()"
+                if.bind="message"
+            >${message}</c-p>
         </div>
     </div>
 </template>

From 9997d720f8e861deed7da18d07226cc0517180f9 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 16:07:16 -0600
Subject: [PATCH 29/38] c-tile html clean up

---
 src/components/tile/c-tile/c-tile.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/tile/c-tile/c-tile.html b/src/components/tile/c-tile/c-tile.html
index 82fc4a04..a4c9ae19 100644
--- a/src/components/tile/c-tile/c-tile.html
+++ b/src/components/tile/c-tile/c-tile.html
@@ -92,7 +92,9 @@
                 spacing-bottom="sbNone"
                 click.trigger="tileClick()"
                 if.bind="message"
-            >${message}</c-p>
+            >
+                ${message}
+            </c-p>
         </div>
     </div>
 </template>

From c6b46d433e27a75b89138cf9f1821f50a48a82ab Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 16:18:54 -0600
Subject: [PATCH 30/38] timeline and c-toasts html clean up

---
 .../timeline/c-time-entry/c-time-entry.html   | 37 ++++++++++++++++---
 .../c-timeline-block/c-timeline-block.html    | 19 ++++++++--
 .../c-timeline-container.html                 |  5 ++-
 .../c-timeline-week-container.html            |  7 +++-
 .../timeline/c-timeline/c-timeline.html       | 30 ++++++++++-----
 src/components/toasts/c-toasts/c-toasts.html  | 29 +++++++++++----
 6 files changed, 97 insertions(+), 30 deletions(-)

diff --git a/src/components/timeline/c-time-entry/c-time-entry.html b/src/components/timeline/c-time-entry/c-time-entry.html
index 0e19affa..935bdcc4 100644
--- a/src/components/timeline/c-time-entry/c-time-entry.html
+++ b/src/components/timeline/c-time-entry/c-time-entry.html
@@ -30,16 +30,41 @@
             --time-entry-color: ${item.color ? item.color : 'inherit'};
         "
     >
-        <div click.trigger="openPopover($event)" class="${styles.container}">
+        <div
+            click.trigger="openPopover($event)"
+            class="${styles.container}"
+        >
             <div class="${styles.info}  ${item.icons ? styles.infoWithIcons : ''}">
-                <c-p truncate.bind="true" size="small">
+                <c-p
+                    truncate.bind="true"
+                    size="small"
+                >
                     ${item.title}
                 </c-p>
-                <c-p truncate.bind="true" size="small" if.bind="item.startTime && item.endTime && !item.altTime">${item.startTime} - ${item.endTime}</c-p>
-                <c-p truncate.bind="true" size="small" if.bind="item.altTime">${item.altTime}</c-p>
+                <c-p
+                    truncate.bind="true"
+                    size="small"
+                    if.bind="item.startTime && item.endTime && !item.altTime"
+                >
+                    ${item.startTime} - ${item.endTime}
+                </c-p>
+                <c-p
+                    truncate.bind="true"
+                    size="small"
+                    if.bind="item.altTime"
+                >
+                    ${item.altTime}
+                </c-p>
             </div>
-            <div class="${styles.icons} ${item.shiftIcons ? styles.iconsShift : ''}" if.bind="item.icons">
-                <c-icon repeat.for="icon of item.icons" icon="${icon}" if.bind="$index < 2"></c-icon>
+            <div
+                class="${styles.icons} ${item.shiftIcons ? styles.iconsShift : ''}"
+                if.bind="item.icons"
+            >
+                <c-icon
+                    repeat.for="icon of item.icons"
+                    icon="${icon}"
+                    if.bind="$index < 2"
+                ></c-icon>
             </div>
         </div>
     </div>
diff --git a/src/components/timeline/c-timeline-block/c-timeline-block.html b/src/components/timeline/c-timeline-block/c-timeline-block.html
index ff74927d..c645fa4d 100644
--- a/src/components/timeline/c-timeline-block/c-timeline-block.html
+++ b/src/components/timeline/c-timeline-block/c-timeline-block.html
@@ -6,10 +6,21 @@
 <template>
 	<require from="./c-timeline-block.css"></require>
 
-    <div class="${styles.timeBlock}" click.trigger="togglePopoverFunction($event)">
-        <span if.bind="time" class="${styles.time}">${time}</span>
+    <div
+        class="${styles.timeBlock}"
+        click.trigger="togglePopoverFunction($event)"
+    >
+        <span
+            class="${styles.time}"
+            if.bind="time"
+        >
+            ${time}
+        </span>
         <slot></slot>
-
-        <c-time-entry if.bind="newItem" item.bind="newItem" view-model.ref="placeholderEntry"></c-time-entry>
+        <c-time-entry
+            item.bind="newItem"
+            view-model.ref="placeholderEntry"
+            if.bind="newItem"
+        ></c-time-entry>
     </div>
 </template>
diff --git a/src/components/timeline/c-timeline-container/c-timeline-container.html b/src/components/timeline/c-timeline-container/c-timeline-container.html
index 7f395f4a..38cd87bd 100644
--- a/src/components/timeline/c-timeline-container/c-timeline-container.html
+++ b/src/components/timeline/c-timeline-container/c-timeline-container.html
@@ -18,7 +18,10 @@
             <c-spinner if.bind="loading"></c-spinner>
             <div class="${styles.wrapper}">
                 <div
-                    class="${styles.spinner}  ${loadingBottom ? styles.spinnerLoadingBottom : ''}"
+                    class="
+                        ${styles.spinner}
+                        ${loadingBottom ? styles.spinnerLoadingBottom : ''}
+                    "
                     if.bind="loadingTop || loadingBottom"
                 >
                     <c-spinner size="small"></c-spinner>
diff --git a/src/components/timeline/c-timeline-week-container/c-timeline-week-container.html b/src/components/timeline/c-timeline-week-container/c-timeline-week-container.html
index 1fab45f7..d3539b97 100644
--- a/src/components/timeline/c-timeline-week-container/c-timeline-week-container.html
+++ b/src/components/timeline/c-timeline-week-container/c-timeline-week-container.html
@@ -9,7 +9,12 @@
     <div class="${styles.wrapper}">
         <div class="${styles.dates}">
             <span repeat.for="day of days">
-                <a click.trigger="changeDate(day.date)" class="${day.today ? styles.today : ''}">${day.date | isoToDayWeek}</a>
+                <a
+                    click.trigger="changeDate(day.date)"
+                    class="${day.today ? styles.today : ''}"
+                >
+                    ${day.date | isoToDayWeek}
+                </a>
             </span>
         </div>
         <div class="${styles.days}">
diff --git a/src/components/timeline/c-timeline/c-timeline.html b/src/components/timeline/c-timeline/c-timeline.html
index bdb97ffb..2a92d7ba 100644
--- a/src/components/timeline/c-timeline/c-timeline.html
+++ b/src/components/timeline/c-timeline/c-timeline.html
@@ -6,7 +6,10 @@
 <template>
     <c-spinner if.bind="isLoading"></c-spinner>
     <c-spinner if.bind="isRendering && !isLoading"></c-spinner>
-    <div if.bind="!isLoading" id.bind="id">
+    <div
+        id.bind="id"
+        if.bind="!isLoading"
+    >
         <div show.bind="!isRendering">
             <c-timeline-container
                 if.bind="timeView === 'day'"
@@ -21,30 +24,37 @@
                     add-entry-offset.call="calculatePlaceholder(isoTime, mouseOffset)"
                     prevent-create.call="checkPreventAdd(isoTime)"
                     new-entry-view-model.bind="newEntryViewModel"
-                >
-                </c-timeline-block>
+                ></c-timeline-block>
                 <c-time-entry
                     repeat.for="entry of transformedEntries"
                     item.bind="entry"
                     class="timeline-day"
-                >
-                </c-time-entry>
+                ></c-time-entry>
             </c-timeline-container>
-            <c-timeline-week-container if.bind="timeView === 'week' || timeView === 'three-day'" days.bind="displayDays" day-click.call="dayClick(date)">
+            <c-timeline-week-container
+                days.bind="displayDays"
+                day-click.call="dayClick(date)"
+                if.bind="timeView === 'week' || timeView === 'three-day'"
+            >
                 <div slot="hours">
                     <c-timeline-container>
-                        <c-timeline-block repeat.for="block of blocks" time.one-time="block.time">
+                        <c-timeline-block
+                            repeat.for="block of blocks"
+                            time.one-time="block.time"
+                        >
                     </c-timeline-container>
                 </div>
-                <c-timeline-container repeat.for="day of displayDays" current-time-top.bind="day.currentTimeLine">
+                <c-timeline-container
+                    repeat.for="day of displayDays"
+                    current-time-top.bind="day.currentTimeLine"
+                >
                     <c-timeline-block
                         repeat.for="block of day.blocks & oneTime"
                         iso-time.bind="block.isoTime"
                         add-entry-offset.call="calculatePlaceholder(isoTime, mouseOffset)"
                         prevent-create.call="checkPreventAdd(isoTime)"
                         new-entry-view-model.bind="newEntryViewModel"
-                    >
-                    </c-timeline-block>
+                    ></c-timeline-block>
                     <c-time-entry
                         repeat.for="entry of day.entries"
                         item.bind="entry"
diff --git a/src/components/toasts/c-toasts/c-toasts.html b/src/components/toasts/c-toasts/c-toasts.html
index fae222ec..29b89f1a 100644
--- a/src/components/toasts/c-toasts/c-toasts.html
+++ b/src/components/toasts/c-toasts/c-toasts.html
@@ -7,10 +7,12 @@
 	<require from="./c-toasts.css"></require>
 
     <div class="${styles.wrapper}">
-        <div repeat.for="toast of vToastsService.toasts"
-             class="${styles.toaster}  ${styles[toast.type]}"
-             mouseover.trigger="vToastsService.keepAlive(toast.id)"
-             mouseout.trigger="vToastsService.resetTimeout(toast.id)">
+        <div
+            repeat.for="toast of vToastsService.toasts"
+            class="${styles.toaster}  ${styles[toast.type]}"
+            mouseover.trigger="vToastsService.keepAlive(toast.id)"
+            mouseout.trigger="vToastsService.resetTimeout(toast.id)"
+        >
             <div class="${styles.titleBar}">
                 <div class="${styles.iconContainer}">
                     <c-icon
@@ -21,14 +23,25 @@
                     </c-icon>
                 </div>
                 <c-h4 class="${styles.title}">${toast.title}</c-h4>
-                <a href="#" class="${styles.close}" click.trigger="vToastsService.remove(toast)">
-                    <c-icon icon="x" color="lightGray" size="tiny"></c-icon>
+                <a
+                    href="#"
+                    class="${styles.close}"
+                    click.trigger="vToastsService.remove(toast)"
+                >
+                    <c-icon
+                        icon="x"
+                        color="lightGray"
+                        size="tiny"
+                    ></c-icon>
                 </a>
             </div>
 
             <!-- If there is no extra message this can be false -->
-            <div class="${styles.message}" if.bind="true">
-                <c-p spacing-bottom="sbNone">${toast.message}</c-p>
+            <div
+                class="${styles.message}"
+                if.bind="true"
+            >
+                <c-p>${toast.message}</c-p>
             </div>
         </div>
     </div>

From 661f5c6a25a76bf884cf6bb917c216d09205e3e3 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Thu, 26 Mar 2020 16:20:25 -0600
Subject: [PATCH 31/38] c-list html clean up

---
 src/components/type/list/c-list/c-list.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/type/list/c-list/c-list.html b/src/components/type/list/c-list/c-list.html
index 4c587ad3..c3341d80 100644
--- a/src/components/type/list/c-list/c-list.html
+++ b/src/components/type/list/c-list/c-list.html
@@ -6,7 +6,10 @@
 <template>
 	<require from="./c-list.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="label"
+    >
         <c-label state="${state}">
             ${label}
         </c-label>

From a0e48161393deb697255015f6b02a8b860c9dfa3 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Fri, 27 Mar 2020 10:03:25 -0600
Subject: [PATCH 32/38] organize class names in html

---
 src/components/buttons/c-button/c-button.html | 18 ++++++++-
 src/components/copy/c-copy/c-copy.html        | 14 ++++++-
 .../forms/c-form-error/c-form-error.html      |  7 +++-
 .../forms/c-form-image/c-form-image.html      |  5 ++-
 .../forms/c-form-warning/c-form-warning.html  |  7 +++-
 src/components/forms/c-label/c-label.html     | 12 +++++-
 .../c-form-checkbox-radio-container.html      |  6 ++-
 .../c-checkbox-input/c-checkbox-input.html    |  5 ++-
 .../c-checkbox-label/c-checkbox-label.html    |  5 ++-
 .../radio/c-radio-input/c-radio-input.html    |  6 ++-
 .../radio/c-radio-label/c-radio-label.html    |  5 ++-
 .../toggle/c-toggle-input/c-toggle-input.html |  7 +++-
 .../toggle/c-toggle-label/c-toggle-label.html |  5 ++-
 .../forms/date/c-form-date/c-form-date.html   |  7 +++-
 .../forms/file/c-file-input/c-file-input.html | 10 ++++-
 .../forms/file/c-form-file/c-form-file.html   |  9 +++--
 .../select/c-form-select/c-form-select.html   | 13 ++++--
 .../forms/slider/c-slider/c-slider.html       |  5 ++-
 .../forms/text/c-form-text/c-form-text.html   |  8 +++-
 .../forms/text/c-text-input/c-text-input.html | 37 +++++++++++++----
 .../c-form-textarea/c-form-textarea.html      |  7 +++-
 .../c-textarea-input/c-textarea-input.html    |  6 ++-
 src/components/icons/c-icon/c-icon.html       |  7 +++-
 src/components/modal/c-modal/c-modal.html     | 16 ++++----
 .../c-nav-horizontal-item.html                |  6 ++-
 .../c-nav-horizontal/c-nav-horizontal.html    | 17 ++++++--
 .../c-nav-vertical-sliding.html               | 13 +++++-
 .../navs/c-nav-vertical/c-nav-vertical.html   |  6 ++-
 .../c-notification/c-notification.html        | 14 ++++++-
 src/components/pills/c-pill/c-pill.html       | 10 ++++-
 .../popover/c-popover/c-popover.html          |  5 ++-
 .../td-contents/c-td-action/c-td-action.html  |  5 ++-
 .../c-time-entry/c-time-entry-popover.html    | 16 ++++++--
 src/components/type/h3/c-h3.html              | 16 +++++++-
 src/components/type/h4/c-h4.html              |  9 ++++-
 src/components/type/h5/c-h5.html              |  9 ++++-
 .../c-list-container/c-list-container.html    |  9 ++++-
 .../type/list/c-list-item/c-list-item.html    |  8 +++-
 src/components/type/list/c-list/c-list.html   |  7 +++-
 .../c-drag-handle/c-drag-handle.html          |  6 ++-
 .../utilities/c-label-box/c-label-box.html    | 12 +++++-
 .../utilities/c-spinner/c-spinner.html        |  7 +++-
 .../utilities/c-status/c-status.html          | 40 ++++++++++++++++---
 src/layouts/l-grid/l-grid.html                |  5 ++-
 44 files changed, 367 insertions(+), 80 deletions(-)

diff --git a/src/components/buttons/c-button/c-button.html b/src/components/buttons/c-button/c-button.html
index a2c462a4..bba00627 100644
--- a/src/components/buttons/c-button/c-button.html
+++ b/src/components/buttons/c-button/c-button.html
@@ -8,7 +8,14 @@
 
     <button
         disabled.bind="_state === 'thinking' || _state === 'disabled'"
-        class="${styles.button}  ${styles[color]}  ${styles[size]}  ${styles[_state]}  ${icon ? styles.icon : ''}  ${styles[iconPosition]}"
+        class="
+            ${styles.button}
+            ${styles[color]}
+            ${styles[size]}
+            ${styles[_state]}
+            ${icon ? styles.icon : ''}
+            ${styles[iconPosition]}
+        "
         click.trigger="actionFunction()"
         type="${type}"
         hide.bind="title || _state === 'hidden'"
@@ -26,7 +33,14 @@
     <a
         href.bind="href"
         target="${targetNew ? '_blank' : '_self'}"
-        class="${styles.button}  ${styles[color]}  ${styles[size]}  ${styles[_state]}  ${icon ? styles.icon : ''}  ${styles[iconPosition]}"
+        class="
+            ${styles.button}
+            ${styles[color]}
+            ${styles[size]}
+            ${styles[_state]}
+            ${icon ? styles.icon : ''}
+            ${styles[iconPosition]}
+        "
         if.bind="title && _state !== 'hidden'"
     >
         <c-icon
diff --git a/src/components/copy/c-copy/c-copy.html b/src/components/copy/c-copy/c-copy.html
index d12f66b9..a2ec1e6b 100644
--- a/src/components/copy/c-copy/c-copy.html
+++ b/src/components/copy/c-copy/c-copy.html
@@ -14,11 +14,21 @@
             <slot name="tip"></slot>
         </div>
         <div class="${styles.container}">
-            <div class="${styles.content}  ${wrap ? styles.wrap : ''}  ${!link ? '' : styles.hide}">
+            <div
+                class="
+                    ${styles.content}
+                    ${wrap ? styles.wrap : ''}
+                    ${!link ? '' : styles.hide}
+                "
+            >
                 ${content}
             </div>
             <a
-                class="${styles.content}  ${wrap ? styles.wrap : ''}  ${link ? '' : styles.hide}"
+                class="
+                    ${styles.content}
+                    ${wrap ? styles.wrap : ''}
+                    ${link ? '' : styles.hide}
+                "
                 href="${content}"
                 target="_blank"
             >
diff --git a/src/components/forms/c-form-error/c-form-error.html b/src/components/forms/c-form-error/c-form-error.html
index 1f62501a..14b7a7cd 100644
--- a/src/components/forms/c-form-error/c-form-error.html
+++ b/src/components/forms/c-form-error/c-form-error.html
@@ -6,7 +6,12 @@
 <template>
 	<require from="./c-form-error.css"></require>
 
-    <span class="${styles.base}  ${styles[state]}">
+    <span
+        class="
+            ${styles.base}
+            ${styles[state]}
+        "
+    >
         <span class="${styles.errorBlock}">
             <slot></slot>
         </span>
diff --git a/src/components/forms/c-form-image/c-form-image.html b/src/components/forms/c-form-image/c-form-image.html
index d3936039..7741f6be 100644
--- a/src/components/forms/c-form-image/c-form-image.html
+++ b/src/components/forms/c-form-image/c-form-image.html
@@ -8,7 +8,10 @@
 
     <label
         for="${id}"
-        class="${styles.label}  ${styles[state]}"
+        class="
+            ${styles.label}
+            ${styles[state]}
+        "
     >
         <div class="${styles.container}">
             <div class="${styles.image}">
diff --git a/src/components/forms/c-form-warning/c-form-warning.html b/src/components/forms/c-form-warning/c-form-warning.html
index 1b8da6ff..b458aa0d 100644
--- a/src/components/forms/c-form-warning/c-form-warning.html
+++ b/src/components/forms/c-form-warning/c-form-warning.html
@@ -6,7 +6,12 @@
 <template>
 	<require from="./c-form-warning.css"></require>
 
-    <span class="${styles.base}  ${styles[state]}">
+    <span
+        class="
+            ${styles.base}
+            ${styles[state]}
+        "
+    >
         <span class="${styles.warningBlock}">
             <slot></slot>
         </span>
diff --git a/src/components/forms/c-label/c-label.html b/src/components/forms/c-label/c-label.html
index 66bb4e2a..a9e614c1 100644
--- a/src/components/forms/c-label/c-label.html
+++ b/src/components/forms/c-label/c-label.html
@@ -6,7 +6,12 @@
 <template>
 	<require from="./c-label.css"></require>
 
-    <label class="${styles.label}  ${styles[state]}">
+    <label
+        class="
+            ${styles.label}
+            ${styles[state]}
+        "
+    >
         <c-icon
             icon="${icon}"
             color="${labelIconColor}"
@@ -21,7 +26,10 @@
             Edit
         </span>
         <span
-            class="${styles.edit}  ${styles.done}"
+            class="
+                ${styles.edit}
+                ${styles.done}
+            "
             click.trigger="doneEditingActionFunction()"
             if.bind="editable && editing"
         >
diff --git a/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html b/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html
index f41337f6..f9824a0b 100644
--- a/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html
+++ b/src/components/forms/checkbox-radio/c-form-checkbox-radio-container/c-form-checkbox-radio-container.html
@@ -17,7 +17,11 @@
             <slot name="tip"></slot>
         </div>
         <div
-            class="${styles[layout]}  ${label === undefined ? styles.noLabel : ''}  js-input-list"
+            class="
+                ${styles[layout]}
+                ${label === undefined ? styles.noLabel : ''}
+                js-input-list
+            "
             show.bind="_state !== 'hidden' && _state !== 'disabled'"
         >
             <l-stack spacing="var(--s-4)">
diff --git a/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html b/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html
index 26b735c8..5cca94ac 100644
--- a/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html
+++ b/src/components/forms/checkbox-radio/checkbox/c-checkbox-input/c-checkbox-input.html
@@ -10,7 +10,10 @@
         disabled.bind="state === 'disabled'"
         id="${id}"
         type="checkbox"
-        class="${styles.check}  ${state === 'disabled' ? styles.disabled : ''}"
+        class="
+            ${styles.check}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
         checked.bind="checkedValue"
         change.delegate="valueChanged()"
     >
diff --git a/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html b/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html
index d93c693a..6574e202 100644
--- a/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html
+++ b/src/components/forms/checkbox-radio/checkbox/c-checkbox-label/c-checkbox-label.html
@@ -7,7 +7,10 @@
 	<require from="./c-checkbox-label.css"></require>
 
     <label
-        class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}"
+        class="
+            ${styles.label}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
         for="${id}"
     >
         <slot></slot>
diff --git a/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html b/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html
index 35b4da56..f1d476fa 100644
--- a/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html
+++ b/src/components/forms/checkbox-radio/radio/c-radio-input/c-radio-input.html
@@ -12,7 +12,11 @@
         id="${id}"
         name="${name}"
         type="radio"
-        class="${styles.radio}  ${state === 'disabled' ? styles.disabled : ''}  js-radio"
+        class="
+            ${styles.radio}
+            ${state === 'disabled' ? styles.disabled : ''}
+            js-radio
+        "
         checked.bind="checked"
         model="${id}"
     >
diff --git a/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html b/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html
index 68ef4924..36282c2f 100644
--- a/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html
+++ b/src/components/forms/checkbox-radio/radio/c-radio-label/c-radio-label.html
@@ -7,7 +7,10 @@
 	<require from="./c-radio-label.css"></require>
 
     <label
-        class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}"
+        class="
+            ${styles.label}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
         for="${id}"
     >
         <slot></slot>
diff --git a/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html b/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html
index 849efd50..3652b714 100644
--- a/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html
+++ b/src/components/forms/checkbox-radio/toggle/c-toggle-input/c-toggle-input.html
@@ -6,7 +6,12 @@
 <template>
 	<require from="./c-toggle-input.css"></require>
 
-    <label class="${styles.bin} ${state === 'disabled' ? styles.disabled : ''}">
+    <label
+        class="
+            ${styles.bin}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
+    >
         <input
             disabled.bind="state === 'disabled'"
             id="${id}"
diff --git a/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html b/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html
index 3478505e..9953ef28 100644
--- a/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html
+++ b/src/components/forms/checkbox-radio/toggle/c-toggle-label/c-toggle-label.html
@@ -7,7 +7,10 @@
 	<require from="./c-toggle-label.css"></require>
 
     <label
-        class="${styles.label}  ${state === 'disabled' ? styles.disabled : ''}"
+        class="
+            ${styles.label}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
         for="${id}"
     >
         <slot></slot>
diff --git a/src/components/forms/date/c-form-date/c-form-date.html b/src/components/forms/date/c-form-date/c-form-date.html
index c15ad467..66a47578 100644
--- a/src/components/forms/date/c-form-date/c-form-date.html
+++ b/src/components/forms/date/c-form-date/c-form-date.html
@@ -19,7 +19,12 @@
         </c-label>
         <slot name="tip"></slot>
     </div>
-    <div class="${styles.container}  ${inline ? styles.inlineContainer : ''}">
+    <div
+        class="
+            ${styles.container}
+            ${inline ? styles.inlineContainer : ''}
+        "
+    >
         <c-text-input
             if.bind="_state !== 'disabled' && _state !== 'hidden'"
             placeholder.bind="placeholder"
diff --git a/src/components/forms/file/c-file-input/c-file-input.html b/src/components/forms/file/c-file-input/c-file-input.html
index 71b253ca..00323695 100644
--- a/src/components/forms/file/c-file-input/c-file-input.html
+++ b/src/components/forms/file/c-file-input/c-file-input.html
@@ -14,15 +14,21 @@
             <a href="#">Upload</a>
         </span>
         <input
+            class="
+                ${styles.file}
+                ${state === 'error' ? styles.error : ''}
+            "
             type="file"
-            class="${styles.file}  ${state === 'error' ? styles.error : ''}"
             change.delegate="filesUploaded($event)"
             accept="image/*"
         >
     </div>
     <input
+        class="
+            ${styles.file}
+            ${state === 'error' ? styles.error : ''}
+        "
         type="file"
-        class="${styles.file}  ${state === 'error' ? styles.error : ''}"
         if.bind="!imagePicker"
         change.delegate="filesUploaded($event)"
     >
diff --git a/src/components/forms/file/c-form-file/c-form-file.html b/src/components/forms/file/c-form-file/c-form-file.html
index bd67271e..dd450f19 100644
--- a/src/components/forms/file/c-form-file/c-form-file.html
+++ b/src/components/forms/file/c-form-file/c-form-file.html
@@ -25,7 +25,10 @@
         <c-p>No Image</c-p>
     </div>
     <div
-        class="${styles.imageSrcContainer}  ${isUploading ? styles.isUploading : ''}"
+        class="
+            ${styles.imageSrcContainer}
+            ${isUploading ? styles.isUploading : ''}
+        "
         if.bind="imgUrl && imagePicker"
     >
         <c-spinner
@@ -54,15 +57,15 @@
         <span if.bind="!files.length">None</span>
     </c-disabled>
     <a
-        click.delegate="removeImage()"
         class="${styles.removeImage}"
+        click.delegate="removeImage()"
         if.bind="imagePicker && imgUrl !== imageSrc && !showReset && _state !== 'disabled'"
     >
         Reset
     </a>
     <a
-        click.delegate="resetImage()"
         class="${styles.removeImage}"
+        click.delegate="resetImage()"
         if.bind="imagePicker && showReset && _state !== 'disabled'"
     >
         Reset
diff --git a/src/components/forms/select/c-form-select/c-form-select.html b/src/components/forms/select/c-form-select/c-form-select.html
index 017033b3..2e6e7b18 100644
--- a/src/components/forms/select/c-form-select/c-form-select.html
+++ b/src/components/forms/select/c-form-select/c-form-select.html
@@ -29,11 +29,15 @@
             button-action.call="searchSelect(textValue)">
         </c-form-text>
         <select
-            if.bind="!isLoading && _state !== 'hidden'"
-            class="${styles.select}  ${styles[_state]}  ${multiple ? styles.multiple : ''}"
+            class="
+                ${styles.select}
+                ${styles[_state]}
+                ${multiple ? styles.multiple : ''}
+            "
             value.bind="selectValue"
             multiple.bind="multiple"
             scroll.trigger="onScroll() & throttle"
+            if.bind="!isLoading && _state !== 'hidden'"
         >
             <option
                 repeat.for="option of filteredOptions"
@@ -75,7 +79,10 @@
         </l-cluster>
     </l-stack>
     <div
-        class="${isLoading ? styles.loader : ''}  ${isLoadingMore ? styles.loadingMore : ''}"
+        class="
+            ${isLoading ? styles.loader : ''}
+            ${isLoadingMore ? styles.loadingMore : ''}
+        "
         if.bind="(isLoading || isLoadingMore) && multiple"
     >
         <c-spinner size="small"></c-spinner>
diff --git a/src/components/forms/slider/c-slider/c-slider.html b/src/components/forms/slider/c-slider/c-slider.html
index 472bb5de..60eb717a 100644
--- a/src/components/forms/slider/c-slider/c-slider.html
+++ b/src/components/forms/slider/c-slider/c-slider.html
@@ -7,7 +7,10 @@
 	<require from="./c-slider.css"></require>
 
     <input
-        class="${styles.slider}  ${state === 'disabled' ? styles.disabled : ''}"
+        class="
+            ${styles.slider}
+            ${state === 'disabled' ? styles.disabled : ''}
+        "
         type="range"
         step="1"
         max="${increments}"
diff --git a/src/components/forms/text/c-form-text/c-form-text.html b/src/components/forms/text/c-form-text/c-form-text.html
index b595f4ce..7e82d8db 100644
--- a/src/components/forms/text/c-form-text/c-form-text.html
+++ b/src/components/forms/text/c-form-text/c-form-text.html
@@ -20,7 +20,11 @@
         <slot name="tip"></slot>
     </div>
     <c-text-input
-        if.bind="_state !== 'disabled' && _state !== 'hidden'"
+        class="
+            ${icon ? styles.icon : ''}
+            ${styles[iconPosition]}
+            ${alignInput && !label ? styles.alignInput : ''}
+        "
         has-focus.bind="hasFocus"
         placeholder.bind="placeholder"
         icon.bind="icon"
@@ -32,9 +36,9 @@
         button-action.call="onButtonAction(textValue)"
         clearable.bind="clearable"
         state.bind="_state"
-        class="${icon ? styles.icon : ''}  ${styles[iconPosition]}  ${alignInput && !label ? styles.alignInput : ''}"
         text-value.bind="textValue"
         event-listeners.bind="eventListeners"
+        if.bind="_state !== 'disabled' && _state !== 'hidden'"
     >
     </c-text-input>
     <c-disabled if.bind="_state === 'disabled'">
diff --git a/src/components/forms/text/c-text-input/c-text-input.html b/src/components/forms/text/c-text-input/c-text-input.html
index 7c48fdc0..7f6cb5bf 100644
--- a/src/components/forms/text/c-text-input/c-text-input.html
+++ b/src/components/forms/text/c-text-input/c-text-input.html
@@ -10,42 +10,63 @@
         if.bind="icon"
         icon="${icon}"
     ></c-icon>
-    <span class="${button || buttonText ? styles.buttonInput : ''} ${clearable ? styles.container : ''}">
+    <span
+        class="
+            ${button || buttonText ? styles.buttonInput : ''}
+            ${clearable ? styles.container : ''}
+        "
+    >
         <input
-            if.bind="placeholder"
+            class="
+                ${styles.input}
+                ${styles[iconPosition]}
+                ${state === 'error' ? styles.error : ''}
+                ${state === 'warning' ? styles.warning : ''}
+            "
             keyup.delegate="onKeyUp($event) & debounce"
             type="${type}"
-            class="${styles.input}  ${styles[iconPosition]}  ${state === 'error' ? styles.error : ''}  ${state === 'warning' ? styles.warning : ''}"
             placeholder.bind="placeholder"
             value.bind="textValue"
             focus.bind="hasFocus"
             id="${id}"
             autocomplete="off"
+            if.bind="placeholder"
         >
         <input
-            if.bind="!placeholder"
+            class="
+                ${styles.input}
+                ${styles[iconPosition]}
+                ${state === 'error' ? styles.error : ''}
+                ${state === 'warning' ? styles.warning : ''}
+            "
             keyup.delegate="onKeyUp($event) & debounce"
             type="${type}"
-            class="${styles.input}  ${styles[iconPosition]}  ${state === 'error' ? styles.error : ''}  ${state === 'warning' ? styles.warning : ''}"
             value.bind="textValue"
             focus.bind="hasFocus"
             id="${id}"
             autocomplete="off"
+            if.bind="!placeholder"
         >
         <a
-            class="${styles.clearable} ${button ? styles.clearButton : ''}"
+            class="
+                ${styles.clearable}
+                ${button ? styles.clearButton : ''}
+            "
             click.delegate="clearText()"
             if.bind="clearable && textValue"
         >
             <c-icon icon="x"></c-icon>
         </a>
         <c-button
-            if.bind="button || buttonText"
+            class="
+                ${styles.button}
+                ${button === 'bin' ? styles.bin : ''}
+            "
             color="neutral"
             icon="${button}"
             icon-position="center"
-            class="${styles.button} ${button === 'bin' ? styles.bin : ''}"
             click.delegate="buttonFn()"
+            if.bind="button || buttonText"
         >
             ${buttonText}
         </c-button>
diff --git a/src/components/forms/textarea/c-form-textarea/c-form-textarea.html b/src/components/forms/textarea/c-form-textarea/c-form-textarea.html
index b0638e2e..db3fbf86 100644
--- a/src/components/forms/textarea/c-form-textarea/c-form-textarea.html
+++ b/src/components/forms/textarea/c-form-textarea/c-form-textarea.html
@@ -16,11 +16,14 @@
         <slot name="tip"></slot>
     </div>
     <c-textarea-input
-        if.bind="_state !== 'disabled' && _state !== 'hidden'"
+        class="
+            ${styles[state]}
+            ${styles.textarea}
+        "
         placeholder.bind="placeholder"
-        class="${styles[state]}  ${styles.textarea}"
         state.bind="_state"
         textarea-value.bind="textareaValue"
+        if.bind="_state !== 'disabled' && _state !== 'hidden'"
     ></c-textarea-input>
     <c-disabled if.bind="_state === 'disabled'">
         ${textareaValue || 'None'}
diff --git a/src/components/forms/textarea/c-textarea-input/c-textarea-input.html b/src/components/forms/textarea/c-textarea-input/c-textarea-input.html
index c955e087..3dd70668 100644
--- a/src/components/forms/textarea/c-textarea-input/c-textarea-input.html
+++ b/src/components/forms/textarea/c-textarea-input/c-textarea-input.html
@@ -7,7 +7,11 @@
 	<require from="./c-textarea-input.css"></require>
 
     <textarea
-        class="${styles.textarea}  ${state == 'error' ? styles.error : ''}  ${state == 'warning' ? styles.warning : ''}"
+        class="
+            ${styles.textarea}
+            ${state == 'error' ? styles.error : ''}
+            ${state == 'warning' ? styles.warning : ''}
+        "
         placeholder.bind="placeholder"
         value.bind="textareaValue"
     ></textarea>
diff --git a/src/components/icons/c-icon/c-icon.html b/src/components/icons/c-icon/c-icon.html
index be32a51d..04a5a353 100644
--- a/src/components/icons/c-icon/c-icon.html
+++ b/src/components/icons/c-icon/c-icon.html
@@ -7,7 +7,12 @@
 	<require from="./c-icon.css"></require>
 
     <svg
-        class="${styles.icon}  ${styles[color]}  ${styles[size]}  ${action ? styles.action : ''}"
+        class="
+            ${styles.icon}
+            ${styles[color]}
+            ${styles[size]}
+            ${action ? styles.action : ''}
+        "
         click.trigger="actionFunction()"
     >
         <use xlink:href="#${icon}"></use>
diff --git a/src/components/modal/c-modal/c-modal.html b/src/components/modal/c-modal/c-modal.html
index e23475b0..b4dc04ff 100644
--- a/src/components/modal/c-modal/c-modal.html
+++ b/src/components/modal/c-modal/c-modal.html
@@ -6,12 +6,14 @@
 <template>
 	<require from="./c-modal.css"></require>
 
-    <ux-dialog class="
-        ${styles.dialog}
-        ${styles[model.size]}
-        ${model.size == 'full' ? 'js-full' : ''}
-        ${model.size == 'large' ? 'js-large' : ''}
-    ">
+    <ux-dialog
+        class="
+            ${styles.dialog}
+            ${styles[model.size]}
+            ${model.size == 'full' ? 'js-full' : ''}
+            ${model.size == 'large' ? 'js-large' : ''}
+        "
+    >
         <ux-dialog-header class="${styles.header}">
             <l-cluster
                 spacing="var(--s-1)"
@@ -36,8 +38,8 @@
                 </div>
             </l-cluster>
             <c-button
-                click.delegate="controller.cancel()"
                 class="${styles.closeButton}"
+                click.delegate="controller.cancel()"
                 icon="x"
                 icon-position="center"
             ></c-button>
diff --git a/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html b/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html
index 46421e4c..c91daf41 100644
--- a/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html
+++ b/src/components/navs/c-nav-horizontal-item/c-nav-horizontal-item.html
@@ -7,7 +7,11 @@
 	<require from="./c-nav-horizontal-item.css"></require>
 
     <li
-        class="${styles.navHorizontalItem}  ${styles[state]}  ${styles[position]}"
+        class="
+            ${styles.navHorizontalItem}
+            ${styles[state]}
+            ${styles[position]}
+        "
         hide.bind="state === 'hidden'"
     >
         <a
diff --git a/src/components/navs/c-nav-horizontal/c-nav-horizontal.html b/src/components/navs/c-nav-horizontal/c-nav-horizontal.html
index 8d083435..41688bed 100644
--- a/src/components/navs/c-nav-horizontal/c-nav-horizontal.html
+++ b/src/components/navs/c-nav-horizontal/c-nav-horizontal.html
@@ -7,11 +7,17 @@
 	<require from="./c-nav-horizontal.css"></require>
 
     <nav
-        class="${styles.navHorizontal}  ${styles[size]}"
+        class="
+            ${styles.navHorizontal}
+            ${styles[size]}
+        "
         hide.bind="state === 'hidden'"
     >
         <button
-            class="${styles.mobileTrigger}  ${mobileNavOpen.open ? styles.mobileTriggerActive : ''}"
+            class="
+                ${styles.mobileTrigger}
+                ${mobileNavOpen.open ? styles.mobileTriggerActive : ''}
+            "
             click.trigger="toggleMobileNav()"
             if.bind="mobile"
         >
@@ -22,7 +28,12 @@
             justify="{$justify}"
             spacing="${spacing}"
         >
-            <ul class="${mobile ? styles.navMobile : ''}  ${mobileNavOpen.open ? styles.navMobileActive : ''}">
+            <ul
+                class="
+                    ${mobile ? styles.navMobile : ''}
+                    ${mobileNavOpen.open ? styles.navMobileActive : ''}
+                "
+            >
                 <slot></slot>
             </ul>
         </l-cluster>
diff --git a/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html b/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html
index 6d999ece..962052e2 100644
--- a/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html
+++ b/src/components/navs/c-nav-vertical-sliding/c-nav-vertical-sliding.html
@@ -7,14 +7,23 @@
 	<require from="./c-nav-vertical-sliding.css"></require>
 
     <div
-        class="${styles.container} ${navState === 'right' ? styles[navState] : ''}  ${!showHidden ? styles.hidden : ''}"
+        class="
+            ${styles.container}
+            ${navState === 'right' ? styles[navState] : ''}
+            ${!showHidden ? styles.hidden : ''}
+        "
         show.bind="!isPageLoading"
     >
         <div
             class="${styles.block}"
             repeat.for="page of nav.pages"
         >
-            <div class="${styles.triggerContainer}  ${(isTriggerContentHidden && $index === 0) ? styles.triggerContentHidden : ''}">
+            <div
+                class="
+                    ${styles.triggerContainer}
+                    ${(isTriggerContentHidden && $index === 0) ? styles.triggerContentHidden : ''}
+                "
+            >
                 <div>
                     <div
                         class="${styles.trigger}"
diff --git a/src/components/navs/c-nav-vertical/c-nav-vertical.html b/src/components/navs/c-nav-vertical/c-nav-vertical.html
index 349fc7bc..ea9cfda0 100644
--- a/src/components/navs/c-nav-vertical/c-nav-vertical.html
+++ b/src/components/navs/c-nav-vertical/c-nav-vertical.html
@@ -6,7 +6,11 @@
 <template>
 	<require from="./c-nav-vertical.css"></require>
 
-    <nav class="${styles.navVertical}  ${navBottom ? styles.navBottom : ''}">
+    <nav
+        class="
+            ${styles.navVertical}
+            ${navBottom ? styles.navBottom : ''}"
+        >
         <ul
             class="${navBottom ? styles.overflow : ''}"
             scroll.trigger="onScroll($event) & throttle"
diff --git a/src/components/notifications/c-notification/c-notification.html b/src/components/notifications/c-notification/c-notification.html
index bce7640c..90853ead 100644
--- a/src/components/notifications/c-notification/c-notification.html
+++ b/src/components/notifications/c-notification/c-notification.html
@@ -7,10 +7,20 @@
 	<require from="./c-notification.css"></require>
 
     <div
-        class="${styles.notification}  ${styles[type]}"
+        class="
+            ${styles.notification}
+            ${styles[type]}
+        "
         show.bind="_state !== 'hidden'"
     >
-        <c-icon icon="${type == 'info' ? 'info' : ''}${type == 'success' ? 'info' : ''}${type == 'warning' ? 'warning' : ''}${type == 'critical' ? 'warning' : ''}"></c-icon>
+        <c-icon
+            icon="
+                ${type == 'info' ? 'info' : ''}
+                ${type == 'success' ? 'info' : ''}
+                ${type == 'warning' ? 'warning' : ''}
+                ${type == 'critical' ? 'warning' : ''}
+            "
+        ></c-icon>
         <div
             class="${styles.callout}"
             if.bind="calloutTitle || calloutContent"
diff --git a/src/components/pills/c-pill/c-pill.html b/src/components/pills/c-pill/c-pill.html
index fe9a669b..6b57ddb3 100644
--- a/src/components/pills/c-pill/c-pill.html
+++ b/src/components/pills/c-pill/c-pill.html
@@ -8,7 +8,10 @@
 
     <span
         show.bind="!href"
-        class="${styles.pill}  ${styles[color]}"
+        class="
+            ${styles.pill}
+            ${styles[color]}
+        "
     >
         <c-icon
             icon="${icon}"
@@ -21,7 +24,10 @@
     </span>
     <a
         href.bind="href"
-        class="${styles.pill}  ${styles[color]}"
+        class="
+            ${styles.pill}
+            ${styles[color]}
+        "
         show.bind="href"
     >
         <c-icon
diff --git a/src/components/popover/c-popover/c-popover.html b/src/components/popover/c-popover/c-popover.html
index 79fabdbb..32248857 100644
--- a/src/components/popover/c-popover/c-popover.html
+++ b/src/components/popover/c-popover/c-popover.html
@@ -30,7 +30,10 @@
                 "
             >
                 <div
-                    class="${tipStyles.tip}  ${styles.container}"
+                    class="
+                        ${tipStyles.tip}
+                        ${styles.container}
+                    "
                     id="popover-container"
                 >
                     <div class="${styles.containerInner}">
diff --git a/src/components/tables/td-contents/c-td-action/c-td-action.html b/src/components/tables/td-contents/c-td-action/c-td-action.html
index 52cb3482..f9426563 100644
--- a/src/components/tables/td-contents/c-td-action/c-td-action.html
+++ b/src/components/tables/td-contents/c-td-action/c-td-action.html
@@ -21,7 +21,10 @@
         ${value}
     </a>
     <span
-        class="${styles.base}  ${styles.textAction}"
+        class="
+            ${styles.base}
+            ${styles.textAction}
+        "
         click.delegate="col.colAction(row)"
         if.bind="col.colAction"
     >
diff --git a/src/components/timeline/c-time-entry/c-time-entry-popover.html b/src/components/timeline/c-time-entry/c-time-entry-popover.html
index 1dc2196f..dc0e73d2 100644
--- a/src/components/timeline/c-time-entry/c-time-entry-popover.html
+++ b/src/components/timeline/c-time-entry/c-time-entry-popover.html
@@ -8,11 +8,21 @@
 
     <div>
         <div class="${styles.container}">
-            <div class="${styles.info}" style="padding: 0;">
-                <c-p truncate.bind="true" size="small" spacing-bottom="sbNone">
+            <div
+                class="${styles.info}"
+                style="padding: 0;"
+            >
+                <c-p
+                    truncate.bind="true"
+                    size="small"
+                >
                     ${item.title}
                 </c-p>
-                <c-p truncate.bind="true" size="small" spacing-bottom="sbNone" if.bind="item.startTime && item.endTime">
+                <c-p
+                    truncate.bind="true"
+                    size="small"
+                    if.bind="item.startTime && item.endTime"
+                >
                     ${item.startTime} - ${item.endTime}
                 </c-p>
             </div>
diff --git a/src/components/type/h3/c-h3.html b/src/components/type/h3/c-h3.html
index 588a0fea..c4892bad 100644
--- a/src/components/type/h3/c-h3.html
+++ b/src/components/type/h3/c-h3.html
@@ -6,7 +6,19 @@
 <template>
 	<require from="./c-h3.css"></require>
 
-    <span class="${truncate ? styles.truncate : ''} ${truncate && darkBack ? styles.darkBack : ''}">
-        <h3 class="${styles.base} ${flushTop ? '' : styles.notFlushTop}"><slot></slot></h3>
+    <span
+        class="
+            ${truncate ? styles.truncate : ''}
+            ${truncate && darkBack ? styles.darkBack : ''}
+        "
+    >
+        <h3
+            class="
+                ${styles.base}
+                ${flushTop ? '' : styles.notFlushTop}
+            "
+        >
+            <slot></slot>
+        </h3>
     </span>
 </template>
diff --git a/src/components/type/h4/c-h4.html b/src/components/type/h4/c-h4.html
index f9615f0e..df8048d0 100644
--- a/src/components/type/h4/c-h4.html
+++ b/src/components/type/h4/c-h4.html
@@ -6,5 +6,12 @@
 <template>
 	<require from="./c-h4.css"></require>
 
-    <h4 class="${styles.base}  ${truncate ? styles.truncate : ''}"><slot></slot></h4>
+    <h4
+        class="
+            ${styles.base}
+            ${truncate ? styles.truncate : ''}
+        "
+    >
+        <slot></slot>
+    </h4>
 </template>
diff --git a/src/components/type/h5/c-h5.html b/src/components/type/h5/c-h5.html
index 1a6b8bfa..967eec18 100644
--- a/src/components/type/h5/c-h5.html
+++ b/src/components/type/h5/c-h5.html
@@ -6,5 +6,12 @@
 <template>
 	<require from="./c-h5.css"></require>
 
-    <h5 class="${styles.base}  ${styles[color]}"><slot></slot></h5>
+    <h5
+        class="
+            ${styles.base}
+            ${styles[color]}
+        "
+    >
+        <slot></slot>
+    </h5>
 </template>
diff --git a/src/components/type/list/c-list-container/c-list-container.html b/src/components/type/list/c-list-container/c-list-container.html
index 5b7a606e..f763f041 100644
--- a/src/components/type/list/c-list-container/c-list-container.html
+++ b/src/components/type/list/c-list-container/c-list-container.html
@@ -6,7 +6,14 @@
 <template>
 	<require from="./c-list-container.css"></require>
 
-    <ul class="${styles.list}  ${styles[color]}  ${styles[size]}  ${dividers ? styles.dividers : ''}">
+    <ul
+        class="
+            ${styles.list}
+            ${styles[color]}
+            ${styles[size]}
+            ${dividers ? styles.dividers : ''}
+        "
+    >
         <slot></slot>
     </ul>
 </template>
diff --git a/src/components/type/list/c-list-item/c-list-item.html b/src/components/type/list/c-list-item/c-list-item.html
index ce82e9f0..9970eb3a 100644
--- a/src/components/type/list/c-list-item/c-list-item.html
+++ b/src/components/type/list/c-list-item/c-list-item.html
@@ -6,7 +6,13 @@
 <template>
 	<require from="./c-list-item.css"></require>
 
-    <li class="${styles.listItem}  ${styles[state]}  ${wrap ? styles.wrap : ''}">
+    <li
+        class="
+            ${styles.listItem}
+            ${styles[state]}
+            ${wrap ? styles.wrap : ''}
+        "
+    >
         <slot></slot>
     </li>
 </template>
diff --git a/src/components/type/list/c-list/c-list.html b/src/components/type/list/c-list/c-list.html
index c3341d80..7ff8f3f6 100644
--- a/src/components/type/list/c-list/c-list.html
+++ b/src/components/type/list/c-list/c-list.html
@@ -15,7 +15,12 @@
         </c-label>
         <slot name="tip"></slot>
     </div>
-    <ul class="${styles.base}  ${noBullets ? styles.noBullets : ''}">
+    <ul
+        class="
+            ${styles.base}
+            ${noBullets ? styles.noBullets : ''}
+        "
+    >
         <slot></slot>
     </ul>
 </template>
diff --git a/src/components/utilities/c-drag-handle/c-drag-handle.html b/src/components/utilities/c-drag-handle/c-drag-handle.html
index 985bbea4..aa3e77d3 100644
--- a/src/components/utilities/c-drag-handle/c-drag-handle.html
+++ b/src/components/utilities/c-drag-handle/c-drag-handle.html
@@ -10,6 +10,10 @@
         class="${styles.base}"
         drag-draggable.bind="dragOptions"
     >
-        <c-icon icon="draggable" color="gray" size.bind="size"></c-icon>
+        <c-icon
+            icon="draggable"
+            color="gray"
+            size.bind="size"
+        ></c-icon>
     </span>
 </template>
diff --git a/src/components/utilities/c-label-box/c-label-box.html b/src/components/utilities/c-label-box/c-label-box.html
index 2310bafc..d5367260 100644
--- a/src/components/utilities/c-label-box/c-label-box.html
+++ b/src/components/utilities/c-label-box/c-label-box.html
@@ -6,8 +6,16 @@
 <template>
 	<require from="./c-label-box.css"></require>
 
-    <div class="${styles.labelWrapper}" show.bind="label">
-        <c-label editing-action.call="editFunction()" done-editing-action.call="doneFunction()" editable.bind="editable && _state !== 'disabled'" if.bind="label">
+    <div
+        class="${styles.labelWrapper}"
+        show.bind="label"
+    >
+        <c-label
+            editing-action.call="editFunction()"
+            done-editing-action.call="doneFunction()"
+            editable.bind="editable && _state !== 'disabled'"
+            if.bind="label"
+        >
             ${label}
         </c-label>
         <slot name="tip"></slot>
diff --git a/src/components/utilities/c-spinner/c-spinner.html b/src/components/utilities/c-spinner/c-spinner.html
index c87b97a8..6b3fb651 100644
--- a/src/components/utilities/c-spinner/c-spinner.html
+++ b/src/components/utilities/c-spinner/c-spinner.html
@@ -7,6 +7,11 @@
 	<require from="./c-spinner.css"></require>
 
     <div class="${styles.container}">
-        <span class="${styles.base}  ${styles[size]}"></span>
+        <span
+            class="
+                ${styles.base}
+                ${styles[size]}
+            "
+        ></span>
     </div>
 </template>
diff --git a/src/components/utilities/c-status/c-status.html b/src/components/utilities/c-status/c-status.html
index 5ff7e76a..bb094a15 100644
--- a/src/components/utilities/c-status/c-status.html
+++ b/src/components/utilities/c-status/c-status.html
@@ -6,11 +6,41 @@
 <template>
 	<require from="./c-status.css"></require>
 
-    <div class="${styles.container}" css="max-width: ${maxWidth}">
-        <div class="${styles.status}  ${styles[state]}" show.bind="state">
-            <c-icon icon="circle" color="${state === 'healthy' ? 'secondary' : state === 'warning' ? 'subTwo' : state === 'critical' ? 'primaryLight' : state === 'info' ? 'subOne' : ''}"></c-icon>
+    <div
+        class="${styles.container}"
+        css="max-width: ${maxWidth}"
+    >
+        <div
+            class="
+                ${styles.status}
+                ${styles[state]}
+            "
+            show.bind="state"
+        >
+            <c-icon
+                icon="circle"
+                color="
+                    ${state === 'healthy' ? 'secondary' :
+                    state === 'warning' ? 'subTwo' :
+                    state === 'critical' ? 'primaryLight' :
+                    state === 'info' ? 'subOne' : ''}
+                "
+            ></c-icon>
         </div>
-        <c-p spacing-bottom="sbNone" title="${text}" if.bind="!href">${text}</c-p>
-        <a href="${href}" class="${styles.link}" target="${targetNew ? '_blank' : '_self'}" title="${text}" if.bind="href">${text}</a>
+        <c-p
+            title="${text}"
+            if.bind="!href"
+        >
+            ${text}
+        </c-p>
+        <a
+            href="${href}"
+            class="${styles.link}"
+            target="${targetNew ? '_blank' : '_self'}"
+            title="${text}"
+            if.bind="href"
+        >
+            ${text}
+        </a>
     </div>
 </template>
diff --git a/src/layouts/l-grid/l-grid.html b/src/layouts/l-grid/l-grid.html
index 0db0f644..5c0778a1 100644
--- a/src/layouts/l-grid/l-grid.html
+++ b/src/layouts/l-grid/l-grid.html
@@ -21,7 +21,10 @@
     >
         <slot></slot>
 
-        <div if.bind="isLoading" class="${styles.loader}">
+        <div
+            class="${styles.loader}"
+            if.bind="isLoading"
+        >
             <c-spinner size="small"></c-spinner>
         </div>
     </div>

From fefe4ea762a8e58762f1be89d4a69bb07a9401fa Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Fri, 27 Mar 2020 10:22:29 -0600
Subject: [PATCH 33/38] fix c-status colors

---
 src/components/utilities/c-status/c-status.html | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/utilities/c-status/c-status.html b/src/components/utilities/c-status/c-status.html
index bb094a15..3705a74d 100644
--- a/src/components/utilities/c-status/c-status.html
+++ b/src/components/utilities/c-status/c-status.html
@@ -19,12 +19,7 @@
         >
             <c-icon
                 icon="circle"
-                color="
-                    ${state === 'healthy' ? 'secondary' :
-                    state === 'warning' ? 'subTwo' :
-                    state === 'critical' ? 'primaryLight' :
-                    state === 'info' ? 'subOne' : ''}
-                "
+                color="${state === 'healthy' ? 'secondary' : state === 'warning' ? 'subTwo' : state === 'critical' ? 'primaryLight' : state === 'info' ? 'subOne' : ''}"
             ></c-icon>
         </div>
         <c-p

From 4f95a7445fd0406ac5c920886e01297992f7533b Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Fri, 27 Mar 2020 11:19:50 -0600
Subject: [PATCH 34/38] fix c-form-file uploading. loader was out of place

---
 src/components/forms/file/c-form-file/c-form-file.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/forms/file/c-form-file/c-form-file.css b/src/components/forms/file/c-form-file/c-form-file.css
index a2be872b..b3b7f763 100644
--- a/src/components/forms/file/c-form-file/c-form-file.css
+++ b/src/components/forms/file/c-form-file/c-form-file.css
@@ -75,7 +75,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
     text-align: center;
 }
 
-.is-uploading > div{
+.is-uploading > c-spinner{
     position: absolute;
     top: 0;
     left: 0;

From b3cc1fff8b65a880c64cd714a501ea28dc1630ac Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Fri, 27 Mar 2020 11:20:11 -0600
Subject: [PATCH 35/38] doc clean up

---
 dev-app/routes/components/copy/slots/index.html            | 6 ++++--
 dev-app/routes/components/forms/date/properties/index.html | 2 +-
 src/components/tile/c-tile/c-tile.html                     | 6 +++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/dev-app/routes/components/copy/slots/index.html b/dev-app/routes/components/copy/slots/index.html
index b6cbc275..323acf50 100644
--- a/dev-app/routes/components/copy/slots/index.html
+++ b/dev-app/routes/components/copy/slots/index.html
@@ -24,8 +24,10 @@
                     >
                         <span slot="tip">
                             <c-tip side="top" icon-tip.bind="true" arrow-position="leftEdge" size="medium">
-                                <div slot="trigger"><c-icon icon="question"></c-icon></div>
-                                <div slot="content">Content Here. Huzzah! that is a bit longer just to test</div>
+                                <div slot="trigger">
+                                    <c-icon icon="question"></c-icon>
+                                </div>
+                                <div slot="content"><c-p color="white">Content Here. Huzzah! that is a bit longer just to test</c-p></div>
                             </c-tip>
                         </span>
                     </c-copy>
diff --git a/dev-app/routes/components/forms/date/properties/index.html b/dev-app/routes/components/forms/date/properties/index.html
index ce44ab89..ac5408f3 100644
--- a/dev-app/routes/components/forms/date/properties/index.html
+++ b/dev-app/routes/components/forms/date/properties/index.html
@@ -38,7 +38,7 @@
                         <div>
                             <c-form-date
                                 id="test31"
-                                label="Error"
+                                label="Icon"
                                 label-icon="info"
                                 error-msg="Date is required"
                             ></c-form-date>
diff --git a/src/components/tile/c-tile/c-tile.html b/src/components/tile/c-tile/c-tile.html
index a4c9ae19..4cb25521 100644
--- a/src/components/tile/c-tile/c-tile.html
+++ b/src/components/tile/c-tile/c-tile.html
@@ -7,7 +7,11 @@
 	<require from="./c-tile.css"></require>
 
     <div
-        class="${styles.tile}  ${checkedValue ? styles.checked : ''}  ${hover ? styles.hover : ''}"
+        class="
+            ${styles.tile}
+            ${checkedValue ? styles.checked : ''}
+            ${hover ? styles.hover : ''}
+        "
         id="${id}"
         if.bind="_state !== 'hidden'"
     >

From c3ade9ffbe6acb298491ebef26a3aaaf78755d85 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Fri, 27 Mar 2020 15:46:09 -0600
Subject: [PATCH 36/38] doc updates

---
 .../forms/add-remove/actions/index.ts           |  8 ++++----
 .../components/forms/date/actions/index.ts      |  2 +-
 .../components/forms/select/actions/index.html  |  4 +++-
 .../components/forms/select/actions/index.ts    | 10 ++--------
 .../components/timeline/properties/index.ts     |  2 ++
 dev-app/routes/components/tip/actions/index.ts  |  5 ++---
 .../routes/components/type/headlines/index.html |  2 ++
 dev-app/routes/layouts/grid/methods/index.ts    | 17 +++--------------
 .../c-notification/c-notification.html          |  9 +--------
 9 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/dev-app/routes/components/forms/add-remove/actions/index.ts b/dev-app/routes/components/forms/add-remove/actions/index.ts
index d7694526..8beae88d 100644
--- a/dev-app/routes/components/forms/add-remove/actions/index.ts
+++ b/dev-app/routes/components/forms/add-remove/actions/index.ts
@@ -25,14 +25,14 @@ export class AddRemoveActions {
 
     public addRemoveActions = [
         {
-            description: 'Set a function to fire when the select contents changes on the left side.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'actions-left',
-            value: 'function',
+            value: 'object',
         },
         {
-            description: 'Set a function to fire when the select contents changes on the right side.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'actions-right',
-            value: 'function',
+            value: 'object',
         },
     ];
 }
diff --git a/dev-app/routes/components/forms/date/actions/index.ts b/dev-app/routes/components/forms/date/actions/index.ts
index 9a01f3bd..4421786e 100644
--- a/dev-app/routes/components/forms/date/actions/index.ts
+++ b/dev-app/routes/components/forms/date/actions/index.ts
@@ -25,7 +25,7 @@ export class DateInputActions {
 
     public formDateOptionsActions = [
         {
-            description: 'An object of callbacks.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'callbacks',
             value: 'object',
         },
diff --git a/dev-app/routes/components/forms/select/actions/index.html b/dev-app/routes/components/forms/select/actions/index.html
index e48c6c7b..fd942c77 100644
--- a/dev-app/routes/components/forms/select/actions/index.html
+++ b/dev-app/routes/components/forms/select/actions/index.html
@@ -22,9 +22,11 @@
 };</c-code>
                 <c-code-sample>
                     <l-grid min-size="25ch">
+                        <l-stack>
                         <c-form-select select-value.bind="vSelectOutput" options.bind="testOptions" label="Select Label" error-msg="This is an error" actions.bind="testActions"></c-form-select>
+                        <c-p>select: ${vSelectOutput}</c-p>
+                        </l-stack>
                     </l-grid>
-                    <c-p>select: ${vSelectOutput}</c-p>
                 </c-code-sample>
             </l-stack>
         </div>
diff --git a/dev-app/routes/components/forms/select/actions/index.ts b/dev-app/routes/components/forms/select/actions/index.ts
index 007fd95e..8e4fae1d 100644
--- a/dev-app/routes/components/forms/select/actions/index.ts
+++ b/dev-app/routes/components/forms/select/actions/index.ts
@@ -21,19 +21,13 @@ export class SelectActions {
             colHeadName: 'description',
             colHeadValue: 'Description',
         },
-        {
-            _class: 'monospaced',
-            colClass: 't85',
-            colHeadName: 'default',
-            colHeadValue: 'Default',
-        },
     ];
 
     public formSelectActions = [
         {
-            description: 'Set a function to fire when the select contents changes.',
+            description: 'An object with callback functions. More details coming soon.',
             name: 'actions',
-            value: 'function',
+            value: 'object',
         },
     ];
 
diff --git a/dev-app/routes/components/timeline/properties/index.ts b/dev-app/routes/components/timeline/properties/index.ts
index e247687c..14bcbb3c 100644
--- a/dev-app/routes/components/timeline/properties/index.ts
+++ b/dev-app/routes/components/timeline/properties/index.ts
@@ -15,6 +15,7 @@ export class TimelineProperties {
         },
         {
             _class: 'monospaced',
+            colClass: 't270',
             colHeadName: 'type',
             colHeadValue: 'Type',
         },
@@ -24,6 +25,7 @@ export class TimelineProperties {
         },
         {
             _class: 'monospaced',
+            colClass: 't150',
             colHeadName: 'default',
             colHeadValue: 'Default',
         },
diff --git a/dev-app/routes/components/tip/actions/index.ts b/dev-app/routes/components/tip/actions/index.ts
index 2b77c20b..6536348b 100644
--- a/dev-app/routes/components/tip/actions/index.ts
+++ b/dev-app/routes/components/tip/actions/index.ts
@@ -34,10 +34,9 @@ export class TipActions {
 
     public tipActions = [
         {
-            default: '',
-            description: 'Callback functions supported: onHide, onShow. See actions section below for examples.',
+            description: 'An object with callback functions. Functions supported: onHide, onShow. See actions section below for examples.',
             name: 'actions',
-            value: 'Object with callback functions.',
+            value: 'object',
         },
     ];
 
diff --git a/dev-app/routes/components/type/headlines/index.html b/dev-app/routes/components/type/headlines/index.html
index c0f1f1bd..19afab3e 100644
--- a/dev-app/routes/components/type/headlines/index.html
+++ b/dev-app/routes/components/type/headlines/index.html
@@ -13,6 +13,7 @@
                 <c-code-sample>
                     <c-h1 flush-top.bind="false">Not flush on the top</c-h1>
                     <c-h1>Normal Headline 1</c-h1>
+                    <c-h1 truncate.bind="true">Headline 1 that is really long and will truncate at the end of the line or something. Shrink the width of the browser window if needed.</c-h1>
                     <l-cluster
                         align="flex-start"
                         justify="space-between"
@@ -25,6 +26,7 @@
                                 spacing="var(--s-3)"
                                 spacing-direction="right"
                                 truncated-content.bind="true"
+                                style="width: 100%"
                             >
                                 <div>
                                     <c-icon
diff --git a/dev-app/routes/layouts/grid/methods/index.ts b/dev-app/routes/layouts/grid/methods/index.ts
index 3d2bcbcb..412ce1ea 100644
--- a/dev-app/routes/layouts/grid/methods/index.ts
+++ b/dev-app/routes/layouts/grid/methods/index.ts
@@ -21,24 +21,13 @@ export class GridMethods {
             colHeadName: 'description',
             colHeadValue: 'Description',
         },
-        {
-            _class: 'monospaced',
-            colHeadName: 'default',
-            colHeadValue: 'Default',
-        },
     ];
 
     public gridMethods = [
         {
-            description: 'The function you want to run when the button is clicked.',
-            name: 'action',
-            value: 'function',
-        },
-        {
-            default: '_self',
-            description: 'Set if you want the box link to open in a new window.',
-            name: 'target',
-            value: '_self | _blank',
+            description: 'An object with callback functions. More details coming soon.',
+            name: 'actions',
+            value: 'object',
         },
     ];
 
diff --git a/src/components/notifications/c-notification/c-notification.html b/src/components/notifications/c-notification/c-notification.html
index 90853ead..28d5d8c1 100644
--- a/src/components/notifications/c-notification/c-notification.html
+++ b/src/components/notifications/c-notification/c-notification.html
@@ -13,14 +13,7 @@
         "
         show.bind="_state !== 'hidden'"
     >
-        <c-icon
-            icon="
-                ${type == 'info' ? 'info' : ''}
-                ${type == 'success' ? 'info' : ''}
-                ${type == 'warning' ? 'warning' : ''}
-                ${type == 'critical' ? 'warning' : ''}
-            "
-        ></c-icon>
+        <c-icon icon="${type == 'info' ? 'info' : ''}${type == 'success' ? 'info' : ''}${type == 'warning' ? 'warning' : ''}${type == 'critical' ? 'warning' : ''}"></c-icon>
         <div
             class="${styles.callout}"
             if.bind="calloutTitle || calloutContent"

From 6e4cc50d84f7e5275cf6e8e9773ef917971271b1 Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Mon, 30 Mar 2020 15:46:16 -0600
Subject: [PATCH 37/38] have c-form-add-remove fill all the space, enable ACL
 on l-box-link

---
 .../routes/components/forms/add-remove/properties/index.html  | 4 +++-
 .../forms/select/c-form-add-remove/c-form-add-remove.css      | 1 +
 src/layouts/l-box-link/l-box-link.ts                          | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/dev-app/routes/components/forms/add-remove/properties/index.html b/dev-app/routes/components/forms/add-remove/properties/index.html
index 8ed6ab25..19c99729 100644
--- a/dev-app/routes/components/forms/add-remove/properties/index.html
+++ b/dev-app/routes/components/forms/add-remove/properties/index.html
@@ -30,6 +30,7 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
+            <br><br><br>
         </div>
 
         <c-divider></c-divider>
@@ -49,6 +50,7 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
+            <br><br><br>
         </div>
 
         <c-divider></c-divider>
@@ -66,7 +68,7 @@
                     ></c-form-add-remove>
                 </c-code-sample>
             </l-stack>
-            <br>
+            <br><br><br>
         </div>
 
         <c-divider></c-divider>
diff --git a/src/components/forms/select/c-form-add-remove/c-form-add-remove.css b/src/components/forms/select/c-form-add-remove/c-form-add-remove.css
index 72e628d1..5427c4d9 100644
--- a/src/components/forms/select/c-form-add-remove/c-form-add-remove.css
+++ b/src/components/forms/select/c-form-add-remove/c-form-add-remove.css
@@ -22,6 +22,7 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 .container{
     display: flex;
     justify-content: space-between;
+    height: 100%;
 }
 
 .container c-form-select{
diff --git a/src/layouts/l-box-link/l-box-link.ts b/src/layouts/l-box-link/l-box-link.ts
index 44b79ab8..46bb4abf 100644
--- a/src/layouts/l-box-link/l-box-link.ts
+++ b/src/layouts/l-box-link/l-box-link.ts
@@ -4,8 +4,10 @@ Licensed under the terms of the MIT license. See the LICENSE file in the project
 */
 
 import {bindable} from 'aurelia-framework';
+import {authState} from '../../decorators/auth-state';
 import * as styles from '../l-box/l-box.css.json';
 
+@authState
 export class LBoxLink {
     @bindable
     public background = 'var(--c_darkGray)';

From ae73c1690a8b3ab5fd32f1676e589f8e83a698ea Mon Sep 17 00:00:00 2001
From: Luke Larsen <luke@lukelarsen.com>
Date: Wed, 1 Apr 2020 10:25:11 -0600
Subject: [PATCH 38/38] version bump

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 04ca1fed..f23b1e44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bindable-ui/bindable",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index bb8b11ae..a5e2d408 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"