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

package/src/components/DatePicker/DatePicker.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="date-picker" :class="{ 'date-picker--disabled': disabled }">
+    <div class="date-picker__input-wrapper" @click="toggleCalendar">
+      <input
+        ref="inputRef"
+        class="date-picker__input"
+        :class="{ 'date-picker__input--active': isOpen }"
+        type="text"
+        readonly
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        aria-haspopup="dialog"
+        :aria-expanded="isOpen"
+        @focus="openCalendar"
+        @keydown.escape="closeCalendar"
+        @keydown.enter="toggleCalendar"
+      />
+      <svg class="date-picker__calendar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
+      </svg>
+    </div>
+
+    <Teleport to="body">
+      <Transition name="date-picker-dropdown">
+        <div
+          v-if="isOpen"
+          ref="dropdownRef"
+          class="date-picker__dropdown"
+          :style="dropdownStyle"
+          @mousedown.prevent
+        >
+          <Calendar
+            :model-value="modelValue"
+            inline
+            :min-date="minDate"
+            :max-date="maxDate"
+            @update:model-value="onDateSelect"
+          />
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style src="./DatePicker.scss"></style>
+
+<script setup lang="ts">
+import type { DatePickerProps } from '../../types';
+import Calendar from '../Calendar/Calendar.vue';
+import { computed, ref, onMounted, onUnmounted, nextTick } from 'vue';
+
+defineOptions({ name: 'FtpDatePicker' });
+
+const props = withDefaults(defineProps<DatePickerProps>(), {
+  placeholder: 'Select a date',
+  format: 'yyyy-MM-dd',
+  disabled: false,
+  locale: 'en-US',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Date | null): void
+}>();
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const dropdownRef = ref<HTMLElement | null>(null);
+const isOpen = ref(false);
+const dropdownStyle = ref<Record<string, string>>({});
+
+const displayValue = computed(() => {
+  if (!props.modelValue) return '';
+  try {
+    return new Intl.DateTimeFormat(props.locale).format(props.modelValue);
+  } catch {
+    return props.modelValue.toLocaleDateString();
+  }
+});
+
+const positionDropdown = async () => {
+  await nextTick();
+  if (!inputRef.value) return;
+  const rect = inputRef.value.getBoundingClientRect();
+  dropdownStyle.value = {
+    position: 'fixed',
+    top: `${rect.bottom + 4}px`,
+    left: `${rect.left}px`,
+    zIndex: '9998',
+  };
+};
+
+const openCalendar = () => {
+  if (props.disabled) return;
+  isOpen.value = true;
+  positionDropdown();
+};
+
+const closeCalendar = () => {
+  isOpen.value = false;
+};
+
+const toggleCalendar = () => {
+  if (isOpen.value) closeCalendar();
+  else openCalendar();
+};
+
+const onDateSelect = (value: Date | Date[] | null) => {
+  emit('update:modelValue', Array.isArray(value) ? value[0] ?? null : value);
+  closeCalendar();
+};
+
+const onClickOutside = (event: MouseEvent) => {
+  if (!isOpen.value) return;
+  const target = event.target as Node;
+  if (inputRef.value?.contains(target) || dropdownRef.value?.contains(target)) return;
+  closeCalendar();
+};
+
+onMounted(() => document.addEventListener('mousedown', onClickOutside));
+onUnmounted(() => document.removeEventListener('mousedown', onClickOutside));
+</script>

package/src/components/Dialog/Dialog.scss

@@ -0,0 +1,161 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/elevation" as *;
+
+$c: dialog;
+
+// Overlay backdrop
+.#{$c}__overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--dialog-zIndex-overlay, $dialog-zIndex-overlay);
+}
+
+.#{$c}__overlay--modal {
+  background-color: var(--dialog-overlay-background, $dialog-overlay-background);
+}
+
+// Dialog container
+.#{$c} {
+  @include elevation(4);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  // Component token overrides
+  background-color: var(--dialog-background-default, $dialog-background-default);
+  border-radius: var(--dialog-radius, $dialog-radius);
+  box-shadow: var(--dialog-shadow, $dialog-shadow);
+  border-color: var(--dialog-border-color, $dialog-border-color);
+  border-width: var(--dialog-border-width, $dialog-border-width);
+  max-height: var(--dialog-maxHeight, $dialog-maxHeight);
+  max-width: 95vw;
+  z-index: var(--dialog-zIndex-dialog, $dialog-zIndex-dialog);
+  overflow: hidden;
+}
+
+// Size variants
+.#{$c}--size-sm {
+  width: var(--dialog-width-sm, $dialog-width-sm);
+}
+
+.#{$c}--size-md {
+  width: var(--dialog-width-md, $dialog-width-md);
+}
+
+.#{$c}--size-lg {
+  width: var(--dialog-width-lg, $dialog-width-lg);
+}
+
+.#{$c}--size-xl {
+  width: var(--dialog-width-xl, $dialog-width-xl);
+}
+
+// Draggable variant
+.#{$c}--draggable {
+  .#{$c}__header {
+    cursor: move;
+    user-select: none;
+  }
+}
+
+// Header section
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--inset-m, $inset-m);
+  padding: var(--dialog-padding-header, $dialog-padding-header);
+  background-color: var(--dialog-header-background, $dialog-header-background);
+  border-bottom: 1px solid var(--dialog-header-borderColor, $dialog-header-borderColor);
+  flex-shrink: 0;
+}
+
+.#{$c}__title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--dialog-header-title-color, $dialog-header-title-color);
+  margin: 0;
+  line-height: 1.4;
+}
+
+// Close button
+.#{$c}__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dialog-closeButton-size, $dialog-closeButton-size);
+  height: var(--dialog-closeButton-size, $dialog-closeButton-size);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--dialog-closeButton-radius, $dialog-closeButton-radius);
+  color: var(--dialog-closeButton-color-default, $dialog-closeButton-color-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: var(--dialog-closeButton-background-hover, $dialog-closeButton-background-hover);
+    color: var(--dialog-closeButton-color-hover, $dialog-closeButton-color-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__close-icon {
+  width: var(--dialog-closeButton-iconSize, $dialog-closeButton-iconSize);
+  height: var(--dialog-closeButton-iconSize, $dialog-closeButton-iconSize);
+}
+
+// Content section
+.#{$c}__content {
+  flex: 1 1 auto;
+  padding: var(--dialog-padding-content, $dialog-padding-content);
+  overflow-y: auto;
+}
+
+// Footer section
+.#{$c}__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--inset-s, $inset-s);
+  padding: var(--dialog-padding-footer, $dialog-padding-footer);
+  border-top: 1px solid var(--dialog-header-borderColor, $dialog-header-borderColor);
+  flex-shrink: 0;
+}
+
+// Transition animations
+.dialog-fade-enter-active,
+.dialog-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.dialog-fade-enter-from,
+.dialog-fade-leave-to {
+  opacity: 0;
+}
+
+.dialog-scale-enter-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.dialog-scale-leave-active {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.dialog-scale-enter-from {
+  transform: scale(0.95);
+  opacity: 0;
+}
+
+.dialog-scale-leave-to {
+  transform: scale(0.95);
+  opacity: 0;
+}

package/src/components/Dialog/Dialog.vue

@@ -0,0 +1,245 @@
+<template>
+  <Teleport to="body">
+    <Transition name="dialog-fade">
+      <div
+        v-if="visible"
+        class="dialog__overlay"
+        :class="{ 'dialog__overlay--modal': modal }"
+        @click="onOverlayClick"
+        @keydown.escape="onEscapeKey"
+      >
+        <Transition name="dialog-scale">
+          <div
+            v-if="visible"
+            ref="dialogRef"
+            class="dialog"
+            :class="additionalClasses"
+            role="dialog"
+            :aria-modal="modal"
+            :aria-labelledby="headerId"
+            @click.stop
+            @keydown="onKeyDown"
+          >
+            <div v-if="$slots.header || header || closable" class="dialog__header">
+              <slot name="header">
+                <span :id="headerId" class="dialog__title">{{ header }}</span>
+              </slot>
+              <button
+                v-if="closable"
+                type="button"
+                class="dialog__close"
+                aria-label="Close"
+                @click="close"
+              >
+                <svg
+                  class="dialog__close-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+
+            <div class="dialog__content">
+              <slot />
+            </div>
+
+            <div v-if="$slots.footer" class="dialog__footer">
+              <slot name="footer" />
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./Dialog.scss"></style>
+
+<script setup lang="ts">
+import type { DialogProps, DialogEmits } from '../../types';
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from "vue";
+
+defineOptions({ name: 'FtpDialog' });
+
+// Bug #2: SSR-safe ID generation (atomic counter instead of Math.random)
+let idCounter = 0;
+const useId = () => 'ftp-' + idCounter++;
+
+// Bug #3: Body scroll lock counter (shared across all Dialog instances)
+let scrollLockCount = 0;
+const lockScroll = () => {
+  scrollLockCount++;
+  if (scrollLockCount === 1) {
+    document.body.style.overflow = "hidden";
+  }
+};
+const unlockScroll = () => {
+  scrollLockCount = Math.max(0, scrollLockCount - 1);
+  if (scrollLockCount === 0) {
+    document.body.style.overflow = "";
+  }
+};
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  visible: false,
+  header: "",
+  closable: true,
+  modal: true,
+  draggable: false,
+  dismissableMask: false,
+  closeOnEscape: true,
+  size: "md",
+});
+
+const emit = defineEmits(["update:visible", "show", "hide"]);
+
+const dialogRef = ref<HTMLElement | null>(null);
+const headerId = useId();
+
+// Drag state
+const isDragging = ref(false);
+const dragOffset = ref({ x: 0, y: 0 });
+const dialogPosition = ref({ x: 0, y: 0 });
+
+const additionalClasses = computed(() => [
+  `dialog--size-${props.size}`,
+  props.draggable && "dialog--draggable",
+].filter(Boolean).join(" "));
+
+const close = () => {
+  emit("update:visible", false);
+  emit("hide");
+};
+
+const onOverlayClick = () => {
+  if (props.dismissableMask) {
+    close();
+  }
+};
+
+const onEscapeKey = (event: KeyboardEvent) => {
+  if (props.closeOnEscape && props.visible) {
+    event.preventDefault();
+    close();
+  }
+};
+
+// Bug #1: Focus trap
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (event.key !== 'Tab' || !props.modal || !dialogRef.value) return;
+
+  const focusableElements = [...dialogRef.value.querySelectorAll(FOCUSABLE_SELECTOR)];
+  if (focusableElements.length === 0) {
+    event.preventDefault();
+    return;
+  }
+
+  const firstEl = (focusableElements[0] as HTMLElement);
+  const lastEl = (focusableElements[focusableElements.length - 1] as HTMLElement);
+
+  if (event.shiftKey) {
+    if (document.activeElement === firstEl || !dialogRef.value.contains(document.activeElement)) {
+      event.preventDefault();
+      lastEl.focus();
+    }
+  } else {
+    if (document.activeElement === lastEl || !dialogRef.value.contains(document.activeElement)) {
+      event.preventDefault();
+      firstEl.focus();
+    }
+  }
+};
+
+// Bug #4: Drag cleanup helper
+const removeDragListeners = () => {
+  document.removeEventListener("mousemove", onDragMove);
+  document.removeEventListener("mouseup", onDragEnd);
+  isDragging.value = false;
+};
+
+// Dragging functionality
+const onDragStart = (event: MouseEvent) => {
+  if (!props.draggable || !dialogRef.value) return;
+
+  isDragging.value = true;
+  const rect = dialogRef.value.getBoundingClientRect();
+  dragOffset.value = {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top,
+  };
+
+  document.addEventListener("mousemove", onDragMove);
+  document.addEventListener("mouseup", onDragEnd);
+};
+
+const onDragMove = (event: MouseEvent) => {
+  if (!isDragging.value) return;
+
+  dialogPosition.value = {
+    x: event.clientX - dragOffset.value.x,
+    y: event.clientY - dragOffset.value.y,
+  };
+
+  if (dialogRef.value) {
+    dialogRef.value.style.left = `${dialogPosition.value.x}px`;
+    dialogRef.value.style.top = `${dialogPosition.value.y}px`;
+    dialogRef.value.style.transform = "none";
+  }
+};
+
+const onDragEnd = () => {
+  removeDragListeners();
+};
+
+// Track whether we locked scroll (for cleanup)
+let didLockScroll = false;
+
+watch(
+  () => props.visible,
+  async (newValue) => {
+    if (newValue) {
+      emit("show");
+      if (props.modal) {
+        lockScroll();
+        didLockScroll = true;
+      }
+      // Focus first focusable element when dialog opens
+      await nextTick();
+      if (dialogRef.value) {
+        const focusable = dialogRef.value.querySelector(FOCUSABLE_SELECTOR);
+        if (focusable) {
+          (focusable as HTMLElement).focus();
+        } else {
+          dialogRef.value.setAttribute('tabindex', '-1');
+          dialogRef.value.focus();
+        }
+      }
+    } else {
+      // Bug #4: Clean up drag listeners on hide
+      removeDragListeners();
+      if (didLockScroll) {
+        unlockScroll();
+        didLockScroll = false;
+      }
+    }
+  }
+);
+
+// Cleanup on unmount
+onUnmounted(() => {
+  if (didLockScroll) {
+    unlockScroll();
+    didLockScroll = false;
+  }
+  removeDragListeners();
+});
+</script>

package/src/components/Divider/Divider.scss

@@ -0,0 +1,147 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: divider;
+
+// Base horizontal divider
+.#{$c} {
+  display: flex;
+  align-items: center;
+  margin: var(--divider-margin-horizontal, $divider-margin-horizontal) 0;
+  border: none;
+  position: relative;
+  width: 100%;
+
+  // The line itself (using ::before for horizontal)
+  &::before {
+    content: '';
+    flex: 1;
+    border-top-width: var(--divider-border-width, $divider-border-width);
+    border-top-style: solid;
+    border-top-color: var(--divider-border-color, $divider-border-color);
+  }
+}
+
+// Vertical layout
+.#{$c}--vertical {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+  margin: 0 var(--divider-margin-vertical, $divider-margin-vertical);
+  min-height: 100%;
+  width: auto;
+
+  &::before {
+    border-top: none;
+    border-left-width: var(--divider-border-width, $divider-border-width);
+    border-left-style: solid;
+    border-left-color: var(--divider-border-color, $divider-border-color);
+    height: 100%;
+    min-height: inherit;
+  }
+}
+
+// Border style variants
+.#{$c}--dashed {
+  &::before,
+  &::after {
+    border-style: dashed;
+  }
+}
+
+.#{$c}--dotted {
+  &::before,
+  &::after {
+    border-style: dotted;
+  }
+}
+
+// Content support
+.#{$c}__content {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--divider-content-gap, $divider-content-gap);
+  color: var(--divider-content-color, $divider-content-color);
+  background: var(--divider-content-background, $divider-content-background);
+  font-size: 0.875rem;
+  white-space: nowrap;
+}
+
+// When there's content, add the second line
+.#{$c}--with-content {
+  &::after {
+    content: '';
+    flex: 1;
+    border-top-width: var(--divider-border-width, $divider-border-width);
+    border-top-style: solid;
+    border-top-color: var(--divider-border-color, $divider-border-color);
+  }
+
+  &.#{$c}--dashed::after {
+    border-top-style: dashed;
+  }
+
+  &.#{$c}--dotted::after {
+    border-top-style: dotted;
+  }
+}
+
+// Alignment modifiers (for content)
+.#{$c}--align-left {
+  &::before {
+    flex: 0 0 5%;
+  }
+  &::after {
+    flex: 1;
+  }
+}
+
+.#{$c}--align-right {
+  &::before {
+    flex: 1;
+  }
+  &::after {
+    flex: 0 0 5%;
+  }
+}
+
+.#{$c}--align-center {
+  &::before,
+  &::after {
+    flex: 1;
+  }
+}
+
+// Vertical with content
+.#{$c}--vertical.#{$c}--with-content {
+  .#{$c}__content {
+    padding: var(--divider-content-gap, $divider-content-gap) 0;
+  }
+
+  &::after {
+    border-top: none;
+    border-left-width: var(--divider-border-width, $divider-border-width);
+    border-left-style: solid;
+    border-left-color: var(--divider-border-color, $divider-border-color);
+    height: auto;
+  }
+}
+
+// Vertical alignment (top/bottom only apply to vertical)
+.#{$c}--vertical.#{$c}--align-top {
+  &::before {
+    flex: 0 0 5%;
+  }
+  &::after {
+    flex: 1;
+  }
+}
+
+.#{$c}--vertical.#{$c}--align-bottom {
+  &::before {
+    flex: 1;
+  }
+  &::after {
+    flex: 0 0 5%;
+  }
+}