jouw-stem__design-system 0.1.0

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

@@ -0,0 +1,74 @@
+{
+  "image-compare": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Container 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"
+      }
+    },
+    "handle": {
+      "width": {
+        "value": "4px",
+        "type": "dimension",
+        "description": "Handle divider width"
+      },
+      "color": {
+        "default": {
+          "value": "{surface.canvas}",
+          "type": "color",
+          "description": "Handle color"
+        },
+        "hover": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Handle hover color"
+        }
+      },
+      "shadow": {
+        "value": "{shadow.m}",
+        "type": "shadow",
+        "description": "Handle shadow"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Handle icon container size"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Handle icon color"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Handle icon background"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Handle state transition duration"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+{
+  "image-compare": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Container 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"
+      }
+    },
+    "handle": {
+      "width": {
+        "value": "4px",
+        "type": "dimension",
+        "description": "Handle divider width"
+      },
+      "color": {
+        "default": {
+          "value": "{surface.canvas}",
+          "type": "color",
+          "description": "Handle color"
+        },
+        "hover": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Handle hover color"
+        }
+      },
+      "shadow": {
+        "value": "{shadow.m}",
+        "type": "shadow",
+        "description": "Handle shadow"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Handle icon container size"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Handle icon color"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Handle icon background"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Handle state transition duration"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,74 @@
+{
+  "image-compare": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Container 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"
+      }
+    },
+    "handle": {
+      "width": {
+        "value": "4px",
+        "type": "dimension",
+        "description": "Handle divider width"
+      },
+      "color": {
+        "default": {
+          "value": "{neutral.0}",
+          "type": "color",
+          "description": "Handle color"
+        },
+        "hover": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Handle hover color"
+        }
+      },
+      "shadow": {
+        "value": "{shadow.m}",
+        "type": "shadow",
+        "description": "Handle shadow"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Handle icon container size"
+      },
+      "color": {
+        "value": "{neutral.700}",
+        "type": "color",
+        "description": "Handle icon color"
+      },
+      "background": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Handle icon background"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Handle state transition duration"
+      }
+    }
+  }
+}

package/src/components/ImageCompare/ImageCompare.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    class="image-compare"
+    :class="additionalClasses"
+    :aria-label="ariaLabel"
+    :aria-labelledby="ariaLabelledBy"
+  >
+    <div class="image-compare__before" :style="beforeStyle">
+      <slot name="before" />
+    </div>
+    <div class="image-compare__after">
+      <slot name="after" />
+    </div>
+    <div class="image-compare__handle" :style="handleStyle">
+      <div class="image-compare__handle-line"></div>
+      <div class="image-compare__handle-icon">
+        <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
+          <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
+          <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" transform="rotate(180 12 12)"/>
+        </svg>
+      </div>
+    </div>
+    <input
+      type="range"
+      class="image-compare__slider"
+      min="0"
+      max="100"
+      :value="position"
+      aria-label="Compare position"
+      @input="onSlide"
+    />
+  </div>
+</template>
+
+<style src="./ImageCompare.scss"></style>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { clipPath, handleOffset, parseSliderValue } from "./imageCompareMath";
+
+defineOptions({
+  name: "ImageCompare"
+});
+
+interface Props {
+  initialPosition?: number;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialPosition: 50,
+  ariaLabel: "Image comparison slider",
+  ariaLabelledBy: null,
+});
+const emit = defineEmits<{
+  (e: "change", ...args: unknown[]): void;
+}>();
+const position = ref(props.initialPosition);
+
+const onSlide = (event) => {
+  const parsed = parseSliderValue(event.target.value);
+  if (parsed == null) return;
+  position.value = parsed;
+  emit("change", position.value);
+};
+
+const beforeStyle = computed(() => ({
+  clipPath: clipPath(position.value)
+}));
+
+const handleStyle = computed(() => ({
+  left: handleOffset(position.value)
+}));
+
+const additionalClasses = computed(() => [].filter(Boolean).join(" "));
+</script>

package/src/components/ImageCompare/imageCompareMath.ts

@@ -0,0 +1,51 @@
+/**
+ * Pure math helpers for ImageCompare.
+ *
+ * The component template binds the slider position into a CSS clip-path
+ * (`inset(0 X% 0 0)`) and the handle's `left: X%`. Putting the arithmetic
+ * here keeps the boundaries (0 / 100, fractional values, out-of-range)
+ * testable without mounting.
+ */
+
+/**
+ * Clamp a slider position to the [0, 100] range.
+ * Native `<input type="range" min="0" max="100">` already clamps the
+ * value at the DOM level, but the helper keeps callers honest if they
+ * ever pass a programmatic value.
+ */
+export function clampPosition(value: number): number {
+  if (Number.isNaN(value)) return 0
+  if (value < 0) return 0
+  if (value > 100) return 100
+  return value
+}
+
+/**
+ * Build the CSS clip-path string that hides the right-hand portion of
+ * the "before" layer. At 0 % the layer is fully hidden (inset right of
+ * 100 %); at 100 % it is fully visible (inset right of 0 %).
+ */
+export function clipPath(position: number): string {
+  const p = clampPosition(position)
+  return `inset(0 ${100 - p}% 0 0)`
+}
+
+/**
+ * The CSS `left` value for the handle. Mirrors the slider's percentage
+ * one-to-one — the handle visually centres on the divide line.
+ */
+export function handleOffset(position: number): string {
+  return `${clampPosition(position)}%`
+}
+
+/**
+ * Parse the raw `event.target.value` (always a string from a
+ * `<input type="range">`) into a finite number suitable for emitting
+ * back through `update:modelValue` / `change`. Returns `null` when the
+ * input cannot be parsed — callers should not emit on null.
+ */
+export function parseSliderValue(raw: string): number | null {
+  if (raw === '' || raw == null) return null
+  const n = Number(raw)
+  return Number.isFinite(n) ? n : null
+}

package/src/components/InPlace/InPlace.matrix.ts

@@ -0,0 +1,17 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.in-place',
+  // InPlace toggles between display and content slots. defaultSlot
+  // is used by the display surface.
+  defaultSlot: 'Click to edit',
+  variants: [
+    {
+      name: 'State',
+      subvariants: [
+        { name: 'display', query: { active: 'false' } },
+        { name: 'active',  query: { active: 'true' } }
+      ]
+    }
+  ]
+}

package/src/components/InPlace/InPlace.scss

@@ -0,0 +1,103 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: in-place;
+
+.#{$c} {
+  display: inline-block;
+}
+
+// Display mode
+.#{$c}__display {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--in-place-display-paddingY, $in-place-display-paddingY) var(--in-place-display-paddingX, $in-place-display-paddingX);
+  background-color: var(--in-place-display-background-default, $in-place-display-background-default);
+  color: var(--in-place-display-color-default, $in-place-display-color-default);
+  border-radius: var(--in-place-display-border-radius, $in-place-display-border-radius);
+  cursor: pointer;
+  transition: background-color var(--in-place-transition-duration, $in-place-transition-duration) ease,
+              color var(--in-place-transition-duration, $in-place-transition-duration) ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--in-place-display-background-hover, $in-place-display-background-hover);
+    color: var(--in-place-display-color-hover, $in-place-display-color-hover);
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    color: var(--in-place-display-color-disabled, $in-place-display-color-disabled);
+
+    &:hover,
+    &[data-state~="hover"] {
+      background-color: var(--in-place-display-background-default, $in-place-display-background-default);
+    }
+  }
+}
+
+.#{$c}__display-text {
+  opacity: 0.7;
+  font-style: italic;
+}
+
+// Content mode
+.#{$c}__content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--in-place-closeButton-gap, $in-place-closeButton-gap);
+}
+
+// Close button
+.#{$c}__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--in-place-closeButton-size, $in-place-closeButton-size);
+  height: var(--in-place-closeButton-size, $in-place-closeButton-size);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--in-place-closeButton-radius, $in-place-closeButton-radius);
+  color: var(--in-place-closeButton-color-default, $in-place-closeButton-color-default);
+  cursor: pointer;
+  transition: background-color var(--in-place-transition-duration, $in-place-transition-duration) ease,
+              color var(--in-place-transition-duration, $in-place-transition-duration) ease;
+  flex-shrink: 0;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--in-place-closeButton-background-hover, $in-place-closeButton-background-hover);
+    color: var(--in-place-closeButton-color-hover, $in-place-closeButton-color-hover);
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__close-icon {
+  width: var(--in-place-closeButton-iconSize, $in-place-closeButton-iconSize);
+  height: var(--in-place-closeButton-iconSize, $in-place-closeButton-iconSize);
+}
+
+// Disabled state
+.#{$c}--state-disabled {
+  .#{$c}__display {
+    cursor: not-allowed;
+    color: var(--in-place-display-color-disabled, $in-place-display-color-disabled);
+
+    &:hover,
+    &[data-state~="hover"] {
+      background-color: var(--in-place-display-background-default, $in-place-display-background-default);
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+{
+  "in-place": {
+    "display": {
+      "paddingX": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Display element horizontal padding"
+      },
+      "paddingY": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Display element vertical padding"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Display background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Display hover background"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Display text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Display hover text color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Display disabled text color"
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "{radius.default}",
+          "type": "dimension",
+          "description": "Display border radius"
+        }
+      }
+    },
+    "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.default}",
+        "type": "dimension",
+        "description": "Close button border radius"
+      },
+      "gap": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Gap between content and close button"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "State transition duration"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+{
+  "in-place": {
+    "display": {
+      "paddingX": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Display element horizontal padding"
+      },
+      "paddingY": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Display element vertical padding"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Display background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Display hover background"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Display text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Display hover text color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Display disabled text color"
+        }
+      },
+      "border": {
+        "radius": {
+          "value": "{radius.default}",
+          "type": "dimension",
+          "description": "Display border radius"
+        }
+      }
+    },
+    "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.default}",
+        "type": "dimension",
+        "description": "Close button border radius"
+      },
+      "gap": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Gap between content and close button"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "State transition duration"
+      }
+    }
+  }
+}