@anyblades/blades 3.1.0-beta.5 → 3.1.0-beta.7

package/css/float-label.css

@@ -3,205 +3,52 @@
  * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
  * Licensed under MIT
  */
-/*\3c !--section:docs-->
-
-First, we target either:
-1. `<label>` which `:has` inner form inputs (classless approach)
-2. or explicit `.has-float-label` class (explicit approach)
-
-```css */
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ),
-.has-float-label {
+label:has( > span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select), .has-float-label {
   display: block;
   position: relative;
-  /*```
-  Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
-  ```css */
-}
-/*```
-  Then, we define the default/fallback state (when the float label should be minimized):
-  ```css */
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) > span,
-  label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) label,
-  .has-float-label > span,
-  .has-float-label label {
+
+  & > span, & label {
+    cursor: text;
+    font-size: 75%;
     position: absolute;
     top: 0;
     left: 0;
-    font-size: 75%;
-    cursor: text;
   }
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
-    opacity: 0;
-  }
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
-    opacity: 0;
-  }
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
+
+  & :placeholder-shown:not(:focus)::placeholder {
     opacity: 0;
   }
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
-      font-size: inherit;
-      opacity: 50%;
-    }
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ):has(*:placeholder-shown:not(:focus)) label,
-    .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
-    .has-float-label:has(*:placeholder-shown:not(:focus)) label {
+
+  &:has(:placeholder-shown:not(:focus)) {
+    & > span, & label {
       font-size: inherit;
-      opacity: 50%;
+      opacity: .5;
     }
-/*```
-
-The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
+  }
+}
 
-Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
+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;
+  }
 
-*/
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ),
-.has-float-label {
+  & input, & textarea, & select {
+    margin-block-start: 0;
+    padding-block: 1.125rem .375rem;
+    padding-inline-start: 1rem;
 
-  /* Enlarged state */
-}
-/* Default/fallback state */
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) > span,
-  label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) label,
-  .has-float-label > span,
-  .has-float-label label {
-    padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
-    padding-block-start: 0.25rem;
-    opacity: 75%;
-    transition: all 0.25s;
-  }
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) input,
-  label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) textarea,
-  label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) select,
-  .has-float-label input,
-  .has-float-label textarea,
-  .has-float-label select {
-    margin-block-start: 0; /* reset Pico */
-    padding-inline-start: 1rem; /* match Pico */
-    padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
-  }
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) input::-moz-placeholder, label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) textarea::-moz-placeholder, label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
-      opacity: 100%;
-      -moz-transition: all 0.25s;
-      transition: all 0.25s;
-    }
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) input::placeholder, label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) textarea::placeholder, label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
-      opacity: 100%;
-      transition: all 0.25s;
+    &::placeholder {
+      opacity: 1;
+      transition: all .25s;
     }
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
-      padding-block: 0.75rem; /* match Pico */
-    }
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ):has(*:placeholder-shown:not(:focus)) label,
-    .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
-    .has-float-label:has(*:placeholder-shown:not(:focus)) label {
-      padding-block: 0.75rem; /* match Pico */
+  }
+
+  &:has(:placeholder-shown:not(:focus)) {
+    & > span, & label {
+      padding-block: .75rem;
     }
+  }
+}

package/css/float-label.min.css

@@ -3,4 +3,4 @@
  * 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}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select)>span,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) label,.has-float-label>span,.has-float-label label{cursor:text;font-size:75%;position:absolute;top:0;left:0}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :placeholder-shown:not(:focus)::-moz-placeholder,.has-float-label :placeholder-shown:not(:focus)::-moz-placeholder{opacity:0}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :-moz-placeholder-shown:not(:focus)::placeholder,.has-float-label :-moz-placeholder-shown:not(:focus)::placeholder{opacity:0}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) :placeholder-shown:not(:focus)::placeholder,.has-float-label :placeholder-shown:not(:focus)::placeholder{opacity:0}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,.has-float-label:has(:placeholder-shown:not(:focus)) label{font-size:inherit;opacity:.5}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,.has-float-label:has(:placeholder-shown:not(:focus)) label{font-size:inherit;opacity:.5}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select)>span,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) label,.has-float-label>span,.has-float-label label{opacity:.75;padding-block-start:.25rem;padding-inline-start:calc(1rem + 1px);transition:all .25s}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select,.has-float-label input,.has-float-label textarea,.has-float-label select{margin-block-start:0;padding-block:1.125rem .375rem;padding-inline-start:1rem}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input::-moz-placeholder,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea::-moz-placeholder,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select::-moz-placeholder,.has-float-label input::-moz-placeholder,.has-float-label textarea::-moz-placeholder,.has-float-label select::-moz-placeholder{opacity:1;-moz-transition:all .25s;transition:all .25s}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input::placeholder,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea::placeholder,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select::placeholder,.has-float-label input::placeholder,.has-float-label textarea::placeholder,.has-float-label select::placeholder{opacity:1;transition:all .25s}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,.has-float-label:has(:placeholder-shown:not(:focus)) label{padding-block:.75rem}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span,label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,.has-float-label:has(:placeholder-shown:not(:focus)) label{padding-block:.75rem}
+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}}}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}}}