jouw-stem__design-system 0.1.0

package/src/components/Editor/Editor.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="editor" :class="additionalClasses">
+    <!-- Toolbar -->
+    <div class="editor__toolbar">
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--state-active': activeFormats.bold }"
+        title="Bold"
+        :disabled="isDisabled"
+        @click="execCommand('bold')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M4 3H9C10.6569 3 12 4.34315 12 6C12 7.65685 10.6569 9 9 9H4V3Z" stroke="currentColor" stroke-width="1.5" />
+          <path d="M4 9H10C11.6569 9 13 10.3431 13 12C13 13.6569 11.6569 15 10 15H4V9Z" stroke="currentColor" stroke-width="1.5" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--state-active': activeFormats.italic }"
+        title="Italic"
+        :disabled="isDisabled"
+        @click="execCommand('italic')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M10 3H14M6 13H10M12 3L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--state-active': activeFormats.underline }"
+        title="Underline"
+        :disabled="isDisabled"
+        @click="execCommand('underline')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M4 3V8C4 10.2091 5.79086 12 8 12C10.2091 12 12 10.2091 12 8V3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M3 15H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--state-active': activeFormats.strikeThrough }"
+        title="Strikethrough"
+        :disabled="isDisabled"
+        @click="execCommand('strikeThrough')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M3 8H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M11 4C11 4 10 3 8 3C6 3 4.5 4.5 4.5 6C4.5 7 5 7.5 6 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M5 12C5 12 6 13 8 13C10 13 11.5 11.5 11.5 10C11.5 9.5 11.3 9 11 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <span class="editor__separator" />
+
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--state-active': activeFormats.insertUnorderedList }"
+        title="Bullet List"
+        :disabled="isDisabled"
+        @click="execCommand('insertUnorderedList')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <circle cx="3" cy="4" r="1" fill="currentColor" />
+          <circle cx="3" cy="8" r="1" fill="currentColor" />
+          <circle cx="3" cy="12" r="1" fill="currentColor" />
+          <path d="M6 4H14M6 8H14M6 12H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <button
+        type="button"
+        class="editor__button"
+        :class="{ 'editor__button--state-active': activeFormats.insertOrderedList }"
+        title="Numbered List"
+        :disabled="isDisabled"
+        @click="execCommand('insertOrderedList')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <text x="2" y="5" fill="currentColor" font-size="5" font-weight="500">1.</text>
+          <text x="2" y="9" fill="currentColor" font-size="5" font-weight="500">2.</text>
+          <text x="2" y="13" fill="currentColor" font-size="5" font-weight="500">3.</text>
+          <path d="M6 4H14M6 8H14M6 12H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <span class="editor__separator" />
+
+      <button
+        type="button"
+        class="editor__button"
+        title="Link"
+        :disabled="isDisabled"
+        @click="insertLink"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M6.5 9.5L9.5 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M9 10.5L10.5 9C11.8807 7.61929 11.8807 5.38071 10.5 4L10 3.5C8.61929 2.11929 6.38071 2.11929 5 3.5L3.5 5C2.11929 6.38071 2.11929 8.61929 3.5 10L4 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+          <path d="M7 5.5L5.5 7C4.11929 8.38071 4.11929 10.6193 5.5 12L6 12.5C7.38071 13.8807 9.61929 13.8807 11 12.5L12.5 11C13.8807 9.61929 13.8807 7.38071 12.5 6L12 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+
+      <span class="editor__separator" />
+
+      <button
+        type="button"
+        class="editor__button"
+        title="Clear Formatting"
+        :disabled="isDisabled"
+        @click="execCommand('removeFormat')"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path d="M3 3L13 13M13 3L3 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Content area -->
+    <div
+      ref="contentRef"
+      class="editor__content"
+      contenteditable
+      :data-placeholder="placeholder"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+      @keyup="updateActiveFormats"
+      @mouseup="updateActiveFormats"
+    />
+  </div>
+</template>
+
+<style src="./Editor.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, nextTick } from "vue";
+
+interface Props {
+  modelValue?: string;
+  placeholder?: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: "",
+  placeholder: "Enter text...",
+  isDisabled: false,
+  isInvalid: false,
+});
+const emit = defineEmits<{
+  (e: "update:modelValue", ...args: unknown[]): void;
+  (e: "focus", ...args: unknown[]): void;
+  (e: "blur", ...args: unknown[]): void;
+  (e: "change", ...args: unknown[]): void;
+}>();
+const contentRef = ref(null);
+const isFocused = ref(false);
+const activeFormats = ref({
+  bold: false,
+  italic: false,
+  underline: false,
+  strikeThrough: false,
+  insertUnorderedList: false,
+  insertOrderedList: false,
+});
+
+const execCommand = (command, value = null) => {
+  if (props.isDisabled) return;
+  contentRef.value?.focus();
+  document.execCommand(command, false, value);
+  updateActiveFormats();
+  emitValue();
+};
+
+const insertLink = () => {
+  if (props.isDisabled) return;
+  const url = prompt("Enter URL:");
+  if (url) {
+    execCommand("createLink", url);
+  }
+};
+
+const updateActiveFormats = () => {
+  activeFormats.value = {
+    bold: document.queryCommandState("bold"),
+    italic: document.queryCommandState("italic"),
+    underline: document.queryCommandState("underline"),
+    strikeThrough: document.queryCommandState("strikeThrough"),
+    insertUnorderedList: document.queryCommandState("insertUnorderedList"),
+    insertOrderedList: document.queryCommandState("insertOrderedList"),
+  };
+};
+
+const onInput = () => {
+  emitValue();
+};
+
+const emitValue = () => {
+  const html = contentRef.value?.innerHTML || "";
+  emit("update:modelValue", html);
+  emit("change", { value: html });
+};
+
+const onFocus = (event) => {
+  isFocused.value = true;
+  emit("focus", { originalEvent: event });
+};
+
+const onBlur = (event) => {
+  isFocused.value = false;
+  emit("blur", { originalEvent: event });
+};
+
+// Sync content with modelValue
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (contentRef.value && contentRef.value.innerHTML !== newValue) {
+      contentRef.value.innerHTML = newValue;
+    }
+  }
+);
+
+onMounted(() => {
+  if (contentRef.value && props.modelValue) {
+    contentRef.value.innerHTML = props.modelValue;
+  }
+});
+
+const additionalClasses = computed(() =>
+  [
+    isFocused.value && "editor--state-focused",
+    props.isDisabled && "editor--state-disabled",
+    props.isInvalid && "editor--state-invalid",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+defineExpose({
+  focus: () => contentRef.value?.focus(),
+  blur: () => contentRef.value?.blur(),
+  getContent: () => contentRef.value?.innerHTML || "",
+  setContent: (html) => {
+    if (contentRef.value) {
+      contentRef.value.innerHTML = html;
+      emitValue();
+    }
+  },
+});
+</script>

package/src/components/FieldSet/FieldSet.matrix.ts

@@ -0,0 +1,17 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.field-set',
+  defaultSlot: 'Field-set content goes here. Use it to group related form fields.',
+  baseQuery: { legend: 'Profile details' },
+  variants: [
+    {
+      name: 'Mode',
+      subvariants: [
+        { name: 'static',    query: { toggleable: 'false' } },
+        { name: 'expanded',  query: { toggleable: 'true', collapsed: 'false' } },
+        { name: 'collapsed', query: { toggleable: 'true', collapsed: 'true' } }
+      ]
+    }
+  ]
+}

package/src/components/FieldSet/FieldSet.scss

@@ -0,0 +1,99 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: field-set;
+
+.#{$c} {
+  margin: 0;
+  padding: 0;
+  background: var(--field-set-background, $field-set-background);
+  border: var(--field-set-border-width, $field-set-border-width) solid var(--field-set-border-color, $field-set-border-color);
+  border-radius: var(--field-set-border-radius, $field-set-border-radius);
+}
+
+.#{$c}__legend {
+  padding: 0;
+  margin-left: var(--field-set-legend-padding-x, $field-set-legend-padding-x);
+}
+
+.#{$c}__legend-text,
+.#{$c}__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--field-set-toggle-gap, $field-set-toggle-gap);
+  padding: var(--field-set-legend-padding-y, $field-set-legend-padding-y) var(--field-set-legend-padding-x, $field-set-legend-padding-x);
+  background: var(--field-set-legend-background, $field-set-legend-background);
+  color: var(--field-set-legend-color, $field-set-legend-color);
+  font-size: var(--field-set-legend-fontSize, $field-set-legend-fontSize);
+  font-weight: var(--field-set-legend-fontWeight, $field-set-legend-fontWeight);
+  border: var(--field-set-legend-border-width, $field-set-legend-border-width) solid var(--field-set-legend-border-color, $field-set-legend-border-color);
+  border-radius: var(--field-set-legend-border-radius, $field-set-legend-border-radius);
+}
+
+.#{$c}__toggle {
+  cursor: pointer;
+  font-family: inherit;
+  transition: color var(--field-set-transition-duration, $field-set-transition-duration) ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    .#{$c}__toggle-icon {
+      color: var(--field-set-toggle-icon-color-hover, $field-set-toggle-icon-color-hover);
+    }
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: 2px solid var(--field-set-border-color, $field-set-border-color);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__toggle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--field-set-toggle-icon-size, $field-set-toggle-icon-size);
+  height: var(--field-set-toggle-icon-size, $field-set-toggle-icon-size);
+  color: var(--field-set-toggle-icon-color-default, $field-set-toggle-icon-color-default);
+  transition: transform var(--field-set-transition-duration, $field-set-transition-duration) ease,
+              color var(--field-set-transition-duration, $field-set-transition-duration) ease;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__content-wrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--field-set-transition-duration, $field-set-transition-duration) ease;
+}
+
+.#{$c}__content {
+  padding: var(--field-set-padding, $field-set-padding);
+  overflow: hidden;
+}
+
+// Toggleable variant
+.#{$c}--mode-toggleable {
+  .#{$c}__legend {
+    margin-bottom: 0;
+  }
+}
+
+// Collapsed state
+.#{$c}--state-collapsed {
+  .#{$c}__toggle-icon {
+    transform: rotate(-90deg);
+  }
+
+  .#{$c}__content-wrapper {
+    grid-template-rows: 0fr;
+  }
+
+  .#{$c}__content {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}

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

@@ -0,0 +1,115 @@
+{
+  "field-set": {
+    "padding": {
+      "value": "{inset.l}",
+      "type": "dimension",
+      "description": "Content padding"
+    },
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color",
+      "description": "FieldSet background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Border radius"
+      }
+    },
+    "legend": {
+      "padding": {
+        "x": {
+          "value": "{inset.m}",
+          "type": "dimension",
+          "description": "Legend horizontal padding"
+        },
+        "y": {
+          "value": "{inset.s}",
+          "type": "dimension",
+          "description": "Legend vertical padding"
+        }
+      },
+      "background": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Legend background"
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Legend text color"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Legend font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Legend font weight"
+      },
+      "border": {
+        "color": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Legend border color"
+        },
+        "width": {
+          "value": "1px",
+          "type": "dimension",
+          "description": "Legend border width"
+        },
+        "radius": {
+          "value": "{radius.default}",
+          "type": "dimension",
+          "description": "Legend border radius"
+        }
+      }
+    },
+    "toggle": {
+      "icon": {
+        "size": {
+          "value": "16px",
+          "type": "dimension",
+          "description": "Toggle icon size"
+        },
+        "color": {
+          "default": {
+            "value": "{text.muted}",
+            "type": "color",
+            "description": "Toggle icon color"
+          },
+          "hover": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Toggle icon hover color"
+          }
+        }
+      },
+      "gap": {
+        "value": "{inline.s}",
+        "type": "dimension",
+        "description": "Gap between legend text and toggle icon"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Collapse/expand transition duration"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+{
+  "field-set": {
+    "padding": {
+      "value": "{inset.l}",
+      "type": "dimension",
+      "description": "Content padding"
+    },
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color",
+      "description": "FieldSet background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Border radius"
+      }
+    },
+    "legend": {
+      "padding": {
+        "x": {
+          "value": "{inset.m}",
+          "type": "dimension",
+          "description": "Legend horizontal padding"
+        },
+        "y": {
+          "value": "{inset.s}",
+          "type": "dimension",
+          "description": "Legend vertical padding"
+        }
+      },
+      "background": {
+        "value": "{surface.panel}",
+        "type": "color",
+        "description": "Legend background"
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Legend text color"
+      },
+      "fontSize": {
+        "value": "14px",
+        "type": "dimension",
+        "description": "Legend font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Legend font weight"
+      },
+      "border": {
+        "color": {
+          "value": "{border.subtle}",
+          "type": "color",
+          "description": "Legend border color"
+        },
+        "width": {
+          "value": "1px",
+          "type": "dimension",
+          "description": "Legend border width"
+        },
+        "radius": {
+          "value": "{radius.default}",
+          "type": "dimension",
+          "description": "Legend border radius"
+        }
+      }
+    },
+    "toggle": {
+      "icon": {
+        "size": {
+          "value": "16px",
+          "type": "dimension",
+          "description": "Toggle icon size"
+        },
+        "color": {
+          "default": {
+            "value": "{text.muted}",
+            "type": "color",
+            "description": "Toggle icon color"
+          },
+          "hover": {
+            "value": "{text.default}",
+            "type": "color",
+            "description": "Toggle icon hover color"
+          }
+        }
+      },
+      "gap": {
+        "value": "{inline.s}",
+        "type": "dimension",
+        "description": "Gap between legend text and toggle icon"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Collapse/expand transition duration"
+      }
+    }
+  }
+}