From e6f3029f874bbcdba0e39798ba879ac147d375e0 Mon Sep 17 00:00:00 2001
From: Antonio R <22479344+a133xz@users.noreply.github.com>
Date: Thu, 25 Mar 2021 13:36:00 +0000
Subject: [PATCH 1/5] chore: add gulp

---
 .gitignore   |  1 +
 gulpfile.js  | 26 ++++++++++++++++++++++++++
 package.json |  8 ++++++--
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 gulpfile.js

diff --git a/.gitignore b/.gitignore
index 612fafe..0182296 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ package-lock.json
 dist/
 .vscode/
 *.log
+yarn.lock
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..34a6cb0
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,26 @@
+import gulp from 'gulp'
+import cssSelectorExtract from 'css-selector-extract'
+import through2 from 'through2'
+
+var extract = function() {
+	return gulp
+		.src('src/elements/select.shared.css')
+		.pipe(
+			through2.obj(function(file, _, cb) {
+				if (file.isBuffer()) {
+					const code = file.contents.toString()
+					const extractedCss = cssSelectorExtract.processSync({
+						// CSS source code as string.
+						css: code,
+						// Array of selectors which should get extracted.
+						filters: [/^(.*)select(.*)/],
+					})
+					file.contents = Buffer.from(extractedCss)
+				}
+				cb(null, file)
+			}),
+		)
+		.pipe(gulp.dest('dist/'))
+}
+
+gulp.task('default', extract)
diff --git a/package.json b/package.json
index 2cccc41..58e4c4b 100644
--- a/package.json
+++ b/package.json
@@ -25,13 +25,17 @@
 		"version": "lume versionHook",
 		"postversion": "lume postVersionHook",
 		"OTHER SCRIPTS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX": "",
-		"examples": "live-server --open=playground --no-css-inject"
+		"examples": "live-server --open=playground --no-css-inject",
+		"gulp": "gulp"
 	},
 	"dependencies": {},
 	"devDependencies": {
 		"@lume/cli": "^0.3.0",
 		"live-server": "^1.2.1",
-		"prettier": "^1.19.1"
+		"prettier": "^1.19.1",
+		"gulp": "^4.0.2",
+		"css-selector-extract": "^4.0.0",
+		"through2": "^4.0.2"
 	},
 	"repository": {
 		"type": "git",

From 46c821583810925d36a103c51bcdca604cee0403 Mon Sep 17 00:00:00 2001
From: Antonio R <22479344+a133xz@users.noreply.github.com>
Date: Thu, 25 Mar 2021 17:52:33 +0000
Subject: [PATCH 2/5] folder structure updated and select included

---
 playground/index.html                         |  11 +-
 src/clickables.css                            |  21 --
 src/elements/body.css                         |   4 -
 src/elements/button.css                       |   2 -
 src/elements/form/form.shared-is-test.css     | 205 ++++++++++++++++++
 .../{input => form}/input-checkbox.css        |   3 -
 src/elements/{input => form}/input-color.css  |   2 -
 src/elements/{input => form}/input-radio.css  |   3 -
 src/elements/{input => form}/input.shared.css |  21 +-
 src/elements/form/label.css                   |  10 +
 src/elements/form/select.css                  | 130 +++++++++++
 src/elements/index.css                        |  10 +-
 src/elements/input/index.css                  |   3 -
 src/elements/label.css                        |   4 -
 src/extra/utils.css                           |   7 -
 src/index.css                                 |   6 +-
 src/shared/variables.css                      |   0
 src/utils/utils.css                           |  17 ++
 18 files changed, 402 insertions(+), 57 deletions(-)
 delete mode 100644 src/clickables.css
 delete mode 100644 src/elements/body.css
 create mode 100644 src/elements/form/form.shared-is-test.css
 rename src/elements/{input => form}/input-checkbox.css (81%)
 rename src/elements/{input => form}/input-color.css (81%)
 rename src/elements/{input => form}/input-radio.css (89%)
 rename src/elements/{input => form}/input.shared.css (88%)
 create mode 100644 src/elements/form/label.css
 create mode 100644 src/elements/form/select.css
 delete mode 100644 src/elements/input/index.css
 delete mode 100644 src/elements/label.css
 delete mode 100644 src/extra/utils.css
 create mode 100644 src/shared/variables.css
 create mode 100644 src/utils/utils.css

diff --git a/playground/index.html b/playground/index.html
index e324be2..62a34d3 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -8,10 +8,10 @@
 	<title>Playground</title>
 	<style>
 		@import '../src/index.css';
-		@import '../src/extra/utils.css';
 
 		body {
 			font-family: sans-serif;
+			color: #626e84;
 		}
 
 	</style>
@@ -19,7 +19,6 @@
 
 <body>
 
-
 	<h1>LUME Basicss Playground</h1>
 
 	<fieldset checkboxes inline-block>
@@ -210,6 +209,14 @@ <h2>Lists</h2>
 		<li>Adds Bullets to Page</li>
 	</ol>
 
+	<hr />
+
+	<label for="country">Country</label>
+	<select id="country">
+		<option selected>Choose...</option>
+		<option>...</option>
+	</select>
+
 	<hr />
 	<h2>Forms</h2>
 
diff --git a/src/clickables.css b/src/clickables.css
deleted file mode 100644
index d3f30fe..0000000
--- a/src/clickables.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/** Anything that is clickable should have a pointer cursor. */
-
-input[type='checkbox' i],
-input[type='radio' i],
-input[type='color' i],
-input[type='submit' i],
-input[type='button' i],
-button,
-input[type='date' i],
-input[type='time' i],
-input[type='datetime-local' i],
-input[type='month' i],
-input[type='week' i],
-input::-webkit-calendar-picker-indicator,
-input::-webkit-file-upload-button,
-input[type='range' i],
-input[type='reset' i],
-input[type='file' i],
-summary {
-	cursor: pointer;
-}
diff --git a/src/elements/body.css b/src/elements/body.css
deleted file mode 100644
index f85cb80..0000000
--- a/src/elements/body.css
+++ /dev/null
@@ -1,4 +0,0 @@
-body {
-	font-family: sans-serif;
-	color: #626e84;
-}
diff --git a/src/elements/button.css b/src/elements/button.css
index 737680d..e03ca02 100644
--- a/src/elements/button.css
+++ b/src/elements/button.css
@@ -1,5 +1,3 @@
-@import '../shared/colors.css';
-
 input[type='button' i],
 input[type='reset' i],
 input[type='submit' i],
diff --git a/src/elements/form/form.shared-is-test.css b/src/elements/form/form.shared-is-test.css
new file mode 100644
index 0000000..1bec5ec
--- /dev/null
+++ b/src/elements/form/form.shared-is-test.css
@@ -0,0 +1,205 @@
+select {
+	--line-height: 1.5;
+	--form-element-spacing-vertical: 0.75rem;
+	--form-element-spacing-horizontal: 1rem;
+	--form-element-border-width: 1px;
+	--block-round: 0.25rem;
+	--text: #415462;
+	--input-border: #c8d1d8;
+	--text-weight: 400;
+	--form-element-weight: var(--text-weight);
+	--mark-text: #2c3d49;
+	--muted-background: #edf0f3;
+	--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+	--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+	--spacing-typography: 1.5rem;
+	--form-element-outline-width: 3px;
+	--primary-focus: rgba(16, 149, 193, 0.125);
+	--input-focus: var(--primary-focus);
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 1rem; /* 1 */
+	line-height: var(--line-height); /* 1 */
+	margin: 0; /* 2 */
+}
+
+select,
+textarea,
+form {
+	display: block;
+	width: 100%;
+}
+
+input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
+select,
+textarea {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+	vertical-align: middle;
+}
+
+/* Remove the inheritance of text transform in Edge, Firefox, and IE */
+select {
+	text-transform: none;
+}
+
+input,
+select,
+textarea {
+	border: var(--form-element-border-width) solid var(--input-border);
+	border-radius: var(--block-round);
+	outline: none;
+	background-color: var(--input-background);
+	color: var(--text);
+	font-weight: var(--form-element-weight);
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder,
+input::-webkit-input-placeholder,
+select::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+	color: var(--muted-text);
+	opacity: 1;
+}
+
+input:active,
+select:active,
+textarea:active,
+input:focus,
+select:focus,
+textarea:focus {
+	border-color: var(--input-hover-border);
+	background-color: var(--input-hover-background);
+}
+
+input[readonly],
+select[readonly],
+textarea[readonly],
+input[disabled],
+select[disabled],
+textarea[disabled] {
+	border-color: var(--muted-border);
+	box-shadow: none;
+}
+
+input[readonly] ~ label,
+select[readonly] ~ label,
+textarea[readonly] ~ label,
+input[disabled] ~ label,
+select[disabled] ~ label,
+textarea[disabled] ~ label {
+	color: var(--muted-text);
+}
+
+input[readonly]:active,
+select[readonly]:active,
+textarea[readonly]:active,
+input[disabled]:active,
+select[disabled]:active,
+textarea[disabled]:active,
+input[readonly]:focus,
+select[readonly]:focus,
+textarea[readonly]:focus,
+input[disabled]:focus,
+select[disabled]:focus,
+textarea[disabled]:focus {
+	box-shadow: none;
+}
+
+input[disabled]:not([type='reset']):not([type='submit']):not([type='button']),
+select[disabled]:not([type='reset']):not([type='submit']):not([type='button']),
+textarea[disabled]:not([type='reset']):not([type='submit']):not([type='button']) {
+	background-color: var(--muted-background);
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled] {
+	opacity: 0.66;
+}
+
+input[aria-invalid],
+select[aria-invalid],
+textarea[aria-invalid] {
+	padding-right: 2rem;
+	background-position: center right 0.75rem;
+	background-repeat: no-repeat;
+	background-size: 1rem auto;
+}
+
+input[aria-invalid='false'],
+select[aria-invalid='false'],
+textarea[aria-invalid='false'] {
+	background-image: var(--icon-valid);
+}
+
+input[aria-invalid='true'],
+select[aria-invalid='true'],
+textarea[aria-invalid='true'] {
+	background-image: var(--icon-invalid);
+}
+
+input:not([type='checkbox']):not([type='radio']),
+select,
+textarea {
+	margin-bottom: var(--spacing-typography);
+}
+
+input:not([type='range']):not([type='file']):focus,
+select:focus,
+textarea:focus {
+	box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
+}
+
+select::-ms-expand {
+	border: 0;
+	background-color: transparent;
+}
+
+select:not([multiple]):not([size]) {
+	padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+	background-image: var(--icon-chevron);
+	background-position: center right 0.75rem;
+	background-repeat: no-repeat;
+	background-size: 1rem auto;
+}
+
+/** Anything that is clickable should have a pointer cursor. */
+
+select,
+input[type='checkbox' i],
+input[type='radio' i],
+input[type='color' i],
+input[type='submit' i],
+input[type='button' i],
+button,
+input[type='date' i],
+input[type='time' i],
+input[type='datetime-local' i],
+input[type='month' i],
+input[type='week' i],
+input::-webkit-calendar-picker-indicator,
+input::-webkit-file-upload-button,
+input[type='range' i],
+input[type='reset' i],
+input[type='file' i],
+summary {
+	cursor: pointer;
+}
+
+input[type='checkbox' i]:focus,
+input[type='radio' i]:focus {
+	outline: none;
+	outline-offset: 0;
+}
diff --git a/src/elements/input/input-checkbox.css b/src/elements/form/input-checkbox.css
similarity index 81%
rename from src/elements/input/input-checkbox.css
rename to src/elements/form/input-checkbox.css
index 6c7dbbe..660d6d0 100644
--- a/src/elements/input/input-checkbox.css
+++ b/src/elements/form/input-checkbox.css
@@ -1,6 +1,3 @@
-/* Checkboxes and radios share much of the same code. */
-@import './input.shared.css';
-
 input[type='checkbox' i] {
 	/* Checkboxes are boxes with rounded corners. */
 	--checkable-border-radius: 15%;
diff --git a/src/elements/input/input-color.css b/src/elements/form/input-color.css
similarity index 81%
rename from src/elements/input/input-color.css
rename to src/elements/form/input-color.css
index 64b0e09..b1e28ff 100644
--- a/src/elements/input/input-color.css
+++ b/src/elements/form/input-color.css
@@ -1,5 +1,3 @@
-@import './input.shared.css';
-
 input[type='color' i] {
 	width: auto;
 	padding: 4px 8px;
diff --git a/src/elements/input/input-radio.css b/src/elements/form/input-radio.css
similarity index 89%
rename from src/elements/input/input-radio.css
rename to src/elements/form/input-radio.css
index f96511b..583fcc4 100644
--- a/src/elements/input/input-radio.css
+++ b/src/elements/form/input-radio.css
@@ -1,6 +1,3 @@
-/* Checkboxes and radios share much of the same code. */
-@import './input.shared.css';
-
 /* The extra "[type]" is needed here to force this to be more specific than the rule imported from input.shared.css. :\ */
 input[type='radio' i] {
 	/* Radios are circles. */
diff --git a/src/elements/input/input.shared.css b/src/elements/form/input.shared.css
similarity index 88%
rename from src/elements/input/input.shared.css
rename to src/elements/form/input.shared.css
index 6d24ffb..e97f6d0 100644
--- a/src/elements/input/input.shared.css
+++ b/src/elements/form/input.shared.css
@@ -1,7 +1,22 @@
-@import '../../shared/colors.css';
+/* Clickables */
 
-/* Various inputs use styling from button. */
-@import '../button.css';
+input[type='checkbox' i],
+input[type='radio' i],
+input[type='color' i],
+input[type='submit' i],
+input[type='button' i],
+input[type='date' i],
+input[type='time' i],
+input[type='datetime-local' i],
+input[type='month' i],
+input[type='week' i],
+input::-webkit-calendar-picker-indicator,
+input::-webkit-file-upload-button,
+input[type='range' i],
+input[type='reset' i],
+input[type='file' i] {
+	cursor: pointer;
+}
 
 /*
  * These are default values and styles for checkbox and radio inputs, which
diff --git a/src/elements/form/label.css b/src/elements/form/label.css
new file mode 100644
index 0000000..a562dd5
--- /dev/null
+++ b/src/elements/form/label.css
@@ -0,0 +1,10 @@
+label {
+	user-select: none;
+	cursor: pointer;
+}
+
+/* label > textarea,
+label > input,
+label > select {
+	margin-top: var(--spacing-form-element);
+} */
diff --git a/src/elements/form/select.css b/src/elements/form/select.css
new file mode 100644
index 0000000..284d8a4
--- /dev/null
+++ b/src/elements/form/select.css
@@ -0,0 +1,130 @@
+:root {
+	--line-height: 1.5;
+	--form-element-spacing-vertical: 0.75rem;
+	--form-element-spacing-horizontal: 1rem;
+	--form-element-border-width: 1px;
+	--block-round: 0.25rem;
+	--text: #415462;
+	--input-border: #c8d1d8;
+	--text-weight: 400;
+	--form-element-weight: var(--text-weight);
+	--mark-text: #2c3d49;
+	--muted-background: #edf0f3;
+	--icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+	--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+	--spacing-typography: 1.5rem;
+	--form-element-outline-width: 3px;
+	--primary-focus: rgba(16, 149, 193, 0.125);
+	--input-focus: var(--primary-focus);
+}
+
+select {
+	font-family: inherit; /* 1 */
+	font-size: 1rem; /* 1 */
+	line-height: var(--line-height); /* 1 */
+	margin: 0; /* 2 */
+}
+
+/* Change the inconsistent appearance in IE (opinionated) */
+
+select {
+	display: block;
+	width: 100%;
+}
+
+select {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+	vertical-align: middle;
+}
+
+/* Remove the inheritance of text transform in Edge, Firefox, and IE */
+select {
+	text-transform: none;
+}
+
+select {
+	border: var(--form-element-border-width) solid var(--input-border);
+	border-radius: var(--block-round);
+	outline: none;
+	background-color: var(--input-background);
+	color: var(--text);
+	font-weight: var(--form-element-weight);
+}
+
+select::placeholder,
+select::-webkit-input-placeholder {
+	color: var(--muted-text);
+	opacity: 1;
+}
+
+select:active,
+select:focus {
+	border-color: var(--input-hover-border);
+	background-color: var(--input-hover-background);
+}
+
+select[readonly],
+select[disabled] {
+	border-color: var(--muted-border);
+	box-shadow: none;
+}
+
+select[readonly] ~ label,
+select[disabled] ~ label {
+	color: var(--muted-text);
+}
+
+select[readonly]:active,
+select[disabled]:active,
+select[readonly]:focus,
+select[disabled]:focus {
+	box-shadow: none;
+}
+
+select[disabled]:not([type='reset']):not([type='submit']):not([type='button']) {
+	background-color: var(--muted-background);
+}
+
+select[disabled] {
+	opacity: 0.66;
+}
+
+select[aria-invalid] {
+	padding-right: 2rem;
+	background-position: center right 0.75rem;
+	background-repeat: no-repeat;
+	background-size: 1rem auto;
+}
+
+select[aria-invalid='false'] {
+	background-image: var(--icon-valid);
+}
+
+select[aria-invalid='true'] {
+	background-image: var(--icon-invalid);
+}
+
+select {
+	margin-bottom: var(--spacing-typography);
+}
+
+select:focus {
+	box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus);
+}
+
+select::-ms-expand {
+	border: 0;
+	background-color: transparent;
+}
+
+select:not([multiple]):not([size]) {
+	padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+	background-image: var(--icon-chevron);
+	background-position: center right 0.75rem;
+	background-repeat: no-repeat;
+	background-size: 1rem auto;
+}
diff --git a/src/elements/index.css b/src/elements/index.css
index e3a5281..ae8d42f 100644
--- a/src/elements/index.css
+++ b/src/elements/index.css
@@ -1,3 +1,9 @@
-@import './body.css';
 @import './button.css';
-@import './input/index.css';
+
+@import './form/label.css';
+@import './form/select.css';
+
+@import './form/input.shared.css';
+@import './form/input-checkbox.css';
+@import './form/input-color.css';
+@import './form/input-radio.css';
diff --git a/src/elements/input/index.css b/src/elements/input/index.css
deleted file mode 100644
index f38b79a..0000000
--- a/src/elements/input/index.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@import './input-color.css';
-@import './input-radio.css';
-@import './input-checkbox.css';
diff --git a/src/elements/label.css b/src/elements/label.css
deleted file mode 100644
index bd7b8ee..0000000
--- a/src/elements/label.css
+++ /dev/null
@@ -1,4 +0,0 @@
-label {
-	user-select: none;
-	cursor: pointer;
-}
diff --git a/src/extra/utils.css b/src/extra/utils.css
deleted file mode 100644
index fe4ffc7..0000000
--- a/src/extra/utils.css
+++ /dev/null
@@ -1,7 +0,0 @@
-[inline] {
-	display: inline;
-}
-
-[inline-block] {
-	display: inline-block;
-}
diff --git a/src/index.css b/src/index.css
index bae52d2..fe79e79 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,2 +1,6 @@
-@import './clickables.css';
+@import './shared/variables.css';
+@import './shared/colors.css';
+
+@import './utils/utils.css';
+
 @import './elements/index.css';
diff --git a/src/shared/variables.css b/src/shared/variables.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/utils.css b/src/utils/utils.css
new file mode 100644
index 0000000..bcfc057
--- /dev/null
+++ b/src/utils/utils.css
@@ -0,0 +1,17 @@
+[inline] {
+	display: inline;
+}
+
+[inline-block] {
+	display: inline-block;
+}
+
+/* Change the inconsistent appearance in IE (opinionated) */
+::-ms-expand {
+	display: none;
+}
+
+button,
+summary {
+	cursor: pointer;
+}

From afe1611aefab11a9fd4610c9ad763a18666c7988 Mon Sep 17 00:00:00 2001
From: Antonio R <22479344+a133xz@users.noreply.github.com>
Date: Thu, 25 Mar 2021 17:55:05 +0000
Subject: [PATCH 3/5] chore: gulpfile updated

---
 gulpfile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gulpfile.js b/gulpfile.js
index 34a6cb0..6b65857 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -4,7 +4,7 @@ import through2 from 'through2'
 
 var extract = function() {
 	return gulp
-		.src('src/elements/select.shared.css')
+		.src('src/elements/form/form.shared-is-test.css')
 		.pipe(
 			through2.obj(function(file, _, cb) {
 				if (file.isBuffer()) {

From e96def8f51239c545060fba5c259b1fde96bd7b9 Mon Sep 17 00:00:00 2001
From: Antonio R <22479344+a133xz@users.noreply.github.com>
Date: Thu, 25 Mar 2021 18:14:16 +0000
Subject: [PATCH 4/5] chore: variables proposal

---
 src/shared/variables.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/shared/variables.css b/src/shared/variables.css
index e69de29..1e1fc06 100644
--- a/src/shared/variables.css
+++ b/src/shared/variables.css
@@ -0,0 +1,9 @@
+/* Variables proposal */
+
+:root {
+	/* General */
+}
+
+select {
+	/* specific to select like the arrows */
+}

From b46d2a03152d6872d4c0e599fc6bfbebb68cde44 Mon Sep 17 00:00:00 2001
From: Antonio R <22479344+a133xz@users.noreply.github.com>
Date: Wed, 21 Apr 2021 15:02:09 +0100
Subject: [PATCH 5/5] remove duplicated code

---
 src/utils/utils.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/utils/utils.css b/src/utils/utils.css
index bcfc057..aa27052 100644
--- a/src/utils/utils.css
+++ b/src/utils/utils.css
@@ -10,8 +10,3 @@
 ::-ms-expand {
 	display: none;
 }
-
-button,
-summary {
-	cursor: pointer;
-}