@for-the-people-initiative/design-system 1.3.1

package/src/components/AtmosphericBackground/AtmosphericBackground.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="atmospheric-background" :class="variantClass">
+    <ParticleBackground
+      v-if="particles"
+      class="atmospheric-background__particles"
+      :particle-count="particleCount"
+      :static-star-count="staticStarCount"
+      :cluster-count="clusterCount"
+      :stars-per-cluster="starsPerCluster"
+      :particle-color="particleColor"
+      :min-size="0.5"
+      :max-size="2"
+      :speed="0.15"
+      :twinkle="true"
+      :parallax="parallax"
+    />
+    <div class="atmospheric-background__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AtmosphericBackgroundProps } from '../../types';
+import { computed } from "vue";
+import ParticleBackground from "../ParticleBackground/ParticleBackground.vue";
+
+defineOptions({ name: 'FtpAtmosphericBackground' });
+
+const props = withDefaults(defineProps<AtmosphericBackgroundProps>(), {
+  variant: "default",
+  particles: true,
+  particleCount: 100,
+  staticStarCount: 400,
+  clusterCount: 12,
+  starsPerCluster: 20,
+  particleColor: "rgba(255, 255, 255, 0.8)",
+  parallax: false,
+});
+
+const variantClass = computed(() => `atmospheric-background--${props.variant}`);
+</script>
+
+<style lang="scss">
+// Hard-coded navy colors for atmospheric effect
+$_navy-950: #0a0e1a;
+$_navy-900: #0f1629;
+
+.atmospheric-background {
+  position: relative;
+  min-height: 100%;
+  overflow: hidden;
+}
+
+.atmospheric-background__particles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.atmospheric-background__content {
+  position: relative;
+  z-index: 2;
+}
+
+// Default variant - cosmic blue/purple
+.atmospheric-background--default {
+  background:
+    // Primary blue nebula glow (center-top)
+    radial-gradient(
+      ellipse 100% 80% at 50% 20%,
+      rgba(80, 100, 180, 0.15) 0%,
+      rgba(60, 80, 160, 0.08) 40%,
+      transparent 70%
+    ),
+    // Secondary purple glow (offset)
+    radial-gradient(
+      ellipse 70% 60% at 70% 40%,
+      rgba(100, 80, 160, 0.1) 0%,
+      rgba(80, 60, 140, 0.05) 30%,
+      transparent 60%
+    ),
+    // Subtle blue accent (lower left)
+    radial-gradient(
+      ellipse 50% 40% at 20% 60%,
+      rgba(60, 100, 180, 0.08) 0%,
+      transparent 50%
+    ),
+    // Vignette (darker edges)
+    radial-gradient(
+      ellipse 100% 100% at 50% 50%,
+      transparent 30%,
+      rgba(0, 0, 0, 0.4) 100%
+    ),
+    // Base gradient
+    linear-gradient(
+      180deg,
+      $_navy-950 0%,
+      #0d1526 30%,
+      #111d35 50%,
+      #0d1526 70%,
+      $_navy-950 100%
+    );
+  background-color: $_navy-950;
+}
+
+// Vibrant variant - stronger cosmic glow
+.atmospheric-background--vibrant {
+  background:
+    // Stronger blue nebula
+    radial-gradient(
+      ellipse 100% 80% at 50% 25%,
+      rgba(80, 120, 200, 0.25) 0%,
+      rgba(60, 100, 180, 0.12) 40%,
+      transparent 70%
+    ),
+    // Purple accent
+    radial-gradient(
+      ellipse 80% 60% at 75% 35%,
+      rgba(120, 80, 180, 0.18) 0%,
+      rgba(100, 60, 160, 0.08) 30%,
+      transparent 60%
+    ),
+    // Blue accent lower
+    radial-gradient(
+      ellipse 60% 50% at 25% 55%,
+      rgba(60, 120, 200, 0.12) 0%,
+      transparent 50%
+    ),
+    // Vignette
+    radial-gradient(
+      ellipse 100% 100% at 50% 50%,
+      transparent 30%,
+      rgba(0, 0, 0, 0.45) 100%
+    ),
+    // Base
+    linear-gradient(
+      180deg,
+      $_navy-950 0%,
+      #0e1830 30%,
+      #142040 50%,
+      #0e1830 70%,
+      $_navy-950 100%
+    );
+  background-color: $_navy-950;
+}
+
+// Dark variant - minimal glow
+.atmospheric-background--dark {
+  background:
+    // Very subtle blue glow
+    radial-gradient(
+      ellipse 80% 60% at 50% 40%,
+      rgba(60, 80, 140, 0.08) 0%,
+      transparent 60%
+    ),
+    // Vignette
+    radial-gradient(
+      ellipse 100% 100% at 50% 50%,
+      transparent 20%,
+      rgba(0, 0, 0, 0.5) 100%
+    ),
+    // Base
+    linear-gradient(
+      180deg,
+      $_navy-950 0%,
+      $_navy-950 100%
+    );
+  background-color: $_navy-950;
+}
+
+// Subtle variant - light cosmic effect
+.atmospheric-background--subtle {
+  background:
+    // Gentle blue tint
+    radial-gradient(
+      ellipse 90% 70% at 50% 35%,
+      rgba(70, 90, 150, 0.06) 0%,
+      transparent 60%
+    ),
+    // Soft vignette
+    radial-gradient(
+      ellipse 100% 100% at 50% 50%,
+      transparent 40%,
+      rgba(0, 0, 0, 0.25) 100%
+    ),
+    // Base
+    linear-gradient(
+      180deg,
+      $_navy-900 0%,
+      $_navy-900 100%
+    );
+  background-color: $_navy-900;
+}
+</style>

package/src/components/AutoComplete/AutoComplete.scss

@@ -0,0 +1,282 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: autocomplete;
+
+.#{$c} {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+}
+
+.#{$c}__input-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--autocomplete-gap, $autocomplete-gap);
+  width: 100%;
+  min-height: var(--autocomplete-height-md, $autocomplete-height-md);
+  padding: var(--autocomplete-padding-y, $autocomplete-padding-y) var(--autocomplete-padding-x, $autocomplete-padding-x);
+  padding-right: calc(var(--autocomplete-padding-x, $autocomplete-padding-x) + 40px);
+  background-color: var(--autocomplete-background-default, $autocomplete-background-default);
+  border: var(--autocomplete-border-width, $autocomplete-border-width) solid var(--autocomplete-border-color-default, $autocomplete-border-color-default);
+  border-radius: var(--autocomplete-radius, $autocomplete-radius);
+  cursor: text;
+  transition: border-color 0.15s ease;
+
+  &:hover:not(.#{$c}--disabled &) {
+    border-color: var(--autocomplete-border-color-hover, $autocomplete-border-color-hover);
+  }
+}
+
+.#{$c}__input {
+  flex: 1;
+  min-width: 80px;
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: var(--autocomplete-text-default, $autocomplete-text-default);
+  font-size: var(--autocomplete-fontSize-md, $autocomplete-fontSize-md);
+  line-height: 1.5;
+
+  &::placeholder {
+    color: var(--autocomplete-text-placeholder, $autocomplete-text-placeholder);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--autocomplete-text-disabled, $autocomplete-text-disabled);
+  }
+}
+
+.#{$c}__icon {
+  position: absolute;
+  right: var(--autocomplete-padding-x, $autocomplete-padding-x);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--autocomplete-text-placeholder, $autocomplete-text-placeholder);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$c}__clear {
+  position: absolute;
+  right: calc(var(--autocomplete-padding-x, $autocomplete-padding-x) + 20px);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--autocomplete-text-placeholder, $autocomplete-text-placeholder);
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: var(--autocomplete-text-default, $autocomplete-text-default);
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.#{$c}__loader {
+  position: absolute;
+  right: calc(var(--autocomplete-padding-x, $autocomplete-padding-x) + 20px);
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--autocomplete-loader-size, $autocomplete-loader-size);
+  height: var(--autocomplete-loader-size, $autocomplete-loader-size);
+  color: var(--autocomplete-loader-color, $autocomplete-loader-color);
+}
+
+.#{$c}__loader-icon {
+  width: 100%;
+  height: 100%;
+  animation: autocomplete-spin 1s linear infinite;
+}
+
+@keyframes autocomplete-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Chip styles for multiple mode
+.#{$c}__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--autocomplete-chip-gap, $autocomplete-chip-gap);
+  padding: var(--autocomplete-chip-padding-y, $autocomplete-chip-padding-y) var(--autocomplete-chip-padding-x, $autocomplete-chip-padding-x);
+  background-color: var(--autocomplete-chip-background-default, $autocomplete-chip-background-default);
+  border-radius: var(--autocomplete-chip-radius, $autocomplete-chip-radius);
+  font-size: var(--autocomplete-chip-fontSize, $autocomplete-chip-fontSize);
+  color: var(--autocomplete-chip-text, $autocomplete-chip-text);
+  line-height: 1.4;
+  user-select: none;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--autocomplete-chip-background-hover, $autocomplete-chip-background-hover);
+  }
+}
+
+.#{$c}__chip-label {
+  white-space: nowrap;
+}
+
+.#{$c}__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--autocomplete-remove-size, $autocomplete-remove-size);
+  height: var(--autocomplete-remove-size, $autocomplete-remove-size);
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  color: var(--autocomplete-remove-color-default, $autocomplete-remove-color-default);
+  cursor: pointer;
+  transition: color 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    color: var(--autocomplete-remove-color-hover, $autocomplete-remove-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--autocomplete-focus-ringColor, $autocomplete-focus-ringColor);
+    outline-offset: 1px;
+  }
+}
+
+.#{$c}__chip-remove-icon {
+  width: 12px;
+  height: 12px;
+}
+
+// Dropdown
+.#{$c}__dropdown {
+  background-color: var(--autocomplete-dropdown-background, $autocomplete-dropdown-background);
+  border: 1px solid var(--autocomplete-dropdown-border, $autocomplete-dropdown-border);
+  border-radius: var(--autocomplete-dropdown-radius, $autocomplete-dropdown-radius);
+  box-shadow: var(--autocomplete-dropdown-shadow, $autocomplete-dropdown-shadow);
+  max-height: var(--autocomplete-dropdown-maxHeight, $autocomplete-dropdown-maxHeight);
+  overflow-y: auto;
+}
+
+.#{$c}__option {
+  padding: var(--autocomplete-option-padding-y, $autocomplete-option-padding-y) var(--autocomplete-option-padding-x, $autocomplete-option-padding-x);
+  color: var(--autocomplete-option-text-default, $autocomplete-option-text-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:first-child {
+    border-radius: var(--autocomplete-dropdown-radius, $autocomplete-dropdown-radius) var(--autocomplete-dropdown-radius, $autocomplete-dropdown-radius) 0 0;
+  }
+
+  &:last-child {
+    border-radius: 0 0 var(--autocomplete-dropdown-radius, $autocomplete-dropdown-radius) var(--autocomplete-dropdown-radius, $autocomplete-dropdown-radius);
+  }
+}
+
+.#{$c}__option--highlighted {
+  background-color: var(--autocomplete-option-background-hover, $autocomplete-option-background-hover);
+}
+
+.#{$c}__option--selected {
+  background-color: var(--autocomplete-option-background-selected, $autocomplete-option-background-selected);
+  color: var(--autocomplete-option-text-selected, $autocomplete-option-text-selected);
+}
+
+// States
+.#{$c}--focused {
+  .#{$c}__input-wrapper {
+    outline: var(--autocomplete-focus-ringWidth, $autocomplete-focus-ringWidth) solid var(--autocomplete-focus-ringColor, $autocomplete-focus-ringColor);
+    outline-offset: var(--autocomplete-focus-ringOffset, $autocomplete-focus-ringOffset);
+    border-color: var(--autocomplete-border-color-focus, $autocomplete-border-color-focus);
+  }
+}
+
+.#{$c}--disabled {
+  .#{$c}__input-wrapper {
+    cursor: not-allowed;
+    background-color: var(--autocomplete-background-disabled, $autocomplete-background-disabled);
+    border-color: var(--autocomplete-border-color-disabled, $autocomplete-border-color-disabled);
+  }
+
+  .#{$c}__icon {
+    opacity: 0.5;
+  }
+
+  .#{$c}__chip {
+    opacity: 0.6;
+  }
+}
+
+.#{$c}--invalid {
+  .#{$c}__input-wrapper {
+    border-color: var(--autocomplete-border-color-error, $autocomplete-border-color-error);
+  }
+
+  &.#{$c}--focused {
+    .#{$c}__input-wrapper {
+      border-color: var(--autocomplete-border-color-error, $autocomplete-border-color-error);
+    }
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__input-wrapper {
+    min-height: var(--autocomplete-height-sm, $autocomplete-height-sm);
+  }
+
+  .#{$c}__input {
+    font-size: var(--autocomplete-fontSize-sm, $autocomplete-fontSize-sm);
+  }
+
+  .#{$c}__chip {
+    font-size: 12px;
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__input-wrapper {
+    min-height: var(--autocomplete-height-md, $autocomplete-height-md);
+  }
+
+  .#{$c}__input {
+    font-size: var(--autocomplete-fontSize-md, $autocomplete-fontSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__input-wrapper {
+    min-height: var(--autocomplete-height-lg, $autocomplete-height-lg);
+  }
+
+  .#{$c}__input {
+    font-size: var(--autocomplete-fontSize-lg, $autocomplete-fontSize-lg);
+  }
+
+  .#{$c}__chip {
+    font-size: 14px;
+    padding: 4px 8px;
+  }
+}