farvist 0.5.0

package/scss/components/_avatar.scss

@@ -0,0 +1,76 @@
+// =============================================================================
+// Farvist · Components · Avatar
+// Image or initials, sizes, color variants, status dot and stacked groups.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  font-weight: map.get($font-weights, 'semibold');
+  color: var(--fv-body-color);
+  background-color: var(--fv-glass-bg-strong);
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: 50%;
+  overflow: hidden;
+  user-select: none;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: map.get($font-sizes, 'sm'); }
+.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: map.get($font-sizes, 'xl'); }
+.avatar-xl { width: 5rem;   height: 5rem;   font-size: map.get($font-sizes, '2xl'); }
+
+// Initials avatars in theme colors.
+@each $name, $clr in $theme-colors {
+  .avatar-#{$name} {
+    color: contrast-color($clr);
+    background-color: $clr;
+    border-color: transparent;
+  }
+}
+
+// Presence dot (overlaps the bottom-right). Default = online.
+.avatar-status {
+  overflow: visible;
+}
+
+.avatar-status::after {
+  content: '';
+  position: absolute;
+  right: 2%;
+  bottom: 2%;
+  width: 28%;
+  height: 28%;
+  background-color: var(--fv-success);
+  border: 2px solid var(--fv-body-bg);
+  border-radius: 50%;
+}
+
+.avatar-status-busy::after { background-color: var(--fv-danger); }
+.avatar-status-away::after { background-color: var(--fv-warning); }
+
+// Overlapping stack.
+.avatar-group {
+  display: inline-flex;
+
+  .avatar {
+    border: 2px solid var(--fv-body-bg);
+  }
+
+  .avatar:not(:first-child) {
+    margin-left: -0.75rem;
+  }
+}

package/scss/components/_badges.scss

@@ -0,0 +1,54 @@
+// =============================================================================
+// Farvist · Components · Badges
+// Small count / label pills. Solid (auto-contrasted) and soft glass variants.
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:color';
+@use '../abstracts' as *;
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35em 0.65em;
+  font-size: 0.75em;
+  font-weight: map.get($font-weights, 'semibold');
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  color: $white;
+  background-color: $secondary;
+  border: $border-width solid transparent;
+  border-radius: map.get($radii, 'sm');
+}
+
+// Solid: filled background, auto-contrasted text.
+@each $name, $clr in $theme-colors {
+  .badge-#{$name} {
+    color: contrast-color($clr);
+    background-color: $clr;
+  }
+}
+
+// Soft: tinted translucent fill with a colored border + same-hue text.
+// Dark theme uses a light tint of the hue; the light theme darkens it (below)
+// so the text clears WCAG AA on a near-white fill.
+@each $name, $clr in $theme-colors {
+  .badge-soft-#{$name} {
+    color: color.mix($white, $clr, 45%);
+    background-color: rgba($clr, 0.16);
+    border-color: rgba($clr, 0.35);
+  }
+}
+
+[data-theme='light'] {
+  @each $name, $clr in $theme-colors {
+    .badge-soft-#{$name} {
+      color: color.mix($body-text-light, $clr, 65%);
+    }
+  }
+}
+
+.badge-pill {
+  border-radius: map.get($radii, 'pill');
+}

package/scss/components/_breadcrumb.scss

@@ -0,0 +1,44 @@
+// =============================================================================
+// Farvist · Components · Breadcrumb
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: spacer(2);
+  padding: 0;
+  margin-bottom: spacer(4);
+  font-size: map.get($font-sizes, 'sm');
+  list-style: none;
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: spacer(2);
+  color: var(--fv-muted);
+
+  a {
+    color: var(--fv-muted);
+    text-decoration: none;
+    transition: color $transition-base;
+  }
+
+  a:hover {
+    color: var(--fv-body-color);
+  }
+
+  &.active {
+    color: var(--fv-body-color);
+  }
+
+  &:not(:last-child)::after {
+    content: '/';
+    color: var(--fv-muted);
+    opacity: 0.5;
+  }
+}

package/scss/components/_buttons.scss

@@ -0,0 +1,163 @@
+// =============================================================================
+// Farvist · Components · Buttons
+// `.btn` is themed entirely through `--fv-btn-*` custom properties. Solid
+// variants get a neon hover glow; gradient and glass variants add flair.
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:color';
+@use '../abstracts' as *;
+
+.btn {
+  // Neutral defaults; variants below override these.
+  --fv-btn-bg: transparent;
+  --fv-btn-color: var(--fv-body-color);
+  --fv-btn-border: var(--fv-glass-border);
+  --fv-btn-hover-bg: var(--fv-glass-bg-strong);
+  --fv-btn-hover-border: var(--fv-glass-border);
+  --fv-btn-active-bg: var(--fv-glass-bg);
+  --fv-btn-focus-ring: #{rgba($primary, 0.45)};
+  --fv-btn-glow: none;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: spacer(2);
+  padding: spacer(2) spacer(5);
+  font-size: map.get($font-sizes, 'base');
+  font-weight: map.get($font-weights, 'semibold');
+  line-height: $line-height-base;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  color: var(--fv-btn-color);
+  background-color: var(--fv-btn-bg);
+  border: $border-width solid var(--fv-btn-border);
+  border-radius: var(--fv-border-radius);
+  transition:
+    color $transition-base,
+    background-color $transition-base,
+    border-color $transition-base,
+    box-shadow $transition-base,
+    transform $transition-base;
+
+  &:hover {
+    color: var(--fv-btn-color);
+    background-color: var(--fv-btn-hover-bg);
+    border-color: var(--fv-btn-hover-border);
+    box-shadow: var(--fv-btn-glow);
+    text-decoration: none;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    background-color: var(--fv-btn-active-bg);
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    outline: 0;
+    box-shadow: 0 0 0 3px var(--fv-btn-focus-ring);
+  }
+
+  &:disabled,
+  &.disabled {
+    opacity: 0.5;
+    box-shadow: none;
+    transform: none;
+    pointer-events: none;
+  }
+}
+
+// Solid variants — one rule per theme color via @each.
+@each $name, $clr in $theme-colors {
+  .btn-#{$name} {
+    @include button-variant($clr);
+  }
+}
+
+// Outline variants — transparent until hover, then fill + glow.
+@each $name, $clr in $theme-colors {
+  .btn-outline-#{$name} {
+    --fv-btn-bg: transparent;
+    --fv-btn-color: #{$clr};
+    --fv-btn-border: #{$clr};
+    --fv-btn-hover-bg: #{$clr};
+    --fv-btn-hover-border: #{$clr};
+    --fv-btn-active-bg: #{color.scale($clr, $lightness: -10%)};
+    --fv-btn-focus-ring: #{rgba($clr, 0.45)};
+    --fv-btn-glow: 0 0 24px #{rgba($clr, 0.5)};
+
+    &:hover {
+      --fv-btn-color: #{contrast-color($clr)};
+    }
+  }
+}
+
+// Gradient variants — vivid fill, intensifies on hover.
+@each $name, $grad in $gradients {
+  .btn-gradient-#{$name} {
+    --fv-btn-color: #ffffff;
+    --fv-btn-border: transparent;
+    // The gradient image is the fill; keep the base hover/active color layer
+    // transparent so no glass tint paints underneath it.
+    --fv-btn-hover-bg: transparent;
+    --fv-btn-active-bg: transparent;
+    --fv-btn-glow: var(--fv-glow-primary);
+
+    color: var(--fv-btn-color);
+    background-image: #{$grad};
+    border-color: transparent;
+
+    &:hover {
+      filter: brightness(1.08);
+    }
+  }
+}
+
+// Frosted-glass button.
+.btn-glass {
+  @include glass;
+  --fv-btn-color: var(--fv-body-color);
+  box-shadow: none;
+
+  &:hover {
+    background-color: var(--fv-glass-bg-strong);
+    border-color: var(--fv-glass-border);
+  }
+}
+
+// Link-style button.
+.btn-link {
+  --fv-btn-bg: transparent;
+  --fv-btn-border: transparent;
+  --fv-btn-color: var(--fv-primary);
+  --fv-btn-hover-bg: transparent;
+  --fv-btn-hover-border: transparent;
+  --fv-btn-active-bg: transparent;
+  --fv-btn-glow: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// Sizes.
+.btn-sm {
+  padding: spacer(1) spacer(3);
+  font-size: map.get($font-sizes, 'sm');
+}
+
+.btn-lg {
+  padding: spacer(3) spacer(6);
+  font-size: map.get($font-sizes, 'lg');
+}
+
+// Full-width block button.
+.btn-block {
+  display: flex;
+  width: 100%;
+}

package/scss/components/_callout.scss

@@ -0,0 +1,37 @@
+// =============================================================================
+// Farvist · Components · Callout
+// A lighter aside/note for docs and inline guidance.
+//   <div class="callout callout-info">
+//     <div class="callout-title">Heads up</div>
+//     <p>Body text.</p>
+//   </div>
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.callout {
+  padding: spacer(4);
+  margin-bottom: spacer(4);
+  background-color: var(--fv-glass-bg);
+  border: $border-width solid var(--fv-glass-border);
+  border-left: 3px solid var(--fv-primary);
+  border-radius: map.get($radii, 'md');
+}
+
+.callout-title {
+  margin-bottom: spacer(1);
+  font-weight: map.get($font-weights, 'semibold');
+}
+
+.callout > :last-child {
+  margin-bottom: 0;
+}
+
+@each $name, $clr in $theme-colors {
+  .callout-#{$name} {
+    border-left-color: $clr;
+
+    .callout-title { color: $clr; }
+  }
+}

package/scss/components/_cards.scss

@@ -0,0 +1,74 @@
+// =============================================================================
+// Farvist · Components · Cards
+// Glass surfaces by default. `.card-glow` adds a neon hover halo; `.card-solid`
+// opts out of translucency for content-heavy panels.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: map.get($radii, 'xl');
+  overflow: hidden;
+  @include glass;
+  transition: transform $transition-base, box-shadow $transition-base, border-color $transition-base;
+}
+
+// Opaque variant for when you don't want see-through content.
+.card-solid {
+  background-color: var(--fv-surface-solid);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+// Lift + neon halo on hover.
+.card-glow:hover {
+  transform: translateY(-4px);
+  border-color: rgba($primary, 0.5);
+  box-shadow: var(--fv-shadow-xl), var(--fv-glow-primary);
+}
+
+.card-body {
+  flex: 1 1 auto;
+  padding: spacer(5);
+}
+
+.card-title {
+  margin-bottom: spacer(2);
+  font-size: map.get($font-sizes, 'xl');
+  font-weight: map.get($font-weights, 'bold');
+}
+
+.card-subtitle {
+  margin-bottom: spacer(3);
+  color: var(--fv-muted);
+}
+
+.card-text {
+  color: var(--fv-muted);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.card-header {
+  padding: spacer(4) spacer(5);
+  font-weight: map.get($font-weights, 'semibold');
+  background-color: var(--fv-glass-bg);
+  border-bottom: $border-width solid var(--fv-glass-border);
+}
+
+.card-footer {
+  padding: spacer(4) spacer(5);
+  background-color: var(--fv-glass-bg);
+  border-top: $border-width solid var(--fv-glass-border);
+}
+
+.card-img-top {
+  width: 100%;
+  object-fit: cover;
+}

package/scss/components/_chip.scss

@@ -0,0 +1,61 @@
+// =============================================================================
+// Farvist · Components · Chip / Tag
+// Compact glass pills with an optional remove button and soft color variants.
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:color';
+@use '../abstracts' as *;
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: spacer(2);
+  padding: spacer(1) spacer(3);
+  font-size: map.get($font-sizes, 'sm');
+  font-weight: map.get($font-weights, 'medium');
+  color: var(--fv-body-color);
+  background-color: var(--fv-glass-bg);
+  border: $border-width solid var(--fv-glass-border);
+  border-radius: map.get($radii, 'pill');
+}
+
+.chip-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.15em;
+  height: 1.15em;
+  margin-right: -0.25rem;
+  padding: 0;
+  font-size: 1.1em;
+  line-height: 1;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+    background-color: var(--fv-glass-bg-strong);
+  }
+}
+
+// Soft color variants (dark-theme tint; light theme darkens below).
+@each $name, $clr in $theme-colors {
+  .chip-#{$name} {
+    color: color.mix($white, $clr, 45%);
+    background-color: rgba($clr, 0.16);
+    border-color: rgba($clr, 0.35);
+  }
+}
+
+[data-theme='light'] {
+  @each $name, $clr in $theme-colors {
+    .chip-#{$name} {
+      color: color.mix($body-text-light, $clr, 65%);
+    }
+  }
+}

package/scss/components/_dropdown.scss

@@ -0,0 +1,90 @@
+// =============================================================================
+// Farvist · Components · Dropdown (native <details>)
+// Markup:
+//   <details class="dropdown">
+//     <summary class="btn btn-glass">Menu</summary>
+//     <div class="dropdown-menu">
+//       <a class="dropdown-item" href="#">Item</a>
+//       <div class="dropdown-divider"></div>
+//       <button class="dropdown-item">Action</button>
+//     </div>
+//   </details>
+// farvist.js closes it on outside click; CSS handles open/close.
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+
+  > summary {
+    list-style: none;
+    cursor: pointer;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 0.4rem);
+  left: 0;
+  z-index: map.get($z-layers, 'dropdown');
+  min-width: 11rem;
+  padding: spacer(1);
+  border-radius: map.get($radii, 'lg');
+  @include glass($strong: true);
+  animation: fv-dropdown-in 0.15s ease;
+}
+
+// Right-aligned variant.
+.dropdown-menu-end {
+  left: auto;
+  right: 0;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: spacer(2);
+  width: 100%;
+  padding: spacer(2) spacer(3);
+  font-size: map.get($font-sizes, 'base');
+  color: var(--fv-body-color);
+  text-align: left;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  border-radius: map.get($radii, 'md');
+  cursor: pointer;
+  transition: background-color $transition-base;
+
+  &:hover {
+    background-color: var(--fv-glass-bg);
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: 0;
+    box-shadow: var(--fv-focus-ring);
+  }
+}
+
+.dropdown-divider {
+  height: $border-width;
+  margin: spacer(1) 0;
+  background-color: var(--fv-glass-border);
+}
+
+@keyframes fv-dropdown-in {
+  from { opacity: 0; transform: translateY(-0.35rem); }
+  to   { opacity: 1; transform: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dropdown-menu { animation: none; }
+}

package/scss/components/_empty-state.scss

@@ -0,0 +1,37 @@
+// =============================================================================
+// Farvist · Components · Empty state
+// <div class="empty-state">
+//   <svg class="icon empty-state-icon"><use href="...#i-search"/></svg>
+//   <div class="empty-state-title">No results</div>
+//   <p class="empty-state-text">Try a different search.</p>
+//   <button class="btn btn-gradient-primary">New search</button>
+// </div>
+// =============================================================================
+
+@use 'sass:map';
+@use '../abstracts' as *;
+
+.empty-state {
+  padding: spacer(7) spacer(4);
+  text-align: center;
+}
+
+.empty-state-icon {
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-bottom: spacer(3);
+  color: var(--fv-muted);
+  opacity: 0.7;
+}
+
+.empty-state-title {
+  margin-bottom: spacer(2);
+  font-size: map.get($font-sizes, 'xl');
+  font-weight: map.get($font-weights, 'semibold');
+}
+
+.empty-state-text {
+  max-width: 28rem;
+  margin: 0 auto spacer(4);
+  color: var(--fv-muted);
+}