jouw-stem__design-system 0.1.0

package/src/components/Slider/Slider.tokens.theme-high-contrast-solarized-dark.json

@@ -0,0 +1,82 @@
+{
+  "slider": {
+    "track": {
+      "height": {
+        "value": "6px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{border.default}",
+          "type": "color",
+          "description": "Inactive track - semantic border token, adapts light/dark"
+        },
+        "fill": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Active/filled track - visible accent color"
+        },
+        "disabled": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Disabled track - more subtle semantic border"
+        }
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension"
+      }
+    },
+    "thumb": {
+      "size": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Thumb - visible accent color"
+        },
+        "hover": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Thumb hover - lighter accent"
+        },
+        "disabled": {
+          "value": "{border.strong}",
+          "type": "color",
+          "description": "Disabled thumb - semantic border token, adapts light/dark"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "0px",
+          "type": "dimension"
+        },
+        "color": {
+          "value": "transparent",
+          "type": "color"
+        }
+      },
+      "shadow": {
+        "value": "0 2px 4px rgba(0, 0, 0, 0.3)",
+        "type": "shadow"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{feedback.warning}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/src/components/Slider/Slider.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,82 @@
+{
+  "slider": {
+    "track": {
+      "height": {
+        "value": "6px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{border.default}",
+          "type": "color",
+          "description": "Inactive track - semantic border token, adapts light/dark"
+        },
+        "fill": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Active/filled track - visible accent color"
+        },
+        "disabled": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Disabled track - more subtle semantic border"
+        }
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension"
+      }
+    },
+    "thumb": {
+      "size": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Thumb - visible accent color"
+        },
+        "hover": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Thumb hover - lighter accent"
+        },
+        "disabled": {
+          "value": "{border.strong}",
+          "type": "color",
+          "description": "Disabled thumb - semantic border token, adapts light/dark"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "0px",
+          "type": "dimension"
+        },
+        "color": {
+          "value": "transparent",
+          "type": "color"
+        }
+      },
+      "shadow": {
+        "value": "0 2px 4px rgba(0, 0, 0, 0.3)",
+        "type": "shadow"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{feedback.warning}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/src/components/Slider/Slider.tokens.theme-light.json

@@ -0,0 +1,82 @@
+{
+  "slider": {
+    "track": {
+      "height": {
+        "value": "6px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{neutral.500}",
+          "type": "color",
+          "description": "Inactive track — #737373, ~4.8:1 vs white canvas (WCAG 1.4.11 ≥3:1)"
+        },
+        "fill": {
+          "value": "{intent.action.default}",
+          "type": "color",
+          "description": "Active/filled track — primary action navy, ~14:1 vs white canvas"
+        },
+        "disabled": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Disabled track — exempt from 1.4.11"
+        }
+      },
+      "radius": {
+        "value": "{radius.pill}",
+        "type": "dimension"
+      }
+    },
+    "thumb": {
+      "size": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{intent.action.default}",
+          "type": "color",
+          "description": "Thumb — primary action navy, ~14:1 vs canvas, ≥3:1 vs the inactive-grey track"
+        },
+        "hover": {
+          "value": "{intent.action.hover}",
+          "type": "color",
+          "description": "Thumb hover — lifted navy"
+        },
+        "disabled": {
+          "value": "{border.strong}",
+          "type": "color",
+          "description": "Disabled thumb — exempt from 1.4.11"
+        }
+      },
+      "border": {
+        "width": {
+          "value": "0px",
+          "type": "dimension"
+        },
+        "color": {
+          "value": "transparent",
+          "type": "color"
+        }
+      },
+      "shadow": {
+        "value": "0 2px 4px rgba(0, 0, 0, 0.3)",
+        "type": "shadow"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{orange.500}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/src/components/Slider/Slider.vue

@@ -0,0 +1,69 @@
+<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'"
+      :style="trackStyle"
+      @input="onInput"
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<style src="./Slider.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { percentage, parseInputValue } from "./sliderMath";
+
+interface Props {
+  modelValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  name?: string;
+  isDisabled?: boolean;
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  min: 0,
+  max: 100,
+  step: 1,
+  isDisabled: false,
+});
+const emit = defineEmits<{
+  (e: "update:modelValue", ...args: unknown[]): void;
+  (e: "change", ...args: unknown[]): void;
+}>();
+const inputRef = ref(null);
+
+const trackStyle = computed(() => ({
+  "--slider-fill-percentage": `${percentage(props.modelValue, props.min, props.max)}%`,
+}));
+
+const onInput = (event: Event) => {
+  const value = parseInputValue((event.target as HTMLInputElement).value);
+  if (value === null) return;
+  emit("update:modelValue", value);
+};
+
+const onChange = (event: Event) => {
+  const value = parseInputValue((event.target as HTMLInputElement).value);
+  if (value === null) return;
+  emit("change", { value, originalEvent: event });
+};
+
+const additionalClasses = computed(() => [
+  props.isDisabled && "slider--state-disabled",
+].filter(Boolean).join(" "));
+</script>

package/src/components/Slider/sliderMath.ts

@@ -0,0 +1,59 @@
+/**
+ * Pure math helpers for Slider.
+ *
+ * The component template binds these into a CSS custom property
+ * (`--slider-fill-percentage`) that drives the gradient fill. Putting
+ * the arithmetic here keeps the boundaries (`min === max`, value
+ * outside `[min,max]`, negative ranges) testable without mounting.
+ */
+
+/**
+ * Map a value to a 0–100 percentage along the [min, max] range.
+ *
+ * Decisions:
+ *   - When `min === max`, the range is degenerate; we return 0% rather
+ *     than divide by zero.
+ *   - We do not clamp the result. A `value` below `min` returns a
+ *     negative percentage; a value above `max` returns >100. Callers
+ *     decide whether to clamp; native `<input type="range">` already
+ *     clamps the *value*, so in practice we only see 0–100 in the wild.
+ */
+export function percentage(value: number, min: number, max: number): number {
+  const range = max - min
+  if (range === 0) return 0
+  return ((value - min) / range) * 100
+}
+
+/**
+ * Clamp a value to [min, max]. Accepts either order of bounds — if
+ * `min > max` the result is undefined behaviour for a real slider, but
+ * we still keep the function total so callers don't crash on bad data.
+ */
+export function clampValue(value: number, min: number, max: number): number {
+  if (Number.isNaN(value)) return min
+  if (value < min) return min
+  if (value > max) return max
+  return value
+}
+
+/**
+ * Snap a value to the nearest step relative to `min`.
+ * Mirrors the native `<input type="range" step>` behaviour: steps are
+ * counted from `min`, not from zero.
+ */
+export function snapToStep(value: number, min: number, step: number): number {
+  if (step <= 0) return value
+  const stepsFromMin = Math.round((value - min) / step)
+  return min + stepsFromMin * step
+}
+
+/**
+ * Parse the raw `event.target.value` (always a string from the DOM)
+ * into a finite number. Returns `null` when the input cannot be parsed
+ * — callers should not emit on null.
+ */
+export function parseInputValue(raw: string): number | null {
+  if (raw === '' || raw == null) return null
+  const n = parseFloat(raw)
+  return Number.isFinite(n) ? n : null
+}

package/src/components/SpeedDial/SpeedDial.matrix.ts

@@ -0,0 +1,19 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.speed-dial',
+  baseQuery: {
+    model: '[{"label":"Add","icon":"pi pi-plus"},{"label":"Edit","icon":"pi pi-pencil"},{"label":"Delete","icon":"pi pi-trash"}]'
+  },
+  variants: [
+    {
+      name: 'Direction',
+      subvariants: [
+        { name: 'up',    query: { direction: 'up' } },
+        { name: 'down',  query: { direction: 'down' } },
+        { name: 'left',  query: { direction: 'left' } },
+        { name: 'right', query: { direction: 'right' } }
+      ]
+    }
+  ]
+}

package/src/components/SpeedDial/SpeedDial.scss

@@ -0,0 +1,222 @@
+@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,
+  &[data-state~="hover"] {
+    background-color: var(--speed-dial-button-background-hover, $speed-dial-button-background-hover);
+  }
+
+  &:active,
+  &[data-state~="active"] {
+    background-color: var(--speed-dial-button-background-active, $speed-dial-button-background-active);
+  }
+
+  &:focus-visible,
+  &[data-state~="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;
+
+  &--state-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,
+  &[data-state~="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,
+  &[data-state~="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}--mode-show-labels & {
+    display: block;
+  }
+}
+
+// Open state animation
+.#{$c}--state-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;
+    }
+  }
+}