jouw-stem__design-system 0.1.0

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

@@ -0,0 +1,120 @@
+{
+  "panel": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Panel background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Panel border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Panel border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Panel border radius"
+    },
+    "header": {
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Header background"
+        },
+        "hover": {
+          "value": "{intent.secondary.hover}",
+          "type": "color",
+          "description": "Header hover background when toggleable"
+        }
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Header text color"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "fontSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Header font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Header font weight"
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{inset.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Content background"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Content text color"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Toggle 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": "-90deg",
+          "type": "dimension",
+          "description": "Icon rotation when collapsed"
+        },
+        "expanded": {
+          "value": "0deg",
+          "type": "dimension",
+          "description": "Icon rotation when expanded"
+        }
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,120 @@
+{
+  "panel": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Panel background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Panel border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Panel border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Panel border radius"
+    },
+    "header": {
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Header background"
+        },
+        "hover": {
+          "value": "{intent.secondary.hover}",
+          "type": "color",
+          "description": "Header hover background when toggleable"
+        }
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Header text color"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "fontSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Header font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Header font weight"
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{inset.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Content background"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Content text color"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Toggle 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": "-90deg",
+          "type": "dimension",
+          "description": "Icon rotation when collapsed"
+        },
+        "expanded": {
+          "value": "0deg",
+          "type": "dimension",
+          "description": "Icon rotation when expanded"
+        }
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,120 @@
+{
+  "panel": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "Panel background color"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Panel border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Panel border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Panel border radius"
+    },
+    "header": {
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Header section padding"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Header background"
+        },
+        "hover": {
+          "value": "{intent.secondary.hover}",
+          "type": "color",
+          "description": "Header hover background when toggleable"
+        }
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Header text color"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header bottom border color"
+      },
+      "fontSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Header font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Header font weight"
+      }
+    },
+    "content": {
+      "padding": {
+        "value": "{inset.l}",
+        "type": "dimension",
+        "description": "Content area padding"
+      },
+      "background": {
+        "value": "{surface.canvas}",
+        "type": "color",
+        "description": "Content background"
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Content text color"
+      }
+    },
+    "icon": {
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Toggle 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": "-90deg",
+          "type": "dimension",
+          "description": "Icon rotation when collapsed"
+        },
+        "expanded": {
+          "value": "0deg",
+          "type": "dimension",
+          "description": "Icon rotation when expanded"
+        }
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "200ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

package/src/components/Panel/Panel.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="panel" :class="additionalClasses">
+    <div
+      v-if="$slots.header || header"
+      class="panel__header"
+      :class="{ 'panel__header--mode-toggleable': toggleable }"
+      @click="onHeaderClick"
+    >
+      <button
+        v-if="toggleable"
+        type="button"
+        class="panel__toggle"
+        :aria-expanded="!isCollapsed"
+        :aria-label="isCollapsed ? 'Expand panel' : 'Collapse panel'"
+      >
+        <svg
+          class="panel__toggle-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+      <slot name="header">
+        <span class="panel__title">{{ header }}</span>
+      </slot>
+      <div v-if="$slots.icons" class="panel__icons">
+        <slot name="icons" />
+      </div>
+    </div>
+
+    <div class="panel__content-wrapper">
+      <div class="panel__content">
+        <slot />
+      </div>
+    </div>
+
+    <div v-if="$slots.footer" class="panel__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style src="./Panel.scss"></style>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+const props = defineProps({
+  /**
+   * Header text displayed in the panel header.
+   */
+  header: {
+    type: String,
+    default: "",
+  },
+  /**
+   * Makes the panel collapsible via the header.
+   */
+  toggleable: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Whether the panel is collapsed (only when toggleable).
+   */
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  (e: "update:collapsed", ...args: unknown[]): void;
+  (e: "toggle", ...args: unknown[]): void;
+}>();
+const isCollapsed = ref(props.collapsed);
+
+watch(
+  () => props.collapsed,
+  (newVal) => {
+    isCollapsed.value = newVal;
+  }
+);
+
+const onHeaderClick = () => {
+  if (!props.toggleable) return;
+
+  isCollapsed.value = !isCollapsed.value;
+  emit("update:collapsed", isCollapsed.value);
+  emit("toggle", { collapsed: isCollapsed.value });
+};
+
+const additionalClasses = computed(() =>
+  [
+    props.toggleable && "panel--mode-toggleable",
+    isCollapsed.value && "panel--state-collapsed",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/PanelMenu/PanelMenu.matrix.ts

@@ -0,0 +1,17 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.panelmenu',
+  baseQuery: {
+    model: '[{"label":"Files","icon":"pi pi-folder","items":[{"label":"Documents"},{"label":"Pictures"}]},{"label":"Settings","icon":"pi pi-cog","items":[{"label":"General"}]}]'
+  },
+  variants: [
+    {
+      name: 'Mode',
+      subvariants: [
+        { name: 'single',   query: { multiple: 'false' } },
+        { name: 'multiple', query: { multiple: 'true' } }
+      ]
+    }
+  ]
+}

package/src/components/PanelMenu/PanelMenu.scss

@@ -0,0 +1,217 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: panelmenu;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  gap: var(--panelmenu-gap, $panelmenu-gap);
+  width: 100%;
+  background-color: var(--panelmenu-background, $panelmenu-background);
+  border: var(--panelmenu-border-width, $panelmenu-border-width) solid var(--panelmenu-border-color, $panelmenu-border-color);
+  border-radius: var(--panelmenu-border-radius, $panelmenu-border-radius);
+  overflow: hidden;
+}
+
+.#{$c}__panel {
+  &:not(:last-child) {
+    border-bottom: var(--panelmenu-border-width, $panelmenu-border-width) solid var(--panelmenu-border-color, $panelmenu-border-color);
+  }
+}
+
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--panelmenu-header-padding, $panelmenu-header-padding);
+  background-color: var(--panelmenu-header-background-default, $panelmenu-header-background-default);
+  color: var(--panelmenu-header-color-default, $panelmenu-header-color-default);
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease,
+              color var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+
+  &:hover:not(:disabled),
+  &[data-state~="hover"]:not(:disabled) {
+    background-color: var(--panelmenu-header-background-hover, $panelmenu-header-background-hover);
+    color: var(--panelmenu-header-color-hover, $panelmenu-header-color-hover);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: 2px solid var(--panelmenu-item-color-active, $panelmenu-item-color-active);
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--panelmenu-header-color-disabled, $panelmenu-header-color-disabled);
+  }
+}
+
+.#{$c}__panel--state-expanded .#{$c}__header {
+  background-color: var(--panelmenu-header-background-active, $panelmenu-header-background-active);
+}
+
+.#{$c}__header-icon {
+  width: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  height: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  margin-right: var(--panelmenu-item-gap, $panelmenu-item-gap);
+  color: var(--panelmenu-icon-color-default, $panelmenu-icon-color-default);
+  flex-shrink: 0;
+}
+
+.#{$c}__header-text {
+  flex: 1;
+}
+
+.#{$c}__chevron {
+  width: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  height: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  color: var(--panelmenu-icon-color-default, $panelmenu-icon-color-default);
+  flex-shrink: 0;
+  transition: transform var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+  transform: rotate(var(--panelmenu-icon-rotation-collapsed, $panelmenu-icon-rotation-collapsed));
+}
+
+.#{$c}__panel--state-expanded .#{$c}__chevron {
+  transform: rotate(var(--panelmenu-icon-rotation-expanded, $panelmenu-icon-rotation-expanded));
+}
+
+.#{$c}__content-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+}
+
+.#{$c}__panel--state-expanded .#{$c}__content-wrapper {
+  grid-template-rows: 1fr;
+}
+
+.#{$c}__content {
+  overflow: hidden;
+  background-color: var(--panelmenu-content-background, $panelmenu-content-background);
+}
+
+.#{$c}__list {
+  margin: 0;
+  padding: var(--panelmenu-content-padding, $panelmenu-content-padding);
+  list-style: none;
+}
+
+.#{$c}__item {
+  position: relative;
+}
+
+.#{$c}__link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--panelmenu-item-gap, $panelmenu-item-gap);
+  padding: var(--panelmenu-item-padding, $panelmenu-item-padding);
+  background-color: var(--panelmenu-item-background-default, $panelmenu-item-background-default);
+  color: var(--panelmenu-item-color-default, $panelmenu-item-color-default);
+  border: none;
+  text-decoration: none;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease,
+              color var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+
+  &:hover:not(:disabled):not([aria-disabled="true"]),
+  &[data-state~="hover"]:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--panelmenu-item-background-hover, $panelmenu-item-background-hover);
+    color: var(--panelmenu-item-color-hover, $panelmenu-item-color-hover);
+  }
+
+  &:focus,
+  &[data-state~="focus"] {
+    outline: none;
+  }
+
+  &:focus-visible,
+  &[data-state~="focus-visible"] {
+    outline: 2px solid var(--panelmenu-item-color-active, $panelmenu-item-color-active);
+    outline-offset: -2px;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    color: var(--panelmenu-item-color-disabled, $panelmenu-item-color-disabled);
+    pointer-events: none;
+  }
+}
+
+.#{$c}__item--state-active > .#{$c}__link {
+  background-color: var(--panelmenu-item-background-active, $panelmenu-item-background-active);
+  color: var(--panelmenu-item-color-active, $panelmenu-item-color-active);
+}
+
+.#{$c}__item--state-disabled > .#{$c}__link {
+  cursor: not-allowed;
+  color: var(--panelmenu-item-color-disabled, $panelmenu-item-color-disabled);
+  pointer-events: none;
+}
+
+.#{$c}__icon {
+  width: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  height: var(--panelmenu-icon-size, $panelmenu-icon-size);
+  color: var(--panelmenu-icon-color-default, $panelmenu-icon-color-default);
+  flex-shrink: 0;
+}
+
+.#{$c}__label {
+  flex: 1;
+  white-space: nowrap;
+}
+
+.#{$c}__submenu-chevron {
+  width: 12px;
+  height: 12px;
+  color: var(--panelmenu-icon-color-default, $panelmenu-icon-color-default);
+  flex-shrink: 0;
+  transition: transform var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+  transform: rotate(var(--panelmenu-icon-rotation-collapsed, $panelmenu-icon-rotation-collapsed));
+}
+
+.#{$c}__item--state-expanded > .#{$c}__link .#{$c}__submenu-chevron {
+  transform: rotate(var(--panelmenu-icon-rotation-expanded, $panelmenu-icon-rotation-expanded));
+}
+
+// Submenu
+.#{$c}__submenu {
+  display: grid;
+  grid-template-rows: 0fr;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  transition: grid-template-rows var(--panelmenu-transition-duration, $panelmenu-transition-duration) ease;
+  overflow: hidden;
+}
+
+.#{$c}__item--state-expanded > .#{$c}__submenu {
+  grid-template-rows: 1fr;
+}
+
+.#{$c}__item--nested > .#{$c}__link {
+  padding-left: calc(var(--panelmenu-item-padding, $panelmenu-item-padding) + var(--panelmenu-item-indent, $panelmenu-item-indent));
+}
+
+// Separator
+.#{$c}__separator {
+  height: 1px;
+  margin: var(--panelmenu-separator-margin, $panelmenu-separator-margin) 0;
+  background-color: var(--panelmenu-separator-color, $panelmenu-separator-color);
+}