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

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

@@ -0,0 +1,57 @@
+@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;
+    }
+  }
+}
+
+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;
+    }
+  }
+}
+
+}

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);
 }
 

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

@@ -1,9 +1,5 @@
 @layer blades {
-/**
- * Input type range
- */
-:where(:scope, [data-theme="light"], [data-theme="dark"]),
-:host {
+:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
   --pico-range-border-color: light-dark(#dfe3eb, #202632);
   --pico-range-active-border-color: light-dark(#bfc7d9, #2a3140);
   --pico-range-thumb-border-color: var(--pico-background-color);
@@ -15,105 +11,102 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  background: none;
   width: 100%;
   height: 1.25rem;
-  background: none;
 }
+
 [type="range"]::-webkit-slider-runnable-track {
-  width: 100%;
-  height: 0.375rem;
   border-radius: var(--pico-border-radius);
   background-color: var(--pico-range-border-color);
-  -webkit-transition:
-    background-color var(--pico-transition),
+  width: 100%;
+  height: .375rem;
+  -webkit-transition: background-color var(--pico-transition),
     box-shadow var(--pico-transition);
-  transition:
-    background-color var(--pico-transition),
+  transition: background-color var(--pico-transition),
     box-shadow var(--pico-transition);
 }
+
 [type="range"]::-moz-range-track {
-  width: 100%;
-  height: 0.375rem;
   border-radius: var(--pico-border-radius);
   background-color: var(--pico-range-border-color);
-  -moz-transition:
-    background-color var(--pico-transition),
+  width: 100%;
+  height: .375rem;
+  -moz-transition: background-color var(--pico-transition),
     box-shadow var(--pico-transition);
-  transition:
-    background-color var(--pico-transition),
+  transition: background-color var(--pico-transition),
     box-shadow var(--pico-transition);
 }
+
 [type="range"]::-ms-track {
-  width: 100%;
-  height: 0.375rem;
   border-radius: var(--pico-border-radius);
   background-color: var(--pico-range-border-color);
-  -ms-transition:
-    background-color var(--pico-transition),
+  width: 100%;
+  height: .375rem;
+  -ms-transition: background-color var(--pico-transition),
     box-shadow var(--pico-transition);
-  transition:
-    background-color var(--pico-transition),
+  transition: background-color var(--pico-transition),
     box-shadow var(--pico-transition);
 }
+
 [type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-top: -0.4375rem;
   border: 2px solid var(--pico-range-thumb-border-color);
-  border-radius: 50%;
   background-color: var(--pico-range-thumb-color);
   cursor: pointer;
-  -webkit-transition:
-    background-color var(--pico-transition),
+  width: 1.25rem;
+  height: 1.25rem;
+  -webkit-transition: background-color var(--pico-transition),
     transform var(--pico-transition);
-  transition:
-    background-color var(--pico-transition),
+  transition: background-color var(--pico-transition),
     transform var(--pico-transition);
+  border-radius: 50%;
+  margin-top: -.4375rem;
 }
+
 [type="range"]::-moz-range-thumb {
   -webkit-appearance: none;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-top: -0.4375rem;
   border: 2px solid var(--pico-range-thumb-border-color);
-  border-radius: 50%;
   background-color: var(--pico-range-thumb-color);
   cursor: pointer;
-  -moz-transition:
-    background-color var(--pico-transition),
+  width: 1.25rem;
+  height: 1.25rem;
+  -moz-transition: background-color var(--pico-transition),
     transform var(--pico-transition);
-  transition:
-    background-color var(--pico-transition),
+  transition: background-color var(--pico-transition),
     transform var(--pico-transition);
+  border-radius: 50%;
+  margin-top: -.4375rem;
 }
+
 [type="range"]::-ms-thumb {
   -webkit-appearance: none;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-top: -0.4375rem;
   border: 2px solid var(--pico-range-thumb-border-color);
-  border-radius: 50%;
   background-color: var(--pico-range-thumb-color);
   cursor: pointer;
-  -ms-transition:
-    background-color var(--pico-transition),
+  width: 1.25rem;
+  height: 1.25rem;
+  -ms-transition: background-color var(--pico-transition),
     transform var(--pico-transition);
-  transition:
-    background-color var(--pico-transition),
+  transition: background-color var(--pico-transition),
     transform var(--pico-transition);
+  border-radius: 50%;
+  margin-top: -.4375rem;
 }
-[type="range"]:active,
-[type="range"]:focus-within {
+
+[type="range"]:active, [type="range"]:focus-within {
   --pico-range-border-color: var(--pico-range-active-border-color);
   --pico-range-thumb-color: var(--pico-range-thumb-active-color);
 }
+
 [type="range"]:active::-webkit-slider-thumb {
   transform: scale(1.25);
 }
+
 [type="range"]:active::-moz-range-thumb {
   transform: scale(1.25);
 }
+
 [type="range"]:active::-ms-thumb {
   transform: scale(1.25);
 }

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

@@ -1,66 +1,35 @@
 @layer blades {
-/**
- * Input type search
- */
-:where(:scope),
-:host {
+:where(:scope), :host {
   --pico-icon-search: 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='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
 }
 
 input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
-  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
   background-image: var(--pico-icon-search);
-  background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
-  background-size: 1rem auto;
+  background-position: center left calc(var(--pico-form-element-spacing-horizontal) + .125rem);
   background-repeat: no-repeat;
+  background-size: 1rem;
+  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
 }
-input:not(
-    [type="checkbox"],
-    [type="radio"],
-    [type="range"],
-    [type="file"]
-  )[type="search"][aria-invalid] {
+
+input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
+  background-position: 1.125rem, right .75rem center;
   padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
-  background-position:
-    center left 1.125rem,
-    center right 0.75rem;
 }
-input:not(
-    [type="checkbox"],
-    [type="radio"],
-    [type="range"],
-    [type="file"]
-  )[type="search"][aria-invalid="false"] {
+
+input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
   background-image: var(--pico-icon-search), var(--pico-icon-valid);
 }
-input:not(
-    [type="checkbox"],
-    [type="radio"],
-    [type="range"],
-    [type="file"]
-  )[type="search"][aria-invalid="true"] {
+
+input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
   background-image: var(--pico-icon-search), var(--pico-icon-invalid);
 }
 
-[dir="rtl"]
-  :where(input):not(
-    [type="checkbox"],
-    [type="radio"],
-    [type="range"],
-    [type="file"]
-  )[type="search"] {
-  background-position: center right 1.125rem;
+[dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
+  background-position: right 1.125rem center;
 }
-[dir="rtl"]
-  :where(input):not(
-    [type="checkbox"],
-    [type="radio"],
-    [type="range"],
-    [type="file"]
-  )[type="search"][aria-invalid] {
-  background-position:
-    center right 1.125rem,
-    center left 0.75rem;
+
+[dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
+  background-position: right 1.125rem center, .75rem;
 }
 
 }