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

package/src/components/Hero/Hero.vue

@@ -0,0 +1,57 @@
+<template>
+  <section
+    class="hero"
+    :class="additionalClasses"
+    :style="backgroundStyles"
+    :aria-labelledby="title ? heroTitleId : undefined"
+  >
+    <div v-if="overlay" class="hero__overlay" />
+    <div class="hero__container">
+      <div class="hero__content">
+        <h1 v-if="title" :id="heroTitleId" class="hero__title">{{ title }}</h1>
+        <p v-if="subtitle" class="hero__subtitle">{{ subtitle }}</p>
+        <div v-if="$slots.default" class="hero__body">
+          <slot />
+        </div>
+        <div v-if="$slots.actions" class="hero__actions">
+          <slot name="actions" />
+        </div>
+      </div>
+      <div v-if="$slots.media" class="hero__media">
+        <slot name="media" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style src="./Hero.scss"></style>
+
+<script setup lang="ts">
+import type { HeroProps } from '../../types';
+import { computed } from 'vue';
+
+defineOptions({ name: 'FtpHero' });
+
+const heroTitleId = `hero-title-${Math.random().toString(36).substring(2, 9)}`;
+
+const props = withDefaults(defineProps<HeroProps>(), {
+  alignment: 'center',
+  overlay: false,
+  fullHeight: false,
+});
+
+const additionalClasses = computed(() =>
+  [
+    `hero--align-${props.alignment}`,
+    props.fullHeight && 'hero--full-height',
+    props.backgroundImage && 'hero--has-bg',
+  ]
+    .filter(Boolean)
+    .join(' ')
+);
+
+const backgroundStyles = computed(() => {
+  if (!props.backgroundImage) return {};
+  return { backgroundImage: `url(${props.backgroundImage})` };
+});
+</script>

package/src/components/Image/Image.scss

@@ -0,0 +1,129 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: image;
+
+.#{$c} {
+  display: inline-block;
+  position: relative;
+  line-height: 0;
+}
+
+.#{$c}__img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--image-radius, $image-radius);
+  transition: opacity var(--image-transition-duration, $image-transition-duration) ease;
+}
+
+// Preview enabled state
+.#{$c}--preview {
+  cursor: pointer;
+
+  .#{$c}__img {
+    transition: transform var(--image-transition-duration, $image-transition-duration) ease,
+                opacity var(--image-transition-duration, $image-transition-duration) ease;
+  }
+
+  &:hover {
+    .#{$c}__img {
+      transform: scale(1.02);
+    }
+
+    .#{$c}__preview-indicator {
+      opacity: 1;
+    }
+  }
+}
+
+.#{$c}__preview-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--image-preview-icon-size, $image-preview-icon-size) * 2);
+  height: calc(var(--image-preview-icon-size, $image-preview-icon-size) * 2);
+  background: var(--image-preview-icon-background, $image-preview-icon-background);
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity var(--image-transition-duration, $image-transition-duration) ease;
+  pointer-events: none;
+
+  svg {
+    width: var(--image-preview-icon-size, $image-preview-icon-size);
+    height: var(--image-preview-icon-size, $image-preview-icon-size);
+    color: var(--image-preview-icon-color, $image-preview-icon-color);
+  }
+}
+
+// Overlay for preview lightbox
+.#{$c}__overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--image-preview-overlay-background, $image-preview-overlay-background);
+  z-index: var(--image-preview-overlay-zIndex, $image-preview-overlay-zIndex);
+  padding: 40px;
+}
+
+.#{$c}__preview-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: var(--image-radius, $image-radius);
+}
+
+.#{$c}__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--image-preview-closeButton-size, $image-preview-closeButton-size);
+  height: var(--image-preview-closeButton-size, $image-preview-closeButton-size);
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  color: var(--image-preview-closeButton-color, $image-preview-closeButton-color);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: var(--image-preview-closeButton-hoverBackground, $image-preview-closeButton-hoverBackground);
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+// Error state
+.#{$c}--error {
+  .#{$c}__img {
+    opacity: 0.5;
+  }
+}
+
+// Transition animations
+.image-preview-enter-active,
+.image-preview-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.image-preview-enter-from,
+.image-preview-leave-to {
+  opacity: 0;
+}

package/src/components/Image/Image.vue

@@ -0,0 +1,117 @@
+<template>
+  <span class="image" :class="additionalClasses">
+    <img
+      :src="src"
+      :alt="alt"
+      :width="width"
+      :height="height"
+      class="image__img"
+      @click="onImageClick"
+      @load="onLoad"
+      @error="onError"
+    />
+    <span v-if="preview" class="image__preview-indicator">
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="currentColor"/>
+        <path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" fill="currentColor"/>
+      </svg>
+    </span>
+
+    <!-- Preview lightbox -->
+    <Teleport to="body">
+      <Transition name="image-preview">
+        <div
+          v-if="previewVisible"
+          class="image__overlay"
+          @click="closePreview"
+          @keydown.escape="closePreview"
+        >
+          <button
+            type="button"
+            class="image__close"
+            aria-label="Close preview"
+            @click.stop="closePreview"
+          >
+            <svg 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>
+          <img
+            :src="src"
+            :alt="alt"
+            class="image__preview-img"
+            @click.stop
+          />
+        </div>
+      </Transition>
+    </Teleport>
+  </span>
+</template>
+
+<style src="./Image.scss"></style>
+
+<script setup lang="ts">
+import type { ImageProps, ImageEmits } from '../../types';
+import { computed, ref, watch, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpImage' });
+
+const props = withDefaults(defineProps<ImageProps>(), {
+  alt: "",
+  width: undefined,
+  height: undefined,
+  preview: false,
+});
+
+const emit = defineEmits(["show", "hide", "error", "load"]);
+
+const previewVisible = ref(false);
+const hasError = ref(false);
+const isLoaded = ref(false);
+
+const additionalClasses = computed(() =>
+  [
+    props.preview && "image--preview",
+    hasError.value && "image--error",
+    isLoaded.value && "image--loaded",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const onImageClick = () => {
+  if (props.preview) {
+    openPreview();
+  }
+};
+
+const openPreview = () => {
+  previewVisible.value = true;
+  document.body.style.overflow = "hidden";
+  emit("show");
+};
+
+const closePreview = () => {
+  previewVisible.value = false;
+  document.body.style.overflow = "";
+  emit("hide");
+};
+
+const onLoad = (event: Event) => {
+  isLoaded.value = true;
+  emit("load", event);
+};
+
+const onError = (event: Event) => {
+  hasError.value = true;
+  emit("error", event);
+};
+
+// Cleanup on unmount
+onUnmounted(() => {
+  if (previewVisible.value) {
+    document.body.style.overflow = "";
+  }
+});
+</script>

package/src/components/ImageCompare/ImageCompare.scss

@@ -0,0 +1,97 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: image-compare;
+
+.#{$c} {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--image-compare-border-radius, $image-compare-border-radius);
+  border: var(--image-compare-border-width, $image-compare-border-width) solid var(--image-compare-border-color, $image-compare-border-color);
+  background-color: var(--image-compare-background, $image-compare-background);
+  user-select: none;
+}
+
+.#{$c}__before,
+.#{$c}__after {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+
+  img,
+  picture,
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.#{$c}__after {
+  z-index: 1;
+}
+
+.#{$c}__before {
+  z-index: 2;
+}
+
+.#{$c}__handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.#{$c}__handle-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--image-compare-handle-width, $image-compare-handle-width);
+  background-color: var(--image-compare-handle-color-default, $image-compare-handle-color-default);
+  box-shadow: var(--image-compare-handle-shadow, $image-compare-handle-shadow);
+  transition: background-color var(--image-compare-transition-duration, $image-compare-transition-duration) ease;
+}
+
+.#{$c}__handle-icon {
+  position: relative;
+  width: var(--image-compare-icon-size, $image-compare-icon-size);
+  height: var(--image-compare-icon-size, $image-compare-icon-size);
+  border-radius: 9999px;
+  background-color: var(--image-compare-icon-background, $image-compare-icon-background);
+  color: var(--image-compare-icon-color, $image-compare-icon-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--image-compare-handle-shadow, $image-compare-handle-shadow);
+  transition: transform var(--image-compare-transition-duration, $image-compare-transition-duration) ease;
+}
+
+.#{$c}__slider {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: ew-resize;
+  z-index: 4;
+
+  &:focus-visible + .#{$c}__handle .#{$c}__handle-line {
+    background-color: var(--image-compare-handle-color-hover, $image-compare-handle-color-hover);
+  }
+}
+
+.#{$c}:hover {
+  .#{$c}__handle-line {
+    background-color: var(--image-compare-handle-color-hover, $image-compare-handle-color-hover);
+  }
+
+  .#{$c}__handle-icon {
+    transform: scale(1.1);
+  }
+}

package/src/components/ImageCompare/ImageCompare.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    class="image-compare"
+    :class="additionalClasses"
+    :aria-label="ariaLabel"
+    :aria-labelledby="ariaLabelledBy"
+  >
+    <div class="image-compare__before" :style="beforeStyle">
+      <slot name="before" />
+    </div>
+    <div class="image-compare__after">
+      <slot name="after" />
+    </div>
+    <div class="image-compare__handle" :style="handleStyle">
+      <div class="image-compare__handle-line"></div>
+      <div class="image-compare__handle-icon">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
+          <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
+          <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" transform="rotate(180 12 12)"/>
+        </svg>
+      </div>
+    </div>
+    <input
+      type="range"
+      class="image-compare__slider"
+      min="0"
+      max="100"
+      :value="position"
+      @input="onSlide"
+    />
+  </div>
+</template>
+
+<style src="./ImageCompare.scss"></style>
+
+<script setup lang="ts">
+import type { ImageCompareProps, ImageCompareEmits } from '../../types';
+import { ref, computed } from "vue";
+
+defineOptions({ name: 'FtpImageCompare' });
+
+const props = withDefaults(defineProps<ImageCompareProps>(), {
+  initialPosition: 50,
+  ariaLabel: "Image comparison slider",
+  ariaLabelledBy: undefined,
+});
+
+const emit = defineEmits(["change"]);
+
+const position = ref(props.initialPosition);
+
+const onSlide = (event: Event) => {
+  position.value = Number((event.target as HTMLInputElement).value);
+  emit("change", position.value);
+};
+
+const beforeStyle = computed(() => ({
+  clipPath: `inset(0 ${100 - position.value}% 0 0)`
+}));
+
+const handleStyle = computed(() => ({
+  left: `${position.value}%`
+}));
+
+const additionalClasses = computed(() => [].filter(Boolean).join(" "));
+</script>

package/src/components/InPlace/InPlace.scss

@@ -0,0 +1,97 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: in-place;
+
+.#{$c} {
+  display: inline-block;
+}
+
+// Display mode
+.#{$c}__display {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--in-place-display-paddingY, $in-place-display-paddingY) var(--in-place-display-paddingX, $in-place-display-paddingX);
+  background-color: var(--in-place-display-background-default, $in-place-display-background-default);
+  color: var(--in-place-display-color-default, $in-place-display-color-default);
+  border-radius: var(--in-place-display-border-radius, $in-place-display-border-radius);
+  cursor: pointer;
+  transition: background-color var(--in-place-transition-duration, $in-place-transition-duration) ease,
+              color var(--in-place-transition-duration, $in-place-transition-duration) ease;
+
+  &:hover {
+    background-color: var(--in-place-display-background-hover, $in-place-display-background-hover);
+    color: var(--in-place-display-color-hover, $in-place-display-color-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    color: var(--in-place-display-color-disabled, $in-place-display-color-disabled);
+
+    &:hover {
+      background-color: var(--in-place-display-background-default, $in-place-display-background-default);
+    }
+  }
+}
+
+.#{$c}__display-text {
+  opacity: 0.7;
+  font-style: italic;
+}
+
+// Content mode
+.#{$c}__content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--in-place-closeButton-gap, $in-place-closeButton-gap);
+}
+
+// Close button
+.#{$c}__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--in-place-closeButton-size, $in-place-closeButton-size);
+  height: var(--in-place-closeButton-size, $in-place-closeButton-size);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--in-place-closeButton-radius, $in-place-closeButton-radius);
+  color: var(--in-place-closeButton-color-default, $in-place-closeButton-color-default);
+  cursor: pointer;
+  transition: background-color var(--in-place-transition-duration, $in-place-transition-duration) ease,
+              color var(--in-place-transition-duration, $in-place-transition-duration) ease;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: var(--in-place-closeButton-background-hover, $in-place-closeButton-background-hover);
+    color: var(--in-place-closeButton-color-hover, $in-place-closeButton-color-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__close-icon {
+  width: var(--in-place-closeButton-iconSize, $in-place-closeButton-iconSize);
+  height: var(--in-place-closeButton-iconSize, $in-place-closeButton-iconSize);
+}
+
+// Disabled state
+.#{$c}--disabled {
+  .#{$c}__display {
+    cursor: not-allowed;
+    color: var(--in-place-display-color-disabled, $in-place-display-color-disabled);
+
+    &:hover {
+      background-color: var(--in-place-display-background-default, $in-place-display-background-default);
+    }
+  }
+}

package/src/components/InPlace/InPlace.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    class="in-place"
+    :class="additionalClasses"
+    aria-live="polite"
+  >
+    <!-- Display mode -->
+    <div
+      v-if="!isActive"
+      class="in-place__display"
+      role="button"
+      :tabindex="disabled ? -1 : 0"
+      :data-disabled="disabled || undefined"
+      @click="onDisplayClick"
+      @keydown.enter="onDisplayClick"
+    >
+      <slot name="display">
+        <span class="in-place__display-text">Click to edit</span>
+      </slot>
+    </div>
+
+    <!-- Content mode -->
+    <div
+      v-else
+      class="in-place__content"
+    >
+      <slot name="content" :close="close">
+        <slot></slot>
+      </slot>
+      <button
+        v-if="closable"
+        type="button"
+        class="in-place__close"
+        aria-label="Close"
+        @click="close"
+      >
+        <svg
+          class="in-place__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>
+</template>
+
+<style src="./InPlace.scss"></style>
+
+<script setup lang="ts">
+import type { InPlaceProps, InPlaceEmits } from '../../types';
+import { computed, ref, watch, nextTick } from "vue";
+
+defineOptions({ name: 'FtpInPlace' });
+
+const props = withDefaults(defineProps<InPlaceProps>(), {
+  active: false,
+  disabled: false,
+  closable: true,
+});
+
+const emit = defineEmits(["update:active", "open", "close"]);
+
+const displayRef = ref(null);
+
+// Internal active state that syncs with prop
+const isActive = computed({
+  get: () => props.active,
+  set: (value) => emit("update:active", value),
+});
+
+const additionalClasses = computed(() => [
+  isActive.value && "in-place--active",
+  props.disabled && "in-place--disabled",
+].filter(Boolean).join(" "));
+
+const onDisplayClick = () => {
+  if (props.disabled) return;
+
+  isActive.value = true;
+  emit("open");
+};
+
+const close = () => {
+  isActive.value = false;
+  emit("close");
+
+  // Return focus to display element after closing
+  nextTick(() => {
+    const displayElement = document.querySelector(".in-place__display");
+    if (displayElement) {
+      (displayElement as HTMLElement).focus();
+    }
+  });
+};
+
+// Expose close method for parent components
+defineExpose({
+  close,
+});
+</script>