@anyblades/blades 3.1.0-beta.4 → 3.1.0-beta.6

package/css/layered/forms/basics.css

@@ -1,16 +1,10 @@
 @layer blades {
-/**
- * Basics form elements
- */
-input,
-optgroup,
-select,
-textarea {
-  margin: 0;
+input, optgroup, select, textarea {
   font-size: 1rem;
   line-height: var(--pico-line-height);
-  font-family: inherit;
   letter-spacing: inherit;
+  margin: 0;
+  font-family: inherit;
 }
 
 input {
@@ -23,22 +17,20 @@ select {
 
 legend {
   max-width: 100%;
-  padding: 0;
   color: inherit;
   white-space: normal;
+  padding: 0;
 }
 
 textarea {
   overflow: auto;
 }
 
-[type="checkbox"],
-[type="radio"] {
+[type="checkbox"], [type="radio"] {
   padding: 0;
 }
 
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -57,8 +49,8 @@ textarea {
 }
 
 ::-moz-focus-inner {
-  padding: 0;
   border-style: none;
+  padding: 0;
 }
 
 :-moz-focusring {
@@ -73,17 +65,14 @@ textarea {
   display: none;
 }
 
-[type="file"],
-[type="range"] {
-  padding: 0;
+[type="file"], [type="range"] {
   border-width: 0;
+  padding: 0;
 }
 
 input:not([type="checkbox"], [type="radio"], [type="range"]) {
-  height: calc(
-    1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
-      var(--pico-border-width) * 2
-  );
+  height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
+      var(--pico-border-width) * 2);
 }
 
 fieldset {
@@ -91,97 +80,63 @@ fieldset {
   min-width: 0;
   margin: 0;
   margin-bottom: var(--pico-spacing);
-  padding: 0;
   border: 0;
+  padding: 0;
 }
 
-label,
-fieldset legend {
-  display: block;
-  margin-bottom: calc(var(--pico-spacing) * 0.375);
+label, fieldset legend {
+  margin-bottom: calc(var(--pico-spacing) * .375);
   color: var(--pico-color);
   font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
+  display: block;
 }
 
 fieldset legend {
-  margin-bottom: calc(var(--pico-spacing) * 0.5);
+  margin-bottom: calc(var(--pico-spacing) * .5);
 }
 
-input:not([type="checkbox"], [type="radio"]),
-button[type="submit"],
-select,
-textarea {
+input:not([type="checkbox"], [type="radio"]), button[type="submit"], select, textarea {
   width: 100%;
 }
 
-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
-select,
-textarea {
+input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
 }
 
-input,
-select,
-textarea {
+input, select, textarea {
   --pico-background-color: var(--pico-form-element-background-color);
   --pico-border-color: var(--pico-form-element-border-color);
   --pico-color: var(--pico-form-element-color);
   --pico-box-shadow: none;
   border: var(--pico-border-width) solid var(--pico-border-color);
   border-radius: var(--pico-border-radius);
-  outline: none;
   background-color: var(--pico-background-color);
   box-shadow: var(--pico-box-shadow);
   color: var(--pico-color);
   font-weight: var(--pico-font-weight);
-  transition:
-    background-color var(--pico-transition),
+  transition: background-color var(--pico-transition),
     border-color var(--pico-transition),
     color var(--pico-transition),
     box-shadow var(--pico-transition);
+  outline: none;
 }
 
-input:not(
-    [type="submit"],
-    [type="button"],
-    [type="reset"],
-    [type="checkbox"],
-    [type="radio"],
-    [readonly]
-  ):is(:active, :focus),
-:where(select, textarea):not([readonly]):is(:active, :focus) {
+input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
   --pico-background-color: var(--pico-form-element-active-background-color);
 }
 
-input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(
-    :active,
-    :focus
-  ),
-:where(select, textarea):not([readonly]):is(:active, :focus) {
+input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
   --pico-border-color: var(--pico-form-element-active-border-color);
 }
 
-input:not(
-    [type="submit"],
-    [type="button"],
-    [type="reset"],
-    [type="range"],
-    [type="file"],
-    [readonly]
-  ):focus,
-:where(select, textarea):not([readonly]):focus {
+input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, :where(select, textarea):not([readonly]):focus {
   --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
 }
 
-input:not([type="submit"], [type="button"], [type="reset"])[disabled],
-select[disabled],
-textarea[disabled],
-label[aria-disabled="true"],
-:where(fieldset[disabled])
-  :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
+input:not([type="submit"], [type="button"], [type="reset"])[disabled], select[disabled], textarea[disabled], label[aria-disabled="true"], :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
   opacity: var(--pico-form-element-disabled-opacity);
   pointer-events: none;
 }
@@ -190,149 +145,116 @@ label[aria-disabled="true"] input[disabled] {
   opacity: 1;
 }
 
-:where(input, select, textarea):not(
-    [type="checkbox"],
-    [type="radio"],
-    [type="date"],
-    [type="datetime-local"],
-    [type="month"],
-    [type="time"],
-    [type="week"],
-    [type="range"]
-  )[aria-invalid] {
-  padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
   padding-left: var(--pico-form-element-spacing-horizontal);
+  background-position: right .75rem center;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
   padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
   padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
-  background-position: center right 0.75rem;
-  background-size: 1rem auto;
-  background-repeat: no-repeat;
 }
-:where(input, select, textarea):not(
-    [type="checkbox"],
-    [type="radio"],
-    [type="date"],
-    [type="datetime-local"],
-    [type="month"],
-    [type="time"],
-    [type="week"],
-    [type="range"]
-  )[aria-invalid="false"]:not(select) {
+
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
   background-image: var(--pico-icon-valid);
 }
-:where(input, select, textarea):not(
-    [type="checkbox"],
-    [type="radio"],
-    [type="date"],
-    [type="datetime-local"],
-    [type="month"],
-    [type="time"],
-    [type="week"],
-    [type="range"]
-  )[aria-invalid="true"]:not(select) {
+
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(select) {
   background-image: var(--pico-icon-invalid);
 }
+
 :where(input, select, textarea)[aria-invalid="false"] {
   --pico-border-color: var(--pico-form-element-valid-border-color);
 }
+
 :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
   --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
 }
-:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not(
-    [type="checkbox"],
-    [type="radio"]
-  ) {
+
+:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
   --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
 }
+
 :where(input, select, textarea)[aria-invalid="true"] {
   --pico-border-color: var(--pico-form-element-invalid-border-color);
 }
+
 :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
   --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
 }
-:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not(
-    [type="checkbox"],
-    [type="radio"]
-  ) {
+
+:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
   --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
 }
 
-[dir="rtl"]
-  :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is(
-    [aria-invalid],
-    [aria-invalid="true"],
-    [aria-invalid="false"]
-  ) {
-  background-position: center left 0.75rem;
+[dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
+  background-position: .75rem;
 }
 
-input::placeholder,
-input::-webkit-input-placeholder,
-textarea::placeholder,
-textarea::-webkit-input-placeholder,
-select:invalid {
+input::placeholder, input::-webkit-input-placeholder, textarea::placeholder, textarea::-webkit-input-placeholder, select:invalid {
   color: var(--pico-form-element-placeholder-color);
   opacity: 1;
 }
 
-input:not([type="checkbox"], [type="radio"]),
-select,
-textarea {
+input:not([type="checkbox"], [type="radio"]), select, textarea {
   margin-bottom: var(--pico-spacing);
 }
 
 select::-ms-expand {
+  background-color: #0000;
   border: 0;
-  background-color: transparent;
 }
+
 select:not([multiple], [size]) {
   padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
   padding-left: var(--pico-form-element-spacing-horizontal);
-  padding-inline-start: var(--pico-form-element-spacing-horizontal);
-  padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
   background-image: var(--pico-icon-chevron);
-  background-position: center right 0.75rem;
-  background-size: 1rem auto;
+  background-position: right .75rem center;
   background-repeat: no-repeat;
+  background-size: 1rem;
+  padding-inline-start: var(--pico-form-element-spacing-horizontal);
+  padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
 }
+
 select[multiple] option:checked {
   background: var(--pico-form-element-selected-background-color);
   color: var(--pico-form-element-color);
 }
 
 [dir="rtl"] select:not([multiple], [size]) {
-  background-position: center left 0.75rem;
+  background-position: .75rem;
 }
 
 textarea {
-  display: block;
   resize: vertical;
+  display: block;
 }
+
 textarea[aria-invalid] {
-  --pico-icon-height: calc(
-    1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
-      var(--pico-border-width) * 2
-  );
-  background-position: top right 0.75rem !important;
+  --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
+      var(--pico-border-width) * 2);
+  background-position: right .75rem top !important;
   background-size: 1rem var(--pico-icon-height) !important;
 }
 
 :where(input, select, textarea, fieldset, .grid) + small {
-  display: block;
   width: 100%;
-  margin-top: calc(var(--pico-spacing) * -0.75);
+  margin-top: calc(var(--pico-spacing) * -.75);
   margin-bottom: var(--pico-spacing);
   color: var(--pico-muted-color);
+  display: block;
 }
+
 :where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] + small {
   color: var(--pico-ins-color);
 }
+
 :where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small {
   color: var(--pico-del-color);
 }
 
 label > :where(input, select, textarea) {
-  margin-top: calc(var(--pico-spacing) * 0.25);
+  margin-top: calc(var(--pico-spacing) * .25);
 }
 
 }

package/css/layered/forms/checkbox-radio-switch.css

@@ -1,64 +1,54 @@
 @layer blades {
-/**
- * Checkboxes, Radios and Switches
- */
-:where(:scope),
-:host {
+:where(:scope), :host {
   --pico-icon-checkbox: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --pico-icon-minus: 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='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
 }
-:where(:scope, [data-theme="light"], [data-theme="dark"]),
-:host {
+
+:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
   --pico-switch-background-color: light-dark(#bfc7d9, #333c4e);
   --pico-switch-checked-background-color: var(--pico-primary-background);
   --pico-switch-color: #fff;
-  --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --pico-switch-thumb-box-shadow: 0 0 0 #0000;
 }
 
 label:has([type="checkbox"], [type="radio"]) {
-  width: -moz-fit-content;
-  width: fit-content;
   cursor: pointer;
+  width: fit-content;
 }
 
-[type="checkbox"],
-[type="radio"] {
+[type="checkbox"], [type="radio"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  width: 1.25em;
-  height: 1.25em;
-  margin-top: -0.125em;
-  margin-inline-end: 0.5em;
+  margin-top: -.125em;
   border-width: var(--pico-border-width);
   vertical-align: middle;
   cursor: pointer;
+  width: 1.25em;
+  height: 1.25em;
+  margin-inline-end: .5em;
 }
-[type="checkbox"]::-ms-check,
-[type="radio"]::-ms-check {
+
+[type="checkbox"]::-ms-check, [type="radio"]::-ms-check {
   display: none;
 }
-[type="checkbox"]:checked,
-[type="checkbox"]:checked:active,
-[type="checkbox"]:checked:focus,
-[type="radio"]:checked,
-[type="radio"]:checked:active,
-[type="radio"]:checked:focus {
+
+[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
   --pico-background-color: var(--pico-primary-background);
   --pico-border-color: var(--pico-primary-border);
   background-image: var(--pico-icon-checkbox);
   background-position: center;
-  background-size: 0.75em auto;
   background-repeat: no-repeat;
+  background-size: .75em;
 }
-[type="checkbox"] ~ label,
-[type="radio"] ~ label {
-  display: inline-block;
-  margin-bottom: 0;
+
+[type="checkbox"] ~ label, [type="radio"] ~ label {
   cursor: pointer;
+  margin-bottom: 0;
+  display: inline-block;
 }
-[type="checkbox"] ~ label:not(:last-of-type),
-[type="radio"] ~ label:not(:last-of-type) {
+
+[type="checkbox"] ~ label:not(:last-of-type), [type="radio"] ~ label:not(:last-of-type) {
   margin-inline-end: 1em;
 }
 
@@ -67,97 +57,78 @@ label:has([type="checkbox"], [type="radio"]) {
   --pico-border-color: var(--pico-primary-border);
   background-image: var(--pico-icon-minus);
   background-position: center;
-  background-size: 0.75em auto;
   background-repeat: no-repeat;
+  background-size: .75em;
 }
 
 [type="radio"] {
   border-radius: 50%;
 }
-[type="radio"]:checked,
-[type="radio"]:checked:active,
-[type="radio"]:checked:focus {
+
+[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
   --pico-background-color: var(--pico-primary-inverse);
-  border-width: 0.35em;
   background-image: none;
+  border-width: .35em;
 }
 
 [type="checkbox"][role="switch"] {
   --pico-background-color: var(--pico-switch-background-color);
   --pico-color: var(--pico-switch-color);
-  width: 2.25em;
-  height: 1.25em;
   border: var(--pico-border-width) solid var(--pico-border-color);
-  border-radius: 1.25em;
   background-color: var(--pico-background-color);
+  border-radius: 1.25em;
+  width: 2.25em;
+  height: 1.25em;
   line-height: 1.25em;
 }
+
 [type="checkbox"][role="switch"]:not([aria-invalid]) {
   --pico-border-color: var(--pico-switch-background-color);
 }
+
 [type="checkbox"][role="switch"]:before {
-  display: block;
   aspect-ratio: 1;
-  height: 100%;
-  border-radius: 50%;
   background-color: var(--pico-color);
+  height: 100%;
   box-shadow: var(--pico-switch-thumb-box-shadow);
   content: "";
-  transition: margin 0.1s ease-in-out;
+  border-radius: 50%;
+  transition: margin .1s ease-in-out;
+  display: block;
 }
+
 [type="checkbox"][role="switch"]:focus {
   --pico-background-color: var(--pico-switch-background-color);
   --pico-border-color: var(--pico-switch-background-color);
 }
+
 [type="checkbox"][role="switch"]:checked {
   --pico-background-color: var(--pico-switch-checked-background-color);
   --pico-border-color: var(--pico-switch-checked-background-color);
   background-image: none;
 }
-[type="checkbox"][role="switch"]:checked::before {
-  margin-inline-start: calc(2.25em - 1.25em);
+
+[type="checkbox"][role="switch"]:checked:before {
+  margin-inline-start: 1em;
 }
+
 [type="checkbox"][role="switch"][disabled] {
   --pico-background-color: var(--pico-border-color);
 }
 
-[type="checkbox"][aria-invalid="false"]:checked,
-[type="checkbox"][aria-invalid="false"]:checked:active,
-[type="checkbox"][aria-invalid="false"]:checked:focus,
-[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
-[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
-[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
+[type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
   --pico-background-color: var(--pico-form-element-valid-border-color);
 }
-[type="checkbox"]:checked[aria-invalid="true"],
-[type="checkbox"]:checked:active[aria-invalid="true"],
-[type="checkbox"]:checked:focus[aria-invalid="true"],
-[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
-[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
-[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
+
+[type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
   --pico-background-color: var(--pico-form-element-invalid-border-color);
 }
 
-[type="checkbox"][aria-invalid="false"]:checked,
-[type="checkbox"][aria-invalid="false"]:checked:active,
-[type="checkbox"][aria-invalid="false"]:checked:focus,
-[type="radio"][aria-invalid="false"]:checked,
-[type="radio"][aria-invalid="false"]:checked:active,
-[type="radio"][aria-invalid="false"]:checked:focus,
-[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
-[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
-[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
+[type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="radio"][aria-invalid="false"]:checked, [type="radio"][aria-invalid="false"]:checked:active, [type="radio"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
   --pico-border-color: var(--pico-form-element-valid-border-color);
 }
-[type="checkbox"]:checked[aria-invalid="true"],
-[type="checkbox"]:checked:active[aria-invalid="true"],
-[type="checkbox"]:checked:focus[aria-invalid="true"],
-[type="radio"]:checked[aria-invalid="true"],
-[type="radio"]:checked:active[aria-invalid="true"],
-[type="radio"]:checked:focus[aria-invalid="true"],
-[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
-[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
-[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
+
+[type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="radio"]:checked[aria-invalid="true"], [type="radio"]:checked:active[aria-invalid="true"], [type="radio"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
   --pico-border-color: var(--pico-form-element-invalid-border-color);
 }
 

package/css/layered/forms/float-label/core.css

@@ -0,0 +1,31 @@
+@layer blades {
+/*!
+ * Float Label CSS v2 by Blades CSS 🥷🏷️
+ * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Licensed under MIT
+ */
+label:has( > span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select), .has-float-label {
+  display: block;
+  position: relative;
+
+  & > span, & label {
+    cursor: text;
+    font-size: 75%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  & :placeholder-shown:not(:focus)::placeholder {
+    opacity: 0;
+  }
+
+  &:has(:placeholder-shown:not(:focus)) {
+    & > span, & label {
+      font-size: inherit;
+      opacity: .5;
+    }
+  }
+}
+
+}

package/css/layered/forms/float-label/theme.css

@@ -0,0 +1,28 @@
+@layer blades {
+label:has( > span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select), .has-float-label {
+  & > span, & label {
+    opacity: .75;
+    padding-block-start: .25rem;
+    padding-inline-start: calc(1rem + 1px);
+    transition: all .25s;
+  }
+
+  & input, & textarea, & select {
+    margin-block-start: 0;
+    padding-block: 1.125rem .375rem;
+    padding-inline-start: 1rem;
+
+    &::placeholder {
+      opacity: 1;
+      transition: all .25s;
+    }
+  }
+
+  &:has(:placeholder-shown:not(:focus)) {
+    & > span, & label {
+      padding-block: .75rem;
+    }
+  }
+}
+
+}