jouw-stem__design-system 0.1.0

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

@@ -0,0 +1,97 @@
+{
+  "tabs": {
+    "nav": {
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Border color for tab navigation"
+      },
+      "borderWidth": {
+        "value": "1px",
+        "type": "dimension"
+      }
+    },
+    "tab": {
+      "padding": {
+        "x": {
+          "value": "{inset.m}",
+          "type": "dimension",
+          "description": "Horizontal tab padding"
+        },
+        "y": {
+          "value": "{inset.s}",
+          "type": "dimension",
+          "description": "Vertical tab padding"
+        }
+      },
+      "text": {
+        "default": {
+          "value": "{text.secondary}",
+          "type": "color",
+          "description": "Inactive tab text"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Tab text on hover"
+        },
+        "active": {
+          "value": "{orange.500}",
+          "type": "color",
+          "description": "Active tab text - visible accent"
+        },
+        "disabled": {
+          "value": "rgba(255, 255, 255, 0.38)",
+          "type": "color"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color"
+        },
+        "hover": {
+          "value": "rgba(255, 255, 255, 0.05)",
+          "type": "color"
+        },
+        "active": {
+          "value": "transparent",
+          "type": "color"
+        }
+      }
+    },
+    "indicator": {
+      "color": {
+        "value": "{orange.500}",
+        "type": "color",
+        "description": "Active tab indicator - visible accent"
+      },
+      "height": {
+        "value": "2px",
+        "type": "dimension",
+        "description": "Active tab indicator thickness"
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Tab panel content padding"
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{orange.500}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="tabs" :class="additionalClasses">
+    <div class="tabs__nav" role="tablist" :aria-label="ariaLabel">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="tab.id"
+        type="button"
+        role="tab"
+        class="tabs__tab"
+        :class="{
+          'tabs__tab--state-active': index === activeIndex,
+          'tabs__tab--state-disabled': tab.disabled
+        }"
+        :id="`${tabsId}-tab-${index}`"
+        :aria-selected="index === activeIndex"
+        :aria-controls="`${tabsId}-panel-${index}`"
+        :tabindex="index === activeIndex ? 0 : -1"
+        :disabled="tab.disabled"
+        @click="onTabClick(index, $event)"
+        @keydown="onKeydown($event, index)"
+      >
+        {{ tab.header }}
+      </button>
+      <span
+        class="tabs__indicator"
+        :style="indicatorStyle"
+      ></span>
+    </div>
+    <div class="tabs__panels">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style src="./Tabs.scss"></style>
+
+<script setup lang="ts">
+import { ref, computed, provide, onMounted, nextTick, watch } from "vue";
+import { nextActiveIndex, type NavKey } from "./keyboardNav";
+
+interface Props {
+  activeIndex?: number;
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeIndex: 0,
+  ariaLabel: "Tabs",
+});
+
+interface TabChangeEvent {
+  originalEvent: Event;
+  index: number;
+}
+
+const emit = defineEmits<{
+  (e: "update:activeIndex", value: number): void;
+  (e: "tabChange", payload: TabChangeEvent): void;
+  (e: "tabClick", payload: TabChangeEvent): void;
+}>();
+
+const tabsId = `tabs-${Math.random().toString(36).substring(2, 9)}`;
+
+interface RegisteredTab {
+  id: string;
+  header?: string;
+  disabled?: boolean;
+}
+
+const tabs = ref<RegisteredTab[]>([]);
+const tabElements = ref<HTMLElement[]>([]);
+const navRef = ref<HTMLElement | null>(null);
+
+function registerTab(tab: Omit<RegisteredTab, "id">): number {
+  const id = `tab-${tabs.value.length}`;
+  tabs.value.push({ ...tab, id });
+  return tabs.value.length - 1;
+}
+
+function unregisterTab(index: number) {
+  tabs.value.splice(index, 1);
+}
+
+provide("tabs", {
+  registerTab,
+  unregisterTab,
+  activeIndex: computed(() => props.activeIndex),
+  tabsId,
+});
+
+const indicatorStyle = ref<Record<string, string>>({});
+
+async function updateIndicator() {
+  await nextTick();
+  const activeTab = document.querySelector<HTMLElement>(
+    `#${tabsId}-tab-${props.activeIndex}`
+  );
+  if (activeTab) {
+    indicatorStyle.value = {
+      width: `${activeTab.offsetWidth}px`,
+      transform: `translateX(${activeTab.offsetLeft}px)`,
+    };
+  }
+}
+
+onMounted(() => {
+  updateIndicator();
+});
+
+watch(() => props.activeIndex, updateIndicator);
+watch(() => tabs.value.length, updateIndicator);
+
+function onTabClick(index: number, event: Event) {
+  if (tabs.value[index]?.disabled) return;
+
+  emit("tabClick", { originalEvent: event, index });
+
+  if (index !== props.activeIndex) {
+    emit("update:activeIndex", index);
+    emit("tabChange", { originalEvent: event, index });
+  }
+}
+
+const NAV_KEYS: NavKey[] = ["ArrowLeft", "ArrowRight", "Home", "End"];
+
+function onKeydown(event: KeyboardEvent, currentIndex: number) {
+  if (!NAV_KEYS.includes(event.key as NavKey)) return;
+  event.preventDefault();
+
+  const newIndex = nextActiveIndex(tabs.value, currentIndex, event.key as NavKey);
+
+  if (newIndex !== currentIndex && !tabs.value[newIndex]?.disabled) {
+    emit("update:activeIndex", newIndex);
+    emit("tabChange", { originalEvent: event, index: newIndex });
+    nextTick(() => {
+      const newTab = document.querySelector<HTMLElement>(
+        `#${tabsId}-tab-${newIndex}`
+      );
+      newTab?.focus();
+    });
+  }
+}
+
+const additionalClasses = computed(() => "");
+</script>

package/src/components/Tabs/keyboardNav.ts

@@ -0,0 +1,88 @@
+/**
+ * Pure keyboard-navigation math for Tabs. Extracted so each branch
+ * (wrap-around, skip-disabled, Home/End) can be tested directly without
+ * mounting Tabs and synthesising key events.
+ *
+ * The component owns focus management and emit dispatch; this module
+ * only decides "given the current focused tab and a key, which index
+ * should next become active?".
+ */
+
+export interface NavTab {
+  disabled?: boolean
+}
+
+export type NavKey = 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End'
+
+/**
+ * Resolve the next active tab index for a key press.
+ *
+ * - `ArrowLeft` / `ArrowRight` step by one and wrap at the ends.
+ * - `Home` / `End` jump to the first/last tab.
+ * - Disabled tabs are skipped: the cursor keeps walking in the
+ *   direction of travel until a non-disabled tab is found, or the
+ *   walk returns to where it started (in which case nothing changes).
+ *
+ * Returns the current index unchanged when no enabled tab can take
+ * focus — including when every tab is disabled or the array is empty.
+ */
+export function nextActiveIndex(
+  tabs: NavTab[],
+  currentIndex: number,
+  key: NavKey
+): number {
+  const count = tabs.length
+  if (count === 0) return currentIndex
+
+  switch (key) {
+    case 'ArrowLeft':
+      return walk(tabs, currentIndex, -1)
+    case 'ArrowRight':
+      return walk(tabs, currentIndex, +1)
+    case 'Home':
+      return scanFromEdge(tabs, 0, +1, currentIndex)
+    case 'End':
+      return scanFromEdge(tabs, count - 1, -1, currentIndex)
+    default:
+      return currentIndex
+  }
+}
+
+/**
+ * Step one position in `direction` from `currentIndex`, wrapping at
+ * the ends. Skip disabled tabs by repeating the step. Return
+ * `currentIndex` if the walk returns to its starting point without
+ * finding an enabled tab — this matches "no other enabled tab to
+ * move to".
+ */
+function walk(tabs: NavTab[], currentIndex: number, direction: 1 | -1): number {
+  const count = tabs.length
+  let next = wrap(currentIndex + direction, count)
+  while (tabs[next]?.disabled) {
+    if (next === currentIndex) return currentIndex // walked all the way back
+    next = wrap(next + direction, count)
+  }
+  return next
+}
+
+/**
+ * Start at `startIndex` and walk in `direction`, looking for the first
+ * enabled tab. Returns `currentIndex` if every tab is disabled.
+ */
+function scanFromEdge(
+  tabs: NavTab[],
+  startIndex: number,
+  direction: 1 | -1,
+  currentIndex: number
+): number {
+  let i = startIndex
+  for (let step = 0; step < tabs.length; step++) {
+    if (!tabs[i]?.disabled) return i
+    i = wrap(i + direction, tabs.length)
+  }
+  return currentIndex
+}
+
+function wrap(index: number, count: number): number {
+  return ((index % count) + count) % count
+}

package/src/components/Tag/Tag.matrix.ts

@@ -0,0 +1,39 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.tag',
+  // Color is the primary axis: each color produces a distinct
+  // background+text token pair. Each color section shows Shape (square
+  // vs rounded) and Icon (none vs with-icon) sub-axes, plus a
+  // Combinations grid for the cross-product.
+  primaryAxis: 'Color',
+  variants: [
+    {
+      name: 'Color',
+      subvariants: [
+        { name: 'neutral', query: { value: 'Tag', color: 'neutral' } },
+        { name: 'brand',   query: { value: 'Tag', color: 'brand' } },
+        { name: 'accent',  query: { value: 'Tag', color: 'accent' } },
+        { name: 'success', query: { value: 'Tag', color: 'success' } },
+        { name: 'warning', query: { value: 'Tag', color: 'warning' } },
+        { name: 'danger',  query: { value: 'Tag', color: 'danger' } },
+        { name: 'info',    query: { value: 'Tag', color: 'info' } }
+      ]
+    },
+    {
+      name: 'Shape',
+      subvariants: [
+        { name: 'square',  query: {} },
+        { name: 'rounded', query: { rounded: 'true' } }
+      ]
+    },
+    {
+      name: 'Icon',
+      subvariants: [
+        { name: 'none',      query: {} },
+        { name: 'with-icon', query: { icon: 'pi pi-star' } }
+      ]
+    }
+  ]
+  // No `states` — Tag is non-interactive presentational chrome.
+}

package/src/components/Tag/Tag.scss

@@ -0,0 +1,73 @@
+@use "../../../dist/scss/tokens" as *;
+@use "../../scss/mixins/accent-gradient.scss" as *;
+
+$c: tag;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tag-gap, $tag-gap);
+  padding: var(--tag-padding-y, $tag-padding-y) var(--tag-padding-x, $tag-padding-x);
+  font-size: var(--tag-fontSize, $tag-fontSize);
+  font-weight: var(--tag-fontWeight, $tag-fontWeight);
+  line-height: 1;
+  border-radius: var(--tag-radius-default, $tag-radius-default);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.#{$c}__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tag-iconSize, $tag-iconSize);
+  width: var(--tag-iconSize, $tag-iconSize);
+  height: var(--tag-iconSize, $tag-iconSize);
+}
+
+.#{$c}__value {
+  display: inline;
+}
+
+// Rounded (pill) variant
+.#{$c}--shape-rounded {
+  border-radius: var(--tag-radius-rounded, $tag-radius-rounded);
+}
+
+// Brand colors
+.#{$c}--color-brand {
+  background-color: var(--tag-background-brand, $tag-background-brand);
+  color: var(--tag-text-brand, $tag-text-brand);
+}
+
+.#{$c}--color-accent {
+  @include accent-gradient();
+  color: var(--tag-text-accent, $tag-text-accent);
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+.#{$c}--color-neutral {
+  background-color: var(--tag-background-neutral, $tag-background-neutral);
+  color: var(--tag-text-neutral, $tag-text-neutral);
+}
+
+// Status colors
+.#{$c}--color-success {
+  background-color: var(--tag-background-success, $tag-background-success);
+  color: var(--tag-text-success, $tag-text-success);
+}
+
+.#{$c}--color-warning {
+  background-color: var(--tag-background-warning, $tag-background-warning);
+  color: var(--tag-text-warning, $tag-text-warning);
+}
+
+.#{$c}--color-danger {
+  background-color: var(--tag-background-danger, $tag-background-danger);
+  color: var(--tag-text-danger, $tag-text-danger);
+}
+
+.#{$c}--color-info {
+  background-color: var(--tag-background-info, $tag-background-info);
+  color: var(--tag-text-info, $tag-text-info);
+}

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

@@ -0,0 +1,118 @@
+{
+  "tag": {
+    "padding": {
+      "x": {
+        "value": "{inset.xs}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.2xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{inline.2xs}",
+      "type": "dimension",
+      "description": "Gap between icon and text"
+    },
+    "radius": {
+      "default": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Default border radius"
+      },
+      "rounded": {
+        "value": "{radius.pill}",
+        "type": "dimension",
+        "description": "Fully rounded (pill) border radius"
+      }
+    },
+    "fontSize": {
+      "value": "12px",
+      "type": "dimension",
+      "description": "Tag font size"
+    },
+    "fontWeight": {
+      "value": "600",
+      "type": "fontWeight",
+      "description": "Tag font weight"
+    },
+    "iconSize": {
+      "value": "12px",
+      "type": "dimension",
+      "description": "Icon size inside tag"
+    },
+    "background": {
+      "brand": {
+        "value": "{orange.700}",
+        "type": "color",
+        "description": "Brand color tag (darker shade for white-text contrast)"
+      },
+      "accent": {
+        "value": "{amber.500}",
+        "type": "color",
+        "description": "Accent color tag (paired with dark text)"
+      },
+      "neutral": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Neutral/muted tag (visible on light surfaces)"
+      },
+      "success": {
+        "value": "{success.700}",
+        "type": "color"
+      },
+      "warning": {
+        "value": "{feedback.warning}",
+        "type": "color",
+        "description": "Warning status tag (paired with dark text for contrast)"
+      },
+      "danger": {
+        "value": "{danger.700}",
+        "type": "color"
+      },
+      "info": {
+        "value": "{info.700}",
+        "type": "color"
+      }
+    },
+    "text": {
+      "brand": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Text on brand background"
+      },
+      "accent": {
+        "value": "{neutral.900}",
+        "type": "color",
+        "description": "Text on accent background (dark for contrast)"
+      },
+      "neutral": {
+        "value": "{neutral.900}",
+        "type": "color"
+      },
+      "success": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Text on success background"
+      },
+      "warning": {
+        "value": "{neutral.900}",
+        "type": "color",
+        "description": "Text on warning background (dark for contrast)"
+      },
+      "danger": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Text on danger background"
+      },
+      "info": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Text on info background"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+{
+  "tag": {
+    "padding": {
+      "x": {
+        "value": "{inset.xs}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.2xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "gap": {
+      "value": "{inline.2xs}",
+      "type": "dimension",
+      "description": "Gap between icon and text"
+    },
+    "radius": {
+      "default": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Default border radius"
+      },
+      "rounded": {
+        "value": "{radius.pill}",
+        "type": "dimension",
+        "description": "Fully rounded (pill) border radius"
+      }
+    },
+    "fontSize": {
+      "value": "12px",
+      "type": "dimension",
+      "description": "Tag font size"
+    },
+    "fontWeight": {
+      "value": "600",
+      "type": "fontWeight",
+      "description": "Tag font weight"
+    },
+    "iconSize": {
+      "value": "12px",
+      "type": "dimension",
+      "description": "Icon size inside tag"
+    },
+    "background": {
+      "brand": {
+        "value": "{brand.primary}",
+        "type": "color",
+        "description": "Brand color tag (HC: saturated blue + white text, AAA-large)"
+      },
+      "accent": {
+        "value": "{intent.action.disabled}",
+        "type": "color",
+        "description": "Accent color tag (HC: visible mid-grey + black text, ~7:1)"
+      },
+      "neutral": {
+        "value": "{intent.action.disabled}",
+        "type": "color",
+        "description": "Neutral/muted tag (HC: visible mid-grey on white canvas)"
+      },
+      "success": {
+        "value": "{feedback.successEmphasis}",
+        "type": "color",
+        "description": "Success status tag (emphasis shade for white-text contrast)"
+      },
+      "warning": {
+        "value": "{feedback.warning}",
+        "type": "color",
+        "description": "Warning status tag (paired with dark text for contrast)"
+      },
+      "danger": {
+        "value": "{feedback.errorEmphasis}",
+        "type": "color",
+        "description": "Danger/error status tag (emphasis shade for white-text contrast)"
+      },
+      "info": {
+        "value": "{feedback.infoEmphasis}",
+        "type": "color",
+        "description": "Info status tag (emphasis shade for white-text contrast)"
+      }
+    },
+    "text": {
+      "brand": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Text on brand background"
+      },
+      "accent": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Text on accent background (dark for contrast)"
+      },
+      "neutral": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Text on neutral background"
+      },
+      "success": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Text on success background"
+      },
+      "warning": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Text on warning background (HC: white on #a85000, AAA-large)"
+      },
+      "danger": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Text on danger background"
+      },
+      "info": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Text on info background"
+      }
+    }
+  }
+}