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

package/src/components/ConfirmPopup/ConfirmPopup.scss

@@ -0,0 +1,180 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: confirm-popup;
+
+.#{$c} {
+  position: fixed;
+  z-index: var(--confirmPopup-zIndex, $confirmPopup-zIndex);
+  padding: var(--confirmPopup-padding-y, $confirmPopup-padding-y) var(--confirmPopup-padding-x, $confirmPopup-padding-x);
+  background-color: var(--confirmPopup-background, $confirmPopup-background);
+  border-radius: var(--confirmPopup-radius, $confirmPopup-radius);
+  box-shadow: var(--confirmPopup-shadow, $confirmPopup-shadow);
+  border: var(--confirmPopup-border-width, $confirmPopup-border-width) solid var(--confirmPopup-border-color, $confirmPopup-border-color);
+  max-width: var(--confirmPopup-maxWidth, $confirmPopup-maxWidth);
+}
+
+.#{$c}__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--inline-s, $inline-s);
+  margin-bottom: var(--confirmPopup-gap-content, $confirmPopup-gap-content);
+}
+
+.#{$c}__icon {
+  flex-shrink: 0;
+  width: var(--confirmPopup-icon-size, $confirmPopup-icon-size);
+  height: var(--confirmPopup-icon-size, $confirmPopup-icon-size);
+  color: var(--confirmPopup-icon-color, $confirmPopup-icon-color);
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__message {
+  color: var(--confirmPopup-message-color, $confirmPopup-message-color);
+  font-size: var(--confirmPopup-message-fontSize, $confirmPopup-message-fontSize);
+  line-height: 1.4;
+}
+
+.#{$c}__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--confirmPopup-gap-buttons, $confirmPopup-gap-buttons);
+}
+
+// Buttons
+.#{$c}__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--inset-2xs, $inset-2xs) var(--inset-s, $inset-s);
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: var(--radius-subtle, $radius-subtle);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__button--reject {
+  background-color: transparent;
+  border-color: var(--border-default, $border-default);
+  color: var(--text-default, $text-default);
+
+  &:hover {
+    background-color: var(--surface-muted, $surface-muted);
+  }
+
+  &:active {
+    background-color: var(--surface-muted, $surface-muted);
+  }
+}
+
+.#{$c}__button--accept {
+  background-color: var(--intent-action-default, $intent-action-default);
+  border-color: var(--intent-action-default, $intent-action-default);
+  color: var(--text-inverse, $text-inverse);
+
+  &:hover {
+    background-color: var(--intent-action-hover, $intent-action-hover);
+    border-color: var(--intent-action-hover, $intent-action-hover);
+  }
+
+  &:active {
+    background-color: var(--intent-action-active, $intent-action-active);
+    border-color: var(--intent-action-active, $intent-action-active);
+  }
+}
+
+// Arrow
+.#{$c}__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+$arrow-size: var(--confirmPopup-arrow-size, $confirmPopup-arrow-size);
+
+// Position: Top (arrow points down)
+.#{$c}--top {
+  .#{$c}__arrow {
+    bottom: calc(-1 * #{$arrow-size});
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: #{$arrow-size} #{$arrow-size} 0 #{$arrow-size};
+    border-color: var(--confirmPopup-background, $confirmPopup-background) transparent transparent transparent;
+  }
+}
+
+// Position: Bottom (arrow points up)
+.#{$c}--bottom {
+  .#{$c}__arrow {
+    top: calc(-1 * #{$arrow-size});
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 #{$arrow-size} #{$arrow-size} #{$arrow-size};
+    border-color: transparent transparent var(--confirmPopup-background, $confirmPopup-background) transparent;
+  }
+}
+
+// Position: Left (arrow points right)
+.#{$c}--left {
+  .#{$c}__arrow {
+    right: calc(-1 * #{$arrow-size});
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: #{$arrow-size} 0 #{$arrow-size} #{$arrow-size};
+    border-color: transparent transparent transparent var(--confirmPopup-background, $confirmPopup-background);
+  }
+}
+
+// Position: Right (arrow points left)
+.#{$c}--right {
+  .#{$c}__arrow {
+    left: calc(-1 * #{$arrow-size});
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: #{$arrow-size} #{$arrow-size} #{$arrow-size} 0;
+    border-color: transparent var(--confirmPopup-background, $confirmPopup-background) transparent transparent;
+  }
+}
+
+// Transition animation
+.#{$c}-fade-enter-active,
+.#{$c}-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.#{$c}-fade-enter-from,
+.#{$c}-fade-leave-to {
+  opacity: 0;
+}
+
+.#{$c}-fade-enter-from.#{$c}--top,
+.#{$c}-fade-leave-to.#{$c}--top {
+  transform: translateY(4px);
+}
+
+.#{$c}-fade-enter-from.#{$c}--bottom,
+.#{$c}-fade-leave-to.#{$c}--bottom {
+  transform: translateY(-4px);
+}
+
+.#{$c}-fade-enter-from.#{$c}--left,
+.#{$c}-fade-leave-to.#{$c}--left {
+  transform: translateX(4px);
+}
+
+.#{$c}-fade-enter-from.#{$c}--right,
+.#{$c}-fade-leave-to.#{$c}--right {
+  transform: translateX(-4px);
+}

package/src/components/ConfirmPopup/ConfirmPopup.vue

@@ -0,0 +1,185 @@
+<template>
+  <Teleport to="body">
+    <Transition name="confirm-popup-fade">
+      <div
+        v-if="isVisible"
+        ref="popupRef"
+        class="confirm-popup"
+        :class="positionClass"
+        :style="popupStyle"
+        role="alertdialog"
+        aria-modal="false"
+        :aria-describedby="messageId"
+      >
+        <div class="confirm-popup__content">
+          <div v-if="showIcon" class="confirm-popup__icon">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+              <line x1="12" y1="9" x2="12" y2="13" />
+              <line x1="12" y1="17" x2="12.01" y2="17" />
+            </svg>
+          </div>
+          <span :id="messageId" class="confirm-popup__message">{{ message }}</span>
+        </div>
+        <div class="confirm-popup__footer">
+          <button
+            type="button"
+            class="confirm-popup__button confirm-popup__button--reject"
+            @click="reject"
+          >
+            {{ rejectLabel }}
+          </button>
+          <button
+            type="button"
+            class="confirm-popup__button confirm-popup__button--accept"
+            @click="accept"
+          >
+            {{ acceptLabel }}
+          </button>
+        </div>
+        <span class="confirm-popup__arrow" />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./ConfirmPopup.scss"></style>
+
+<script setup lang="ts">
+import type { ConfirmPopupProps, ConfirmPopupEmits } from '../../types';
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpConfirmPopup' });
+
+const props = withDefaults(defineProps<ConfirmPopupProps>(), {
+  target: null,
+  message: "Are you sure?",
+  acceptLabel: "Yes",
+  rejectLabel: "No",
+  showIcon: true,
+  position: "top",
+});
+
+const emit = defineEmits(["accept", "reject"]);
+
+const isVisible = ref(false);
+const popupRef = ref<HTMLElement | null>(null);
+const popupStyle = ref({});
+const targetElement = ref<HTMLElement | null>(null);
+
+const messageId = `confirm-popup-message-${Math.random().toString(36).substr(2, 9)}`;
+
+const positionClass = computed(() => `confirm-popup--${props.position}`);
+
+function show(event: Event) {
+  if (event?.currentTarget) {
+    targetElement.value = event.currentTarget as HTMLElement;
+  } else if (typeof props.target === "string") {
+    targetElement.value = document.querySelector(props.target) as HTMLElement | null;
+  } else if (props.target) {
+    targetElement.value = props.target;
+  }
+
+  isVisible.value = true;
+  nextTick(updatePosition);
+}
+
+function hide() {
+  isVisible.value = false;
+}
+
+function accept() {
+  emit("accept");
+  hide();
+}
+
+function reject() {
+  emit("reject");
+  hide();
+}
+
+function updatePosition() {
+  if (!targetElement.value || !popupRef.value) return;
+
+  const targetRect = targetElement.value.getBoundingClientRect();
+  const popupRect = popupRef.value.getBoundingClientRect();
+  const offset = 10; // Matches confirmPopup.offset token
+
+  let top, left;
+
+  switch (props.position) {
+    case "top":
+      top = targetRect.top - popupRect.height - offset;
+      left = targetRect.left + (targetRect.width - popupRect.width) / 2;
+      break;
+    case "bottom":
+      top = targetRect.bottom + offset;
+      left = targetRect.left + (targetRect.width - popupRect.width) / 2;
+      break;
+    case "left":
+      top = targetRect.top + (targetRect.height - popupRect.height) / 2;
+      left = targetRect.left - popupRect.width - offset;
+      break;
+    case "right":
+      top = targetRect.top + (targetRect.height - popupRect.height) / 2;
+      left = targetRect.right + offset;
+      break;
+  }
+
+  // Keep popup within viewport
+  const viewportPadding = 8;
+  left = Math.max(viewportPadding, Math.min(left, window.innerWidth - popupRect.width - viewportPadding));
+  top = Math.max(viewportPadding, Math.min(top, window.innerHeight - popupRect.height - viewportPadding));
+
+  popupStyle.value = {
+    top: `${top}px`,
+    left: `${left}px`,
+  };
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (isVisible.value && popupRef.value && !popupRef.value.contains(event.target as Node)) {
+    if (targetElement.value && targetElement.value.contains(event.target as Node)) {
+      return;
+    }
+    reject();
+  }
+}
+
+function handleScroll() {
+  if (isVisible.value) {
+    updatePosition();
+  }
+}
+
+function handleResize() {
+  if (isVisible.value) {
+    updatePosition();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("click", handleClickOutside, true);
+  window.addEventListener("scroll", handleScroll, true);
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside, true);
+  window.removeEventListener("scroll", handleScroll, true);
+  window.removeEventListener("resize", handleResize);
+});
+
+// Expose methods for external control
+defineExpose({
+  show,
+  hide,
+});
+</script>

package/src/components/ContextMenu/ContextMenu.scss

@@ -0,0 +1,171 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/elevation" as *;
+
+$c: context-menu;
+
+.#{$c} {
+  @include elevation(3);
+  position: fixed;
+  min-width: var(--context-menu-minWidth, $context-menu-minWidth);
+  max-width: var(--context-menu-maxWidth, $context-menu-maxWidth);
+  // Component token overrides
+  background-color: var(--context-menu-background, $context-menu-background);
+  border-color: var(--context-menu-border-color, $context-menu-border-color);
+  border-width: var(--context-menu-border-width, $context-menu-border-width);
+  border-radius: var(--context-menu-radius, $context-menu-radius);
+  box-shadow: var(--context-menu-shadow, $context-menu-shadow);
+  padding: var(--context-menu-padding-y, $context-menu-padding-y) 0;
+  z-index: var(--context-menu-zIndex, $context-menu-zIndex);
+  outline: none;
+}
+
+.#{$c}__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  gap: var(--context-menu-item-icon-gap, $context-menu-item-icon-gap);
+  padding: var(--context-menu-item-padding-y, $context-menu-item-padding-y) var(--context-menu-item-padding-x, $context-menu-item-padding-x);
+  font-size: var(--context-menu-item-text-fontSize, $context-menu-item-text-fontSize);
+  color: var(--context-menu-item-text-color-default, $context-menu-item-text-color-default);
+  background-color: var(--context-menu-item-background-default, $context-menu-item-background-default);
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background-color: var(--context-menu-item-background-hover, $context-menu-item-background-hover);
+    color: var(--context-menu-item-text-color-hover, $context-menu-item-text-color-hover);
+  }
+}
+
+.#{$c}__item--disabled {
+  color: var(--context-menu-item-text-color-disabled, $context-menu-item-text-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.#{$c}__item--has-submenu {
+  > .#{$c}__submenu {
+    position: absolute;
+    left: 100%;
+    top: var(--context-menu-submenu-offset, $context-menu-submenu-offset);
+    min-width: var(--context-menu-minWidth, $context-menu-minWidth);
+    background-color: var(--context-menu-background, $context-menu-background);
+    border: var(--context-menu-border-width, $context-menu-border-width) solid var(--context-menu-border-color, $context-menu-border-color);
+    border-radius: var(--context-menu-radius, $context-menu-radius);
+    box-shadow: var(--context-menu-shadow, $context-menu-shadow);
+    padding: var(--context-menu-padding-y, $context-menu-padding-y) 0;
+    list-style: none;
+    margin: 0;
+    z-index: 1;
+  }
+}
+
+.#{$c}__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--context-menu-item-icon-size, $context-menu-item-icon-size);
+  height: var(--context-menu-item-icon-size, $context-menu-item-icon-size);
+  color: var(--context-menu-item-icon-color, $context-menu-item-icon-color);
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.#{$c}__shortcut {
+  margin-left: auto;
+  padding-left: var(--context-menu-item-icon-gap, $context-menu-item-icon-gap);
+  font-size: var(--context-menu-item-shortcut-fontSize, $context-menu-item-shortcut-fontSize);
+  color: var(--context-menu-item-shortcut-color, $context-menu-item-shortcut-color);
+  white-space: nowrap;
+}
+
+.#{$c}__arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--context-menu-submenu-arrow-size, $context-menu-submenu-arrow-size);
+  height: var(--context-menu-submenu-arrow-size, $context-menu-submenu-arrow-size);
+  margin-left: auto;
+  color: var(--context-menu-submenu-arrow-color, $context-menu-submenu-arrow-color);
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__separator {
+  height: 1px;
+  margin: var(--context-menu-separator-margin, $context-menu-separator-margin) 0;
+  background-color: var(--context-menu-separator-color, $context-menu-separator-color);
+}
+
+// Popup mode styles
+.#{$c}--popup {
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+// Arrow pointer indicator
+.#{$c}__pointer {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: var(--context-menu-background, $context-menu-background);
+  border: var(--context-menu-border-width, $context-menu-border-width) solid var(--context-menu-border-color, $context-menu-border-color);
+  transform: translateX(-50%) rotate(45deg);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.#{$c}--below .#{$c}__pointer {
+  top: -7px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.#{$c}--above .#{$c}__pointer {
+  bottom: -7px;
+  border-left: none;
+  border-top: none;
+}
+
+// Transition animations
+.#{$c}-fade-enter-active,
+.#{$c}-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.#{$c}-fade-enter-from,
+.#{$c}-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+// Global styles for trigger highlight
+:global(.context-menu-trigger--active) {
+  background-color: var(--context-menu-trigger-background-active, rgba(0, 0, 0, 0.05)) !important;
+  box-shadow: 0 0 0 2px var(--context-menu-trigger-ring-color, currentColor);
+  border-radius: var(--context-menu-trigger-radius, 4px);
+}