Add Web Components and LIT versions of Complex-DOM TodoMVC

.eslintignore

@@ -13,6 +13,7 @@ package-lock.json
 !/resources/todomvc/architecture-examples/lit
 /resources/todomvc/architecture-examples/lit/.wireit
 /resources/todomvc/architecture-examples/lit/dist/index.js
+!/resources/todomvc/architecture-examples/lit-complex
 !/resources/todomvc/architecture-examples/preact
 !/resources/todomvc/architecture-examples/preact-complex
 !/resources/todomvc/architecture-examples/react
@@ -32,6 +33,7 @@ package-lock.json
 !/resources/todomvc/vanilla-examples/javascript-es6-webpack
 !/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex
 !/resources/todomvc/vanilla-examples/javascript-web-components
+!/resources/todomvc/vanilla-examples/javascript-web-components-complex/
 
 !/resources/todomvc/big-dom-generator
 

.gitignore

@@ -23,13 +23,15 @@
 /resources/todomvc/architecture-examples/svelte-complex/node_modules/
 /resources/todomvc/architecture-examples/vue/node_modules/
 /resources/todomvc/architecture-examples/vue-complex/node_modules/
+/resources/todomvc/architecture-examples/lit-complex/node_modules/
 
 /resources/todomvc/vanilla-examples/javascript-es5/node_modules/
 /resources/todomvc/vanilla-examples/javascript-es5-complex/node_modules/
 /resources/todomvc/vanilla-examples/javascript-es6/node_modules/
 /resources/todomvc/vanilla-examples/javascript-es6-complex/node_modules/
 /resources/todomvc/vanilla-examples/javascript-es6-webpack/node_modules/
 /resources/todomvc/vanilla-examples/javascript-es6-webpack-complex/node_modules/
+/resources/todomvc/vanilla-examples/javascript-web-components-complex/node_modules/
 
 /resources/charts/node_modules/
 /resources/todomvc/big-dom-generator/node_modules/

.prettierignore

@@ -13,6 +13,7 @@ package-lock.json
 !/resources/todomvc/architecture-examples/lit
 /resources/todomvc/architecture-examples/lit/dist/index.js
 /resources/todomvc/architecture-examples/lit/.wireit
+!/resources/todomvc/architecture-examples/lit-complex
 !/resources/todomvc/architecture-examples/preact
 !/resources/todomvc/architecture-examples/preact-complex
 !/resources/todomvc/architecture-examples/react
@@ -32,6 +33,7 @@ package-lock.json
 !/resources/todomvc/vanilla-examples/javascript-es6-webpack
 !/resources/todomvc/vanilla-examples/javascript-es6-webpack-complex
 !/resources/todomvc/vanilla-examples/javascript-web-components
+!/resources/todomvc/vanilla-examples/javascript-web-components-complex/
 
 !/resources/todomvc/big-dom-generator
 

resources/todomvc/architecture-examples/lit-complex/dist/app.css

@@ -0,0 +1,11 @@
+.todo-area {
+    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+    line-height: 1.4em;
+    color: #111111;
+    min-width: 230px;
+    max-width: 550px;
+    margin: 0 10%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 300;
+}

resources/todomvc/architecture-examples/lit-complex/dist/default-variables.css

@@ -0,0 +1,5 @@
+:root {
+    --complex-border-bottom-color-default: rgb(237, 237, 237);
+    --complex-background-color-default: rgb(255, 255, 255);
+    --complex-label-color-default: rgb(72, 72, 72);
+}

resources/todomvc/architecture-examples/lit-complex/dist/todo-item-extra-css.js

@@ -0,0 +1,47 @@
+// pri-4 variables are used but not defined, so background-color and
+// border-color will fall back to the default variables.
+const additionalStyleSheet = `
+    :host([data-priority="0"]) > li {
+        --priority-background-color: var(--complex-todo-red-pri-0);
+        --priority-background-color-completed: var(--complex-todo-green-pri-0);
+    }
+    :host([data-priority="1"]) > li {
+        --priority-background-color: var(--complex-todo-red-pri-1);
+        --priority-background-color-completed: var(--complex-todo-green-pri-1);
+    }
+    :host([data-priority="2"]) > li {
+        --priority-background-color: var(--complex-todo-red-pri-2);
+        --priority-background-color-completed: var(--complex-todo-green-pri-2);
+    }
+    :host([data-priority="3"]) > li {
+        --priority-background-color: var(--complex-todo-red-pri-3);
+        --priority-background-color-completed: var(--complex-todo-green-pri-3);
+    }
+    :host([data-priority="4"]) > li {
+        --priority-background-color: var(--complex-todo-red-pri-4);
+        --priority-background-color-completed: var(--complex-todo-green-pri-4);
+    }
+    .todo {
+        background-color: var(--priority-background-color, var(--complex-background-color-default));
+        border-bottom-color: var(--complex-todo-red-border, var(--complex-border-bottom-color-default));
+    }
+    .todo.completed {
+        background-color: var(--priority-background-color-completed, var(--complex-background-color-default));
+        border-bottom-color: var(--complex-todo-green-border, var(--complex-border-bottom-color-default));
+    }
+    .todo > div label {
+        color: var(--complex-todo-red-label, --complex-label-color-default);
+    }
+    .todo.completed label {
+        color: var(--complex-todo-green-label, --complex-label-color-default);
+    }
+    .todo > div > :focus,
+    .todo > div > .toggle:focus + label {
+        box-shadow: var(--complex-box-shadow-red) !important;
+    }
+    .todo.completed > div > :focus,
+    .todo.completed > div > .toggle:focus + label {
+        box-shadow: var(--complex-box-shadow-green) !important;
+    }`;
+
+window.extraTodoItemCssToAdopt = additionalStyleSheet;

resources/todomvc/architecture-examples/lit-complex/dist/todo-list-extra-css.js

@@ -0,0 +1,19 @@
+// pri-4 variables are purposely not defined to test the fallback to the default variables.
+const additionalTodoListStyleSheet = `:host(.show-priority) {
+    --complex-todo-red-pri-0: rgb(253, 204, 204);
+    --complex-todo-red-pri-1: rgb(248, 221, 221);
+    --complex-todo-red-pri-2: rgb(251, 234, 234);
+    --complex-todo-red-pri-3: rgb(250, 240, 240);
+    --complex-todo-red-border: rgb(255, 215, 215);
+    --complex-todo-red-label: rgb(37, 0, 0);
+    --complex-todo-green-pri-0: rgb(204, 253, 204);
+    --complex-todo-green-pri-1: rgb(221, 248, 221);
+    --complex-todo-green-pri-2: rgb(234, 251, 234);
+    --complex-todo-green-pri-3: rgb(241, 250, 240);
+    --complex-todo-green-border: rgb(215, 255, 215);
+    --complex-todo-green-label: rgb(135, 167, 144);
+    --complex-box-shadow-red: rgb(193, 133, 133) 0 0 2px 2px inset;
+    --complex-box-shadow-green: rgb(125, 207, 137) 0 0 2px 2px inset;
+}`;
+
+window.extraTodoListCssToAdopt = additionalTodoListStyleSheet;