jouw-stem__design-system 0.1.0

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

@@ -0,0 +1,145 @@
+{
+  "selectButton": {
+    "gap": {
+      "value": "{inline.2xs}",
+      "type": "dimension",
+      "description": "Gap between option buttons"
+    },
+    "padding": {
+      "x": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal padding for option buttons"
+      },
+      "y": {
+        "value": "{inset.xs}",
+        "type": "dimension",
+        "description": "Vertical padding for option buttons"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Border radius for option buttons"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width for option buttons"
+      },
+      "color": {
+        "default": {
+          "value": "{border.default}",
+          "type": "color",
+          "description": "Default border color"
+        },
+        "hover": {
+          "value": "{border.default}",
+          "type": "color",
+          "description": "Hover border color"
+        },
+        "selected": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Selected border color"
+        },
+        "disabled": {
+          "value": "{border.default}",
+          "type": "color",
+          "description": "Disabled border color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Default background color"
+      },
+      "hover": {
+        "value": "{intent.secondary.hover}",
+        "type": "color",
+        "description": "Hover background color"
+      },
+      "selected": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Selected background color"
+      },
+      "disabled": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Disabled background color"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Default text color"
+      },
+      "hover": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Hover text color"
+      },
+      "selected": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Selected text color"
+      },
+      "disabled": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Disabled text color"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Focus ring width"
+      },
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color",
+        "description": "Focus ring color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Focus ring offset"
+      }
+    },
+    "fontSize": {
+      "value": "14px",
+      "type": "dimension",
+      "description": "Font size for option text"
+    },
+    "fontWeight": {
+      "default": {
+        "value": "500",
+        "type": "fontWeight",
+        "description": "Default font weight"
+      },
+      "selected": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Selected font weight"
+      }
+    },
+    "minHeight": {
+      "value": "36px",
+      "type": "dimension",
+      "description": "Minimum height of option buttons"
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Transition duration for state changes"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,145 @@
+{
+  "selectButton": {
+    "gap": {
+      "value": "{inline.2xs}",
+      "type": "dimension",
+      "description": "Gap between option buttons"
+    },
+    "padding": {
+      "x": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal padding for option buttons"
+      },
+      "y": {
+        "value": "{inset.xs}",
+        "type": "dimension",
+        "description": "Vertical padding for option buttons"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Border radius for option buttons"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width for option buttons"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.300}",
+          "type": "color",
+          "description": "Default border color"
+        },
+        "hover": {
+          "value": "{neutral.400}",
+          "type": "color",
+          "description": "Hover border color"
+        },
+        "selected": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Selected border color"
+        },
+        "disabled": {
+          "value": "{neutral.200}",
+          "type": "color",
+          "description": "Disabled border color"
+        }
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Default background color"
+      },
+      "hover": {
+        "value": "{neutral.50}",
+        "type": "color",
+        "description": "Hover background color"
+      },
+      "selected": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Selected background color"
+      },
+      "disabled": {
+        "value": "{neutral.100}",
+        "type": "color",
+        "description": "Disabled background color"
+      }
+    },
+    "text": {
+      "default": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Default text color"
+      },
+      "hover": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Hover text color"
+      },
+      "selected": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Selected text color"
+      },
+      "disabled": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Disabled text color"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Focus ring width"
+      },
+      "ringColor": {
+        "value": "{focus.ring}",
+        "type": "color",
+        "description": "Focus ring color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Focus ring offset"
+      }
+    },
+    "fontSize": {
+      "value": "14px",
+      "type": "dimension",
+      "description": "Font size for option text"
+    },
+    "fontWeight": {
+      "default": {
+        "value": "500",
+        "type": "fontWeight",
+        "description": "Default font weight"
+      },
+      "selected": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Selected font weight"
+      }
+    },
+    "minHeight": {
+      "value": "36px",
+      "type": "dimension",
+      "description": "Minimum height of option buttons"
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Transition duration for state changes"
+      }
+    }
+  }
+}

package/src/components/SelectButton/SelectButton.vue

@@ -0,0 +1,89 @@
+<template>
+  <div
+    class="select-button"
+    :class="additionalClasses"
+    role="group"
+    :aria-label="ariaLabel"
+  >
+    <button
+      v-for="(option, index) in options"
+      :key="String(getOptionValue(option, optionValue))"
+      type="button"
+      class="select-button__option"
+      :class="{
+        'select-button__option--state-selected': isSelected(option, modelValue, multiple, optionValue),
+        'select-button__option--state-disabled': isDisabled || isOptionDisabled(option, optionDisabled)
+      }"
+      :disabled="isDisabled || isOptionDisabled(option, optionDisabled)"
+      :aria-pressed="isSelected(option, modelValue, multiple, optionValue)"
+      :tabindex="isDisabled || isOptionDisabled(option, optionDisabled) ? -1 : 0"
+      @click="onOptionClick(option, $event)"
+    >
+      <slot name="option" :option="option" :index="index" :selected="isSelected(option, modelValue, multiple, optionValue)">
+        {{ getOptionLabel(option, optionLabel) }}
+      </slot>
+    </button>
+  </div>
+</template>
+
+<style src="./SelectButton.scss"></style>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  computeToggle,
+  getOptionLabel,
+  getOptionValue,
+  isOptionDisabled,
+  isSelected,
+  type AccessorKey,
+  type SelectButtonOption,
+} from "./options";
+
+interface Props {
+  modelValue?: string | number | Record<string, unknown> | unknown[];
+  options: unknown[];
+  optionLabel?: AccessorKey | null;
+  optionValue?: AccessorKey | null;
+  optionDisabled?: AccessorKey | null;
+  multiple?: boolean;
+  allowEmpty?: boolean;
+  isDisabled?: boolean;
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  options: () => [],
+  optionLabel: null,
+  optionValue: null,
+  optionDisabled: null,
+  multiple: false,
+  allowEmpty: true,
+  isDisabled: false,
+  ariaLabel: "Select button group",
+});
+const emit = defineEmits<{
+  (e: "update:modelValue", ...args: unknown[]): void;
+  (e: "change", ...args: unknown[]): void;
+}>();
+
+const onOptionClick = (option: SelectButtonOption, event: Event) => {
+  if (props.isDisabled || isOptionDisabled(option, props.optionDisabled)) return;
+
+  const result = computeToggle(
+    option,
+    props.modelValue,
+    { multiple: props.multiple, allowEmpty: props.allowEmpty },
+    props.optionValue
+  );
+  if (!result.changed) return;
+
+  emit("update:modelValue", result.next);
+  emit("change", { originalEvent: event, value: result.next });
+};
+
+const additionalClasses = computed(() =>
+  [props.isDisabled && "select-button--state-disabled"].filter(Boolean).join(" ")
+);
+</script>

package/src/components/SelectButton/options.ts

@@ -0,0 +1,139 @@
+/**
+ * Pure option-resolution + selection helpers for SelectButton.
+ *
+ * Mirrors the pattern used by Dropdown — the component template wires
+ * these into props/v-model, but the *decisions* (how to read a label
+ * off a primitive vs. object option, how to compute "is this selected"
+ * for single vs. multiple, how to toggle with allowEmpty) live here so
+ * they can be tested without mounting.
+ */
+
+export type AccessorKey<T = unknown> = string | ((option: T) => unknown)
+
+export type SelectButtonOption =
+  | string
+  | number
+  | (Record<string, unknown> & { disabled?: boolean })
+
+export type SelectButtonValue = unknown
+
+/** Default-aware label reader. Honours custom string keys and accessor functions. */
+export function getOptionLabel(option: SelectButtonOption, optionLabel?: AccessorKey | null): unknown {
+  if (optionLabel) {
+    if (typeof optionLabel === 'function') return optionLabel(option)
+    return (option as Record<string, unknown>)?.[optionLabel]
+  }
+  if (option && typeof option === 'object') {
+    return (option as Record<string, unknown>).label ?? option
+  }
+  return option
+}
+
+/** Default-aware value reader. Falls back to identity for primitives, `value` key for objects. */
+export function getOptionValue(option: SelectButtonOption, optionValue?: AccessorKey | null): unknown {
+  if (optionValue) {
+    if (typeof optionValue === 'function') return optionValue(option)
+    return (option as Record<string, unknown>)?.[optionValue]
+  }
+  if (option && typeof option === 'object') {
+    return (option as Record<string, unknown>).value ?? option
+  }
+  return option
+}
+
+/** True when the option carries an explicit disabled flag (or accessor returns truthy). */
+export function isOptionDisabled(option: SelectButtonOption, optionDisabled?: AccessorKey | null): boolean {
+  if (optionDisabled) {
+    if (typeof optionDisabled === 'function') return Boolean(optionDisabled(option))
+    return Boolean((option as Record<string, unknown>)?.[optionDisabled])
+  }
+  if (option && typeof option === 'object') {
+    return Boolean((option as Record<string, unknown>).disabled)
+  }
+  return false
+}
+
+/**
+ * Equality used to compare model values to option values. Strict identity
+ * first; falls back to JSON-shape equality for plain objects so two
+ * structurally-equal records are treated as the same selection.
+ */
+export function equals(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (a && b && typeof a === 'object' && typeof b === 'object') {
+    try {
+      return JSON.stringify(a) === JSON.stringify(b)
+    } catch {
+      return false
+    }
+  }
+  return false
+}
+
+/**
+ * `multiple=false`: model is a single value. `multiple=true`: model is
+ * an array. Either way: is the option's value present in the model?
+ */
+export function isSelected(
+  option: SelectButtonOption,
+  modelValue: unknown,
+  multiple: boolean,
+  optionValue?: AccessorKey | null
+): boolean {
+  const value = getOptionValue(option, optionValue)
+  if (multiple) {
+    if (!Array.isArray(modelValue)) return false
+    return modelValue.some(v => equals(v, value))
+  }
+  return equals(modelValue, value)
+}
+
+export interface ToggleOptions {
+  multiple: boolean
+  allowEmpty: boolean
+}
+
+export interface ToggleResult {
+  /** New model value, or `undefined` if the toggle is rejected (allowEmpty=false guard). */
+  next: unknown
+  changed: boolean
+}
+
+/**
+ * Compute the next model value after clicking an option.
+ *
+ * Single mode:
+ *   - clicking the selected option clears it (or keeps it, when allowEmpty=false).
+ *   - clicking a different option replaces the selection.
+ * Multiple mode:
+ *   - clicking a selected option removes it (kept when it's the last and allowEmpty=false).
+ *   - clicking an unselected option appends it.
+ */
+export function computeToggle(
+  option: SelectButtonOption,
+  modelValue: unknown,
+  { multiple, allowEmpty }: ToggleOptions,
+  optionValue?: AccessorKey | null
+): ToggleResult {
+  const value = getOptionValue(option, optionValue)
+
+  if (multiple) {
+    const current = Array.isArray(modelValue) ? [...modelValue] : []
+    const idx = current.findIndex(v => equals(v, value))
+    if (idx !== -1) {
+      if (!allowEmpty && current.length <= 1) {
+        return { next: modelValue, changed: false }
+      }
+      current.splice(idx, 1)
+      return { next: current, changed: true }
+    }
+    current.push(value)
+    return { next: current, changed: true }
+  }
+
+  if (equals(modelValue, value)) {
+    if (!allowEmpty) return { next: modelValue, changed: false }
+    return { next: null, changed: true }
+  }
+  return { next: value, changed: true }
+}

package/src/components/Sidebar/Sidebar.matrix.ts

@@ -0,0 +1,16 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.sidebar',
+  defaultSlot: 'Sidebar content goes here.',
+  baseQuery: { visible: 'true', header: 'Navigation' },
+  variants: [
+    {
+      name: 'Position',
+      subvariants: [
+        { name: 'left',  query: { position: 'left' } },
+        { name: 'right', query: { position: 'right' } }
+      ]
+    }
+  ]
+}

package/src/components/Sidebar/Sidebar.scss

@@ -0,0 +1,172 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/border.scss" as *;
+
+$c: sidebar;
+
+// Overlay backdrop
+.#{$c}__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--sidebar-overlay-background, $sidebar-overlay-background);
+  z-index: var(--sidebar-zIndex-overlay, $sidebar-zIndex-overlay);
+}
+
+// Sidebar container
+.#{$c} {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: var(--sidebar-width-default, $sidebar-width-default);
+  background-color: var(--sidebar-background, $sidebar-background);
+  box-shadow: var(--sidebar-shadow, $sidebar-shadow);
+  z-index: var(--sidebar-zIndex-sidebar, $sidebar-zIndex-sidebar);
+  max-width: 100vw;
+}
+
+// Position variants with vibrant gradient border
+.#{$c}--position-left {
+  left: 0;
+  border-right: none;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(45deg, $border-vibrant-start, $border-vibrant-end);
+  }
+}
+
+.#{$c}--position-right {
+  right: 0;
+  border-left: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(45deg, $border-vibrant-start, $border-vibrant-end);
+  }
+}
+
+// Full screen variant
+.#{$c}--state-fullscreen {
+  width: var(--sidebar-width-fullScreen, $sidebar-width-fullScreen);
+  border: none;
+}
+
+// Header section
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--inset-m, $inset-m);
+  padding: var(--sidebar-header-padding, $sidebar-header-padding);
+  background-color: var(--sidebar-header-background, $sidebar-header-background);
+  border-bottom: 1px solid var(--sidebar-header-borderColor, $sidebar-header-borderColor);
+  flex-shrink: 0;
+}
+
+.#{$c}__title {
+  font-size: var(--sidebar-header-title-fontSize, $sidebar-header-title-fontSize);
+  font-weight: var(--sidebar-header-title-fontWeight, $sidebar-header-title-fontWeight);
+  color: var(--sidebar-header-title-color, $sidebar-header-title-color);
+  margin: 0;
+  line-height: 1.4;
+}
+
+// Close button
+.#{$c}__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sidebar-closeButton-size, $sidebar-closeButton-size);
+  height: var(--sidebar-closeButton-size, $sidebar-closeButton-size);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--sidebar-closeButton-radius, $sidebar-closeButton-radius);
+  color: var(--sidebar-closeButton-color-default, $sidebar-closeButton-color-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--sidebar-closeButton-background-hover, $sidebar-closeButton-background-hover);
+    color: var(--sidebar-closeButton-color-hover, $sidebar-closeButton-color-hover);
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__close-icon {
+  width: var(--sidebar-closeButton-iconSize, $sidebar-closeButton-iconSize);
+  height: var(--sidebar-closeButton-iconSize, $sidebar-closeButton-iconSize);
+}
+
+// Content section (navigation area)
+.#{$c}__content {
+  flex: 1 1 auto;
+  padding: var(--sidebar-content-padding, $sidebar-content-padding);
+  overflow-y: auto;
+  color: var(--sidebar-content-color, $sidebar-content-color);
+}
+
+// Footer section
+.#{$c}__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--inset-s, $inset-s);
+  padding: var(--sidebar-content-padding, $sidebar-content-padding);
+  border-top: 1px solid var(--sidebar-header-borderColor, $sidebar-header-borderColor);
+  flex-shrink: 0;
+  color: var(--sidebar-content-color, $sidebar-content-color);
+}
+
+// Transition animations
+
+// Overlay fade
+.sidebar-fade-enter-active,
+.sidebar-fade-leave-active {
+  transition: opacity var(--sidebar-transition-duration, $sidebar-transition-duration) ease;
+}
+
+.sidebar-fade-enter-from,
+.sidebar-fade-leave-to {
+  opacity: 0;
+}
+
+// Slide from left
+.sidebar-slide-left-enter-active,
+.sidebar-slide-left-leave-active {
+  transition: transform var(--sidebar-transition-duration, $sidebar-transition-duration) ease;
+}
+
+.sidebar-slide-left-enter-from,
+.sidebar-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+
+// Slide from right
+.sidebar-slide-right-enter-active,
+.sidebar-slide-right-leave-active {
+  transition: transform var(--sidebar-transition-duration, $sidebar-transition-duration) ease;
+}
+
+.sidebar-slide-right-enter-from,
+.sidebar-slide-right-leave-to {
+  transform: translateX(100%);
+}