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

package/src/components/Editor/Editor.scss

@@ -0,0 +1,156 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: editor;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  min-height: var(--editor-minHeight, $editor-minHeight);
+  background-color: var(--editor-background-default, $editor-background-default);
+  border: var(--editor-border-width, $editor-border-width) solid var(--editor-border-color-default, $editor-border-color-default);
+  border-radius: var(--editor-radius, $editor-radius);
+  overflow: hidden;
+  transition: border-color 0.15s ease;
+
+  &:hover:not(.#{$c}--disabled) {
+    border-color: var(--editor-border-color-hover, $editor-border-color-hover);
+  }
+}
+
+// Toolbar
+.#{$c}__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--editor-toolbar-gap, $editor-toolbar-gap);
+  padding: var(--editor-toolbar-padding-y, $editor-toolbar-padding-y) var(--editor-toolbar-padding-x, $editor-toolbar-padding-x);
+  background-color: var(--editor-toolbar-background, $editor-toolbar-background);
+  border-bottom: 1px solid var(--editor-toolbar-border-color, $editor-toolbar-border-color);
+}
+
+.#{$c}__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--editor-button-size, $editor-button-size);
+  height: var(--editor-button-size, $editor-button-size);
+  padding: 0;
+  background-color: var(--editor-button-background-default, $editor-button-background-default);
+  border: none;
+  border-radius: var(--editor-button-radius, $editor-button-radius);
+  color: var(--editor-button-color-default, $editor-button-color-default);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--editor-button-background-hover, $editor-button-background-hover);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--editor-button-color-disabled, $editor-button-color-disabled);
+  }
+}
+
+.#{$c}__button--active {
+  background-color: var(--editor-button-background-active, $editor-button-background-active);
+  color: var(--editor-button-color-active, $editor-button-color-active);
+}
+
+.#{$c}__separator {
+  width: var(--editor-separator-width, $editor-separator-width);
+  height: 20px;
+  margin: 0 var(--editor-separator-margin, $editor-separator-margin);
+  background-color: var(--editor-separator-color, $editor-separator-color);
+}
+
+// Content area
+.#{$c}__content {
+  flex: 1;
+  min-height: 150px;
+  padding: var(--editor-content-padding, $editor-content-padding);
+  color: var(--editor-content-text-default, $editor-content-text-default);
+  font-size: var(--editor-content-fontSize, $editor-content-fontSize);
+  line-height: var(--editor-content-lineHeight, $editor-content-lineHeight);
+  outline: none;
+  overflow-y: auto;
+
+  &:empty::before {
+    content: attr(data-placeholder);
+    color: var(--editor-content-text-placeholder, $editor-content-text-placeholder);
+    pointer-events: none;
+  }
+
+  // Basic content styling
+  p {
+    margin: 0 0 1em 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  ul,
+  ol {
+    margin: 0 0 1em 0;
+    padding-left: 1.5em;
+  }
+
+  li {
+    margin-bottom: 0.25em;
+  }
+
+  a {
+    color: var(--editor-button-color-active, $editor-button-color-active);
+    text-decoration: underline;
+  }
+
+  strong,
+  b {
+    font-weight: 600;
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  u {
+    text-decoration: underline;
+  }
+
+  s,
+  strike {
+    text-decoration: line-through;
+  }
+}
+
+// States
+.#{$c}--focused {
+  outline: var(--editor-focus-ringWidth, $editor-focus-ringWidth) solid var(--editor-focus-ringColor, $editor-focus-ringColor);
+  outline-offset: var(--editor-focus-ringOffset, $editor-focus-ringOffset);
+  border-color: var(--editor-border-color-focus, $editor-border-color-focus);
+}
+
+.#{$c}--disabled {
+  background-color: var(--editor-background-disabled, $editor-background-disabled);
+  border-color: var(--editor-border-color-disabled, $editor-border-color-disabled);
+  cursor: not-allowed;
+
+  .#{$c}__content {
+    color: var(--editor-content-text-disabled, $editor-content-text-disabled);
+    pointer-events: none;
+  }
+
+  .#{$c}__toolbar {
+    opacity: 0.6;
+  }
+}
+
+.#{$c}--invalid {
+  border-color: var(--editor-border-color-error, $editor-border-color-error);
+
+  &.#{$c}--focused {
+    border-color: var(--editor-border-color-error, $editor-border-color-error);
+  }
+}

package/src/components/Editor/Editor.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="editor" :class="additionalClasses">
+    <!-- Toolbar -->
+    <div class="editor__toolbar">
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--active': activeFormats.bold }"
+        title="Bold"
+        :disabled="isDisabled"
+        @click="execCommand('bold')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M4 3H9C10.6569 3 12 4.34315 12 6C12 7.65685 10.6569 9 9 9H4V3Z" stroke="currentColor" stroke-width="1.5" />
+          <path d="M4 9H10C11.6569 9 13 10.3431 13 12C13 13.6569 11.6569 15 10 15H4V9Z" stroke="currentColor" stroke-width="1.5" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--active': activeFormats.italic }"
+        title="Italic"
+        :disabled="isDisabled"
+        @click="execCommand('italic')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M10 3H14M6 13H10M12 3L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--active': activeFormats.underline }"
+        title="Underline"
+        :disabled="isDisabled"
+        @click="execCommand('underline')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M4 3V8C4 10.2091 5.79086 12 8 12C10.2091 12 12 10.2091 12 8V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M3 15H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--active': activeFormats.strikeThrough }"
+        title="Strikethrough"
+        :disabled="isDisabled"
+        @click="execCommand('strikeThrough')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M3 8H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M11 4C11 4 10 3 8 3C6 3 4.5 4.5 4.5 6C4.5 7 5 7.5 6 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M5 12C5 12 6 13 8 13C10 13 11.5 11.5 11.5 10C11.5 9.5 11.3 9 11 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <span class="editor__separator" />
+
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--active': activeFormats.insertUnorderedList }"
+        title="Bullet List"
+        :disabled="isDisabled"
+        @click="execCommand('insertUnorderedList')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <circle cx="3" cy="4" r="1" fill="currentColor" />
+          <circle cx="3" cy="8" r="1" fill="currentColor" />
+          <circle cx="3" cy="12" r="1" fill="currentColor" />
+          <path d="M6 4H14M6 8H14M6 12H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--active': activeFormats.insertOrderedList }"
+        title="Numbered List"
+        :disabled="isDisabled"
+        @click="execCommand('insertOrderedList')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <text x="2" y="5" fill="currentColor" font-size="5" font-weight="500">1.</text>
+          <text x="2" y="9" fill="currentColor" font-size="5" font-weight="500">2.</text>
+          <text x="2" y="13" fill="currentColor" font-size="5" font-weight="500">3.</text>
+          <path d="M6 4H14M6 8H14M6 12H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <span class="editor__separator" />
+
+      <button
+        type="button"
+        class="editor__button"
+        title="Link"
+        :disabled="isDisabled"
+        @click="insertLink"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M6.5 9.5L9.5 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M9 10.5L10.5 9C11.8807 7.61929 11.8807 5.38071 10.5 4L10 3.5C8.61929 2.11929 6.38071 2.11929 5 3.5L3.5 5C2.11929 6.38071 2.11929 8.61929 3.5 10L4 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M7 5.5L5.5 7C4.11929 8.38071 4.11929 10.6193 5.5 12L6 12.5C7.38071 13.8807 9.61929 13.8807 11 12.5L12.5 11C13.8807 9.61929 13.8807 7.38071 12.5 6L12 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <span class="editor__separator" />
+
+      <button
+        type="button"
+        class="editor__button"
+        title="Clear Formatting"
+        :disabled="isDisabled"
+        @click="execCommand('removeFormat')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M3 3L13 13M13 3L3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Content area -->
+    <div
+      ref="contentRef"
+      class="editor__content"
+      contenteditable
+      :data-placeholder="placeholder"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+      @keyup="updateActiveFormats"
+      @mouseup="updateActiveFormats"
+    />
+  </div>
+</template>
+
+<style src="./Editor.scss"></style>
+
+<script setup lang="ts">
+import type { EditorProps, EditorEmits } from '../../types';
+import { computed, ref, watch, onMounted, nextTick } from "vue";
+
+defineOptions({ name: 'FtpEditor' });
+
+const props = withDefaults(defineProps<EditorProps>(), {
+  modelValue: "",
+  placeholder: "Enter text...",
+  isDisabled: false,
+  isInvalid: false,
+});
+
+const emit = defineEmits(["update:modelValue", "focus", "blur", "change"]);
+
+const contentRef = ref<HTMLElement | null>(null);
+const isFocused = ref(false);
+const activeFormats = ref({
+  bold: false,
+  italic: false,
+  underline: false,
+  strikeThrough: false,
+  insertUnorderedList: false,
+  insertOrderedList: false,
+});
+
+const execCommand = (command: any, value: string | undefined = undefined) => {
+  if (props.isDisabled) return;
+  contentRef.value?.focus();
+  document.execCommand(command, false, value);
+  updateActiveFormats();
+  emitValue();
+};
+
+const insertLink = () => {
+  if (props.isDisabled) return;
+  const url = prompt("Enter URL:");
+  if (url) {
+    execCommand("createLink", url);
+  }
+};
+
+const updateActiveFormats = () => {
+  activeFormats.value = {
+    bold: document.queryCommandState("bold"),
+    italic: document.queryCommandState("italic"),
+    underline: document.queryCommandState("underline"),
+    strikeThrough: document.queryCommandState("strikeThrough"),
+    insertUnorderedList: document.queryCommandState("insertUnorderedList"),
+    insertOrderedList: document.queryCommandState("insertOrderedList"),
+  };
+};
+
+const onInput = () => {
+  emitValue();
+};
+
+const emitValue = () => {
+  const html = contentRef.value?.innerHTML || "";
+  emit("update:modelValue", html);
+  emit("change", { value: html });
+};
+
+const onFocus = (event: FocusEvent) => {
+  isFocused.value = true;
+  emit("focus", { originalEvent: event });
+};
+
+const onBlur = (event: FocusEvent) => {
+  isFocused.value = false;
+  emit("blur", { originalEvent: event });
+};
+
+// Sync content with modelValue
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (contentRef.value && contentRef.value.innerHTML !== newValue) {
+      contentRef.value.innerHTML = newValue;
+    }
+  }
+);
+
+onMounted(() => {
+  if (contentRef.value && props.modelValue) {
+    contentRef.value.innerHTML = props.modelValue;
+  }
+});
+
+const additionalClasses = computed(() =>
+  [
+    isFocused.value && "editor--focused",
+    props.isDisabled && "editor--disabled",
+    props.isInvalid && "editor--invalid",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+defineExpose({
+  focus: () => contentRef.value?.focus(),
+  blur: () => contentRef.value?.blur(),
+  getContent: () => contentRef.value?.innerHTML || "",
+  setContent: (html: any) => {
+    if (contentRef.value) {
+      contentRef.value.innerHTML = html;
+      emitValue();
+    }
+  },
+});
+</script>

package/src/components/FAQ/FAQ.scss

@@ -0,0 +1,24 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: faq;
+
+.#{$c} {
+  width: 100%;
+  max-width: 800px;
+}
+
+.#{$c}--separated {
+  .accordion-tab {
+    margin-bottom: 0.75rem;
+    background-color: $surface-panel;
+    border-radius: $radius-default;
+    border: 1px solid $border-subtle;
+    overflow: hidden;
+  }
+}
+
+.#{$c}--bordered {
+  border: 1px solid $border-subtle;
+  border-radius: $radius-large;
+  overflow: hidden;
+}

package/src/components/FAQ/FAQ.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="faq" :class="`faq--${variant}`">
+    <Accordion :multiple="true">
+      <AccordionTab
+        v-for="(item, i) in items"
+        :key="i"
+        :header="item.question"
+      >
+        <div v-html="item.answer" />
+      </AccordionTab>
+    </Accordion>
+  </div>
+</template>
+
+<style src="./FAQ.scss"></style>
+
+<script setup lang="ts">
+import type { FAQProps } from '../../types';
+import Accordion from '../Accordion/Accordion.vue';
+import AccordionTab from '../Accordion/AccordionTab.vue';
+
+defineOptions({ name: 'FtpFAQ' });
+
+withDefaults(defineProps<FAQProps>(), {
+  items: () => [],
+  variant: 'default',
+});
+</script>

package/src/components/FeatureGrid/FeatureGrid.scss

@@ -0,0 +1,92 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: feature-grid;
+
+.#{$c} {
+  display: grid;
+  gap: 2rem;
+  width: 100%;
+}
+
+.#{$c}--cols-2 { grid-template-columns: repeat(2, 1fr); }
+.#{$c}--cols-3 { grid-template-columns: repeat(3, 1fr); }
+.#{$c}--cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+@media (max-width: 768px) {
+  .#{$c} { grid-template-columns: 1fr !important; }
+}
+
+.#{$c}__item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.#{$c}__icon {
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: $radius-rounded;
+
+  i {
+    @include accent-gradient-text();
+  }
+}
+
+.#{$c}__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: $text-heading;
+  margin: 0;
+}
+
+.#{$c}__description {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: $text-secondary;
+  margin: 0;
+}
+
+// Card variant
+.#{$c}--card .#{$c}__item {
+  background-color: $surface-panel;
+  border: 1px solid $border-subtle;
+  border-radius: $radius-large;
+  padding: 2rem;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+
+  &:hover {
+    box-shadow: $shadow-s;
+    border-color: $border-default;
+  }
+}
+
+// Minimal variant
+.#{$c}--minimal .#{$c}__item {
+  padding: 1rem 0;
+}
+
+// Icon-top variant
+.#{$c}--icon-top {
+  text-align: center;
+
+  .#{$c}__item {
+    align-items: center;
+    background-color: $surface-panel;
+    border: 1px solid $border-subtle;
+    border-radius: $radius-large;
+    padding: 2.5rem 2rem;
+  }
+
+  .#{$c}__icon {
+    width: 4rem;
+    height: 4rem;
+    font-size: 2.5rem;
+    background-color: $surface-muted;
+    border-radius: $radius-rounded;
+  }
+}

package/src/components/FeatureGrid/FeatureGrid.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="feature-grid" :class="additionalClasses">
+    <slot>
+      <div
+        v-for="(feature, index) in features"
+        :key="index"
+        class="feature-grid__item"
+      >
+        <div v-if="feature.icon" class="feature-grid__icon">
+          <i :class="feature.icon" aria-hidden="true" />
+        </div>
+        <h3 class="feature-grid__title">{{ feature.title }}</h3>
+        <p class="feature-grid__description">{{ feature.description }}</p>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<style src="./FeatureGrid.scss"></style>
+
+<script setup lang="ts">
+import type { FeatureGridProps } from '../../types';
+import { computed } from 'vue';
+
+defineOptions({ name: 'FtpFeatureGrid' });
+
+const props = withDefaults(defineProps<FeatureGridProps>(), {
+  columns: 3,
+  variant: 'card',
+  features: () => [],
+});
+
+const additionalClasses = computed(() =>
+  [
+    `feature-grid--cols-${props.columns}`,
+    `feature-grid--${props.variant}`,
+  ].join(' ')
+);
+</script>

package/src/components/FieldSet/FieldSet.scss

@@ -0,0 +1,97 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: field-set;
+
+.#{$c} {
+  margin: 0;
+  padding: 0;
+  background: var(--field-set-background, $field-set-background);
+  border: var(--field-set-border-width, $field-set-border-width) solid var(--field-set-border-color, $field-set-border-color);
+  border-radius: var(--field-set-border-radius, $field-set-border-radius);
+}
+
+.#{$c}__legend {
+  padding: 0;
+  margin-left: var(--field-set-legend-padding-x, $field-set-legend-padding-x);
+}
+
+.#{$c}__legend-text,
+.#{$c}__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--field-set-toggle-gap, $field-set-toggle-gap);
+  padding: var(--field-set-legend-padding-y, $field-set-legend-padding-y) var(--field-set-legend-padding-x, $field-set-legend-padding-x);
+  background: var(--field-set-legend-background, $field-set-legend-background);
+  color: var(--field-set-legend-color, $field-set-legend-color);
+  font-size: var(--field-set-legend-fontSize, $field-set-legend-fontSize);
+  font-weight: var(--field-set-legend-fontWeight, $field-set-legend-fontWeight);
+  border: var(--field-set-legend-border-width, $field-set-legend-border-width) solid var(--field-set-legend-border-color, $field-set-legend-border-color);
+  border-radius: var(--field-set-legend-border-radius, $field-set-legend-border-radius);
+}
+
+.#{$c}__toggle {
+  cursor: pointer;
+  font-family: inherit;
+  transition: color var(--field-set-transition-duration, $field-set-transition-duration) ease;
+
+  &:hover {
+    .#{$c}__toggle-icon {
+      color: var(--field-set-toggle-icon-color-hover, $field-set-toggle-icon-color-hover);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--field-set-border-color, $field-set-border-color);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__toggle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--field-set-toggle-icon-size, $field-set-toggle-icon-size);
+  height: var(--field-set-toggle-icon-size, $field-set-toggle-icon-size);
+  color: var(--field-set-toggle-icon-color-default, $field-set-toggle-icon-color-default);
+  transition: transform var(--field-set-transition-duration, $field-set-transition-duration) ease,
+              color var(--field-set-transition-duration, $field-set-transition-duration) ease;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__content-wrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--field-set-transition-duration, $field-set-transition-duration) ease;
+}
+
+.#{$c}__content {
+  padding: var(--field-set-padding, $field-set-padding);
+  overflow: hidden;
+}
+
+// Toggleable variant
+.#{$c}--toggleable {
+  .#{$c}__legend {
+    margin-bottom: 0;
+  }
+}
+
+// Collapsed state
+.#{$c}--collapsed {
+  .#{$c}__toggle-icon {
+    transform: rotate(-90deg);
+  }
+
+  .#{$c}__content-wrapper {
+    grid-template-rows: 0fr;
+  }
+
+  .#{$c}__content {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}