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

package/src/components/Terminal/Terminal.scss

@@ -0,0 +1,80 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: terminal;
+
+.#{$c} {
+  background-color: var(--terminal-background, $terminal-background);
+  border: var(--terminal-border-width, $terminal-border-width) solid var(--terminal-border-color, $terminal-border-color);
+  border-radius: var(--terminal-border-radius, $terminal-border-radius);
+  padding: var(--terminal-padding, $terminal-padding);
+  font-family: var(--terminal-font-family, $terminal-font-family);
+  font-size: var(--terminal-font-size, $terminal-font-size);
+  line-height: var(--terminal-font-lineHeight, $terminal-font-lineHeight);
+  color: var(--terminal-text-color, $terminal-text-color);
+  cursor: text;
+  overflow: hidden;
+}
+
+.#{$c}__content {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.#{$c}__welcome {
+  color: var(--terminal-welcome-color, $terminal-welcome-color);
+  margin-bottom: var(--terminal-welcome-marginBottom, $terminal-welcome-marginBottom);
+  white-space: pre-wrap;
+}
+
+.#{$c}__command {
+  margin-bottom: var(--terminal-command-gap, $terminal-command-gap);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.#{$c}__line {
+  display: flex;
+  align-items: center;
+  gap: var(--terminal-prompt-gap, $terminal-prompt-gap);
+}
+
+.#{$c}__line--input {
+  margin-top: var(--terminal-command-gap, $terminal-command-gap);
+}
+
+.#{$c}__prompt {
+  color: var(--terminal-prompt-color, $terminal-prompt-color);
+  flex-shrink: 0;
+  font-weight: 600;
+}
+
+.#{$c}__text {
+  color: var(--terminal-text-color, $terminal-text-color);
+}
+
+.#{$c}__response {
+  color: var(--terminal-response-color, $terminal-response-color);
+  padding-left: calc(1ch + var(--terminal-prompt-gap, $terminal-prompt-gap));
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.#{$c}__input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--terminal-text-color, $terminal-text-color);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  padding: 0;
+  margin: 0;
+  caret-color: var(--terminal-input-caretColor, $terminal-input-caretColor);
+
+  &::placeholder {
+    color: var(--terminal-welcome-color, $terminal-welcome-color);
+  }
+}

package/src/components/Terminal/Terminal.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="terminal" @click="focusInput">
+    <div v-if="welcomeMessage" class="terminal__welcome">
+      {{ welcomeMessage }}
+    </div>
+    <div class="terminal__content" ref="contentRef">
+      <div
+        v-for="(cmd, index) in commands"
+        :key="index"
+        class="terminal__command"
+      >
+        <div class="terminal__line">
+          <span class="terminal__prompt">{{ prompt }}</span>
+          <span class="terminal__text">{{ cmd.text }}</span>
+        </div>
+        <div
+          v-if="cmd.response"
+          class="terminal__response"
+          aria-live="polite"
+        >
+          {{ cmd.response }}
+        </div>
+      </div>
+      <div class="terminal__line terminal__line--input">
+        <span class="terminal__prompt">{{ prompt }}</span>
+        <input
+          ref="inputRef"
+          v-model="currentCommand"
+          type="text"
+          class="terminal__input"
+          :aria-label="ariaLabel"
+          @keydown.enter="executeCommand"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./Terminal.scss"></style>
+
+<script setup lang="ts">
+import type { TerminalProps, TerminalEmits } from '../../types';
+import { ref, nextTick, onMounted } from "vue";
+
+defineOptions({ name: 'FtpTerminal' });
+
+const props = withDefaults(defineProps<TerminalProps>(), {
+  prompt: "$",
+  welcomeMessage: null,
+  ariaLabel: "Terminal input",
+});
+
+const emit = defineEmits(["command"]);
+
+const commands = ref<any[]>([]);
+const currentCommand = ref("");
+const inputRef = ref<HTMLInputElement | null>(null);
+const contentRef = ref<HTMLElement | null>(null);
+
+const focusInput = () => {
+  inputRef.value?.focus();
+};
+
+const executeCommand = () => {
+  const text = currentCommand.value.trim();
+  if (!text) return;
+
+  const command = {
+    text,
+    response: null
+  };
+
+  commands.value.push(command);
+  currentCommand.value = "";
+
+  emit("command", text, (response: any) => {
+    command.response = response;
+  });
+
+  nextTick(() => {
+    scrollToBottom();
+  });
+};
+
+const scrollToBottom = () => {
+  if (contentRef.value) {
+    contentRef.value.scrollTop = contentRef.value.scrollHeight;
+  }
+};
+
+const addResponse = (response: any) => {
+  if (commands.value.length > 0) {
+    commands.value[commands.value.length - 1].response = response;
+    nextTick(() => {
+      scrollToBottom();
+    });
+  }
+};
+
+const clear = () => {
+  commands.value = [];
+};
+
+onMounted(() => {
+  focusInput();
+});
+
+defineExpose({
+  addResponse,
+  clear,
+  focusInput
+});
+</script>

package/src/components/Testimonial/Testimonial.scss

@@ -0,0 +1,80 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: testimonial;
+
+.#{$c} {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.#{$c}--card {
+  background-color: $surface-panel;
+  border: 1px solid $border-subtle;
+  border-radius: $radius-large;
+  padding: 2rem;
+}
+
+.#{$c}--minimal {
+  padding: 1rem 0;
+  border-left: 3px solid;
+  border-image: linear-gradient(180deg, $accent-gradient-start, $accent-gradient-end) 1;
+  padding-left: 1.5rem;
+}
+
+.#{$c}__rating {
+  display: flex;
+  gap: 0.125rem;
+}
+
+.#{$c}__star {
+  font-size: 1.125rem;
+  color: $text-muted;
+}
+
+.#{$c}__star--filled {
+  @include accent-gradient-text();
+}
+
+.#{$c}__quote {
+  font-size: 1.0625rem;
+  line-height: 1.7;
+  color: $text-secondary;
+  margin: 0;
+  font-style: italic;
+
+  &::before { content: "\201C"; }
+  &::after { content: "\201D"; }
+}
+
+.#{$c}__author {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+}
+
+.#{$c}__avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: $radius-pill;
+  object-fit: cover;
+}
+
+.#{$c}__info {
+  display: flex;
+  flex-direction: column;
+}
+
+.#{$c}__name {
+  font-style: normal;
+  font-weight: 600;
+  color: $text-heading;
+  font-size: 0.9375rem;
+}
+
+.#{$c}__role {
+  font-size: 0.8125rem;
+  color: $text-muted;
+}

package/src/components/Testimonial/Testimonial.vue

@@ -0,0 +1,29 @@
+<template>
+  <blockquote class="testimonial" :class="`testimonial--${variant}`">
+    <div v-if="rating" class="testimonial__rating" :aria-label="`${rating} out of 5 stars`">
+      <span v-for="i in 5" :key="i" class="testimonial__star" :class="{ 'testimonial__star--filled': i <= rating }">★</span>
+    </div>
+    <p class="testimonial__quote">{{ quote }}</p>
+    <footer class="testimonial__author">
+      <img v-if="avatar" :src="avatar" :alt="author" class="testimonial__avatar" />
+      <div class="testimonial__info">
+        <cite class="testimonial__name">{{ author }}</cite>
+        <span v-if="role || company" class="testimonial__role">
+          {{ role }}<template v-if="role && company">, </template>{{ company }}
+        </span>
+      </div>
+    </footer>
+  </blockquote>
+</template>
+
+<style src="./Testimonial.scss"></style>
+
+<script setup lang="ts">
+import type { TestimonialProps } from '../../types';
+
+defineOptions({ name: 'FtpTestimonial' });
+
+withDefaults(defineProps<TestimonialProps>(), {
+  variant: 'card',
+});
+</script>

package/src/components/Textarea/Textarea.scss

@@ -0,0 +1,65 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: textarea;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+  min-height: var(--textarea-minHeight, $textarea-minHeight);
+  padding: var(--textarea-padding-y, $textarea-padding-y) var(--textarea-padding-x, $textarea-padding-x);
+  font-family: inherit;
+  font-size: var(--textarea-fontSize, $textarea-fontSize);
+  line-height: var(--textarea-lineHeight, $textarea-lineHeight);
+  color: var(--textarea-text-default, $textarea-text-default);
+  background-color: var(--textarea-background-default, $textarea-background-default);
+  border: var(--textarea-border-width, $textarea-border-width) solid var(--textarea-border-color-default, $textarea-border-color-default);
+  border-radius: var(--textarea-radius, $textarea-radius);
+  resize: vertical;
+  transition: border-color 0.15s ease, outline 0.15s ease;
+
+  &::placeholder {
+    color: var(--textarea-text-placeholder, $textarea-text-placeholder);
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--textarea-border-color-hover, $textarea-border-color-hover);
+  }
+
+  &:focus {
+    outline: var(--textarea-focus-ringWidth, $textarea-focus-ringWidth) solid var(--textarea-focus-ringColor, $textarea-focus-ringColor);
+    outline-offset: var(--textarea-focus-ringOffset, $textarea-focus-ringOffset);
+    border-color: var(--textarea-border-color-focus, $textarea-border-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--textarea-background-disabled, $textarea-background-disabled);
+    border-color: var(--textarea-border-color-disabled, $textarea-border-color-disabled);
+    color: var(--textarea-text-disabled, $textarea-text-disabled);
+    resize: none;
+  }
+}
+
+// Disabled state modifier
+.#{$c}--disabled {
+  cursor: not-allowed;
+  background-color: var(--textarea-background-disabled, $textarea-background-disabled);
+  border-color: var(--textarea-border-color-disabled, $textarea-border-color-disabled);
+  color: var(--textarea-text-disabled, $textarea-text-disabled);
+  resize: none;
+}
+
+// Invalid state modifier
+.#{$c}--invalid {
+  border-color: var(--textarea-border-color-error, $textarea-border-color-error);
+
+  &:focus {
+    border-color: var(--textarea-border-color-error, $textarea-border-color-error);
+  }
+}
+
+// Auto-resize modifier
+.#{$c}--auto-resize {
+  resize: none;
+  overflow: hidden;
+}

package/src/components/Textarea/Textarea.vue

@@ -0,0 +1,101 @@
+<template>
+  <textarea
+    ref="textareaRef"
+    class="textarea"
+    :class="additionalClasses"
+    :value="modelValue"
+    :rows="rows"
+    :cols="cols"
+    :placeholder="placeholder"
+    :disabled="isDisabled"
+    :aria-invalid="isInvalid || undefined"
+    :aria-describedby="ariaDescribedby || undefined"
+    @input="onInput"
+  ></textarea>
+</template>
+
+<style src="./Textarea.scss"></style>
+
+<script setup lang="ts">
+import type { TextareaProps, TextareaEmits } from '../../types';
+import { computed, ref, watch, onMounted, onUpdated, onBeforeUnmount, nextTick } from "vue";
+
+defineOptions({ name: 'FtpTextarea' });
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  modelValue: "",
+  rows: 3,
+  cols: undefined,
+  placeholder: "",
+  isDisabled: false,
+  isInvalid: false,
+  autoResize: false,
+});
+
+const emit = defineEmits(["update:modelValue", "input"]);
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+let resizeObserver: ResizeObserver | null = null;
+
+const resize = () => {
+  if (!textareaRef.value || !props.autoResize) return;
+
+  const textarea = textareaRef.value;
+  textarea.style.height = "auto";
+  textarea.style.height = `${textarea.scrollHeight}px`;
+};
+
+const onInput = (event: Event) => {
+  const value = (event.target as HTMLTextAreaElement).value;
+  emit("update:modelValue", value);
+  emit("input", { value, originalEvent: event });
+
+  if (props.autoResize) {
+    nextTick(resize);
+  }
+};
+
+const additionalClasses = computed(() =>
+  [
+    props.isDisabled && "textarea--disabled",
+    props.isInvalid && "textarea--invalid",
+    props.autoResize && "textarea--auto-resize",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+onMounted(() => {
+  if (props.autoResize) {
+    resize();
+    resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(resize);
+    });
+    if (textareaRef.value) {
+      resizeObserver.observe(textareaRef.value);
+    }
+  }
+});
+
+onUpdated(() => {
+  if (props.autoResize) {
+    resize();
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+});
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.autoResize) {
+      nextTick(resize);
+    }
+  }
+);
+</script>

package/src/components/TieredMenu/TieredMenu.scss

@@ -0,0 +1,146 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: tieredmenu;
+
+.#{$c} {
+  min-width: var(--tieredmenu-minWidth, $tieredmenu-minWidth);
+  background-color: var(--tieredmenu-background, $tieredmenu-background);
+  padding: var(--tieredmenu-padding, $tieredmenu-padding);
+  border: var(--tieredmenu-border-width, $tieredmenu-border-width) solid var(--tieredmenu-border-color, $tieredmenu-border-color);
+  border-radius: var(--tieredmenu-border-radius, $tieredmenu-border-radius);
+}
+
+.#{$c}--popup {
+  position: absolute;
+  z-index: 1000;
+  box-shadow: var(--tieredmenu-shadow, $tieredmenu-shadow);
+}
+
+.#{$c}__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.#{$c}__item {
+  position: relative;
+}
+
+.#{$c}__link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--tieredmenu-item-gap, $tieredmenu-item-gap);
+  padding: var(--tieredmenu-item-padding, $tieredmenu-item-padding);
+  background-color: var(--tieredmenu-item-background-default, $tieredmenu-item-background-default);
+  color: var(--tieredmenu-item-color-default, $tieredmenu-item-color-default);
+  border: none;
+  border-radius: var(--tieredmenu-item-borderRadius, $tieredmenu-item-borderRadius);
+  text-decoration: none;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--tieredmenu-transition-duration, $tieredmenu-transition-duration) ease,
+              color var(--tieredmenu-transition-duration, $tieredmenu-transition-duration) ease;
+
+  &:hover:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--tieredmenu-item-background-hover, $tieredmenu-item-background-hover);
+    color: var(--tieredmenu-item-color-hover, $tieredmenu-item-color-hover);
+
+    .#{$c}__icon {
+      color: var(--tieredmenu-icon-color-hover, $tieredmenu-icon-color-hover);
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--tieredmenu-item-color-active, $tieredmenu-item-color-active);
+    outline-offset: -2px;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    color: var(--tieredmenu-item-color-disabled, $tieredmenu-item-color-disabled);
+    pointer-events: none;
+  }
+}
+
+.#{$c}__item--active > .#{$c}__link {
+  background-color: var(--tieredmenu-item-background-active, $tieredmenu-item-background-active);
+  color: var(--tieredmenu-item-color-active, $tieredmenu-item-color-active);
+}
+
+.#{$c}__item--disabled > .#{$c}__link {
+  cursor: not-allowed;
+  color: var(--tieredmenu-item-color-disabled, $tieredmenu-item-color-disabled);
+  pointer-events: none;
+}
+
+.#{$c}__icon {
+  width: var(--tieredmenu-icon-size, $tieredmenu-icon-size);
+  height: var(--tieredmenu-icon-size, $tieredmenu-icon-size);
+  color: var(--tieredmenu-icon-color-default, $tieredmenu-icon-color-default);
+  flex-shrink: 0;
+  transition: color var(--tieredmenu-transition-duration, $tieredmenu-transition-duration) ease;
+}
+
+.#{$c}__label {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.#{$c}__chevron {
+  width: 12px;
+  height: 12px;
+  margin-left: auto;
+  color: var(--tieredmenu-icon-color-default, $tieredmenu-icon-color-default);
+  flex-shrink: 0;
+  opacity: 0.6;
+}
+
+// Submenu (flyout)
+.#{$c}__submenu {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  margin-left: var(--tieredmenu-submenu-offset, $tieredmenu-submenu-offset);
+  min-width: var(--tieredmenu-minWidth, $tieredmenu-minWidth);
+  margin: 0;
+  padding: var(--tieredmenu-padding, $tieredmenu-padding);
+  list-style: none;
+  background-color: var(--tieredmenu-background, $tieredmenu-background);
+  border: var(--tieredmenu-border-width, $tieredmenu-border-width) solid var(--tieredmenu-border-color, $tieredmenu-border-color);
+  border-radius: var(--tieredmenu-border-radius, $tieredmenu-border-radius);
+  box-shadow: var(--tieredmenu-shadow, $tieredmenu-shadow);
+  z-index: 1001;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(-4px);
+  transition: opacity var(--tieredmenu-transition-duration, $tieredmenu-transition-duration) ease,
+              visibility var(--tieredmenu-transition-duration, $tieredmenu-transition-duration) ease,
+              transform var(--tieredmenu-transition-duration, $tieredmenu-transition-duration) ease;
+}
+
+.#{$c}__submenu--visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+
+.#{$c}__item--submenu-open > .#{$c}__submenu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(0);
+}
+
+// Separator
+.#{$c}__separator {
+  height: 1px;
+  margin: var(--tieredmenu-separator-margin, $tieredmenu-separator-margin) 0;
+  background-color: var(--tieredmenu-separator-color, $tieredmenu-separator-color);
+}