farvist 0.5.0

package/scss/components/_spinner.scss

@@ -0,0 +1,60 @@
+// =============================================================================
+// Farvist · Components · Spinner
+// A ring loader and a bouncing-dots loader, both color-themeable.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  vertical-align: middle;
+  border: 3px solid var(--fv-glass-border);
+  border-top-color: var(--fv-primary);
+  border-radius: 50%;
+  animation: fv-spin 0.7s linear infinite;
+}
+
+.spinner-sm { width: 1rem; height: 1rem; border-width: 2px; }
+.spinner-lg { width: 2.5rem; height: 2.5rem; border-width: 4px; }
+
+@each $name, $clr in $theme-colors {
+  .spinner-#{$name} { border-top-color: $clr; }
+}
+
+// Three bouncing dots.
+.spinner-dots {
+  display: inline-flex;
+  gap: 0.3rem;
+  vertical-align: middle;
+
+  > span {
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: var(--fv-primary);
+    border-radius: 50%;
+    animation: fv-bounce 0.6s ease-in-out infinite;
+  }
+
+  > span:nth-child(2) { animation-delay: 0.12s; }
+  > span:nth-child(3) { animation-delay: 0.24s; }
+}
+
+@keyframes fv-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes fv-bounce {
+  0%, 100% { transform: translateY(0); opacity: 0.5; }
+  50%      { transform: translateY(-0.45rem); opacity: 1; }
+}
+
+// Keep a slow, continuous spin so the loading indicator stays meaningful. The
+// !important is required to beat the global reduced-motion reset (which would
+// otherwise freeze the ring mid-rotation).
+@media (prefers-reduced-motion: reduce) {
+  .spinner { animation: fv-spin 1.6s linear infinite !important; }
+  .spinner-dots > span { animation: none; }
+}

package/scss/components/_stat.scss

@@ -0,0 +1,32 @@
+// =============================================================================
+// Farvist · Components · Stat
+// Typographic helpers for metric tiles (drop inside a .card).
+//   <div class="stat-value">8,420</div>
+//   <div class="stat-label">Active users</div>
+//   <span class="stat-trend stat-trend-up">+12%</span>
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.stat-value {
+  font-size: map.get($font-sizes, '3xl');
+  font-weight: map.get($font-weights, 'black');
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.stat-label {
+  color: var(--fv-muted);
+}
+
+.stat-trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: map.get($font-sizes, 'sm');
+  font-weight: map.get($font-weights, 'semibold');
+}
+
+.stat-trend-up   { color: var(--fv-success); }
+.stat-trend-down { color: var(--fv-danger); }

package/scss/components/_stepper.scss

@@ -0,0 +1,78 @@
+// =============================================================================
+// Farvist · Components · Stepper
+// <ol class="stepper">
+//   <li class="step is-done"><span class="step-dot">1</span><span class="step-label">Account</span></li>
+//   <li class="step is-active"><span class="step-dot">2</span><span class="step-label">Plan</span></li>
+//   <li class="step"><span class="step-dot">3</span><span class="step-label">Done</span></li>
+// </ol>
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.stepper {
+  display: flex;
+  gap: spacer(2);
+  padding: 0;
+  margin: 0 0 spacer(4);
+  list-style: none;
+}
+
+.step {
+  position: relative;
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: spacer(2);
+  text-align: center;
+}
+
+.step-dot {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  font-weight: map.get($font-weights, 'semibold');
+  color: var(--fv-muted);
+  background-color: var(--fv-body-bg);
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: 50%;
+}
+
+.step-label {
+  font-size: map.get($font-sizes, 'sm');
+  color: var(--fv-muted);
+}
+
+// Connector line from each step's center to the next.
+.step:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 1rem;
+  left: 50%;
+  width: 100%;
+  height: 2px;
+  background-color: var(--fv-glass-border);
+}
+
+.step.is-active .step-dot {
+  color: #ffffff;
+  background-image: var(--fv-gradient-primary);
+  border-color: transparent;
+  box-shadow: var(--fv-glow-primary);
+}
+
+.step.is-done .step-dot {
+  color: #ffffff;
+  background-color: var(--fv-success);
+  border-color: transparent;
+}
+
+.step.is-active .step-label,
+.step.is-done .step-label {
+  color: var(--fv-body-color);
+}

package/scss/components/_switch.scss

@@ -0,0 +1,65 @@
+// =============================================================================
+// Farvist · Components · Switch (toggle)
+// Markup (give the input a label — visible text or aria-label):
+//   <label class="switch">
+//     <input type="checkbox" aria-label="Dark mode" />
+//     <span class="switch-track"></span>
+//     <span class="switch-thumb"></span>
+//   </label>
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+
+  input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+}
+
+.switch-track {
+  width: 2.6rem;
+  height: 1.5rem;
+  background-color: var(--fv-glass-bg-strong);
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: map.get($radii, 'pill');
+  transition: background-color $transition-base, border-color $transition-base;
+}
+
+.switch-thumb {
+  position: absolute;
+  top: 50%;
+  left: 0.22rem;
+  width: 1.04rem;
+  height: 1.04rem;
+  background-color: #ffffff;
+  border-radius: 50%;
+  box-shadow: var(--fv-shadow-sm);
+  transform: translateY(-50%);
+  transition: transform $transition-base;
+}
+
+.switch input:checked ~ .switch-track {
+  background-image: var(--fv-gradient-primary);
+  border-color: transparent;
+}
+
+.switch input:checked ~ .switch-thumb {
+  transform: translateY(-50%) translateX(1.08rem);
+}
+
+.switch input:focus-visible ~ .switch-track {
+  box-shadow: var(--fv-focus-ring);
+}
+
+.switch input:disabled ~ .switch-track {
+  opacity: 0.5;
+}

package/scss/components/_table.scss

@@ -0,0 +1,51 @@
+// =============================================================================
+// Farvist · Components · Table
+// Clean data table with hover/striped modifiers; drop inside a .card for glass.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--fv-body-color);
+
+  th,
+  td {
+    padding: spacer(3) spacer(4);
+    text-align: left;
+    vertical-align: middle;
+    border-bottom: $border-width solid var(--fv-border-color);
+  }
+
+  thead th {
+    font-size: map.get($font-sizes, 'sm');
+    font-weight: map.get($font-weights, 'semibold');
+    color: var(--fv-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  tbody tr {
+    transition: background-color $transition-base;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: 0;
+  }
+}
+
+.table-hover tbody tr:hover {
+  background-color: var(--fv-glass-bg);
+}
+
+.table-striped tbody tr:nth-child(odd) {
+  background-color: var(--fv-glass-bg);
+}
+
+// Horizontal scroll wrapper for narrow viewports.
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}

package/scss/components/_tabs.scss

@@ -0,0 +1,64 @@
+// =============================================================================
+// Farvist · Components · Tabs (segmented)
+// JS-driven: .tab buttons carry data-fv-tab="#panelId"; farvist.js toggles
+// the .active class on the clicked tab and its panel.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.tabs {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: spacer(1);
+  padding: spacer(1);
+  margin-bottom: spacer(4);
+  background-color: var(--fv-glass-bg);
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: map.get($radii, 'lg');
+}
+
+.tab {
+  padding: spacer(2) spacer(4);
+  font-size: map.get($font-sizes, 'base');
+  font-weight: map.get($font-weights, 'medium');
+  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);
+  }
+
+  &:focus-visible {
+    outline: 0;
+    box-shadow: var(--fv-focus-ring);
+  }
+
+  &.active {
+    color: var(--fv-body-color);
+    background-color: var(--fv-glass-bg-strong);
+    box-shadow: var(--fv-shadow-sm);
+  }
+}
+
+.tab-panel {
+  display: none;
+
+  &.active {
+    display: block;
+    animation: fv-fade-in 0.25s ease;
+  }
+}
+
+@keyframes fv-fade-in {
+  from { opacity: 0; transform: translateY(0.4rem); }
+  to   { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab-panel.active { animation: none; }
+}

package/scss/components/_timeline.scss

@@ -0,0 +1,77 @@
+// =============================================================================
+// Farvist · Components · Timeline
+// <ul class="timeline">
+//   <li class="timeline-item timeline-success">
+//     <div class="timeline-marker"></div>
+//     <div class="timeline-content">
+//       <div class="timeline-title">Deployed</div>
+//       <div class="timeline-time">2 min ago</div>
+//     </div>
+//   </li>
+// </ul>
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.timeline {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.timeline-item {
+  display: flex;
+  gap: spacer(4);
+}
+
+.timeline-marker {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.timeline-marker::before {
+  content: '';
+  flex: 0 0 auto;
+  width: 0.9rem;
+  height: 0.9rem;
+  margin-top: 0.3rem;
+  background-color: var(--fv-primary);
+  border: 2px solid var(--fv-body-bg);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px var(--fv-glass-border);
+}
+
+.timeline-marker::after {
+  content: '';
+  flex: 1 1 auto;
+  width: 2px;
+  margin-top: 0.25rem;
+  background-color: var(--fv-glass-border);
+}
+
+.timeline-item:last-child .timeline-marker::after {
+  display: none;
+}
+
+.timeline-content {
+  padding-bottom: spacer(5);
+}
+
+.timeline-title {
+  font-weight: map.get($font-weights, 'semibold');
+}
+
+.timeline-time {
+  font-size: map.get($font-sizes, 'sm');
+  color: var(--fv-muted);
+}
+
+// Per-item dot colors.
+@each $name, $clr in $theme-colors {
+  .timeline-#{$name} .timeline-marker::before {
+    background-color: $clr;
+  }
+}

package/scss/components/_toast.scss

@@ -0,0 +1,79 @@
+// =============================================================================
+// Farvist · Components · Toast
+// Spawn with farvist.js: Farvist.toast({ title, message, variant }).
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.toast-container {
+  position: fixed;
+  top: spacer(5);
+  right: spacer(5);
+  z-index: map.get($z-layers, 'tooltip');
+  display: flex;
+  flex-direction: column;
+  gap: spacer(2);
+  width: min(22rem, calc(100vw - #{spacer(6)}));
+}
+
+.toast {
+  display: flex;
+  align-items: flex-start;
+  gap: spacer(3);
+  padding: spacer(3) spacer(4);
+  border-radius: map.get($radii, 'lg');
+  border-left: 3px solid var(--fv-primary);
+  @include glass($strong: true);
+  box-shadow: var(--fv-shadow-xl);
+  animation: fv-toast-in 0.3s ease;
+}
+
+.toast-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.toast-title {
+  font-weight: map.get($font-weights, 'semibold');
+}
+
+.toast-message {
+  font-size: map.get($font-sizes, 'sm');
+  color: var(--fv-muted);
+}
+
+.toast-close {
+  flex-shrink: 0;
+  padding: 0;
+  font-size: 1.2rem;
+  line-height: 1;
+  color: var(--fv-muted);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+
+  &:hover { color: var(--fv-body-color); }
+}
+
+// Colored left accent per variant.
+@each $name, $clr in $theme-colors {
+  .toast-#{$name} { border-left-color: $clr; }
+}
+
+.toast.is-leaving {
+  animation: fv-toast-out 0.25s ease forwards;
+}
+
+@keyframes fv-toast-in {
+  from { opacity: 0; transform: translateX(1rem); }
+  to   { opacity: 1; transform: none; }
+}
+
+@keyframes fv-toast-out {
+  to { opacity: 0; transform: translateX(1rem); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast { animation: none; }
+}

package/scss/components/_tooltip.scss

@@ -0,0 +1,45 @@
+// =============================================================================
+// Farvist · Components · Tooltip (CSS-only)
+// Add `data-tooltip="text"` to any element. Appears above on hover/focus.
+//
+// ACCESSIBILITY: the tooltip text is rendered with `content: attr()`, which is
+// DECORATIVE — it is not exposed to assistive tech. The host must therefore be
+// focusable AND carry its own accessible name. For an icon-only control, give it
+// a real label, e.g. `<button aria-label="Notifications" data-tooltip="Notifications">`.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 0.5rem);
+  z-index: map.get($z-layers, 'tooltip');
+  padding: spacer(1) spacer(3);
+  font-size: map.get($font-sizes, 'sm');
+  font-weight: map.get($font-weights, 'medium');
+  white-space: nowrap;
+  color: var(--fv-body-color);
+  background-color: var(--fv-glass-bg-strong);
+  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: map.get($radii, 'md');
+  box-shadow: var(--fv-shadow-lg);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-50%) translateY(0.25rem);
+  transition: opacity $transition-base, transform $transition-base;
+}
+
+[data-tooltip]:hover::after,
+[data-tooltip]:focus-visible::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}

package/scss/farvist.scss

@@ -0,0 +1,60 @@
+// =============================================================================
+// Farvist — a lightweight, Sass-powered CSS framework
+// -----------------------------------------------------------------------------
+// Single entry point. Layers are loaded low-specificity first so that utilities
+// (loaded last) can always win the cascade.
+//
+//   Base      → resets and element defaults
+//   Layout    → container and grid system
+//   Components → buttons, cards, forms, …
+//   Utilities → generated single-purpose helpers
+//
+// Build:  npm run dev   (writes dist/farvist.css and dist/farvist.min.css)
+// =============================================================================
+
+// Base
+@use 'base/root';
+@use 'base/reset';
+@use 'base/typography';
+
+// Layout
+@use 'layout/grid';
+
+// Components
+@use 'components/buttons';
+@use 'components/badges';
+@use 'components/alerts';
+@use 'components/cards';
+@use 'components/forms';
+@use 'components/navbar';
+@use 'components/icon';
+@use 'components/table';
+@use 'components/avatar';
+@use 'components/chip';
+@use 'components/progress';
+@use 'components/spinner';
+@use 'components/skeleton';
+@use 'components/breadcrumb';
+@use 'components/pagination';
+@use 'components/tooltip';
+@use 'components/switch';
+@use 'components/tabs';
+@use 'components/accordion';
+@use 'components/dropdown';
+@use 'components/modal';
+@use 'components/toast';
+@use 'components/stepper';
+@use 'components/timeline';
+@use 'components/segmented';
+@use 'components/rating';
+@use 'components/stat';
+@use 'components/empty-state';
+@use 'components/list-group';
+@use 'components/callout';
+@use 'components/range';
+
+// Utilities (last — highest cascade priority)
+@use 'utilities/spacing';
+@use 'utilities/utilities';
+@use 'utilities/effects';
+@use 'utilities/backgrounds';

package/scss/layout/_grid.scss

@@ -0,0 +1,83 @@
+// =============================================================================
+// Farvist · Layout · Container & flexbox grid
+// A 12-column flexbox grid. The column and offset classes are generated with a
+// nested `@for` (columns) inside an `@each` (breakpoints) loop.
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:math';
+@use '../abstracts' as *;
+
+// -- Containers ---------------------------------------------------------------
+.container,
+.container-fluid {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: math.div($grid-gutter, 2);
+}
+
+// A fixed `.container` steps up to each breakpoint's max-width.
+@each $name, $width in $container-max-widths {
+  @include media-up($name) {
+    .container {
+      max-width: $width;
+    }
+  }
+}
+
+// -- Row ----------------------------------------------------------------------
+// Negative inline margin cancels the columns' gutter padding so edges align.
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-inline: math.div(-$grid-gutter, 2);
+
+  > * {
+    width: 100%;
+    max-width: 100%;
+    padding-inline: math.div($grid-gutter, 2);
+  }
+}
+
+// -- Auto / equal-width columns ----------------------------------------------
+.col {
+  flex: 1 0 0%;
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+// -- Generated fixed-width columns & offsets ---------------------------------
+@each $bp in map.keys($grid-breakpoints) {
+  $infix: breakpoint-infix($bp);
+
+  @include media-up($bp) {
+    // .col-6, .col-md-4, ... built with a @for loop over the column count.
+    @for $i from 1 through $grid-columns {
+      .col#{$infix}-#{$i} {
+        flex: 0 0 auto;
+        width: math.percentage(math.div($i, $grid-columns));
+      }
+    }
+
+    // .offset-3, .offset-lg-2, ... push a column to the right.
+    @for $i from 0 through $grid-columns - 1 {
+      $offset: 0;
+      @if $i != 0 {
+        $offset: math.percentage(math.div($i, $grid-columns));
+      }
+      .offset#{$infix}-#{$i} {
+        margin-left: $offset;
+      }
+    }
+  }
+}
+
+// -- Gutter utilities (gap-based, opt-in) ------------------------------------
+@each $key, $value in $spacers {
+  .g-#{$key}  { gap: $value; }
+  .gx-#{$key} { column-gap: $value; }
+  .gy-#{$key} { row-gap: $value; }
+}