@anyblades/blades 3.1.0-beta.7 → 3.1.0

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

@@ -0,0 +1,25 @@
+[type="file"] {
+  --pico-color: var(--pico-muted-color);
+  margin-left: calc(var(--pico-outline-width) * -1);
+  padding: calc(var(--pico-form-element-spacing-vertical) * .5) 0;
+  padding-left: var(--pico-outline-width);
+  background: none;
+  border: 0;
+  border-radius: 0;
+}
+
+[type="file"]::file-selector-button {
+  margin-right: calc(var(--pico-spacing) / 2);
+  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 #0000),
+    0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
+}

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

@@ -0,0 +1,111 @@
+: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);
+  --pico-range-thumb-color: var(--pico-secondary-background);
+  --pico-range-thumb-active-color: var(--pico-primary-background);
+}
+
+[type="range"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: none;
+  width: 100%;
+  height: 1.25rem;
+}
+
+[type="range"]::-webkit-slider-runnable-track {
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-range-border-color);
+  width: 100%;
+  height: .375rem;
+  -webkit-transition: background-color var(--pico-transition),
+    box-shadow var(--pico-transition);
+  transition: background-color var(--pico-transition),
+    box-shadow var(--pico-transition);
+}
+
+[type="range"]::-moz-range-track {
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-range-border-color);
+  width: 100%;
+  height: .375rem;
+  -moz-transition: background-color var(--pico-transition),
+    box-shadow var(--pico-transition);
+  transition: background-color var(--pico-transition),
+    box-shadow var(--pico-transition);
+}
+
+[type="range"]::-ms-track {
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-range-border-color);
+  width: 100%;
+  height: .375rem;
+  -ms-transition: background-color var(--pico-transition),
+    box-shadow var(--pico-transition);
+  transition: background-color var(--pico-transition),
+    box-shadow var(--pico-transition);
+}
+
+[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: 2px solid var(--pico-range-thumb-border-color);
+  background-color: var(--pico-range-thumb-color);
+  cursor: pointer;
+  width: 1.25rem;
+  height: 1.25rem;
+  -webkit-transition: background-color var(--pico-transition),
+    transform 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;
+  border: 2px solid var(--pico-range-thumb-border-color);
+  background-color: var(--pico-range-thumb-color);
+  cursor: pointer;
+  width: 1.25rem;
+  height: 1.25rem;
+  -moz-transition: background-color var(--pico-transition),
+    transform 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;
+  border: 2px solid var(--pico-range-thumb-border-color);
+  background-color: var(--pico-range-thumb-color);
+  cursor: pointer;
+  width: 1.25rem;
+  height: 1.25rem;
+  -ms-transition: background-color var(--pico-transition),
+    transform 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 {
+  --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

@@ -0,0 +1,32 @@
+: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"] {
+  background-image: var(--pico-icon-search);
+  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] {
+  background-position: 1.125rem, right .75rem center;
+  padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
+}
+
+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"] {
+  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: right 1.125rem center;
+}
+
+[dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
+  background-position: right 1.125rem center, .75rem;
+}

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

@@ -0,0 +1,28 @@
+/*!
+ * Float Label CSS v2 by Blades CSS 🥷🏷️
+ * Copyright 2016–2026 (https://blades.dev/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/_index.css

@@ -0,0 +1,54 @@
+/*!
+ * Float Label CSS v2 by Blades CSS 🥷🏷️
+ * Copyright 2016–2026 (https://blades.dev/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/float-label/_theme.css

@@ -0,0 +1,25 @@
+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/float-label/core.css

@@ -1,7 +1,7 @@
 @layer blades {
 /*!
  * Float Label CSS v2 by Blades CSS 🥷🏷️
- * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Copyright 2016–2026 (https://blades.dev/css/float-label/)
  * Licensed under MIT
  */
 label:has( > span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select), .has-float-label {

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

@@ -1,7 +1,7 @@
 @layer blades {
 /*!
  * Float Label CSS v2 by Blades CSS 🥷🏷️
- * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Copyright 2016–2026 (https://blades.dev/css/float-label/)
  * Licensed under MIT
  */
 label:has( > span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select), .has-float-label {

package/css/layered/layout/_columns.css

@@ -0,0 +1,7 @@
+.columns {
+  columns: 25ch auto;
+
+  & > * {
+    break-inside: avoid;
+  }
+}

package/css/layered/layout/_container.css

@@ -0,0 +1,39 @@
+.container, .container-fluid {
+  width: 100%;
+  padding-right: var(--pico-spacing);
+  padding-left: var(--pico-spacing);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (width >= 576px) {
+  .container {
+    max-width: 510px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+@media (width >= 768px) {
+  .container {
+    max-width: 700px;
+  }
+}
+
+@media (width >= 1024px) {
+  .container {
+    max-width: 950px;
+  }
+}
+
+@media (width >= 1280px) {
+  .container {
+    max-width: 1200px;
+  }
+}
+
+@media (width >= 1536px) {
+  .container {
+    max-width: 1450px;
+  }
+}

package/css/layered/layout/_document.css

@@ -0,0 +1,37 @@
+*, :before, :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:before, :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:where(:scope), :where(:host) {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  background-color: var(--pico-background-color);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  font-family: var(--pico-font-family);
+  text-underline-offset: var(--pico-text-underline-offset);
+  text-rendering: optimizelegibility;
+  overflow-wrap: break-word;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  width: 100%;
+  margin: 0;
+}
+
+main {
+  display: block;
+}

package/css/layered/layout/_grid.css

@@ -0,0 +1,17 @@
+.grid {
+  grid-column-gap: var(--pico-grid-column-gap);
+  grid-row-gap: var(--pico-grid-row-gap);
+  grid-template-columns: 1fr;
+  display: grid;
+}
+
+@media (width >= 768px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+  }
+}
+
+.grid > :not(.does-not-exist) {
+  min-width: 0;
+  margin-bottom: 0;
+}

package/css/layered/layout/_index.css

@@ -0,0 +1,103 @@
+*, :before, :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:before, :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:where(:scope), :where(:host) {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  background-color: var(--pico-background-color);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  font-size: var(--pico-font-size);
+  line-height: var(--pico-line-height);
+  font-family: var(--pico-font-family);
+  text-underline-offset: var(--pico-text-underline-offset);
+  text-rendering: optimizelegibility;
+  overflow-wrap: break-word;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  width: 100%;
+  margin: 0;
+}
+
+main {
+  display: block;
+}
+
+section {
+  margin-bottom: var(--pico-block-spacing-vertical);
+}
+
+.container, .container-fluid {
+  width: 100%;
+  padding-right: var(--pico-spacing);
+  padding-left: var(--pico-spacing);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (width >= 576px) {
+  .container {
+    max-width: 510px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+@media (width >= 768px) {
+  .container {
+    max-width: 700px;
+  }
+}
+
+@media (width >= 1024px) {
+  .container {
+    max-width: 950px;
+  }
+}
+
+@media (width >= 1280px) {
+  .container {
+    max-width: 1200px;
+  }
+}
+
+@media (width >= 1536px) {
+  .container {
+    max-width: 1450px;
+  }
+}
+
+.grid {
+  grid-column-gap: var(--pico-grid-column-gap);
+  grid-row-gap: var(--pico-grid-row-gap);
+  grid-template-columns: 1fr;
+  display: grid;
+}
+
+@media (width >= 768px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+  }
+}
+
+.grid > :not(.does-not-exist) {
+  min-width: 0;
+  margin-bottom: 0;
+}
+
+.overflow-auto {
+  overflow: auto;
+}

package/css/layered/layout/_landmarks.css

@@ -0,0 +1,3 @@
+body > header, body > main, body > footer {
+  padding-block: var(--pico-block-spacing-vertical);
+}

package/css/layered/layout/_overflow-auto.css

@@ -0,0 +1,3 @@
+.overflow-auto {
+  overflow: auto;
+}

package/css/layered/layout/_section.css

@@ -0,0 +1,3 @@
+section {
+  margin-bottom: var(--pico-block-spacing-vertical);
+}