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

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

@@ -4,100 +4,28 @@
  * 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.
-
-*/
+  }
+}
 
 }

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

@@ -1,110 +1,28 @@
 @layer blades {
-label:has(> span):has(
-    input:not([type="checkbox"], [type="radio"], [type="range"]),
-    textarea,
-    select
-  ),
-.has-float-label {
-
-  /* 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), .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
-  ) 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;
-    }
-  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 */
+
+  & input, & textarea, & select {
+    margin-block-start: 0;
+    padding-block: 1.125rem .375rem;
+    padding-inline-start: 1rem;
+
+    &::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: 0.75rem; /* match Pico */
+  }
+
+  &:has(:placeholder-shown:not(:focus)) {
+    & > span, & label {
+      padding-block: .75rem;
     }
+  }
+}
 
 }

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

@@ -4,207 +4,54 @@
  * 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/layered/forms/input-color.css

@@ -1,20 +1,20 @@
 @layer blades {
-/**
- * Input type color
- */
 [type="color"]::-webkit-color-swatch-wrapper {
   padding: 0;
 }
+
 [type="color"]::-moz-focus-inner {
   padding: 0;
 }
+
 [type="color"]::-webkit-color-swatch {
+  border-radius: calc(var(--pico-border-radius) * .5);
   border: 0;
-  border-radius: calc(var(--pico-border-radius) * 0.5);
 }
+
 [type="color"]::-moz-color-swatch {
+  border-radius: calc(var(--pico-border-radius) * .5);
   border: 0;
-  border-radius: calc(var(--pico-border-radius) * 0.5);
 }
 
 }

package/css/layered/forms/input-datetime.css

@@ -1,38 +1,25 @@
 @layer blades {
-/**
- * Input type datetime
- */
-:where(:scope),
-:host {
+:where(:scope), :host {
   --pico-icon-date: 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(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   --pico-icon-time: 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(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
-input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is(
-    [type="date"],
-    [type="datetime-local"],
-    [type="month"],
-    [type="time"],
-    [type="week"]
-  ) {
-  --pico-icon-position: 0.75rem;
+input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+  --pico-icon-position: .75rem;
   --pico-icon-width: 1rem;
-  min-width: 0;
   padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position));
   background-image: var(--pico-icon-date);
   background-position: center right var(--pico-icon-position);
   background-size: var(--pico-icon-width) auto;
   background-repeat: no-repeat;
+  min-width: 0;
 }
+
 input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
   background-image: var(--pico-icon-time);
 }
 
-[type="date"]::-webkit-calendar-picker-indicator,
-[type="datetime-local"]::-webkit-calendar-picker-indicator,
-[type="month"]::-webkit-calendar-picker-indicator,
-[type="time"]::-webkit-calendar-picker-indicator,
-[type="week"]::-webkit-calendar-picker-indicator {
+[type="date"]::-webkit-calendar-picker-indicator, [type="datetime-local"]::-webkit-calendar-picker-indicator, [type="month"]::-webkit-calendar-picker-indicator, [type="time"]::-webkit-calendar-picker-indicator, [type="week"]::-webkit-calendar-picker-indicator {
   width: var(--pico-icon-width);
   margin-right: calc(var(--pico-icon-width) * -1);
   margin-left: var(--pico-icon-position);
@@ -40,17 +27,13 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 }
 
 @-moz-document url-prefix() {
-  [type="date"],
-  [type="datetime-local"],
-  [type="month"],
-  [type="time"],
-  [type="week"] {
+  [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"] {
     padding-right: var(--pico-form-element-spacing-horizontal) !important;
     background-image: none !important;
   }
 }
-[dir="rtl"]
-  :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
+
+[dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
   text-align: end;
 }
 

package/css/layered/forms/input-file.css

@@ -1,28 +1,27 @@
 @layer blades {
-/**
- * Input type file
- */
 [type="file"] {
   --pico-color: var(--pico-muted-color);
   margin-left: calc(var(--pico-outline-width) * -1);
-  padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
+  padding: calc(var(--pico-form-element-spacing-vertical) * .5) 0;
   padding-left: var(--pico-outline-width);
+  background: none;
   border: 0;
   border-radius: 0;
-  background: none;
 }
+
 [type="file"]::file-selector-button {
   margin-right: calc(var(--pico-spacing) / 2);
-  padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
+  padding: calc(var(--pico-form-element-spacing-vertical) * .5)
     var(--pico-form-element-spacing-horizontal);
 }
+
 [type="file"]:is(:hover, :active, :focus)::file-selector-button {
   --pico-background-color: var(--pico-secondary-hover-background);
   --pico-border-color: var(--pico-secondary-hover-border);
 }
+
 [type="file"]:focus::file-selector-button {
-  --pico-box-shadow:
-    var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
+  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000),
     0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
 }