jouw-stem__design-system 0.1.0

package/src/components/Knob/Knob.vue

@@ -0,0 +1,263 @@
+<template>
+  <div
+    class="knob"
+    :class="additionalClasses"
+    :style="{ width: sizeValue, height: sizeValue }"
+  >
+    <svg
+      class="knob__svg"
+      viewBox="0 0 100 100"
+      role="slider"
+      :aria-valuenow="modelValue"
+      :aria-valuemin="min"
+      :aria-valuemax="max"
+      :aria-disabled="isDisabled || undefined"
+      tabindex="0"
+      @mousedown="onMouseDown"
+      @touchstart="onTouchStart"
+      @keydown="onKeyDown"
+    >
+      <!-- Background track -->
+      <circle
+        class="knob__track"
+        cx="50"
+        cy="50"
+        :r="radius"
+        fill="none"
+        :stroke-width="strokeWidthValue"
+      />
+
+      <!-- Fill arc -->
+      <circle
+        class="knob__fill"
+        cx="50"
+        cy="50"
+        :r="radius"
+        fill="none"
+        :stroke-width="strokeWidthValue"
+        :stroke-dasharray="circumference"
+        :stroke-dashoffset="dashOffset"
+        stroke-linecap="round"
+        transform="rotate(-90 50 50)"
+      />
+    </svg>
+
+    <!-- Value display -->
+    <div v-if="showValue" class="knob__value">
+      <slot name="value" :value="modelValue">
+        {{ displayValue }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style src="./Knob.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+interface Props {
+  modelValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: string;
+  strokeWidth?: number;
+  showValue?: boolean;
+  valueTemplate?: string;
+  isDisabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  min: 0,
+  max: 100,
+  step: 1,
+  size: "md",
+  strokeWidth: undefined,
+  showValue: true,
+  valueTemplate: "{value}",
+  isDisabled: false,
+});
+const emit = defineEmits<{
+  (e: "update:modelValue", ...args: unknown[]): void;
+  (e: "change", ...args: unknown[]): void;
+}>();
+const sizeMap = {
+  sm: 80,
+  md: 120,
+  lg: 160,
+};
+
+const strokeMap = {
+  sm: 6,
+  md: 8,
+  lg: 10,
+};
+
+const sizeValue = computed(() => `${sizeMap[props.size]}px`);
+
+const strokeWidthValue = computed(() => {
+  if (props.strokeWidth !== undefined) {
+    return (props.strokeWidth / sizeMap[props.size]) * 100;
+  }
+  return (strokeMap[props.size] / sizeMap[props.size]) * 100;
+});
+
+const radius = computed(() => 50 - strokeWidthValue.value / 2);
+const circumference = computed(() => 2 * Math.PI * radius.value);
+
+const percentage = computed(() => {
+  const range = props.max - props.min;
+  if (range === 0) return 0;
+  return ((props.modelValue - props.min) / range) * 100;
+});
+
+const dashOffset = computed(() => {
+  const offset = circumference.value * (1 - percentage.value / 100);
+  return offset;
+});
+
+const displayValue = computed(() => {
+  return props.valueTemplate.replace("{value}", String(props.modelValue));
+});
+
+const additionalClasses = computed(() =>
+  [
+    `knob--size-${props.size}`,
+    props.isDisabled && "knob--state-disabled",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const isDragging = ref(false);
+const knobElement = ref(null);
+
+const updateValue = (event) => {
+  if (props.isDisabled) return;
+
+  const svg = event.target.closest("svg") || event.currentTarget;
+  const rect = svg.getBoundingClientRect();
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+
+  const clientX = event.touches ? event.touches[0].clientX : event.clientX;
+  const clientY = event.touches ? event.touches[0].clientY : event.clientY;
+
+  // Calculate angle from center
+  const dx = clientX - centerX;
+  const dy = clientY - centerY;
+  let angle = Math.atan2(dy, dx) * (180 / Math.PI);
+
+  // Convert to 0-360 starting from top (270 degrees offset)
+  angle = (angle + 90 + 360) % 360;
+
+  // Convert angle to value
+  const range = props.max - props.min;
+  let value = (angle / 360) * range + props.min;
+
+  // Apply step
+  value = Math.round(value / props.step) * props.step;
+
+  // Clamp value
+  value = Math.max(props.min, Math.min(props.max, value));
+
+  if (value !== props.modelValue) {
+    emit("update:modelValue", value);
+  }
+};
+
+const onMouseDown = (event) => {
+  if (props.isDisabled) return;
+
+  isDragging.value = true;
+  updateValue(event);
+
+  const onMouseMove = (e) => {
+    if (isDragging.value) {
+      updateValue(e);
+    }
+  };
+
+  const onMouseUp = () => {
+    if (isDragging.value) {
+      isDragging.value = false;
+      emit("change", { value: props.modelValue });
+    }
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  };
+
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+};
+
+const onTouchStart = (event) => {
+  if (props.isDisabled) return;
+
+  isDragging.value = true;
+  updateValue(event);
+
+  const onTouchMove = (e) => {
+    if (isDragging.value) {
+      e.preventDefault();
+      updateValue(e);
+    }
+  };
+
+  const onTouchEnd = () => {
+    if (isDragging.value) {
+      isDragging.value = false;
+      emit("change", { value: props.modelValue });
+    }
+    document.removeEventListener("touchmove", onTouchMove);
+    document.removeEventListener("touchend", onTouchEnd);
+  };
+
+  document.addEventListener("touchmove", onTouchMove, { passive: false });
+  document.addEventListener("touchend", onTouchEnd);
+};
+
+const onKeyDown = (event) => {
+  if (props.isDisabled) return;
+
+  let newValue = props.modelValue;
+
+  switch (event.key) {
+    case "ArrowUp":
+    case "ArrowRight":
+      newValue = Math.min(props.max, props.modelValue + props.step);
+      event.preventDefault();
+      break;
+    case "ArrowDown":
+    case "ArrowLeft":
+      newValue = Math.max(props.min, props.modelValue - props.step);
+      event.preventDefault();
+      break;
+    case "Home":
+      newValue = props.min;
+      event.preventDefault();
+      break;
+    case "End":
+      newValue = props.max;
+      event.preventDefault();
+      break;
+    case "PageUp":
+      newValue = Math.min(props.max, props.modelValue + props.step * 10);
+      event.preventDefault();
+      break;
+    case "PageDown":
+      newValue = Math.max(props.min, props.modelValue - props.step * 10);
+      event.preventDefault();
+      break;
+    default:
+      return;
+  }
+
+  if (newValue !== props.modelValue) {
+    emit("update:modelValue", newValue);
+    emit("change", { value: newValue });
+  }
+};
+</script>

package/src/components/Knob/knobMath.ts

@@ -0,0 +1,97 @@
+/**
+ * Pure helpers powering Knob's value updates. Extracted so the keyboard /
+ * pointer / clamp logic is unit-testable without mounting an SVG, and
+ * without reaching for jsdom layout APIs.
+ */
+
+export interface KnobBounds {
+  min: number
+  max: number
+  step: number
+}
+
+/**
+ * Snap a raw numeric value to the nearest `step` increment, then clamp to
+ * `[min, max]`. Used after every angle/keyboard-derived update so all
+ * emitted values land on the configured grid.
+ */
+export function snapToStep(raw: number, bounds: KnobBounds): number {
+  const { min, max, step } = bounds
+  if (!Number.isFinite(raw)) return min
+  const safeStep = step > 0 ? step : 1
+  const snapped = Math.round(raw / safeStep) * safeStep
+  return Math.max(min, Math.min(max, snapped))
+}
+
+/**
+ * Compute the next value for a key press. Returns `null` for keys we don't
+ * handle, so the caller knows to leave default behaviour intact.
+ *
+ * Key mapping (matches WAI-ARIA slider pattern):
+ *   ArrowUp / ArrowRight : current + step
+ *   ArrowDown / ArrowLeft: current - step
+ *   PageUp               : current + step × 10
+ *   PageDown             : current - step × 10
+ *   Home                 : min
+ *   End                  : max
+ */
+export function valueFromKey(
+  key: string,
+  current: number,
+  bounds: KnobBounds
+): number | null {
+  const { min, max, step } = bounds
+  switch (key) {
+    case 'ArrowUp':
+    case 'ArrowRight':
+      return Math.min(max, current + step)
+    case 'ArrowDown':
+    case 'ArrowLeft':
+      return Math.max(min, current - step)
+    case 'PageUp':
+      return Math.min(max, current + step * 10)
+    case 'PageDown':
+      return Math.max(min, current - step * 10)
+    case 'Home':
+      return min
+    case 'End':
+      return max
+    default:
+      return null
+  }
+}
+
+/**
+ * Convert a pointer position relative to the SVG centre into a value on
+ * the knob's range. The angle is measured clockwise from 12 o'clock so
+ * the visible "fill arc" corresponds linearly to the value.
+ */
+export function valueFromPointer(
+  dx: number,
+  dy: number,
+  bounds: KnobBounds
+): number {
+  const { min, max } = bounds
+  // atan2 returns radians in (-PI, PI] measured CCW from the +x axis.
+  // Add 90° (PI/2) to put 0° at 12 o'clock, then normalise to [0, 360).
+  const deg = (Math.atan2(dy, dx) * (180 / Math.PI) + 90 + 360) % 360
+  const range = max - min
+  if (range <= 0) return min
+  const raw = (deg / 360) * range + min
+  return snapToStep(raw, bounds)
+}
+
+/**
+ * Linear progress (0..100) of `value` along the `[min, max]` window.
+ * Used to compute `stroke-dashoffset` for the fill arc.
+ */
+export function progressPercent(
+  value: number,
+  bounds: Pick<KnobBounds, 'min' | 'max'>
+): number {
+  const { min, max } = bounds
+  const range = max - min
+  if (range <= 0) return 0
+  const pct = ((value - min) / range) * 100
+  return Math.max(0, Math.min(100, pct))
+}

package/src/components/ListBox/ListBox.matrix.ts

@@ -0,0 +1,31 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.listbox',
+  // ListBox renders the list inline (no popup), so matrix cells show
+  // the full visible surface. Options drive the cell contents.
+  baseQuery: {
+    options: '[{"label":"Alpha","value":"a"},{"label":"Beta","value":"b"},{"label":"Gamma","value":"c"}]'
+  },
+  variants: [
+    {
+      name: 'Mode',
+      subvariants: [
+        { name: 'single',   query: { multiple: 'false' } },
+        { name: 'multiple', query: { multiple: 'true' } }
+      ]
+    },
+    {
+      name: 'Filter',
+      subvariants: [
+        { name: 'off', query: { filter: 'false' } },
+        { name: 'on',  query: { filter: 'true' } }
+      ]
+    }
+  ],
+  states: [
+    { name: 'selected-single',   props: { modelValue: 'a' } },
+    { name: 'selected-multiple', props: { multiple: 'true', modelValue: '["a","b"]' } },
+    { name: 'disabled',          props: { isDisabled: 'true' } }
+  ]
+}

package/src/components/ListBox/ListBox.scss

@@ -0,0 +1,162 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: listbox;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--listbox-background-default, $listbox-background-default);
+  border: var(--listbox-border-width, $listbox-border-width) solid var(--listbox-border-color-default, $listbox-border-color-default);
+  border-radius: var(--listbox-radius, $listbox-radius);
+  overflow: hidden;
+}
+
+.#{$c}--state-disabled {
+  // No opacity — see option-disabled rule below for rationale. Visual
+  // disabled state is signalled by background-disabled colour + the
+  // pointer-events block.
+  pointer-events: none;
+  background-color: var(--listbox-background-disabled, $listbox-background-disabled);
+  border-color: var(--listbox-border-color-disabled, $listbox-border-color-disabled);
+}
+
+// Filter
+.#{$c}__filter {
+  position: relative;
+  padding: var(--listbox-padding, $listbox-padding);
+  border-bottom: 1px solid var(--listbox-filter-border, $listbox-filter-border);
+}
+
+.#{$c}__filter-input {
+  width: 100%;
+  height: var(--listbox-filter-height, $listbox-filter-height);
+  padding: 0 var(--listbox-filter-padding-x, $listbox-filter-padding-x);
+  padding-left: 32px;
+  background-color: var(--listbox-filter-background, $listbox-filter-background);
+  border: 1px solid var(--listbox-filter-border, $listbox-filter-border);
+  border-radius: var(--listbox-filter-radius, $listbox-filter-radius);
+  font-size: 14px;
+  color: var(--listbox-filter-text, $listbox-filter-text);
+
+  &::placeholder {
+    color: var(--listbox-filter-placeholder, $listbox-filter-placeholder);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+    border-color: var(--listbox-border-color-focus, $listbox-border-color-focus);
+  }
+}
+
+.#{$c}__filter-icon {
+  position: absolute;
+  left: calc(var(--listbox-padding, $listbox-padding) + 10px);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--listbox-filter-placeholder, $listbox-filter-placeholder);
+  pointer-events: none;
+}
+
+// List container
+.#{$c}__list {
+  max-height: var(--listbox-maxHeight, $listbox-maxHeight);
+  overflow-y: auto;
+  padding: var(--listbox-padding, $listbox-padding);
+}
+
+// Option
+.#{$c}__option {
+  display: flex;
+  align-items: center;
+  padding: var(--listbox-option-padding-y, $listbox-option-padding-y) var(--listbox-option-padding-x, $listbox-option-padding-x);
+  background-color: var(--listbox-option-background-default, $listbox-option-background-default);
+  border-radius: var(--listbox-option-radius, $listbox-option-radius);
+  font-size: var(--listbox-option-fontSize, $listbox-option-fontSize);
+  color: var(--listbox-option-text-default, $listbox-option-text-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  user-select: none;
+
+  &:hover:not(.#{$c}__option--state-disabled),
+  &[data-state~="hover"]:not(.#{$c}__option--state-disabled) {
+    background-color: var(--listbox-option-background-hover, $listbox-option-background-hover);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+    background-color: var(--listbox-option-background-focus, $listbox-option-background-focus);
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: 2px solid var(--listbox-focus-ringColor, $listbox-focus-ringColor);
+    outline-offset: -2px;
+  }
+}
+
+.#{$c}__option--state-selected {
+  background-color: var(--listbox-option-background-selected, $listbox-option-background-selected);
+  color: var(--listbox-option-text-selected, $listbox-option-text-selected);
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--listbox-option-background-selected, $listbox-option-background-selected);
+    filter: brightness(0.95);
+  }
+}
+
+.#{$c}__option--state-disabled {
+  // No opacity — opacity 0.5 dropped the computed text contrast below
+  // 4.5:1 even though the disabled-text token itself (`text.muted`,
+  // ~5.85:1 vs canvas) passes. Visual "disabled" affordance comes from
+  // the muted colour + not-allowed cursor.
+  cursor: not-allowed;
+  color: var(--listbox-option-text-disabled, $listbox-option-text-disabled);
+}
+
+.#{$c}__option--state-focused {
+  background-color: var(--listbox-option-background-focus, $listbox-option-background-focus);
+}
+
+// Checkbox for multiple selection
+.#{$c}__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--listbox-checkbox-size, $listbox-checkbox-size);
+  height: var(--listbox-checkbox-size, $listbox-checkbox-size);
+  margin-right: var(--listbox-checkbox-marginRight, $listbox-checkbox-marginRight);
+  border: 1.5px solid currentColor;
+  border-radius: 3px;
+  flex-shrink: 0;
+
+  svg {
+    display: block;
+  }
+}
+
+.#{$c}__option--state-selected .#{$c}__checkbox {
+  background-color: currentColor;
+
+  svg {
+    color: var(--listbox-background-default, $listbox-background-default);
+  }
+}
+
+.#{$c}__option-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Empty state
+.#{$c}__empty {
+  padding: var(--listbox-option-padding-y, $listbox-option-padding-y) var(--listbox-option-padding-x, $listbox-option-padding-x);
+  color: var(--listbox-option-text-disabled, $listbox-option-text-disabled);
+  text-align: center;
+  font-size: 14px;
+}