jouw-stem__design-system 0.1.0

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

@@ -0,0 +1,281 @@
+{
+  "toast": {
+    "container": {
+      "gap": {
+        "value": "{stack.s}",
+        "type": "dimension",
+        "description": "Gap between stacked toasts"
+      },
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Container padding from screen edge"
+      },
+      "zIndex": {
+        "value": "1200",
+        "type": "number",
+        "description": "Toast container z-index"
+      },
+      "maxWidth": {
+        "value": "400px",
+        "type": "dimension",
+        "description": "Maximum toast width"
+      }
+    },
+    "background": {
+      "default": {
+        "value": "{surface.elevated}",
+        "type": "color",
+        "description": "Default toast background"
+      },
+      "success": {
+        "value": "{feedback.successSubtle}",
+        "type": "color",
+        "description": "Success toast background"
+      },
+      "info": {
+        "value": "{feedback.infoSubtle}",
+        "type": "color",
+        "description": "Info toast background"
+      },
+      "warning": {
+        "value": "{feedback.warningSubtle}",
+        "type": "color",
+        "description": "Warning toast background"
+      },
+      "error": {
+        "value": "{feedback.errorSubtle}",
+        "type": "color",
+        "description": "Error toast background"
+      }
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Toast border width"
+      },
+      "color": {
+        "default": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Default border color"
+        },
+        "success": {
+          "value": "{feedback.success}",
+          "type": "color",
+          "description": "Success border color"
+        },
+        "info": {
+          "value": "{feedback.info}",
+          "type": "color",
+          "description": "Info border color"
+        },
+        "warning": {
+          "value": "{feedback.warning}",
+          "type": "color",
+          "description": "Warning border color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Error border color"
+        }
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Toast border radius"
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Toast elevation shadow"
+    },
+    "padding": {
+      "x": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal padding"
+      },
+      "y": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Vertical padding"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "20px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Default icon color"
+        },
+        "success": {
+          "value": "{feedback.success}",
+          "type": "color",
+          "description": "Success icon color"
+        },
+        "info": {
+          "value": "{feedback.info}",
+          "type": "color",
+          "description": "Info icon color"
+        },
+        "warning": {
+          "value": "{feedback.warning}",
+          "type": "color",
+          "description": "Warning icon color"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Error icon color"
+        }
+      },
+      "gap": {
+        "value": "{inline.s}",
+        "type": "dimension",
+        "description": "Gap between icon and content"
+      }
+    },
+    "content": {
+      "gap": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Gap between summary and detail"
+      }
+    },
+    "summary": {
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Summary text color"
+        },
+        "success": {
+          "value": "{feedback.successEmphasis}",
+          "type": "color",
+          "description": "Success summary color"
+        },
+        "info": {
+          "value": "{feedback.infoEmphasis}",
+          "type": "color",
+          "description": "Info summary color"
+        },
+        "warning": {
+          "value": "{feedback.warningEmphasis}",
+          "type": "color",
+          "description": "Warning summary color"
+        },
+        "error": {
+          "value": "{feedback.errorEmphasis}",
+          "type": "color",
+          "description": "Error summary color"
+        }
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Summary font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "number",
+        "description": "Summary font weight"
+      }
+    },
+    "detail": {
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Detail text color"
+      },
+      "fontSize": {
+        "value": "13px",
+        "type": "dimension",
+        "description": "Detail font size"
+      }
+    },
+    "closeButton": {
+      "size": {
+        "value": "28px",
+        "type": "dimension",
+        "description": "Close button size"
+      },
+      "iconSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Close icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Close button color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Close button hover color"
+        }
+      },
+      "background": {
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Close button hover background"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Close button border radius"
+      }
+    },
+    "progress": {
+      "height": {
+        "value": "3px",
+        "type": "dimension",
+        "description": "Progress bar height"
+      },
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Progress bar track background"
+      },
+      "fill": {
+        "default": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Default progress fill"
+        },
+        "success": {
+          "value": "{feedback.success}",
+          "type": "color",
+          "description": "Success progress fill"
+        },
+        "info": {
+          "value": "{feedback.info}",
+          "type": "color",
+          "description": "Info progress fill"
+        },
+        "warning": {
+          "value": "{feedback.warning}",
+          "type": "color",
+          "description": "Warning progress fill"
+        },
+        "error": {
+          "value": "{feedback.error}",
+          "type": "color",
+          "description": "Error progress fill"
+        }
+      }
+    }
+  }
+}

package/src/components/Toast/Toast.vue

@@ -0,0 +1,183 @@
+<template>
+  <Teleport to="body">
+    <div
+      class="toast-container"
+      :class="`toast-container--${position}`"
+    >
+      <TransitionGroup name="toast-slide">
+        <div
+          v-for="toast in toasts"
+          :key="toast.id"
+          class="toast"
+          :class="[
+            `toast--${toast.severity || 'default'}`,
+            { 'toast--closable': toast.closable !== false }
+          ]"
+          role="alert"
+          aria-live="assertive"
+        >
+          <span v-if="showIcon" class="toast__icon">
+            <svg v-if="toast.severity === 'success'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
+            <svg v-else-if="toast.severity === 'info'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="12" y1="16" x2="12" y2="12" />
+              <line x1="12" y1="8" x2="12.01" y2="8" />
+            </svg>
+            <svg v-else-if="toast.severity === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+              <line x1="12" y1="9" x2="12" y2="13" />
+              <line x1="12" y1="17" x2="12.01" y2="17" />
+            </svg>
+            <svg v-else-if="toast.severity === 'error'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10" />
+              <line x1="15" y1="9" x2="9" y2="15" />
+              <line x1="9" y1="9" x2="15" y2="15" />
+            </svg>
+            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+              <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+            </svg>
+          </span>
+
+          <div class="toast__content">
+            <span v-if="toast.summary" class="toast__summary">{{ toast.summary }}</span>
+            <span v-if="toast.detail" class="toast__detail">{{ toast.detail }}</span>
+          </div>
+
+          <button
+            v-if="toast.closable !== false"
+            type="button"
+            class="toast__close"
+            aria-label="Close"
+            @click="removeToast(toast.id)"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+
+          <div
+            v-if="toast.life && showProgress"
+            class="toast__progress"
+          >
+            <div
+              class="toast__progress-bar"
+              :class="`toast__progress-bar--${toast.severity || 'default'}`"
+              :style="{ animationDuration: `${toast.life}ms` }"
+            />
+          </div>
+        </div>
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style src="./Toast.scss"></style>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { ToastService, type ToastMessageOptions } from "../../services/ToastService";
+
+export type ToastPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right"
+  | "center";
+
+interface Props {
+  position?: ToastPosition;
+  group?: string | null;
+  showIcon?: boolean;
+  showProgress?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: "top-right",
+  group: null,
+  showIcon: true,
+  showProgress: true,
+});
+
+interface InternalToast extends ToastMessageOptions {
+  id: number;
+}
+
+const toasts = ref<InternalToast[]>([]);
+let toastIdCounter = 0;
+
+function add(toast: ToastMessageOptions): number {
+  const id = ++toastIdCounter;
+  const newToast: InternalToast = {
+    id,
+    severity: "default",
+    closable: true,
+    life: 3000,
+    ...toast,
+  };
+
+  toasts.value.push(newToast);
+
+  if (newToast.life && newToast.life > 0) {
+    setTimeout(() => {
+      removeToast(id);
+    }, newToast.life);
+  }
+
+  return id;
+}
+
+function removeToast(id: number) {
+  const index = toasts.value.findIndex((t) => t.id === id);
+  if (index > -1) {
+    toasts.value.splice(index, 1);
+  }
+}
+
+function removeGroup(group: string) {
+  toasts.value = toasts.value.filter((t) => t.group !== group);
+}
+
+function removeAllGroups() {
+  toasts.value = [];
+}
+
+// Expose methods for external use (ref-based API)
+defineExpose({
+  add,
+  remove: removeToast,
+  removeGroup,
+  removeAllGroups,
+});
+
+// Subscribe to ToastService bus (imperative API via useToast())
+let unsubscribe: (() => void) | null = null;
+
+function matchesGroup(toastGroup: string | null | undefined) {
+  return (toastGroup ?? null) === (props.group ?? null);
+}
+
+onMounted(() => {
+  unsubscribe = ToastService._subscribe((event) => {
+    if (event.kind === "add" && matchesGroup(event.toast.group)) {
+      add(event.toast);
+    } else if (event.kind === "remove") {
+      removeToast(event.id);
+    } else if (event.kind === "remove-group" && event.group === props.group) {
+      removeGroup(event.group);
+    } else if (event.kind === "clear") {
+      removeAllGroups();
+    }
+  });
+});
+
+onUnmounted(() => {
+  if (unsubscribe) unsubscribe();
+});
+</script>

package/src/components/ToggleButton/ToggleButton.matrix.ts

@@ -0,0 +1,33 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.toggle-button',
+  baseQuery: { offLabel: 'Off', onLabel: 'On' },
+  // Two render modes (label-only vs label+icon). On/off is captured by
+  // the "checked" state which flips modelValue and swaps to on-label.
+  variants: [
+    {
+      name: 'Size',
+      subvariants: [
+        { name: 'sm', query: { size: 'sm' }, focusable: true },
+        { name: 'md', query: { size: 'md' }, focusable: true },
+        { name: 'lg', query: { size: 'lg' }, focusable: true }
+      ]
+    },
+    {
+      name: 'Content',
+      subvariants: [
+        { name: 'label-only',     query: {} },
+        { name: 'label-and-icon', query: { offIcon: 'pi pi-power-off', onIcon: 'pi pi-check' } }
+      ]
+    }
+  ],
+  states: [
+    { name: 'hover',            attr: 'hover' },
+    { name: 'focus-visible',    attr: 'focus-visible' },
+    { name: 'checked',          props: { modelValue: 'true' } },
+    { name: 'checked-hover',    attr: 'hover', props: { modelValue: 'true' } },
+    { name: 'disabled',         props: { isDisabled: 'true' } },
+    { name: 'disabled-checked', props: { isDisabled: 'true', modelValue: 'true' } }
+  ]
+}

package/src/components/ToggleButton/ToggleButton.scss

@@ -0,0 +1,102 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: toggle-button;
+
+.#{$c} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--toggleButton-gap, $toggleButton-gap);
+  border: var(--toggleButton-border-width, $toggleButton-border-width) solid var(--toggleButton-border-off-default, $toggleButton-border-off-default);
+  border-radius: var(--toggleButton-radius, $toggleButton-radius);
+  background-color: var(--toggleButton-background-off-default, $toggleButton-background-off-default);
+  color: var(--toggleButton-text-off-default, $toggleButton-text-off-default);
+  font-weight: var(--toggleButton-fontWeight, $toggleButton-fontWeight);
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--toggleButton-transition-duration, $toggleButton-transition-duration) ease;
+}
+
+.#{$c}__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.#{$c}__label {
+  white-space: nowrap;
+}
+
+// Hover state (off)
+.#{$c}:hover:not(.#{$c}--state-disabled):not(.#{$c}--state-checked),
+.#{$c}[data-state~="hover"]:not(.#{$c}--state-disabled):not(.#{$c}--state-checked) {
+  background-color: var(--toggleButton-background-off-hover, $toggleButton-background-off-hover);
+  border-color: var(--toggleButton-border-off-hover, $toggleButton-border-off-hover);
+}
+
+// Focus state
+.#{$c}:focus-visible,
+.#{$c}[data-state~="focus-visible"] {
+  outline: var(--toggleButton-focus-ringWidth, $toggleButton-focus-ringWidth) solid var(--toggleButton-focus-ringColor, $toggleButton-focus-ringColor);
+  outline-offset: var(--toggleButton-focus-ringOffset, $toggleButton-focus-ringOffset);
+}
+
+// Checked state
+.#{$c}--state-checked {
+  background-color: var(--toggleButton-background-on-default, $toggleButton-background-on-default);
+  border-color: var(--toggleButton-border-on-default, $toggleButton-border-on-default);
+  color: var(--toggleButton-text-on-default, $toggleButton-text-on-default);
+}
+
+// Hover state (on)
+.#{$c}--state-checked:hover:not(.#{$c}--state-disabled),
+.#{$c}--state-checked[data-state~="hover"]:not(.#{$c}--state-disabled) {
+  background-color: var(--toggleButton-background-on-hover, $toggleButton-background-on-hover);
+  border-color: var(--toggleButton-border-on-hover, $toggleButton-border-on-hover);
+}
+
+// Disabled state
+.#{$c}--state-disabled {
+  cursor: not-allowed;
+  background-color: var(--toggleButton-background-disabled, $toggleButton-background-disabled);
+  border-color: var(--toggleButton-border-disabled, $toggleButton-border-disabled);
+  color: var(--toggleButton-text-disabled, $toggleButton-text-disabled);
+}
+
+// Sizes
+.#{$c}--size-sm {
+  height: var(--toggleButton-height-sm, $toggleButton-height-sm);
+  padding: var(--toggleButton-padding-sm-y, $toggleButton-padding-sm-y) var(--toggleButton-padding-sm-x, $toggleButton-padding-sm-x);
+  font-size: var(--toggleButton-fontSize-sm, $toggleButton-fontSize-sm);
+
+  .#{$c}__icon {
+    width: var(--toggleButton-iconSize-sm, $toggleButton-iconSize-sm);
+    height: var(--toggleButton-iconSize-sm, $toggleButton-iconSize-sm);
+    font-size: var(--toggleButton-iconSize-sm, $toggleButton-iconSize-sm);
+  }
+}
+
+.#{$c}--size-md {
+  height: var(--toggleButton-height-md, $toggleButton-height-md);
+  padding: var(--toggleButton-padding-md-y, $toggleButton-padding-md-y) var(--toggleButton-padding-md-x, $toggleButton-padding-md-x);
+  font-size: var(--toggleButton-fontSize-md, $toggleButton-fontSize-md);
+
+  .#{$c}__icon {
+    width: var(--toggleButton-iconSize-md, $toggleButton-iconSize-md);
+    height: var(--toggleButton-iconSize-md, $toggleButton-iconSize-md);
+    font-size: var(--toggleButton-iconSize-md, $toggleButton-iconSize-md);
+  }
+}
+
+.#{$c}--size-lg {
+  height: var(--toggleButton-height-lg, $toggleButton-height-lg);
+  padding: var(--toggleButton-padding-lg-y, $toggleButton-padding-lg-y) var(--toggleButton-padding-lg-x, $toggleButton-padding-lg-x);
+  font-size: var(--toggleButton-fontSize-lg, $toggleButton-fontSize-lg);
+
+  .#{$c}__icon {
+    width: var(--toggleButton-iconSize-lg, $toggleButton-iconSize-lg);
+    height: var(--toggleButton-iconSize-lg, $toggleButton-iconSize-lg);
+    font-size: var(--toggleButton-iconSize-lg, $toggleButton-iconSize-lg);
+  }
+}