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

package/src/components/AutoComplete/AutoComplete.vue

@@ -0,0 +1,398 @@
+<template>
+  <div
+    ref="containerRef"
+    class="autocomplete"
+    :class="additionalClasses"
+  >
+    <div class="autocomplete__input-wrapper" @click="focusInput">
+      <!-- Multiple mode chips -->
+      <span
+        v-for="(item, index) in selectedItems"
+        :key="`chip-${index}`"
+        class="autocomplete__chip"
+      >
+        <span class="autocomplete__chip-label">{{ getOptionLabel(item) }}</span>
+        <button
+          v-if="!isDisabled"
+          type="button"
+          class="autocomplete__chip-remove"
+          aria-label="Remove"
+          @click.stop="removeItem(index)"
+        >
+          <svg
+            class="autocomplete__chip-remove-icon"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4.5 4.5L9.5 9.5M9.5 4.5L4.5 9.5"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      </span>
+
+      <input
+        ref="inputRef"
+        v-model="query"
+        class="autocomplete__input"
+        type="text"
+        :placeholder="showPlaceholder ? placeholder : ''"
+        :disabled="isDisabled"
+        :aria-invalid="isInvalid || undefined"
+        :aria-expanded="isOpen"
+        :aria-describedby="ariaDescribedby || undefined"
+        :aria-activedescendant="highlightedIndex >= 0 ? `${autocompleteId}-option-${highlightedIndex}` : undefined"
+        aria-autocomplete="list"
+        :aria-controls="`${autocompleteId}-listbox`"
+        role="combobox"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeydown"
+      />
+
+      <span v-if="isLoading" class="autocomplete__loader">
+        <svg
+          class="autocomplete__loader-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-dasharray="31.4 31.4"
+          />
+        </svg>
+      </span>
+
+      <span v-else-if="!multiple && modelValue && !isDisabled" class="autocomplete__clear" @click.stop="clearValue">
+        <svg
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4.5 4.5L9.5 9.5M9.5 4.5L4.5 9.5"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+
+      <span class="autocomplete__icon">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M4 6L8 10L12 6"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+    </div>
+
+    <!-- Dropdown -->
+    <Teleport to="body">
+      <div
+        v-if="isOpen && filteredSuggestions.length > 0"
+        ref="dropdownRef"
+        class="autocomplete__dropdown"
+        :style="dropdownStyle"
+        role="listbox"
+        :id="`${autocompleteId}-listbox`"
+      >
+        <div
+          v-for="(suggestion, index) in filteredSuggestions"
+          :key="`suggestion-${index}`"
+          :id="`${autocompleteId}-option-${index}`"
+          class="autocomplete__option"
+          :class="{
+            'autocomplete__option--highlighted': index === highlightedIndex,
+            'autocomplete__option--selected': isSelected(suggestion)
+          }"
+          role="option"
+          :aria-selected="isSelected(suggestion)"
+          @mousedown.prevent="selectSuggestion(suggestion)"
+          @mouseenter="highlightedIndex = index"
+        >
+          <slot name="option" :option="suggestion">
+            {{ getOptionLabel(suggestion) }}
+          </slot>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style src="./AutoComplete.scss"></style>
+
+<script setup lang="ts">
+import type { AutoCompleteProps, AutoCompleteEmits } from '../../types';
+import { computed, ref, watch, nextTick, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpAutoComplete' });
+
+const props = withDefaults(defineProps<AutoCompleteProps>(), {
+  modelValue: null,
+  suggestions: () => [],
+  optionLabel: "label",
+  optionValue: "value",
+  placeholder: "",
+  multiple: false,
+  minLength: 1,
+  delay: 300,
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+  isLoading: false,
+  dropdown: false,
+  completeOnFocus: false,
+});
+
+const emit = defineEmits([
+  "update:modelValue",
+  "complete",
+  "select",
+  "unselect",
+  "focus",
+  "blur",
+  "clear",
+]);
+
+const autocompleteId = `autocomplete-${Math.random().toString(36).substring(2, 9)}`;
+const containerRef = ref<HTMLElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+const dropdownRef = ref(null);
+const query = ref("");
+const isOpen = ref(false);
+const isFocused = ref(false);
+const highlightedIndex = ref(-1);
+const dropdownStyle = ref({});
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+const selectedItems = computed(() => {
+  if (!props.multiple) return [];
+  return Array.isArray(props.modelValue) ? props.modelValue : [];
+});
+
+const showPlaceholder = computed(() => {
+  if (props.multiple) {
+    return selectedItems.value.length === 0 && !query.value;
+  }
+  return !props.modelValue && !query.value;
+});
+
+const filteredSuggestions = computed(() => {
+  if (props.multiple) {
+    return props.suggestions.filter((s) => {
+      const value = getOptionValue(s);
+      return !selectedItems.value.some((item) => getOptionValue(item) === value);
+    });
+  }
+  return props.suggestions;
+});
+
+const getOptionLabel = (option: any) => {
+  if (option === null || option === undefined) return "";
+  if (typeof option === "string" || typeof option === "number") return option;
+  return option[props.optionLabel] || "";
+};
+
+const getOptionValue = (option: any) => {
+  if (option === null || option === undefined) return option;
+  if (typeof option === "string" || typeof option === "number") return option;
+  return option[props.optionValue] ?? option;
+};
+
+const isSelected = (suggestion: any) => {
+  if (props.multiple) {
+    return selectedItems.value.some(
+      (item) => getOptionValue(item) === getOptionValue(suggestion)
+    );
+  }
+  return getOptionValue(props.modelValue) === getOptionValue(suggestion);
+};
+
+const updateDropdownPosition = () => {
+  if (!containerRef.value) return;
+  const rect = containerRef.value.getBoundingClientRect();
+  dropdownStyle.value = {
+    position: "fixed",
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    zIndex: 1000,
+  };
+};
+
+const openDropdown = () => {
+  if (props.isDisabled) return;
+  isOpen.value = true;
+  highlightedIndex.value = -1;
+  nextTick(updateDropdownPosition);
+};
+
+const closeDropdown = () => {
+  isOpen.value = false;
+  highlightedIndex.value = -1;
+};
+
+const focusInput = () => {
+  inputRef.value?.focus();
+};
+
+const onInput = () => {
+  if (debounceTimer) clearTimeout(debounceTimer);
+
+  if (query.value.length >= props.minLength) {
+    debounceTimer = setTimeout(() => {
+      emit("complete", { query: query.value });
+      openDropdown();
+    }, props.delay);
+  } else {
+    closeDropdown();
+  }
+};
+
+const onFocus = (event: FocusEvent) => {
+  isFocused.value = true;
+  emit("focus", { originalEvent: event });
+
+  if (props.completeOnFocus || props.dropdown) {
+    emit("complete", { query: query.value });
+    openDropdown();
+  }
+};
+
+const onBlur = (event: FocusEvent) => {
+  isFocused.value = false;
+  closeDropdown();
+  emit("blur", { originalEvent: event });
+};
+
+const onKeydown = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      if (!isOpen.value) {
+        openDropdown();
+        emit("complete", { query: query.value });
+      } else if (highlightedIndex.value < filteredSuggestions.value.length - 1) {
+        highlightedIndex.value++;
+      }
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      if (highlightedIndex.value > 0) {
+        highlightedIndex.value--;
+      }
+      break;
+    case "Enter":
+      event.preventDefault();
+      if (isOpen.value && highlightedIndex.value >= 0) {
+        selectSuggestion(filteredSuggestions.value[highlightedIndex.value]);
+      }
+      break;
+    case "Escape":
+      closeDropdown();
+      break;
+    case "Backspace":
+      if (props.multiple && !query.value && selectedItems.value.length > 0) {
+        removeItem(selectedItems.value.length - 1);
+      }
+      break;
+  }
+};
+
+const selectSuggestion = (suggestion: any) => {
+  if (props.multiple) {
+    const newValue = [...selectedItems.value, suggestion];
+    emit("update:modelValue", newValue);
+    emit("select", { value: suggestion });
+    query.value = "";
+  } else {
+    emit("update:modelValue", suggestion);
+    emit("select", { value: suggestion });
+    query.value = getOptionLabel(suggestion);
+    closeDropdown();
+  }
+};
+
+const removeItem = (index: any) => {
+  const removed = selectedItems.value[index];
+  const newValue = selectedItems.value.filter((_, i) => i !== index);
+  emit("update:modelValue", newValue);
+  emit("unselect", { value: removed });
+};
+
+const clearValue = () => {
+  emit("update:modelValue", null);
+  emit("clear");
+  query.value = "";
+  focusInput();
+};
+
+// Sync query with single selection
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!props.multiple && newValue && !isFocused.value) {
+      query.value = getOptionLabel(newValue);
+    }
+  },
+  { immediate: true }
+);
+
+// Handle scroll and resize
+const handleScroll = () => {
+  if (isOpen.value) updateDropdownPosition();
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll, true);
+  window.addEventListener("resize", handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll, true);
+  window.removeEventListener("resize", handleScroll);
+  if (debounceTimer) clearTimeout(debounceTimer);
+});
+
+const additionalClasses = computed(() =>
+  [
+    `autocomplete--size-${props.size}`,
+    props.multiple && "autocomplete--multiple",
+    isFocused.value && "autocomplete--focused",
+    props.isDisabled && "autocomplete--disabled",
+    props.isInvalid && "autocomplete--invalid",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  blur: () => inputRef.value?.blur(),
+  el: inputRef,
+});
+</script>

package/src/components/Avatar/Avatar.scss

@@ -0,0 +1,191 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: avatar;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--avatar-background-default, $avatar-background-default);
+  color: var(--avatar-text-default, $avatar-text-default);
+  overflow: hidden;
+  user-select: none;
+  position: relative;
+}
+
+.#{$c}__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.#{$c}__label {
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.#{$c}__icon {
+  display: block;
+  color: inherit;
+}
+
+// Status indicator
+.#{$c}::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: var(--avatar-status-size-md, $avatar-status-size-md);
+  height: var(--avatar-status-size-md, $avatar-status-size-md);
+  border-radius: 50%;
+  border: 2px solid white;
+  display: none;
+}
+
+.#{$c}--status-online::after {
+  display: block;
+  background-color: var(--avatar-status-online, $avatar-status-online);
+}
+
+.#{$c}--status-offline::after {
+  display: block;
+  background-color: var(--avatar-status-offline, $avatar-status-offline);
+}
+
+.#{$c}--status-busy::after {
+  display: block;
+  background-color: var(--avatar-status-busy, $avatar-status-busy);
+}
+
+.#{$c}--status-away::after {
+  display: block;
+  background-color: var(--avatar-status-away, $avatar-status-away);
+}
+
+// Sizes
+.#{$c}--size-xs {
+  width: var(--avatar-size-xs, $avatar-size-xs);
+  height: var(--avatar-size-xs, $avatar-size-xs);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-xs, $avatar-fontSize-xs);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-xs, $avatar-iconSize-xs);
+  }
+}
+
+.#{$c}--size-sm,
+.#{$c}--size-small {
+  width: var(--avatar-size-sm, $avatar-size-sm);
+  height: var(--avatar-size-sm, $avatar-size-sm);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-sm, $avatar-fontSize-sm);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-sm, $avatar-iconSize-sm);
+  }
+}
+
+.#{$c}--size-md,
+.#{$c}--size-medium {
+  width: var(--avatar-size-md, $avatar-size-md);
+  height: var(--avatar-size-md, $avatar-size-md);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-md, $avatar-fontSize-md);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-md, $avatar-iconSize-md);
+  }
+}
+
+.#{$c}--size-lg,
+.#{$c}--size-large {
+  width: var(--avatar-size-lg, $avatar-size-lg);
+  height: var(--avatar-size-lg, $avatar-size-lg);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-lg, $avatar-fontSize-lg);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-lg, $avatar-iconSize-lg);
+  }
+}
+
+.#{$c}--size-xl,
+.#{$c}--size-xlarge {
+  width: var(--avatar-size-xl, $avatar-size-xl);
+  height: var(--avatar-size-xl, $avatar-size-xl);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-xl, $avatar-fontSize-xl);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-xl, $avatar-iconSize-xl);
+  }
+}
+
+.#{$c}--size-2xl {
+  width: var(--avatar-size-2xl, $avatar-size-2xl);
+  height: var(--avatar-size-2xl, $avatar-size-2xl);
+
+  .#{$c}__label {
+    font-size: var(--avatar-fontSize-2xl, $avatar-fontSize-2xl);
+  }
+
+  .#{$c}__icon {
+    font-size: var(--avatar-iconSize-2xl, $avatar-iconSize-2xl);
+  }
+}
+
+// Shapes
+.#{$c}--shape-square {
+  border-radius: var(--avatar-radius-square, $avatar-radius-square);
+}
+
+.#{$c}--shape-circle {
+  border-radius: var(--avatar-radius-circle, $avatar-radius-circle);
+}
+
+// Color variants
+.#{$c}--variant-default {
+  background-color: var(--avatar-background-default, $avatar-background-default);
+  color: var(--avatar-text-default, $avatar-text-default);
+}
+
+.#{$c}--variant-muted {
+  background-color: var(--avatar-background-muted, $avatar-background-muted);
+  color: var(--avatar-text-default, $avatar-text-default);
+}
+
+.#{$c}--variant-brand {
+  background-color: var(--avatar-background-brand, $avatar-background-brand);
+  color: var(--avatar-text-inverse, $avatar-text-inverse);
+}
+
+.#{$c}--variant-accent {
+  background-color: var(--avatar-background-accent, $avatar-background-accent);
+  color: var(--avatar-text-default, $avatar-text-default);
+}
+
+.#{$c}--variant-success {
+  background-color: var(--avatar-background-success, $avatar-background-success);
+  color: var(--avatar-text-inverse, $avatar-text-inverse);
+}
+
+.#{$c}--variant-warning {
+  background-color: var(--avatar-background-warning, $avatar-background-warning);
+  color: var(--avatar-text-default, $avatar-text-default);
+}
+
+.#{$c}--variant-error {
+  background-color: var(--avatar-background-error, $avatar-background-error);
+  color: var(--avatar-text-inverse, $avatar-text-inverse);
+}

package/src/components/Avatar/Avatar.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="avatar" :class="additionalClasses" role="img" :aria-label="ariaLabel || label || 'Avatar'">
+    <img
+      v-if="image && !imageError"
+      :src="image"
+      :alt="ariaLabel || label || 'avatar'"
+      class="avatar__image"
+      @error="onImageError"
+    />
+    <span v-else-if="label" class="avatar__label">{{ label }}</span>
+    <i v-else-if="icon" :class="icon" class="avatar__icon"></i>
+    <slot v-else />
+  </div>
+</template>
+
+<style src="./Avatar.scss"></style>
+
+<script setup lang="ts">
+import type { AvatarProps, AvatarEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpAvatar' });
+
+const props = withDefaults(defineProps<AvatarProps>(), {
+  size: "medium",
+  shape: "square",
+});
+
+const emit = defineEmits(["error"]);
+
+const imageError = ref(false);
+
+const onImageError = (event: Event) => {
+  imageError.value = true;
+  emit("error", event);
+};
+
+const additionalClasses = computed(() =>
+  [
+    `avatar--size-${props.size}`,
+    `avatar--shape-${props.shape}`,
+  ].join(" ")
+);
+</script>

package/src/components/Badge/Badge.scss

@@ -0,0 +1,84 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: badge;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--badge-fontWeight, $badge-fontWeight);
+  border-radius: var(--badge-radius, $badge-radius);
+  white-space: nowrap;
+  vertical-align: baseline;
+  line-height: 1;
+}
+
+// Sizes
+.#{$c}--size-sm {
+  min-height: var(--badge-size-sm, $badge-size-sm);
+  min-width: var(--badge-size-sm, $badge-size-sm);
+  padding: 0 var(--badge-padding-sm, $badge-padding-sm);
+  font-size: var(--badge-fontSize-sm, $badge-fontSize-sm);
+}
+
+.#{$c}--size-md {
+  min-height: var(--badge-size-md, $badge-size-md);
+  min-width: var(--badge-size-md, $badge-size-md);
+  padding: 0 var(--badge-padding-md, $badge-padding-md);
+  font-size: var(--badge-fontSize-md, $badge-fontSize-md);
+}
+
+.#{$c}--size-lg {
+  min-height: var(--badge-size-lg, $badge-size-lg);
+  min-width: var(--badge-size-lg, $badge-size-lg);
+  padding: 0 var(--badge-padding-lg, $badge-padding-lg);
+  font-size: var(--badge-fontSize-lg, $badge-fontSize-lg);
+}
+
+// Circle modifier for single characters
+.#{$c}--circle {
+  padding: 0;
+
+  &.#{$c}--size-sm {
+    width: var(--badge-size-sm, $badge-size-sm);
+    height: var(--badge-size-sm, $badge-size-sm);
+  }
+
+  &.#{$c}--size-md {
+    width: var(--badge-size-md, $badge-size-md);
+    height: var(--badge-size-md, $badge-size-md);
+  }
+
+  &.#{$c}--size-lg {
+    width: var(--badge-size-lg, $badge-size-lg);
+    height: var(--badge-size-lg, $badge-size-lg);
+  }
+}
+
+// Severities
+.#{$c}--severity-primary {
+  @include accent-gradient();
+  color: var(--badge-text-primary, $badge-text-primary);
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+.#{$c}--severity-success {
+  background-color: var(--badge-background-success, $badge-background-success);
+  color: var(--badge-text-success, $badge-text-success);
+}
+
+.#{$c}--severity-warning {
+  background-color: var(--badge-background-warning, $badge-background-warning);
+  color: var(--badge-text-warning, $badge-text-warning);
+}
+
+.#{$c}--severity-danger {
+  background-color: var(--badge-background-danger, $badge-background-danger);
+  color: var(--badge-text-danger, $badge-text-danger);
+}
+
+.#{$c}--severity-info {
+  background-color: var(--badge-background-info, $badge-background-info);
+  color: var(--badge-text-info, $badge-text-info);
+}