feat(form-field): new approach to wrap input fields of all kinds

sass/components/forms/_form-field.scss

@@ -0,0 +1,139 @@
+/**
+new approach for floating labels aka "form-fields" (css only)
+// TODO: Adapt docs first and then ship with next version
+- also use for selects, autocomplete, etc.
+
+<div class="row g-1">
+  <fieldset class="form-field animated s12 m4">
+    <input type="text" id="my-input-1" placeholder="Given Name" />
+    <legend><label for="my-input-1">Given Name</label></legend>
+  </fieldset>
+  <fieldset class="form-field s12 m4" disabled>
+    <input type="text" id="my-input-2" placeholder="e.g. Wurzer" />
+    <legend><label for="my-input-2">Family Name</label></legend>
+  </fieldset>
+  <fieldset class="form-field s12 m4">
+    <input type="text" id="my-input-3" placeholder="e.g. April" required />
+    <legend><label for="my-input-3">Birthmonth</label></legend>
+  </fieldset>
+</div>
+
+*/
+
+fieldset.form-field {
+  --idle-color: gray;
+  --hover-color: darkgoldenrod;
+  --focus-color: var(--md-sys-color-primary);
+  --disabled-bg: gray;
+  --font-size: 16px;
+  --animation-duration: 0.5s;
+  --border-radius: 4px;
+  --border-width: 1px;
+  --focused-border-width: 2px;
+  --input-height: 56px;
+
+  position: relative;
+  border: var(--border-width) solid var(--idle-color);
+  padding: 0;
+  margin-left: var(--border-width);
+  margin-right: var(--border-width);
+  margin-bottom: var(--border-width);
+  border-radius: var(--border-radius);
+}
+fieldset.form-field legend {
+  margin-left: 0.5rem;
+}
+fieldset.form-field legend label {
+  padding: 0 0.5rem;
+  font-size: calc(var(--font-size) * 0.75);
+}
+fieldset.form-field input {
+  border: none;
+  padding: 0 1rem;
+  margin-top: -0.5rem;
+}
+
+/* start state for animations */
+fieldset.form-field.animated legend::before {
+  content: "";
+  position: absolute;
+  display: block;
+  width: 100%;
+  right: 0;
+  height: 0;
+  border-top: var(--border-width) solid var(--idle-color);
+  align-self: center;
+  transition: width calc(var(--animation-duration) * 0.8);
+}
+fieldset.form-field.animated legend {
+  position: relative;
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  height: var(--font-size);
+}
+fieldset.form-field.animated legend label {
+  transform: translateY(calc(var(--input-height) * 0.5));
+  font-size: var(--font-size);
+  opacity: 0;
+  transition: font-size var(--animation-duration), transform var(--animation-duration), opacity 0.5s step-end;
+}
+fieldset.form-field.animated input::placeholder {
+  opacity: 1;
+  transition: opacity var(--animation-duration) step-end;
+}
+
+/* hovered state */
+fieldset.form-field:hover {
+  border-color: var(--hover-color);
+}
+/* hovered animated */
+fieldset.form-field.animated:hover legend::before {
+  /* background-color: var(--hover-color); */
+  border-top: var(--border-width) solid var(--hover-color);
+}
+
+/* focused animated */
+fieldset.form-field.animated input:not(:placeholder-shown) ~ legend::before {
+  width: 0;
+}
+fieldset.form-field.animated input:not(:placeholder-shown) ~ legend label {
+  font-size: calc(var(--font-size) * 0.75);
+  transform: translateY(0);
+  opacity: 1;
+}
+fieldset.form-field.animated:focus-within legend::before {
+  border-top: var(--focused-border-width) solid var(--focus-color);
+  /* background-color: var(--focus-color); */
+  width: 0;
+}
+fieldset.form-field.animated:focus-within input::placeholder {
+  opacity: 0;
+  transition: opacity 0s;
+}
+
+/* focused state */
+fieldset.form-field:focus-within {
+  border: var(--focused-border-width) solid var(--focus-color);
+  margin: 0;
+}
+fieldset.form-field:focus-within legend label {
+  opacity: 1;
+  color: var(--focus-color);
+  font-size: calc(var(--font-size) * 0.75);
+  transform: translateY(0);
+  transition: font-size var(--animation-duration), transform var(--animation-duration), opacity 0s;
+}
+
+/* disabled */
+fieldset.form-field[disabled] {
+  background-color: var(--disabled-bg);
+}
+fieldset.form-field[disabled]:hover {
+  border-color: transparent;
+}
+
+/* required (special) */
+fieldset.form-field:has([required]) label::after {
+  content: " *";
+}

sass/components/forms/_forms.scss

@@ -5,6 +5,7 @@
 @forward 'select';
 @forward 'file-input';
 @forward 'range';
+@forward 'form-field';
 
 // Remove Focus Boxes
 select:focus {