Merge branch 'master' into contributing-doc

.gitignore

@@ -85,3 +85,6 @@ typings/
 
 # IntelliJ IDE
 .idea/
+
+# Output of yarn build
+dist/

dist/dark-legacy.css

@@ -1,12 +0,0 @@
-
-
-@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');
-@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css') (prefers-color-scheme: light);
-/**
- * Dark-themed version for legacy browsers:
- * Loads the compiled, standalone version of the dark theme,
- * but overrides it with the compiled, standalone version of the light theme
- * if a system-wide theme preference is set on the user's device.
- */
-
-/*# sourceMappingURL=dark-legacy.css.map */

dist/dark-legacy.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["dark-legacy.css"],"names":[],"mappings":";;AAOA,uGAAuG;AACvG,sIAC6B;AAT7B;;;;;EAKE","file":"dark-legacy.css","sourcesContent":["/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')\n(prefers-color-scheme: light);\n"]}

dist/dark-legacy.min.css

@@ -1,2 +0,0 @@
-@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css");@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css") (prefers-color-scheme: light);
-/*# sourceMappingURL=dark-legacy.min.css.map */

dist/dark-legacy.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["dark-legacy.css"],"names":[],"mappings":"AAOA,uGAAuG,CACvG,sIAHE","file":"dark-legacy.min.css","sourcesContent":["/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css')\n(prefers-color-scheme: light);\n"]}

dist/dark-legacy.standalone.css

@@ -1,600 +0,0 @@
-/**
- * Standalone dark-themed version for legacy browsers.
- * Includes dark variables and core, compiled at build time so the final output
- * will only include regular CSS, no variables.
- */
-
-body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  line-height: 1.4;
-
-  max-width: 800px;
-  margin: 20px auto;
-  padding: 0 10px;
-
-  color: #dbdbdb;
-  background: #202b38;
-
-  text-rendering: optimizeLegibility;
-}
-
-button {
-  transition: background-color 0.1s linear,
-              border-color 0.1s linear,
-              color 0.1s linear,
-              box-shadow 0.1s linear,
-              transform 0.1s ease;
-}
-
-input {
-  transition: background-color 0.1s linear,
-              border-color 0.1s linear,
-              color 0.1s linear,
-              box-shadow 0.1s linear,
-              transform 0.1s ease;
-}
-
-textarea {
-  transition: background-color 0.1s linear,
-              border-color 0.1s linear,
-              color 0.1s linear,
-              box-shadow 0.1s linear,
-              transform 0.1s ease;
-}
-
-h1 {
-  font-size: 2.2em;
-  margin-top: 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-bottom: 12px;
-}
-
-h1 {
-  color: #ffffff;
-}
-
-h2 {
-  color: #ffffff;
-}
-
-h3 {
-  color: #ffffff;
-}
-
-h4 {
-  color: #ffffff;
-}
-
-h5 {
-  color: #ffffff;
-}
-
-h6 {
-  color: #ffffff;
-}
-
-strong {
-  color: #ffffff;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-b,
-strong,
-th {
-  font-weight: 600;
-}
-
-q:before {
-   content: none;
-}
-
-q:after {
-   content: none;
-}
-
-blockquote{
-  border-left: 4px solid #0096bfab;
-  margin: 1.5em 0em;
-  padding: 0.5em 1em;
-  font-style: italic;
-}
-
-q{
-  border-left: 4px solid #0096bfab;
-  margin: 1.5em 0em;
-  padding: 0.5em 1em;
-  font-style: italic;
-}
-
-blockquote > footer {
-  margin-top: 10px;
-  font-style: normal;
-}
-
-blockquote cite {
-  font-style: normal;
-}
-
-address {
-  font-style: normal;
-}
-
-a[href^='mailto']::before {
-  content: '📧 ';
-}
-
-a[href^='tel']::before {
-  content: '📞 ';
-}
-
-a[href^='sms']::before {
-  content: '💬 ';
-}
-
-mark {
-  background-color: #efdb43;
-  border-radius: 2px;
-  padding: 0px 2px 0px 2px;
-  color: #000000;
-}
-
-button, select,
-input[type='submit'],
-input[type='button'],
-input[type='checkbox'],
-input[type='range'],
-input[type='radio'] {
-  cursor: pointer;
-}
-
-input:not([type='checkbox']):not([type='radio']),
-select {
-  display: block;
-}
-
-input {
-  color: #ffffff;
-  background-color: #161f27;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
-button {
-  color: #ffffff;
-  background-color: #161f27;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
-textarea {
-  color: #ffffff;
-  background-color: #161f27;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
-select {
-  color: #ffffff;
-  background-color: #161f27;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
-input,
-select,
-button,
-textarea {
-  -webkit-appearance: none;
-}
-
-textarea {
-  margin-right: 0;
-  width: 100%;
-  box-sizing: border-box;
-  resize: vertical;
-}
-
-select {
-  background: #161f27 url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='62.5' width='116.9' fill='%23efefef'%3E %3Cpath d='M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z'/%3E %3C/svg%3E") calc(100% - 12px) 50% / 12px no-repeat;
-  padding-right: 35px;
-}
-
-select::-ms-expand {
-  display: none;
-}
-
-button,
-input[type='submit'],
-input[type='button'] {
-  padding-right: 30px;
-  padding-left: 30px;
-}
-
-button:hover {
-  background: #324759;
-}
-
-input[type='submit']:hover {
-  background: #324759;
-}
-
-input[type='button']:hover {
-  background: #324759;
-}
-
-input:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
-}
-
-select:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
-}
-
-button:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
-}
-
-textarea:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
-}
-
-input[type='checkbox'],
-input[type='radio'] {
-  position: relative;
-  width: 14px;
-  height: 14px;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  margin-right: 2px;
-}
-
-input[type='radio'] {
-  border-radius: 50%;
-}
-
-input[type='checkbox']:checked {
-  background: #324759;
-}
-
-input[type='radio']:checked {
-  background: #324759;
-}
-
-input[type='checkbox']:checked::before,
-input[type='radio']:checked::before {
-  content: '•';
-  display: block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-
-input[type='checkbox']:checked::before {
-  content: '✔';
-  transform: translateY(-50%) translateY(0.5px) translateX(-6px);
-}
-
-input[type='checkbox']:active,
-input[type='radio']:active,
-input[type='submit']:active,
-input[type='button']:active,
-input[type='range']:active,
-button:active {
-  transform: translateY(2px);
-}
-
-input:disabled,
-select:disabled,
-button:disabled,
-textarea:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-::-webkit-input-placeholder {
-  color: #a9a9a9;
-}
-
-:-ms-input-placeholder {
-  color: #a9a9a9;
-}
-
-::-ms-input-placeholder {
-  color: #a9a9a9;
-}
-
-::placeholder {
-  color: #a9a9a9;
-}
-
-input[type='range'] {
-  margin: 10px 0;
-  padding: 10px 0;
-  background: transparent;
-}
-
-input[type='range']:focus {
-  outline: none;
-}
-
-input[type='range']::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 9.5px;
-  transition: 0.2s;
-  background: #161f27;
-  border-radius: 3px;
-}
-
-input[type='range']::-webkit-slider-thumb {
-  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  height: 20px;
-  width: 20px;
-  border-radius: 50%;
-  background: #dbdbdb;
-  -webkit-appearance: none;
-  margin-top: -7px;
-}
-
-input[type='range']:focus::-webkit-slider-runnable-track {
-  background: #161f27;
-}
-
-input[type='range']::-moz-range-track {
-  width: 100%;
-  height: 9.5px;
-  transition: 0.2s;
-  background: #161f27;
-  border-radius: 3px;
-}
-
-input[type='range']::-moz-range-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  height: 20px;
-  width: 20px;
-  border-radius: 50%;
-  background: #dbdbdb;
-}
-
-input[type='range']::-ms-track {
-  width: 100%;
-  height: 9.5px;
-  background: transparent;
-  border-color: transparent;
-  border-width: 16px 0;
-  color: transparent;
-}
-
-input[type='range']::-ms-fill-lower {
-  background: #161f27;
-  border: 0.2px solid #010101;
-  border-radius: 3px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-}
-
-input[type='range']::-ms-fill-upper {
-  background: #161f27;
-  border: 0.2px solid #010101;
-  border-radius: 3px;
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-}
-
-input[type='range']::-ms-thumb {
-  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
-  border: 1px solid #000000;
-  height: 20px;
-  width: 20px;
-  border-radius: 50%;
-  background: #dbdbdb;
-}
-
-input[type='range']:focus::-ms-fill-lower {
-  background: #161f27;
-}
-
-input[type='range']:focus::-ms-fill-upper {
-  background: #161f27;
-}
-
-a {
-  text-decoration: none;
-  color: #41adff;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-code {
-  background:  #161f27;
-  color: #ffbe85;
-  padding: 2.5px 5px;
-  border-radius: 6px;
-  font-size: 1em;
-}
-
-samp {
-  background:  #161f27;
-  color: #ffbe85;
-  padding: 2.5px 5px;
-  border-radius: 6px;
-  font-size: 1em;
-}
-
-time {
-  background:  #161f27;
-  color: #ffbe85;
-  padding: 2.5px 5px;
-  border-radius: 6px;
-  font-size: 1em;
-}
-
-pre > code {
-  padding: 10px;
-  display: block;
-  overflow-x: auto;
-}
-
-var {
-  color: #d941e2;
-  font-style: normal;
-  font-family: monospace;
-}
-
-kbd {
-  background: #161f27;
-  border: 1px solid #dbdbdb;
-  border-radius: 2px;
-  color: #dbdbdb;
-  padding: 2px 4px 2px 4px;
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-hr {
-  border: none;
-  border-top: 1px solid #dbdbdb;
-}
-
-table {
-  border-collapse: collapse;
-  margin-bottom: 10px;
-  width: 100%;
-}
-
-td,
-th {
-  padding: 6px;
-  text-align: left;
-}
-
-thead {
-  border-bottom: 1px solid #dbdbdb;
-}
-
-tfoot {
-  border-top: 1px solid #dbdbdb;
-}
-
-tbody tr:nth-child(even) {
-  background-color: #1a242f;
-}
-
-::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background: #161f27;
-  border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #324759;
-  border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgb(65, 92, 115);
-}
-
-::-moz-selection {
-  background-color: #161f27;
-}
-
-::selection {
-  background-color: #161f27;
-}
-
-details {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  background-color: #1a242f;
-  padding: 10px 10px 0;
-  margin: 1em 0;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-details[open] {
-  padding: 10px;
-}
-
-details > :last-child {
-  margin-bottom: 0;
-}
-
-details[open] summary {
-  margin-bottom: 10px;
-}
-
-summary {
-  display: list-item;
-  background-color: #161f27;
-  padding: 10px;
-  margin: -10px -10px 0;
-}
-
-details > :not(summary) {
-  margin-top: 0;
-}
-
-summary::-webkit-details-marker {
-  color: #dbdbdb;
-}
-
-/*# sourceMappingURL=dark-legacy.standalone.css.map */

dist/dark.css

@@ -230,6 +230,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -318,6 +324,19 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/dark.standalone.css

@@ -195,6 +195,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -283,6 +289,19 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/light-legacy.css

@@ -1,12 +0,0 @@
-
-
-@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');
-@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css') (prefers-color-scheme: dark);
-/**
- * Light-themed version for legacy browsers:
- * Loads the compiled, standalone version of the light theme at runtime,
- * but overrides it with the compiled, standalone version of the dark theme
- * if a system-wide theme preference is set on the user's device.
- */
-
-/*# sourceMappingURL=light-legacy.css.map */

dist/light-legacy.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["light-legacy.css"],"names":[],"mappings":";;AAOA,wGAAwG;AACxG,oIAC4B;AAT5B;;;;;EAKE","file":"light-legacy.css","sourcesContent":["/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')\n(prefers-color-scheme: dark);\n"]}

dist/light-legacy.min.css

@@ -1,2 +0,0 @@
-@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css");@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css") (prefers-color-scheme: dark);
-/*# sourceMappingURL=light-legacy.min.css.map */

dist/light-legacy.min.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["light-legacy.css"],"names":[],"mappings":"AAOA,wGAAwG,CACxG,oIAHE","file":"light-legacy.min.css","sourcesContent":["/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light-legacy.standalone.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark-legacy.standalone.min.css')\n(prefers-color-scheme: dark);\n"]}

dist/light-legacy.standalone.css

@@ -251,6 +251,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -357,6 +363,19 @@ textarea:disabled {
   color: #949494;
 }
 
+fieldset {
+  border: 1px #0096bfab solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/light.css

@@ -230,6 +230,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -318,6 +324,19 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/light.standalone.css

@@ -195,6 +195,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -283,6 +289,19 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

gulpfile.js

@@ -69,7 +69,9 @@ function style() {
       // Calculate size before autoprefixing
       .pipe(bytediff.start())
       // autoprefix
-      .pipe(postcss([autoprefixer()]))
+      .pipe(postcss([autoprefixer({
+        env: "legacy"
+      })]))
       // Write the amount gained by autoprefixing
       .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
       .pipe(excludeModern.restore)
@@ -79,8 +81,9 @@ function style() {
       // Calculate size before autoprefixing
       .pipe(bytediff.start())
       // autoprefix modern builds
-      // TODO: Use separate browserslist to only apply prefixes needed in *modern* browsers
+      .pipe(postcss([autoprefixer({
-      .pipe(postcss([autoprefixer()]))
+        env: "modern"
+      })]))
       // Write the amount gained by autoprefixing
       .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
       .pipe(excludeLegacy.restore)

index.html

@@ -100,13 +100,33 @@
 
     <h3>Form elements</h3>
     <form>
-      <label for='email'>Email</label>
+
-      <input
+      <fieldset>
-        type='email'
+        <legend>Fieldset</legend>
-        name='email'
+
-        id='email'
+        <label for='email'>Email</label>
-        placeholder='john.doe@gmail.com'
+        <input
-      />
+          type='email'
+          name='email'
+          id='email'
+          placeholder='john.doe@gmail.com'
+        />
+
+        <label for='password'>Password</label>
+        <input
+          type='password'
+          name='password'
+          id='password'
+          placeholder='password'
+        />
+
+        <p>
+          <input type='checkbox' name='remember' id='remember' checked />
+          <label for='remember'>Remember me</label>
+        </p>
+
+        <input type='submit' />
+      </fieldset>
 
       <label for='id'>User id (read only)</label>
       <input readonly name='id' id='id' value='04D6H89Z' />
@@ -133,11 +153,9 @@
         <option value='lemon'>Lemon juice</option>
       </select>
 
-      <br />
-
       <label for='drinks'>Or select multiple favorite drinks</label>
-      <p>Hold down the Ctrl (windows) /  
+      <br/>
-        Command (Mac) button to select multiple options.</p> 
+      <small>Hold down the Ctrl (Windows) /  Command (Mac) button to select multiple options. (P.S. this message is inside a <code>&lt;small&gt;</code> tag!</small>) 
       <select name='drink' id='drinks' multiple>
         <option value='mojito'>Mojito</option>
         <option value='water'>Water</option>
@@ -168,11 +186,6 @@
         <label for='volume'>Volume</label>
         <input type='range' id='start' name='volume' id='volume' min='0' max='11' />
       </div>
-
-      <input type='checkbox' name='remember' id='remember' checked />
-      <label for='remember'>Remember me</label>
-
-      <input type='submit' />
     </form>
 
     <h3>Code</h3>

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "build": "gulp style",
-    "dev": "gulp watch"
+    "dev": "gulp watch",
+    "prepublishOnly": "yarn build"
   },
   "repository": {
     "type": "git",
@@ -41,7 +42,24 @@
     "postcss-import": "^12.0.1",
     "postcss-inline-svg": "^3.1.1"
   },
-  "browserslist": [
+  "browserslist": {
-    "defaults AND not android 4.4.3"
+     "legacy": ["defaults AND not android 4.4.3"],
+     "modern": [
+       "Edge > 16",
+       "Firefox > 31",
+       "Chrome > 49",
+       "Safari > 9.1",
+       "Opera > 36",
+       "ios_saf > 9.3",
+       "Android > 76",
+       "OperaMobile > 46",
+       "ChromeAndroid > 76",
+       "FirefoxAndroid > 68",
+       "UCAndroid > 12.12",
+       "Samsung > 5"
+     ]
+  },
+  "files": [
+    "dist"
   ]
 }

src/parts/_forms.css

@@ -54,6 +54,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -128,4 +134,17 @@ textarea:disabled {
 
 ::placeholder {
   color: var(--form-placeholder);
+}
+
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
 }