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

package/src/components/RadioButton/RadioButton.scss

@@ -0,0 +1,148 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: radio;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--radio-label-gap, $radio-label-gap);
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+}
+
+.#{$c}__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.#{$c}__circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: var(--radio-background-default, $radio-background-default);
+  border: var(--radio-border-width, $radio-border-width) solid var(--radio-border-color-default, $radio-border-color-default);
+  border-radius: 50%;
+  transition: all 0.15s ease;
+}
+
+.#{$c}__dot {
+  border-radius: 50%;
+  background-color: var(--radio-dot-color, $radio-dot-color);
+  opacity: 0;
+  transform: scale(0);
+  transition: all 0.15s ease;
+}
+
+.#{$c}__label {
+  color: var(--radio-label-color-default, $radio-label-color-default);
+  line-height: 1.4;
+}
+
+// Hover state
+.#{$c}:hover:not(.#{$c}--disabled) {
+  .#{$c}__circle {
+    border-color: var(--radio-border-color-hover, $radio-border-color-hover);
+    background-color: var(--radio-background-hover, $radio-background-hover);
+  }
+}
+
+// Focus state
+.#{$c}__input:focus-visible ~ .#{$c}__circle {
+  outline: var(--radio-focus-ringWidth, $radio-focus-ringWidth) solid var(--radio-focus-ringColor, $radio-focus-ringColor);
+  outline-offset: var(--radio-focus-ringOffset, $radio-focus-ringOffset);
+}
+
+// Checked state
+.#{$c}--checked {
+  .#{$c}__circle {
+    @include accent-gradient();
+    border-color: var(--accent-gradient-start, $accent-gradient-start);
+  }
+
+  .#{$c}__dot {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  cursor: not-allowed;
+
+  .#{$c}__circle {
+    background-color: var(--radio-background-disabled, $radio-background-disabled);
+    border-color: var(--radio-border-color-disabled, $radio-border-color-disabled);
+  }
+
+  .#{$c}__label {
+    color: var(--radio-label-color-disabled, $radio-label-color-disabled);
+  }
+}
+
+.#{$c}--disabled.#{$c}--checked {
+  .#{$c}__circle {
+    background-color: var(--radio-border-color-disabled, $radio-border-color-disabled);
+  }
+}
+
+// Invalid state
+.#{$c}--invalid {
+  .#{$c}__circle {
+    border-color: var(--radio-border-color-error, $radio-border-color-error);
+  }
+}
+
+// Sizes
+.#{$c}--size-sm {
+  .#{$c}__circle {
+    width: var(--radio-size-sm, $radio-size-sm);
+    height: var(--radio-size-sm, $radio-size-sm);
+  }
+
+  .#{$c}__dot {
+    width: var(--radio-dotSize-sm, $radio-dotSize-sm);
+    height: var(--radio-dotSize-sm, $radio-dotSize-sm);
+  }
+
+  .#{$c}__label {
+    font-size: 14px;
+  }
+}
+
+.#{$c}--size-md {
+  .#{$c}__circle {
+    width: var(--radio-size-md, $radio-size-md);
+    height: var(--radio-size-md, $radio-size-md);
+  }
+
+  .#{$c}__dot {
+    width: var(--radio-dotSize-md, $radio-dotSize-md);
+    height: var(--radio-dotSize-md, $radio-dotSize-md);
+  }
+
+  .#{$c}__label {
+    font-size: 15px;
+  }
+}
+
+.#{$c}--size-lg {
+  .#{$c}__circle {
+    width: var(--radio-size-lg, $radio-size-lg);
+    height: var(--radio-size-lg, $radio-size-lg);
+  }
+
+  .#{$c}__dot {
+    width: var(--radio-dotSize-lg, $radio-dotSize-lg);
+    height: var(--radio-dotSize-lg, $radio-dotSize-lg);
+  }
+
+  .#{$c}__label {
+    font-size: 16px;
+  }
+}

package/src/components/RadioButton/RadioButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <label class="radio" :class="additionalClasses">
+    <input
+      type="radio"
+      class="radio__input"
+      :checked="isChecked"
+      :disabled="isDisabled"
+      :name="name"
+      :value="value"
+      :aria-invalid="isInvalid || undefined"
+      @change="onChange"
+    />
+    <span class="radio__circle">
+      <span class="radio__dot"></span>
+    </span>
+    <span v-if="label || $slots.default" class="radio__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<style src="./RadioButton.scss"></style>
+
+<script setup lang="ts">
+import type { RadioButtonProps, RadioButtonEmits } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpRadioButton' });
+
+const props = withDefaults(defineProps<RadioButtonProps>(), {
+  modelValue: null,
+  size: "md",
+  isDisabled: false,
+  isInvalid: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const isChecked = computed(() => props.modelValue === props.value);
+
+const onChange = (event: Event) => {
+  emit("update:modelValue", props.value);
+  emit("change", { value: props.value, originalEvent: event });
+};
+
+const additionalClasses = computed(() => [
+  `radio--size-${props.size}`,
+  props.isDisabled && "radio--disabled",
+  props.isInvalid && "radio--invalid",
+  isChecked.value && "radio--checked",
+].filter(Boolean).join(" "));
+</script>

package/src/components/Rating/Rating.scss

@@ -0,0 +1,109 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: rating;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rating-star-gap, $rating-star-gap);
+}
+
+.#{$c}__star {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--rating-star-color-default, $rating-star-color-default);
+  cursor: pointer;
+  transition: color 0.15s ease, transform 0.15s ease;
+
+  &:hover:not(:disabled) {
+    color: var(--rating-star-color-hover, $rating-star-color-hover);
+    transform: scale(1.1);
+  }
+
+  &:focus-visible {
+    outline: var(--rating-focus-ringWidth, $rating-focus-ringWidth) solid var(--rating-focus-ringColor, $rating-focus-ringColor);
+    outline-offset: var(--rating-focus-ringOffset, $rating-focus-ringOffset);
+    border-radius: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--rating-star-color-disabled, $rating-star-color-disabled);
+  }
+}
+
+.#{$c}__star--active {
+  color: var(--rating-star-color-active, $rating-star-color-active);
+
+  &:hover:not(:disabled) {
+    color: var(--rating-star-color-hover, $rating-star-color-hover);
+  }
+}
+
+.#{$c}__star--hover {
+  color: var(--rating-star-color-hover, $rating-star-color-hover);
+}
+
+.#{$c}__star-icon {
+  width: var(--rating-star-size, $rating-star-size);
+  height: var(--rating-star-size, $rating-star-size);
+}
+
+.#{$c}__cancel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--rating-cancel-color-default, $rating-cancel-color-default);
+  cursor: pointer;
+  transition: color 0.15s ease, transform 0.15s ease;
+
+  &:hover {
+    color: var(--rating-cancel-color-hover, $rating-cancel-color-hover);
+    transform: scale(1.1);
+  }
+
+  &:focus-visible {
+    outline: var(--rating-focus-ringWidth, $rating-focus-ringWidth) solid var(--rating-focus-ringColor, $rating-focus-ringColor);
+    outline-offset: var(--rating-focus-ringOffset, $rating-focus-ringOffset);
+    border-radius: 2px;
+  }
+}
+
+.#{$c}__cancel-icon {
+  width: var(--rating-cancel-size, $rating-cancel-size);
+  height: var(--rating-cancel-size, $rating-cancel-size);
+}
+
+// Readonly state
+.#{$c}--readonly {
+  .#{$c}__star {
+    cursor: default;
+
+    &:hover {
+      transform: none;
+    }
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  .#{$c}__star {
+    cursor: not-allowed;
+    color: var(--rating-star-color-disabled, $rating-star-color-disabled);
+
+    &:hover {
+      transform: none;
+    }
+  }
+
+  .#{$c}__star--active {
+    color: var(--rating-star-color-disabledActive, $rating-star-color-disabledActive);
+  }
+}

package/src/components/Rating/Rating.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="rating" :class="additionalClasses" role="radiogroup" :aria-label="ariaLabel || 'Rating'">
+    <button
+      v-if="cancel && !readonly && !isDisabled"
+      type="button"
+      class="rating__cancel"
+      :tabindex="isDisabled ? -1 : 0"
+      @click="onCancelClick"
+      @keydown.enter.prevent="onCancelClick"
+      @keydown.space.prevent="onCancelClick"
+    >
+      <svg
+        class="rating__cancel-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>
+    <button
+      v-for="star in stars"
+      :key="star"
+      type="button"
+      class="rating__star"
+      :class="{
+        'rating__star--active': star <= currentValue,
+        'rating__star--hover': !readonly && !isDisabled && star <= hoverValue && hoverValue > 0,
+      }"
+      :tabindex="readonly || isDisabled ? -1 : 0"
+      :disabled="isDisabled"
+      role="radio"
+      :aria-checked="star === currentValue"
+      :aria-label="`${star} of ${stars} stars`"
+      @click="onStarClick(star)"
+      @mouseenter="onStarHover(star)"
+      @mouseleave="onStarLeave"
+      @keydown.enter.prevent="onStarClick(star)"
+      @keydown.space.prevent="onStarClick(star)"
+      @keydown="onStarKeydown($event, star)"
+    >
+      <svg
+        class="rating__star-icon"
+        viewBox="0 0 24 24"
+        :fill="star <= currentValue ? 'currentColor' : 'none'"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style src="./Rating.scss"></style>
+
+<script setup lang="ts">
+import type { RatingProps, RatingEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpRating' });
+
+const props = withDefaults(defineProps<RatingProps>(), {
+  modelValue: null,
+  stars: 5,
+  readonly: false,
+  isDisabled: false,
+  cancel: true,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const hoverValue = ref(0);
+
+const currentValue = computed(() => props.modelValue ?? 0);
+
+const onStarClick = (value: any) => {
+  if (props.readonly || props.isDisabled) return;
+
+  // Toggle behavior: clicking the same value deselects
+  const newValue = value === props.modelValue ? null : value;
+  emit("update:modelValue", newValue);
+  emit("change", { value: newValue });
+};
+
+const onCancelClick = () => {
+  if (props.readonly || props.isDisabled) return;
+  emit("update:modelValue", null);
+  emit("change", { value: null });
+};
+
+const onStarKeydown = (event: KeyboardEvent, star: any) => {
+  if (props.readonly || props.isDisabled) return;
+  let newValue = star;
+  switch (event.key) {
+    case "ArrowRight":
+    case "ArrowUp":
+      event.preventDefault();
+      newValue = Math.min(star + 1, props.stars);
+      break;
+    case "ArrowLeft":
+    case "ArrowDown":
+      event.preventDefault();
+      newValue = Math.max(star - 1, 1);
+      break;
+    default:
+      return;
+  }
+  emit("update:modelValue", newValue);
+  emit("change", { value: newValue });
+};
+
+const onStarHover = (value: any) => {
+  if (props.readonly || props.isDisabled) return;
+  hoverValue.value = value;
+};
+
+const onStarLeave = () => {
+  hoverValue.value = 0;
+};
+
+const additionalClasses = computed(() =>
+  [
+    props.readonly && "rating--readonly",
+    props.isDisabled && "rating--disabled",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/Row/Row.scss

@@ -0,0 +1,38 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: row;
+
+.#{$c} {
+  background-color: var(--row-background-default, $row-background-default);
+  color: var(--row-text-default, $row-text-default);
+  border-bottom: var(--row-border-width, $row-border-width) solid var(--row-border-color, $row-border-color);
+  min-height: var(--row-height, $row-height);
+  transition: background-color 0.15s ease;
+
+  > td,
+  > th {
+    padding: var(--row-padding-y, $row-padding-y) var(--row-padding-x, $row-padding-x);
+  }
+}
+
+.#{$c}--hoverable {
+  &:hover {
+    background-color: var(--row-background-hover, $row-background-hover);
+  }
+}
+
+.#{$c}--selected {
+  background-color: var(--row-background-selected, $row-background-selected);
+
+  &:hover {
+    background-color: var(--row-background-selected, $row-background-selected);
+  }
+}
+
+.#{$c}--striped {
+  background-color: var(--row-background-striped, $row-background-striped);
+
+  &:hover {
+    background-color: var(--row-background-hover, $row-background-hover);
+  }
+}

package/src/components/Row/Row.vue

@@ -0,0 +1,30 @@
+<template>
+  <tr class="row" :class="additionalClasses">
+    <slot />
+  </tr>
+</template>
+
+<style src="./Row.scss"></style>
+
+<script setup lang="ts">
+import type { RowProps } from '../../types';
+import { computed } from "vue";
+
+defineOptions({ name: 'FtpRow' });
+
+const props = withDefaults(defineProps<RowProps>(), {
+  isSelected: false,
+  isStriped: false,
+  isHoverable: true,
+});
+
+const additionalClasses = computed(() =>
+  [
+    props.isSelected && "row--selected",
+    props.isStriped && "row--striped",
+    props.isHoverable && "row--hoverable",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/ScrollPanel/ScrollPanel.scss

@@ -0,0 +1,90 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: scroll-panel;
+
+.#{$c} {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--scroll-panel-background, $scroll-panel-background);
+}
+
+// Content area (hides native scrollbars)
+.#{$c}__content {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+
+  // Hide native scrollbars
+  scrollbar-width: none; // Firefox
+  -ms-overflow-style: none; // IE/Edge
+
+  &::-webkit-scrollbar {
+    display: none; // Chrome/Safari/Opera
+  }
+}
+
+// Scrollbar track
+.#{$c}__bar {
+  position: absolute;
+  opacity: 0;
+  transition: opacity var(--scroll-panel-transition-duration, $scroll-panel-transition-duration) ease;
+  z-index: 1;
+  background-color: var(--scroll-panel-scrollbar-track-background, $scroll-panel-scrollbar-track-background);
+
+  // Show on hover or when dragging
+  .#{$c}:hover &,
+  &--dragging {
+    opacity: 1;
+  }
+}
+
+.#{$c}__bar--vertical {
+  top: var(--scroll-panel-scrollbar-padding, $scroll-panel-scrollbar-padding);
+  right: var(--scroll-panel-scrollbar-padding, $scroll-panel-scrollbar-padding);
+  bottom: var(--scroll-panel-scrollbar-padding, $scroll-panel-scrollbar-padding);
+  width: var(--scroll-panel-scrollbar-size, $scroll-panel-scrollbar-size);
+  border-radius: var(--scroll-panel-scrollbar-track-radius, $scroll-panel-scrollbar-track-radius);
+}
+
+.#{$c}__bar--horizontal {
+  left: var(--scroll-panel-scrollbar-padding, $scroll-panel-scrollbar-padding);
+  right: var(--scroll-panel-scrollbar-padding, $scroll-panel-scrollbar-padding);
+  bottom: var(--scroll-panel-scrollbar-padding, $scroll-panel-scrollbar-padding);
+  height: var(--scroll-panel-scrollbar-size, $scroll-panel-scrollbar-size);
+  border-radius: var(--scroll-panel-scrollbar-track-radius, $scroll-panel-scrollbar-track-radius);
+}
+
+// Scrollbar thumb
+.#{$c}__thumb {
+  position: absolute;
+  background-color: var(--scroll-panel-scrollbar-thumb-background-default, $scroll-panel-scrollbar-thumb-background-default);
+  border-radius: var(--scroll-panel-scrollbar-thumb-radius, $scroll-panel-scrollbar-thumb-radius);
+  cursor: pointer;
+  transition: background-color var(--scroll-panel-transition-duration, $scroll-panel-transition-duration) ease;
+
+  &:hover {
+    background-color: var(--scroll-panel-scrollbar-thumb-background-hover, $scroll-panel-scrollbar-thumb-background-hover);
+  }
+
+  &:active {
+    background-color: var(--scroll-panel-scrollbar-thumb-background-active, $scroll-panel-scrollbar-thumb-background-active);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+
+  // Vertical thumb
+  .#{$c}__bar--vertical & {
+    width: 100%;
+    min-height: var(--scroll-panel-scrollbar-thumb-minSize, $scroll-panel-scrollbar-thumb-minSize);
+  }
+
+  // Horizontal thumb
+  .#{$c}__bar--horizontal & {
+    height: 100%;
+    min-width: var(--scroll-panel-scrollbar-thumb-minSize, $scroll-panel-scrollbar-thumb-minSize);
+  }
+}