@anyblades/blades 3.0.0 → 3.1.0-alpha.2

package/src/pico/forms/_checkbox-radio-switch.css

@@ -0,0 +1,161 @@
+/**
+ * Checkboxes, Radios and Switches
+ */
+: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 {
+  --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);
+}
+
+label:has([type="checkbox"], [type="radio"]) {
+  width: -moz-fit-content;
+  width: fit-content;
+  cursor: pointer;
+}
+
+[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;
+  border-width: var(--pico-border-width);
+  vertical-align: middle;
+  cursor: pointer;
+}
+[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 {
+  --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;
+}
+[type="checkbox"] ~ label,
+[type="radio"] ~ label {
+  display: inline-block;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+[type="checkbox"] ~ label:not(:last-of-type),
+[type="radio"] ~ label:not(:last-of-type) {
+  margin-inline-end: 1em;
+}
+
+[type="checkbox"]:indeterminate {
+  --pico-background-color: var(--pico-primary-background);
+  --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;
+}
+
+[type="radio"] {
+  border-radius: 50%;
+}
+[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;
+}
+
+[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);
+  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);
+  box-shadow: var(--pico-switch-thumb-box-shadow);
+  content: "";
+  transition: margin 0.1s ease-in-out;
+}
+[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"][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 {
+  --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"] {
+  --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 {
+  --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"] {
+  --pico-border-color: var(--pico-form-element-invalid-border-color);
+}

package/src/pico/forms/_index.css

@@ -0,0 +1,7 @@
+@import "./_basics";
+@import "./_checkbox-radio-switch";
+@import "./_input-color";
+@import "./_input-datetime";
+@import "./_input-file";
+@import "./_input-range";
+@import "./_input-search";

package/src/pico/forms/_input-color.css

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

package/src/pico/forms/_input-datetime.css

@@ -0,0 +1,54 @@
+/**
+ * Input type datetime
+ */
+: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;
+  --pico-icon-width: 1rem;
+  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 {
+  width: var(--pico-icon-width);
+  margin-right: calc(var(--pico-icon-width) * -1);
+  margin-left: var(--pico-icon-position);
+  opacity: 0;
+}
+
+@-moz-document url-prefix() {
+  [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"]) {
+  text-align: end;
+}

package/src/pico/forms/_input-file.css

@@ -0,0 +1,26 @@
+/**
+ * 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-left: var(--pico-outline-width);
+  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)
+    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)),
+    0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
+}

package/src/pico/forms/_input-range.css

@@ -0,0 +1,118 @@
+/**
+ * Input type range
+ */
+: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;
+  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),
+    box-shadow 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),
+    box-shadow 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),
+    box-shadow 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),
+    transform var(--pico-transition);
+  transition:
+    background-color var(--pico-transition),
+    transform var(--pico-transition);
+}
+[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),
+    transform var(--pico-transition);
+  transition:
+    background-color var(--pico-transition),
+    transform var(--pico-transition);
+}
+[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),
+    transform var(--pico-transition);
+  transition:
+    background-color var(--pico-transition),
+    transform var(--pico-transition);
+}
+[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/src/pico/forms/_input-search.css

@@ -0,0 +1,63 @@
+/**
+ * Input type search
+ */
+: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-repeat: no-repeat;
+}
+input:not(
+    [type="checkbox"],
+    [type="radio"],
+    [type="range"],
+    [type="file"]
+  )[type="search"][aria-invalid] {
+  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"] {
+  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: center right 1.125rem;
+}
+[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;
+}

package/src/pico/layout/_container.css

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

package/src/pico/layout/_document.css

@@ -0,0 +1,36 @@
+/**
+ * Document
+ * Content-box & Responsive typography
+ */
+*,
+*::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;
+}

package/src/pico/layout/_grid.css

@@ -0,0 +1,19 @@
+/**
+ * Grid
+ * Minimal grid system with auto-layout columns
+ */
+.grid {
+  grid-column-gap: var(--pico-grid-column-gap);
+  grid-row-gap: var(--pico-grid-row-gap);
+  display: grid;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+  }
+}
+.grid > *:not(.does-not-exist) {
+  min-width: 0;
+  margin-bottom: 0; /* https://github.com/picocss/pico/issues/738 */
+}

package/src/pico/layout/_index.css

@@ -0,0 +1,6 @@
+@import "./_document";
+@import "./_landmarks";
+@import "./_section";
+@import "./_container";
+@import "./_grid";
+@import "./_overflow-auto";

package/src/pico/layout/_landmarks.css

@@ -0,0 +1,17 @@
+/**
+ * Landmarks
+ */
+body {
+  width: 100%;
+  margin: 0;
+}
+
+main {
+  display: block;
+}
+
+body > header,
+body > main,
+body > footer {
+  padding-block: var(--pico-block-spacing-vertical);
+}

package/src/pico/layout/_overflow-auto.css

@@ -0,0 +1,6 @@
+/**
+ * Overflow auto
+ */
+.overflow-auto {
+  overflow: auto;
+}

package/src/pico/layout/_section.css

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

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,25 +0,0 @@
----
-name: Bug report
-about: Create a bug report if you've already asked for help with a problem and confirmed something is broken with Blades CSS.
----
-
-Please search for duplicate or closed issues first.
-
-## Describe the issue
-
-### Current Behavior
-
-A concise description of the bug.
-
-### Expected Behavior
-
-A concise description of what you expected.
-
-### Reproduction URL
-
-We recommend including a link to a minimal reproduction of the bug using CodePen or a similar tool.
-**Please do not link to your actual project.** Instead, we need a reduced test case in a new project without any unnecessary code.
-
-### Environment
-
-Example: OS, versions, browser details.

package/.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Get Help
-    url: https://github.com/orgs/anyblades/discussions/categories/help
-    about: If you can't get something to work the way you expect, open a question in our discussion forums.
-  - name: Feature Request
-    url: https://github.com/orgs/anyblades/discussions/categories/ideas
-    about: Suggest any ideas you have using our discussion forums.