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

package/src/components/MegaMenu/MegaMenu.scss

@@ -0,0 +1,280 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: mega-menu;
+
+.#{$c} {
+  position: relative;
+  background-color: var(--mega-menu-root-background, $mega-menu-root-background);
+}
+
+.#{$c}__mobile-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--mega-menu-rootItem-text-color-default, $mega-menu-rootItem-text-color-default);
+  cursor: pointer;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  @media (max-width: 768px) {
+    display: flex;
+  }
+}
+
+.#{$c}__root {
+  display: flex;
+  align-items: center;
+  gap: var(--mega-menu-root-gap, $mega-menu-root-gap);
+  margin: 0;
+  padding: var(--mega-menu-root-padding-y, $mega-menu-root-padding-y) var(--mega-menu-root-padding-x, $mega-menu-root-padding-x);
+  list-style: none;
+
+  @media (max-width: 768px) {
+    display: none;
+    flex-direction: column;
+    align-items: stretch;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: var(--mega-menu-root-background, $mega-menu-root-background);
+    border-top: 1px solid var(--mega-menu-panel-border-color, $mega-menu-panel-border-color);
+    z-index: var(--mega-menu-panel-zIndex, $mega-menu-panel-zIndex);
+
+    .#{$c}--mobile-open & {
+      display: flex;
+    }
+  }
+}
+
+.#{$c}--horizontal {
+  .#{$c}__root {
+    flex-direction: row;
+
+    @media (max-width: 768px) {
+      flex-direction: column;
+    }
+  }
+}
+
+.#{$c}--vertical {
+  .#{$c}__root {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .#{$c}__panel {
+    left: 100%;
+    top: 0;
+  }
+}
+
+.#{$c}__root-item {
+  position: relative;
+}
+
+.#{$c}__root-link {
+  display: flex;
+  align-items: center;
+  gap: var(--inline-xs, $inline-xs);
+  padding: var(--mega-menu-rootItem-padding-y, $mega-menu-rootItem-padding-y) var(--mega-menu-rootItem-padding-x, $mega-menu-rootItem-padding-x);
+  font-size: var(--mega-menu-rootItem-text-fontSize, $mega-menu-rootItem-text-fontSize);
+  font-weight: var(--mega-menu-rootItem-text-fontWeight-default, $mega-menu-rootItem-text-fontWeight-default);
+  color: var(--mega-menu-rootItem-text-color-default, $mega-menu-rootItem-text-color-default);
+  background-color: var(--mega-menu-rootItem-background-default, $mega-menu-rootItem-background-default);
+  border-radius: var(--mega-menu-rootItem-radius, $mega-menu-rootItem-radius);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    color: var(--mega-menu-rootItem-text-color-hover, $mega-menu-rootItem-text-color-hover);
+    background-color: var(--mega-menu-rootItem-background-hover, $mega-menu-rootItem-background-hover);
+  }
+}
+
+.#{$c}__root-item--active .#{$c}__root-link {
+  color: var(--mega-menu-rootItem-text-color-active, $mega-menu-rootItem-text-color-active);
+  font-weight: var(--mega-menu-rootItem-text-fontWeight-active, $mega-menu-rootItem-text-fontWeight-active);
+  background-color: var(--mega-menu-rootItem-background-active, $mega-menu-rootItem-background-active);
+}
+
+.#{$c}__root-item--disabled .#{$c}__root-link {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.#{$c}__root-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__root-label {
+  white-space: nowrap;
+}
+
+.#{$c}__root-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  transition: transform 0.2s ease;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .#{$c}__root-item--active & {
+    transform: rotate(180deg);
+  }
+}
+
+.#{$c}__panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 100%;
+  max-width: var(--mega-menu-panel-maxWidth, $mega-menu-panel-maxWidth);
+  padding: var(--mega-menu-panel-padding, $mega-menu-panel-padding);
+  background-color: var(--mega-menu-panel-background, $mega-menu-panel-background);
+  border: var(--mega-menu-panel-border-width, $mega-menu-panel-border-width) solid var(--mega-menu-panel-border-color, $mega-menu-panel-border-color);
+  border-radius: var(--mega-menu-panel-radius, $mega-menu-panel-radius);
+  box-shadow: var(--mega-menu-panel-shadow, $mega-menu-panel-shadow);
+  z-index: var(--mega-menu-panel-zIndex, $mega-menu-panel-zIndex);
+
+  @media (max-width: 768px) {
+    position: static;
+    max-width: 100%;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    background-color: var(--mega-menu-root-background, $mega-menu-root-background);
+  }
+}
+
+.#{$c}__columns {
+  display: flex;
+  gap: var(--mega-menu-panel-gap, $mega-menu-panel-gap);
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: var(--mega-menu-column-gap, $mega-menu-column-gap);
+  }
+}
+
+.#{$c}__column {
+  min-width: var(--mega-menu-column-minWidth, $mega-menu-column-minWidth);
+
+  @media (max-width: 768px) {
+    min-width: auto;
+  }
+}
+
+.#{$c}__category {
+  display: block;
+  margin-bottom: var(--mega-menu-category-margin-bottom, $mega-menu-category-margin-bottom);
+  font-size: var(--mega-menu-category-text-fontSize, $mega-menu-category-text-fontSize);
+  font-weight: var(--mega-menu-category-text-fontWeight, $mega-menu-category-text-fontWeight);
+  color: var(--mega-menu-category-text-color, $mega-menu-category-text-color);
+  text-transform: var(--mega-menu-category-text-textTransform, $mega-menu-category-text-textTransform);
+  letter-spacing: var(--mega-menu-category-text-letterSpacing, $mega-menu-category-text-letterSpacing);
+}
+
+.#{$c}__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mega-menu-column-gap, $mega-menu-column-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.#{$c}__item {
+  margin: 0;
+}
+
+.#{$c}__item--disabled .#{$c}__link {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.#{$c}__link {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mega-menu-item-icon-gap, $mega-menu-item-icon-gap);
+  padding: var(--mega-menu-item-padding-y, $mega-menu-item-padding-y) var(--mega-menu-item-padding-x, $mega-menu-item-padding-x);
+  font-size: var(--mega-menu-item-text-fontSize, $mega-menu-item-text-fontSize);
+  color: var(--mega-menu-item-text-color-default, $mega-menu-item-text-color-default);
+  text-decoration: none;
+  border-radius: var(--mega-menu-item-radius, $mega-menu-item-radius);
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    color: var(--mega-menu-item-text-color-hover, $mega-menu-item-text-color-hover);
+    background-color: var(--mega-menu-item-background-hover, $mega-menu-item-background-hover);
+  }
+}
+
+.#{$c}__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--mega-menu-item-icon-size, $mega-menu-item-icon-size);
+  height: var(--mega-menu-item-icon-size, $mega-menu-item-icon-size);
+  color: var(--mega-menu-item-icon-color, $mega-menu-item-icon-color);
+  flex-shrink: 0;
+  margin-top: 2px;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.#{$c}__label {
+  line-height: 1.4;
+}
+
+.#{$c}__description {
+  margin-top: 2px;
+  font-size: var(--mega-menu-item-description-fontSize, $mega-menu-item-description-fontSize);
+  color: var(--mega-menu-item-description-color, $mega-menu-item-description-color);
+  line-height: 1.4;
+}
+
+// Panel transition
+.#{$c}-panel-enter-active,
+.#{$c}-panel-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.#{$c}-panel-enter-from,
+.#{$c}-panel-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}

package/src/components/MegaMenu/MegaMenu.vue

@@ -0,0 +1,218 @@
+<template>
+  <nav
+    class="mega-menu"
+    :class="[
+      `mega-menu--${orientation}`,
+      { 'mega-menu--mobile-open': mobileMenuOpen }
+    ]"
+  >
+    <button
+      type="button"
+      class="mega-menu__mobile-toggle"
+      aria-label="Toggle menu"
+      @click="mobileMenuOpen = !mobileMenuOpen"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="3" y1="12" x2="21" y2="12" />
+        <line x1="3" y1="6" x2="21" y2="6" />
+        <line x1="3" y1="18" x2="21" y2="18" />
+      </svg>
+    </button>
+
+    <ul class="mega-menu__root" role="menubar">
+      <li
+        v-for="(item, index) in model"
+        :key="item.key || index"
+        class="mega-menu__root-item"
+        :class="{
+          'mega-menu__root-item--active': activeRootItem === item,
+          'mega-menu__root-item--disabled': item.disabled
+        }"
+        role="none"
+        @mouseenter="onRootItemMouseEnter(item)"
+        @mouseleave="onRootItemMouseLeave"
+      >
+        <a
+          class="mega-menu__root-link"
+          :href="item.url || '#'"
+          role="menuitem"
+          :aria-haspopup="item.items?.length ? 'true' : undefined"
+          :aria-expanded="activeRootItem === item ? 'true' : undefined"
+          @click="onRootItemClick(item, $event)"
+        >
+          <span v-if="item.icon" class="mega-menu__root-icon">
+            <component :is="item.icon" v-if="typeof item.icon === 'object'" />
+            <span v-else v-html="item.icon" />
+          </span>
+          <span class="mega-menu__root-label">{{ item.label }}</span>
+          <span v-if="item.items?.length" class="mega-menu__root-arrow">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </span>
+        </a>
+
+        <!-- Dropdown Panel -->
+        <Transition name="mega-menu-panel">
+          <div
+            v-if="item.items?.length && activeRootItem === item"
+            class="mega-menu__panel"
+            role="menu"
+            @mouseenter="onPanelMouseEnter"
+            @mouseleave="onPanelMouseLeave"
+          >
+            <div class="mega-menu__columns">
+              <div
+                v-for="(column, colIndex) in item.items"
+                :key="column.key || colIndex"
+                class="mega-menu__column"
+              >
+                <span v-if="column.label" class="mega-menu__category">
+                  {{ column.label }}
+                </span>
+                <ul class="mega-menu__list">
+                  <li
+                    v-for="(subItem, subIndex) in column.items || [column]"
+                    :key="subItem.key || subIndex"
+                    class="mega-menu__item"
+                    :class="{ 'mega-menu__item--disabled': subItem.disabled }"
+                    role="none"
+                  >
+                    <a
+                      class="mega-menu__link"
+                      :href="subItem.url || '#'"
+                      role="menuitem"
+                      @click="onItemClick(subItem, $event)"
+                    >
+                      <span v-if="subItem.icon" class="mega-menu__icon">
+                        <component :is="subItem.icon" v-if="typeof subItem.icon === 'object'" />
+                        <span v-else v-html="subItem.icon" />
+                      </span>
+                      <span class="mega-menu__content">
+                        <span class="mega-menu__label">{{ subItem.label }}</span>
+                        <span v-if="subItem.description" class="mega-menu__description">
+                          {{ subItem.description }}
+                        </span>
+                      </span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style src="./MegaMenu.scss"></style>
+
+<script setup lang="ts">
+import type { MegaMenuProps, MegaMenuEmits } from '../../types';
+import { ref, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpMegaMenu' });
+
+const props = withDefaults(defineProps<MegaMenuProps>(), {
+  model: () => [],
+  orientation: "horizontal",
+});
+
+const emit = defineEmits(["item-click"]);
+
+const activeRootItem = ref<any>(null);
+const mobileMenuOpen = ref(false);
+let closeTimeout: ReturnType<typeof setTimeout> | null = null;
+
+function onRootItemClick(item: any, event: any) {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (item.items?.length) {
+    event.preventDefault();
+    if (activeRootItem.value === item) {
+      activeRootItem.value = null;
+    } else {
+      activeRootItem.value = item;
+    }
+    return;
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+}
+
+function onRootItemMouseEnter(item: any) {
+  if (item.disabled) return;
+
+  clearTimeout(closeTimeout!);
+
+  if (item.items?.length) {
+    activeRootItem.value = item;
+  }
+}
+
+function onRootItemMouseLeave() {
+  closeTimeout = setTimeout(() => {
+    activeRootItem.value = null;
+  }, 150);
+}
+
+function onPanelMouseEnter() {
+  clearTimeout(closeTimeout!);
+}
+
+function onPanelMouseLeave() {
+  closeTimeout = setTimeout(() => {
+    activeRootItem.value = null;
+  }, 150);
+}
+
+function onItemClick(item: any, event: any) {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (!item.url || item.url === "#") {
+    event.preventDefault();
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+  activeRootItem.value = null;
+  mobileMenuOpen.value = false;
+}
+
+function onDocumentClick(event: MouseEvent) {
+  if (!(event.target as HTMLElement).closest(".mega-menu")) {
+    activeRootItem.value = null;
+    mobileMenuOpen.value = false;
+  }
+}
+
+function onEscapeKey(event: KeyboardEvent) {
+  if (event.key === "Escape") {
+    activeRootItem.value = null;
+    mobileMenuOpen.value = false;
+  }
+}
+
+onMounted(() => {
+  document.addEventListener("click", onDocumentClick);
+  document.addEventListener("keydown", onEscapeKey);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", onDocumentClick);
+  document.removeEventListener("keydown", onEscapeKey);
+  clearTimeout(closeTimeout!);
+});
+</script>

package/src/components/Menu/Menu.scss

@@ -0,0 +1,102 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/elevation" as *;
+
+$c: menu;
+
+.#{$c} {
+  @include elevation(3);
+  // Component token overrides
+  background-color: var(--menu-background, $menu-background);
+  border-color: var(--menu-border-color, $menu-border-color);
+  border-width: var(--menu-border-width, $menu-border-width);
+  border-radius: var(--menu-radius, $menu-radius);
+  min-width: var(--menu-minWidth, $menu-minWidth);
+  max-height: var(--menu-maxHeight, $menu-maxHeight);
+  overflow-y: auto;
+  padding: var(--menu-padding, $menu-padding);
+}
+
+.#{$c}--popup {
+  position: fixed;
+  z-index: var(--menu-zIndex, $menu-zIndex);
+  box-shadow: var(--menu-shadow, $menu-shadow);
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+.#{$c}--popup.#{$c}--visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.#{$c}__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  gap: var(--menu-item-gap, $menu-item-gap);
+  padding: var(--menu-item-padding-y, $menu-item-padding-y) var(--menu-item-padding-x, $menu-item-padding-x);
+  background-color: var(--menu-item-background-default, $menu-item-background-default);
+  color: var(--menu-item-text-default, $menu-item-text-default);
+  font-size: var(--menu-item-fontSize, $menu-item-fontSize);
+  border-radius: var(--menu-item-radius, $menu-item-radius);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+
+  &:hover:not(.#{$c}__item--disabled) {
+    background-color: var(--menu-item-background-hover, $menu-item-background-hover);
+  }
+
+  &:active:not(.#{$c}__item--disabled) {
+    background-color: var(--menu-item-background-active, $menu-item-background-active);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--menu-item-text-default, $menu-item-text-default);
+    outline-offset: -2px;
+  }
+}
+
+.#{$c}__item--disabled {
+  cursor: not-allowed;
+  color: var(--menu-item-text-disabled, $menu-item-text-disabled);
+
+  .#{$c}__item-icon {
+    color: var(--menu-item-icon-color-disabled, $menu-item-icon-color-disabled);
+  }
+}
+
+.#{$c}__item-icon {
+  flex-shrink: 0;
+  width: var(--menu-item-icon-size, $menu-item-icon-size);
+  height: var(--menu-item-icon-size, $menu-item-icon-size);
+  font-size: var(--menu-item-icon-size, $menu-item-icon-size);
+  color: var(--menu-item-icon-color-default, $menu-item-icon-color-default);
+}
+
+.#{$c}__item-label {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.#{$c}__separator {
+  height: 1px;
+  background-color: var(--menu-separator-color, $menu-separator-color);
+  margin: var(--menu-separator-margin, $menu-separator-margin) 0;
+}