jouw-stem__design-system 0.1.0

package/src/components/Dock/Dock.vue

@@ -0,0 +1,130 @@
+<template>
+  <div
+    class="dock"
+    :class="[
+      `dock--${position}`,
+      { 'dock--magnify': magnification }
+    ]"
+  >
+    <div class="dock__container">
+      <div
+        v-for="(item, index) in model"
+        :key="item.key || index"
+        class="dock__item"
+        :class="{
+          'dock__item--state-active': item.active,
+          'dock__item--state-disabled': item.disabled
+        }"
+        :style="getItemStyle(index)"
+        @click="onItemClick(item, $event)"
+        @mouseenter="onItemMouseEnter(index)"
+        @mouseleave="onItemMouseLeave"
+      >
+        <span class="dock__icon">
+          <component :is="item.icon" v-if="isComponentIcon(item.icon)" />
+          <i v-else-if="isIconClass(item.icon)" :class="item.icon" aria-hidden="true" />
+          <span v-else v-html="item.icon" />
+        </span>
+
+        <Transition :name="tooltipTransition">
+          <span
+            v-if="showTooltips && hoveredIndex === index"
+            class="dock__tooltip"
+          >
+            {{ item.label }}
+          </span>
+        </Transition>
+
+        <span v-if="item.active" class="dock__indicator" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./Dock.scss"></style>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+
+interface Props {
+  model?: unknown[];
+  position?: string;
+  magnification?: boolean;
+  magnificationScale?: number;
+  showTooltips?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  model: () => [],
+  position: "bottom",
+  // Default off — the rest of the design system doesn't scale items
+  // on hover. Pass `:magnification="true"` to opt in to the macOS-Dock
+  // physical-zoom affordance.
+  magnification: false,
+  magnificationScale: 1.5,
+  showTooltips: true,
+});
+const emit = defineEmits<{
+  (e: "item-click", ...args: unknown[]): void;
+}>();
+const hoveredIndex = ref(-1);
+
+// Treat strings starting with a known icon-font class prefix as a
+// class-name binding (mirrors MegaMenu's logic) so consumers can pass
+// "pi pi-file" / "fa fa-cog" without wrapping in raw <i> markup.
+function isIconClass(v: unknown): v is string {
+  return typeof v === "string" && /^(pi|fa|mdi|material-icons|bx|bi)[\s-]/.test(v.trim());
+}
+
+// Component icons can be plain options objects, async components, or
+// functional components (functions). `typeof === 'object'` alone misses
+// the function form and Vue dumps the render-fn source via v-html.
+function isComponentIcon(v: unknown): boolean {
+  return v != null && (typeof v === "object" || typeof v === "function");
+}
+
+const tooltipTransition = computed(() => {
+  if (props.position === "bottom") return "dock-tooltip-up";
+  if (props.position === "top") return "dock-tooltip-down";
+  if (props.position === "left") return "dock-tooltip-right";
+  return "dock-tooltip-left";
+});
+
+function getItemStyle(index) {
+  if (!props.magnification || hoveredIndex.value === -1) {
+    return {};
+  }
+
+  const distance = Math.abs(hoveredIndex.value - index);
+  const maxDistance = 2;
+
+  if (distance > maxDistance) {
+    return {};
+  }
+
+  const scale = 1 + (props.magnificationScale - 1) * (1 - distance / (maxDistance + 1));
+
+  return {
+    transform: `scale(${scale})`,
+    zIndex: maxDistance - distance + 1,
+  };
+}
+
+function onItemClick(item, event) {
+  if (item.disabled) return;
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+}
+
+function onItemMouseEnter(index) {
+  hoveredIndex.value = index;
+}
+
+function onItemMouseLeave() {
+  hoveredIndex.value = -1;
+}
+</script>

package/src/components/Drawer/Drawer.matrix.ts

@@ -0,0 +1,18 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.drawer',
+  defaultSlot: 'Drawer content goes here.',
+  baseQuery: { visible: 'true', header: 'Drawer' },
+  variants: [
+    {
+      name: 'Position',
+      subvariants: [
+        { name: 'left',   query: { position: 'left' } },
+        { name: 'right',  query: { position: 'right' } },
+        { name: 'top',    query: { position: 'top' } },
+        { name: 'bottom', query: { position: 'bottom' } }
+      ]
+    }
+  ]
+}

package/src/components/Drawer/Drawer.scss

@@ -0,0 +1,222 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: drawer;
+
+// Overlay backdrop
+.#{$c}__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--drawer-overlay-background, $drawer-overlay-background);
+  z-index: var(--drawer-zIndex-overlay, $drawer-zIndex-overlay);
+}
+
+// Drawer container
+.#{$c} {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--drawer-background, $drawer-background);
+  box-shadow: var(--drawer-shadow, $drawer-shadow);
+  z-index: var(--drawer-zIndex-drawer, $drawer-zIndex-drawer);
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+// Position variants
+.#{$c}--position-left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  border-right: var(--drawer-border-width, $drawer-border-width) solid var(--drawer-border-color, $drawer-border-color);
+}
+
+.#{$c}--position-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-left: var(--drawer-border-width, $drawer-border-width) solid var(--drawer-border-color, $drawer-border-color);
+}
+
+.#{$c}--position-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: var(--drawer-border-width, $drawer-border-width) solid var(--drawer-border-color, $drawer-border-color);
+}
+
+.#{$c}--position-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-top: var(--drawer-border-width, $drawer-border-width) solid var(--drawer-border-color, $drawer-border-color);
+}
+
+// Size variants for horizontal drawers (left/right)
+.#{$c}--position-left,
+.#{$c}--position-right {
+  &.#{$c}--size-sm {
+    width: var(--drawer-size-sm, $drawer-size-sm);
+  }
+
+  &.#{$c}--size-md {
+    width: var(--drawer-size-md, $drawer-size-md);
+  }
+
+  &.#{$c}--size-lg {
+    width: var(--drawer-size-lg, $drawer-size-lg);
+  }
+
+  &.#{$c}--size-xl {
+    width: var(--drawer-size-xl, $drawer-size-xl);
+  }
+}
+
+// Size variants for vertical drawers (top/bottom)
+.#{$c}--position-top,
+.#{$c}--position-bottom {
+  &.#{$c}--size-sm {
+    height: var(--drawer-size-sm, $drawer-size-sm);
+  }
+
+  &.#{$c}--size-md {
+    height: var(--drawer-size-md, $drawer-size-md);
+  }
+
+  &.#{$c}--size-lg {
+    height: var(--drawer-size-lg, $drawer-size-lg);
+  }
+
+  &.#{$c}--size-xl {
+    height: var(--drawer-size-xl, $drawer-size-xl);
+  }
+}
+
+// Header section
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--inset-m, $inset-m);
+  padding: var(--drawer-header-padding, $drawer-header-padding);
+  background-color: var(--drawer-header-background, $drawer-header-background);
+  border-bottom: 1px solid var(--drawer-header-borderColor, $drawer-header-borderColor);
+  flex-shrink: 0;
+}
+
+.#{$c}__title {
+  font-size: var(--drawer-header-title-fontSize, $drawer-header-title-fontSize);
+  font-weight: var(--drawer-header-title-fontWeight, $drawer-header-title-fontWeight);
+  color: var(--drawer-header-title-color, $drawer-header-title-color);
+  margin: 0;
+  line-height: 1.4;
+}
+
+// Close button
+.#{$c}__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--drawer-closeButton-size, $drawer-closeButton-size);
+  height: var(--drawer-closeButton-size, $drawer-closeButton-size);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--drawer-closeButton-radius, $drawer-closeButton-radius);
+  color: var(--drawer-closeButton-color-default, $drawer-closeButton-color-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--drawer-closeButton-background-hover, $drawer-closeButton-background-hover);
+    color: var(--drawer-closeButton-color-hover, $drawer-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(--drawer-closeButton-iconSize, $drawer-closeButton-iconSize);
+  height: var(--drawer-closeButton-iconSize, $drawer-closeButton-iconSize);
+}
+
+// Content section
+.#{$c}__content {
+  flex: 1 1 auto;
+  padding: var(--drawer-content-padding, $drawer-content-padding);
+  overflow-y: auto;
+}
+
+// Footer section
+.#{$c}__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--inset-s, $inset-s);
+  padding: var(--drawer-footer-padding, $drawer-footer-padding);
+  border-top: 1px solid var(--drawer-footer-borderColor, $drawer-footer-borderColor);
+  flex-shrink: 0;
+}
+
+// Transition animations
+
+// Overlay fade
+.drawer-fade-enter-active,
+.drawer-fade-leave-active {
+  transition: opacity var(--drawer-transition-duration, $drawer-transition-duration) ease;
+}
+
+.drawer-fade-enter-from,
+.drawer-fade-leave-to {
+  opacity: 0;
+}
+
+// Slide from left
+.drawer-slide-left-enter-active,
+.drawer-slide-left-leave-active {
+  transition: transform var(--drawer-transition-duration, $drawer-transition-duration) ease;
+}
+
+.drawer-slide-left-enter-from,
+.drawer-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+
+// Slide from right
+.drawer-slide-right-enter-active,
+.drawer-slide-right-leave-active {
+  transition: transform var(--drawer-transition-duration, $drawer-transition-duration) ease;
+}
+
+.drawer-slide-right-enter-from,
+.drawer-slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+// Slide from top
+.drawer-slide-top-enter-active,
+.drawer-slide-top-leave-active {
+  transition: transform var(--drawer-transition-duration, $drawer-transition-duration) ease;
+}
+
+.drawer-slide-top-enter-from,
+.drawer-slide-top-leave-to {
+  transform: translateY(-100%);
+}
+
+// Slide from bottom
+.drawer-slide-bottom-enter-active,
+.drawer-slide-bottom-leave-active {
+  transition: transform var(--drawer-transition-duration, $drawer-transition-duration) ease;
+}
+
+.drawer-slide-bottom-enter-from,
+.drawer-slide-bottom-leave-to {
+  transform: translateY(100%);
+}

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

@@ -0,0 +1,163 @@
+{
+  "drawer": {
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color",
+      "description": "Drawer background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Drawer border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Drawer border width"
+      }
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Drawer shadow"
+    },
+    "header": {
+      "padding": {
+        "value": "{inset.l}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Header background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "title": {
+        "color": {
+          "value": "{text.heading}",
+          "type": "color",
+          "description": "Header title text color"
+        },
+        "fontSize": {
+          "value": "18px",
+          "type": "dimension",
+          "description": "Header title font size"
+        },
+        "fontWeight": {
+          "value": "600",
+          "type": "fontWeight",
+          "description": "Header title font weight"
+        }
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{inset.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      }
+    },
+    "footer": {
+      "padding": {
+        "value": "{inset.l}",
+        "type": "dimension",
+        "description": "Footer section padding"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Footer top border color"
+      }
+    },
+    "closeButton": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Close button size"
+      },
+      "iconSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Close icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Close button icon 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"
+      }
+    },
+    "overlay": {
+      "background": {
+        "value": "{surface.overlay}",
+        "type": "color",
+        "description": "Overlay backdrop color"
+      }
+    },
+    "size": {
+      "sm": {
+        "value": "280px",
+        "type": "dimension",
+        "description": "Small drawer size"
+      },
+      "md": {
+        "value": "400px",
+        "type": "dimension",
+        "description": "Medium drawer size (default)"
+      },
+      "lg": {
+        "value": "560px",
+        "type": "dimension",
+        "description": "Large drawer size"
+      },
+      "xl": {
+        "value": "720px",
+        "type": "dimension",
+        "description": "Extra large drawer size"
+      }
+    },
+    "zIndex": {
+      "overlay": {
+        "value": "1000",
+        "type": "number",
+        "description": "Overlay z-index"
+      },
+      "drawer": {
+        "value": "1001",
+        "type": "number",
+        "description": "Drawer z-index"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "300ms",
+        "type": "duration",
+        "description": "Slide animation duration"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,163 @@
+{
+  "drawer": {
+    "background": {
+      "value": "{surface.canvas}",
+      "type": "color",
+      "description": "Drawer background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Drawer border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Drawer border width"
+      }
+    },
+    "shadow": {
+      "value": "{shadow.l}",
+      "type": "shadow",
+      "description": "Drawer shadow"
+    },
+    "header": {
+      "padding": {
+        "value": "{inset.l}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Header background"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "title": {
+        "color": {
+          "value": "{text.heading}",
+          "type": "color",
+          "description": "Header title text color"
+        },
+        "fontSize": {
+          "value": "18px",
+          "type": "dimension",
+          "description": "Header title font size"
+        },
+        "fontWeight": {
+          "value": "600",
+          "type": "fontWeight",
+          "description": "Header title font weight"
+        }
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{inset.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      }
+    },
+    "footer": {
+      "padding": {
+        "value": "{inset.l}",
+        "type": "dimension",
+        "description": "Footer section padding"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Footer top border color"
+      }
+    },
+    "closeButton": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Close button size"
+      },
+      "iconSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Close icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Close button icon 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"
+      }
+    },
+    "overlay": {
+      "background": {
+        "value": "{surface.overlay}",
+        "type": "color",
+        "description": "Overlay backdrop color"
+      }
+    },
+    "size": {
+      "sm": {
+        "value": "280px",
+        "type": "dimension",
+        "description": "Small drawer size"
+      },
+      "md": {
+        "value": "400px",
+        "type": "dimension",
+        "description": "Medium drawer size (default)"
+      },
+      "lg": {
+        "value": "560px",
+        "type": "dimension",
+        "description": "Large drawer size"
+      },
+      "xl": {
+        "value": "720px",
+        "type": "dimension",
+        "description": "Extra large drawer size"
+      }
+    },
+    "zIndex": {
+      "overlay": {
+        "value": "1000",
+        "type": "number",
+        "description": "Overlay z-index"
+      },
+      "drawer": {
+        "value": "1001",
+        "type": "number",
+        "description": "Drawer z-index"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "300ms",
+        "type": "duration",
+        "description": "Slide animation duration"
+      }
+    }
+  }
+}