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

package/src/components/Badge/Badge.vue

@@ -0,0 +1,41 @@
+<template>
+  <span v-if="!isEmpty" class="badge" :class="additionalClasses" :aria-label="ariaLabel || (value !== null ? `${value}` : undefined)">
+    <slot>{{ value }}</slot>
+  </span>
+</template>
+
+<style src="./Badge.scss"></style>
+
+<script setup lang="ts">
+import type { BadgeProps } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpBadge' });
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  value: null,
+  size: "md",
+  severity: "primary",
+});
+
+const slots = defineSlots();
+
+const isEmpty = computed(() => {
+  return props.value === null && !slots.default;
+});
+
+const isSingleChar = computed(() => {
+  const val = String(props.value ?? "");
+  return val.length === 1;
+});
+
+const additionalClasses = computed(() =>
+  [
+    `badge--size-${props.size}`,
+    `badge--severity-${props.severity}`,
+    isSingleChar.value ? "badge--circle" : "",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/BlockUI/BlockUI.scss

@@ -0,0 +1,85 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: block-ui;
+
+.#{$c} {
+  position: relative;
+}
+
+.#{$c}--fullscreen {
+  // Container doesn't need special styling for fullscreen
+}
+
+// Overlay
+.#{$c}__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--block-ui-overlay-background, $block-ui-overlay-background);
+  z-index: var(--block-ui-overlay-zIndex, $block-ui-overlay-zIndex);
+  border-radius: inherit;
+}
+
+.#{$c}__overlay--fullscreen {
+  position: fixed;
+  border-radius: 0;
+}
+
+// Spinner
+.#{$c}__spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$c}__spinner-icon {
+  width: var(--block-ui-spinner-size, $block-ui-spinner-size);
+  height: var(--block-ui-spinner-size, $block-ui-spinner-size);
+  animation: block-ui-spin 1.5s linear infinite;
+}
+
+.#{$c}__spinner-circle {
+  stroke: var(--block-ui-spinner-color, $block-ui-spinner-color);
+  stroke-linecap: round;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  animation: block-ui-dash 1.5s ease-in-out infinite;
+}
+
+// Animations
+@keyframes block-ui-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes block-ui-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+// Transition
+.block-ui-fade-enter-active,
+.block-ui-fade-leave-active {
+  transition: opacity var(--block-ui-transition-duration, $block-ui-transition-duration) ease;
+}
+
+.block-ui-fade-enter-from,
+.block-ui-fade-leave-to {
+  opacity: 0;
+}

package/src/components/BlockUI/BlockUI.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="block-ui"
+    :class="additionalClasses"
+  >
+    <slot></slot>
+    <Transition name="block-ui-fade">
+      <div
+        v-if="blocked"
+        class="block-ui__overlay"
+        :class="{ 'block-ui__overlay--fullscreen': fullScreen }"
+        aria-busy="true"
+        aria-live="polite"
+      >
+        <slot name="spinner">
+          <div v-if="showSpinner" class="block-ui__spinner" aria-label="Loading">
+            <svg class="block-ui__spinner-icon" viewBox="0 0 50 50">
+              <circle
+                class="block-ui__spinner-circle"
+                cx="25"
+                cy="25"
+                r="20"
+                fill="none"
+                stroke-width="4"
+              />
+            </svg>
+          </div>
+        </slot>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style src="./BlockUI.scss"></style>
+
+<script setup lang="ts">
+import type { BlockUIProps, BlockUIEmits } from '../../types';
+import { computed, watch, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpBlockUI' });
+
+const props = withDefaults(defineProps<BlockUIProps>(), {
+  blocked: false,
+  fullScreen: false,
+  showSpinner: true,
+  autoZIndex: true,
+  baseZIndex: 1000,
+});
+
+const emit = defineEmits(["block", "unblock"]);
+
+const additionalClasses = computed(() => [
+  props.blocked && "block-ui--blocked",
+  props.fullScreen && "block-ui--fullscreen",
+].filter(Boolean).join(" "));
+
+// Block body scroll when fullscreen
+watch(
+  () => props.blocked,
+  (newValue, oldValue) => {
+    if (newValue && !oldValue) {
+      emit("block");
+      if (props.fullScreen) {
+        document.body.style.overflow = "hidden";
+        // Blur active element
+        if (document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
+        }
+      }
+    } else if (!newValue && oldValue) {
+      emit("unblock");
+      if (props.fullScreen) {
+        document.body.style.overflow = "";
+      }
+    }
+  }
+);
+
+onMounted(() => {
+  if (props.blocked && props.fullScreen) {
+    document.body.style.overflow = "hidden";
+  }
+});
+
+onUnmounted(() => {
+  if (props.fullScreen) {
+    document.body.style.overflow = "";
+  }
+});
+</script>

package/src/components/Breadcrumb/Breadcrumb.scss

@@ -0,0 +1,84 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: breadcrumb;
+
+.#{$c} {
+  font-size: var(--breadcrumb-fontSize, $breadcrumb-fontSize);
+  line-height: 1.4;
+}
+
+.#{$c}__list {
+  display: flex;
+  align-items: center;
+  gap: var(--breadcrumb-gap, $breadcrumb-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.#{$c}__item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.#{$c}__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--breadcrumb-icon-gap, $breadcrumb-icon-gap);
+  color: var(--breadcrumb-link-color-default, $breadcrumb-link-color-default);
+  text-decoration: none;
+  transition: color 150ms ease;
+
+  &:hover {
+    color: var(--breadcrumb-link-color-hover, $breadcrumb-link-color-hover);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--breadcrumb-link-color-hover, $breadcrumb-link-color-hover);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+}
+
+.#{$c}__text {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--breadcrumb-icon-gap, $breadcrumb-icon-gap);
+  color: var(--breadcrumb-link-color-default, $breadcrumb-link-color-default);
+}
+
+.#{$c}__item--current .#{$c}__text {
+  color: var(--breadcrumb-link-color-current, $breadcrumb-link-color-current);
+  font-weight: 500;
+}
+
+.#{$c}__label {
+  white-space: nowrap;
+}
+
+.#{$c}__icon {
+  font-size: var(--breadcrumb-icon-size, $breadcrumb-icon-size);
+  flex-shrink: 0;
+}
+
+.#{$c}__home-icon {
+  width: var(--breadcrumb-icon-size, $breadcrumb-icon-size);
+  height: var(--breadcrumb-icon-size, $breadcrumb-icon-size);
+  flex-shrink: 0;
+}
+
+.#{$c}__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--breadcrumb-separator-color, $breadcrumb-separator-color);
+}
+
+.#{$c}__separator-icon {
+  width: var(--breadcrumb-separator-size, $breadcrumb-separator-size);
+  height: var(--breadcrumb-separator-size, $breadcrumb-separator-size);
+  flex-shrink: 0;
+}

package/src/components/Breadcrumb/Breadcrumb.vue

@@ -0,0 +1,141 @@
+<template>
+  <nav class="breadcrumb" aria-label="Breadcrumb">
+    <ol class="breadcrumb__list">
+      <!-- Home item -->
+      <li v-if="home" class="breadcrumb__item">
+        <a
+          v-if="home.url"
+          :href="home.url"
+          class="breadcrumb__link"
+          :aria-label="home.label || 'Home'"
+        >
+          <i v-if="home.icon" :class="home.icon" class="breadcrumb__icon"></i>
+          <svg
+            v-else
+            class="breadcrumb__home-icon"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M2 6.5L8 2L14 6.5V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V6.5Z"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M6 14V9H10V14"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span v-if="home.label && home.icon" class="breadcrumb__label">{{ home.label }}</span>
+        </a>
+        <span v-else class="breadcrumb__text">
+          <i v-if="home.icon" :class="home.icon" class="breadcrumb__icon"></i>
+          <svg
+            v-else
+            class="breadcrumb__home-icon"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M2 6.5L8 2L14 6.5V13C14 13.5523 13.5523 14 13 14H3C2.44772 14 2 13.5523 2 13V6.5Z"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M6 14V9H10V14"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <span v-if="home.label && home.icon" class="breadcrumb__label">{{ home.label }}</span>
+        </span>
+      </li>
+
+      <!-- Separator after home -->
+      <li v-if="home && model && model.length > 0" class="breadcrumb__separator" aria-hidden="true">
+        <slot name="separator">
+          <svg
+            class="breadcrumb__separator-icon"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 4L10 8L6 12"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </slot>
+      </li>
+
+      <!-- Model items -->
+      <template v-for="(item, index) in model" :key="index">
+        <li
+          class="breadcrumb__item"
+          :class="{ 'breadcrumb__item--current': index === model.length - 1 }"
+        >
+          <a
+            v-if="item.url && index !== model.length - 1"
+            :href="item.url"
+            class="breadcrumb__link"
+          >
+            <i v-if="item.icon" :class="item.icon" class="breadcrumb__icon"></i>
+            <span class="breadcrumb__label">{{ item.label }}</span>
+          </a>
+          <span v-else class="breadcrumb__text" :aria-current="index === model.length - 1 ? 'page' : undefined">
+            <i v-if="item.icon" :class="item.icon" class="breadcrumb__icon"></i>
+            <span class="breadcrumb__label">{{ item.label }}</span>
+          </span>
+        </li>
+
+        <!-- Separator (not after last item) -->
+        <li v-if="index < model.length - 1" class="breadcrumb__separator" aria-hidden="true">
+          <slot name="separator">
+            <svg
+              class="breadcrumb__separator-icon"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 4L10 8L6 12"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </slot>
+        </li>
+      </template>
+    </ol>
+  </nav>
+</template>
+
+<style src="./Breadcrumb.scss"></style>
+
+<script setup lang="ts">
+import type { BreadcrumbProps } from '../../types';
+
+defineOptions({ name: 'FtpBreadcrumb' });
+
+const props = withDefaults(defineProps<BreadcrumbProps>(), {
+  model: () => [],
+});
+</script>

package/src/components/Button/Button.scss

@@ -0,0 +1,254 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: button;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-style: solid;
+  border-width: var(--button-border-width, $button-border-width);
+  border-radius: var(--button-radius-default, $button-radius-default);
+  font-weight: var(--button-fontWeight, $button-fontWeight);
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background-color var(--button-transition-duration, $button-transition-duration) ease,
+    border-color var(--button-transition-duration, $button-transition-duration) ease,
+    color var(--button-transition-duration, $button-transition-duration) ease;
+
+  &:focus-visible {
+    outline: var(--button-focus-ringWidth, $button-focus-ringWidth) solid var(--button-focus-ringColor, $button-focus-ringColor);
+    outline-offset: var(--button-focus-ringOffset, $button-focus-ringOffset);
+  }
+}
+
+.#{$c}__label {
+  display: inline-block;
+}
+
+.#{$c}__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$c}__spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$c}__spinner-icon {
+  animation: button-spin 1s linear infinite;
+}
+
+@keyframes button-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  height: var(--button-size-sm-height, $button-size-sm-height);
+  padding: var(--button-size-sm-paddingY, $button-size-sm-paddingY) var(--button-size-sm-paddingX, $button-size-sm-paddingX);
+  font-size: var(--button-size-sm-fontSize, $button-size-sm-fontSize);
+  gap: var(--button-size-sm-gap, $button-size-sm-gap);
+
+  .#{$c}__icon {
+    font-size: var(--button-size-sm-iconSize, $button-size-sm-iconSize);
+    width: var(--button-size-sm-iconSize, $button-size-sm-iconSize);
+    height: var(--button-size-sm-iconSize, $button-size-sm-iconSize);
+  }
+
+  .#{$c}__spinner-icon {
+    width: var(--button-size-sm-iconSize, $button-size-sm-iconSize);
+    height: var(--button-size-sm-iconSize, $button-size-sm-iconSize);
+  }
+}
+
+.#{$c}--size-md {
+  height: var(--button-size-md-height, $button-size-md-height);
+  padding: var(--button-size-md-paddingY, $button-size-md-paddingY) var(--button-size-md-paddingX, $button-size-md-paddingX);
+  font-size: var(--button-size-md-fontSize, $button-size-md-fontSize);
+  gap: var(--button-size-md-gap, $button-size-md-gap);
+
+  .#{$c}__icon {
+    font-size: var(--button-size-md-iconSize, $button-size-md-iconSize);
+    width: var(--button-size-md-iconSize, $button-size-md-iconSize);
+    height: var(--button-size-md-iconSize, $button-size-md-iconSize);
+  }
+
+  .#{$c}__spinner-icon {
+    width: var(--button-size-md-iconSize, $button-size-md-iconSize);
+    height: var(--button-size-md-iconSize, $button-size-md-iconSize);
+  }
+}
+
+.#{$c}--size-lg {
+  height: var(--button-size-lg-height, $button-size-lg-height);
+  padding: var(--button-size-lg-paddingY, $button-size-lg-paddingY) var(--button-size-lg-paddingX, $button-size-lg-paddingX);
+  font-size: var(--button-size-lg-fontSize, $button-size-lg-fontSize);
+  gap: var(--button-size-lg-gap, $button-size-lg-gap);
+
+  .#{$c}__icon {
+    font-size: var(--button-size-lg-iconSize, $button-size-lg-iconSize);
+    width: var(--button-size-lg-iconSize, $button-size-lg-iconSize);
+    height: var(--button-size-lg-iconSize, $button-size-lg-iconSize);
+  }
+
+  .#{$c}__spinner-icon {
+    width: var(--button-size-lg-iconSize, $button-size-lg-iconSize);
+    height: var(--button-size-lg-iconSize, $button-size-lg-iconSize);
+  }
+}
+
+// Variants
+.#{$c}--variant-primary {
+  @include accent-gradient();
+  border-color: transparent;
+  color: var(--button-text-primary-default, $button-text-primary-default);
+  text-shadow: var(--button-text-primary-shadow, $button-text-primary-shadow);
+
+  &:hover:not(:disabled) {
+    @include accent-gradient("hover");
+  }
+
+  &:active:not(:disabled) {
+    background: linear-gradient(
+      135deg,
+      var(--button-background-gradient-activeStart, $button-background-gradient-activeStart),
+      var(--button-background-gradient-activeEnd, $button-background-gradient-activeEnd)
+    );
+  }
+
+  &:disabled,
+  &.#{$c}--disabled {
+    background: var(--button-background-primary-disabled, $button-background-primary-disabled);
+    border-color: var(--button-border-primary-disabled, $button-border-primary-disabled);
+    color: var(--button-text-primary-disabled, $button-text-primary-disabled);
+    text-shadow: none;
+    cursor: not-allowed;
+  }
+}
+
+.#{$c}--variant-secondary {
+  position: relative;
+  background-color: var(--button-background-secondary-default, $button-background-secondary-default);
+  border-color: transparent;
+  color: var(--button-text-secondary-default, $button-text-secondary-default);
+
+  // Gradient border via pseudo-element
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    padding: var(--button-border-width, $button-border-width);
+    border-radius: inherit;
+    background: linear-gradient(
+      135deg,
+      var(--accent-gradient-start, $accent-gradient-start),
+      var(--accent-gradient-end, $accent-gradient-end)
+    );
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: var(--button-background-secondary-hover, $button-background-secondary-hover);
+
+    &::before {
+      background: linear-gradient(
+        135deg,
+        var(--accent-gradient-hoverStart, $accent-gradient-hoverStart),
+        var(--accent-gradient-hoverEnd, $accent-gradient-hoverEnd)
+      );
+    }
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--button-background-secondary-active, $button-background-secondary-active);
+  }
+
+  &:disabled,
+  &.#{$c}--disabled {
+    background-color: var(--button-background-secondary-disabled, $button-background-secondary-disabled);
+    border-color: var(--button-border-secondary-disabled, $button-border-secondary-disabled);
+    color: var(--button-text-secondary-disabled, $button-text-secondary-disabled);
+    cursor: not-allowed;
+
+    &::before {
+      display: none;
+    }
+  }
+}
+
+.#{$c}--variant-outlined {
+  background-color: var(--button-background-outlined-default, $button-background-outlined-default);
+  border-color: var(--button-border-outlined-default, $button-border-outlined-default);
+  color: var(--button-text-outlined-default, $button-text-outlined-default);
+
+  &:hover:not(:disabled) {
+    background-color: var(--button-background-outlined-hover, $button-background-outlined-hover);
+    border-color: var(--button-border-outlined-hover, $button-border-outlined-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--button-background-outlined-active, $button-background-outlined-active);
+    border-color: var(--button-border-outlined-active, $button-border-outlined-active);
+  }
+
+  &:disabled,
+  &.#{$c}--disabled {
+    background-color: var(--button-background-outlined-disabled, $button-background-outlined-disabled);
+    border-color: var(--button-border-outlined-disabled, $button-border-outlined-disabled);
+    color: var(--button-text-outlined-disabled, $button-text-outlined-disabled);
+    cursor: not-allowed;
+  }
+}
+
+.#{$c}--variant-text {
+  background-color: var(--button-background-text-default, $button-background-text-default);
+  border-color: var(--button-border-text-default, $button-border-text-default);
+  color: var(--button-text-text-default, $button-text-text-default);
+
+  &:hover:not(:disabled) {
+    background-color: var(--button-background-text-hover, $button-background-text-hover);
+    border-color: var(--button-border-text-hover, $button-border-text-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--button-background-text-active, $button-background-text-active);
+    border-color: var(--button-border-text-active, $button-border-text-active);
+  }
+
+  &:disabled,
+  &.#{$c}--disabled {
+    background-color: var(--button-background-text-disabled, $button-background-text-disabled);
+    border-color: var(--button-border-text-disabled, $button-border-text-disabled);
+    color: var(--button-text-text-disabled, $button-text-text-disabled);
+    cursor: not-allowed;
+  }
+}
+
+// Loading state
+.#{$c}--loading {
+  cursor: wait;
+  pointer-events: none;
+}
+
+// Pill shape
+.#{$c}--pill {
+  border-radius: var(--button-radius-pill, $button-radius-pill);
+}