jouw-stem__design-system 0.1.0

package/src/components/AppHeader/AppHeader.scss

@@ -0,0 +1,238 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: app-header;
+
+.#{$c} {
+  display: block;
+  width: 100%;
+  background-color: var(--appHeader-background, $appHeader-background);
+  color: var(--appHeader-text, $appHeader-text);
+  border-bottom: 1px solid var(--appHeader-border, $appHeader-border);
+  box-shadow: var(--appHeader-shadow, $appHeader-shadow);
+}
+
+.#{$c}__bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--appHeader-gap, $appHeader-gap);
+  min-height: var(--appHeader-height, $appHeader-height);
+  padding: 0 var(--appHeader-paddingX, $appHeader-paddingX);
+  box-sizing: border-box;
+}
+
+.#{$c}__brand {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--appHeader-text, $appHeader-text);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+/* Search */
+.#{$c}__search {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+}
+
+.#{$c}__search-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.#{$c}__search-input {
+  width: 100%;
+  max-width: 420px;
+  font: inherit;
+  font-size: 14px;
+  padding: var(--appHeader-search-paddingY, $appHeader-search-paddingY)
+    var(--appHeader-search-paddingX, $appHeader-search-paddingX);
+  background-color: var(--appHeader-search-background, $appHeader-search-background);
+  color: var(--appHeader-search-text, $appHeader-search-text);
+  border: 1px solid var(--appHeader-search-border, $appHeader-search-border);
+  border-radius: var(--appHeader-search-radius, $appHeader-search-radius);
+}
+
+/* Actions */
+.#{$c}__actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--appHeader-gap, $appHeader-gap);
+  margin-left: auto;
+}
+
+.#{$c}__icon-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--appHeader-iconButton-size, $appHeader-iconButton-size);
+  height: var(--appHeader-iconButton-size, $appHeader-iconButton-size);
+  padding: 0;
+  font: inherit;
+  color: var(--appHeader-iconButton-text, $appHeader-iconButton-text);
+  background: none;
+  border: none;
+  border-radius: var(--appHeader-iconButton-radius, $appHeader-iconButton-radius);
+  cursor: pointer;
+}
+
+.#{$c}__icon-btn:hover {
+  background-color: var(--appHeader-iconButton-hover, $appHeader-iconButton-hover);
+}
+
+.#{$c}__glyph {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.#{$c}__badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--appHeader-badge-text, $appHeader-badge-text);
+  background-color: var(--appHeader-badge-background, $appHeader-badge-background);
+  border-radius: 9999px;
+}
+
+.#{$c}__user {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--appHeader-gap, $appHeader-gap);
+  padding: var(--appHeader-search-paddingY, $appHeader-search-paddingY)
+    var(--appHeader-search-paddingX, $appHeader-search-paddingX);
+  font: inherit;
+  color: var(--appHeader-text, $appHeader-text);
+  background: none;
+  border: none;
+  border-radius: var(--appHeader-iconButton-radius, $appHeader-iconButton-radius);
+  cursor: pointer;
+}
+
+.#{$c}__user:hover {
+  background-color: var(--appHeader-iconButton-hover, $appHeader-iconButton-hover);
+}
+
+.#{$c}__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--appHeader-avatar-size, $appHeader-avatar-size);
+  height: var(--appHeader-avatar-size, $appHeader-avatar-size);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--appHeader-avatar-text, $appHeader-avatar-text);
+  background-color: var(--appHeader-avatar-background, $appHeader-avatar-background);
+  border-radius: 9999px;
+}
+
+.#{$c}__user-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.#{$c}__icon-btn:focus-visible,
+.#{$c}__user:focus-visible,
+.#{$c}__search-input:focus-visible,
+.#{$c}__crumb-link:focus-visible {
+  outline: 2px solid var(--appHeader-focusRing, $appHeader-focusRing);
+  outline-offset: 2px;
+}
+
+/* Breadcrumb row */
+.#{$c}__crumbs {
+  padding: 0 var(--appHeader-paddingX, $appHeader-paddingX);
+  border-top: 1px solid var(--appHeader-border, $appHeader-border);
+  background-color: var(--appHeader-crumbs-background, $appHeader-crumbs-background);
+}
+
+.#{$c}__crumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--appHeader-crumbs-gap, $appHeader-crumbs-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-height: var(--appHeader-crumbs-height, $appHeader-crumbs-height);
+}
+
+.#{$c}__crumb {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--appHeader-crumbs-gap, $appHeader-crumbs-gap);
+  font-size: 13px;
+}
+
+.#{$c}__crumb-link {
+  color: var(--appHeader-crumbs-link, $appHeader-crumbs-link);
+  text-decoration: none;
+}
+
+.#{$c}__crumb-link:hover {
+  text-decoration: underline;
+}
+
+.#{$c}__crumb-current {
+  color: var(--appHeader-crumbs-current, $appHeader-crumbs-current);
+  font-weight: 600;
+}
+
+.#{$c}__crumb-sep {
+  color: var(--appHeader-crumbs-link, $appHeader-crumbs-link);
+}
+
+/* Primary-navigation drawer contents */
+.#{$c}__menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--appHeader-menu-gap, $appHeader-menu-gap);
+}
+
+.#{$c}__menu-link {
+  display: block;
+  padding: var(--appHeader-menu-linkPaddingY, $appHeader-menu-linkPaddingY)
+    var(--appHeader-menu-linkPaddingX, $appHeader-menu-linkPaddingX);
+  color: var(--appHeader-menu-linkText, $appHeader-menu-linkText);
+  text-decoration: none;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: var(--appHeader-menu-radius, $appHeader-menu-radius);
+}
+
+.#{$c}__menu-link:hover {
+  background-color: var(--appHeader-menu-linkHover, $appHeader-menu-linkHover);
+}
+
+.#{$c}__menu-link--current {
+  background-color: var(--appHeader-menu-linkCurrent, $appHeader-menu-linkCurrent);
+  font-weight: 600;
+}
+
+.#{$c}__menu-link:focus-visible {
+  outline: 2px solid var(--appHeader-focusRing, $appHeader-focusRing);
+  outline-offset: 2px;
+}

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

@@ -0,0 +1,51 @@
+{
+  "appHeader": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Top bar background" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Top bar text" },
+    "border": { "value": "{border.default}", "type": "color", "description": "Bottom + breadcrumb divider" },
+    "shadow": { "value": "{shadow.xs}", "type": "shadow", "description": "Subtle top-bar elevation" },
+    "height": { "value": "56px", "type": "dimension", "description": "Top bar min-height" },
+    "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.s}", "type": "dimension", "description": "Gap between top-bar items" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "iconButton": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Icon button glyph colour" },
+      "hover": { "value": "{surface.muted}", "type": "color", "description": "Icon button hover background" },
+      "size": { "value": "36px", "type": "dimension", "description": "Icon button hit area" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Icon button radius" }
+    },
+    "search": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Search input background (matches bar; defined by its border)" },
+      "text": { "value": "{text.default}", "type": "color", "description": "Search input text" },
+      "border": { "value": "{border.default}", "type": "color", "description": "Search input border" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Search input radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Search input horizontal padding" },
+      "paddingY": { "value": "{inset.2xs}", "type": "dimension", "description": "Search input vertical padding" }
+    },
+    "badge": {
+      "background": { "value": "{feedback.error}", "type": "color", "description": "Notification badge background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Notification badge count colour" }
+    },
+    "avatar": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Account avatar background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Account avatar initials colour" },
+      "size": { "value": "32px", "type": "dimension", "description": "Account avatar diameter" }
+    },
+    "crumbs": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Breadcrumb row background (matches bar; separated by the top rule)" },
+      "link": { "value": "{text.muted}", "type": "color", "description": "Breadcrumb link / separator colour" },
+      "current": { "value": "{text.default}", "type": "color", "description": "Current breadcrumb colour" },
+      "height": { "value": "40px", "type": "dimension", "description": "Breadcrumb row min-height" },
+      "gap": { "value": "{inline.2xs}", "type": "dimension", "description": "Gap between crumbs" }
+    },
+    "menu": {
+      "linkText": { "value": "{text.default}", "type": "color", "description": "Drawer nav link colour" },
+      "linkHover": { "value": "{surface.muted}", "type": "color", "description": "Drawer nav link hover background" },
+      "linkCurrent": { "value": "{brand.subtle}", "type": "color", "description": "Current drawer nav link background" },
+      "linkPaddingY": { "value": "{inset.s}", "type": "dimension", "description": "Drawer nav link vertical padding" },
+      "linkPaddingX": { "value": "{inset.s}", "type": "dimension", "description": "Drawer nav link horizontal padding" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Drawer nav link radius" },
+      "gap": { "value": "{stack.3xs}", "type": "dimension", "description": "Gap between drawer nav links" }
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+{
+  "appHeader": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Top bar background" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Top bar text" },
+    "border": { "value": "{border.default}", "type": "color", "description": "Bottom + breadcrumb divider" },
+    "shadow": { "value": "{shadow.xs}", "type": "shadow", "description": "Subtle top-bar elevation" },
+    "height": { "value": "56px", "type": "dimension", "description": "Top bar min-height" },
+    "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.s}", "type": "dimension", "description": "Gap between top-bar items" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "iconButton": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Icon button glyph colour" },
+      "hover": { "value": "{surface.muted}", "type": "color", "description": "Icon button hover background" },
+      "size": { "value": "36px", "type": "dimension", "description": "Icon button hit area" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Icon button radius" }
+    },
+    "search": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Search input background (matches bar; defined by its border)" },
+      "text": { "value": "{text.default}", "type": "color", "description": "Search input text" },
+      "border": { "value": "{border.default}", "type": "color", "description": "Search input border" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Search input radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Search input horizontal padding" },
+      "paddingY": { "value": "{inset.2xs}", "type": "dimension", "description": "Search input vertical padding" }
+    },
+    "badge": {
+      "background": { "value": "{feedback.error}", "type": "color", "description": "Notification badge background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Notification badge count colour" }
+    },
+    "avatar": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Account avatar background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Account avatar initials colour" },
+      "size": { "value": "32px", "type": "dimension", "description": "Account avatar diameter" }
+    },
+    "crumbs": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Breadcrumb row background (matches bar; separated by the top rule)" },
+      "link": { "value": "{text.muted}", "type": "color", "description": "Breadcrumb link / separator colour" },
+      "current": { "value": "{text.default}", "type": "color", "description": "Current breadcrumb colour" },
+      "height": { "value": "40px", "type": "dimension", "description": "Breadcrumb row min-height" },
+      "gap": { "value": "{inline.2xs}", "type": "dimension", "description": "Gap between crumbs" }
+    },
+    "menu": {
+      "linkText": { "value": "{text.default}", "type": "color", "description": "Drawer nav link colour" },
+      "linkHover": { "value": "{surface.muted}", "type": "color", "description": "Drawer nav link hover background" },
+      "linkCurrent": { "value": "{brand.subtle}", "type": "color", "description": "Current drawer nav link background" },
+      "linkPaddingY": { "value": "{inset.s}", "type": "dimension", "description": "Drawer nav link vertical padding" },
+      "linkPaddingX": { "value": "{inset.s}", "type": "dimension", "description": "Drawer nav link horizontal padding" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Drawer nav link radius" },
+      "gap": { "value": "{stack.3xs}", "type": "dimension", "description": "Gap between drawer nav links" }
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+{
+  "appHeader": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Top bar background" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Top bar text" },
+    "border": { "value": "{border.default}", "type": "color", "description": "Bottom + breadcrumb divider" },
+    "shadow": { "value": "{shadow.xs}", "type": "shadow", "description": "Subtle top-bar elevation" },
+    "height": { "value": "56px", "type": "dimension", "description": "Top bar min-height" },
+    "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.s}", "type": "dimension", "description": "Gap between top-bar items" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "iconButton": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Icon button glyph colour" },
+      "hover": { "value": "{surface.muted}", "type": "color", "description": "Icon button hover background" },
+      "size": { "value": "36px", "type": "dimension", "description": "Icon button hit area" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Icon button radius" }
+    },
+    "search": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Search input background (matches bar; defined by its border)" },
+      "text": { "value": "{text.default}", "type": "color", "description": "Search input text" },
+      "border": { "value": "{border.default}", "type": "color", "description": "Search input border" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Search input radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Search input horizontal padding" },
+      "paddingY": { "value": "{inset.2xs}", "type": "dimension", "description": "Search input vertical padding" }
+    },
+    "badge": {
+      "background": { "value": "{feedback.error}", "type": "color", "description": "Notification badge background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Notification badge count colour" }
+    },
+    "avatar": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Account avatar background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Account avatar initials colour" },
+      "size": { "value": "32px", "type": "dimension", "description": "Account avatar diameter" }
+    },
+    "crumbs": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Breadcrumb row background (matches bar; separated by the top rule)" },
+      "link": { "value": "{text.muted}", "type": "color", "description": "Breadcrumb link / separator colour" },
+      "current": { "value": "{text.default}", "type": "color", "description": "Current breadcrumb colour" },
+      "height": { "value": "40px", "type": "dimension", "description": "Breadcrumb row min-height" },
+      "gap": { "value": "{inline.2xs}", "type": "dimension", "description": "Gap between crumbs" }
+    },
+    "menu": {
+      "linkText": { "value": "{text.default}", "type": "color", "description": "Drawer nav link colour" },
+      "linkHover": { "value": "{surface.muted}", "type": "color", "description": "Drawer nav link hover background" },
+      "linkCurrent": { "value": "{brand.subtle}", "type": "color", "description": "Current drawer nav link background" },
+      "linkPaddingY": { "value": "{inset.s}", "type": "dimension", "description": "Drawer nav link vertical padding" },
+      "linkPaddingX": { "value": "{inset.s}", "type": "dimension", "description": "Drawer nav link horizontal padding" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Drawer nav link radius" },
+      "gap": { "value": "{stack.3xs}", "type": "dimension", "description": "Gap between drawer nav links" }
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+{
+  "appHeader": {
+    "background": { "value": "{surface.canvas}", "type": "color", "description": "Top bar background" },
+    "text": { "value": "{text.default}", "type": "color", "description": "Top bar text" },
+    "border": { "value": "{border.default}", "type": "color", "description": "Bottom + breadcrumb divider" },
+    "shadow": { "value": "{shadow.xs}", "type": "shadow", "description": "Subtle top-bar elevation" },
+    "height": { "value": "56px", "type": "dimension", "description": "Top bar min-height" },
+    "paddingX": { "value": "{inset.m}", "type": "dimension", "description": "Horizontal inset" },
+    "gap": { "value": "{inline.s}", "type": "dimension", "description": "Gap between top-bar items" },
+    "focusRing": { "value": "{focus.ring}", "type": "color", "description": "Focus outline colour" },
+    "iconButton": {
+      "text": { "value": "{text.muted}", "type": "color", "description": "Icon button glyph colour" },
+      "hover": { "value": "{surface.muted}", "type": "color", "description": "Icon button hover background" },
+      "size": { "value": "36px", "type": "dimension", "description": "Icon button hit area" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Icon button radius" }
+    },
+    "search": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Search input background (matches bar; defined by its border)" },
+      "text": { "value": "{text.default}", "type": "color", "description": "Search input text" },
+      "border": { "value": "{border.default}", "type": "color", "description": "Search input border" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Search input radius" },
+      "paddingX": { "value": "{inset.s}", "type": "dimension", "description": "Search input horizontal padding" },
+      "paddingY": { "value": "{inset.2xs}", "type": "dimension", "description": "Search input vertical padding" }
+    },
+    "badge": {
+      "background": { "value": "{feedback.error}", "type": "color", "description": "Notification badge background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Notification badge count colour" }
+    },
+    "avatar": {
+      "background": { "value": "{surface.inverse}", "type": "color", "description": "Account avatar background" },
+      "text": { "value": "{text.inverse}", "type": "color", "description": "Account avatar initials colour" },
+      "size": { "value": "32px", "type": "dimension", "description": "Account avatar diameter" }
+    },
+    "crumbs": {
+      "background": { "value": "{surface.canvas}", "type": "color", "description": "Breadcrumb row background (matches bar; separated by the top rule)" },
+      "link": { "value": "{text.muted}", "type": "color", "description": "Breadcrumb link / separator colour" },
+      "current": { "value": "{text.default}", "type": "color", "description": "Current breadcrumb colour" },
+      "height": { "value": "40px", "type": "dimension", "description": "Breadcrumb row min-height" },
+      "gap": { "value": "{inline.2xs}", "type": "dimension", "description": "Gap between crumbs" }
+    },
+    "menu": {
+      "linkText": { "value": "{text.default}", "type": "color", "description": "Drawer nav link colour" },
+      "linkHover": { "value": "{surface.muted}", "type": "color", "description": "Drawer nav link hover background" },
+      "linkCurrent": { "value": "{brand.subtle}", "type": "color", "description": "Current drawer nav link background" },
+      "linkPaddingY": { "value": "{inset.s}", "type": "dimension", "description": "Drawer nav link vertical padding" },
+      "linkPaddingX": { "value": "{inset.s}", "type": "dimension", "description": "Drawer nav link horizontal padding" },
+      "radius": { "value": "{radius.default}", "type": "dimension", "description": "Drawer nav link radius" },
+      "gap": { "value": "{stack.3xs}", "type": "dimension", "description": "Gap between drawer nav links" }
+    }
+  }
+}

package/src/components/AppHeader/AppHeader.vue

@@ -0,0 +1,160 @@
+<template>
+  <header class="app-header">
+    <div class="app-header__bar">
+      <button
+        type="button"
+        class="app-header__icon-btn"
+        aria-label="Toggle navigation"
+        :aria-expanded="menuOpen"
+        @click="toggleMenu"
+      >
+        <span class="app-header__glyph" aria-hidden="true">&#9776;</span>
+      </button>
+
+      <slot name="brand">
+        <a :href="brandHref" class="app-header__brand">{{ brand }}</a>
+      </slot>
+
+      <div v-if="showSearch" class="app-header__search">
+        <label :for="searchId" class="app-header__search-label">Search</label>
+        <input
+          :id="searchId"
+          type="search"
+          class="app-header__search-input"
+          :placeholder="searchPlaceholder"
+        />
+      </div>
+
+      <div class="app-header__actions">
+        <slot name="actions">
+          <button
+            type="button"
+            class="app-header__icon-btn"
+            :aria-label="notificationCount > 0 ? `Notifications, ${notificationCount} unread` : 'Notifications'"
+          >
+            <span class="app-header__glyph" aria-hidden="true">&#9788;</span>
+            <span v-if="notificationCount > 0" class="app-header__badge" aria-hidden="true">{{ notificationCount }}</span>
+          </button>
+          <button type="button" class="app-header__icon-btn" aria-label="Help">
+            <span class="app-header__glyph" aria-hidden="true">?</span>
+          </button>
+          <button type="button" class="app-header__user" :aria-label="`Account menu for ${userName}`">
+            <span class="app-header__avatar" aria-hidden="true">{{ userInitials }}</span>
+            <span class="app-header__user-name">{{ userName }}</span>
+          </button>
+        </slot>
+      </div>
+    </div>
+
+    <nav v-if="showBreadcrumb && breadcrumbs.length" class="app-header__crumbs" aria-label="Breadcrumb">
+      <ol class="app-header__crumb-list">
+        <li
+          v-for="(crumb, i) in breadcrumbs"
+          :key="crumb.label"
+          class="app-header__crumb"
+        >
+          <a
+            v-if="i < breadcrumbs.length - 1"
+            :href="crumb.href || '#'"
+            class="app-header__crumb-link"
+          >{{ crumb.label }}</a>
+          <span v-else class="app-header__crumb-current" aria-current="page">{{ crumb.label }}</span>
+          <span v-if="i < breadcrumbs.length - 1" class="app-header__crumb-sep" aria-hidden="true">/</span>
+        </li>
+      </ol>
+    </nav>
+
+    <!-- Primary navigation drawer, opened by the hamburger. Closed by
+         default, so it adds nothing to the resting layout. Override the
+         contents with the `menu` slot; otherwise it renders `navItems`. -->
+    <Drawer v-model:visible="menuOpen" position="left" :header="menuTitle" size="sm">
+      <slot name="menu">
+        <nav class="app-header__menu" aria-label="Main">
+          <ul class="app-header__menu-list">
+            <li v-for="item in navItems" :key="item.label">
+              <a
+                :href="item.href || '#'"
+                class="app-header__menu-link"
+                :class="{ 'app-header__menu-link--current': item.current }"
+                :aria-current="item.current ? 'page' : undefined"
+              >{{ item.label }}</a>
+            </li>
+          </ul>
+        </nav>
+      </slot>
+    </Drawer>
+  </header>
+</template>
+
+<style src="./AppHeader.scss"></style>
+
+<script setup lang="ts">
+import { ref, useId } from 'vue'
+import Drawer from '../Drawer/Drawer.vue'
+import '../Drawer/Drawer.scss'
+
+/**
+ * AppHeader — a compact top bar for web applications: sidebar toggle,
+ * brand, optional global search, notification + help + account cluster,
+ * and an optional breadcrumb context row.
+ *
+ * The hamburger opens a built-in primary-navigation Drawer (`navItems`,
+ * overridable via the `menu` slot). It also emits `toggle-sidebar` so a
+ * host that prefers a persistent sidebar can react instead.
+ */
+interface Crumb { label: string; href?: string }
+interface NavItem { label: string; href?: string; current?: boolean }
+
+withDefaults(
+  defineProps<{
+    brand?: string
+    brandHref?: string
+    showSearch?: boolean
+    searchPlaceholder?: string
+    /** Unread notification count; 0 hides the badge. */
+    notificationCount?: number
+    userName?: string
+    userInitials?: string
+    showBreadcrumb?: boolean
+    breadcrumbs?: Crumb[]
+    /** Heading shown at the top of the navigation drawer. */
+    menuTitle?: string
+    /** Primary-navigation entries rendered inside the drawer. */
+    navItems?: NavItem[]
+  }>(),
+  {
+    brand: 'Console',
+    brandHref: '#',
+    showSearch: true,
+    searchPlaceholder: 'Search…',
+    notificationCount: 3,
+    userName: 'Jane Doe',
+    userInitials: 'JD',
+    showBreadcrumb: true,
+    breadcrumbs: () => [
+      { label: 'Home' },
+      { label: 'Projects' },
+      { label: 'Acme Redesign' },
+    ],
+    menuTitle: 'Menu',
+    navItems: () => [
+      { label: 'Dashboard', current: true },
+      { label: 'Projects' },
+      { label: 'Reports' },
+      { label: 'Team' },
+      { label: 'Settings' },
+    ],
+  }
+)
+
+const emit = defineEmits<{ (e: 'toggle-sidebar'): void }>()
+
+const searchId = useId()
+const menuOpen = ref(false)
+
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value
+  // Still notify hosts that prefer to drive their own persistent sidebar.
+  emit('toggle-sidebar')
+}
+</script>

package/src/components/AutoComplete/AutoComplete.matrix.ts

@@ -0,0 +1,36 @@
+import type { ComponentMatrix } from '../../types/matrix'
+
+export const matrix: ComponentMatrix = {
+  rootSelector: '.autocomplete',
+  // AutoComplete closed-state render — input + optional dropdown button.
+  // The open suggestion panel uses position:fixed and renders outside
+  // matrix cells, so it's tested via the behavioural specs.
+  baseQuery: {
+    placeholder: 'Start typing…',
+    suggestions: '[]'
+  },
+  variants: [
+    {
+      name: 'Size',
+      subvariants: [
+        { name: 'sm', query: { size: 'sm' }, focusable: true },
+        { name: 'md', query: { size: 'md' }, focusable: true },
+        { name: 'lg', query: { size: 'lg' }, focusable: true }
+      ]
+    },
+    {
+      name: 'Mode',
+      subvariants: [
+        { name: 'single',     query: { multiple: 'false' } },
+        { name: 'multiple',   query: { multiple: 'true' } },
+        { name: 'with-button',query: { dropdown: 'true' } }
+      ]
+    }
+  ],
+  states: [
+    { name: 'hover',          attr: 'hover' },
+    { name: 'focus-visible',  attr: 'focus-visible' },
+    { name: 'disabled',       props: { isDisabled: 'true' } },
+    { name: 'invalid',        props: { isInvalid: 'true' } }
+  ]
+}