@for-the-people-initiative/design-system 1.3.3 → 1.3.4

package/dist/css/tokens.css

@@ -1169,6 +1169,25 @@
   --knob-focus-ringColor: #f97316; /* Focus ring color */
   --knob-focus-ringOffset: 2px; /* Focus ring offset */
   --knob-transition-duration: 100ms; /* Value change transition */
+  --lightbox-overlay-background: rgba(0, 0, 0, 0.92); /* Lightbox overlay backdrop color */
+  --lightbox-zIndex-overlay: 2000; /* Overlay z-index (above dialogs) */
+  --lightbox-nav-size: 48px; /* Navigation button size */
+  --lightbox-nav-iconSize: 24px; /* Navigation icon size */
+  --lightbox-nav-color-default: rgba(255, 255, 255, 0.8); /* Nav button color */
+  --lightbox-nav-color-hover: #ffffff; /* Nav button hover color */
+  --lightbox-nav-background-default: rgba(255, 255, 255, 0.1); /* Nav button background */
+  --lightbox-nav-background-hover: rgba(255, 255, 255, 0.2); /* Nav button hover background */
+  --lightbox-nav-radius: 9999px; /* Nav button border radius */
+  --lightbox-closeButton-size: 40px; /* Close button size */
+  --lightbox-closeButton-iconSize: 20px; /* Close icon size */
+  --lightbox-counter-color: rgba(255, 255, 255, 0.7); /* Counter text color */
+  --lightbox-counter-fontSize: 14px; /* Counter font size */
+  --lightbox-thumbnail-size: 64px; /* Thumbnail width/height */
+  --lightbox-thumbnail-gap: 6px; /* Gap between thumbnails */
+  --lightbox-thumbnail-radius: 5px; /* Thumbnail border radius */
+  --lightbox-thumbnail-border-active: #ffffff; /* Active thumbnail border color */
+  --lightbox-thumbnail-opacity-default: 0.5; /* Inactive thumbnail opacity */
+  --lightbox-thumbnail-opacity-active: 1; /* Active thumbnail opacity */
   --listbox-padding: 6px; /* Container padding */
   --listbox-radius: 5px; /* Container border radius */
   --listbox-border-width: 1px;

package/dist/scss/_tokens.scss

@@ -1283,6 +1283,27 @@ $knob-focus-ringColor: var(--knob-focus-ringColor); // Focus ring color
 $knob-focus-ringOffset: var(--knob-focus-ringOffset); // Focus ring offset
 $knob-transition-duration: var(--knob-transition-duration); // Value change transition
 
+// Lightbox
+$lightbox-overlay-background: var(--lightbox-overlay-background); // Lightbox overlay backdrop color
+$lightbox-zIndex-overlay: var(--lightbox-zIndex-overlay); // Overlay z-index (above dialogs)
+$lightbox-nav-size: var(--lightbox-nav-size); // Navigation button size
+$lightbox-nav-iconSize: var(--lightbox-nav-iconSize); // Navigation icon size
+$lightbox-nav-color-default: var(--lightbox-nav-color-default); // Nav button color
+$lightbox-nav-color-hover: var(--lightbox-nav-color-hover); // Nav button hover color
+$lightbox-nav-background-default: var(--lightbox-nav-background-default); // Nav button background
+$lightbox-nav-background-hover: var(--lightbox-nav-background-hover); // Nav button hover background
+$lightbox-nav-radius: var(--lightbox-nav-radius); // Nav button border radius
+$lightbox-closeButton-size: var(--lightbox-closeButton-size); // Close button size
+$lightbox-closeButton-iconSize: var(--lightbox-closeButton-iconSize); // Close icon size
+$lightbox-counter-color: var(--lightbox-counter-color); // Counter text color
+$lightbox-counter-fontSize: var(--lightbox-counter-fontSize); // Counter font size
+$lightbox-thumbnail-size: var(--lightbox-thumbnail-size); // Thumbnail width/height
+$lightbox-thumbnail-gap: var(--lightbox-thumbnail-gap); // Gap between thumbnails
+$lightbox-thumbnail-radius: var(--lightbox-thumbnail-radius); // Thumbnail border radius
+$lightbox-thumbnail-border-active: var(--lightbox-thumbnail-border-active); // Active thumbnail border color
+$lightbox-thumbnail-opacity-default: var(--lightbox-thumbnail-opacity-default); // Inactive thumbnail opacity
+$lightbox-thumbnail-opacity-active: var(--lightbox-thumbnail-opacity-active); // Active thumbnail opacity
+
 // Listbox
 $listbox-padding: var(--listbox-padding); // Container padding
 $listbox-radius: var(--listbox-radius); // Container border radius

package/dist/ts/tokens.ts

@@ -1172,6 +1172,25 @@ export const tokenNames = [
   'knob-focus-ringColor',
   'knob-focus-ringOffset',
   'knob-transition-duration',
+  'lightbox-overlay-background',
+  'lightbox-zIndex-overlay',
+  'lightbox-nav-size',
+  'lightbox-nav-iconSize',
+  'lightbox-nav-color-default',
+  'lightbox-nav-color-hover',
+  'lightbox-nav-background-default',
+  'lightbox-nav-background-hover',
+  'lightbox-nav-radius',
+  'lightbox-closeButton-size',
+  'lightbox-closeButton-iconSize',
+  'lightbox-counter-color',
+  'lightbox-counter-fontSize',
+  'lightbox-thumbnail-size',
+  'lightbox-thumbnail-gap',
+  'lightbox-thumbnail-radius',
+  'lightbox-thumbnail-border-active',
+  'lightbox-thumbnail-opacity-default',
+  'lightbox-thumbnail-opacity-active',
   'listbox-padding',
   'listbox-radius',
   'listbox-border-width',
@@ -2391,6 +2410,7 @@ export const tokenCategories = {
   inputSwitch: ['inputSwitch-width-sm', 'inputSwitch-width-md', 'inputSwitch-width-lg', 'inputSwitch-height-sm', 'inputSwitch-height-md', 'inputSwitch-height-lg', 'inputSwitch-thumb-size-sm', 'inputSwitch-thumb-size-md', 'inputSwitch-thumb-size-lg', 'inputSwitch-thumb-offset', 'inputSwitch-thumb-color-default', 'inputSwitch-thumb-shadow', 'inputSwitch-track-background-off', 'inputSwitch-track-background-on', 'inputSwitch-track-background-disabled', 'inputSwitch-label-gap', 'inputSwitch-label-color-default', 'inputSwitch-label-color-disabled', 'inputSwitch-focus-ringWidth', 'inputSwitch-focus-ringColor', 'inputSwitch-focus-ringOffset'] as const,
   input-text: ['input-text-height-sm', 'input-text-height-md', 'input-text-height-lg', 'input-text-padding-x', 'input-text-padding-y', 'input-text-fontSize-sm', 'input-text-fontSize-md', 'input-text-fontSize-lg', 'input-text-radius', 'input-text-border-width', 'input-text-border-color-default', 'input-text-border-color-hover', 'input-text-border-color-focus', 'input-text-border-color-disabled', 'input-text-border-color-error', 'input-text-background-default', 'input-text-background-disabled', 'input-text-background-hover', 'input-text-text-default', 'input-text-text-placeholder', 'input-text-text-disabled', 'input-text-focus-ringWidth', 'input-text-focus-ringColor', 'input-text-focus-ringOffset'] as const,
   knob: ['knob-size-sm', 'knob-size-md', 'knob-size-lg', 'knob-strokeWidth-sm', 'knob-strokeWidth-md', 'knob-strokeWidth-lg', 'knob-track-color', 'knob-fill-color-default', 'knob-fill-color-disabled', 'knob-valueText-fontSize-sm', 'knob-valueText-fontSize-md', 'knob-valueText-fontSize-lg', 'knob-valueText-fontWeight', 'knob-valueText-color-default', 'knob-valueText-color-disabled', 'knob-focus-ringWidth', 'knob-focus-ringColor', 'knob-focus-ringOffset', 'knob-transition-duration'] as const,
+  lightbox: ['lightbox-overlay-background', 'lightbox-zIndex-overlay', 'lightbox-nav-size', 'lightbox-nav-iconSize', 'lightbox-nav-color-default', 'lightbox-nav-color-hover', 'lightbox-nav-background-default', 'lightbox-nav-background-hover', 'lightbox-nav-radius', 'lightbox-closeButton-size', 'lightbox-closeButton-iconSize', 'lightbox-counter-color', 'lightbox-counter-fontSize', 'lightbox-thumbnail-size', 'lightbox-thumbnail-gap', 'lightbox-thumbnail-radius', 'lightbox-thumbnail-border-active', 'lightbox-thumbnail-opacity-default', 'lightbox-thumbnail-opacity-active'] as const,
   listbox: ['listbox-padding', 'listbox-radius', 'listbox-border-width', 'listbox-border-color-default', 'listbox-border-color-focus', 'listbox-border-color-disabled', 'listbox-background-default', 'listbox-background-disabled', 'listbox-maxHeight', 'listbox-filter-height', 'listbox-filter-padding-x', 'listbox-filter-background', 'listbox-filter-border', 'listbox-filter-radius', 'listbox-filter-text', 'listbox-filter-placeholder', 'listbox-filter-marginBottom', 'listbox-option-padding-x', 'listbox-option-padding-y', 'listbox-option-radius', 'listbox-option-background-default', 'listbox-option-background-hover', 'listbox-option-background-selected', 'listbox-option-background-focus', 'listbox-option-text-default', 'listbox-option-text-selected', 'listbox-option-text-disabled', 'listbox-option-fontSize', 'listbox-focus-ringWidth', 'listbox-focus-ringColor', 'listbox-focus-ringOffset', 'listbox-checkbox-size', 'listbox-checkbox-marginRight'] as const,
   mega-menu: ['mega-menu-root-background', 'mega-menu-root-padding-x', 'mega-menu-root-padding-y', 'mega-menu-root-gap', 'mega-menu-rootItem-padding-x', 'mega-menu-rootItem-padding-y', 'mega-menu-rootItem-text-color-default', 'mega-menu-rootItem-text-color-hover', 'mega-menu-rootItem-text-color-active', 'mega-menu-rootItem-text-fontSize', 'mega-menu-rootItem-text-fontWeight-default', 'mega-menu-rootItem-text-fontWeight-active', 'mega-menu-rootItem-background-default', 'mega-menu-rootItem-background-hover', 'mega-menu-rootItem-background-active', 'mega-menu-rootItem-radius', 'mega-menu-rootItem-indicator-height', 'mega-menu-rootItem-indicator-color', 'mega-menu-panel-background', 'mega-menu-panel-border-color', 'mega-menu-panel-border-width', 'mega-menu-panel-radius', 'mega-menu-panel-shadow', 'mega-menu-panel-padding', 'mega-menu-panel-gap', 'mega-menu-panel-maxWidth', 'mega-menu-panel-zIndex', 'mega-menu-column-minWidth', 'mega-menu-column-gap', 'mega-menu-category-text-color', 'mega-menu-category-text-fontSize', 'mega-menu-category-text-fontWeight', 'mega-menu-category-text-textTransform', 'mega-menu-category-text-letterSpacing', 'mega-menu-category-margin-bottom', 'mega-menu-item-padding-x', 'mega-menu-item-padding-y', 'mega-menu-item-text-color-default', 'mega-menu-item-text-color-hover', 'mega-menu-item-text-fontSize', 'mega-menu-item-background-hover', 'mega-menu-item-radius', 'mega-menu-item-icon-size', 'mega-menu-item-icon-color', 'mega-menu-item-icon-gap', 'mega-menu-item-description-color', 'mega-menu-item-description-fontSize'] as const,
   menu: ['menu-background', 'menu-border-width', 'menu-border-color', 'menu-radius', 'menu-shadow', 'menu-padding', 'menu-minWidth', 'menu-maxHeight', 'menu-zIndex', 'menu-item-padding-x', 'menu-item-padding-y', 'menu-item-gap', 'menu-item-radius', 'menu-item-background-default', 'menu-item-background-hover', 'menu-item-background-active', 'menu-item-background-disabled', 'menu-item-text-default', 'menu-item-text-disabled', 'menu-item-icon-size', 'menu-item-icon-color-default', 'menu-item-icon-color-disabled', 'menu-item-fontSize', 'menu-separator-color', 'menu-separator-margin'] as const,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@for-the-people-initiative/design-system",
   "private": false,
-  "version": "1.3.3",
+  "version": "1.3.4",
   "type": "module",
   "description": "Design system with design tokens, SCSS utilities, and Vue 3 components",
   "author": "For The People",

package/src/components/Galleria/Galleria.scss

@@ -283,7 +283,139 @@ $c: galleria;
   right: 16px;
 }
 
-// Transition animations
+// Counter
+.#{$c}__counter {
+  position: absolute;
+  bottom: var(--galleria-counter-bottom, 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--galleria-counter-padding, 6px 16px);
+  background: var(--galleria-counter-background, rgba(0, 0, 0, 0.6));
+  color: var(--galleria-counter-color, #fff);
+  font-size: var(--galleria-counter-fontSize, 14px);
+  border-radius: var(--galleria-counter-radius, 20px);
+  pointer-events: none;
+  z-index: 2;
+  font-variant-numeric: tabular-nums;
+}
+
+// Fullscreen thumbnails
+.#{$c}__fullscreen-thumbnails {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--galleria-fullscreen-thumbnails-padding, 12px 16px);
+  background: var(--galleria-fullscreen-thumbnails-background, rgba(0, 0, 0, 0.5));
+  overflow-x: auto;
+  z-index: 2;
+
+  .#{$c}__thumbnail-container {
+    justify-content: center;
+  }
+}
+
+.#{$c}__thumbnail--fullscreen {
+  width: var(--galleria-fullscreen-thumbnail-width, 64px);
+  height: var(--galleria-fullscreen-thumbnail-height, 40px);
+  border-color: rgba(255, 255, 255, 0.3);
+
+  &.#{$c}__thumbnail--active {
+    border-color: #fff;
+  }
+}
+
+// When fullscreen has thumbnails, shift counter up above them
+.#{$c}__fullscreen:has(.#{$c}__fullscreen-thumbnails) > .#{$c}__counter {
+  bottom: 80px;
+}
+
+// Loading spinner
+.#{$c}__loader {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.#{$c}__loader--fullscreen {
+  position: absolute;
+  z-index: 3;
+}
+
+.#{$c}__spinner {
+  width: var(--galleria-spinner-size, 40px);
+  height: var(--galleria-spinner-size, 40px);
+  color: var(--galleria-spinner-color, rgba(255, 255, 255, 0.7));
+  animation: galleria-spin 1s linear infinite;
+}
+
+@keyframes galleria-spin {
+  to { transform: rotate(360deg); }
+}
+
+// Zoom
+.#{$c}__fullscreen--zoomed {
+  cursor: default;
+}
+
+.#{$c}__fullscreen-image {
+  transition: transform 300ms ease;
+  cursor: zoom-in;
+}
+
+.#{$c}__fullscreen-image--zoomed {
+  cursor: zoom-out;
+  z-index: 1;
+}
+
+// Fade transition
+.galleria-fade-enter-active,
+.galleria-fade-leave-active {
+  transition: opacity var(--galleria-transition-duration, 300ms) ease;
+}
+
+.galleria-fade-enter-from,
+.galleria-fade-leave-to {
+  opacity: 0;
+}
+
+// Slide left transition (next)
+.galleria-slide-left-enter-active,
+.galleria-slide-left-leave-active {
+  transition: transform var(--galleria-transition-duration, 300ms) ease, opacity var(--galleria-transition-duration, 300ms) ease;
+}
+
+.galleria-slide-left-enter-from {
+  transform: translateX(30px);
+  opacity: 0;
+}
+
+.galleria-slide-left-leave-to {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+
+// Slide right transition (prev)
+.galleria-slide-right-enter-active,
+.galleria-slide-right-leave-active {
+  transition: transform var(--galleria-transition-duration, 300ms) ease, opacity var(--galleria-transition-duration, 300ms) ease;
+}
+
+.galleria-slide-right-enter-from {
+  transform: translateX(-30px);
+  opacity: 0;
+}
+
+.galleria-slide-right-leave-to {
+  transform: translateX(30px);
+  opacity: 0;
+}
+
+// Fullscreen open/close transition
 .galleria-fullscreen-enter-active,
 .galleria-fullscreen-leave-active {
   transition: opacity 200ms ease;

package/src/components/Galleria/Galleria.vue

@@ -2,13 +2,31 @@
   <div class="galleria" :class="additionalClasses">
     <div class="galleria__main">
       <!-- Preview area -->
-      <div class="galleria__preview" @click="onPreviewClick">
-        <img
-          v-if="activeItem"
-          :src="activeItem.src || activeItem"
-          :alt="activeItem.alt || `Image ${activeIndex + 1}`"
-          class="galleria__preview-image"
-        />
+      <div
+        class="galleria__preview"
+        @click="onPreviewClick"
+        @touchstart.passive="onTouchStart"
+        @touchmove.passive="onTouchMove"
+        @touchend="onTouchEnd"
+      >
+        <!-- Loading spinner -->
+        <div v-if="imageLoading" class="galleria__loader">
+          <svg class="galleria__spinner" viewBox="0 0 50 50">
+            <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="4" stroke-dasharray="80" stroke-linecap="round" />
+          </svg>
+        </div>
+
+        <Transition :name="transitionName" mode="out-in">
+          <img
+            v-if="activeItem"
+            :key="activeIndex"
+            :src="activeItem.src || activeItem"
+            :alt="activeItem.alt || `Image ${activeIndex + 1}`"
+            class="galleria__preview-image"
+            @load="onImageLoad"
+            @error="onImageLoad"
+          />
+        </Transition>
 
         <!-- Navigation buttons -->
         <button
@@ -83,11 +101,17 @@
       <Transition name="galleria-fullscreen">
         <div
           v-if="fullscreenVisible"
+          ref="fullscreenRef"
           class="galleria__fullscreen"
-          @click="closeFullscreen"
+          :class="{ 'galleria__fullscreen--zoomed': isZoomed }"
+          tabindex="0"
+          @click="onFullscreenClick"
           @keydown.escape="closeFullscreen"
           @keydown.left="prev"
           @keydown.right="next"
+          @touchstart.passive="onTouchStart"
+          @touchmove.passive="onTouchMove"
+          @touchend="onTouchEnd"
         >
           <button
             type="button"
@@ -113,13 +137,28 @@
             </svg>
           </button>
 
-          <img
-            v-if="activeItem"
-            :src="activeItem.src || activeItem"
-            :alt="activeItem.alt || `Image ${activeIndex + 1}`"
-            class="galleria__fullscreen-image"
-            @click.stop
-          />
+          <!-- Loading spinner in fullscreen -->
+          <div v-if="imageLoading" class="galleria__loader galleria__loader--fullscreen">
+            <svg class="galleria__spinner" viewBox="0 0 50 50">
+              <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="4" stroke-dasharray="80" stroke-linecap="round" />
+            </svg>
+          </div>
+
+          <Transition :name="transitionName" mode="out-in">
+            <img
+              v-if="activeItem"
+              :key="activeIndex"
+              :src="activeItem.src || activeItem"
+              :alt="activeItem.alt || `Image ${activeIndex + 1}`"
+              class="galleria__fullscreen-image"
+              :class="{ 'galleria__fullscreen-image--zoomed': isZoomed }"
+              :style="zoomStyle"
+              @click.stop="onImageClick"
+              @dblclick.stop="toggleZoom"
+              @load="onImageLoad"
+              @error="onImageLoad"
+            />
+          </Transition>
 
           <button
             v-if="items.length > 1"
@@ -132,6 +171,31 @@
               <polyline points="9 18 15 12 9 6" />
             </svg>
           </button>
+
+          <!-- Counter -->
+          <div v-if="showCounter && items.length > 1" class="galleria__counter">
+            {{ activeIndex + 1 }} / {{ items.length }}
+          </div>
+
+          <!-- Fullscreen thumbnails -->
+          <div v-if="showFullscreenThumbnails && items.length > 1" class="galleria__fullscreen-thumbnails">
+            <div class="galleria__thumbnail-container">
+              <button
+                v-for="(item, index) in items"
+                :key="index"
+                type="button"
+                class="galleria__thumbnail galleria__thumbnail--fullscreen"
+                :class="{ 'galleria__thumbnail--active': index === activeIndex }"
+                :aria-label="`View image ${index + 1}`"
+                @click.stop="goTo(index)"
+              >
+                <img
+                  :src="item.thumbnail || item.src || item"
+                  :alt="item.alt || `Thumbnail ${index + 1}`"
+                />
+              </button>
+            </div>
+          </div>
         </div>
       </Transition>
     </Teleport>
@@ -142,7 +206,7 @@
 
 <script setup lang="ts">
 import type { GalleriaProps, GalleriaEmits } from '../../types';
-import { computed, ref, watch, onMounted, onUnmounted } from "vue";
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } from "vue";
 
 defineOptions({ name: 'FtpGalleria' });
 
@@ -153,17 +217,34 @@ const props = withDefaults(defineProps<GalleriaProps>(), {
   showThumbnails: true,
   showItemNavigators: true,
   showIndicators: false,
+  showCounter: true,
+  showFullscreenThumbnails: true,
+  enableZoom: true,
   circular: false,
   autoplay: false,
   autoplayInterval: 4000,
   thumbnailsPosition: "bottom",
+  transition: "fade",
 });
 
 const emit = defineEmits(["update:activeIndex", "show", "hide"]);
 
 const internalIndex = ref(props.activeIndex);
 const fullscreenVisible = ref(false);
+const fullscreenRef = ref<HTMLElement | null>(null);
 const autoplayTimer = ref<ReturnType<typeof setInterval> | null>(null);
+const imageLoading = ref(false);
+const isZoomed = ref(false);
+const zoomScale = ref(1);
+const zoomOrigin = ref({ x: 50, y: 50 });
+const slideDirection = ref<'left' | 'right'>('left');
+
+// Touch tracking
+const touchStartX = ref(0);
+const touchStartY = ref(0);
+const touchDeltaX = ref(0);
+// Pinch zoom
+const initialPinchDistance = ref(0);
 
 const activeIndex = computed({
   get: () => internalIndex.value,
@@ -175,6 +256,12 @@ const activeIndex = computed({
 
 const activeItem = computed(() => props.items[activeIndex.value]);
 
+const transitionName = computed(() => {
+  if (props.transition === 'none') return '';
+  if (props.transition === 'slide') return slideDirection.value === 'left' ? 'galleria-slide-left' : 'galleria-slide-right';
+  return 'galleria-fade';
+});
+
 const additionalClasses = computed(() =>
   [
     `galleria--thumbnails-${props.thumbnailsPosition}`,
@@ -184,11 +271,53 @@ const additionalClasses = computed(() =>
     .join(" ")
 );
 
+const zoomStyle = computed(() => {
+  if (!isZoomed.value) return {};
+  return {
+    transform: `scale(${zoomScale.value})`,
+    transformOrigin: `${zoomOrigin.value.x}% ${zoomOrigin.value.y}%`,
+    cursor: 'zoom-out',
+  };
+});
+
 watch(() => props.activeIndex, (newValue) => {
   internalIndex.value = newValue;
 });
 
+// Reset zoom on image change
+watch(() => activeIndex.value, () => {
+  isZoomed.value = false;
+  zoomScale.value = 1;
+  imageLoading.value = true;
+});
+
+// Preload adjacent images
+watch(() => activeIndex.value, () => {
+  preloadAdjacent();
+}, { immediate: true });
+
+const preloadAdjacent = () => {
+  const preloadIndex = (i: number) => {
+    const item = props.items[i];
+    if (!item) return;
+    const img = new Image();
+    img.src = item.src || item;
+  };
+  if (activeIndex.value > 0) preloadIndex(activeIndex.value - 1);
+  if (activeIndex.value < props.items.length - 1) preloadIndex(activeIndex.value + 1);
+  // Also preload circular edges
+  if (props.circular && props.items.length > 1) {
+    if (activeIndex.value === 0) preloadIndex(props.items.length - 1);
+    if (activeIndex.value === props.items.length - 1) preloadIndex(0);
+  }
+};
+
+const onImageLoad = () => {
+  imageLoading.value = false;
+};
+
 const prev = () => {
+  slideDirection.value = 'right';
   if (activeIndex.value > 0) {
     activeIndex.value--;
   } else if (props.circular && props.items.length > 0) {
@@ -197,6 +326,7 @@ const prev = () => {
 };
 
 const next = () => {
+  slideDirection.value = 'left';
   if (activeIndex.value < props.items.length - 1) {
     activeIndex.value++;
   } else if (props.circular) {
@@ -205,6 +335,7 @@ const next = () => {
 };
 
 const goTo = (index: any) => {
+  slideDirection.value = index > activeIndex.value ? 'left' : 'right';
   activeIndex.value = index;
 };
 
@@ -217,15 +348,96 @@ const onPreviewClick = () => {
 const openFullscreen = () => {
   fullscreenVisible.value = true;
   document.body.style.overflow = "hidden";
+  nextTick(() => fullscreenRef.value?.focus());
   emit("show");
 };
 
 const closeFullscreen = () => {
   fullscreenVisible.value = false;
+  isZoomed.value = false;
+  zoomScale.value = 1;
   document.body.style.overflow = "";
   emit("hide");
 };
 
+const onFullscreenClick = (e: MouseEvent) => {
+  // Only close if clicking the backdrop itself
+  if (e.target === fullscreenRef.value) {
+    closeFullscreen();
+  }
+};
+
+const onImageClick = () => {
+  // Single click on image in fullscreen — do nothing (dblclick handles zoom)
+};
+
+// Zoom
+const toggleZoom = (e?: MouseEvent) => {
+  if (!props.enableZoom || !fullscreenVisible.value) return;
+  if (isZoomed.value) {
+    isZoomed.value = false;
+    zoomScale.value = 1;
+  } else {
+    isZoomed.value = true;
+    zoomScale.value = 2.5;
+    if (e) {
+      const rect = (e.target as HTMLElement).getBoundingClientRect();
+      zoomOrigin.value = {
+        x: ((e.clientX - rect.left) / rect.width) * 100,
+        y: ((e.clientY - rect.top) / rect.height) * 100,
+      };
+    }
+  }
+};
+
+// Touch/swipe
+const onTouchStart = (e: TouchEvent) => {
+  if (e.touches.length === 2 && fullscreenVisible.value && props.enableZoom) {
+    // Pinch start
+    initialPinchDistance.value = getPinchDistance(e);
+    return;
+  }
+  touchStartX.value = e.touches[0].clientX;
+  touchStartY.value = e.touches[0].clientY;
+  touchDeltaX.value = 0;
+};
+
+const onTouchMove = (e: TouchEvent) => {
+  if (e.touches.length === 2 && fullscreenVisible.value && props.enableZoom) {
+    // Pinch zoom
+    const dist = getPinchDistance(e);
+    const ratio = dist / initialPinchDistance.value;
+    if (ratio > 1.3 && !isZoomed.value) {
+      isZoomed.value = true;
+      zoomScale.value = 2.5;
+      zoomOrigin.value = { x: 50, y: 50 };
+    } else if (ratio < 0.7 && isZoomed.value) {
+      isZoomed.value = false;
+      zoomScale.value = 1;
+    }
+    return;
+  }
+  touchDeltaX.value = e.touches[0].clientX - touchStartX.value;
+};
+
+const onTouchEnd = () => {
+  if (isZoomed.value) return; // Don't swipe when zoomed
+  if (Math.abs(touchDeltaX.value) > 50) {
+    if (touchDeltaX.value > 0) {
+      prev();
+    } else {
+      next();
+    }
+  }
+  touchDeltaX.value = 0;
+};
+
+const getPinchDistance = (e: TouchEvent): number => {
+  const dx = e.touches[0].clientX - e.touches[1].clientX;
+  const dy = e.touches[0].clientY - e.touches[1].clientY;
+  return Math.sqrt(dx * dx + dy * dy);
+};
+
 const startAutoplay = () => {
   if (typeof window === 'undefined') return;
   if (props.autoplay && props.items.length > 1) {

package/src/components/Lightbox/Lightbox.scss

@@ -0,0 +1,264 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: lightbox;
+
+// Overlay
+.#{$c}__overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--lightbox-zIndex-overlay, 2000);
+  background-color: var(--lightbox-overlay-background, rgba(0, 0, 0, 0.92));
+  outline: none;
+}
+
+// Close button
+.#{$c}__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lightbox-closeButton-size, 40px);
+  height: var(--lightbox-closeButton-size, 40px);
+  padding: 0;
+  border: none;
+  background: var(--lightbox-nav-background-default, rgba(255, 255, 255, 0.1));
+  border-radius: var(--lightbox-nav-radius, 9999px);
+  color: var(--lightbox-nav-color-default, rgba(255, 255, 255, 0.8));
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: var(--lightbox-nav-background-hover, rgba(255, 255, 255, 0.2));
+    color: var(--lightbox-nav-color-hover, #ffffff);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: var(--lightbox-closeButton-iconSize, 20px);
+    height: var(--lightbox-closeButton-iconSize, 20px);
+  }
+}
+
+// Counter
+.#{$c}__counter {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  color: var(--lightbox-counter-color, rgba(255, 255, 255, 0.7));
+  font-size: var(--lightbox-counter-fontSize, 14px);
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+
+// Navigation buttons
+.#{$c}__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lightbox-nav-size, 48px);
+  height: var(--lightbox-nav-size, 48px);
+  padding: 0;
+  border: none;
+  background: var(--lightbox-nav-background-default, rgba(255, 255, 255, 0.1));
+  border-radius: var(--lightbox-nav-radius, 9999px);
+  color: var(--lightbox-nav-color-default, rgba(255, 255, 255, 0.8));
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
+
+  &:hover {
+    background: var(--lightbox-nav-background-hover, rgba(255, 255, 255, 0.2));
+    color: var(--lightbox-nav-color-hover, #ffffff);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: var(--lightbox-nav-iconSize, 24px);
+    height: var(--lightbox-nav-iconSize, 24px);
+  }
+}
+
+.#{$c}__nav--prev {
+  left: 16px;
+}
+
+.#{$c}__nav--next {
+  right: 16px;
+}
+
+// Image container
+.#{$c}__image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 64px 80px;
+  overflow: hidden;
+
+  @media (max-width: 768px) {
+    padding: 64px 16px;
+  }
+}
+
+// Image
+.#{$c}__image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  cursor: default;
+  transition: transform 0.3s ease;
+}
+
+.#{$c}__image--zoomed {
+  cursor: zoom-out;
+}
+
+// Thumbnails
+.#{$c}__thumbnails {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: var(--lightbox-thumbnail-gap, 8px);
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 12px;
+  max-width: calc(100vw - 32px);
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.#{$c}__thumbnail {
+  flex-shrink: 0;
+  width: var(--lightbox-thumbnail-size, 64px);
+  height: var(--lightbox-thumbnail-size, 64px);
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--lightbox-thumbnail-radius, 6px);
+  background: none;
+  cursor: pointer;
+  overflow: hidden;
+  opacity: var(--lightbox-thumbnail-opacity-default, 0.5);
+  transition: opacity 0.15s ease, border-color 0.15s ease;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.#{$c}__thumbnail--active {
+  opacity: var(--lightbox-thumbnail-opacity-active, 1);
+  border-color: var(--lightbox-thumbnail-border-active, #ffffff);
+}
+
+// Transitions
+.lightbox-fade-enter-active,
+.lightbox-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.lightbox-fade-enter-from,
+.lightbox-fade-leave-to {
+  opacity: 0;
+}
+
+// Slide transitions
+.lightbox-slide-left-enter-active,
+.lightbox-slide-left-leave-active,
+.lightbox-slide-right-enter-active,
+.lightbox-slide-right-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  position: absolute;
+}
+
+.lightbox-slide-left-enter-from {
+  transform: translateX(60px);
+  opacity: 0;
+}
+
+.lightbox-slide-left-leave-to {
+  transform: translateX(-60px);
+  opacity: 0;
+}
+
+.lightbox-slide-right-enter-from {
+  transform: translateX(-60px);
+  opacity: 0;
+}
+
+.lightbox-slide-right-leave-to {
+  transform: translateX(60px);
+  opacity: 0;
+}
+
+// Mobile adjustments
+@media (max-width: 768px) {
+  .#{$c}__nav {
+    width: 40px;
+    height: 40px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .#{$c}__nav--prev {
+    left: 8px;
+  }
+
+  .#{$c}__nav--next {
+    right: 8px;
+  }
+
+  .#{$c}__close {
+    top: 8px;
+    right: 8px;
+  }
+
+  .#{$c}__counter {
+    top: 12px;
+  }
+
+  .#{$c}__thumbnail {
+    width: 48px;
+    height: 48px;
+  }
+}

package/src/components/Lightbox/Lightbox.vue

@@ -0,0 +1,274 @@
+<template>
+  <Teleport to="body">
+    <Transition name="lightbox-fade">
+      <div
+        v-if="visible"
+        class="lightbox__overlay"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Image lightbox"
+        tabindex="-1"
+        @click="onOverlayClick"
+        @keydown.escape="close"
+        @keydown.left="prev"
+        @keydown.right="next"
+      >
+        <!-- Close button -->
+        <button
+          type="button"
+          class="lightbox__close"
+          aria-label="Close lightbox"
+          @click.stop="close"
+        >
+          <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>
+
+        <!-- Counter -->
+        <div v-if="showCounter && images.length > 1" class="lightbox__counter">
+          {{ currentIndex + 1 }} / {{ images.length }}
+        </div>
+
+        <!-- Previous button -->
+        <button
+          v-if="images.length > 1"
+          type="button"
+          class="lightbox__nav lightbox__nav--prev"
+          aria-label="Previous image"
+          @click.stop="prev"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </button>
+
+        <!-- Image -->
+        <div
+          class="lightbox__image-container"
+          @click.stop
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+        >
+          <Transition :name="slideDirection">
+            <img
+              :key="currentIndex"
+              :src="currentImage"
+              :alt="`Image ${currentIndex + 1} of ${images.length}`"
+              class="lightbox__image"
+              :class="{ 'lightbox__image--zoomed': isZoomed }"
+              :style="zoomStyle"
+              draggable="false"
+              @click.stop="toggleZoom"
+              @load="onImageLoad"
+            />
+          </Transition>
+        </div>
+
+        <!-- Next button -->
+        <button
+          v-if="images.length > 1"
+          type="button"
+          class="lightbox__nav lightbox__nav--next"
+          aria-label="Next image"
+          @click.stop="next"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+
+        <!-- Thumbnails -->
+        <div v-if="showThumbnails && images.length > 1" class="lightbox__thumbnails" @click.stop>
+          <button
+            v-for="(image, index) in images"
+            :key="index"
+            type="button"
+            class="lightbox__thumbnail"
+            :class="{ 'lightbox__thumbnail--active': index === currentIndex }"
+            :aria-label="`View image ${index + 1}`"
+            @click="goTo(index)"
+          >
+            <img :src="typeof image === 'string' ? image : image.src || image.thumbnail" :alt="`Thumbnail ${index + 1}`" />
+          </button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./Lightbox.scss"></style>
+
+<script setup lang="ts">
+import type { LightboxProps } from '../../types';
+import { computed, ref, watch, onUnmounted, nextTick } from "vue";
+
+defineOptions({ name: 'FtpLightbox' });
+
+const props = withDefaults(defineProps<LightboxProps>(), {
+  images: () => [],
+  visible: false,
+  activeIndex: 0,
+  showThumbnails: false,
+  showCounter: true,
+  closeOnClickOutside: true,
+  zoom: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'update:activeIndex', value: number): void
+  (e: 'show'): void
+  (e: 'hide'): void
+}>();
+
+const internalIndex = ref(props.activeIndex);
+const isZoomed = ref(false);
+const slideDirection = ref('lightbox-slide-left');
+
+// Touch/swipe state
+const touchStartX = ref(0);
+const touchStartY = ref(0);
+const touchDeltaX = ref(0);
+const isSwiping = ref(false);
+
+const currentIndex = computed({
+  get: () => internalIndex.value,
+  set: (val) => {
+    internalIndex.value = val;
+    emit('update:activeIndex', val);
+  },
+});
+
+const currentImage = computed(() => {
+  const img = props.images[currentIndex.value];
+  if (!img) return '';
+  return typeof img === 'string' ? img : (img as any).src || '';
+});
+
+const zoomStyle = computed(() => {
+  if (!isZoomed.value) return {};
+  return { cursor: 'zoom-out', transform: 'scale(2)' };
+});
+
+watch(() => props.activeIndex, (val) => {
+  internalIndex.value = val;
+});
+
+// Body scroll lock
+let didLockScroll = false;
+
+watch(() => props.visible, async (newValue) => {
+  if (newValue) {
+    document.body.style.overflow = 'hidden';
+    didLockScroll = true;
+    emit('show');
+    await nextTick();
+    // Focus the overlay for keyboard events
+    const overlay = document.querySelector('.lightbox__overlay') as HTMLElement;
+    overlay?.focus();
+  } else {
+    if (didLockScroll) {
+      document.body.style.overflow = '';
+      didLockScroll = false;
+    }
+    isZoomed.value = false;
+    emit('hide');
+  }
+});
+
+const close = () => {
+  emit('update:visible', false);
+};
+
+const onOverlayClick = () => {
+  if (props.closeOnClickOutside) {
+    close();
+  }
+};
+
+const prev = () => {
+  if (isZoomed.value) return;
+  slideDirection.value = 'lightbox-slide-right';
+  if (currentIndex.value > 0) {
+    currentIndex.value--;
+  } else {
+    currentIndex.value = props.images.length - 1;
+  }
+};
+
+const next = () => {
+  if (isZoomed.value) return;
+  slideDirection.value = 'lightbox-slide-left';
+  if (currentIndex.value < props.images.length - 1) {
+    currentIndex.value++;
+  } else {
+    currentIndex.value = 0;
+  }
+};
+
+const goTo = (index: number) => {
+  slideDirection.value = index > currentIndex.value ? 'lightbox-slide-left' : 'lightbox-slide-right';
+  isZoomed.value = false;
+  currentIndex.value = index;
+};
+
+const toggleZoom = () => {
+  if (!props.zoom) return;
+  isZoomed.value = !isZoomed.value;
+};
+
+const onImageLoad = () => {
+  // Could emit event or handle loading state
+};
+
+// Touch/swipe support
+const onTouchStart = (e: TouchEvent) => {
+  if (isZoomed.value) return;
+  touchStartX.value = e.touches[0].clientX;
+  touchStartY.value = e.touches[0].clientY;
+  touchDeltaX.value = 0;
+  isSwiping.value = false;
+};
+
+const onTouchMove = (e: TouchEvent) => {
+  if (isZoomed.value) return;
+  const deltaX = e.touches[0].clientX - touchStartX.value;
+  const deltaY = e.touches[0].clientY - touchStartY.value;
+
+  // Only swipe horizontally
+  if (Math.abs(deltaX) > Math.abs(deltaY)) {
+    isSwiping.value = true;
+    touchDeltaX.value = deltaX;
+    e.preventDefault();
+  }
+};
+
+const onTouchEnd = () => {
+  if (!isSwiping.value || isZoomed.value) return;
+  const threshold = 50;
+  if (touchDeltaX.value > threshold) {
+    prev();
+  } else if (touchDeltaX.value < -threshold) {
+    next();
+  }
+  isSwiping.value = false;
+  touchDeltaX.value = 0;
+};
+
+onUnmounted(() => {
+  if (didLockScroll) {
+    document.body.style.overflow = '';
+    didLockScroll = false;
+  }
+});
+
+defineExpose({
+  prev,
+  next,
+  goTo,
+  close,
+});
+</script>

package/src/types/index.ts

@@ -707,10 +707,14 @@ export interface GalleriaProps {
   showThumbnails?: boolean
   showItemNavigators?: boolean
   showIndicators?: boolean
+  showCounter?: boolean
+  showFullscreenThumbnails?: boolean
+  enableZoom?: boolean
   circular?: boolean
   autoplay?: boolean
   autoplayInterval?: number
   thumbnailsPosition?: Position
+  transition?: 'fade' | 'slide' | 'none'
 }
 
 export interface GalleriaEmits {
@@ -956,6 +960,34 @@ export interface KnobEmits {
   (e: 'change', payload: { value: number }): void
 }
 
+// ============================================================
+// Lightbox
+// ============================================================
+
+export interface LightboxImage {
+  src: string
+  thumbnail?: string
+  alt?: string
+  [key: string]: unknown
+}
+
+export interface LightboxProps {
+  images?: (string | LightboxImage)[]
+  visible?: boolean
+  activeIndex?: number
+  showThumbnails?: boolean
+  showCounter?: boolean
+  closeOnClickOutside?: boolean
+  zoom?: boolean
+}
+
+export interface LightboxEmits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'update:activeIndex', value: number): void
+  (e: 'show'): void
+  (e: 'hide'): void
+}
+
 // ============================================================
 // ListBox
 // ============================================================

package/tokens/components/lightbox.json

@@ -0,0 +1,119 @@
+{
+  "lightbox": {
+    "overlay": {
+      "background": {
+        "value": "rgba(0, 0, 0, 0.92)",
+        "type": "color",
+        "description": "Lightbox overlay backdrop color"
+      }
+    },
+    "zIndex": {
+      "overlay": {
+        "value": "2000",
+        "type": "number",
+        "description": "Overlay z-index (above dialogs)"
+      }
+    },
+    "nav": {
+      "size": {
+        "value": "48px",
+        "type": "dimension",
+        "description": "Navigation button size"
+      },
+      "iconSize": {
+        "value": "24px",
+        "type": "dimension",
+        "description": "Navigation icon size"
+      },
+      "color": {
+        "default": {
+          "value": "rgba(255, 255, 255, 0.8)",
+          "type": "color",
+          "description": "Nav button color"
+        },
+        "hover": {
+          "value": "#ffffff",
+          "type": "color",
+          "description": "Nav button hover color"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "rgba(255, 255, 255, 0.1)",
+          "type": "color",
+          "description": "Nav button background"
+        },
+        "hover": {
+          "value": "rgba(255, 255, 255, 0.2)",
+          "type": "color",
+          "description": "Nav button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.full}",
+        "type": "dimension",
+        "description": "Nav button border radius"
+      }
+    },
+    "closeButton": {
+      "size": {
+        "value": "40px",
+        "type": "dimension",
+        "description": "Close button size"
+      },
+      "iconSize": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Close icon size"
+      }
+    },
+    "counter": {
+      "color": {
+        "value": "rgba(255, 255, 255, 0.7)",
+        "type": "color",
+        "description": "Counter text color"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Counter font size"
+      }
+    },
+    "thumbnail": {
+      "size": {
+        "value": "64px",
+        "type": "dimension",
+        "description": "Thumbnail width/height"
+      },
+      "gap": {
+        "value": "{space.xs}",
+        "type": "dimension",
+        "description": "Gap between thumbnails"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Thumbnail border radius"
+      },
+      "border": {
+        "active": {
+          "value": "#ffffff",
+          "type": "color",
+          "description": "Active thumbnail border color"
+        }
+      },
+      "opacity": {
+        "default": {
+          "value": "0.5",
+          "type": "number",
+          "description": "Inactive thumbnail opacity"
+        },
+        "active": {
+          "value": "1",
+          "type": "number",
+          "description": "Active thumbnail opacity"
+        }
+      }
+    }
+  }
+}