jouw-stem__design-system 0.1.0

package/src/components/Sidebar/Sidebar.vue

@@ -0,0 +1,186 @@
+<template>
+  <Teleport to="body">
+    <Transition name="sidebar-fade">
+      <div
+        v-if="visible"
+        class="sidebar__overlay"
+        @click="onOverlayClick"
+        @keydown.escape="onEscapeKey"
+      >
+        <Transition :name="transitionName">
+          <div
+            v-if="visible"
+            ref="sidebarRef"
+            class="sidebar"
+            :class="additionalClasses"
+            role="dialog"
+            aria-modal="true"
+            :aria-labelledby="headerId"
+            @click.stop
+          >
+            <div v-if="$slots.header || header || closable" class="sidebar__header">
+              <slot name="header">
+                <span :id="headerId" class="sidebar__title">{{ header }}</span>
+              </slot>
+              <button
+                v-if="closable"
+                type="button"
+                class="sidebar__close"
+                aria-label="Close"
+                @click="close"
+              >
+                <svg
+                  class="sidebar__close-icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            </div>
+
+            <nav class="sidebar__content">
+              <slot />
+            </nav>
+
+            <div v-if="$slots.footer" class="sidebar__footer">
+              <slot name="footer" />
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./Sidebar.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref, watch, onUnmounted } from "vue";
+
+const props = defineProps({
+  /**
+   * Controls sidebar visibility.
+   */
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Header text displayed in the sidebar header.
+   */
+  header: {
+    type: String,
+    default: "",
+  },
+  /**
+   * Position of the sidebar (left or right).
+   */
+  position: {
+    type: String,
+    default: "left",
+    validator: (v) => ["left", "right"].includes(v),
+  },
+  /**
+   * Whether the sidebar takes full screen width.
+   */
+  fullScreen: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Whether to show the close button.
+   */
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Closes sidebar when clicking the overlay.
+   */
+  dismissable: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Closes sidebar when pressing Escape key.
+   */
+  closeOnEscape: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * Whether to block body scroll when sidebar is open.
+   */
+  blockScroll: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits<{
+  (e: "update:visible", ...args: unknown[]): void;
+  (e: "show", ...args: unknown[]): void;
+  (e: "hide", ...args: unknown[]): void;
+}>();
+const sidebarRef = ref(null);
+const headerId = `sidebar-header-${Math.random().toString(36).substr(2, 9)}`;
+
+const additionalClasses = computed(() =>
+  [
+    `sidebar--position-${props.position}`,
+    props.fullScreen && "sidebar--state-fullscreen",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const transitionName = computed(() => {
+  return `sidebar-slide-${props.position}`;
+});
+
+const close = () => {
+  emit("update:visible", false);
+  emit("hide");
+};
+
+const onOverlayClick = () => {
+  if (props.dismissable) {
+    close();
+  }
+};
+
+const onEscapeKey = (event) => {
+  if (props.closeOnEscape && props.visible) {
+    event.preventDefault();
+    close();
+  }
+};
+
+// Block scroll when sidebar is open
+watch(
+  () => props.visible,
+  (newValue) => {
+    if (newValue) {
+      emit("show");
+      if (props.blockScroll) {
+        document.body.style.overflow = "hidden";
+      }
+    } else {
+      if (props.blockScroll) {
+        document.body.style.overflow = "";
+      }
+    }
+  }
+);
+
+// Cleanup on unmount
+onUnmounted(() => {
+  document.body.style.overflow = "";
+});
+</script>

package/src/components/Skeleton/Skeleton.matrix.ts

@@ -0,0 +1,28 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.skeleton',
+  // Skeleton requires explicit dimensions to render — defaults are null
+  // and the element would collapse. baseQuery sets a sensible default
+  // bar size; Shape sub-axis overrides for circle.
+  baseQuery: { width: '120px', height: '20px' },
+  variants: [
+    {
+      name: 'Shape',
+      subvariants: [
+        { name: 'rectangle', query: { shape: 'rectangle' } },
+        // Circle wants equal width+height — override to a square.
+        { name: 'circle',    query: { shape: 'circle', width: '40px', height: '40px' } }
+      ]
+    },
+    {
+      name: 'Animation',
+      subvariants: [
+        { name: 'wave', query: { animation: 'wave' } },
+        { name: 'none', query: { animation: 'none' } }
+      ]
+    }
+  ]
+  // No defaultSlot — Skeleton intentionally has no children (aria-hidden,
+  // pure visual placeholder).
+}

package/src/components/Skeleton/Skeleton.scss

@@ -0,0 +1,43 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: skeleton;
+
+.#{$c} {
+  display: block;
+  background-color: var(--skeleton-background, $skeleton-background);
+  border-radius: var(--skeleton-radius, $skeleton-radius);
+  width: 100%;
+  height: 1rem;
+  overflow: hidden;
+  position: relative;
+}
+
+.#{$c}--circle {
+  border-radius: 9999px;
+  width: 3rem;
+  height: 3rem;
+}
+
+.#{$c}--animated {
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--skeleton-highlight, $skeleton-highlight) 50%,
+      transparent 100%
+    );
+    animation: skeleton-wave var(--skeleton-animation-duration, $skeleton-animation-duration) ease-in-out infinite;
+  }
+}
+
+@keyframes skeleton-wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/components/Skeleton/Skeleton.tokens.theme-dark.json

@@ -0,0 +1,26 @@
+{
+  "skeleton": {
+    "background": {
+      "value": "{neutral.200}",
+      "type": "color",
+      "description": "Base skeleton background color"
+    },
+    "highlight": {
+      "value": "{neutral.300}",
+      "type": "color",
+      "description": "Animation highlight/shimmer color"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Default border radius for rectangle skeleton"
+    },
+    "animation": {
+      "duration": {
+        "value": "1.5s",
+        "type": "duration",
+        "description": "Wave animation duration"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+{
+  "skeleton": {
+    "background": {
+      "value": "{intent.action.disabled}",
+      "type": "color",
+      "description": "Base skeleton background color (HC: visible mid-grey on white canvas)"
+    },
+    "highlight": {
+      "value": "{text.default}",
+      "type": "color",
+      "description": "Animation highlight/shimmer color (HC: black sweep)"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Default border radius for rectangle skeleton"
+    },
+    "animation": {
+      "duration": {
+        "value": "1.5s",
+        "type": "duration",
+        "description": "Wave animation duration"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+{
+  "skeleton": {
+    "background": {
+      "value": "{intent.action.disabled}",
+      "type": "color",
+      "description": "Base skeleton background color (HC: visible mid-grey on white canvas)"
+    },
+    "highlight": {
+      "value": "{text.default}",
+      "type": "color",
+      "description": "Animation highlight/shimmer color (HC: black sweep)"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Default border radius for rectangle skeleton"
+    },
+    "animation": {
+      "duration": {
+        "value": "1.5s",
+        "type": "duration",
+        "description": "Wave animation duration"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+{
+  "skeleton": {
+    "background": {
+      "value": "{neutral.200}",
+      "type": "color",
+      "description": "Base skeleton background color"
+    },
+    "highlight": {
+      "value": "{neutral.300}",
+      "type": "color",
+      "description": "Animation highlight/shimmer color"
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Default border radius for rectangle skeleton"
+    },
+    "animation": {
+      "duration": {
+        "value": "1.5s",
+        "type": "duration",
+        "description": "Wave animation duration"
+      }
+    }
+  }
+}

package/src/components/Skeleton/Skeleton.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="skeleton"
+    :class="additionalClasses"
+    :style="containerStyle"
+    aria-hidden="true"
+  />
+</template>
+
+<style src="./Skeleton.scss"></style>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface Props {
+  shape?: string;
+  width?: string;
+  height?: string;
+  borderRadius?: string;
+  animation?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  shape: "rectangle",
+  width: null,
+  height: null,
+  borderRadius: null,
+  animation: "wave",
+});
+const additionalClasses = computed(() => {
+  const classes = [];
+
+  if (props.shape === "circle") {
+    classes.push("skeleton--circle");
+  }
+
+  if (props.animation === "wave") {
+    classes.push("skeleton--animated");
+  }
+
+  return classes.join(" ");
+});
+
+const containerStyle = computed(() => {
+  const style = {};
+
+  if (props.width) {
+    style.width = props.width;
+  }
+
+  if (props.height) {
+    style.height = props.height;
+  }
+
+  if (props.borderRadius) {
+    style.borderRadius = props.borderRadius;
+  }
+
+  return style;
+});
+</script>

package/src/components/Slider/Slider.matrix.ts

@@ -0,0 +1,25 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.slider',
+  baseQuery: { modelValue: '40' },
+  // Slider's variant surface is thin — same control, different value
+  // positions. States cover the interactive set including filled at
+  // different percentages so axe + non-text contrast see thumb-on-track
+  // in all positions.
+  variants: [
+    {
+      name: 'Value',
+      subvariants: [
+        { name: 'min',    query: { modelValue: '0' } },
+        { name: 'mid',    query: { modelValue: '50' } },
+        { name: 'max',    query: { modelValue: '100' } }
+      ]
+    }
+  ],
+  states: [
+    { name: 'hover',          attr: 'hover' },
+    { name: 'focus-visible',  attr: 'focus-visible' },
+    { name: 'disabled',       props: { isDisabled: 'true' } }
+  ]
+}

package/src/components/Slider/Slider.scss

@@ -0,0 +1,106 @@
+@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,
+  &::-webkit-slider-thumb[data-state~="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,
+  &::-moz-range-thumb[data-state~="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,
+  &[data-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.tokens.theme-dark.json

@@ -0,0 +1,82 @@
+{
+  "slider": {
+    "track": {
+      "height": {
+        "value": "6px",
+        "type": "dimension"
+      },
+      "background": {
+        "default": {
+          "value": "{neutral.500}",
+          "type": "color",
+          "description": "Inactive track — #737373, meets WCAG 1.4.11 ≥3:1 vs dark canvas"
+        },
+        "fill": {
+          "value": "{orange.500}",
+          "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": "{orange.500}",
+          "type": "color",
+          "description": "Thumb - visible accent color"
+        },
+        "hover": {
+          "value": "{orange.400}",
+          "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": "{orange.500}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}