farvist 0.5.0

package/scss/components/_forms.scss

@@ -0,0 +1,125 @@
+// =============================================================================
+// Farvist · Components · Forms
+// Glass inputs with a neon focus ring. Validation + input-group helpers too.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.form-label {
+  display: inline-block;
+  margin-bottom: spacer(2);
+  font-weight: map.get($font-weights, 'medium');
+}
+
+.form-control,
+.form-select {
+  display: block;
+  width: 100%;
+  padding: spacer(2) spacer(3);
+  font-size: map.get($font-sizes, 'base');
+  line-height: $line-height-base;
+  color: var(--fv-body-color);
+  background-color: var(--fv-glass-bg);
+  backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--fv-glass-blur)) saturate(var(--fv-glass-saturate));
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: var(--fv-border-radius);
+  transition: border-color $transition-base, box-shadow $transition-base;
+
+  &::placeholder {
+    color: var(--fv-muted);
+    opacity: 0.8;
+  }
+
+  &:focus {
+    outline: 0;
+    border-color: var(--fv-primary);
+    box-shadow: var(--fv-focus-ring);
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.form-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2395a3c4' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 1rem;
+  padding-right: spacer(7);
+}
+
+textarea.form-control {
+  min-height: 6rem;
+  resize: vertical;
+}
+
+.form-text {
+  margin-top: spacer(1);
+  font-size: map.get($font-sizes, 'sm');
+  color: var(--fv-muted);
+}
+
+.form-check {
+  display: flex;
+  align-items: center;
+  gap: spacer(2);
+  margin-bottom: spacer(2);
+}
+
+.form-check-input {
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--fv-primary);
+  cursor: pointer;
+}
+
+.form-check-label {
+  cursor: pointer;
+}
+
+// Stitch controls together horizontally.
+.input-group {
+  display: flex;
+  align-items: stretch;
+
+  .form-control {
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+  }
+}
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: spacer(2) spacer(3);
+  color: var(--fv-muted);
+  background-color: var(--fv-glass-bg-strong);
+  border: $border-width solid var(--fv-glass-border);
+}
+
+// Validation states.
+.is-valid {
+  border-color: var(--fv-success) !important;
+}
+
+.is-invalid {
+  border-color: var(--fv-danger) !important;
+}
+
+.valid-feedback {
+  margin-top: spacer(1);
+  font-size: map.get($font-sizes, 'sm');
+  color: var(--fv-success);
+}
+
+.invalid-feedback {
+  margin-top: spacer(1);
+  font-size: map.get($font-sizes, 'sm');
+  color: var(--fv-danger);
+}

package/scss/components/_icon.scss

@@ -0,0 +1,25 @@
+// =============================================================================
+// Farvist · Components · Icon
+// Sizing/coloring for inline SVG icons. The icons inherit `currentColor`, so
+// they pick up text color, gradients (via .text-gradient on a parent) and glow.
+//   <svg class="icon"><use href="assets/icons/farvist-icons.svg#i-bell"/></svg>
+// =============================================================================
+
+@use '../abstracts' as *;
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.icon-sm { width: 0.85em; height: 0.85em; }
+.icon-lg { width: 1.5em;  height: 1.5em; }
+.icon-xl { width: 2em;    height: 2em; }

package/scss/components/_list-group.scss

@@ -0,0 +1,60 @@
+// =============================================================================
+// Farvist · Components · List group
+// <div class="list-group">
+//   <a class="list-group-item is-active" href="#">Inbox</a>
+//   <a class="list-group-item" href="#">Drafts</a>
+//   <div class="list-group-item">Plain row</div>
+// </div>
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.list-group {
+  display: flex;
+  flex-direction: column;
+  border-radius: map.get($radii, 'lg');
+  overflow: hidden;
+  @include glass;
+}
+
+.list-group-item {
+  display: flex;
+  align-items: center;
+  gap: spacer(3);
+  padding: spacer(3) spacer(4);
+  color: var(--fv-body-color);
+  background-color: transparent;
+  border: 0;
+  border-bottom: $border-width solid var(--fv-glass-border);
+  text-align: left;
+}
+
+.list-group-item:last-child {
+  border-bottom: 0;
+}
+
+// Interactive variants (anchors / buttons).
+a.list-group-item,
+button.list-group-item {
+  width: 100%;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color $transition-base;
+}
+
+a.list-group-item:hover,
+button.list-group-item:hover {
+  background-color: var(--fv-glass-bg);
+}
+
+a.list-group-item:focus-visible,
+button.list-group-item:focus-visible {
+  outline: 0;
+  box-shadow: var(--fv-focus-ring);
+}
+
+.list-group-item.is-active {
+  color: var(--fv-body-color);
+  background-color: var(--fv-glass-bg-strong);
+}

package/scss/components/_modal.scss

@@ -0,0 +1,95 @@
+// =============================================================================
+// Farvist · Components · Modal (native <dialog>)
+// Markup:
+//   <button data-fv-open="#demo">Open</button>
+//   <dialog class="modal" id="demo">
+//     <div class="modal-header">
+//       <h3 class="modal-title">Title</h3>
+//       <button class="modal-close" data-fv-dismiss aria-label="Close">×</button>
+//     </div>
+//     <div class="modal-body">…</div>
+//     <div class="modal-footer">…</div>
+//   </dialog>
+// farvist.js wires data-fv-open / data-fv-dismiss + backdrop-click close.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.modal {
+  width: calc(100% - #{spacer(5)});
+  max-width: 32rem;
+  padding: 0;
+  color: var(--fv-body-color);
+  border-radius: map.get($radii, 'xl');
+  @include glass($strong: true);
+  box-shadow: var(--fv-shadow-xl);
+
+  &::backdrop {
+    background-color: rgba(6, 9, 18, 0.6);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+  }
+
+  &[open] {
+    animation: fv-modal-in 0.2s ease;
+  }
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: spacer(3);
+  padding: spacer(4) spacer(5);
+  border-bottom: $border-width solid var(--fv-glass-border);
+}
+
+.modal-title {
+  margin: 0;
+  font-size: map.get($font-sizes, 'xl');
+  font-weight: map.get($font-weights, 'bold');
+}
+
+.modal-body {
+  padding: spacer(5);
+}
+
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: spacer(2);
+  padding: spacer(4) spacer(5);
+  border-top: $border-width solid var(--fv-glass-border);
+}
+
+.modal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: var(--fv-muted);
+  background: transparent;
+  border: 0;
+  border-radius: map.get($radii, 'md');
+  cursor: pointer;
+  transition: color $transition-base, background-color $transition-base;
+
+  &:hover {
+    color: var(--fv-body-color);
+    background-color: var(--fv-glass-bg);
+  }
+}
+
+@keyframes fv-modal-in {
+  from { opacity: 0; transform: translateY(1rem) scale(0.98); }
+  to   { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal[open] { animation: none; }
+}

package/scss/components/_navbar.scss

@@ -0,0 +1,67 @@
+// =============================================================================
+// Farvist · Components · Navbar
+// A frosted-glass navigation bar. Sticky + backdrop blur reads beautifully over
+// scrolling content.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.navbar {
+  display: flex;
+  align-items: center;
+  gap: spacer(4);
+  padding: spacer(3) spacer(5);
+  @include glass($strong: true);
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+  box-shadow: var(--fv-shadow-md);
+}
+
+.navbar-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: spacer(2);
+  font-size: map.get($font-sizes, 'xl');
+  font-weight: map.get($font-weights, 'bold');
+  letter-spacing: -0.02em;
+  color: var(--fv-body-color);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.navbar-nav {
+  display: flex;
+  align-items: center;
+  gap: spacer(1);
+  margin-left: auto;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: spacer(2) spacer(3);
+  color: var(--fv-muted);
+  border-radius: map.get($radii, 'md');
+  text-decoration: none;
+  transition: color $transition-base, background-color $transition-base;
+
+  &:hover {
+    color: var(--fv-body-color);
+    background-color: var(--fv-glass-bg);
+    text-decoration: none;
+  }
+
+  &.active {
+    color: var(--fv-body-color);
+    font-weight: map.get($font-weights, 'semibold');
+    background-color: var(--fv-glass-bg);
+  }
+}

package/scss/components/_pagination.scss

@@ -0,0 +1,51 @@
+// =============================================================================
+// Farvist · Components · Pagination
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.pagination {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: spacer(1);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.page-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.4rem;
+  height: 2.4rem;
+  padding: 0 spacer(2);
+  color: var(--fv-body-color);
+  text-decoration: none;
+  background-color: var(--fv-glass-bg);
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: map.get($radii, 'md');
+  transition: background-color $transition-base, border-color $transition-base;
+
+  &:hover {
+    background-color: var(--fv-glass-bg-strong);
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: 0;
+    box-shadow: var(--fv-focus-ring);
+  }
+}
+
+.page-item.active .page-link {
+  color: #ffffff;
+  background-image: var(--fv-gradient-primary);
+  border-color: transparent;
+}
+
+.page-item.disabled .page-link {
+  opacity: 0.45;
+  pointer-events: none;
+}

package/scss/components/_progress.scss

@@ -0,0 +1,60 @@
+// =============================================================================
+// Farvist · Components · Progress
+// Glass track with a gradient fill. Striped/animated + per-color variants.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.progress {
+  position: relative;
+  display: flex;
+  height: 0.625rem;
+  overflow: hidden;
+  background-color: var(--fv-glass-bg);
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: map.get($radii, 'pill');
+}
+
+.progress-bar {
+  width: 0;
+  height: 100%;
+  background-image: var(--fv-gradient-primary);
+  border-radius: inherit;
+  transition: width 0.4s ease;
+}
+
+.progress-lg { height: 1rem; }
+.progress-sm { height: 0.35rem; }
+
+// Solid color variants override the gradient fill.
+@each $name, $clr in $theme-colors {
+  .progress-#{$name} .progress-bar {
+    background-image: none;
+    background-color: $clr;
+  }
+}
+
+// Diagonal stripes (optionally animated).
+.progress-striped .progress-bar {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.18) 25%, transparent 25%,
+    transparent 50%, rgba(255, 255, 255, 0.18) 50%,
+    rgba(255, 255, 255, 0.18) 75%, transparent 75%, transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+.progress-animated .progress-bar {
+  animation: fv-progress-stripes 1s linear infinite;
+}
+
+@keyframes fv-progress-stripes {
+  from { background-position: 1rem 0; }
+  to   { background-position: 0 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-animated .progress-bar { animation: none; }
+}

package/scss/components/_range.scss

@@ -0,0 +1,58 @@
+// =============================================================================
+// Farvist · Components · Range input
+// <input type="range" class="form-range" min="0" max="100" value="60" />
+// (Vendor pseudo-elements MUST be in separate rules — a browser drops the whole
+//  selector list if it sees one it doesn't recognise.)
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.form-range {
+  width: 100%;
+  height: 1.5rem;
+  padding: 0;
+  background: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+.form-range:focus { outline: 0; }
+
+// Track
+.form-range::-webkit-slider-runnable-track {
+  height: 0.4rem;
+  background-color: var(--fv-glass-bg-strong);
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: map.get($radii, 'pill');
+}
+.form-range::-moz-range-track {
+  height: 0.4rem;
+  background-color: var(--fv-glass-bg-strong);
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: map.get($radii, 'pill');
+}
+
+// Thumb
+.form-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 1.1rem;
+  height: 1.1rem;
+  margin-top: -0.42rem;
+  background-image: var(--fv-gradient-primary);
+  border: 0;
+  border-radius: 50%;
+  box-shadow: var(--fv-shadow-sm);
+}
+.form-range::-moz-range-thumb {
+  width: 1.1rem;
+  height: 1.1rem;
+  background-image: var(--fv-gradient-primary);
+  border: 0;
+  border-radius: 50%;
+  box-shadow: var(--fv-shadow-sm);
+}
+
+.form-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--fv-focus-ring); }
+.form-range:focus-visible::-moz-range-thumb { box-shadow: var(--fv-focus-ring); }

package/scss/components/_rating.scss

@@ -0,0 +1,26 @@
+// =============================================================================
+// Farvist · Components · Rating
+// <span class="rating" role="img" aria-label="Rated 4 out of 5">
+//   <svg class="icon"><use href="...#i-star"/></svg> x4
+//   <svg class="icon rating-empty"><use href="...#i-star"/></svg>
+// </span>
+// =============================================================================
+
+@use '../abstracts' as *;
+
+.rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.1rem;
+  color: var(--fv-warning);
+}
+
+.rating .icon {
+  width: 1.1em;
+  height: 1.1em;
+  fill: currentColor;
+}
+
+.rating-empty {
+  color: var(--fv-glass-border);
+}

package/scss/components/_segmented.scss

@@ -0,0 +1,51 @@
+// =============================================================================
+// Farvist · Components · Segmented control (radio-based, no JS)
+// <div class="segmented">
+//   <input type="radio" name="range" id="seg-d" checked><label for="seg-d">Day</label>
+//   <input type="radio" name="range" id="seg-w"><label for="seg-w">Week</label>
+// </div>
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.segmented {
+  display: inline-flex;
+  gap: 0.2rem;
+  padding: 0.25rem;
+  background-color: var(--fv-glass-bg);
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: map.get($radii, 'lg');
+}
+
+.segmented input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.segmented label {
+  padding: spacer(1) spacer(4);
+  font-size: map.get($font-sizes, 'sm');
+  font-weight: map.get($font-weights, 'medium');
+  color: var(--fv-muted);
+  border-radius: map.get($radii, 'md');
+  cursor: pointer;
+  transition: color $transition-base, background-color $transition-base;
+}
+
+.segmented label:hover {
+  color: var(--fv-body-color);
+}
+
+.segmented input:checked + label {
+  color: var(--fv-body-color);
+  background-color: var(--fv-glass-bg-strong);
+  box-shadow: var(--fv-shadow-sm);
+}
+
+.segmented input:focus-visible + label {
+  box-shadow: var(--fv-focus-ring);
+}

package/scss/components/_skeleton.scss

@@ -0,0 +1,52 @@
+// =============================================================================
+// Farvist · Components · Skeleton
+// Shimmering placeholders for loading states.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.skeleton {
+  display: block;
+  background-image: linear-gradient(
+    100deg,
+    var(--fv-glass-bg) 30%,
+    var(--fv-glass-bg-strong) 50%,
+    var(--fv-glass-bg) 70%
+  );
+  background-size: 200% 100%;
+  border-radius: map.get($radii, 'md');
+  animation: fv-skeleton 1.4s ease-in-out infinite;
+}
+
+.skeleton-text {
+  height: 0.8em;
+  margin-bottom: spacer(2);
+  border-radius: map.get($radii, 'sm');
+}
+
+.skeleton-title {
+  width: 50%;
+  height: 1.4em;
+  margin-bottom: spacer(3);
+}
+
+.skeleton-avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+}
+
+.skeleton-btn {
+  width: 7rem;
+  height: 2.6rem;
+}
+
+@keyframes fv-skeleton {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton { animation: none; }
+}