jouw-stem__design-system 0.1.0

package/src/components/VirtualScroller/VirtualScroller.vue

@@ -0,0 +1,247 @@
+<template>
+  <div
+    ref="containerRef"
+    class="virtualscroller"
+    :class="additionalClasses"
+    :style="containerStyle"
+    tabindex="0"
+    role="region"
+    aria-label="Scrollable list"
+    @scroll="onScroll"
+  >
+    <div class="virtualscroller__spacer" :style="spacerStyle">
+      <div
+        class="virtualscroller__content"
+        :style="contentStyle"
+      >
+        <div
+          v-for="(item, index) in visibleItems"
+          :key="getItemKey(item, startIndex + index)"
+          class="virtualscroller__item"
+          :class="{
+            'virtualscroller__item--stripe': striped && (startIndex + index) % 2 === 1
+          }"
+          :style="itemStyle"
+        >
+          <slot :item="item" :index="startIndex + index">
+            {{ item }}
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div v-if="loading" class="virtualscroller__loader">
+      <slot name="loader">Loading...</slot>
+    </div>
+  </div>
+</template>
+
+<style src="./VirtualScroller.scss"></style>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+
+interface Props {
+  items?: unknown[];
+  itemSize?: number;
+  scrollHeight?: string;
+  orientation?: string;
+  numToleratedItems?: number;
+  loading?: boolean;
+  striped?: boolean;
+  showBorder?: boolean;
+  dataKey?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  itemSize: 40,
+  scrollHeight: "400px",
+  orientation: "vertical",
+  numToleratedItems: 5,
+  loading: false,
+  striped: false,
+  showBorder: true,
+  dataKey: null,
+});
+const emit = defineEmits<{
+  (e: "scroll", ...args: unknown[]): void;
+  (e: "scroll-index-change", ...args: unknown[]): void;
+}>();
+const containerRef = ref(null);
+const scrollPosition = ref(0);
+
+const isVertical = computed(() => props.orientation === "vertical");
+
+const totalSize = computed(() => props.items.length * props.itemSize);
+
+const viewportSize = computed(() => {
+  if (!containerRef.value) return 0;
+  return isVertical.value
+    ? containerRef.value.clientHeight
+    : containerRef.value.clientWidth;
+});
+
+const visibleCount = computed(() => {
+  if (viewportSize.value === 0) return 10; // Default during initial render
+  return Math.ceil(viewportSize.value / props.itemSize) + props.numToleratedItems * 2;
+});
+
+const startIndex = computed(() => {
+  const index = Math.floor(scrollPosition.value / props.itemSize) - props.numToleratedItems;
+  return Math.max(0, index);
+});
+
+const endIndex = computed(() => {
+  return Math.min(startIndex.value + visibleCount.value, props.items.length);
+});
+
+const visibleItems = computed(() => {
+  return props.items.slice(startIndex.value, endIndex.value);
+});
+
+const getItemKey = (item, index) => {
+  if (props.dataKey && typeof item === "object") {
+    return item[props.dataKey];
+  }
+  return index;
+};
+
+const containerStyle = computed(() => ({
+  height: isVertical.value ? props.scrollHeight : "auto",
+  width: isVertical.value ? "100%" : props.scrollHeight,
+  overflowY: isVertical.value ? "auto" : "hidden",
+  overflowX: isVertical.value ? "hidden" : "auto",
+}));
+
+const spacerStyle = computed(() => ({
+  position: "relative",
+  height: isVertical.value ? `${totalSize.value}px` : "100%",
+  width: isVertical.value ? "100%" : `${totalSize.value}px`,
+}));
+
+const contentStyle = computed(() => ({
+  position: "absolute",
+  top: isVertical.value ? `${startIndex.value * props.itemSize}px` : "0",
+  left: isVertical.value ? "0" : `${startIndex.value * props.itemSize}px`,
+  width: isVertical.value ? "100%" : "auto",
+  height: isVertical.value ? "auto" : "100%",
+}));
+
+const itemStyle = computed(() => ({
+  height: isVertical.value ? `${props.itemSize}px` : "100%",
+  width: isVertical.value ? "100%" : `${props.itemSize}px`,
+}));
+
+const onScroll = (event) => {
+  const target = event.target;
+  const newPosition = isVertical.value ? target.scrollTop : target.scrollLeft;
+  const oldStartIndex = startIndex.value;
+
+  scrollPosition.value = newPosition;
+
+  emit("scroll", {
+    originalEvent: event,
+    scrollPosition: newPosition,
+  });
+
+  if (startIndex.value !== oldStartIndex) {
+    emit("scroll-index-change", {
+      first: startIndex.value,
+      last: endIndex.value,
+    });
+  }
+};
+
+const scrollToIndex = (index, behavior = "auto") => {
+  if (!containerRef.value) return;
+
+  const position = index * props.itemSize;
+
+  if (isVertical.value) {
+    containerRef.value.scrollTo({ top: position, behavior });
+  } else {
+    containerRef.value.scrollTo({ left: position, behavior });
+  }
+};
+
+const scrollIntoView = (index, behavior = "auto", align = "start") => {
+  if (!containerRef.value) return;
+
+  const itemPosition = index * props.itemSize;
+  const currentScroll = scrollPosition.value;
+  const viewport = viewportSize.value;
+
+  let targetScroll;
+
+  if (align === "start") {
+    targetScroll = itemPosition;
+  } else if (align === "center") {
+    targetScroll = itemPosition - (viewport - props.itemSize) / 2;
+  } else if (align === "end") {
+    targetScroll = itemPosition - viewport + props.itemSize;
+  } else {
+    // Auto - only scroll if needed
+    if (itemPosition < currentScroll) {
+      targetScroll = itemPosition;
+    } else if (itemPosition + props.itemSize > currentScroll + viewport) {
+      targetScroll = itemPosition - viewport + props.itemSize;
+    } else {
+      return; // Already visible
+    }
+  }
+
+  targetScroll = Math.max(0, Math.min(targetScroll, totalSize.value - viewport));
+
+  if (isVertical.value) {
+    containerRef.value.scrollTo({ top: targetScroll, behavior });
+  } else {
+    containerRef.value.scrollTo({ left: targetScroll, behavior });
+  }
+};
+
+// Recalculate on mount and resize
+let resizeObserver = null;
+
+onMounted(() => {
+  if (containerRef.value && typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      // Force reactivity update
+      scrollPosition.value = isVertical.value
+        ? containerRef.value.scrollTop
+        : containerRef.value.scrollLeft;
+    });
+    resizeObserver.observe(containerRef.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+
+// Watch for items change
+watch(() => props.items, () => {
+  nextTick(() => {
+    if (containerRef.value) {
+      scrollPosition.value = isVertical.value
+        ? containerRef.value.scrollTop
+        : containerRef.value.scrollLeft;
+    }
+  });
+}, { deep: true });
+
+// Expose methods
+defineExpose({
+  scrollToIndex,
+  scrollIntoView,
+});
+
+const additionalClasses = computed(() =>
+  [
+    `virtualscroller--${props.orientation}`,
+    props.showBorder && "virtualscroller--shape-bordered",
+    props.loading && "virtualscroller--state-loading",
+  ].filter(Boolean).join(" ")
+);
+</script>

package/src/components/VirtualScroller/visibleWindow.ts

@@ -0,0 +1,85 @@
+/**
+ * Pure visible-window math for VirtualScroller. Extracted so each
+ * decision the windowing code makes (clamp to zero, clamp to total,
+ * tolerated overscan, default count when viewport size is unknown,
+ * scroll offset for the absolute-positioned content layer) can be
+ * tested directly without mounting the component or measuring real
+ * layout.
+ *
+ * The component owns the refs and the `scroll` event; these helpers
+ * only consume already-known scalars.
+ */
+
+export interface WindowInputs {
+  /** Pixel offset along the scrolling axis (scrollTop / scrollLeft). */
+  scrollPosition: number
+  /** Total number of items in the source array. */
+  totalItems: number
+  /** Fixed pixel size of every item along the scrolling axis. */
+  itemSize: number
+  /** Inner pixel size of the scroll viewport along the scrolling axis. */
+  viewportSize: number
+  /** Extra items rendered above and below the viewport for smooth overscan. */
+  numToleratedItems: number
+}
+
+const FALLBACK_VISIBLE_COUNT = 10
+
+/**
+ * How many rows fit in the viewport plus the overscan band on each
+ * side. When the viewport hasn't been measured yet (initial render),
+ * fall back to a sensible default so the first paint isn't empty.
+ */
+export function visibleCount(
+  viewportSize: number,
+  itemSize: number,
+  numToleratedItems: number
+): number {
+  if (viewportSize <= 0) return FALLBACK_VISIBLE_COUNT
+  if (itemSize <= 0) return FALLBACK_VISIBLE_COUNT
+  return Math.ceil(viewportSize / itemSize) + numToleratedItems * 2
+}
+
+/**
+ * First item index to render. Floors the scroll position to a row, then
+ * pulls back by the tolerated overscan, and never goes below zero.
+ */
+export function startIndex(
+  scrollPosition: number,
+  itemSize: number,
+  numToleratedItems: number
+): number {
+  if (itemSize <= 0) return 0
+  const raw = Math.floor(scrollPosition / itemSize) - numToleratedItems
+  return Math.max(0, raw)
+}
+
+/**
+ * One past the last item index to render. Clamps to `totalItems` so
+ * the render loop never reaches off the end of the source array.
+ */
+export function endIndex(
+  start: number,
+  count: number,
+  totalItems: number
+): number {
+  return Math.min(start + count, totalItems)
+}
+
+/**
+ * Convenience aggregator: compute everything the template needs in one
+ * call. Returns {start, end, contentOffset} where contentOffset is the
+ * pixel translation applied to the absolutely-positioned content layer
+ * so the visible items line up with their scroll position.
+ */
+export function computeVisibleWindow(inputs: WindowInputs): {
+  start: number
+  end: number
+  contentOffset: number
+} {
+  const count = visibleCount(inputs.viewportSize, inputs.itemSize, inputs.numToleratedItems)
+  const start = startIndex(inputs.scrollPosition, inputs.itemSize, inputs.numToleratedItems)
+  const end = endIndex(start, count, inputs.totalItems)
+  const contentOffset = start * inputs.itemSize
+  return { start, end, contentOffset }
+}

package/src/scss/fonts.scss

@@ -0,0 +1,10 @@
+// Font registration is generated from `tokens/brand.json` by `build-tokens.ts`.
+// To bundle custom fonts:
+//   1. Drop `.woff2` files in `src/assets/fonts/`.
+//   2. Add a `fonts.faces[]` entry per weight/style in `tokens/brand.json`.
+//   3. Run `npm run build:tokens`.
+// See BRAND_FONTS.md for the full guide.
+//
+// The generated CSS lives in `dist/css/fonts.css` and is wired into the docs
+// site via `server/nuxt.config.ts`. The default brand uses a system font stack
+// and emits no @font-face declarations.

package/src/scss/mixins/accent-gradient.scss

@@ -0,0 +1,43 @@
+@use "../../../dist/scss/tokens" as *;
+
+/// Accent gradient mixin for consistent gradient backgrounds across components
+/// Used for checked states, active indicators, filled tracks, etc.
+/// @param {string} $state - Gradient state: default or hover
+/// @param {number} $angle - Gradient angle in degrees (default: 135deg)
+@mixin accent-gradient($state: "default", $angle: 135deg) {
+  @if $state == "default" {
+    background: linear-gradient(
+      #{$angle},
+      var(--accent-gradient-start, $accent-gradient-start),
+      var(--accent-gradient-end, $accent-gradient-end)
+    );
+  } @else if $state == "hover" {
+    background: linear-gradient(
+      #{$angle},
+      var(--accent-gradient-hoverStart, $accent-gradient-hoverStart),
+      var(--accent-gradient-hoverEnd, $accent-gradient-hoverEnd)
+    );
+  }
+}
+
+/// Accent gradient text for vibrant text elements
+/// @param {string} $state - Gradient state: default or hover
+@mixin accent-gradient-text($state: "default") {
+  @if $state == "default" {
+    background: linear-gradient(
+      135deg,
+      var(--accent-gradient-start, $accent-gradient-start),
+      var(--accent-gradient-end, $accent-gradient-end)
+    );
+  } @else if $state == "hover" {
+    background: linear-gradient(
+      135deg,
+      var(--accent-gradient-hoverStart, $accent-gradient-hoverStart),
+      var(--accent-gradient-hoverEnd, $accent-gradient-hoverEnd)
+    );
+  }
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}

package/src/scss/mixins/border.scss

@@ -0,0 +1,28 @@
+@use "../../../dist/scss/tokens" as *;
+
+/// Border mixin for consistent border treatments
+/// @param {string} $tier - Border tier: subtle, default, strong, or vibrant
+/// @param {color} $bg - Background color for gradient border (required for vibrant with border-radius)
+@mixin border($tier: "default", $bg: null) {
+  @if $tier == "subtle" {
+    border: 1px solid $border-subtle;
+  } @else if $tier == "default" {
+    border: 1px solid $border-default;
+  } @else if $tier == "strong" {
+    border: 1px solid $border-strong;
+  } @else if $tier == "vibrant" {
+    // Gradient border that works with border-radius
+    // Uses double background trick: solid bg on padding-box, gradient on border-box
+    border: 2px solid transparent;
+    @if $bg {
+      background:
+        linear-gradient($bg, $bg) padding-box,
+        linear-gradient(45deg, $border-vibrant-start, $border-vibrant-end) border-box;
+    } @else {
+      // Default to white background
+      background:
+        linear-gradient(#fff, #fff) padding-box,
+        linear-gradient(45deg, $border-vibrant-start, $border-vibrant-end) border-box;
+    }
+  }
+}

package/src/scss/mixins/breakpoint.scss

@@ -0,0 +1,80 @@
+// Defined based on statcounter stats end 2023
+// Phone - https://gs.statcounter.com/screen-resolution-stats/mobile/netherlands#monthly-202210-202310
+// Tablet - https://gs.statcounter.com/screen-resolution-stats/tablet/netherlands#monthly-202210-202310
+// Desktop - https://gs.statcounter.com/screen-resolution-stats/tablet/netherlands#monthly-202210-202310
+
+@use "sass:map";
+
+$breakpoints: (
+  phone: (
+    from: 0px,
+    to: 767px,
+  ),
+  phone-portrait: (
+    from: 0px,
+    to: 429px,
+  ),
+  phone-landscape: (
+    from: 430px,
+    to: 767px,
+  ),
+  tablet: (
+    from: 768px,
+    to: 1280px,
+  ),
+  tablet-portrait: (
+    from: 768px,
+    to: 1023px,
+  ),
+  tablet-landscape: (
+    from: 1024px,
+    to: 1280px,
+  ),
+  laptop: (
+    from: 1281px,
+    to: 1919px,
+  ),
+  desktop: (
+    from: 1920px,
+    to: 2559px,
+  ),
+  wide-screen: (
+    from: 2560px,
+    to: 10000px,
+  ),
+);
+
+@mixin breakpoint-from($bp) {
+  $from: map.get(map.get($breakpoints, $bp), from);
+
+  @media (min-width: $from) {
+    @content;
+  }
+}
+
+@mixin breakpoint-to($bp) {
+  $from: map.get(map.get($breakpoints, $bp), from);
+  $max-width: $from - 1;
+
+  @media (max-width: $max-width) {
+    @content;
+  }
+}
+
+@mixin breakpoint-on($bp) {
+  $from: map.get(map.get($breakpoints, $bp), from);
+  $to: map.get(map.get($breakpoints, $bp), to);
+
+  @media (max-width: $to) and (min-width: $from) {
+    @content;
+  }
+}
+
+@mixin breakpoint-from-to($bp-from, $bp-to) {
+  $from: map.get(map.get($breakpoints, $bp-from), from);
+  $to: map.get(map.get($breakpoints, $bp-to), to);
+
+  @media (max-width: $to) and (min-width: $from) {
+    @content;
+  }
+}

package/src/scss/mixins/container.scss

@@ -0,0 +1,43 @@
+@use "./breakpoint.scss" as bp;
+@use "../../dist/scss/tokens" as tokens;
+
+// Container — centered, max-width-capped wrapper with responsive
+// inline-padding. Four variants: fluid / narrow / default / wide.
+//
+// Defaults to `default` for backward compat with old `@include container()`
+// callsites. Each variant's max-width is exposed as a CSS-var
+// (`--container-max-width-<variant>`) so brand themes can override the
+// cap without forking the mixin.
+//
+// Padding scale stays identical across variants — only the cap differs.
+
+@mixin container($variant: 'default') {
+  width: 100%;
+  box-sizing: border-box;
+  margin-inline: auto;
+
+  padding-left: tokens.$inset-m;
+  padding-right: tokens.$inset-m;
+
+  @include bp.breakpoint-from(tablet) {
+    padding-left: tokens.$inset-2xl;
+    padding-right: tokens.$inset-2xl;
+  }
+
+  @include bp.breakpoint-from(laptop) {
+    padding-left: 80px;
+    padding-right: 80px;
+  }
+
+  @if $variant == 'fluid' {
+    max-width: none;
+  } @else if $variant == 'narrow' {
+    max-width: var(--container-max-width-narrow);
+  } @else if $variant == 'wide' {
+    max-width: var(--container-max-width-wide);
+  } @else if $variant == 'default' {
+    max-width: var(--container-max-width-default);
+  } @else {
+    @error "Unknown container variant: #{$variant}. Use one of: fluid, narrow, default, wide.";
+  }
+}

package/src/scss/mixins/grid.scss

@@ -0,0 +1,23 @@
+@use "./breakpoint.scss" as *;
+@use "./container.scss" as *;
+@use "../../dist/scss/tokens" as *;
+
+@mixin grid() {
+  display: grid;
+  gap: $inline-l;
+  grid-template-columns: 1fr;
+
+  @include breakpoint-from(tablet) {
+    grid-template-columns: repeat(4, 1fr);
+    gap: $inline-xl;
+  }
+
+  @include breakpoint-from(laptop) {
+    grid-template-columns: repeat(6, 1fr);
+    gap: $inline-2xl;
+  }
+
+  @include breakpoint-from(laptop) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}

package/src/scss/mixins/levitation.scss

@@ -0,0 +1,15 @@
+@use "../../dist/scss/tokens" as *;
+
+@mixin levitate($level: "m") {
+  @if ($level == "xs") {
+    box-shadow: $shadow-xs;
+  } @else if ($level == "s") {
+    box-shadow: $shadow-s;
+  } @else if ($level == "m") {
+    box-shadow: $shadow-m;
+  } @else if ($level == "l") {
+    box-shadow: $shadow-l;
+  } @else if ($level == "xl") {
+    box-shadow: $shadow-xl;
+  }
+}

package/src/scss/mixins/list.scss

@@ -0,0 +1,5 @@
+@mixin list-clean {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

package/src/scss/mixins/surface.scss

@@ -0,0 +1,19 @@
+@use "../../../dist/scss/tokens" as *;
+
+/// Surface mixin for background treatments
+/// @param {string} $type - Surface type: canvas, panel, elevated, muted, accent, or gradient
+@mixin surface($type: "canvas") {
+  @if $type == "canvas" {
+    background-color: $surface-canvas;
+  } @else if $type == "panel" {
+    background-color: $surface-panel;
+  } @else if $type == "elevated" {
+    background-color: $surface-elevated;
+  } @else if $type == "muted" {
+    background-color: $surface-muted;
+  } @else if $type == "accent" {
+    background-color: $surface-accent;
+  } @else if $type == "gradient" {
+    background: linear-gradient(180deg, $surface-gradient-start, $surface-gradient-end);
+  }
+}