@fylgja/form-extend/index.css

The Fylgja form-extend component

/**
 * Fylgja (https://fylgja.dev)
 * Licensed under MIT Open Source
 */
.field-error-message {
  --_field-state: initial;
  color: var(--form-error-color);
  visibility: var(--_field-state, hidden);
}

:is(:user-invalid, [aria-invalid=true]) ~ .field-error-message,
.field-error-message:has(~ :user-invalid, [aria-invalid=true]),
.field:has(:user-invalid, [aria-invalid=true]) > .field-error-message {
  --_field-state: /* */;
}

:where(input[type=range]) {
  --range-value: 0;
  --track-dir: to right;
  --track-size: 0.8ex;
  --track-radius: 0.3rem;
  --track-color: color-mix(in srgb, currentcolor 24%, canvas);
  --track-fill: var(--form-active-color, currentcolor);
  --thumb-size-y: 2.5em;
  --thumb-size-x: 1em;
  --thumb-radius: 1em;
  --thumb-stroke: var(--root-bg);
  --thumb-stroke-size: 3px;
  --thumb-color: var(--form-active-color, currentcolor);
  display: block;
  appearance: none;
  min-block-size: var(--thumb-size-y);
  inline-size: 100%;
  margin: 0;
  background: none;
  cursor: grab;
}
:where(input[type=range]):active {
  cursor: grabbing;
}
:where(input[type=range]):dir(rtl) {
  --track-dir: to left;
}
:where(input[type=range])::-webkit-slider-runnable-track {
  --_val: calc(var(--range-value) * 100% / 100);
  block-size: var(--track-size);
  border-radius: var(--track-radius);
  background: var(--track-color) linear-gradient(var(--track-dir), var(--track-fill) var(--_val), var(--track-color) var(--_val));
}
:where(input[type=range])::-moz-range-track {
  block-size: var(--track-size);
  border-radius: var(--track-radius);
  background: var(--track-color);
}
:where(input[type=range])::-webkit-slider-thumb {
  appearance: none;
  block-size: var(--thumb-size-y);
  inline-size: var(--thumb-size-x);
  box-shadow: var(--thumb-shadow);
  border-radius: var(--thumb-radius);
  border: solid var(--thumb-stroke);
  border-width: var(--thumb-stroke-size);
  background-color: var(--thumb-color);
  margin-block-start: var(--thumb-offset, calc(0.5 * (var(--track-size) - var(--thumb-size-y))));
}
:where(input[type=range])::-moz-range-thumb {
  appearance: none;
  block-size: var(--thumb-size-y);
  inline-size: var(--thumb-size-x);
  box-shadow: var(--thumb-shadow);
  border-radius: var(--thumb-radius);
  border: solid var(--thumb-stroke);
  border-width: var(--thumb-stroke-size);
  background-color: var(--thumb-color);
  box-sizing: border-box;
}

.range-vertical {
  --track-dir: to top;
  max-inline-size: 24ex;
  writing-mode: vertical-lr;
  direction: rtl;
  animation-direction: normal;
}

@property --range-value {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
@keyframes range-observer {
  from {
    --range-value: 0;
  }
  to {
    --range-value: 100;
  }
}
:where(input[type=range]) {
  overflow: hidden;
}
@supports (timeline-scope: --foo) {
  :where(input[type=range]) {
    animation: range-observer linear reverse both;
    animation-timeline: --range-thumb;
    timeline-scope: --range-thumb;
  }
}
:where(input[type=range])::-moz-range-progress {
  block-size: var(--track-size);
  border-radius: var(--track-radius);
  background: var(--track-fill);
}
@supports (timeline-scope: --foo) {
  :where(input[type=range])::-webkit-slider-thumb {
    view-timeline: --range-thumb inline;
  }
}

@keyframes progress-loading {
  from {
    background-position: -100% 0;
  }
  to {
    background-position: 200% 0;
  }
}
meter,
progress {
  --track-height: 1ex;
  --track-color: color-mix(in srgb, currentcolor 24%, canvas);
  --track-radius: 0.4em;
  appearance: none;
  block-size: var(--track-height, 1ex);
  inline-size: 100%;
  border-radius: var(--track-radius);
  background: var(--track-color);
  vertical-align: middle;
}
@media (forced-colors: active) {
  meter,
  progress {
    border: 1px solid;
  }
}

meter::-webkit-meter-bar,
progress::-webkit-progress-bar {
  align-self: auto;
  border: transparent;
  background: inherit;
}

progress {
  --_transition: inline-size 0.2s, block-size 0.2s;
  --progress-value-radius: var(--track-radius);
  --track-height: 1.8ex;
  --fill: var(--brand, currentcolor);
}
@media (forced-colors: active) {
  progress {
    --fill: currentcolor;
  }
}
progress::-webkit-progress-value {
  border-radius: var(--progress-value-radius);
  background-color: var(--fill);
  transition: var(--_transition);
  forced-color-adjust: none;
}
progress::-moz-progress-bar {
  border-radius: var(--progress-value-radius);
  background-color: var(--fill);
  transition: var(--_transition);
  forced-color-adjust: none;
}
@media (prefers-reduced-motion: no-preference) {
  progress:indeterminate {
    background: var(--track-color) linear-gradient(var(--fill), var(--fill)) 0 0/50% no-repeat;
    animation: 5s infinite linear progress-loading;
  }
}

meter {
  --success: #107c10;
  --warning: #ffb900;
  --error: #e00;
  overflow: hidden;
}
meter::-webkit-meter-inner-element {
  position: relative;
  display: block;
}
meter::-webkit-meter-optimum-value {
  background: var(--success);
}
meter::-webkit-meter-suboptimum-value {
  background: var(--warning);
}
meter::-webkit-meter-even-less-good-value {
  background: var(--error);
}
meter:-moz-meter-optimum::-moz-meter-bar {
  background: var(--success);
}
meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background: var(--warning);
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: var(--error);
}