jouw-stem__design-system 0.1.0

package/src/components/Divider/Divider.scss

@@ -0,0 +1,147 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: divider;
+
+// Base horizontal divider
+.#{$c} {
+  display: flex;
+  align-items: center;
+  margin: var(--divider-margin-horizontal, $divider-margin-horizontal) 0;
+  border: none;
+  position: relative;
+  width: 100%;
+
+  // The line itself (using ::before for horizontal)
+  &::before {
+    content: '';
+    flex: 1;
+    border-top-width: var(--divider-border-width, $divider-border-width);
+    border-top-style: solid;
+    border-top-color: var(--divider-border-color, $divider-border-color);
+  }
+}
+
+// Vertical layout
+.#{$c}--vertical {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+  margin: 0 var(--divider-margin-vertical, $divider-margin-vertical);
+  min-height: 100%;
+  width: auto;
+
+  &::before {
+    border-top: none;
+    border-left-width: var(--divider-border-width, $divider-border-width);
+    border-left-style: solid;
+    border-left-color: var(--divider-border-color, $divider-border-color);
+    height: 100%;
+    min-height: inherit;
+  }
+}
+
+// Border style variants
+.#{$c}--dashed {
+  &::before,
+  &::after {
+    border-style: dashed;
+  }
+}
+
+.#{$c}--dotted {
+  &::before,
+  &::after {
+    border-style: dotted;
+  }
+}
+
+// Content support
+.#{$c}__content {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--divider-content-gap, $divider-content-gap);
+  color: var(--divider-content-color, $divider-content-color);
+  background: var(--divider-content-background, $divider-content-background);
+  font-size: 0.875rem;
+  white-space: nowrap;
+}
+
+// When there's content, add the second line
+.#{$c}--with-content {
+  &::after {
+    content: '';
+    flex: 1;
+    border-top-width: var(--divider-border-width, $divider-border-width);
+    border-top-style: solid;
+    border-top-color: var(--divider-border-color, $divider-border-color);
+  }
+
+  &.#{$c}--dashed::after {
+    border-top-style: dashed;
+  }
+
+  &.#{$c}--dotted::after {
+    border-top-style: dotted;
+  }
+}
+
+// Alignment modifiers (for content)
+.#{$c}--align-left {
+  &::before {
+    flex: 0 0 5%;
+  }
+  &::after {
+    flex: 1;
+  }
+}
+
+.#{$c}--align-right {
+  &::before {
+    flex: 1;
+  }
+  &::after {
+    flex: 0 0 5%;
+  }
+}
+
+.#{$c}--align-center {
+  &::before,
+  &::after {
+    flex: 1;
+  }
+}
+
+// Vertical with content
+.#{$c}--vertical.#{$c}--with-content {
+  .#{$c}__content {
+    padding: var(--divider-content-gap, $divider-content-gap) 0;
+  }
+
+  &::after {
+    border-top: none;
+    border-left-width: var(--divider-border-width, $divider-border-width);
+    border-left-style: solid;
+    border-left-color: var(--divider-border-color, $divider-border-color);
+    height: auto;
+  }
+}
+
+// Vertical alignment (top/bottom only apply to vertical)
+.#{$c}--vertical.#{$c}--align-top {
+  &::before {
+    flex: 0 0 5%;
+  }
+  &::after {
+    flex: 1;
+  }
+}
+
+.#{$c}--vertical.#{$c}--align-bottom {
+  &::before {
+    flex: 1;
+  }
+  &::after {
+    flex: 0 0 5%;
+  }
+}

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

@@ -0,0 +1,45 @@
+{
+  "divider": {
+    "border": {
+      "color": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Default divider border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Default divider border width"
+      }
+    },
+    "margin": {
+      "horizontal": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Vertical margin for horizontal dividers"
+      },
+      "vertical": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal margin for vertical dividers"
+      }
+    },
+    "content": {
+      "gap": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Gap between divider line and content"
+      },
+      "color": {
+        "value": "{neutral.500}",
+        "type": "color",
+        "description": "Color of content text within divider"
+      },
+      "background": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Background behind content to cover the line"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+{
+  "divider": {
+    "border": {
+      "color": {
+        "value": "{border.default}",
+        "type": "color",
+        "description": "Default divider border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Default divider border width"
+      }
+    },
+    "margin": {
+      "horizontal": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Vertical margin for horizontal dividers"
+      },
+      "vertical": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal margin for vertical dividers"
+      }
+    },
+    "content": {
+      "gap": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Gap between divider line and content"
+      },
+      "color": {
+        "value": "{border.default}",
+        "type": "color",
+        "description": "Color of content text within divider"
+      },
+      "background": {
+        "value": "{border.default}",
+        "type": "color",
+        "description": "Background behind content to cover the line"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+{
+  "divider": {
+    "border": {
+      "color": {
+        "value": "{border.default}",
+        "type": "color",
+        "description": "Default divider border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Default divider border width"
+      }
+    },
+    "margin": {
+      "horizontal": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Vertical margin for horizontal dividers"
+      },
+      "vertical": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal margin for vertical dividers"
+      }
+    },
+    "content": {
+      "gap": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Gap between divider line and content"
+      },
+      "color": {
+        "value": "{border.default}",
+        "type": "color",
+        "description": "Color of content text within divider"
+      },
+      "background": {
+        "value": "{border.default}",
+        "type": "color",
+        "description": "Background behind content to cover the line"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+{
+  "divider": {
+    "border": {
+      "color": {
+        "value": "{neutral.200}",
+        "type": "color",
+        "description": "Default divider border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Default divider border width"
+      }
+    },
+    "margin": {
+      "horizontal": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Vertical margin for horizontal dividers"
+      },
+      "vertical": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Horizontal margin for vertical dividers"
+      }
+    },
+    "content": {
+      "gap": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Gap between divider line and content"
+      },
+      "color": {
+        "value": "{neutral.500}",
+        "type": "color",
+        "description": "Color of content text within divider"
+      },
+      "background": {
+        "value": "{neutral.0}",
+        "type": "color",
+        "description": "Background behind content to cover the line"
+      }
+    }
+  }
+}

package/src/components/Divider/Divider.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="divider"
+    :class="additionalClasses"
+    role="separator"
+    :aria-orientation="layout"
+  >
+    <span v-if="$slots.default" class="divider__content">
+      <slot />
+    </span>
+  </div>
+</template>
+
+<style src="./Divider.scss"></style>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+
+interface Props {
+  layout?: string;
+  align?: string;
+  type?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: "horizontal",
+  align: "center",
+  type: "solid",
+});
+const slots = useSlots();
+
+const additionalClasses = computed(() => {
+  const classes = [];
+
+  if (props.layout === "vertical") {
+    classes.push("divider--vertical");
+  }
+
+  if (props.type !== "solid") {
+    classes.push(`divider--${props.type}`);
+  }
+
+  // Only add alignment classes when there's content
+  if (slots.default) {
+    classes.push("divider--with-content");
+    classes.push(`divider--align-${props.align}`);
+  }
+
+  return classes.join(" ");
+});
+</script>

package/src/components/Dock/Dock.matrix.ts

@@ -0,0 +1,26 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.dock',
+  baseQuery: {
+    model: '[{"label":"Home","icon":"pi pi-home"},{"label":"Files","icon":"pi pi-folder"},{"label":"Settings","icon":"pi pi-cog"}]'
+  },
+  variants: [
+    {
+      name: 'Position',
+      subvariants: [
+        { name: 'bottom', query: { position: 'bottom' } },
+        { name: 'top',    query: { position: 'top' } },
+        { name: 'left',   query: { position: 'left' } },
+        { name: 'right',  query: { position: 'right' } }
+      ]
+    },
+    {
+      name: 'Magnification',
+      subvariants: [
+        { name: 'on',  query: { magnification: 'true' } },
+        { name: 'off', query: { magnification: 'false' } }
+      ]
+    }
+  ]
+}

package/src/components/Dock/Dock.scss

@@ -0,0 +1,223 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: dock;
+
+.#{$c} {
+  position: fixed;
+  z-index: var(--dock-zIndex, $dock-zIndex);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Position variants
+.#{$c}--bottom {
+  bottom: var(--dock-position-offset, $dock-position-offset);
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: row;
+
+  .#{$c}__container {
+    flex-direction: row;
+  }
+
+  .#{$c}__tooltip {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: var(--dock-tooltip-offset, $dock-tooltip-offset);
+  }
+
+  .#{$c}__indicator {
+    bottom: calc(-1 * var(--dock-indicator-gap, $dock-indicator-gap) - var(--dock-indicator-size, $dock-indicator-size));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.#{$c}--top {
+  top: var(--dock-position-offset, $dock-position-offset);
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: row;
+
+  .#{$c}__container {
+    flex-direction: row;
+  }
+
+  .#{$c}__tooltip {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: var(--dock-tooltip-offset, $dock-tooltip-offset);
+  }
+
+  .#{$c}__indicator {
+    top: calc(-1 * var(--dock-indicator-gap, $dock-indicator-gap) - var(--dock-indicator-size, $dock-indicator-size));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.#{$c}--left {
+  left: var(--dock-position-offset, $dock-position-offset);
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+
+  .#{$c}__container {
+    flex-direction: column;
+  }
+
+  .#{$c}__tooltip {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: var(--dock-tooltip-offset, $dock-tooltip-offset);
+  }
+
+  .#{$c}__indicator {
+    left: calc(-1 * var(--dock-indicator-gap, $dock-indicator-gap) - var(--dock-indicator-size, $dock-indicator-size));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.#{$c}--right {
+  right: var(--dock-position-offset, $dock-position-offset);
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+
+  .#{$c}__container {
+    flex-direction: column;
+  }
+
+  .#{$c}__tooltip {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: var(--dock-tooltip-offset, $dock-tooltip-offset);
+  }
+
+  .#{$c}__indicator {
+    right: calc(-1 * var(--dock-indicator-gap, $dock-indicator-gap) - var(--dock-indicator-size, $dock-indicator-size));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.#{$c}__container {
+  display: flex;
+  align-items: center;
+  gap: var(--dock-gap, $dock-gap);
+  padding: var(--dock-padding, $dock-padding);
+  background-color: var(--dock-background, $dock-background);
+  border: var(--dock-border-width, $dock-border-width) solid var(--dock-border-color, $dock-border-color);
+  border-radius: var(--dock-radius, $dock-radius);
+  box-shadow: var(--dock-shadow, $dock-shadow);
+}
+
+.#{$c}__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dock-item-size-default, $dock-item-size-default);
+  height: var(--dock-item-size-default, $dock-item-size-default);
+  border-radius: var(--dock-item-radius, $dock-item-radius);
+  background-color: var(--dock-item-background-default, $dock-item-background-default);
+  cursor: pointer;
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--dock-item-background-hover, $dock-item-background-hover);
+  }
+}
+
+.#{$c}__item--state-active {
+  background-color: var(--dock-item-background-active, $dock-item-background-active);
+}
+
+.#{$c}__item--state-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.#{$c}__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dock-item-icon-size-default, $dock-item-icon-size-default);
+  height: var(--dock-item-icon-size-default, $dock-item-icon-size-default);
+  color: var(--dock-item-icon-color-default, $dock-item-icon-color-default);
+  transition: color 0.15s ease;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .#{$c}__item:hover &,
+  .#{$c}__item[data-state~="hover"] & {
+    color: var(--dock-item-icon-color-hover, $dock-item-icon-color-hover);
+  }
+}
+
+.#{$c}__tooltip {
+  position: absolute;
+  white-space: nowrap;
+  padding: var(--dock-tooltip-padding-y, $dock-tooltip-padding-y) var(--dock-tooltip-padding-x, $dock-tooltip-padding-x);
+  background-color: var(--dock-tooltip-background, $dock-tooltip-background);
+  color: var(--dock-tooltip-text-color, $dock-tooltip-text-color);
+  font-size: var(--dock-tooltip-text-fontSize, $dock-tooltip-text-fontSize);
+  border-radius: var(--dock-tooltip-radius, $dock-tooltip-radius);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.#{$c}__indicator {
+  position: absolute;
+  width: var(--dock-indicator-size, $dock-indicator-size);
+  height: var(--dock-indicator-size, $dock-indicator-size);
+  background-color: var(--dock-indicator-color, $dock-indicator-color);
+  border-radius: 50%;
+}
+
+// Tooltip transitions
+.dock-tooltip-up-enter-active,
+.dock-tooltip-up-leave-active,
+.dock-tooltip-down-enter-active,
+.dock-tooltip-down-leave-active,
+.dock-tooltip-left-enter-active,
+.dock-tooltip-left-leave-active,
+.dock-tooltip-right-enter-active,
+.dock-tooltip-right-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.dock-tooltip-up-enter-from,
+.dock-tooltip-up-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(4px);
+}
+
+.dock-tooltip-down-enter-from,
+.dock-tooltip-down-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-4px);
+}
+
+.dock-tooltip-left-enter-from,
+.dock-tooltip-left-leave-to {
+  opacity: 0;
+  transform: translateY(-50%) translateX(-4px);
+}
+
+.dock-tooltip-right-enter-from,
+.dock-tooltip-right-leave-to {
+  opacity: 0;
+  transform: translateY(-50%) translateX(4px);
+}