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

package/src/components/ToggleSwitch/ToggleSwitch.vue

@@ -0,0 +1,44 @@
+<template>
+  <label class="toggle-switch" :class="additionalClasses">
+    <input
+      type="checkbox"
+      class="toggle-switch__input"
+      :checked="modelValue"
+      :disabled="isDisabled"
+      :name="name"
+      role="switch"
+      :aria-checked="modelValue"
+      @change="onChange"
+    />
+    <span class="toggle-switch__track">
+      <span class="toggle-switch__thumb"></span>
+    </span>
+  </label>
+</template>
+
+<style src="./ToggleSwitch.scss"></style>
+
+<script setup lang="ts">
+import type { ToggleSwitchProps, ToggleSwitchEmits } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpToggleSwitch' });
+
+const props = withDefaults(defineProps<ToggleSwitchProps>(), {
+  modelValue: false,
+  isDisabled: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const onChange = (event: Event) => {
+  const checked = (event.target as HTMLInputElement).checked;
+  emit("update:modelValue", checked);
+  emit("change", { value: checked, originalEvent: event });
+};
+
+const additionalClasses = computed(() => [
+  props.isDisabled && "toggle-switch--disabled",
+  props.modelValue && "toggle-switch--checked",
+].filter(Boolean).join(" "));
+</script>

package/src/components/Toolbar/Toolbar.scss

@@ -0,0 +1,37 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: toolbar;
+
+.#{$c} {
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap, $toolbar-gap);
+  min-height: var(--toolbar-minHeight, $toolbar-minHeight);
+  padding: var(--toolbar-padding, $toolbar-padding);
+  background-color: var(--toolbar-background, $toolbar-background);
+  border: var(--toolbar-border-width, $toolbar-border-width) solid var(--toolbar-border-color, $toolbar-border-color);
+  border-radius: var(--toolbar-radius, $toolbar-radius);
+}
+
+.#{$c}__start {
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap, $toolbar-gap);
+  flex-shrink: 0;
+}
+
+.#{$c}__center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--toolbar-gap, $toolbar-gap);
+  flex: 1;
+}
+
+.#{$c}__end {
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap, $toolbar-gap);
+  flex-shrink: 0;
+  margin-left: auto;
+}

package/src/components/Toolbar/Toolbar.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="toolbar" role="toolbar">
+    <div v-if="$slots.start" class="toolbar__start">
+      <slot name="start" />
+    </div>
+    <div v-if="$slots.center" class="toolbar__center">
+      <slot name="center" />
+    </div>
+    <div v-if="$slots.end" class="toolbar__end">
+      <slot name="end" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style src="./Toolbar.scss"></style>
+
+<script setup lang="ts">
+
+defineOptions({ name: 'FtpToolbar' });
+// Toolbar is a simple layout component with slots
+// No props needed for basic functionality
+</script>

package/src/components/Tooltip/Tooltip.scss

@@ -0,0 +1,114 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/elevation" as *;
+
+$c: tooltip;
+
+.#{$c}-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.#{$c} {
+  @include elevation(3);
+  position: fixed;
+  z-index: var(--tooltip-zIndex, $tooltip-zIndex);
+  padding: var(--tooltip-padding-y, $tooltip-padding-y) var(--tooltip-padding-x, $tooltip-padding-x);
+  // Component token override (tooltips use inverse surface)
+  background-color: var(--tooltip-background, $tooltip-background);
+  color: var(--tooltip-text-color, $tooltip-text-color);
+  font-size: var(--tooltip-text-fontSize, $tooltip-text-fontSize);
+  border-radius: var(--tooltip-radius, $tooltip-radius);
+  max-width: var(--tooltip-maxWidth, $tooltip-maxWidth);
+  line-height: 1.4;
+  word-wrap: break-word;
+  pointer-events: none;
+}
+
+.#{$c}__content {
+  display: block;
+}
+
+.#{$c}__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+// Arrow size calculation (using CSS calc with fallback)
+$arrow-size: var(--tooltip-arrow-size, $tooltip-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(--tooltip-background, $tooltip-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(--tooltip-background, $tooltip-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(--tooltip-background, $tooltip-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(--tooltip-background, $tooltip-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/Tooltip/Tooltip.vue

@@ -0,0 +1,169 @@
+<template>
+  <div
+    class="tooltip-wrapper"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @focus="onFocus"
+    @blur="onBlur"
+  >
+    <slot />
+    <Teleport to="body">
+      <Transition name="tooltip-fade">
+        <div
+          v-if="isVisible"
+          ref="tooltipRef"
+          class="tooltip"
+          :class="positionClass"
+          :style="tooltipStyle"
+          role="tooltip"
+        >
+          <span class="tooltip__content">{{ content }}</span>
+          <span class="tooltip__arrow" />
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style src="./Tooltip.scss"></style>
+
+<script setup lang="ts">
+import type { TooltipProps } from '../../types';
+import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
+
+defineOptions({ name: 'FtpTooltip' });
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+  position: "top",
+  showDelay: 0,
+  hideDelay: 0,
+  disabled: false,
+});
+
+const isVisible = ref(false);
+const tooltipRef = ref<HTMLElement | null>(null);
+const tooltipStyle = ref({});
+let showTimeoutId: ReturnType<typeof setTimeout> | null = null;
+let hideTimeoutId: ReturnType<typeof setTimeout> | null = null;
+let triggerElement: HTMLElement | null = null;
+
+const positionClass = computed(() => `tooltip--${props.position}`);
+
+function clearTimeouts() {
+  if (showTimeoutId) {
+    clearTimeout(showTimeoutId);
+    showTimeoutId = null;
+  }
+  if (hideTimeoutId) {
+    clearTimeout(hideTimeoutId);
+    hideTimeoutId = null;
+  }
+}
+
+function show(event: Event) {
+  if (props.disabled) return;
+
+  clearTimeouts();
+  triggerElement = event.currentTarget as HTMLElement;
+
+  if (props.showDelay > 0) {
+    showTimeoutId = setTimeout(() => {
+      isVisible.value = true;
+      nextTick(updatePosition);
+    }, props.showDelay);
+  } else {
+    isVisible.value = true;
+    nextTick(updatePosition);
+  }
+}
+
+function hide() {
+  clearTimeouts();
+
+  if (props.hideDelay > 0) {
+    hideTimeoutId = setTimeout(() => {
+      isVisible.value = false;
+    }, props.hideDelay);
+  } else {
+    isVisible.value = false;
+  }
+}
+
+function updatePosition() {
+  if (!triggerElement || !tooltipRef.value) return;
+
+  const triggerRect = triggerElement.getBoundingClientRect();
+  const tooltipRect = tooltipRef.value.getBoundingClientRect();
+  const offset = 8; // Matches tooltip.offset token
+
+  let top, left;
+
+  switch (props.position) {
+    case "top":
+      top = triggerRect.top - tooltipRect.height - offset;
+      left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+      break;
+    case "bottom":
+      top = triggerRect.bottom + offset;
+      left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+      break;
+    case "left":
+      top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+      left = triggerRect.left - tooltipRect.width - offset;
+      break;
+    case "right":
+      top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+      left = triggerRect.right + offset;
+      break;
+  }
+
+  // Keep tooltip within viewport
+  const viewportPadding = 8;
+  left = Math.max(viewportPadding, Math.min(left, window.innerWidth - tooltipRect.width - viewportPadding));
+  top = Math.max(viewportPadding, Math.min(top, window.innerHeight - tooltipRect.height - viewportPadding));
+
+  tooltipStyle.value = {
+    top: `${top}px`,
+    left: `${left}px`,
+  };
+}
+
+function onMouseEnter(event: MouseEvent) {
+  show(event);
+}
+
+function onMouseLeave() {
+  hide();
+}
+
+function onFocus(event: FocusEvent) {
+  show(event);
+}
+
+function onBlur() {
+  hide();
+}
+
+function handleScroll() {
+  if (isVisible.value) {
+    updatePosition();
+  }
+}
+
+function handleResize() {
+  if (isVisible.value) {
+    updatePosition();
+  }
+}
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll, true);
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  clearTimeouts();
+  window.removeEventListener("scroll", handleScroll, true);
+  window.removeEventListener("resize", handleResize);
+});
+</script>

package/src/components/Tree/Tree.scss

@@ -0,0 +1,164 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: tree;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--tree-background-default, $tree-background-default);
+  border: var(--tree-border-width, $tree-border-width) solid var(--tree-border-color-default, $tree-border-color-default);
+  border-radius: var(--tree-radius, $tree-radius);
+  overflow: hidden;
+}
+
+.#{$c}--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+  background-color: var(--tree-background-disabled, $tree-background-disabled);
+  border-color: var(--tree-border-color-disabled, $tree-border-color-disabled);
+}
+
+// Filter
+.#{$c}__filter {
+  padding: var(--tree-filter-padding, $tree-filter-padding);
+  border-bottom: 1px solid var(--tree-border-color-default, $tree-border-color-default);
+}
+
+.#{$c}__filter-input {
+  width: 100%;
+  padding: var(--tree-node-padding-y, $tree-node-padding-y) var(--tree-node-padding-x, $tree-node-padding-x);
+  border: 1px solid var(--tree-border-color-default, $tree-border-color-default);
+  border-radius: var(--tree-node-radius, $tree-node-radius);
+  font-size: 14px;
+
+  &:focus {
+    outline: none;
+    border-color: var(--tree-focus-ringColor, $tree-focus-ringColor);
+  }
+}
+
+// Container
+.#{$c}__container {
+  max-height: var(--tree-maxHeight, $tree-maxHeight);
+  overflow-y: auto;
+  padding: var(--tree-padding, $tree-padding);
+}
+
+// Node wrapper
+.#{$c}__node-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+// Node
+.#{$c}__node {
+  display: flex;
+  align-items: center;
+  gap: var(--tree-node-gap, $tree-node-gap);
+  padding: var(--tree-node-padding-y, $tree-node-padding-y) var(--tree-node-padding-x, $tree-node-padding-x);
+  background-color: var(--tree-node-background-default, $tree-node-background-default);
+  color: var(--tree-node-text-default, $tree-node-text-default);
+  border-radius: var(--tree-node-radius, $tree-node-radius);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--tree-node-background-hover, $tree-node-background-hover);
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--tree-node-background-hover, $tree-node-background-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--tree-focus-ringWidth, $tree-focus-ringWidth) solid var(--tree-focus-ringColor, $tree-focus-ringColor);
+    outline-offset: -2px;
+  }
+}
+
+.#{$c}__node--selected {
+  background-color: var(--tree-node-background-selected, $tree-node-background-selected);
+  color: var(--tree-node-text-selected, $tree-node-text-selected);
+
+  &:hover {
+    background-color: var(--tree-node-background-selected, $tree-node-background-selected);
+    filter: brightness(0.95);
+  }
+}
+
+// Toggler
+.#{$c}__toggler {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tree-toggler-size, $tree-toggler-size);
+  height: var(--tree-toggler-size, $tree-toggler-size);
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--tree-toggler-color-default, $tree-toggler-color-default);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: transform 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    color: var(--tree-toggler-color-hover, $tree-toggler-color-hover);
+  }
+
+  &--expanded {
+    transform: rotate(90deg);
+  }
+}
+
+.#{$c}__toggler-spacer {
+  width: var(--tree-toggler-size, $tree-toggler-size);
+  flex-shrink: 0;
+}
+
+// Checkbox
+.#{$c}__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tree-checkbox-size, $tree-checkbox-size);
+  height: var(--tree-checkbox-size, $tree-checkbox-size);
+  border: 2px solid var(--tree-checkbox-border, $tree-checkbox-border);
+  border-radius: 3px;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+
+  svg {
+    color: white;
+  }
+
+  &--checked {
+    background-color: var(--tree-checkbox-background-checked, $tree-checkbox-background-checked);
+    border-color: var(--tree-checkbox-background-checked, $tree-checkbox-background-checked);
+  }
+}
+
+// Node label
+.#{$c}__node-label {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Children
+.#{$c}__children {
+  display: flex;
+  flex-direction: column;
+}
+
+// Empty
+.#{$c}__empty {
+  padding: var(--tree-node-padding-y, $tree-node-padding-y) var(--tree-node-padding-x, $tree-node-padding-x);
+  color: var(--tree-node-text-default, $tree-node-text-default);
+  opacity: 0.6;
+  text-align: center;
+  font-size: 14px;
+}