jouw-stem__design-system 0.1.0

package/src/components/Splitter/Splitter.vue

@@ -0,0 +1,197 @@
+<template>
+  <div
+    class="splitter"
+    :class="additionalClasses"
+    :style="containerStyle"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<style src="./Splitter.scss"></style>
+
+<script setup lang="ts">
+import { computed, provide, ref, onMounted, onUnmounted } from "vue";
+
+interface Props {
+  layout?: string;
+  gutterSize?: number;
+  stateKey?: string;
+  stateStorage?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: "horizontal",
+  gutterSize: 10,
+  stateKey: null,
+  stateStorage: "session",
+});
+const emit = defineEmits<{
+  (e: "resizestart", ...args: unknown[]): void;
+  (e: "resize", ...args: unknown[]): void;
+  (e: "resizeend", ...args: unknown[]): void;
+}>();
+// Panel management
+const panels = ref([]);
+const panelSizes = ref([]);
+const isResizing = ref(false);
+const currentGutterIndex = ref(null);
+const startPos = ref(0);
+const startSizes = ref([]);
+
+const registerPanel = (panel) => {
+  const index = panels.value.length;
+  panels.value.push(panel);
+
+  // Initialize sizes
+  if (panel.size !== undefined) {
+    panelSizes.value.push(panel.size);
+  } else {
+    // Distribute remaining space
+    panelSizes.value.push(null);
+  }
+
+  return index;
+};
+
+const unregisterPanel = (index) => {
+  panels.value.splice(index, 1);
+  panelSizes.value.splice(index, 1);
+};
+
+const getPanelSize = (index) => {
+  return panelSizes.value[index];
+};
+
+// Resize logic
+const onGutterMouseDown = (event, index) => {
+  isResizing.value = true;
+  currentGutterIndex.value = index;
+  startPos.value = props.layout === "horizontal" ? event.pageX : event.pageY;
+  startSizes.value = [...panelSizes.value];
+
+  emit("resizestart", { originalEvent: event, sizes: panelSizes.value });
+
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
+  document.body.style.cursor = props.layout === "horizontal" ? "col-resize" : "row-resize";
+  document.body.style.userSelect = "none";
+};
+
+const onMouseMove = (event) => {
+  if (!isResizing.value) return;
+
+  const splitterElement = event.target.closest(".splitter") || document.querySelector(".splitter");
+  if (!splitterElement) return;
+
+  const rect = splitterElement.getBoundingClientRect();
+  const totalSize = props.layout === "horizontal" ? rect.width : rect.height;
+  const gutterCount = panels.value.length - 1;
+  const availableSize = totalSize - (gutterCount * props.gutterSize);
+
+  const currentPos = props.layout === "horizontal" ? event.pageX : event.pageY;
+  const delta = currentPos - startPos.value;
+  const deltaPercent = (delta / availableSize) * 100;
+
+  const prevIndex = currentGutterIndex.value;
+  const nextIndex = currentGutterIndex.value + 1;
+
+  let newPrevSize = startSizes.value[prevIndex] + deltaPercent;
+  let newNextSize = startSizes.value[nextIndex] - deltaPercent;
+
+  // Apply min constraints
+  const minSize = 5; // 5% minimum
+  if (newPrevSize < minSize) {
+    newNextSize += (newPrevSize - minSize);
+    newPrevSize = minSize;
+  }
+  if (newNextSize < minSize) {
+    newPrevSize += (newNextSize - minSize);
+    newNextSize = minSize;
+  }
+
+  panelSizes.value[prevIndex] = newPrevSize;
+  panelSizes.value[nextIndex] = newNextSize;
+
+  emit("resize", { originalEvent: event, sizes: [...panelSizes.value] });
+};
+
+const onMouseUp = (event) => {
+  isResizing.value = false;
+  currentGutterIndex.value = null;
+
+  document.removeEventListener("mousemove", onMouseMove);
+  document.removeEventListener("mouseup", onMouseUp);
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+
+  emit("resizeend", { originalEvent: event, sizes: [...panelSizes.value] });
+
+  // Save state if stateKey is provided
+  if (props.stateKey) {
+    saveState();
+  }
+};
+
+const saveState = () => {
+  const storage = props.stateStorage === "local" ? localStorage : sessionStorage;
+  storage.setItem(props.stateKey, JSON.stringify(panelSizes.value));
+};
+
+const restoreState = () => {
+  if (!props.stateKey) return;
+
+  const storage = props.stateStorage === "local" ? localStorage : sessionStorage;
+  const savedState = storage.getItem(props.stateKey);
+
+  if (savedState) {
+    try {
+      panelSizes.value = JSON.parse(savedState);
+    } catch (e) {
+      // Invalid state, ignore
+    }
+  }
+};
+
+// Initialize default sizes once all panels are registered
+const initializeSizes = () => {
+  const nullCount = panelSizes.value.filter((s) => s === null).length;
+  const usedPercent = panelSizes.value.reduce((sum, s) => sum + (s || 0), 0);
+  const remainingPercent = 100 - usedPercent;
+  const defaultSize = nullCount > 0 ? remainingPercent / nullCount : 0;
+
+  panelSizes.value = panelSizes.value.map((s) => (s === null ? defaultSize : s));
+};
+
+// Provide context to child panels
+provide("splitter", {
+  layout: computed(() => props.layout),
+  gutterSize: computed(() => props.gutterSize),
+  registerPanel,
+  unregisterPanel,
+  getPanelSize,
+  panelSizes,
+  onGutterMouseDown,
+  isResizing,
+  currentGutterIndex,
+  initializeSizes,
+});
+
+onMounted(() => {
+  restoreState();
+});
+
+onUnmounted(() => {
+  document.removeEventListener("mousemove", onMouseMove);
+  document.removeEventListener("mouseup", onMouseUp);
+});
+
+const additionalClasses = computed(() => [
+  `splitter--${props.layout}`,
+  isResizing.value && "splitter--state-resizing",
+].filter(Boolean).join(" "));
+
+const containerStyle = computed(() => ({
+  "--splitter-gutter-size": `${props.gutterSize}px`,
+}));
+</script>

package/src/components/Splitter/SplitterPanel.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="splitter__panel"
+    :style="panelStyle"
+  >
+    <slot></slot>
+  </div>
+  <div
+    v-if="showGutter"
+    class="splitter__gutter"
+    :class="gutterClasses"
+    role="separator"
+    :aria-orientation="splitterContext.layout.value === 'horizontal' ? 'vertical' : 'horizontal'"
+    :aria-valuenow="ariaValueNow"
+    aria-valuemin="0"
+    aria-valuemax="100"
+    tabindex="0"
+    @mousedown="onGutterMouseDown"
+    @keydown="onGutterKeyDown"
+  >
+    <div class="splitter__gutter-handle"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, onBeforeUnmount, ref, watch, nextTick } from "vue";
+
+interface Props {
+  size?: number;
+  minSize?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: undefined,
+  minSize: 5,
+});
+const splitterContext = inject("splitter");
+const panelIndex = ref(-1);
+
+onMounted(async () => {
+  panelIndex.value = splitterContext.registerPanel({
+    size: props.size,
+    minSize: props.minSize,
+  });
+
+  // Initialize sizes after all panels are registered
+  await nextTick();
+  splitterContext.initializeSizes();
+});
+
+onBeforeUnmount(() => {
+  if (panelIndex.value !== -1) {
+    splitterContext.unregisterPanel(panelIndex.value);
+  }
+});
+
+const currentSize = computed(() => {
+  return splitterContext.getPanelSize(panelIndex.value);
+});
+
+const ariaValueNow = computed(() => {
+  const v = currentSize.value;
+  if (typeof v === "number" && Number.isFinite(v)) return Math.round(v);
+  const total = splitterContext.panelSizes.value.length;
+  if (total < 1) return 50;
+  const guess = Math.round(100 / total);
+  return Number.isFinite(guess) ? guess : 50;
+});
+
+const showGutter = computed(() => {
+  // Show gutter after this panel if it's not the last panel
+  const totalPanels = splitterContext.panelSizes.value.length;
+  return panelIndex.value >= 0 && panelIndex.value < totalPanels - 1;
+});
+
+const gutterClasses = computed(() => [
+  splitterContext.isResizing.value && splitterContext.currentGutterIndex.value === panelIndex.value && "splitter__gutter--state-active",
+].filter(Boolean).join(" "));
+
+const panelStyle = computed(() => {
+  const size = currentSize.value;
+  if (size === null || size === undefined) return {};
+
+  const gutterSize = splitterContext.gutterSize.value;
+  const gutterCount = splitterContext.panelSizes.value.length - 1;
+  const gutterOffset = (gutterSize * gutterCount) / splitterContext.panelSizes.value.length;
+
+  return {
+    flexBasis: `calc(${size}% - ${gutterOffset}px)`,
+  };
+});
+
+const onGutterMouseDown = (event) => {
+  event.preventDefault();
+  splitterContext.onGutterMouseDown(event, panelIndex.value);
+};
+
+const onGutterKeyDown = (event) => {
+  const step = 1; // 1% step
+  let handled = false;
+
+  if (splitterContext.layout.value === "horizontal") {
+    if (event.key === "ArrowLeft") {
+      adjustSize(-step);
+      handled = true;
+    } else if (event.key === "ArrowRight") {
+      adjustSize(step);
+      handled = true;
+    }
+  } else {
+    if (event.key === "ArrowUp") {
+      adjustSize(-step);
+      handled = true;
+    } else if (event.key === "ArrowDown") {
+      adjustSize(step);
+      handled = true;
+    }
+  }
+
+  if (handled) {
+    event.preventDefault();
+  }
+};
+
+const adjustSize = (delta) => {
+  const prevIndex = panelIndex.value;
+  const nextIndex = panelIndex.value + 1;
+  const sizes = splitterContext.panelSizes.value;
+
+  let newPrevSize = sizes[prevIndex] + delta;
+  let newNextSize = sizes[nextIndex] - delta;
+
+  const minSize = 5;
+  if (newPrevSize >= minSize && newNextSize >= minSize) {
+    sizes[prevIndex] = newPrevSize;
+    sizes[nextIndex] = newNextSize;
+  }
+};
+</script>

package/src/components/Splitter/splitterMath.ts

@@ -0,0 +1,110 @@
+/**
+ * Pure resize math extracted from Splitter.
+ *
+ * The component drags by reading mouse/keyboard deltas and applying
+ * them to a pair of adjacent panel sizes. The interesting decisions
+ * (min-size enforcement, slack borrowed from the neighbour, default-
+ * size distribution) live here so unit tests can pin every branch
+ * without simulating real drag events.
+ *
+ * No Vue, no DOM.
+ */
+
+/** Apply a percentage delta to a pair of adjacent panels.
+ *
+ * `prevStart` and `nextStart` are the sizes (percent) of the panels on
+ * either side of a gutter at the start of the drag. `deltaPercent`
+ * shifts content from the next panel to the prev panel (positive) or
+ * vice-versa (negative). Both panels are clamped to `minPercent`; if
+ * one would go below the floor, the slack is *borrowed* from the
+ * other so total size is preserved.
+ *
+ * Returns `[newPrev, newNext]`. The sum of the returned pair always
+ * equals the input sum (`prevStart + nextStart`).
+ */
+export function applyResizeDelta(
+  prevStart: number,
+  nextStart: number,
+  deltaPercent: number,
+  minPercent = 5,
+): [number, number] {
+  let newPrev = prevStart + deltaPercent
+  let newNext = nextStart - deltaPercent
+
+  if (newPrev < minPercent) {
+    newNext += newPrev - minPercent
+    newPrev = minPercent
+  }
+  if (newNext < minPercent) {
+    newPrev += newNext - minPercent
+    newNext = minPercent
+  }
+  return [newPrev, newNext]
+}
+
+/**
+ * Convert a mouse delta in pixels to the percentage delta that should
+ * be applied to two adjacent panel sizes. Splitter computes available
+ * space as `totalSize - (gutterCount * gutterSizePx)`; the percentage
+ * is taken against *that* space so the gutters don't eat into the
+ * delta calculation.
+ *
+ * Returns 0 (defensive) when `availablePx` is zero or negative.
+ */
+export function pxDeltaToPercent(
+  deltaPx: number,
+  totalSizePx: number,
+  gutterCount: number,
+  gutterSizePx: number,
+): number {
+  const availablePx = totalSizePx - gutterCount * gutterSizePx
+  if (availablePx <= 0) return 0
+  return (deltaPx / availablePx) * 100
+}
+
+/**
+ * After every panel registers, normalise the sizes array: any panel
+ * that didn't pass an explicit `size` gets an equal share of whatever
+ * percent is left over.
+ *
+ * Mirrors Splitter.initializeSizes:
+ *
+ *   - sum every non-null entry → `usedPercent`
+ *   - remainder = 100 - usedPercent
+ *   - distribute remainder equally among the null entries
+ *   - if no null entries, return the input unchanged
+ *
+ * Pure: returns a new array.
+ */
+export function normalizePanelSizes(sizes: (number | null)[]): number[] {
+  const nullCount = sizes.filter(s => s === null).length
+  const usedPercent = sizes.reduce<number>((sum, s) => sum + (s ?? 0), 0)
+  const remaining = 100 - usedPercent
+  const defaultSize = nullCount > 0 ? remaining / nullCount : 0
+  return sizes.map(s => (s === null ? defaultSize : s))
+}
+
+/**
+ * Whether a `keydown.key` should adjust panel sizes for the given
+ * splitter layout. Encodes the layout-axis mapping the gutter
+ * keyboard handler relies on:
+ *
+ *   - horizontal layout → ArrowLeft / ArrowRight
+ *   - vertical layout   → ArrowUp / ArrowDown
+ *
+ * The `step` returned is signed (`-1` shrinks the prev panel, `+1`
+ * grows it) and `null` means "not handled, let the event bubble".
+ */
+export function keyboardStep(
+  key: string,
+  layout: 'horizontal' | 'vertical',
+): number | null {
+  if (layout === 'horizontal') {
+    if (key === 'ArrowLeft') return -1
+    if (key === 'ArrowRight') return 1
+    return null
+  }
+  if (key === 'ArrowUp') return -1
+  if (key === 'ArrowDown') return 1
+  return null
+}

package/src/components/Steps/Steps.matrix.ts

@@ -0,0 +1,9 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.steps',
+  baseQuery: {
+    model: '[{"label":"Account"},{"label":"Profile"},{"label":"Confirm"}]'
+  },
+  variants: []
+}

package/src/components/Steps/Steps.scss

@@ -0,0 +1,169 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: steps;
+
+.#{$c} {
+  width: 100%;
+}
+
+.#{$c}__list {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  position: relative;
+
+  &:first-child {
+    flex: 0 0 auto;
+  }
+}
+
+.#{$c}__connector {
+  flex: 1;
+  height: var(--steps-connector-height, $steps-connector-height);
+  background-color: var(--steps-connector-color-incomplete, $steps-connector-color-incomplete);
+  margin: 0 var(--steps-gap, $steps-gap);
+  transition: background-color 200ms ease;
+}
+
+.#{$c}__connector--complete {
+  @include accent-gradient($angle: 90deg);
+}
+
+.#{$c}__marker-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--steps-label-gap, $steps-label-gap);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: opacity 150ms ease;
+
+  &:disabled {
+    cursor: default;
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+  }
+
+  &:focus-visible .#{$c}__marker,
+  &[data-state~="focus-visible"] .#{$c}__marker {
+    outline: var(--steps-focus-ringWidth, $steps-focus-ringWidth) solid var(--steps-focus-ringColor, $steps-focus-ringColor);
+    outline-offset: var(--steps-focus-ringOffset, $steps-focus-ringOffset);
+  }
+}
+
+.#{$c}__marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--steps-marker-size, $steps-marker-size);
+  height: var(--steps-marker-size, $steps-marker-size);
+  border-radius: 50%;
+  border: var(--steps-marker-border-width, $steps-marker-border-width) solid;
+  transition:
+    background-color 200ms ease,
+    border-color 200ms ease,
+    color 200ms ease;
+}
+
+.#{$c}__number {
+  font-size: var(--steps-marker-fontSize, $steps-marker-fontSize);
+  font-weight: var(--steps-marker-fontWeight, $steps-marker-fontWeight);
+  line-height: 1;
+}
+
+.#{$c}__check-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.#{$c}__label {
+  font-size: var(--steps-label-fontSize, $steps-label-fontSize);
+  font-weight: var(--steps-label-fontWeight, $steps-label-fontWeight);
+  white-space: nowrap;
+  transition: color 200ms ease;
+}
+
+// Incomplete state
+.#{$c}__item--incomplete {
+  .#{$c}__marker {
+    background-color: var(--steps-marker-background-incomplete, $steps-marker-background-incomplete);
+    border-color: var(--steps-marker-border-color-incomplete, $steps-marker-border-color-incomplete);
+    color: var(--steps-marker-text-incomplete, $steps-marker-text-incomplete);
+  }
+
+  .#{$c}__label {
+    color: var(--steps-label-color-incomplete, $steps-label-color-incomplete);
+  }
+
+  .#{$c}__marker-wrapper:hover:not(:disabled),
+  .#{$c}__marker-wrapper[data-state~="hover"]:not(:disabled) {
+    opacity: 0.8;
+  }
+}
+
+// Active state
+.#{$c}__item--state-active {
+  .#{$c}__marker {
+    @include accent-gradient();
+    border-color: var(--accent-gradient-start, $accent-gradient-start);
+    color: var(--steps-marker-text-active, $steps-marker-text-active);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+  }
+
+  .#{$c}__label {
+    color: var(--steps-label-color-active, $steps-label-color-active);
+  }
+}
+
+// Complete state
+.#{$c}__item--complete {
+  .#{$c}__marker {
+    @include accent-gradient();
+    border-color: var(--accent-gradient-start, $accent-gradient-start);
+    color: var(--steps-marker-text-complete, $steps-marker-text-complete);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+  }
+
+  .#{$c}__label {
+    color: var(--steps-label-color-complete, $steps-label-color-complete);
+  }
+
+  .#{$c}__marker-wrapper:hover:not(:disabled),
+  .#{$c}__marker-wrapper[data-state~="hover"]:not(:disabled) {
+    opacity: 0.8;
+  }
+}
+
+// Disabled state
+.#{$c}__item--state-disabled {
+  .#{$c}__marker-wrapper {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+// Readonly mode
+.#{$c}--state-readonly {
+  .#{$c}__marker-wrapper {
+    cursor: default;
+
+    &:hover,
+    &[data-state~="hover"] {
+      opacity: 1;
+    }
+  }
+}