@anyblades/blades 3.1.0-beta.7 → 3.1.0

package/css/layered/content/_typography.css

@@ -0,0 +1,137 @@
+b, strong {
+  font-weight: bolder;
+}
+
+sub, sup {
+  vertical-align: baseline;
+  font-size: .75em;
+  line-height: 0;
+  position: relative;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+address, blockquote, dl, ol, p, pre, table, ul {
+  margin-top: 0;
+  margin-bottom: var(--pico-typography-spacing-vertical);
+  color: var(--pico-color);
+  font-style: normal;
+  font-weight: var(--pico-font-weight);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: var(--pico-typography-spacing-vertical);
+  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);
+}
+
+h1 {
+  --pico-color: var(--pico-h1-color);
+}
+
+h2 {
+  --pico-color: var(--pico-h2-color);
+}
+
+h3 {
+  --pico-color: var(--pico-h3-color);
+}
+
+h4 {
+  --pico-color: var(--pico-h4-color);
+}
+
+h5 {
+  --pico-color: var(--pico-h5-color);
+}
+
+h6 {
+  --pico-color: var(--pico-h6-color);
+}
+
+:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--pico-typography-spacing-top);
+}
+
+p, hgroup {
+  margin-bottom: var(--pico-typography-spacing-vertical);
+}
+
+hgroup > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+hgroup > :not(:first-child):last-child {
+  --pico-color: var(--pico-muted-color);
+  --pico-font-weight: unset;
+  font-size: 1rem;
+}
+
+:where(ol, ul) li {
+  margin-bottom: calc(var(--pico-typography-spacing-vertical) * .25);
+}
+
+:where(dl, ol, ul) :where(dl, ol, ul) {
+  margin: 0;
+  margin-top: calc(var(--pico-typography-spacing-vertical) * .25);
+}
+
+ul li {
+  list-style: square;
+}
+
+mark {
+  background-color: var(--pico-mark-background-color);
+  color: var(--pico-mark-color);
+  vertical-align: baseline;
+  padding: .125rem .25rem;
+}
+
+blockquote {
+  margin: var(--pico-typography-spacing-vertical) 0;
+  padding: var(--pico-spacing);
+  border-right: none;
+  border-left: .25rem solid var(--pico-blockquote-border-color);
+  border-inline-start: .25rem solid var(--pico-blockquote-border-color);
+  border-inline-end: none;
+  display: block;
+}
+
+blockquote footer {
+  margin-top: calc(var(--pico-typography-spacing-vertical) * .5);
+  color: var(--pico-blockquote-footer-color);
+}
+
+abbr[title] {
+  cursor: help;
+  border-bottom: 1px dotted;
+  text-decoration: none;
+}
+
+ins {
+  color: var(--pico-ins-color);
+  text-decoration: none;
+}
+
+del {
+  color: var(--pico-del-color);
+}
+
+::-moz-selection {
+  background-color: var(--pico-text-selection-color);
+}
+
+::selection {
+  background-color: var(--pico-text-selection-color);
+}

package/css/layered/forms/_basics.css

@@ -0,0 +1,257 @@
+input, optgroup, select, textarea {
+  font-size: 1rem;
+  line-height: var(--pico-line-height);
+  letter-spacing: inherit;
+  margin: 0;
+  font-family: inherit;
+}
+
+input {
+  overflow: visible;
+}
+
+select {
+  text-transform: none;
+}
+
+legend {
+  max-width: 100%;
+  color: inherit;
+  white-space: normal;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"], [type="radio"] {
+  padding: 0;
+}
+
+::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+:-moz-focusring {
+  outline: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+::-ms-expand {
+  display: none;
+}
+
+[type="file"], [type="range"] {
+  border-width: 0;
+  padding: 0;
+}
+
+input:not([type="checkbox"], [type="radio"], [type="range"]) {
+  height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
+      var(--pico-border-width) * 2);
+}
+
+fieldset {
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  margin-bottom: var(--pico-spacing);
+  border: 0;
+  padding: 0;
+}
+
+label, fieldset legend {
+  margin-bottom: calc(var(--pico-spacing) * .375);
+  color: var(--pico-color);
+  font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
+  display: block;
+}
+
+fieldset legend {
+  margin-bottom: calc(var(--pico-spacing) * .5);
+}
+
+input:not([type="checkbox"], [type="radio"]), button[type="submit"], select, textarea {
+  width: 100%;
+}
+
+input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+}
+
+input, select, textarea {
+  --pico-background-color: var(--pico-form-element-background-color);
+  --pico-border-color: var(--pico-form-element-border-color);
+  --pico-color: var(--pico-form-element-color);
+  --pico-box-shadow: none;
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  transition: background-color var(--pico-transition),
+    border-color var(--pico-transition),
+    color var(--pico-transition),
+    box-shadow var(--pico-transition);
+  outline: none;
+}
+
+input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
+  --pico-background-color: var(--pico-form-element-active-background-color);
+}
+
+input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
+  --pico-border-color: var(--pico-form-element-active-border-color);
+}
+
+input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, :where(select, textarea):not([readonly]):focus {
+  --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
+}
+
+input:not([type="submit"], [type="button"], [type="reset"])[disabled], select[disabled], textarea[disabled], label[aria-disabled="true"], :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
+  opacity: var(--pico-form-element-disabled-opacity);
+  pointer-events: none;
+}
+
+label[aria-disabled="true"] input[disabled] {
+  opacity: 1;
+}
+
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
+  padding-left: var(--pico-form-element-spacing-horizontal);
+  background-position: right .75rem center;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
+  padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
+  padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
+}
+
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
+  background-image: var(--pico-icon-valid);
+}
+
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(select) {
+  background-image: var(--pico-icon-invalid);
+}
+
+:where(input, select, textarea)[aria-invalid="false"] {
+  --pico-border-color: var(--pico-form-element-valid-border-color);
+}
+
+:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
+  --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
+}
+
+:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
+  --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
+}
+
+:where(input, select, textarea)[aria-invalid="true"] {
+  --pico-border-color: var(--pico-form-element-invalid-border-color);
+}
+
+:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
+  --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
+}
+
+:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
+  --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
+}
+
+[dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
+  background-position: .75rem;
+}
+
+input::placeholder, input::-webkit-input-placeholder, textarea::placeholder, textarea::-webkit-input-placeholder, select:invalid {
+  color: var(--pico-form-element-placeholder-color);
+  opacity: 1;
+}
+
+input:not([type="checkbox"], [type="radio"]), select, textarea {
+  margin-bottom: var(--pico-spacing);
+}
+
+select::-ms-expand {
+  background-color: #0000;
+  border: 0;
+}
+
+select:not([multiple], [size]) {
+  padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
+  padding-left: var(--pico-form-element-spacing-horizontal);
+  background-image: var(--pico-icon-chevron);
+  background-position: right .75rem center;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  padding-inline-start: var(--pico-form-element-spacing-horizontal);
+  padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
+}
+
+select[multiple] option:checked {
+  background: var(--pico-form-element-selected-background-color);
+  color: var(--pico-form-element-color);
+}
+
+[dir="rtl"] select:not([multiple], [size]) {
+  background-position: .75rem;
+}
+
+textarea {
+  resize: vertical;
+  display: block;
+}
+
+textarea[aria-invalid] {
+  --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
+      var(--pico-border-width) * 2);
+  background-position: right .75rem top !important;
+  background-size: 1rem var(--pico-icon-height) !important;
+}
+
+:where(input, select, textarea, fieldset, .grid) + small {
+  width: 100%;
+  margin-top: calc(var(--pico-spacing) * -.75);
+  margin-bottom: var(--pico-spacing);
+  color: var(--pico-muted-color);
+  display: block;
+}
+
+:where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] + small {
+  color: var(--pico-ins-color);
+}
+
+:where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small {
+  color: var(--pico-del-color);
+}
+
+label > :where(input, select, textarea) {
+  margin-top: calc(var(--pico-spacing) * .25);
+}

package/css/layered/forms/_checkbox-radio-switch.css

@@ -0,0 +1,132 @@
+: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 #0000;
+}
+
+label:has([type="checkbox"], [type="radio"]) {
+  cursor: pointer;
+  width: fit-content;
+}
+
+[type="checkbox"], [type="radio"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin-top: -.125em;
+  border-width: var(--pico-border-width);
+  vertical-align: middle;
+  cursor: pointer;
+  width: 1.25em;
+  height: 1.25em;
+  margin-inline-end: .5em;
+}
+
+[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-repeat: no-repeat;
+  background-size: .75em;
+}
+
+[type="checkbox"] ~ label, [type="radio"] ~ label {
+  cursor: pointer;
+  margin-bottom: 0;
+  display: inline-block;
+}
+
+[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-repeat: no-repeat;
+  background-size: .75em;
+}
+
+[type="radio"] {
+  border-radius: 50%;
+}
+
+[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
+  --pico-background-color: var(--pico-primary-inverse);
+  background-image: none;
+  border-width: .35em;
+}
+
+[type="checkbox"][role="switch"] {
+  --pico-background-color: var(--pico-switch-background-color);
+  --pico-color: var(--pico-switch-color);
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  background-color: var(--pico-background-color);
+  border-radius: 1.25em;
+  width: 2.25em;
+  height: 1.25em;
+  line-height: 1.25em;
+}
+
+[type="checkbox"][role="switch"]:not([aria-invalid]) {
+  --pico-border-color: var(--pico-switch-background-color);
+}
+
+[type="checkbox"][role="switch"]:before {
+  aspect-ratio: 1;
+  background-color: var(--pico-color);
+  height: 100%;
+  box-shadow: var(--pico-switch-thumb-box-shadow);
+  content: "";
+  border-radius: 50%;
+  transition: margin .1s ease-in-out;
+  display: block;
+}
+
+[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: 1em;
+}
+
+[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);
+}