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

package/src/components/Toast/Toast.scss

@@ -0,0 +1,284 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/elevation" as *;
+
+$c: toast;
+
+.#{$c}-container {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: var(--toast-container-gap, $toast-container-gap);
+  padding: var(--toast-container-padding, $toast-container-padding);
+  max-width: var(--toast-container-maxWidth, $toast-container-maxWidth);
+  z-index: var(--toast-container-zIndex, $toast-container-zIndex);
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+}
+
+// Position variants
+.#{$c}-container--top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.#{$c}-container--top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.#{$c}-container--top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.#{$c}-container--bottom-left {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.#{$c}-container--bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  flex-direction: column-reverse;
+}
+
+.#{$c}-container--bottom-right {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+.#{$c}-container--center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  align-items: center;
+}
+
+.#{$c} {
+  @include elevation(3);
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--toast-icon-gap, $toast-icon-gap);
+  width: 100%;
+  padding: var(--toast-padding-y, $toast-padding-y) var(--toast-padding-x, $toast-padding-x);
+  // Component token overrides
+  background-color: var(--toast-background-default, $toast-background-default);
+  border-color: var(--toast-border-color-default, $toast-border-color-default);
+  border-width: var(--toast-border-width, $toast-border-width);
+  border-radius: var(--toast-radius, $toast-radius);
+  box-shadow: var(--toast-shadow, $toast-shadow);
+  overflow: hidden;
+}
+
+.#{$c}--closable {
+  padding-right: calc(var(--toast-padding-x, $toast-padding-x) + var(--toast-closeButton-size, $toast-closeButton-size) + var(--toast-icon-gap, $toast-icon-gap));
+}
+
+// Severity variants
+.#{$c}--success {
+  background-color: var(--toast-background-success, $toast-background-success);
+  border-color: var(--toast-border-color-success, $toast-border-color-success);
+
+  .#{$c}__icon {
+    color: var(--toast-icon-color-success, $toast-icon-color-success);
+  }
+
+  .#{$c}__summary {
+    color: var(--toast-summary-color-success, $toast-summary-color-success);
+  }
+}
+
+.#{$c}--info {
+  background-color: var(--toast-background-info, $toast-background-info);
+  border-color: var(--toast-border-color-info, $toast-border-color-info);
+
+  .#{$c}__icon {
+    color: var(--toast-icon-color-info, $toast-icon-color-info);
+  }
+
+  .#{$c}__summary {
+    color: var(--toast-summary-color-info, $toast-summary-color-info);
+  }
+}
+
+.#{$c}--warning {
+  background-color: var(--toast-background-warning, $toast-background-warning);
+  border-color: var(--toast-border-color-warning, $toast-border-color-warning);
+
+  .#{$c}__icon {
+    color: var(--toast-icon-color-warning, $toast-icon-color-warning);
+  }
+
+  .#{$c}__summary {
+    color: var(--toast-summary-color-warning, $toast-summary-color-warning);
+  }
+}
+
+.#{$c}--error {
+  background-color: var(--toast-background-error, $toast-background-error);
+  border-color: var(--toast-border-color-error, $toast-border-color-error);
+
+  .#{$c}__icon {
+    color: var(--toast-icon-color-error, $toast-icon-color-error);
+  }
+
+  .#{$c}__summary {
+    color: var(--toast-summary-color-error, $toast-summary-color-error);
+  }
+}
+
+.#{$c}__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toast-icon-size, $toast-icon-size);
+  height: var(--toast-icon-size, $toast-icon-size);
+  color: var(--toast-icon-color-default, $toast-icon-color-default);
+  flex-shrink: 0;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--toast-content-gap, $toast-content-gap);
+  flex: 1;
+  min-width: 0;
+}
+
+.#{$c}__summary {
+  font-size: var(--toast-summary-fontSize, $toast-summary-fontSize);
+  font-weight: var(--toast-summary-fontWeight, $toast-summary-fontWeight);
+  color: var(--toast-summary-color-default, $toast-summary-color-default);
+  line-height: 1.4;
+}
+
+.#{$c}__detail {
+  font-size: var(--toast-detail-fontSize, $toast-detail-fontSize);
+  color: var(--toast-detail-color, $toast-detail-color);
+  line-height: 1.4;
+}
+
+.#{$c}__close {
+  position: absolute;
+  top: var(--toast-padding-y, $toast-padding-y);
+  right: var(--toast-padding-x, $toast-padding-x);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toast-closeButton-size, $toast-closeButton-size);
+  height: var(--toast-closeButton-size, $toast-closeButton-size);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--toast-closeButton-color-default, $toast-closeButton-color-default);
+  border-radius: var(--toast-closeButton-radius, $toast-closeButton-radius);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background-color: var(--toast-closeButton-background-hover, $toast-closeButton-background-hover);
+    color: var(--toast-closeButton-color-hover, $toast-closeButton-color-hover);
+  }
+
+  svg {
+    width: var(--toast-closeButton-iconSize, $toast-closeButton-iconSize);
+    height: var(--toast-closeButton-iconSize, $toast-closeButton-iconSize);
+  }
+}
+
+.#{$c}__progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--toast-progress-height, $toast-progress-height);
+  background-color: var(--toast-progress-background, $toast-progress-background);
+  overflow: hidden;
+}
+
+.#{$c}__progress-bar {
+  height: 100%;
+  background-color: var(--toast-progress-fill-default, $toast-progress-fill-default);
+  animation: toast-progress-shrink linear forwards;
+}
+
+.#{$c}__progress-bar--success {
+  background-color: var(--toast-progress-fill-success, $toast-progress-fill-success);
+}
+
+.#{$c}__progress-bar--info {
+  background-color: var(--toast-progress-fill-info, $toast-progress-fill-info);
+}
+
+.#{$c}__progress-bar--warning {
+  background-color: var(--toast-progress-fill-warning, $toast-progress-fill-warning);
+}
+
+.#{$c}__progress-bar--error {
+  background-color: var(--toast-progress-fill-error, $toast-progress-fill-error);
+}
+
+@keyframes toast-progress-shrink {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
+// Transition animations
+.#{$c}-slide-enter-active,
+.#{$c}-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.#{$c}-slide-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.#{$c}-slide-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+// Adjust slide direction based on position
+.#{$c}-container--top-left,
+.#{$c}-container--bottom-left {
+  .#{$c}-slide-enter-from,
+  .#{$c}-slide-leave-to {
+    transform: translateX(-100%);
+  }
+}
+
+.#{$c}-container--top-center,
+.#{$c}-container--bottom-center,
+.#{$c}-container--center {
+  .#{$c}-slide-enter-from {
+    transform: translateY(-20px);
+  }
+
+  .#{$c}-slide-leave-to {
+    transform: translateY(-20px);
+  }
+}

package/src/components/Toast/Toast.vue

@@ -0,0 +1,162 @@
+<template>
+  <Teleport to="body">
+    <div
+      class="toast-container"
+      :class="`toast-container--${position}`"
+    >
+      <TransitionGroup name="toast-slide">
+        <div
+          v-for="toast in toasts"
+          :key="toast.id"
+          class="toast"
+          :class="[
+            `toast--${toast.severity || 'default'}`,
+            { 'toast--closable': toast.closable !== false }
+          ]"
+          role="alert"
+          aria-live="assertive"
+        >
+          <span v-if="showIcon" class="toast__icon">
+            <svg v-if="toast.severity === 'success'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
+            <svg v-else-if="toast.severity === 'info'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="16" x2="12" y2="12" />
+              <line x1="12" y1="8" x2="12.01" y2="8" />
+            </svg>
+            <svg v-else-if="toast.severity === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+              <line x1="12" y1="9" x2="12" y2="13" />
+              <line x1="12" y1="17" x2="12.01" y2="17" />
+            </svg>
+            <svg v-else-if="toast.severity === 'error'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="15" y1="9" x2="9" y2="15" />
+              <line x1="9" y1="9" x2="15" y2="15" />
+            </svg>
+            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+              <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+            </svg>
+          </span>
+
+          <div class="toast__content">
+            <span v-if="toast.summary" class="toast__summary">{{ toast.summary }}</span>
+            <span v-if="toast.detail" class="toast__detail">{{ toast.detail }}</span>
+          </div>
+
+          <button
+            v-if="toast.closable !== false"
+            type="button"
+            class="toast__close"
+            aria-label="Close"
+            @click="removeToast(toast.id)"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+
+          <div
+            v-if="toast.life && showProgress"
+            class="toast__progress"
+          >
+            <div
+              class="toast__progress-bar"
+              :class="`toast__progress-bar--${toast.severity || 'default'}`"
+              :style="{ animationDuration: `${toast.life}ms` }"
+            />
+          </div>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style src="./Toast.scss"></style>
+
+<script setup lang="ts">
+import type { ToastProps } from '../../types';
+import { ref, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpToast' });
+
+const props = withDefaults(defineProps<ToastProps>(), {
+  position: "top-right",
+  group: null,
+  showIcon: true,
+  showProgress: true,
+});
+
+const toasts = ref<any[]>([]);
+let toastIdCounter = 0;
+const timeoutIds = new Map();
+
+function add(toast: any) {
+  const id = ++toastIdCounter;
+  const newToast = {
+    id,
+    severity: "default",
+    closable: true,
+    life: 3000,
+    ...toast,
+  };
+
+  toasts.value.push(newToast);
+
+  if (newToast.life > 0) {
+    const timeoutId = setTimeout(() => {
+      timeoutIds.delete(id);
+      removeToast(id);
+    }, newToast.life);
+    timeoutIds.set(id, timeoutId);
+  }
+
+  return id;
+}
+
+function removeToast(id: any) {
+  const timeoutId = timeoutIds.get(id);
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+    timeoutIds.delete(id);
+  }
+  const index = toasts.value.findIndex((t) => t.id === id);
+  if (index > -1) {
+    toasts.value.splice(index, 1);
+  }
+}
+
+function removeGroup(group: any) {
+  toasts.value.filter((t) => t.group === group).forEach((t) => {
+    const timeoutId = timeoutIds.get(t.id);
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutIds.delete(t.id);
+    }
+  });
+  toasts.value = toasts.value.filter((t) => t.group !== group);
+}
+
+function removeAllGroups() {
+  timeoutIds.forEach((timeoutId) => clearTimeout(timeoutId));
+  timeoutIds.clear();
+  toasts.value = [];
+}
+
+onUnmounted(() => {
+  timeoutIds.forEach((timeoutId) => clearTimeout(timeoutId));
+  timeoutIds.clear();
+});
+
+// Expose methods for external use
+defineExpose({
+  add,
+  remove: removeToast,
+  removeGroup,
+  removeAllGroups,
+});
+</script>

package/src/components/ToggleButton/ToggleButton.scss

@@ -0,0 +1,99 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: toggle-button;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--toggleButton-gap, $toggleButton-gap);
+  border: var(--toggleButton-border-width, $toggleButton-border-width) solid var(--toggleButton-border-off-default, $toggleButton-border-off-default);
+  border-radius: var(--toggleButton-radius, $toggleButton-radius);
+  background-color: var(--toggleButton-background-off-default, $toggleButton-background-off-default);
+  color: var(--toggleButton-text-off-default, $toggleButton-text-off-default);
+  font-weight: var(--toggleButton-fontWeight, $toggleButton-fontWeight);
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--toggleButton-transition-duration, $toggleButton-transition-duration) ease;
+}
+
+.#{$c}__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.#{$c}__label {
+  white-space: nowrap;
+}
+
+// Hover state (off)
+.#{$c}:hover:not(.#{$c}--disabled):not(.#{$c}--checked) {
+  background-color: var(--toggleButton-background-off-hover, $toggleButton-background-off-hover);
+  border-color: var(--toggleButton-border-off-hover, $toggleButton-border-off-hover);
+}
+
+// Focus state
+.#{$c}:focus-visible {
+  outline: var(--toggleButton-focus-ringWidth, $toggleButton-focus-ringWidth) solid var(--toggleButton-focus-ringColor, $toggleButton-focus-ringColor);
+  outline-offset: var(--toggleButton-focus-ringOffset, $toggleButton-focus-ringOffset);
+}
+
+// Checked state
+.#{$c}--checked {
+  background-color: var(--toggleButton-background-on-default, $toggleButton-background-on-default);
+  border-color: var(--toggleButton-border-on-default, $toggleButton-border-on-default);
+  color: var(--toggleButton-text-on-default, $toggleButton-text-on-default);
+}
+
+// Hover state (on)
+.#{$c}--checked:hover:not(.#{$c}--disabled) {
+  background-color: var(--toggleButton-background-on-hover, $toggleButton-background-on-hover);
+  border-color: var(--toggleButton-border-on-hover, $toggleButton-border-on-hover);
+}
+
+// Disabled state
+.#{$c}--disabled {
+  cursor: not-allowed;
+  background-color: var(--toggleButton-background-disabled, $toggleButton-background-disabled);
+  border-color: var(--toggleButton-border-disabled, $toggleButton-border-disabled);
+  color: var(--toggleButton-text-disabled, $toggleButton-text-disabled);
+}
+
+// Sizes
+.#{$c}--size-sm {
+  height: var(--toggleButton-height-sm, $toggleButton-height-sm);
+  padding: var(--toggleButton-padding-sm-y, $toggleButton-padding-sm-y) var(--toggleButton-padding-sm-x, $toggleButton-padding-sm-x);
+  font-size: var(--toggleButton-fontSize-sm, $toggleButton-fontSize-sm);
+
+  .#{$c}__icon {
+    width: var(--toggleButton-iconSize-sm, $toggleButton-iconSize-sm);
+    height: var(--toggleButton-iconSize-sm, $toggleButton-iconSize-sm);
+    font-size: var(--toggleButton-iconSize-sm, $toggleButton-iconSize-sm);
+  }
+}
+
+.#{$c}--size-md {
+  height: var(--toggleButton-height-md, $toggleButton-height-md);
+  padding: var(--toggleButton-padding-md-y, $toggleButton-padding-md-y) var(--toggleButton-padding-md-x, $toggleButton-padding-md-x);
+  font-size: var(--toggleButton-fontSize-md, $toggleButton-fontSize-md);
+
+  .#{$c}__icon {
+    width: var(--toggleButton-iconSize-md, $toggleButton-iconSize-md);
+    height: var(--toggleButton-iconSize-md, $toggleButton-iconSize-md);
+    font-size: var(--toggleButton-iconSize-md, $toggleButton-iconSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  height: var(--toggleButton-height-lg, $toggleButton-height-lg);
+  padding: var(--toggleButton-padding-lg-y, $toggleButton-padding-lg-y) var(--toggleButton-padding-lg-x, $toggleButton-padding-lg-x);
+  font-size: var(--toggleButton-fontSize-lg, $toggleButton-fontSize-lg);
+
+  .#{$c}__icon {
+    width: var(--toggleButton-iconSize-lg, $toggleButton-iconSize-lg);
+    height: var(--toggleButton-iconSize-lg, $toggleButton-iconSize-lg);
+    font-size: var(--toggleButton-iconSize-lg, $toggleButton-iconSize-lg);
+  }
+}

package/src/components/ToggleButton/ToggleButton.vue

@@ -0,0 +1,65 @@
+<template>
+  <button
+    type="button"
+    class="toggle-button"
+    :class="additionalClasses"
+    :disabled="isDisabled"
+    :aria-pressed="modelValue"
+    @click="onClick"
+  >
+    <span v-if="currentIcon" class="toggle-button__icon">
+      <slot name="icon" :value="modelValue">
+        <i :class="currentIcon"></i>
+      </slot>
+    </span>
+    <span v-if="currentLabel" class="toggle-button__label">
+      {{ currentLabel }}
+    </span>
+  </button>
+</template>
+
+<style src="./ToggleButton.scss"></style>
+
+<script setup lang="ts">
+import type { ToggleButtonProps, ToggleButtonEmits } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpToggleButton' });
+
+const props = withDefaults(defineProps<ToggleButtonProps>(), {
+  modelValue: false,
+  onLabel: "",
+  offLabel: "",
+  onIcon: "",
+  offIcon: "",
+  size: "md",
+  isDisabled: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const onClick = (event: MouseEvent) => {
+  if (props.isDisabled) return;
+  const newValue = !props.modelValue;
+  emit("update:modelValue", newValue);
+  emit("change", { value: newValue, originalEvent: event });
+};
+
+const currentLabel = computed(() => {
+  return props.modelValue ? props.onLabel : props.offLabel;
+});
+
+const currentIcon = computed(() => {
+  return props.modelValue ? props.onIcon : props.offIcon;
+});
+
+const additionalClasses = computed(() =>
+  [
+    `toggle-button--size-${props.size}`,
+    props.modelValue && "toggle-button--checked",
+    props.isDisabled && "toggle-button--disabled",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/ToggleSwitch/ToggleSwitch.scss

@@ -0,0 +1,68 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: toggle-switch;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.#{$c}__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.#{$c}__track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: var(--toggleSwitch-width-md, $toggleSwitch-width-md);
+  height: var(--toggleSwitch-height-md, $toggleSwitch-height-md);
+  background-color: var(--toggleSwitch-track-background-off, $toggleSwitch-track-background-off);
+  border-radius: 9999px;
+  transition: background-color 0.2s ease;
+}
+
+.#{$c}__thumb {
+  position: absolute;
+  left: var(--toggleSwitch-thumb-offset, $toggleSwitch-thumb-offset);
+  width: var(--toggleSwitch-thumb-size-md, $toggleSwitch-thumb-size-md);
+  height: var(--toggleSwitch-thumb-size-md, $toggleSwitch-thumb-size-md);
+  background-color: var(--toggleSwitch-thumb-color-default, $toggleSwitch-thumb-color-default);
+  border-radius: 50%;
+  box-shadow: var(--toggleSwitch-thumb-shadow, $toggleSwitch-thumb-shadow);
+  transition: transform 0.2s ease;
+}
+
+// Focus state
+.#{$c}__input:focus-visible ~ .#{$c}__track {
+  outline: var(--toggleSwitch-focus-ringWidth, $toggleSwitch-focus-ringWidth) solid var(--toggleSwitch-focus-ringColor, $toggleSwitch-focus-ringColor);
+  outline-offset: var(--toggleSwitch-focus-ringOffset, $toggleSwitch-focus-ringOffset);
+}
+
+// Checked state
+.#{$c}--checked {
+  .#{$c}__track {
+    @include accent-gradient($angle: 90deg);
+  }
+
+  .#{$c}__thumb {
+    transform: translateX(calc(var(--toggleSwitch-width-md, $toggleSwitch-width-md) - var(--toggleSwitch-thumb-size-md, $toggleSwitch-thumb-size-md) - var(--toggleSwitch-thumb-offset, $toggleSwitch-thumb-offset) * 2));
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  cursor: not-allowed;
+
+  .#{$c}__track {
+    background-color: var(--toggleSwitch-track-background-disabled, $toggleSwitch-track-background-disabled);
+  }
+}