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

package/src/components/Slider/Slider.scss

@@ -0,0 +1,103 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: slider;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+  padding: 8px 0;
+}
+
+.#{$c}__input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: var(--slider-track-height, $slider-track-height);
+  background: linear-gradient(
+    to right,
+    var(--accent-gradient-start, $accent-gradient-start) 0%,
+    var(--accent-gradient-end, $accent-gradient-end) var(--slider-fill-percentage, 0%),
+    var(--slider-track-background-default, $slider-track-background-default) var(--slider-fill-percentage, 0%),
+    var(--slider-track-background-default, $slider-track-background-default) 100%
+  );
+  border-radius: var(--slider-track-radius, $slider-track-radius);
+  outline: none;
+  cursor: pointer;
+
+  // Webkit thumb (styled like ToggleSwitch)
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--slider-thumb-size, $slider-thumb-size);
+    height: var(--slider-thumb-size, $slider-thumb-size);
+    background-color: var(--toggleSwitch-thumb-color-default, $toggleSwitch-thumb-color-default);
+    border: none;
+    border-radius: 50%;
+    box-shadow: var(--toggleSwitch-thumb-shadow, $toggleSwitch-thumb-shadow);
+    cursor: pointer;
+    transition: transform 0.15s ease;
+  }
+
+  &::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  // Firefox thumb (styled like ToggleSwitch)
+  &::-moz-range-thumb {
+    width: var(--slider-thumb-size, $slider-thumb-size);
+    height: var(--slider-thumb-size, $slider-thumb-size);
+    background-color: var(--toggleSwitch-thumb-color-default, $toggleSwitch-thumb-color-default);
+    border: none;
+    border-radius: 50%;
+    box-shadow: var(--toggleSwitch-thumb-shadow, $toggleSwitch-thumb-shadow);
+    cursor: pointer;
+    transition: transform 0.15s ease;
+  }
+
+  &::-moz-range-thumb:hover {
+    transform: scale(1.1);
+  }
+
+  // Firefox track
+  &::-moz-range-track {
+    height: var(--slider-track-height, $slider-track-height);
+    background: transparent;
+    border-radius: var(--slider-track-radius, $slider-track-radius);
+  }
+
+  // Focus state
+  &:focus-visible {
+    &::-webkit-slider-thumb {
+      outline: var(--slider-focus-ringWidth, $slider-focus-ringWidth) solid var(--slider-focus-ringColor, $slider-focus-ringColor);
+      outline-offset: var(--slider-focus-ringOffset, $slider-focus-ringOffset);
+    }
+
+    &::-moz-range-thumb {
+      outline: var(--slider-focus-ringWidth, $slider-focus-ringWidth) solid var(--slider-focus-ringColor, $slider-focus-ringColor);
+      outline-offset: var(--slider-focus-ringOffset, $slider-focus-ringOffset);
+    }
+  }
+
+  // Disabled state
+  &:disabled {
+    cursor: not-allowed;
+    background: linear-gradient(
+      to right,
+      var(--slider-track-background-disabled, $slider-track-background-disabled) 0%,
+      var(--slider-track-background-disabled, $slider-track-background-disabled) var(--slider-fill-percentage, 0%),
+      var(--slider-track-background-disabled, $slider-track-background-disabled) var(--slider-fill-percentage, 0%),
+      var(--slider-track-background-disabled, $slider-track-background-disabled) 100%
+    );
+
+    &::-webkit-slider-thumb {
+      background-color: var(--slider-thumb-background-disabled, $slider-thumb-background-disabled);
+      cursor: not-allowed;
+    }
+
+    &::-moz-range-thumb {
+      background-color: var(--slider-thumb-background-disabled, $slider-thumb-background-disabled);
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/Slider/Slider.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="slider" :class="additionalClasses">
+    <input
+      ref="inputRef"
+      type="range"
+      class="slider__input"
+      :value="modelValue"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="isDisabled"
+      :name="name"
+      :aria-label="ariaLabel || 'Slider'"
+      :aria-describedby="ariaDescribedby || undefined"
+      :style="trackStyle"
+      @input="onInput"
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<style src="./Slider.scss"></style>
+
+<script setup lang="ts">
+import type { SliderProps, SliderEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpSlider' });
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  modelValue: 0,
+  min: 0,
+  max: 100,
+  step: 1,
+  isDisabled: false,
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const inputRef = ref(null);
+
+const percentage = computed(() => {
+  const range = props.max - props.min;
+  if (range === 0) return 0;
+  return ((props.modelValue - props.min) / range) * 100;
+});
+
+const trackStyle = computed(() => ({
+  "--slider-fill-percentage": `${percentage.value}%`,
+}));
+
+const onInput = (event: Event) => {
+  const value = parseFloat((event.target as HTMLInputElement).value);
+  emit("update:modelValue", value);
+};
+
+const onChange = (event: Event) => {
+  const value = parseFloat((event.target as HTMLInputElement).value);
+  emit("change", { value, originalEvent: event });
+};
+
+const additionalClasses = computed(() => [
+  props.isDisabled && "slider--disabled",
+].filter(Boolean).join(" "));
+</script>

package/src/components/SpeedDial/SpeedDial.scss

@@ -0,0 +1,217 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: speed-dial;
+
+.#{$c} {
+  position: relative;
+  display: inline-flex;
+}
+
+.#{$c}__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--speed-dial-button-size, $speed-dial-button-size);
+  height: var(--speed-dial-button-size, $speed-dial-button-size);
+  background-color: var(--speed-dial-button-background-default, $speed-dial-button-background-default);
+  color: var(--speed-dial-button-color, $speed-dial-button-color);
+  border: none;
+  border-radius: var(--speed-dial-button-radius, $speed-dial-button-radius);
+  box-shadow: var(--speed-dial-button-shadow, $speed-dial-button-shadow);
+  cursor: pointer;
+  transition:
+    background-color var(--speed-dial-transition-duration, $speed-dial-transition-duration) ease,
+    transform var(--speed-dial-transition-duration, $speed-dial-transition-duration) ease;
+  z-index: 1;
+
+  &:hover {
+    background-color: var(--speed-dial-button-background-hover, $speed-dial-button-background-hover);
+  }
+
+  &:active {
+    background-color: var(--speed-dial-button-background-active, $speed-dial-button-background-active);
+  }
+
+  &:focus-visible {
+    outline: var(--speed-dial-focus-ringWidth, $speed-dial-focus-ringWidth) solid var(--speed-dial-focus-ringColor, $speed-dial-focus-ringColor);
+    outline-offset: var(--speed-dial-focus-ringOffset, $speed-dial-focus-ringOffset);
+  }
+}
+
+.#{$c}__button-icon {
+  width: var(--speed-dial-button-iconSize, $speed-dial-button-iconSize);
+  height: var(--speed-dial-button-iconSize, $speed-dial-button-iconSize);
+  transition: transform var(--speed-dial-transition-duration, $speed-dial-transition-duration) ease;
+
+  &--open {
+    transform: rotate(45deg);
+  }
+}
+
+.#{$c}__actions {
+  position: absolute;
+  display: flex;
+  z-index: 0;
+}
+
+// Linear layout directions
+.#{$c}--type-linear {
+  .#{$c}__actions--up {
+    flex-direction: column-reverse;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding-bottom: var(--speed-dial-action-gap, $speed-dial-action-gap);
+  }
+
+  .#{$c}__actions--down {
+    flex-direction: column;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding-top: var(--speed-dial-action-gap, $speed-dial-action-gap);
+  }
+
+  .#{$c}__actions--left {
+    flex-direction: row-reverse;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    padding-right: var(--speed-dial-action-gap, $speed-dial-action-gap);
+  }
+
+  .#{$c}__actions--right {
+    flex-direction: row;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    padding-left: var(--speed-dial-action-gap, $speed-dial-action-gap);
+  }
+
+  .#{$c}__action-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--speed-dial-label-offset, $speed-dial-label-offset);
+  }
+}
+
+// Circle/semi-circle/quarter-circle layout
+.#{$c}--type-circle,
+.#{$c}--type-semi-circle,
+.#{$c}--type-quarter-circle {
+  .#{$c}__actions {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.#{$c}__action-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--speed-dial-label-offset, $speed-dial-label-offset);
+
+  .#{$c}--type-linear.#{$c}--direction-up &,
+  .#{$c}--type-linear.#{$c}--direction-down & {
+    flex-direction: row;
+    margin: calc(var(--speed-dial-action-gap, $speed-dial-action-gap) / 2) 0;
+  }
+
+  .#{$c}--type-linear.#{$c}--direction-left & {
+    flex-direction: row;
+    margin: 0 calc(var(--speed-dial-action-gap, $speed-dial-action-gap) / 2);
+  }
+
+  .#{$c}--type-linear.#{$c}--direction-right & {
+    flex-direction: row-reverse;
+    margin: 0 calc(var(--speed-dial-action-gap, $speed-dial-action-gap) / 2);
+  }
+}
+
+.#{$c}__action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--speed-dial-action-size, $speed-dial-action-size);
+  height: var(--speed-dial-action-size, $speed-dial-action-size);
+  background-color: var(--speed-dial-action-background-default, $speed-dial-action-background-default);
+  color: var(--speed-dial-action-color-default, $speed-dial-action-color-default);
+  border: var(--speed-dial-action-border-width, $speed-dial-action-border-width) solid var(--speed-dial-action-border-color, $speed-dial-action-border-color);
+  border-radius: var(--speed-dial-action-radius, $speed-dial-action-radius);
+  box-shadow: var(--speed-dial-action-shadow, $speed-dial-action-shadow);
+  cursor: pointer;
+  transition:
+    background-color var(--speed-dial-transition-duration, $speed-dial-transition-duration) ease,
+    color var(--speed-dial-transition-duration, $speed-dial-transition-duration) ease,
+    transform var(--speed-dial-transition-duration, $speed-dial-transition-duration) ease;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: var(--speed-dial-action-background-hover, $speed-dial-action-background-hover);
+    color: var(--speed-dial-action-color-hover, $speed-dial-action-color-hover);
+    transform: scale(1.1);
+  }
+
+  &:focus-visible {
+    outline: var(--speed-dial-focus-ringWidth, $speed-dial-focus-ringWidth) solid var(--speed-dial-focus-ringColor, $speed-dial-focus-ringColor);
+    outline-offset: var(--speed-dial-focus-ringOffset, $speed-dial-focus-ringOffset);
+  }
+}
+
+.#{$c}__action-icon {
+  font-size: var(--speed-dial-action-iconSize, $speed-dial-action-iconSize);
+}
+
+.#{$c}__action-label {
+  display: none;
+  padding: var(--speed-dial-label-padding-y, $speed-dial-label-padding-y) var(--speed-dial-label-padding-x, $speed-dial-label-padding-x);
+  background-color: var(--speed-dial-label-background, $speed-dial-label-background);
+  color: var(--speed-dial-label-color, $speed-dial-label-color);
+  border-radius: var(--speed-dial-label-radius, $speed-dial-label-radius);
+  font-size: var(--speed-dial-label-fontSize, $speed-dial-label-fontSize);
+  white-space: nowrap;
+
+  .#{$c}--show-labels & {
+    display: block;
+  }
+}
+
+// Open state animation
+.#{$c}--open {
+  .#{$c}__action-wrapper {
+    animation: speed-dial-action-appear var(--speed-dial-transition-duration, $speed-dial-transition-duration) ease forwards;
+  }
+
+  @for $i from 1 through 10 {
+    .#{$c}__action-wrapper:nth-child(#{$i}) {
+      animation-delay: #{($i - 1) * 30}ms;
+    }
+  }
+}
+
+@keyframes speed-dial-action-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Circle type position overrides
+.#{$c}--type-circle .#{$c}__action-wrapper,
+.#{$c}--type-semi-circle .#{$c}__action-wrapper,
+.#{$c}--type-quarter-circle .#{$c}__action-wrapper {
+  @keyframes speed-dial-action-appear {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}

package/src/components/SpeedDial/SpeedDial.vue

@@ -0,0 +1,196 @@
+<template>
+  <div
+    class="speed-dial"
+    :class="additionalClasses"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <button
+      type="button"
+      class="speed-dial__button"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
+      @click="toggle"
+    >
+      <svg
+        class="speed-dial__button-icon"
+        :class="{ 'speed-dial__button-icon--open': isOpen }"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 5V19M5 12H19"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </button>
+
+    <div v-if="isOpen" class="speed-dial__actions" :class="`speed-dial__actions--${direction}`">
+      <div
+        v-for="(item, index) in model"
+        :key="index"
+        class="speed-dial__action-wrapper"
+        :style="getActionStyle(index)"
+      >
+        <span v-if="item.label" class="speed-dial__action-label">{{ item.label }}</span>
+        <button
+          type="button"
+          class="speed-dial__action"
+          :aria-label="item.label"
+          @click="onActionClick(item)"
+        >
+          <i :class="item.icon" class="speed-dial__action-icon" aria-hidden="true"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./SpeedDial.scss"></style>
+
+<script setup lang="ts">
+import type { SpeedDialProps, SpeedDialEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpSpeedDial' });
+
+const props = withDefaults(defineProps<SpeedDialProps>(), {
+  model: () => [],
+  direction: "up",
+  type: "linear",
+  radius: 80,
+  showLabels: true,
+  openOnHover: false,
+});
+
+const emit = defineEmits(["click", "show", "hide"]);
+
+const isOpen = ref(false);
+
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+  emit(isOpen.value ? "show" : "hide");
+};
+
+const open = () => {
+  if (!isOpen.value) {
+    isOpen.value = true;
+    emit("show");
+  }
+};
+
+const close = () => {
+  if (isOpen.value) {
+    isOpen.value = false;
+    emit("hide");
+  }
+};
+
+const onMouseEnter = () => {
+  if (props.openOnHover) {
+    open();
+  }
+};
+
+const onMouseLeave = () => {
+  if (props.openOnHover) {
+    close();
+  }
+};
+
+const onActionClick = (item: any) => {
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+  emit("click", item);
+  close();
+};
+
+const getActionStyle = (index: any) => {
+  if (props.type === "linear") {
+    return {};
+  }
+
+  const total = props.model.length;
+  const radius = props.radius;
+  let startAngle, endAngle;
+
+  switch (props.type) {
+    case "circle":
+      startAngle = 0;
+      endAngle = 360;
+      break;
+    case "semi-circle":
+      switch (props.direction) {
+        case "up":
+          startAngle = 180;
+          endAngle = 360;
+          break;
+        case "down":
+          startAngle = 0;
+          endAngle = 180;
+          break;
+        case "left":
+          startAngle = 90;
+          endAngle = 270;
+          break;
+        case "right":
+          startAngle = -90;
+          endAngle = 90;
+          break;
+      }
+      break;
+    case "quarter-circle":
+      switch (props.direction) {
+        case "up":
+          startAngle = 180;
+          endAngle = 270;
+          break;
+        case "down":
+          startAngle = 0;
+          endAngle = 90;
+          break;
+        case "left":
+          startAngle = 90;
+          endAngle = 180;
+          break;
+        case "right":
+          startAngle = -90;
+          endAngle = 0;
+          break;
+      }
+      break;
+  }
+
+  const angleStep = (endAngle - startAngle) / (props.type === "circle" ? total : total - 1 || 1);
+  const angle = startAngle + index * angleStep;
+  const radian = (angle * Math.PI) / 180;
+
+  const x = Math.cos(radian) * radius;
+  const y = Math.sin(radian) * radius;
+
+  return {
+    position: 'absolute' as const,
+    left: `calc(50% + ${x}px)`,
+    top: `calc(50% + ${y}px)`,
+    transform: "translate(-50%, -50%)",
+  };
+};
+
+const additionalClasses = computed(() =>
+  [
+    `speed-dial--direction-${props.direction}`,
+    `speed-dial--type-${props.type}`,
+    isOpen.value && "speed-dial--open",
+    props.showLabels && "speed-dial--show-labels",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>