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

package/src/components/TabMenu/TabMenu.scss

@@ -0,0 +1,106 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: tabmenu;
+
+.#{$c} {
+  position: relative;
+  background-color: var(--tabmenu-background, $tabmenu-background);
+  border-bottom: var(--tabmenu-border-width, $tabmenu-border-width) solid var(--tabmenu-border-color, $tabmenu-border-color);
+}
+
+.#{$c}__list {
+  display: flex;
+  align-items: stretch;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: 0;
+}
+
+.#{$c}__item {
+  position: relative;
+}
+
+.#{$c}__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tabmenu-item-gap, $tabmenu-item-gap);
+  padding: var(--tabmenu-item-padding, $tabmenu-item-padding);
+  background-color: var(--tabmenu-item-background-default, $tabmenu-item-background-default);
+  color: var(--tabmenu-item-color-default, $tabmenu-item-color-default);
+  border: none;
+  text-decoration: none;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color var(--tabmenu-transition-duration, $tabmenu-transition-duration) ease,
+              color var(--tabmenu-transition-duration, $tabmenu-transition-duration) ease;
+
+  &:hover:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--tabmenu-item-background-hover, $tabmenu-item-background-hover);
+    color: var(--tabmenu-item-color-hover, $tabmenu-item-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--tabmenu-item-color-active, $tabmenu-item-color-active);
+    outline-offset: -2px;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    color: var(--tabmenu-item-color-disabled, $tabmenu-item-color-disabled);
+    pointer-events: none;
+  }
+}
+
+.#{$c}__item--active .#{$c}__link {
+  background-color: var(--tabmenu-item-background-active, $tabmenu-item-background-active);
+  color: var(--tabmenu-item-color-active, $tabmenu-item-color-active);
+}
+
+.#{$c}__item--disabled .#{$c}__link {
+  cursor: not-allowed;
+  color: var(--tabmenu-item-color-disabled, $tabmenu-item-color-disabled);
+  pointer-events: none;
+}
+
+.#{$c}__icon {
+  width: var(--tabmenu-icon-size, $tabmenu-icon-size);
+  height: var(--tabmenu-icon-size, $tabmenu-icon-size);
+  flex-shrink: 0;
+}
+
+.#{$c}__label {
+  white-space: nowrap;
+}
+
+.#{$c}__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: white;
+  background-color: var(--tabmenu-item-color-active, $tabmenu-item-color-active);
+  border-radius: 9999px;
+}
+
+.#{$c}__inkbar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: var(--tabmenu-inkbar-height, $tabmenu-inkbar-height);
+  background-color: var(--tabmenu-inkbar-color, $tabmenu-inkbar-color);
+  border-radius: var(--tabmenu-inkbar-borderRadius, $tabmenu-inkbar-borderRadius);
+  transition: transform var(--tabmenu-transition-duration, $tabmenu-transition-duration) ease,
+              width var(--tabmenu-transition-duration, $tabmenu-transition-duration) ease;
+}

package/src/components/TabMenu/TabMenu.vue

@@ -0,0 +1,174 @@
+<template>
+  <nav class="tabmenu" role="navigation">
+    <ul class="tabmenu__list" role="menubar">
+      <li
+        v-for="(item, index) in model"
+        :key="item.key || index"
+        class="tabmenu__item"
+        :class="{
+          'tabmenu__item--active': index === activeIndex,
+          'tabmenu__item--disabled': item.disabled
+        }"
+        role="none"
+      >
+        <a
+          v-if="item.url"
+          :href="item.url"
+          :target="item.target"
+          class="tabmenu__link"
+          role="menuitem"
+          :tabindex="item.disabled ? -1 : 0"
+          :aria-disabled="item.disabled || undefined"
+          :aria-current="index === activeIndex ? 'page' : undefined"
+          @click="onTabClick($event, item, index)"
+          @keydown="onTabKeydown($event, index)"
+        >
+          <i v-if="item.icon" :class="item.icon" class="tabmenu__icon"></i>
+          <span class="tabmenu__label">{{ item.label }}</span>
+          <span v-if="item.badge" class="tabmenu__badge">{{ item.badge }}</span>
+        </a>
+        <button
+          v-else
+          type="button"
+          class="tabmenu__link"
+          role="menuitem"
+          :tabindex="item.disabled ? -1 : 0"
+          :disabled="item.disabled"
+          :aria-current="index === activeIndex ? 'page' : undefined"
+          @click="onTabClick($event, item, index)"
+          @keydown="onTabKeydown($event, index)"
+        >
+          <i v-if="item.icon" :class="item.icon" class="tabmenu__icon"></i>
+          <span class="tabmenu__label">{{ item.label }}</span>
+          <span v-if="item.badge" class="tabmenu__badge">{{ item.badge }}</span>
+        </button>
+      </li>
+    </ul>
+    <div class="tabmenu__inkbar" :style="inkbarStyle"></div>
+  </nav>
+</template>
+
+<style src="./TabMenu.scss"></style>
+
+<script setup lang="ts">
+import type { TabMenuProps, TabMenuEmits } from '../../types';
+import { ref, computed, watch, onMounted, nextTick } from "vue";
+
+defineOptions({ name: 'FtpTabMenu' });
+
+const props = withDefaults(defineProps<TabMenuProps>(), {
+  model: () => [],
+  activeIndex: 0,
+});
+
+const emit = defineEmits(["update:activeIndex", "tab-change"]);
+
+const tabRefs = ref([]);
+const inkbarStyle = ref({});
+
+const updateInkbar = async () => {
+  await nextTick();
+  const activeTab = document.querySelector(".tabmenu__item--active .tabmenu__link");
+  if (activeTab) {
+    const tabmenu = activeTab.closest(".tabmenu");
+    const tabmenuRect = tabmenu?.getBoundingClientRect();
+    const tabRect = activeTab.getBoundingClientRect();
+
+    if (tabmenuRect) {
+      inkbarStyle.value = {
+        width: `${tabRect.width}px`,
+        transform: `translateX(${tabRect.left - tabmenuRect.left}px)`,
+      };
+    }
+  }
+};
+
+onMounted(() => {
+  updateInkbar();
+});
+
+watch(() => props.activeIndex, () => {
+  updateInkbar();
+});
+
+const onTabClick = (event: MouseEvent | KeyboardEvent, item: any, index: any) => {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item, index });
+  }
+
+  emit("update:activeIndex", index);
+  emit("tab-change", { originalEvent: event, item, index });
+};
+
+const onTabKeydown = (event: KeyboardEvent, index: any) => {
+  const itemCount = props.model.length;
+
+  switch (event.key) {
+    case "ArrowRight":
+      event.preventDefault();
+      {
+        let nextIndex = index + 1;
+        while (nextIndex < itemCount && props.model[nextIndex].disabled) {
+          nextIndex++;
+        }
+        if (nextIndex < itemCount) {
+          focusTab(nextIndex);
+        }
+      }
+      break;
+    case "ArrowLeft":
+      event.preventDefault();
+      {
+        let prevIndex = index - 1;
+        while (prevIndex >= 0 && props.model[prevIndex].disabled) {
+          prevIndex--;
+        }
+        if (prevIndex >= 0) {
+          focusTab(prevIndex);
+        }
+      }
+      break;
+    case "Home":
+      event.preventDefault();
+      {
+        let firstIndex = 0;
+        while (firstIndex < itemCount && props.model[firstIndex].disabled) {
+          firstIndex++;
+        }
+        if (firstIndex < itemCount) {
+          focusTab(firstIndex);
+        }
+      }
+      break;
+    case "End":
+      event.preventDefault();
+      {
+        let lastIndex = itemCount - 1;
+        while (lastIndex >= 0 && props.model[lastIndex].disabled) {
+          lastIndex--;
+        }
+        if (lastIndex >= 0) {
+          focusTab(lastIndex);
+        }
+      }
+      break;
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      onTabClick(event, props.model[index], index);
+      break;
+  }
+};
+
+const focusTab = (index: any) => {
+  const tabs = document.querySelectorAll(".tabmenu__link");
+  if (tabs[index]) {
+    (tabs[index] as HTMLElement).focus();
+  }
+};
+</script>

package/src/components/Tabs/TabPanel.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    v-if="isActive"
+    class="tabs__panel"
+    role="tabpanel"
+    :id="`${tabsContext.tabsId}-panel-${panelIndex}`"
+    :aria-labelledby="`${tabsContext.tabsId}-tab-${panelIndex}`"
+    :tabindex="0"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TabPanelProps } from '../../types';
+import { computed, inject, onMounted, onBeforeUnmount, ref } from "vue";
+
+defineOptions({ name: 'FtpTabPanel' });
+
+const props = withDefaults(defineProps<TabPanelProps>(), {
+  disabled: false,
+});
+
+const tabsContext = inject("tabs") as any;
+const panelIndex = ref(-1);
+
+onMounted(() => {
+  panelIndex.value = tabsContext.registerTab({
+    header: props.header,
+    disabled: props.disabled,
+  });
+});
+
+onBeforeUnmount(() => {
+  if (panelIndex.value !== -1) {
+    tabsContext.unregisterTab(panelIndex.value);
+  }
+});
+
+const isActive = computed(() => tabsContext.activeIndex.value === panelIndex.value);
+</script>

package/src/components/Tabs/Tabs.scss

@@ -0,0 +1,82 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: tabs;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.#{$c}__nav {
+  display: flex;
+  position: relative;
+  border-bottom: var(--tabs-nav-borderWidth, $tabs-nav-borderWidth) solid var(--tabs-nav-borderColor, $tabs-nav-borderColor);
+}
+
+.#{$c}__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: var(--tabs-tab-padding-y, $tabs-tab-padding-y) var(--tabs-tab-padding-x, $tabs-tab-padding-x);
+  background: var(--tabs-tab-background-default, $tabs-tab-background-default);
+  border: none;
+  color: var(--tabs-tab-text-default, $tabs-tab-text-default);
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+  white-space: nowrap;
+
+  &:hover:not(.#{$c}__tab--disabled) {
+    color: var(--tabs-tab-text-hover, $tabs-tab-text-hover);
+    background: var(--tabs-tab-background-hover, $tabs-tab-background-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--tabs-focus-ringWidth, $tabs-focus-ringWidth) solid var(--tabs-focus-ringColor, $tabs-focus-ringColor);
+    outline-offset: var(--tabs-focus-ringOffset, $tabs-focus-ringOffset);
+    z-index: 1;
+  }
+}
+
+.#{$c}__tab--active {
+  background: linear-gradient(
+    90deg,
+    var(--accent-gradient-start, $accent-gradient-start),
+    var(--accent-gradient-end, $accent-gradient-end)
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.#{$c}__tab--disabled {
+  color: var(--tabs-tab-text-disabled, $tabs-tab-text-disabled);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.#{$c}__indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: var(--tabs-indicator-height, $tabs-indicator-height);
+  @include accent-gradient($angle: 90deg);
+  transition: transform 0.2s ease, width 0.2s ease;
+}
+
+.#{$c}__panels {
+  flex: 1;
+}
+
+.#{$c}__panel {
+  padding: var(--tabs-content-padding, $tabs-content-padding);
+
+  &:focus-visible {
+    outline: var(--tabs-focus-ringWidth, $tabs-focus-ringWidth) solid var(--tabs-focus-ringColor, $tabs-focus-ringColor);
+    outline-offset: calc(-1 * var(--tabs-focus-ringOffset, $tabs-focus-ringOffset));
+  }
+}

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="tabs" :class="additionalClasses">
+    <div class="tabs__nav" role="tablist" :aria-label="ariaLabel">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="tab.id"
+        type="button"
+        role="tab"
+        class="tabs__tab"
+        :class="{
+          'tabs__tab--active': index === activeIndex,
+          'tabs__tab--disabled': tab.disabled
+        }"
+        :id="`${tabsId}-tab-${index}`"
+        :aria-selected="index === activeIndex"
+        :aria-controls="`${tabsId}-panel-${index}`"
+        :tabindex="index === activeIndex ? 0 : -1"
+        :disabled="tab.disabled"
+        @click="onTabClick(index, $event)"
+        @keydown="onKeydown($event, index)"
+      >
+        {{ tab.header }}
+      </button>
+      <span
+        class="tabs__indicator"
+        :style="indicatorStyle"
+      ></span>
+    </div>
+    <div class="tabs__panels">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style src="./Tabs.scss"></style>
+
+<script setup lang="ts">
+import type { TabsProps, TabsEmits } from '../../types';
+import { ref, computed, provide, onMounted, nextTick, watch } from "vue";
+
+defineOptions({ name: 'FtpTabs' });
+
+const props = withDefaults(defineProps<TabsProps>(), {
+  activeIndex: 0,
+  ariaLabel: "Tabs",
+});
+
+const emit = defineEmits(["update:activeIndex", "tabChange", "tabClick"]);
+
+// Generate unique ID for accessibility
+const tabsId = `tabs-${Math.random().toString(36).substring(2, 9)}`;
+
+// Tab registration
+const tabs = ref<any[]>([]);
+const tabElements = ref([]);
+const navRef = ref(null);
+
+const registerTab = (tab: any) => {
+  const id = `tab-${tabs.value.length}`;
+  tabs.value.push({ ...tab, id });
+  return tabs.value.length - 1;
+};
+
+const unregisterTab = (index: any) => {
+  tabs.value.splice(index, 1);
+};
+
+// Provide context to TabPanel children
+provide("tabs", {
+  registerTab,
+  unregisterTab,
+  activeIndex: computed(() => props.activeIndex),
+  tabsId,
+});
+
+// Indicator positioning
+const indicatorStyle = ref({});
+
+const updateIndicator = async () => {
+  await nextTick();
+  const activeTab = document.querySelector(`#${tabsId}-tab-${props.activeIndex}`);
+  if (activeTab) {
+    indicatorStyle.value = {
+      width: `${(activeTab as HTMLElement).offsetWidth}px`,
+      transform: `translateX(${(activeTab as HTMLElement).offsetLeft}px)`,
+    };
+  }
+};
+
+onMounted(() => {
+  updateIndicator();
+});
+
+watch(() => props.activeIndex, updateIndicator);
+watch(() => tabs.value.length, updateIndicator);
+
+// Event handlers
+const onTabClick = (index: any, event: any) => {
+  if (tabs.value[index]?.disabled) return;
+
+  emit("tabClick", { originalEvent: event, index });
+
+  if (index !== props.activeIndex) {
+    emit("update:activeIndex", index);
+    emit("tabChange", { originalEvent: event, index });
+  }
+};
+
+const onKeydown = (event: KeyboardEvent, currentIndex: any) => {
+  const tabCount = tabs.value.length;
+  let newIndex = currentIndex;
+
+  switch (event.key) {
+    case "ArrowLeft":
+      event.preventDefault();
+      newIndex = currentIndex - 1;
+      if (newIndex < 0) newIndex = tabCount - 1;
+      while (tabs.value[newIndex]?.disabled && newIndex !== currentIndex) {
+        newIndex = newIndex - 1;
+        if (newIndex < 0) newIndex = tabCount - 1;
+      }
+      break;
+    case "ArrowRight":
+      event.preventDefault();
+      newIndex = currentIndex + 1;
+      if (newIndex >= tabCount) newIndex = 0;
+      while (tabs.value[newIndex]?.disabled && newIndex !== currentIndex) {
+        newIndex = newIndex + 1;
+        if (newIndex >= tabCount) newIndex = 0;
+      }
+      break;
+    case "Home":
+      event.preventDefault();
+      newIndex = 0;
+      while (tabs.value[newIndex]?.disabled && newIndex < tabCount - 1) {
+        newIndex++;
+      }
+      break;
+    case "End":
+      event.preventDefault();
+      newIndex = tabCount - 1;
+      while (tabs.value[newIndex]?.disabled && newIndex > 0) {
+        newIndex--;
+      }
+      break;
+    default:
+      return;
+  }
+
+  if (newIndex !== currentIndex && !tabs.value[newIndex]?.disabled) {
+    emit("update:activeIndex", newIndex);
+    emit("tabChange", { originalEvent: event, index: newIndex });
+    // Focus the new tab
+    nextTick(() => {
+      const newTab = document.querySelector(`#${tabsId}-tab-${newIndex}`);
+      (newTab as HTMLElement)?.focus();
+    });
+  }
+};
+
+const additionalClasses = computed(() => [].filter(Boolean).join(" "));
+</script>

package/src/components/Tag/Tag.scss

@@ -0,0 +1,73 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: tag;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tag-gap, $tag-gap);
+  padding: var(--tag-padding-y, $tag-padding-y) var(--tag-padding-x, $tag-padding-x);
+  font-size: var(--tag-fontSize, $tag-fontSize);
+  font-weight: var(--tag-fontWeight, $tag-fontWeight);
+  line-height: 1;
+  border-radius: var(--tag-radius-default, $tag-radius-default);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.#{$c}__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tag-iconSize, $tag-iconSize);
+  width: var(--tag-iconSize, $tag-iconSize);
+  height: var(--tag-iconSize, $tag-iconSize);
+}
+
+.#{$c}__value {
+  display: inline;
+}
+
+// Rounded (pill) variant
+.#{$c}--rounded {
+  border-radius: var(--tag-radius-rounded, $tag-radius-rounded);
+}
+
+// Brand colors
+.#{$c}--color-brand {
+  background-color: var(--tag-background-brand, $tag-background-brand);
+  color: var(--tag-text-brand, $tag-text-brand);
+}
+
+.#{$c}--color-accent {
+  @include accent-gradient();
+  color: var(--tag-text-accent, $tag-text-accent);
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+.#{$c}--color-neutral {
+  background-color: var(--tag-background-neutral, $tag-background-neutral);
+  color: var(--tag-text-neutral, $tag-text-neutral);
+}
+
+// Status colors
+.#{$c}--color-success {
+  background-color: var(--tag-background-success, $tag-background-success);
+  color: var(--tag-text-success, $tag-text-success);
+}
+
+.#{$c}--color-warning {
+  background-color: var(--tag-background-warning, $tag-background-warning);
+  color: var(--tag-text-warning, $tag-text-warning);
+}
+
+.#{$c}--color-danger {
+  background-color: var(--tag-background-danger, $tag-background-danger);
+  color: var(--tag-text-danger, $tag-text-danger);
+}
+
+.#{$c}--color-info {
+  background-color: var(--tag-background-info, $tag-background-info);
+  color: var(--tag-text-info, $tag-text-info);
+}

package/src/components/Tag/Tag.vue

@@ -0,0 +1,37 @@
+<template>
+  <span class="tag" :class="additionalClasses">
+    <slot name="icon">
+      <i v-if="icon" :class="icon" class="tag__icon"></i>
+    </slot>
+    <span v-if="value || $slots.default" class="tag__value">
+      <slot>{{ value }}</slot>
+    </span>
+  </span>
+</template>
+
+<style src="./Tag.scss"></style>
+
+<script setup lang="ts">
+import type { TagProps } from '../../types';
+import { computed, useSlots } from "vue";
+
+defineOptions({ name: 'FtpTag' });
+
+const props = withDefaults(defineProps<TagProps>(), {
+  value: null,
+  color: "neutral",
+  icon: null,
+  rounded: false,
+});
+
+const $slots = useSlots();
+
+const additionalClasses = computed(() =>
+  [
+    `tag--color-${props.color}`,
+    props.rounded ? "tag--rounded" : "",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>