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

package/src/components/Select/Select.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="select" :class="additionalClasses">
+    <select
+      ref="selectRef"
+      class="select__input"
+      :value="modelValue"
+      :disabled="isDisabled"
+      :name="name"
+      :aria-invalid="isInvalid || undefined"
+      :aria-describedby="ariaDescribedby || undefined"
+      @change="onChange"
+    >
+      <option v-if="placeholder" value="" disabled :selected="!modelValue">
+        {{ placeholder }}
+      </option>
+      <option
+        v-for="option in normalizedOptions"
+        :key="option.value"
+        :value="option.value"
+        :disabled="option.disabled"
+      >
+        {{ option.label }}
+      </option>
+    </select>
+    <span class="select__icon">
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 6L8 10L12 6"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+  </div>
+</template>
+
+<style src="./Select.scss"></style>
+
+<script setup lang="ts">
+import type { SelectProps, SelectEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpSelect' });
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  modelValue: null,
+  options: () => [],
+  optionLabel: "label",
+  optionValue: "value",
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const selectRef = ref(null);
+
+const normalizedOptions = computed((): any[] => {
+  return props.options.map((option: any) => {
+    if (typeof option === "string" || typeof option === "number") {
+      return { label: option, value: option };
+    }
+    return {
+      label: option[props.optionLabel],
+      value: option[props.optionValue],
+      disabled: option.disabled,
+    };
+  });
+});
+
+const onChange = (event: Event) => {
+  const value = (event.target as HTMLSelectElement).value;
+  emit("update:modelValue", value);
+  emit("change", { value, originalEvent: event });
+};
+
+const additionalClasses = computed(() => [
+  `select--size-${props.size}`,
+  props.isDisabled && "select--disabled",
+  props.isInvalid && "select--invalid",
+  !props.modelValue && props.placeholder && "select--placeholder",
+].filter(Boolean).join(" "));
+</script>

package/src/components/SelectButton/SelectButton.scss

@@ -0,0 +1,65 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: select-button;
+
+.#{$c} {
+  display: inline-flex;
+  gap: var(--selectButton-gap, $selectButton-gap);
+}
+
+.#{$c}__option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--selectButton-minHeight, $selectButton-minHeight);
+  padding: var(--selectButton-padding-y, $selectButton-padding-y) var(--selectButton-padding-x, $selectButton-padding-x);
+  background-color: var(--selectButton-background-default, $selectButton-background-default);
+  border: var(--selectButton-border-width, $selectButton-border-width) solid var(--selectButton-border-color-default, $selectButton-border-color-default);
+  border-radius: var(--selectButton-radius, $selectButton-radius);
+  color: var(--selectButton-text-default, $selectButton-text-default);
+  font-size: var(--selectButton-fontSize, $selectButton-fontSize);
+  font-weight: var(--selectButton-fontWeight-default, $selectButton-fontWeight-default);
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--selectButton-transition-duration, $selectButton-transition-duration) ease;
+  white-space: nowrap;
+
+  &:hover:not(:disabled):not(.#{$c}__option--selected) {
+    background-color: var(--selectButton-background-hover, $selectButton-background-hover);
+    border-color: var(--selectButton-border-color-hover, $selectButton-border-color-hover);
+    color: var(--selectButton-text-hover, $selectButton-text-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--selectButton-focus-ringWidth, $selectButton-focus-ringWidth) solid var(--selectButton-focus-ringColor, $selectButton-focus-ringColor);
+    outline-offset: var(--selectButton-focus-ringOffset, $selectButton-focus-ringOffset);
+  }
+}
+
+.#{$c}__option--selected {
+  background-color: var(--selectButton-background-selected, $selectButton-background-selected);
+  border-color: var(--selectButton-border-color-selected, $selectButton-border-color-selected);
+  color: var(--selectButton-text-selected, $selectButton-text-selected);
+  font-weight: var(--selectButton-fontWeight-selected, $selectButton-fontWeight-selected);
+}
+
+.#{$c}__option--disabled,
+.#{$c}__option:disabled {
+  background-color: var(--selectButton-background-disabled, $selectButton-background-disabled);
+  border-color: var(--selectButton-border-color-disabled, $selectButton-border-color-disabled);
+  color: var(--selectButton-text-disabled, $selectButton-text-disabled);
+  cursor: not-allowed;
+}
+
+// When both selected and disabled
+.#{$c}__option--selected.#{$c}__option--disabled,
+.#{$c}__option--selected:disabled {
+  background-color: var(--selectButton-border-color-disabled, $selectButton-border-color-disabled);
+  border-color: var(--selectButton-border-color-disabled, $selectButton-border-color-disabled);
+}
+
+// Disabled state for entire component
+.#{$c}--disabled {
+  opacity: 0.7;
+  pointer-events: none;
+}

package/src/components/SelectButton/SelectButton.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    class="select-button"
+    :class="additionalClasses"
+    role="group"
+    :aria-label="ariaLabel"
+  >
+    <button
+      v-for="(option, index) in options"
+      :key="getOptionValue(option)"
+      type="button"
+      class="select-button__option"
+      :class="{
+        'select-button__option--selected': isSelected(option),
+        'select-button__option--disabled': isDisabled || isOptionDisabled(option)
+      }"
+      :disabled="isDisabled || isOptionDisabled(option)"
+      :aria-pressed="isSelected(option)"
+      :tabindex="isDisabled || isOptionDisabled(option) ? -1 : 0"
+      @click="onOptionClick(option, $event)"
+    >
+      <slot name="option" :option="option" :index="index" :selected="isSelected(option)">
+        {{ getOptionLabel(option) }}
+      </slot>
+    </button>
+  </div>
+</template>
+
+<style src="./SelectButton.scss"></style>
+
+<script setup lang="ts">
+import type { SelectButtonProps, SelectButtonEmits } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpSelectButton' });
+
+const props = withDefaults(defineProps<SelectButtonProps>(), {
+  modelValue: null,
+  options: () => [],
+  optionLabel: null,
+  optionValue: null,
+  optionDisabled: null,
+  multiple: false,
+  allowEmpty: true,
+  isDisabled: false,
+  ariaLabel: "Select button group",
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const getOptionLabel = (option: any) => {
+  if (props.optionLabel) {
+    if (typeof props.optionLabel === "function") {
+      return props.optionLabel(option);
+    }
+    return option?.[props.optionLabel];
+  }
+  return option?.label ?? option;
+};
+
+const getOptionValue = (option: any) => {
+  if (props.optionValue) {
+    if (typeof props.optionValue === "function") {
+      return props.optionValue(option);
+    }
+    return option?.[props.optionValue];
+  }
+  return option?.value ?? option;
+};
+
+const isOptionDisabled = (option: any) => {
+  if (props.optionDisabled) {
+    if (typeof props.optionDisabled === "function") {
+      return props.optionDisabled(option);
+    }
+    return option?.[props.optionDisabled];
+  }
+  return option?.disabled ?? false;
+};
+
+const isSelected = (option: any) => {
+  const optionValue = getOptionValue(option);
+
+  if (props.multiple) {
+    if (!Array.isArray(props.modelValue)) return false;
+    return props.modelValue.some((val) => equals(val, optionValue));
+  }
+
+  return equals(props.modelValue, optionValue);
+};
+
+const equals = (value1: any, value2: any) => {
+  if (value1 === value2) return true;
+  if (typeof value1 === "object" && typeof value2 === "object") {
+    return JSON.stringify(value1) === JSON.stringify(value2);
+  }
+  return false;
+};
+
+const onOptionClick = (option: any, event: any) => {
+  if (props.isDisabled || isOptionDisabled(option)) return;
+
+  const optionValue = getOptionValue(option);
+  let newValue;
+
+  if (props.multiple) {
+    const currentValue = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
+    const index = currentValue.findIndex((val) => equals(val, optionValue));
+
+    if (index !== -1) {
+      // Deselecting - check if allowEmpty permits this
+      if (props.allowEmpty || currentValue.length > 1) {
+        currentValue.splice(index, 1);
+        newValue = currentValue;
+      } else {
+        // Can't deselect the last item when allowEmpty is false
+        return;
+      }
+    } else {
+      currentValue.push(optionValue);
+      newValue = currentValue;
+    }
+  } else {
+    if (equals(props.modelValue, optionValue)) {
+      // Deselecting in single mode
+      if (props.allowEmpty) {
+        newValue = null;
+      } else {
+        // Can't deselect when allowEmpty is false
+        return;
+      }
+    } else {
+      newValue = optionValue;
+    }
+  }
+
+  emit("update:modelValue", newValue);
+  emit("change", { originalEvent: event, value: newValue });
+};
+
+const additionalClasses = computed(() =>
+  [props.isDisabled && "select-button--disabled"].filter(Boolean).join(" ")
+);
+</script>

package/src/components/Sidebar/Sidebar.scss

@@ -0,0 +1,170 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/border.scss" as *;
+
+$c: sidebar;
+
+// Overlay backdrop
+.#{$c}__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--sidebar-overlay-background, $sidebar-overlay-background);
+  z-index: var(--sidebar-zIndex-overlay, $sidebar-zIndex-overlay);
+}
+
+// Sidebar container
+.#{$c} {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: var(--sidebar-width-default, $sidebar-width-default);
+  background-color: var(--sidebar-background, $sidebar-background);
+  box-shadow: var(--sidebar-shadow, $sidebar-shadow);
+  z-index: var(--sidebar-zIndex-sidebar, $sidebar-zIndex-sidebar);
+  max-width: 100vw;
+}
+
+// Position variants with vibrant gradient border
+.#{$c}--position-left {
+  left: 0;
+  border-right: none;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(45deg, $border-vibrant-start, $border-vibrant-end);
+  }
+}
+
+.#{$c}--position-right {
+  right: 0;
+  border-left: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(45deg, $border-vibrant-start, $border-vibrant-end);
+  }
+}
+
+// Full screen variant
+.#{$c}--fullscreen {
+  width: var(--sidebar-width-fullScreen, $sidebar-width-fullScreen);
+  border: none;
+}
+
+// Header section
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--inset-m, $inset-m);
+  padding: var(--sidebar-header-padding, $sidebar-header-padding);
+  background-color: var(--sidebar-header-background, $sidebar-header-background);
+  border-bottom: 1px solid var(--sidebar-header-borderColor, $sidebar-header-borderColor);
+  flex-shrink: 0;
+}
+
+.#{$c}__title {
+  font-size: var(--sidebar-header-title-fontSize, $sidebar-header-title-fontSize);
+  font-weight: var(--sidebar-header-title-fontWeight, $sidebar-header-title-fontWeight);
+  color: var(--sidebar-header-title-color, $sidebar-header-title-color);
+  margin: 0;
+  line-height: 1.4;
+}
+
+// Close button
+.#{$c}__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sidebar-closeButton-size, $sidebar-closeButton-size);
+  height: var(--sidebar-closeButton-size, $sidebar-closeButton-size);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--sidebar-closeButton-radius, $sidebar-closeButton-radius);
+  color: var(--sidebar-closeButton-color-default, $sidebar-closeButton-color-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: var(--sidebar-closeButton-background-hover, $sidebar-closeButton-background-hover);
+    color: var(--sidebar-closeButton-color-hover, $sidebar-closeButton-color-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__close-icon {
+  width: var(--sidebar-closeButton-iconSize, $sidebar-closeButton-iconSize);
+  height: var(--sidebar-closeButton-iconSize, $sidebar-closeButton-iconSize);
+}
+
+// Content section (navigation area)
+.#{$c}__content {
+  flex: 1 1 auto;
+  padding: var(--sidebar-content-padding, $sidebar-content-padding);
+  overflow-y: auto;
+  color: var(--sidebar-content-color, $sidebar-content-color);
+}
+
+// Footer section
+.#{$c}__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--inset-s, $inset-s);
+  padding: var(--sidebar-content-padding, $sidebar-content-padding);
+  border-top: 1px solid var(--sidebar-header-borderColor, $sidebar-header-borderColor);
+  flex-shrink: 0;
+  color: var(--sidebar-content-color, $sidebar-content-color);
+}
+
+// Transition animations
+
+// Overlay fade
+.sidebar-fade-enter-active,
+.sidebar-fade-leave-active {
+  transition: opacity var(--sidebar-transition-duration, $sidebar-transition-duration) ease;
+}
+
+.sidebar-fade-enter-from,
+.sidebar-fade-leave-to {
+  opacity: 0;
+}
+
+// Slide from left
+.sidebar-slide-left-enter-active,
+.sidebar-slide-left-leave-active {
+  transition: transform var(--sidebar-transition-duration, $sidebar-transition-duration) ease;
+}
+
+.sidebar-slide-left-enter-from,
+.sidebar-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+
+// Slide from right
+.sidebar-slide-right-enter-active,
+.sidebar-slide-right-leave-active {
+  transition: transform var(--sidebar-transition-duration, $sidebar-transition-duration) ease;
+}
+
+.sidebar-slide-right-enter-from,
+.sidebar-slide-right-leave-to {
+  transform: translateX(100%);
+}

package/src/components/Sidebar/Sidebar.vue

@@ -0,0 +1,137 @@
+<template>
+  <Teleport to="body">
+    <Transition name="sidebar-fade">
+      <div
+        v-if="visible"
+        class="sidebar__overlay"
+        @click="onOverlayClick"
+        @keydown.escape="onEscapeKey"
+      >
+        <Transition :name="transitionName">
+          <div
+            v-if="visible"
+            ref="sidebarRef"
+            class="sidebar"
+            :class="additionalClasses"
+            role="dialog"
+            aria-modal="true"
+            :aria-labelledby="headerId"
+            @click.stop
+          >
+            <div v-if="$slots.header || header || closable" class="sidebar__header">
+              <slot name="header">
+                <span :id="headerId" class="sidebar__title">{{ header }}</span>
+              </slot>
+              <button
+                v-if="closable"
+                type="button"
+                class="sidebar__close"
+                aria-label="Close"
+                @click="close"
+              >
+                <svg
+                  class="sidebar__close-icon"
+                  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>
+            </div>
+
+            <nav class="sidebar__content">
+              <slot />
+            </nav>
+
+            <div v-if="$slots.footer" class="sidebar__footer">
+              <slot name="footer" />
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./Sidebar.scss"></style>
+
+<script setup lang="ts">
+import type { SidebarProps, SidebarEmits } from '../../types';
+import { computed, ref, watch, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpSidebar' });
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  visible: false,
+  header: "",
+  position: "left",
+  fullScreen: false,
+  closable: true,
+  dismissable: true,
+  closeOnEscape: true,
+  blockScroll: true,
+});
+
+const emit = defineEmits(["update:visible", "show", "hide"]);
+
+const sidebarRef = ref(null);
+const headerId = `sidebar-header-${Math.random().toString(36).substr(2, 9)}`;
+
+const additionalClasses = computed(() =>
+  [
+    `sidebar--position-${props.position}`,
+    props.fullScreen && "sidebar--fullscreen",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const transitionName = computed(() => {
+  return `sidebar-slide-${props.position}`;
+});
+
+const close = () => {
+  emit("update:visible", false);
+  emit("hide");
+};
+
+const onOverlayClick = () => {
+  if (props.dismissable) {
+    close();
+  }
+};
+
+const onEscapeKey = (event: KeyboardEvent) => {
+  if (props.closeOnEscape && props.visible) {
+    event.preventDefault();
+    close();
+  }
+};
+
+// Block scroll when sidebar is open
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue) {
+      emit("show");
+      if (props.blockScroll) {
+        document.body.style.overflow = "hidden";
+      }
+    } else {
+      if (props.blockScroll) {
+        document.body.style.overflow = "";
+      }
+    }
+  }
+);
+
+// Cleanup on unmount
+onUnmounted(() => {
+  document.body.style.overflow = "";
+});
+</script>

package/src/components/Skeleton/Skeleton.scss

@@ -0,0 +1,43 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: skeleton;
+
+.#{$c} {
+  display: block;
+  background-color: var(--skeleton-background, $skeleton-background);
+  border-radius: var(--skeleton-radius, $skeleton-radius);
+  width: 100%;
+  height: 1rem;
+  overflow: hidden;
+  position: relative;
+}
+
+.#{$c}--circle {
+  border-radius: 9999px;
+  width: 3rem;
+  height: 3rem;
+}
+
+.#{$c}--animated {
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--skeleton-highlight, $skeleton-highlight) 50%,
+      transparent 100%
+    );
+    animation: skeleton-wave var(--skeleton-animation-duration, $skeleton-animation-duration) ease-in-out infinite;
+  }
+}
+
+@keyframes skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/components/Skeleton/Skeleton.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="skeleton"
+    :class="additionalClasses"
+    :style="containerStyle"
+    aria-hidden="true"
+  />
+</template>
+
+<style src="./Skeleton.scss"></style>
+
+<script setup lang="ts">
+import type { SkeletonProps } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpSkeleton' });
+
+const props = withDefaults(defineProps<SkeletonProps>(), {
+  shape: "rectangle",
+  width: null,
+  height: null,
+  borderRadius: null,
+  animation: "wave",
+});
+
+const additionalClasses = computed(() => {
+  const classes = [];
+
+  if (props.shape === "circle") {
+    classes.push("skeleton--circle");
+  }
+
+  if (props.animation === "wave") {
+    classes.push("skeleton--animated");
+  }
+
+  return classes.join(" ");
+});
+
+const containerStyle = computed(() => {
+  const style: Record<string, string> = {};
+
+  if (props.width) {
+    style.width = props.width;
+  }
+
+  if (props.height) {
+    style.height = props.height;
+  }
+
+  if (props.borderRadius) {
+    style.borderRadius = props.borderRadius;
+  }
+
+  return style;
+});
+</script>