jouw-stem__design-system 0.1.0

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

@@ -0,0 +1,190 @@
+{
+  "panelmenu": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "PanelMenu background"
+    },
+    "border": {
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Border width"
+      },
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Border color"
+      },
+      "radius": {
+        "value": "{radius.default}",
+        "type": "dimension",
+        "description": "Border radius"
+      }
+    },
+    "gap": {
+      "value": "0px",
+      "type": "dimension",
+      "description": "Gap between panels"
+    },
+    "header": {
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Panel header padding"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.panel}",
+          "type": "color",
+          "description": "Header background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Header background on hover"
+        },
+        "active": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Header background when expanded"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Header text color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Header text color on hover"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Header text color when disabled"
+        }
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "0",
+        "type": "dimension",
+        "description": "Content area padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Content background"
+      }
+    },
+    "item": {
+      "padding": {
+        "value": "{inset.xs} {inset.m}",
+        "type": "dimension",
+        "description": "Menu item padding"
+      },
+      "gap": {
+        "value": "{inline.2xs}",
+        "type": "dimension",
+        "description": "Gap between icon and label"
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Item text color"
+        },
+        "hover": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Item text color on hover"
+        },
+        "active": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Active item text color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Disabled item text color"
+        }
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Item background on hover"
+        },
+        "active": {
+          "value": "{surface.highlight}",
+          "type": "color",
+          "description": "Active item background"
+        }
+      },
+      "indent": {
+        "value": "{inline.m}",
+        "type": "dimension",
+        "description": "Indent for nested items"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Icon size"
+      },
+      "color": {
+        "default": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Icon color"
+        },
+        "hover": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Icon color on hover"
+        }
+      },
+      "rotation": {
+        "collapsed": {
+          "value": "0deg",
+          "type": "dimension",
+          "description": "Chevron rotation when collapsed"
+        },
+        "expanded": {
+          "value": "90deg",
+          "type": "dimension",
+          "description": "Chevron rotation when expanded"
+        }
+      }
+    },
+    "separator": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Separator color"
+      },
+      "margin": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Separator margin"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

package/src/components/PanelMenu/PanelMenu.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="panelmenu">
+    <div
+      v-for="(panel, panelIndex) in model"
+      :key="panel.key || panelIndex"
+      class="panelmenu__panel"
+      :class="{
+        'panelmenu__panel--state-expanded': isExpanded(panelIndex),
+        'panelmenu__panel--state-disabled': panel.disabled
+      }"
+    >
+      <!-- Panel Header -->
+      <button
+        type="button"
+        class="panelmenu__header"
+        :disabled="panel.disabled"
+        :aria-expanded="isExpanded(panelIndex)"
+        :aria-controls="`panelmenu-content-${panelIndex}`"
+        @click="togglePanel(panelIndex, panel)"
+        @keydown="onHeaderKeydown($event, panelIndex)"
+      >
+        <i v-if="panel.icon" :class="panel.icon" class="panelmenu__header-icon"></i>
+        <span class="panelmenu__header-text">{{ panel.label }}</span>
+        <svg
+          class="panelmenu__chevron"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            d="M6 4L10 8L6 12"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+
+      <!-- Panel Content -->
+      <div
+        :id="`panelmenu-content-${panelIndex}`"
+        class="panelmenu__content-wrapper"
+        role="region"
+        :aria-labelledby="`panelmenu-header-${panelIndex}`"
+      >
+        <div class="panelmenu__content">
+          <ul class="panelmenu__list" role="menu">
+            <template v-for="(item, itemIndex) in panel.items" :key="item.key || itemIndex">
+              <!-- Separator -->
+              <li v-if="item.separator" class="panelmenu__separator" role="separator"></li>
+
+              <!-- Menu Item -->
+              <li
+                v-else
+                class="panelmenu__item"
+                :class="{
+                  'panelmenu__item--state-active': item.active,
+                  'panelmenu__item--state-disabled': item.disabled,
+                  'panelmenu__item--has-submenu': item.items && item.items.length > 0,
+                  'panelmenu__item--state-expanded': isSubmenuExpanded(panelIndex, itemIndex)
+                }"
+                role="none"
+              >
+                <a
+                  v-if="item.url"
+                  :href="item.url"
+                  :target="item.target"
+                  class="panelmenu__link"
+                  role="menuitem"
+                  :tabindex="item.disabled ? -1 : 0"
+                  :aria-disabled="item.disabled || undefined"
+                  @click="onItemClick($event, item, panelIndex, itemIndex)"
+                >
+                  <i v-if="item.icon" :class="item.icon" class="panelmenu__icon"></i>
+                  <span class="panelmenu__label">{{ item.label }}</span>
+                </a>
+                <button
+                  v-else
+                  type="button"
+                  class="panelmenu__link"
+                  role="menuitem"
+                  :tabindex="item.disabled ? -1 : 0"
+                  :disabled="item.disabled"
+                  :aria-expanded="item.items && item.items.length > 0 ? isSubmenuExpanded(panelIndex, itemIndex) : undefined"
+                  @click="onItemClick($event, item, panelIndex, itemIndex)"
+                >
+                  <i v-if="item.icon" :class="item.icon" class="panelmenu__icon"></i>
+                  <span class="panelmenu__label">{{ item.label }}</span>
+                  <svg
+                    v-if="item.items && item.items.length > 0"
+                    class="panelmenu__submenu-chevron"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M6 4L10 8L6 12"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </button>
+
+                <!-- Nested Submenu -->
+                <ul
+                  v-if="item.items && item.items.length > 0"
+                  class="panelmenu__submenu"
+                  role="menu"
+                >
+                  <template v-for="(subitem, subitemIndex) in item.items" :key="subitem.key || subitemIndex">
+                    <li v-if="subitem.separator" class="panelmenu__separator" role="separator"></li>
+                    <li
+                      v-else
+                      class="panelmenu__item panelmenu__item--nested"
+                      :class="{
+                        'panelmenu__item--state-active': subitem.active,
+                        'panelmenu__item--state-disabled': subitem.disabled
+                      }"
+                      role="none"
+                    >
+                      <a
+                        v-if="subitem.url"
+                        :href="subitem.url"
+                        :target="subitem.target"
+                        class="panelmenu__link"
+                        role="menuitem"
+                        :tabindex="subitem.disabled ? -1 : 0"
+                        :aria-disabled="subitem.disabled || undefined"
+                        @click="onSubitemClick($event, subitem)"
+                      >
+                        <i v-if="subitem.icon" :class="subitem.icon" class="panelmenu__icon"></i>
+                        <span class="panelmenu__label">{{ subitem.label }}</span>
+                      </a>
+                      <button
+                        v-else
+                        type="button"
+                        class="panelmenu__link"
+                        role="menuitem"
+                        :tabindex="subitem.disabled ? -1 : 0"
+                        :disabled="subitem.disabled"
+                        @click="onSubitemClick($event, subitem)"
+                      >
+                        <i v-if="subitem.icon" :class="subitem.icon" class="panelmenu__icon"></i>
+                        <span class="panelmenu__label">{{ subitem.label }}</span>
+                      </button>
+                    </li>
+                  </template>
+                </ul>
+              </li>
+            </template>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./PanelMenu.scss"></style>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+
+const props = defineProps({
+  /**
+   * Array of menu panels with items
+   */
+  model: {
+    type: Array,
+    default: () => [],
+    validator: (value) =>
+      value.every(
+        (panel) =>
+          typeof panel === "object" &&
+          (panel.label !== undefined || panel.icon !== undefined)
+      ),
+  },
+  /**
+   * Object of expanded panel keys
+   */
+  expandedKeys: {
+    type: Object,
+    default: () => ({}),
+  },
+  /**
+   * Allow multiple panels to be expanded simultaneously
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  (e: "update:expandedKeys", ...args: unknown[]): void;
+  (e: "panel-open", ...args: unknown[]): void;
+  (e: "panel-close", ...args: unknown[]): void;
+  (e: "item-click", ...args: unknown[]): void;
+}>();
+// Internal state
+const internalExpandedKeys = ref({ ...props.expandedKeys });
+const expandedSubmenus = ref({});
+
+// Watch for external changes
+watch(
+  () => props.expandedKeys,
+  (newVal) => {
+    internalExpandedKeys.value = { ...newVal };
+  },
+  { deep: true }
+);
+
+const isExpanded = (panelIndex) => {
+  return internalExpandedKeys.value[panelIndex] === true;
+};
+
+const isSubmenuExpanded = (panelIndex, itemIndex) => {
+  const key = `${panelIndex}-${itemIndex}`;
+  return expandedSubmenus.value[key] === true;
+};
+
+const togglePanel = (panelIndex, panel) => {
+  if (panel.disabled) return;
+
+  const wasExpanded = isExpanded(panelIndex);
+
+  if (props.multiple) {
+    internalExpandedKeys.value = {
+      ...internalExpandedKeys.value,
+      [panelIndex]: !wasExpanded,
+    };
+  } else {
+    // Close all panels except the clicked one
+    const newKeys = {};
+    if (!wasExpanded) {
+      newKeys[panelIndex] = true;
+    }
+    internalExpandedKeys.value = newKeys;
+  }
+
+  emit("update:expandedKeys", { ...internalExpandedKeys.value });
+
+  if (wasExpanded) {
+    emit("panel-close", { index: panelIndex, panel });
+  } else {
+    emit("panel-open", { index: panelIndex, panel });
+  }
+};
+
+const toggleSubmenu = (panelIndex, itemIndex) => {
+  const key = `${panelIndex}-${itemIndex}`;
+  expandedSubmenus.value = {
+    ...expandedSubmenus.value,
+    [key]: !expandedSubmenus.value[key],
+  };
+};
+
+const onItemClick = (event, item, panelIndex, itemIndex) => {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  // Toggle submenu if item has children
+  if (item.items && item.items.length > 0) {
+    event.preventDefault();
+    toggleSubmenu(panelIndex, itemIndex);
+    return;
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+};
+
+const onSubitemClick = (event, item) => {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+};
+
+const onHeaderKeydown = (event, panelIndex) => {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      // Focus next panel header or first item
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      // Focus previous panel header
+      break;
+    case "Home":
+      event.preventDefault();
+      // Focus first panel header
+      break;
+    case "End":
+      event.preventDefault();
+      // Focus last panel header
+      break;
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      togglePanel(panelIndex, props.model[panelIndex]);
+      break;
+  }
+};
+</script>

package/src/components/PickList/PickList.matrix.ts

@@ -0,0 +1,10 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.picklist',
+  // PickList has source + target lists. modelValue is [sourceArr, targetArr].
+  baseQuery: {
+    modelValue: '[[{"label":"Alpha"},{"label":"Beta"}],[{"label":"Gamma"}]]'
+  },
+  variants: []
+}

package/src/components/PickList/PickList.scss

@@ -0,0 +1,132 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: picklist;
+
+.#{$c} {
+  display: flex;
+  align-items: stretch;
+  gap: var(--picklist-gap, $picklist-gap);
+}
+
+.#{$c}--state-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+// List panels (source and target)
+.#{$c}__list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  background-color: var(--picklist-background-default, $picklist-background-default);
+  border: var(--picklist-border-width, $picklist-border-width) solid var(--picklist-border-color-default, $picklist-border-color-default);
+  border-radius: var(--picklist-radius, $picklist-radius);
+  overflow: hidden;
+}
+
+.#{$c}__header {
+  padding: var(--picklist-header-padding-y, $picklist-header-padding-y) var(--picklist-header-padding-x, $picklist-header-padding-x);
+  background-color: var(--picklist-header-background, $picklist-header-background);
+  color: var(--picklist-header-text, $picklist-header-text);
+  border-bottom: 1px solid var(--picklist-header-borderColor, $picklist-header-borderColor);
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.#{$c}__items {
+  flex: 1;
+  min-height: var(--picklist-list-minHeight, $picklist-list-minHeight);
+  max-height: var(--picklist-list-maxHeight, $picklist-list-maxHeight);
+  overflow-y: auto;
+  padding: var(--picklist-list-padding, $picklist-list-padding);
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  padding: var(--picklist-item-padding-y, $picklist-item-padding-y) var(--picklist-item-padding-x, $picklist-item-padding-x);
+  background-color: var(--picklist-item-background-default, $picklist-item-background-default);
+  color: var(--picklist-item-text-default, $picklist-item-text-default);
+  border-radius: var(--picklist-item-radius, $picklist-item-radius);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease;
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--picklist-item-background-hover, $picklist-item-background-hover);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+    background-color: var(--picklist-item-background-hover, $picklist-item-background-hover);
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: var(--picklist-focus-ringWidth, $picklist-focus-ringWidth) solid var(--picklist-focus-ringColor, $picklist-focus-ringColor);
+    outline-offset: -2px;
+  }
+}
+
+.#{$c}__item--state-selected {
+  background-color: var(--picklist-item-background-selected, $picklist-item-background-selected);
+  color: var(--picklist-item-text-selected, $picklist-item-text-selected);
+
+  &:hover,
+  &[data-state~="hover"] {
+    background-color: var(--picklist-item-background-selected, $picklist-item-background-selected);
+    filter: brightness(0.95);
+  }
+}
+
+.#{$c}__empty {
+  padding: var(--picklist-item-padding-y, $picklist-item-padding-y) var(--picklist-item-padding-x, $picklist-item-padding-x);
+  color: var(--picklist-item-text-default, $picklist-item-text-default);
+  opacity: 0.6;
+  text-align: center;
+  font-size: 14px;
+}
+
+// Transfer controls
+.#{$c}__controls {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--picklist-controls-gap, $picklist-controls-gap);
+}
+
+.#{$c}__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--picklist-controls-button-size, $picklist-controls-button-size);
+  height: var(--picklist-controls-button-size, $picklist-controls-button-size);
+  padding: 0;
+  background-color: var(--picklist-controls-button-background-default, $picklist-controls-button-background-default);
+  border: 1px solid var(--picklist-controls-button-border, $picklist-controls-button-border);
+  border-radius: var(--picklist-controls-button-radius, $picklist-controls-button-radius);
+  color: var(--picklist-controls-button-icon-default, $picklist-controls-button-icon-default);
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover:not(:disabled),
+  &[data-state~="hover"]:not(:disabled) {
+    background-color: var(--picklist-controls-button-background-hover, $picklist-controls-button-background-hover);
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: var(--picklist-focus-ringWidth, $picklist-focus-ringWidth) solid var(--picklist-focus-ringColor, $picklist-focus-ringColor);
+    outline-offset: var(--picklist-focus-ringOffset, $picklist-focus-ringOffset);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--picklist-controls-button-background-disabled, $picklist-controls-button-background-disabled);
+    color: var(--picklist-controls-button-icon-disabled, $picklist-controls-button-icon-disabled);
+    border-color: var(--picklist-controls-button-icon-disabled, $picklist-controls-button-icon-disabled);
+  }
+}