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

package/src/components/ScrollPanel/ScrollPanel.vue

@@ -0,0 +1,284 @@
+<template>
+  <div
+    ref="containerRef"
+    class="scroll-panel"
+    :style="containerStyle"
+  >
+    <div
+      ref="contentRef"
+      class="scroll-panel__content"
+      @scroll="onScroll"
+    >
+      <slot></slot>
+    </div>
+
+    <!-- Vertical scrollbar -->
+    <div
+      v-if="showVerticalScrollbar"
+      class="scroll-panel__bar scroll-panel__bar--vertical"
+      :class="{ 'scroll-panel__bar--dragging': isDraggingY }"
+    >
+      <div
+        ref="thumbYRef"
+        class="scroll-panel__thumb"
+        :style="thumbYStyle"
+        @mousedown="onThumbYMouseDown"
+        role="scrollbar"
+        aria-orientation="vertical"
+        :aria-valuenow="scrollYPercent"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        tabindex="0"
+        @keydown="onThumbYKeyDown"
+      ></div>
+    </div>
+
+    <!-- Horizontal scrollbar -->
+    <div
+      v-if="showHorizontalScrollbar"
+      class="scroll-panel__bar scroll-panel__bar--horizontal"
+      :class="{ 'scroll-panel__bar--dragging': isDraggingX }"
+    >
+      <div
+        ref="thumbXRef"
+        class="scroll-panel__thumb"
+        :style="thumbXStyle"
+        @mousedown="onThumbXMouseDown"
+        role="scrollbar"
+        aria-orientation="horizontal"
+        :aria-valuenow="scrollXPercent"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        tabindex="0"
+        @keydown="onThumbXKeyDown"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style src="./ScrollPanel.scss"></style>
+
+<script setup lang="ts">
+import type { ScrollPanelProps } from '../../types';
+import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
+
+defineOptions({ name: 'FtpScrollPanel' });
+
+const props = withDefaults(defineProps<ScrollPanelProps>(), {
+  style: () => ({}),
+  step: 40,
+});
+
+const containerRef = ref<HTMLElement | null>(null);
+const contentRef = ref<HTMLElement | null>(null);
+const thumbYRef = ref<HTMLElement | null>(null);
+const thumbXRef = ref<HTMLElement | null>(null);
+
+// Scroll state
+const scrollYPercent = ref(0);
+const scrollXPercent = ref(0);
+const thumbYHeight = ref(0);
+const thumbXWidth = ref(0);
+const showVerticalScrollbar = ref(false);
+const showHorizontalScrollbar = ref(false);
+
+// Drag state
+const isDraggingY = ref(false);
+const isDraggingX = ref(false);
+const dragStartY = ref(0);
+const dragStartX = ref(0);
+const scrollStartY = ref(0);
+const scrollStartX = ref(0);
+
+const containerStyle = computed(() => {
+  if (typeof props.style === "string") {
+    return props.style;
+  }
+  return props.style;
+});
+
+const thumbYStyle = computed(() => ({
+  height: `${thumbYHeight.value}%`,
+  top: `${scrollYPercent.value}%`,
+}));
+
+const thumbXStyle = computed(() => ({
+  width: `${thumbXWidth.value}%`,
+  left: `${scrollXPercent.value}%`,
+}));
+
+const updateScrollbars = () => {
+  if (!contentRef.value) return;
+
+  const content = contentRef.value;
+  const { scrollHeight, clientHeight, scrollWidth, clientWidth, scrollTop, scrollLeft } = content;
+
+  // Vertical scrollbar
+  const hasVerticalScroll = scrollHeight > clientHeight;
+  showVerticalScrollbar.value = hasVerticalScroll;
+
+  if (hasVerticalScroll) {
+    const viewableRatio = clientHeight / scrollHeight;
+    thumbYHeight.value = Math.max(viewableRatio * 100, 10); // Min 10%
+    const scrollableHeight = scrollHeight - clientHeight;
+    const scrollRatio = scrollableHeight > 0 ? scrollTop / scrollableHeight : 0;
+    scrollYPercent.value = scrollRatio * (100 - thumbYHeight.value);
+  }
+
+  // Horizontal scrollbar
+  const hasHorizontalScroll = scrollWidth > clientWidth;
+  showHorizontalScrollbar.value = hasHorizontalScroll;
+
+  if (hasHorizontalScroll) {
+    const viewableRatio = clientWidth / scrollWidth;
+    thumbXWidth.value = Math.max(viewableRatio * 100, 10); // Min 10%
+    const scrollableWidth = scrollWidth - clientWidth;
+    const scrollRatio = scrollableWidth > 0 ? scrollLeft / scrollableWidth : 0;
+    scrollXPercent.value = scrollRatio * (100 - thumbXWidth.value);
+  }
+};
+
+const onScroll = () => {
+  updateScrollbars();
+};
+
+// Vertical thumb dragging
+const onThumbYMouseDown = (event: MouseEvent) => {
+  event.preventDefault();
+  isDraggingY.value = true;
+  dragStartY.value = event.pageY;
+  scrollStartY.value = contentRef.value!.scrollTop;
+
+  document.addEventListener("mousemove", onThumbYMouseMove);
+  document.addEventListener("mouseup", onThumbYMouseUp);
+};
+
+const onThumbYMouseMove = (event: MouseEvent) => {
+  if (!isDraggingY.value || !contentRef.value || !containerRef.value) return;
+
+  const container = containerRef.value;
+  const content = contentRef.value;
+  const deltaY = event.pageY - dragStartY.value;
+  const trackHeight = container.clientHeight;
+  const scrollableHeight = content.scrollHeight - content.clientHeight;
+  const thumbHeightPx = (thumbYHeight.value / 100) * trackHeight;
+  const scrollRatio = deltaY / (trackHeight - thumbHeightPx);
+
+  content.scrollTop = scrollStartY.value + scrollRatio * scrollableHeight;
+};
+
+const onThumbYMouseUp = () => {
+  isDraggingY.value = false;
+  document.removeEventListener("mousemove", onThumbYMouseMove);
+  document.removeEventListener("mouseup", onThumbYMouseUp);
+};
+
+const onThumbYKeyDown = (event: KeyboardEvent) => {
+  if (!contentRef.value) return;
+
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    contentRef.value!.scrollTop -= props.step;
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    contentRef.value!.scrollTop += props.step;
+  }
+};
+
+// Horizontal thumb dragging
+const onThumbXMouseDown = (event: MouseEvent) => {
+  event.preventDefault();
+  isDraggingX.value = true;
+  dragStartX.value = event.pageX;
+  scrollStartX.value = contentRef.value!.scrollLeft;
+
+  document.addEventListener("mousemove", onThumbXMouseMove);
+  document.addEventListener("mouseup", onThumbXMouseUp);
+};
+
+const onThumbXMouseMove = (event: MouseEvent) => {
+  if (!isDraggingX.value || !contentRef.value || !containerRef.value) return;
+
+  const container = containerRef.value;
+  const content = contentRef.value;
+  const deltaX = event.pageX - dragStartX.value;
+  const trackWidth = container.clientWidth;
+  const scrollableWidth = content.scrollWidth - content.clientWidth;
+  const thumbWidthPx = (thumbXWidth.value / 100) * trackWidth;
+  const scrollRatio = deltaX / (trackWidth - thumbWidthPx);
+
+  content.scrollLeft = scrollStartX.value + scrollRatio * scrollableWidth;
+};
+
+const onThumbXMouseUp = () => {
+  isDraggingX.value = false;
+  document.removeEventListener("mousemove", onThumbXMouseMove);
+  document.removeEventListener("mouseup", onThumbXMouseUp);
+};
+
+const onThumbXKeyDown = (event: KeyboardEvent) => {
+  if (!contentRef.value) return;
+
+  if (event.key === "ArrowLeft") {
+    event.preventDefault();
+    contentRef.value!.scrollLeft -= props.step;
+  } else if (event.key === "ArrowRight") {
+    event.preventDefault();
+    contentRef.value!.scrollLeft += props.step;
+  }
+};
+
+// Public methods
+const refresh = () => {
+  nextTick(() => {
+    updateScrollbars();
+  });
+};
+
+const scrollTop = (value: any) => {
+  if (contentRef.value) {
+    contentRef.value!.scrollTop = value;
+  }
+};
+
+const scrollLeft = (value: any) => {
+  if (contentRef.value) {
+    contentRef.value!.scrollLeft = value;
+  }
+};
+
+// Expose public methods
+defineExpose({
+  refresh,
+  scrollTop,
+  scrollLeft,
+});
+
+// Lifecycle
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  updateScrollbars();
+
+  // Watch for content size changes
+  if (contentRef.value && typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      updateScrollbars();
+    });
+    resizeObserver.observe(contentRef.value);
+  }
+
+  window.addEventListener("resize", updateScrollbars);
+});
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+  window.removeEventListener("resize", updateScrollbars);
+  document.removeEventListener("mousemove", onThumbYMouseMove);
+  document.removeEventListener("mouseup", onThumbYMouseUp);
+  document.removeEventListener("mousemove", onThumbXMouseMove);
+  document.removeEventListener("mouseup", onThumbXMouseUp);
+});
+</script>

package/src/components/ScrollTop/ScrollTop.scss

@@ -0,0 +1,59 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: scroll-top;
+
+.#{$c} {
+  position: fixed;
+  bottom: var(--scroll-top-position-bottom, $scroll-top-position-bottom);
+  right: var(--scroll-top-position-right, $scroll-top-position-right);
+  width: var(--scroll-top-size, $scroll-top-size);
+  height: var(--scroll-top-size, $scroll-top-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--scroll-top-background-default, $scroll-top-background-default);
+  border: none;
+  border-radius: var(--scroll-top-radius, $scroll-top-radius);
+  box-shadow: var(--scroll-top-shadow, $scroll-top-shadow);
+  color: var(--scroll-top-icon-color, $scroll-top-icon-color);
+  cursor: pointer;
+  z-index: 1000;
+  transition:
+    background-color var(--scroll-top-transition-duration, $scroll-top-transition-duration) ease,
+    transform var(--scroll-top-transition-duration, $scroll-top-transition-duration) ease;
+
+  &:hover {
+    background-color: var(--scroll-top-background-hover, $scroll-top-background-hover);
+    transform: translateY(-2px);
+  }
+
+  &:active {
+    background-color: var(--scroll-top-background-active, $scroll-top-background-active);
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    outline: var(--scroll-top-focus-ringWidth, $scroll-top-focus-ringWidth) solid var(--scroll-top-focus-ringColor, $scroll-top-focus-ringColor);
+    outline-offset: var(--scroll-top-focus-ringOffset, $scroll-top-focus-ringOffset);
+  }
+}
+
+.#{$c}__icon {
+  width: var(--scroll-top-icon-size, $scroll-top-icon-size);
+  height: var(--scroll-top-icon-size, $scroll-top-icon-size);
+  flex-shrink: 0;
+}
+
+// Transition styles
+.scroll-top-fade-enter-active,
+.scroll-top-fade-leave-active {
+  transition:
+    opacity var(--scroll-top-transition-duration, $scroll-top-transition-duration) ease,
+    transform var(--scroll-top-transition-duration, $scroll-top-transition-duration) ease;
+}
+
+.scroll-top-fade-enter-from,
+.scroll-top-fade-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}

package/src/components/ScrollTop/ScrollTop.vue

@@ -0,0 +1,99 @@
+<template>
+  <Teleport to="body">
+    <Transition name="scroll-top-fade">
+      <button
+        v-show="isVisible"
+        class="scroll-top"
+        :class="additionalClasses"
+        type="button"
+        aria-label="Scroll to top"
+        @click="scrollToTop"
+      >
+        <slot>
+          <svg
+            class="scroll-top__icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="18 15 12 9 6 15" />
+          </svg>
+        </slot>
+      </button>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./ScrollTop.scss"></style>
+
+<script setup lang="ts">
+import type { ScrollTopProps, ScrollTopEmits } from '../../types';
+import { ref, onMounted, onUnmounted, computed } from "vue";
+
+defineOptions({ name: 'FtpScrollTop' });
+
+const props = withDefaults(defineProps<ScrollTopProps>(), {
+  threshold: 400,
+  behavior: "smooth",
+  target: "window",
+});
+
+const emit = defineEmits(["click"]);
+
+const isVisible = ref(false);
+let scrollTarget: HTMLElement | Window | null = null;
+
+function getScrollTop() {
+  if (props.target === "window") {
+    return window.scrollY || document.documentElement.scrollTop;
+  }
+  return (scrollTarget as HTMLElement)?.scrollTop || 0;
+}
+
+function handleScroll() {
+  isVisible.value = getScrollTop() > props.threshold;
+}
+
+function scrollToTop() {
+  emit("click");
+
+  if (props.target === "window") {
+    window.scrollTo({
+      top: 0,
+      behavior: props.behavior,
+    });
+  } else if (scrollTarget) {
+    scrollTarget.scrollTo({
+      top: 0,
+      behavior: props.behavior,
+    });
+  }
+}
+
+onMounted(() => {
+  if (props.target === "window") {
+    scrollTarget = window;
+    window.addEventListener("scroll", handleScroll, { passive: true });
+  } else {
+    scrollTarget = document.querySelector(props.target) as HTMLElement | null;
+    if (scrollTarget) {
+      scrollTarget.addEventListener("scroll", handleScroll, { passive: true });
+    }
+  }
+  handleScroll();
+});
+
+onUnmounted(() => {
+  if (props.target === "window") {
+    window.removeEventListener("scroll", handleScroll);
+  } else if (scrollTarget) {
+    scrollTarget.removeEventListener("scroll", handleScroll);
+  }
+});
+
+const additionalClasses = computed(() => [].filter(Boolean).join(" "));
+</script>

package/src/components/Section/Section.scss

@@ -0,0 +1,58 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: site-section;
+
+.#{$c} {
+  width: 100%;
+}
+
+.#{$c}__container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+}
+
+.#{$c}__header {
+  text-align: center;
+  max-width: 700px;
+  margin: 0 auto;
+}
+
+.#{$c}__title {
+  font-size: 2.25rem;
+  font-weight: 700;
+  color: $text-heading;
+  margin: 0 0 0.75rem;
+}
+
+.#{$c}__subtitle {
+  font-size: 1.125rem;
+  line-height: 1.6;
+  color: $text-secondary;
+  margin: 0;
+}
+
+// Padding
+.#{$c}--pad-sm { padding: 2rem; }
+.#{$c}--pad-md { padding: 3rem 2rem; }
+.#{$c}--pad-lg { padding: 5rem 2rem; }
+.#{$c}--pad-xl { padding: 7rem 2rem; }
+
+// Variants
+.#{$c}--default { background-color: transparent; }
+.#{$c}--muted { background-color: $surface-muted; }
+
+.#{$c}--accent {
+  @include accent-gradient();
+  .#{$c}__title,
+  .#{$c}__subtitle { color: #fff; }
+}
+
+.#{$c}--dark {
+  background-color: $surface-panel;
+  border-top: 1px solid $border-subtle;
+  border-bottom: 1px solid $border-subtle;
+}

package/src/components/Section/Section.vue

@@ -0,0 +1,39 @@
+<template>
+  <section class="site-section" :class="additionalClasses" :id="id">
+    <div class="site-section__container">
+      <div v-if="title || subtitle || $slots.header" class="site-section__header">
+        <slot name="header">
+          <h2 v-if="title" class="site-section__title">{{ title }}</h2>
+          <p v-if="subtitle" class="site-section__subtitle">{{ subtitle }}</p>
+        </slot>
+      </div>
+      <div class="site-section__body">
+        <slot />
+      </div>
+      <div v-if="$slots.footer" class="site-section__footer">
+        <slot name="footer" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style src="./Section.scss"></style>
+
+<script setup lang="ts">
+import type { SectionProps } from '../../types';
+import { computed } from 'vue';
+
+defineOptions({ name: 'FtpSection' });
+
+const props = withDefaults(defineProps<SectionProps>(), {
+  variant: 'default',
+  padding: 'lg',
+});
+
+const additionalClasses = computed(() =>
+  [
+    `site-section--${props.variant}`,
+    `site-section--pad-${props.padding}`,
+  ].join(' ')
+);
+</script>

package/src/components/Select/Select.scss

@@ -0,0 +1,98 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: select;
+
+.#{$c} {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+}
+
+.#{$c}__input {
+  width: 100%;
+  appearance: none;
+  background-color: var(--select-background-default, $select-background-default);
+  border: var(--select-border-width, $select-border-width) solid var(--select-border-color-default, $select-border-color-default);
+  border-radius: var(--select-radius, $select-radius);
+  padding: 0 calc(var(--select-padding-x, $select-padding-x) + 24px) 0 var(--select-padding-x, $select-padding-x);
+  color: var(--select-text-default, $select-text-default);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover:not(:disabled) {
+    border-color: var(--select-border-color-hover, $select-border-color-hover);
+  }
+
+  &:focus {
+    outline: var(--select-focus-ringWidth, $select-focus-ringWidth) solid var(--select-focus-ringColor, $select-focus-ringColor);
+    outline-offset: var(--select-focus-ringOffset, $select-focus-ringOffset);
+    border-color: var(--select-border-color-focus, $select-border-color-focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--select-background-disabled, $select-background-disabled);
+    border-color: var(--select-border-color-disabled, $select-border-color-disabled);
+    color: var(--select-text-disabled, $select-text-disabled);
+  }
+}
+
+.#{$c}__icon {
+  position: absolute;
+  right: var(--select-padding-x, $select-padding-x);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--select-icon-color-default, $select-icon-color-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease;
+}
+
+// Placeholder state
+.#{$c}--placeholder {
+  .#{$c}__input {
+    color: var(--select-text-placeholder, $select-text-placeholder);
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  .#{$c}__icon {
+    color: var(--select-icon-color-disabled, $select-icon-color-disabled);
+  }
+}
+
+// Invalid state
+.#{$c}--invalid {
+  .#{$c}__input {
+    border-color: var(--select-border-color-error, $select-border-color-error);
+
+    &:focus {
+      border-color: var(--select-border-color-error, $select-border-color-error);
+    }
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__input {
+    height: var(--select-height-sm, $select-height-sm);
+    font-size: var(--select-fontSize-sm, $select-fontSize-sm);
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__input {
+    height: var(--select-height-md, $select-height-md);
+    font-size: var(--select-fontSize-md, $select-fontSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__input {
+    height: var(--select-height-lg, $select-height-lg);
+    font-size: var(--select-fontSize-lg, $select-fontSize-lg);
+  }
+}