jouw-stem__design-system 0.1.0

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

@@ -0,0 +1,127 @@
+{
+  "accordion": {
+    "header": {
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Header padding"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.panel}",
+          "type": "color",
+          "description": "Header background"
+        },
+        "hover": {
+          "value": "rgba(255, 255, 255, 0.05)",
+          "type": "color",
+          "description": "Header hover background - semi-transparent for dark mode"
+        },
+        "active": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Header active/expanded background"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Header text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Header text color on hover"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Header text color when disabled"
+        }
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Content padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Content background"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Content text color"
+      }
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width"
+      },
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Border color"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Border radius"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Toggle icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Icon color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Icon color on hover"
+        },
+        "disabled": {
+          "value": "rgba(255, 255, 255, 0.25)",
+          "type": "color",
+          "description": "Icon color when disabled"
+        }
+      },
+      "rotation": {
+        "collapsed": {
+          "value": "0deg",
+          "type": "dimension",
+          "description": "Icon rotation when collapsed"
+        },
+        "expanded": {
+          "value": "180deg",
+          "type": "dimension",
+          "description": "Icon rotation when expanded"
+        }
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    },
+    "gap": {
+      "value": "0px",
+      "type": "dimension",
+      "description": "Gap between accordion tabs"
+    }
+  }
+}

package/src/components/Accordion/Accordion.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="accordion" :class="additionalClasses">
+    <slot></slot>
+  </div>
+</template>
+
+<style src="./Accordion.scss"></style>
+
+<script setup lang="ts">
+import { computed, provide, ref, watch } from "vue";
+
+const props = defineProps({
+  /**
+   * Index(es) of the active tab(s). Use array when multiple is true.
+   */
+  activeIndex: {
+    type: [Number, Array],
+    default: null,
+  },
+  /**
+   * Allow multiple tabs to be open simultaneously.
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  (e: "update:activeIndex", ...args: unknown[]): void;
+  (e: "tab-open", ...args: unknown[]): void;
+  (e: "tab-close", ...args: unknown[]): void;
+}>();
+// Internal state for active tabs
+const activeIndices = ref(
+  props.multiple
+    ? Array.isArray(props.activeIndex)
+      ? [...props.activeIndex]
+      : props.activeIndex !== null
+        ? [props.activeIndex]
+        : []
+    : props.activeIndex !== null
+      ? [props.activeIndex]
+      : []
+);
+
+// Watch for external changes to activeIndex
+watch(
+  () => props.activeIndex,
+  (newVal) => {
+    if (props.multiple) {
+      activeIndices.value = Array.isArray(newVal)
+        ? [...newVal]
+        : newVal !== null
+          ? [newVal]
+          : [];
+    } else {
+      activeIndices.value = newVal !== null ? [newVal] : [];
+    }
+  }
+);
+
+// Tab registration
+let tabCount = ref(0);
+
+const registerTab = () => {
+  const index = tabCount.value;
+  tabCount.value++;
+  return index;
+};
+
+const isTabActive = (index) => {
+  return activeIndices.value.includes(index);
+};
+
+const toggleTab = (index, disabled) => {
+  if (disabled) return;
+
+  const isActive = activeIndices.value.includes(index);
+
+  if (props.multiple) {
+    if (isActive) {
+      activeIndices.value = activeIndices.value.filter((i) => i !== index);
+      emit("tab-close", { index });
+    } else {
+      activeIndices.value = [...activeIndices.value, index];
+      emit("tab-open", { index });
+    }
+    emit("update:activeIndex", [...activeIndices.value]);
+  } else {
+    if (isActive) {
+      activeIndices.value = [];
+      emit("tab-close", { index });
+      emit("update:activeIndex", null);
+    } else {
+      const previousIndex = activeIndices.value[0];
+      if (previousIndex !== undefined) {
+        emit("tab-close", { index: previousIndex });
+      }
+      activeIndices.value = [index];
+      emit("tab-open", { index });
+      emit("update:activeIndex", index);
+    }
+  }
+};
+
+// Provide context to child AccordionTab components
+provide("accordion", {
+  registerTab,
+  isTabActive,
+  toggleTab,
+});
+
+const additionalClasses = computed(() =>
+  [props.multiple && "accordion--mode-multiple"].filter(Boolean).join(" ")
+);
+</script>

package/src/components/Accordion/AccordionTab.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="accordion__tab" :class="tabClasses">
+    <button
+      type="button"
+      class="accordion__header"
+      :disabled="isDisabled"
+      :aria-expanded="isActive"
+      :aria-controls="contentId"
+      @click="handleClick"
+    >
+      <span class="accordion__header-text">
+        <slot name="header">{{ header }}</slot>
+      </span>
+      <span class="accordion__icon">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </span>
+    </button>
+    <div
+      :id="contentId"
+      class="accordion__content-wrapper"
+      :aria-hidden="!isActive"
+    >
+      <div class="accordion__content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, ref } from "vue";
+
+const props = defineProps({
+  /**
+   * Header text for the accordion tab.
+   */
+  header: {
+    type: String,
+    default: "",
+  },
+  /**
+   * Whether the tab is disabled.
+   */
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const accordion = inject("accordion");
+const tabIndex = ref(-1);
+const contentId = computed(() => `accordion-content-${tabIndex.value}`);
+
+onMounted(() => {
+  if (accordion) {
+    tabIndex.value = accordion.registerTab();
+  }
+});
+
+const isActive = computed(() => {
+  if (!accordion || tabIndex.value === -1) return false;
+  return accordion.isTabActive(tabIndex.value);
+});
+
+const handleClick = () => {
+  if (accordion && !props.isDisabled) {
+    accordion.toggleTab(tabIndex.value, props.isDisabled);
+  }
+};
+
+const tabClasses = computed(() =>
+  [
+    isActive.value && "accordion__tab--state-active",
+    props.isDisabled && "accordion__tab--state-disabled",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/AppFooter/AppFooter.matrix.ts

@@ -0,0 +1,17 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.app-footer',
+  // Scan each status colour (the dot is a non-text indicator that must
+  // clear 3:1 against the bar) across all themes.
+  variants: [
+    {
+      name: 'Status',
+      subvariants: [
+        { name: 'success', query: { statusType: 'success', statusLabel: 'All systems operational' } },
+        { name: 'warning', query: { statusType: 'warning', statusLabel: 'Degraded performance' } },
+        { name: 'error', query: { statusType: 'error', statusLabel: 'Major outage' } },
+      ],
+    },
+  ],
+}

package/src/components/AppFooter/AppFooter.scss

@@ -0,0 +1,68 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: app-footer;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+  background-color: var(--appFooter-background, $appFooter-background);
+  color: var(--appFooter-text, $appFooter-text);
+  border-top: 1px solid var(--appFooter-border, $appFooter-border);
+}
+
+.#{$c}__inner {
+  display: flex;
+  align-items: center;
+  gap: var(--appFooter-gap, $appFooter-gap);
+  min-height: var(--appFooter-height, $appFooter-height);
+  padding: 0 var(--appFooter-paddingX, $appFooter-paddingX);
+  box-sizing: border-box;
+}
+
+.#{$c}__status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--appFooter-status-gap, $appFooter-status-gap);
+  font-size: 13px;
+  color: var(--appFooter-status-text, $appFooter-status-text);
+}
+
+.#{$c}__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+
+.#{$c}__dot--success { background-color: var(--appFooter-status-success, $appFooter-status-success); }
+.#{$c}__dot--warning { background-color: var(--appFooter-status-warning, $appFooter-status-warning); }
+.#{$c}__dot--error { background-color: var(--appFooter-status-error, $appFooter-status-error); }
+
+.#{$c}__version {
+  font-size: 13px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--appFooter-version-text, $appFooter-version-text);
+}
+
+.#{$c}__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--appFooter-gap, $appFooter-gap);
+  margin-left: auto;
+}
+
+.#{$c}__link {
+  color: var(--appFooter-link-text, $appFooter-link-text);
+  text-decoration: none;
+  font-size: 13px;
+}
+
+.#{$c}__link:hover {
+  color: var(--appFooter-link-hover, $appFooter-link-hover);
+  text-decoration: underline;
+}
+
+.#{$c}__link:focus-visible {
+  outline: 2px solid var(--appFooter-focusRing, $appFooter-focusRing);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,25 @@
+{
+  "appFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Status bar background (matches page; separated by the top rule)" },
+    "text": { "value": "{text.muted}", "type": "color", "description": "Status bar text" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the status bar" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "height": { "value": "40px", "type": "dimension", "description": "Status bar min-height" },
+    "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.m}", "type": "dimension", "description": "Gap between status-bar items" },
+    "status": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Status label colour" },
+      "gap": { "value": "{inline.2xs}", "type": "dimension", "description": "Gap between dot and label" },
+      "success": { "value": "{feedback.success}", "type": "color", "description": "Operational status dot" },
+      "warning": { "value": "{feedback.warning}", "type": "color", "description": "Degraded status dot" },
+      "error": { "value": "{feedback.error}", "type": "color", "description": "Outage status dot" }
+    },
+    "version": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Version stamp colour" }
+    },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Utility link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Utility link hover colour" }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+{
+  "appFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Status bar background (matches page; separated by the top rule)" },
+    "text": { "value": "{text.muted}", "type": "color", "description": "Status bar text" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the status bar" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "height": { "value": "40px", "type": "dimension", "description": "Status bar min-height" },
+    "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.m}", "type": "dimension", "description": "Gap between status-bar items" },
+    "status": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Status label colour" },
+      "gap": { "value": "{inline.2xs}", "type": "dimension", "description": "Gap between dot and label" },
+      "success": { "value": "{feedback.success}", "type": "color", "description": "Operational status dot" },
+      "warning": { "value": "{feedback.warning}", "type": "color", "description": "Degraded status dot" },
+      "error": { "value": "{feedback.error}", "type": "color", "description": "Outage status dot" }
+    },
+    "version": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Version stamp colour" }
+    },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Utility link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Utility link hover colour" }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+{
+  "appFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Status bar background (matches page; separated by the top rule)" },
+    "text": { "value": "{text.muted}", "type": "color", "description": "Status bar text" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the status bar" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "height": { "value": "40px", "type": "dimension", "description": "Status bar min-height" },
+    "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.m}", "type": "dimension", "description": "Gap between status-bar items" },
+    "status": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Status label colour" },
+      "gap": { "value": "{inline.2xs}", "type": "dimension", "description": "Gap between dot and label" },
+      "success": { "value": "{feedback.success}", "type": "color", "description": "Operational status dot" },
+      "warning": { "value": "{feedback.warning}", "type": "color", "description": "Degraded status dot" },
+      "error": { "value": "{feedback.error}", "type": "color", "description": "Outage status dot" }
+    },
+    "version": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Version stamp colour" }
+    },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Utility link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Utility link hover colour" }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+{
+  "appFooter": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Status bar background (matches page; separated by the top rule)" },
+    "text": { "value": "{text.muted}", "type": "color", "description": "Status bar text" },
+    "border": { "value": "{border.subtle}", "type": "color", "description": "Divider above the status bar" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "height": { "value": "40px", "type": "dimension", "description": "Status bar min-height" },
+    "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.m}", "type": "dimension", "description": "Gap between status-bar items" },
+    "status": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Status label colour" },
+      "gap": { "value": "{inline.2xs}", "type": "dimension", "description": "Gap between dot and label" },
+      "success": { "value": "{feedback.success}", "type": "color", "description": "Operational status dot" },
+      "warning": { "value": "{feedback.warning}", "type": "color", "description": "Degraded status dot" },
+      "error": { "value": "{feedback.error}", "type": "color", "description": "Outage status dot" }
+    },
+    "version": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Version stamp colour" }
+    },
+    "link": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Utility link colour" },
+      "hover": { "value": "{text.link}", "type": "color", "description": "Utility link hover colour" }
+    }
+  }
+}

package/src/components/AppFooter/AppFooter.vue

@@ -0,0 +1,56 @@
+<template>
+  <footer class="app-footer">
+    <div class="app-footer__inner">
+      <span v-if="showStatus" class="app-footer__status">
+        <span :class="['app-footer__dot', `app-footer__dot--${statusType}`]" aria-hidden="true"></span>
+        <span class="app-footer__status-label">{{ statusLabel }}</span>
+      </span>
+
+      <span v-if="version" class="app-footer__version">{{ version }}</span>
+
+      <nav v-if="links.length" class="app-footer__links" aria-label="Footer">
+        <a
+          v-for="l in links"
+          :key="l.label"
+          :href="l.href || '#'"
+          class="app-footer__link"
+        >{{ l.label }}</a>
+      </nav>
+    </div>
+  </footer>
+</template>
+
+<style src="./AppFooter.scss"></style>
+
+<script setup lang="ts">
+/**
+ * AppFooter — a thin status bar for web applications: a system-status
+ * indicator, a version stamp, and a handful of utility links. Optional by
+ * design; most app shells either show this sparingly or omit a footer.
+ */
+interface FooterLink { label: string; href?: string }
+
+withDefaults(
+  defineProps<{
+    /** Status indicator: drives the dot colour. */
+    statusType?: 'success' | 'warning' | 'error'
+    statusLabel?: string
+    showStatus?: boolean
+    /** Version / build stamp. Empty string hides it. */
+    version?: string
+    /** Utility links (support, shortcuts, docs…). */
+    links?: FooterLink[]
+  }>(),
+  {
+    statusType: 'success',
+    statusLabel: 'All systems operational',
+    showStatus: true,
+    version: 'v2.4.1',
+    links: () => [
+      { label: 'Support' },
+      { label: 'Shortcuts' },
+      { label: 'Docs' },
+    ],
+  }
+)
+</script>

package/src/components/AppHeader/AppHeader.matrix.ts

@@ -0,0 +1,17 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.app-header',
+  // The app top bar renders search + notification badge + avatar + crumbs
+  // from defaults; the axis worth scanning is whether the breadcrumb
+  // context row is present.
+  variants: [
+    {
+      name: 'Breadcrumb',
+      subvariants: [
+        { name: 'with-breadcrumb', query: { showBreadcrumb: 'true' } },
+        { name: 'without-breadcrumb', query: { showBreadcrumb: 'false' } },
+      ],
+    },
+  ],
+}