jouw-stem__design-system 0.1.0

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

@@ -0,0 +1,95 @@
+{
+  "toggleSwitch": {
+    "width": {
+      "sm": {
+        "value": "36px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "44px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "52px",
+        "type": "dimension"
+      }
+    },
+    "height": {
+      "sm": {
+        "value": "20px",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "24px",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "28px",
+        "type": "dimension"
+      }
+    },
+    "thumb": {
+      "size": {
+        "sm": {
+          "value": "16px",
+          "type": "dimension"
+        },
+        "md": {
+          "value": "20px",
+          "type": "dimension"
+        },
+        "lg": {
+          "value": "24px",
+          "type": "dimension"
+        }
+      },
+      "offset": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.0}",
+          "type": "color"
+        }
+      },
+      "shadow": {
+        "value": "0 1px 3px rgba(0, 0, 0, 0.2)",
+        "type": "shadow"
+      }
+    },
+    "track": {
+      "background": {
+        "off": {
+          "value": "{neutral.500}",
+          "type": "color",
+          "description": "Off state — mid-grey #737373, ~4.8:1 contrast vs #ffffff canvas (meets WCAG 1.4.11 Non-text Contrast 3:1)"
+        },
+        "on": {
+          "value": "{intent.action.default}",
+          "type": "color",
+          "description": "On state — primary action navy, ~14:1 vs white canvas (WCAG 1.4.11 ≥3:1, also semantically the right 'active' color)"
+        },
+        "disabled": {
+          "value": "{neutral.300}",
+          "type": "color",
+          "description": "Disabled state — light grey #d4d4d4. Disabled controls are exempt from 1.4.11 per WCAG; cursor + ARIA carry the affordance"
+        }
+      }
+    },
+    "focus": {
+      "ringWidth": {
+        "value": "2px",
+        "type": "dimension"
+      },
+      "ringColor": {
+        "value": "{orange.500}",
+        "type": "color"
+      },
+      "ringOffset": {
+        "value": "2px",
+        "type": "dimension"
+      }
+    }
+  }
+}

package/src/components/ToggleSwitch/ToggleSwitch.vue

@@ -0,0 +1,55 @@
+<template>
+  <label class="toggle-switch" :class="additionalClasses">
+    <input
+      type="checkbox"
+      class="toggle-switch__input"
+      :checked="modelValue"
+      :disabled="isDisabled"
+      :name="name"
+      role="switch"
+      :aria-checked="modelValue"
+      :aria-label="label ? undefined : (ariaLabel || 'Toggle')"
+      :data-state="(attrs['data-state'] as string) || null"
+      @change="onChange"
+    />
+    <span class="toggle-switch__track">
+      <span class="toggle-switch__thumb"></span>
+    </span>
+    <span v-if="label" class="toggle-switch__label">{{ label }}</span>
+  </label>
+</template>
+
+<style src="./ToggleSwitch.scss"></style>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+
+const attrs = useAttrs();
+
+interface Props {
+  modelValue?: boolean;
+  name?: string;
+  isDisabled?: boolean;
+  label?: string;
+  ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  isDisabled: false,
+});
+const emit = defineEmits<{
+  (e: "update:modelValue", ...args: unknown[]): void;
+  (e: "change", ...args: unknown[]): void;
+}>();
+const onChange = (event) => {
+  const checked = event.target.checked;
+  emit("update:modelValue", checked);
+  emit("change", { value: checked, originalEvent: event });
+};
+
+const additionalClasses = computed(() => [
+  props.isDisabled && "toggle-switch--state-disabled",
+  props.modelValue && "toggle-switch--state-checked",
+].filter(Boolean).join(" "));
+</script>

package/src/components/Toolbar/Toolbar.matrix.ts

@@ -0,0 +1,10 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.toolbar',
+  // Toolbar's left/center/right are named slots — the matrix only
+  // populates the default surface. Useful for chrome / surface-contrast
+  // checks; behavioural slot wiring is in the docs page.
+  defaultSlot: 'Toolbar content',
+  variants: []
+}

package/src/components/Toolbar/Toolbar.scss

@@ -0,0 +1,37 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: toolbar;
+
+.#{$c} {
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap, $toolbar-gap);
+  min-height: var(--toolbar-minHeight, $toolbar-minHeight);
+  padding: var(--toolbar-padding, $toolbar-padding);
+  background-color: var(--toolbar-background, $toolbar-background);
+  border: var(--toolbar-border-width, $toolbar-border-width) solid var(--toolbar-border-color, $toolbar-border-color);
+  border-radius: var(--toolbar-radius, $toolbar-radius);
+}
+
+.#{$c}__start {
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap, $toolbar-gap);
+  flex-shrink: 0;
+}
+
+.#{$c}__center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--toolbar-gap, $toolbar-gap);
+  flex: 1;
+}
+
+.#{$c}__end {
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap, $toolbar-gap);
+  flex-shrink: 0;
+  margin-left: auto;
+}

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

@@ -0,0 +1,41 @@
+{
+  "toolbar": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Toolbar background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Toolbar border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Toolbar border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Toolbar border radius"
+    },
+    "padding": {
+      "value": "{inset.m}",
+      "type": "dimension",
+      "description": "Toolbar inner padding"
+    },
+    "gap": {
+      "value": "{inline.m}",
+      "type": "dimension",
+      "description": "Gap between toolbar items"
+    },
+    "minHeight": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Minimum toolbar height"
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+{
+  "toolbar": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Toolbar background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Toolbar border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Toolbar border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Toolbar border radius"
+    },
+    "padding": {
+      "value": "{inset.m}",
+      "type": "dimension",
+      "description": "Toolbar inner padding"
+    },
+    "gap": {
+      "value": "{inline.m}",
+      "type": "dimension",
+      "description": "Gap between toolbar items"
+    },
+    "minHeight": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Minimum toolbar height"
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+{
+  "toolbar": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Toolbar background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Toolbar border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Toolbar border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Toolbar border radius"
+    },
+    "padding": {
+      "value": "{inset.m}",
+      "type": "dimension",
+      "description": "Toolbar inner padding"
+    },
+    "gap": {
+      "value": "{inline.m}",
+      "type": "dimension",
+      "description": "Gap between toolbar items"
+    },
+    "minHeight": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Minimum toolbar height"
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+{
+  "toolbar": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Toolbar background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Toolbar border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Toolbar border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Toolbar border radius"
+    },
+    "padding": {
+      "value": "{inset.m}",
+      "type": "dimension",
+      "description": "Toolbar inner padding"
+    },
+    "gap": {
+      "value": "{inline.m}",
+      "type": "dimension",
+      "description": "Gap between toolbar items"
+    },
+    "minHeight": {
+      "value": "48px",
+      "type": "dimension",
+      "description": "Minimum toolbar height"
+    }
+  }
+}

package/src/components/Toolbar/Toolbar.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="toolbar" role="toolbar">
+    <div v-if="$slots.start" class="toolbar__start">
+      <slot name="start" />
+    </div>
+    <div v-if="$slots.center" class="toolbar__center">
+      <slot name="center" />
+    </div>
+    <div v-if="$slots.end" class="toolbar__end">
+      <slot name="end" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style src="./Toolbar.scss"></style>
+
+<script setup lang="ts">
+// Toolbar is a simple layout component with slots
+// No props needed for basic functionality
+</script>

package/src/components/Tooltip/Tooltip.scss

@@ -0,0 +1,111 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: tooltip;
+
+.#{$c}-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.#{$c} {
+  position: fixed;
+  z-index: var(--tooltip-zIndex, $tooltip-zIndex);
+  padding: var(--tooltip-padding-y, $tooltip-padding-y) var(--tooltip-padding-x, $tooltip-padding-x);
+  background-color: var(--tooltip-background, $tooltip-background);
+  color: var(--tooltip-text-color, $tooltip-text-color);
+  font-size: var(--tooltip-text-fontSize, $tooltip-text-fontSize);
+  border-radius: var(--tooltip-radius, $tooltip-radius);
+  max-width: var(--tooltip-maxWidth, $tooltip-maxWidth);
+  line-height: 1.4;
+  word-wrap: break-word;
+  pointer-events: none;
+}
+
+.#{$c}__content {
+  display: block;
+}
+
+.#{$c}__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+// Arrow size calculation (using CSS calc with fallback)
+$arrow-size: var(--tooltip-arrow-size, $tooltip-arrow-size);
+
+// Position: Top (arrow points down)
+.#{$c}--top {
+  .#{$c}__arrow {
+    bottom: calc(-1 * #{$arrow-size});
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: #{$arrow-size} #{$arrow-size} 0 #{$arrow-size};
+    border-color: var(--tooltip-background, $tooltip-background) transparent transparent transparent;
+  }
+}
+
+// Position: Bottom (arrow points up)
+.#{$c}--bottom {
+  .#{$c}__arrow {
+    top: calc(-1 * #{$arrow-size});
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 #{$arrow-size} #{$arrow-size} #{$arrow-size};
+    border-color: transparent transparent var(--tooltip-background, $tooltip-background) transparent;
+  }
+}
+
+// Position: Left (arrow points right)
+.#{$c}--left {
+  .#{$c}__arrow {
+    right: calc(-1 * #{$arrow-size});
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: #{$arrow-size} 0 #{$arrow-size} #{$arrow-size};
+    border-color: transparent transparent transparent var(--tooltip-background, $tooltip-background);
+  }
+}
+
+// Position: Right (arrow points left)
+.#{$c}--right {
+  .#{$c}__arrow {
+    left: calc(-1 * #{$arrow-size});
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: #{$arrow-size} #{$arrow-size} #{$arrow-size} 0;
+    border-color: transparent var(--tooltip-background, $tooltip-background) transparent transparent;
+  }
+}
+
+// Transition animation
+.#{$c}-fade-enter-active,
+.#{$c}-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.#{$c}-fade-enter-from,
+.#{$c}-fade-leave-to {
+  opacity: 0;
+}
+
+.#{$c}-fade-enter-from.#{$c}--top,
+.#{$c}-fade-leave-to.#{$c}--top {
+  transform: translateY(4px);
+}
+
+.#{$c}-fade-enter-from.#{$c}--bottom,
+.#{$c}-fade-leave-to.#{$c}--bottom {
+  transform: translateY(-4px);
+}
+
+.#{$c}-fade-enter-from.#{$c}--left,
+.#{$c}-fade-leave-to.#{$c}--left {
+  transform: translateX(4px);
+}
+
+.#{$c}-fade-enter-from.#{$c}--right,
+.#{$c}-fade-leave-to.#{$c}--right {
+  transform: translateX(-4px);
+}

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

@@ -0,0 +1,60 @@
+{
+  "tooltip": {
+    "padding": {
+      "x": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "background": {
+      "value": "{surface.inverse}",
+      "type": "color",
+      "description": "Tooltip background color (dark)"
+    },
+    "text": {
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Tooltip text color (light on dark)"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension",
+        "description": "Tooltip font size"
+      }
+    },
+    "radius": {
+      "value": "{radius.subtle}",
+      "type": "dimension",
+      "description": "Border radius"
+    },
+    "arrow": {
+      "size": {
+        "value": "6px",
+        "type": "dimension",
+        "description": "Arrow/pointer size"
+      }
+    },
+    "offset": {
+      "value": "8px",
+      "type": "dimension",
+      "description": "Distance from trigger element"
+    },
+    "maxWidth": {
+      "value": "250px",
+      "type": "dimension",
+      "description": "Maximum width before wrapping"
+    },
+    "zIndex": {
+      "value": "1100",
+      "type": "number",
+      "description": "Z-index for stacking"
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+{
+  "tooltip": {
+    "padding": {
+      "x": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "background": {
+      "value": "{surface.inverse}",
+      "type": "color",
+      "description": "Tooltip background color (dark)"
+    },
+    "text": {
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Tooltip text color (light on dark)"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension",
+        "description": "Tooltip font size"
+      }
+    },
+    "radius": {
+      "value": "{radius.subtle}",
+      "type": "dimension",
+      "description": "Border radius"
+    },
+    "arrow": {
+      "size": {
+        "value": "6px",
+        "type": "dimension",
+        "description": "Arrow/pointer size"
+      }
+    },
+    "offset": {
+      "value": "8px",
+      "type": "dimension",
+      "description": "Distance from trigger element"
+    },
+    "maxWidth": {
+      "value": "250px",
+      "type": "dimension",
+      "description": "Maximum width before wrapping"
+    },
+    "zIndex": {
+      "value": "1100",
+      "type": "number",
+      "description": "Z-index for stacking"
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+{
+  "tooltip": {
+    "padding": {
+      "x": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.xs}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "background": {
+      "value": "{surface.inverse}",
+      "type": "color",
+      "description": "Tooltip background color (dark)"
+    },
+    "text": {
+      "color": {
+        "value": "{text.inverse}",
+        "type": "color",
+        "description": "Tooltip text color (light on dark)"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension",
+        "description": "Tooltip font size"
+      }
+    },
+    "radius": {
+      "value": "{radius.subtle}",
+      "type": "dimension",
+      "description": "Border radius"
+    },
+    "arrow": {
+      "size": {
+        "value": "6px",
+        "type": "dimension",
+        "description": "Arrow/pointer size"
+      }
+    },
+    "offset": {
+      "value": "8px",
+      "type": "dimension",
+      "description": "Distance from trigger element"
+    },
+    "maxWidth": {
+      "value": "250px",
+      "type": "dimension",
+      "description": "Maximum width before wrapping"
+    },
+    "zIndex": {
+      "value": "1100",
+      "type": "number",
+      "description": "Z-index for stacking"
+    }
+  }
+}