srcdev-nuxt-components 9.5.6 → 9.5.7

package/app/components/03.organisms/responsive-header/NavigationItems.vue

@@ -27,8 +27,7 @@
             'is-active': isActiveNavItem(link),
           }"
           :style="{
-            '--_main-navigation-item-width':
-              mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px',
+            '--_main-navigation-item-width': itemWidth(mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]),
           }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
@@ -48,8 +47,7 @@
             'is-active': isActiveNavItem(link),
           }"
           :style="{
-            '--_main-navigation-item-width':
-              mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px',
+            '--_main-navigation-item-width': itemWidth(mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]),
           }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
@@ -66,11 +64,11 @@
             <template #summary>
               <span
                 class="overflow-navigation-text"
-                :aria-label="`${link.childLinksTitle} submenu`"
+                :aria-label="submenuLabel(link)"
                 role="menuitem"
                 :aria-haspopup="true"
               >
-                {{ link.childLinksTitle }}
+                {{ link.childLinksTitle ?? link.name }}
               </span>
             </template>
             <template #icon>
@@ -81,7 +79,7 @@
                 <ul class="overflow-navigation-sub-nav-list" @mouseleave="hoveredChildKey = null">
                   <li
                     v-for="(childLink, childIndex) in link.childLinks"
-                    :key="childLink.name"
+                    :key="childIndex"
                     class="overflow-navigation-sub-nav-item"
                     :class="{
                       'is-hovered': hoveredChildKey === `${String(groupKey)}-${localIndex}-${childIndex}`,
@@ -117,6 +115,8 @@ interface Props {
   styleClassPassthrough?: string | string[];
   /** aria-label on the overflow menu — override for localisation. */
   ariaLabel?: string;
+  /** aria-label on each submenu summary; {title} is replaced with the item's title. */
+  submenuAriaLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -127,8 +127,12 @@ const props = withDefaults(defineProps<Props>(), {
   panelVariant: "classic",
   styleClassPassthrough: () => [],
   ariaLabel: "Overflow navigation menu",
+  submenuAriaLabel: "{title} submenu",
 });
 
+const submenuLabel = (link: ResponsiveHeaderNavItem) =>
+  props.submenuAriaLabel.replace("{title}", link.childLinksTitle ?? link.name);
+
 const panelComponent = computed(() => (props.panelVariant === "modern" ? ExpandingPanel : ExpandingPanelClassic));
 
 const hoveredItemKey = ref<string | null>(null);
@@ -178,6 +182,9 @@ const widestNavLinkWidthInMainNavigationState = computed(() => {
   }, 0);
 });
 
+const itemWidth = (link?: ResponsiveHeaderNavItem) =>
+  link?.config?.width === undefined ? undefined : `${link.config.width}px`;
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 // Performance: Use immediate flag and more efficient watching
@@ -199,6 +206,7 @@ watch(
        on this element to avoid cascade conflicts with ancestor overrides.
 
        --overflow-nav-padding-inline         (default: 0.8rem)
+       --overflow-nav-max-inline-size        (default: calc(100vw - 3.2rem))
        --overflow-nav-items-gap              (default: 0px)
        --overflow-nav-items-padding-block    (default: 0.8rem)
 
@@ -212,10 +220,15 @@ watch(
        --overflow-nav-decorator-hovered-bg              (default: oklch(100% 0 0 / 6%))
     ──────────────────────────────────────────────────────────────────────── */
 
+    --_max-inline-size: var(--overflow-nav-max-inline-size, calc(100vw - 3.2rem));
+
     display: flex;
     flex-direction: column;
     gap: var(--overflow-nav-items-gap, 0px);
     position: relative;
+    inline-size: max-content;
+    max-inline-size: var(--_max-inline-size);
+    overflow-wrap: anywhere;
 
     .overflow-navigation-list {
       display: none;
@@ -224,7 +237,7 @@ watch(
         display: flex;
         flex-direction: column;
         gap: var(--overflow-nav-items-gap, 0px);
-        min-width: var(--_overflow-navigation-list-min-width, auto);
+        min-width: min(var(--_overflow-navigation-list-min-width, 0px), var(--_max-inline-size));
       }
 
       .overflow-navigation-item {
@@ -262,9 +275,7 @@ watch(
                 border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
 
                 .label-wrapper {
-                  .overflow-navigation-text {
-                    white-space: nowrap;
-                  }
+                  min-inline-size: 0;
                 }
                 .icon-wrapper {
                   padding: 0;
@@ -325,9 +336,7 @@ watch(
                 border-bottom: 0.1rem solid var(--overflow-nav-link-border-color, #efefef75);
 
                 .label-wrapper {
-                  .overflow-navigation-text {
-                    white-space: nowrap;
-                  }
+                  min-inline-size: 0;
                 }
                 .icon-wrapper {
                   padding: 0;

package/app/components/03.organisms/responsive-header/ResponsiveHeader.vue

@@ -32,8 +32,7 @@
             'is-active': isActiveNavItem(link),
           }"
           :style="{
-            '--_main-navigation-item-width':
-              mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px',
+            '--_main-navigation-item-width': itemWidth(mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]),
           }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
@@ -52,7 +51,7 @@
           <details v-else ref="navigationDetails" class="main-navigation-details" name="navigation-group">
             <summary
               class="main-navigation-details-summary has-toggle-icon"
-              :aria-label="`${link.childLinksTitle} submenu`"
+              :aria-label="submenuLabel(link)"
               @mouseenter="handleSummaryHover($event)"
               @focusin="handleSummaryHover($event)"
               @click.prevent="handleSummaryAction($event)"
@@ -61,11 +60,15 @@
               <Icon name="mdi:chevron-down" class="icon" :aria-hidden="true" />
               <Icon v-if="link.iconName" :name="link.iconName" class="decorator-icon" aria-hidden="true" />
 
-              {{ link.childLinksTitle }}
+              {{ link.childLinksTitle ?? link.name }}
             </summary>
             <div class="main-navigation-sub-nav" role="menu" @mouseenter="handleSubNavHover">
               <ul class="main-navigation-sub-nav-list">
-                <li v-for="childLink in link.childLinks" :key="childLink.name" class="main-navigation-sub-nav-item">
+                <li
+                  v-for="(childLink, childIndex) in link.childLinks"
+                  :key="childIndex"
+                  class="main-navigation-sub-nav-item"
+                >
                   <NuxtLink :to="childLink.path" class="main-navigation-sub-nav-link" role="menuitem">
                     {{ childLink.name }}
                   </NuxtLink>
@@ -85,7 +88,7 @@
         :class="overflowDetailsClass ? [overflowDetailsClass] : []"
         name="overflow-group"
       >
-        <summary class="overflow-details-summary has-toggle-icon">
+        <summary class="overflow-details-summary has-toggle-icon" :aria-label="overflowButtonLabel">
           <Icon
             :name="overflowDetailsSummaryIcons.more ?? 'gravity-ui:ellipsis'"
             class="icon"
@@ -104,6 +107,7 @@
             :main-navigation-state="mainNavigationState"
             :panel-variant="panelVariant"
             :aria-label="overflowMenuAriaLabel"
+            :submenu-aria-label="submenuAriaLabel"
           />
         </div>
       </details>
@@ -136,6 +140,10 @@ interface Props {
   secondaryNavAriaLabel?: string;
   /** aria-label on the overflow menu itself (forwarded to NavigationItems) — override for localisation. */
   overflowMenuAriaLabel?: string;
+  /** Accessible name of the overflow/burger button, which shows only icons. */
+  overflowButtonLabel?: string;
+  /** aria-label on each dropdown summary; {title} is replaced with the item's title. Forwarded to NavigationItems. */
+  submenuAriaLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -155,8 +163,13 @@ const props = withDefaults(defineProps<Props>(), {
   mainNavAriaLabel: "Main navigation",
   secondaryNavAriaLabel: "Secondary navigation",
   overflowMenuAriaLabel: "Overflow navigation menu",
+  overflowButtonLabel: "More navigation",
+  submenuAriaLabel: "{title} submenu",
 });
 
+const submenuLabel = (link: ResponsiveHeaderNavItem) =>
+  props.submenuAriaLabel.replace("{title}", link.childLinksTitle ?? link.name);
+
 const collapseNavigationBelowWidth = computed(
   () => props.collapseBreakpoint !== null || props.collapseAtMainNavIntersection
 );
@@ -173,6 +186,7 @@ const {
 const slots = useSlots();
 
 const navigationWrapperRef = useTemplateRef<HTMLDivElement>("navigationWrapper");
+const mainNavRef = useTemplateRef<HTMLElement>("mainNav");
 
 const closeAllNavigationDetails = () => {
   navigationDetailsRefs.value?.forEach((element) => {
@@ -361,7 +375,10 @@ const mainNavigationState = ref<ResponsiveHeaderState>({
     firstNav: false,
     secondNav: false,
   },
-  clonedNavLinks: props.responsiveNavLinks,
+  // Copied so the geometry pass's config writes never land in the consumer's own nav data
+  clonedNavLinks: Object.fromEntries(
+    Object.entries(props.responsiveNavLinks).map(([groupKey, group]) => [groupKey, group.map((link) => ({ ...link }))])
+  ),
   hasSecondNav: Object.keys(props.responsiveNavLinks).length > 1,
 });
 
@@ -398,12 +415,13 @@ const navigationDetailsRefs = useTemplateRef<HTMLElement[]>("navigationDetails")
 
 const overflowDetailsRef = useTemplateRef<HTMLDetailsElement>("overflowDetails");
 
-const showOverflowDetails = computed(() => {
-  const hasHiddenNav =
-    !mainNavigationState.value.navListVisibility["firstNav"] ||
-    (!mainNavigationState.value.navListVisibility["secondNav"] && mainNavigationState.value.hasSecondNav);
-  return hasHiddenNav;
-});
+// Item-based rather than reading navListVisibility.firstNav/secondNav, so any group key works and
+// empty nav data never shows a burger with nothing in it
+const showOverflowDetails = computed(() =>
+  Object.values(mainNavigationState.value.clonedNavLinks ?? {}).some((group) =>
+    group.some((link) => link.config?.visible === false)
+  )
+);
 
 const mainNavigationMarginBlockEnd = computed(() => {
   return secondaryNavRects.value ? secondaryNavRects.value.width + props.gapBetweenFirstAndSecondNav : 0;
@@ -462,20 +480,18 @@ const determineNavigationItemVisibility = (rect: DOMRect) => {
     return false;
   }
 
-  // Use default responsive visibility logic if wrapper exists
-  if (navigationWrapperRects.value) {
-    return (
-      Math.floor(rect.right + mainNavigationMarginBlockEnd.value + props.gapBetweenFirstAndSecondNav) <
-      navigationWrapperRects.value.right
-    );
-  }
-
-  // Default to visible
-  return true;
+  // An item fits if it ends within the main nav, whose margin-inline-end already reserves the
+  // secondary nav plus the gap. Measured live with the item so both read the same layout.
+  const mainNavRect = mainNavRef.value?.getBoundingClientRect();
+  if (!mainNavRect) return true;
+  return Math.floor(rect.right) <= Math.floor(mainNavRect.right);
 };
 
 const initMainNavigationState = () => {
-  if (!mainNavigationItemsRefs.value) return;
+  if (!mainNavigationItemsRefs.value?.length) {
+    isGeometryReady.value = true;
+    return;
+  }
 
   mainNavigationItemsRefs.value.forEach(async (item) => {
     // await nextTick()
@@ -642,6 +658,9 @@ onMounted(async () => {
 
 useResizeObserver(navigationWrapperRef, runGeometryPass);
 
+const itemWidth = (link?: ResponsiveHeaderNavItem) =>
+  link?.config?.width === undefined ? undefined : `${link.config.width}px`;
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -690,6 +709,8 @@ watch(
        --responsive-header-sub-nav-border       (default: 1px solid #efefef75)
        --responsive-header-sub-nav-border-radius (default: 8px)
        --responsive-header-sub-nav-padding      (default: 12px)
+       --responsive-header-sub-nav-max-inline-size (default: min(48rem, calc(100vw - 3.2rem)))
+       --responsive-header-sub-nav-max-block-size  (default: 70vh)
 
        --responsive-header-overflow-btn-bg              (default: Canvas)
        --responsive-header-overflow-btn-size            (default: 20px)
@@ -702,12 +723,14 @@ watch(
        --responsive-header-overflow-nav-border          (default: 1px solid #ffffff90)
        --responsive-header-overflow-nav-border-radius   (default: 8px)
        --responsive-header-overflow-nav-padding-block   (default: 12px)
+       --responsive-header-overflow-nav-max-block-size  (default: 70vh)
 
        --responsive-nav-decorator-indicator-color         (default: currentColor)
        --responsive-nav-decorator-hovered-indicator-color (default: inherits --responsive-nav-decorator-indicator-color)
        --responsive-nav-decorator-hovered-bg              (default: oklch(100% 0 0 / 8%))
 
        --responsive-header-link-font-size       (default: inherit)
+       --responsive-header-main-nav-justify-content (default: space-between)
     ──────────────────────────────────────────────────────────────────────── */
 
     /* `inherit` means a viewport-relative (vw/clamp) ancestor font-size silently
@@ -749,7 +772,7 @@ watch(
       display: flex;
       flex-wrap: nowrap;
       flex-grow: 1;
-      justify-content: space-between;
+      justify-content: var(--responsive-header-main-nav-justify-content, space-between);
       gap: 60px;
       overflow-x: hidden;
       margin-inline-end: v-bind(mainNavigationMarginBlockEndStr);
@@ -868,6 +891,9 @@ watch(
               translate: 0 12px;
 
               min-width: var(--_main-navigation-item-width);
+              max-inline-size: var(--responsive-header-sub-nav-max-inline-size, min(48rem, calc(100vw - 3.2rem)));
+              max-block-size: var(--responsive-header-sub-nav-max-block-size, 70vh);
+              overflow-y: auto;
 
               .main-navigation-sub-nav-list {
                 display: grid;
@@ -883,7 +909,7 @@ watch(
 
                   .main-navigation-sub-nav-link {
                     display: block;
-                    white-space: nowrap;
+                    overflow-wrap: anywhere;
                     text-decoration: none;
                     color: var(--responsive-header-link-color, inherit);
                   }
@@ -1048,7 +1074,9 @@ watch(
           padding-block: var(--responsive-header-overflow-nav-padding-block, 12px);
           margin: 0;
           z-index: 999;
-          min-width: var(--_overflow-drop-down-width, fit-content);
+          min-width: fit-content;
+          max-block-size: var(--responsive-header-overflow-nav-max-block-size, 70vh);
+          overflow-y: auto;
 
           display: grid;
           grid-auto-flow: row;

package/app/components/03.organisms/responsive-header/stories/ResponsiveHeader.stories.ts

@@ -1,10 +1,50 @@
+import { computed, ref } from "vue";
 import ResponsiveHeader from "../ResponsiveHeader.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { MediaCanvas, ResponsiveHeaderProp } from "~/types/components";
 
-const meta: Meta<typeof ResponsiveHeader> = {
+type MainNavJustify = "space-between" | "flex-start" | "safe center" | "safe end";
+
+// Story-only arg: drives a CSS token, not a ResponsiveHeader prop. See the argTypes entry.
+type StoryArgs = InstanceType<typeof ResponsiveHeader>["$props"] & {
+  mainNavJustifyContent: MainNavJustify;
+};
+
+function useStorySetup(args: StoryArgs) {
+  const componentArgs = computed(() => {
+    const { mainNavJustifyContent: _mainNavJustifyContent, ...rest } = args;
+    return rest;
+  });
+  const tokenStyles = computed(() => ({
+    "--responsive-header-main-nav-justify-content": args.mainNavJustifyContent,
+  }));
+  return { componentArgs, tokenStyles };
+}
+
+const renderWith = (template: string) => (args: StoryArgs) => ({
+  components: { ResponsiveHeader },
+  setup() {
+    return useStorySetup(args);
+  },
+  template: `<div :style="tokenStyles">${template}</div>`,
+});
+
+const render = renderWith(`<ResponsiveHeader v-bind="componentArgs" />`);
+
+const meta: Meta<StoryArgs> = {
   title: "Organisms/Responsive Header",
   component: ResponsiveHeader,
   argTypes: {
+    mainNavJustifyContent: {
+      control: "select",
+      options: ["space-between", "flex-start", "safe center", "safe end"] satisfies MainNavJustify[],
+      description:
+        "**Story control, not a prop.** Sets the `--responsive-header-main-nav-justify-content` CSS token on a wrapper. " +
+        "To use it in an app, set the token in your own CSS, e.g. `.site-nav { --responsive-header-main-nav-justify-content: flex-start; }`. " +
+        "Use `safe end` / `safe center` rather than plain `end` / `center`, so items that don't fit aren't clipped off the start edge.",
+      table: { category: "CSS tokens (story only, set in your CSS)", defaultValue: { summary: "space-between" } },
+    },
     responsiveNavLinks: {
       control: "object",
       description: "Nav groups keyed by name — each item is either a link (`path`) or a dropdown (`childLinks`)",
@@ -29,12 +69,47 @@ const meta: Meta<typeof ResponsiveHeader> = {
       control: "boolean",
       description: "Allow a dropdown to open on hover/focus, not just click",
     },
+    mainNavAriaLabel: { control: "text", table: { category: "Labels", defaultValue: { summary: "Main navigation" } } },
+    secondaryNavAriaLabel: { control: "text", table: { category: "Labels", defaultValue: { summary: "Secondary navigation" } } },
+    overflowMenuAriaLabel: { control: "text", table: { category: "Labels", defaultValue: { summary: "Overflow navigation menu" } } },
+    overflowButtonLabel: {
+      control: "text",
+      description: "Accessible name of the icon-only overflow/burger button",
+      table: { category: "Labels", defaultValue: { summary: "More navigation" } },
+    },
+    submenuAriaLabel: {
+      control: "text",
+      description: "aria-label on each dropdown summary; {title} is replaced with the item's title",
+      table: { category: "Labels", defaultValue: { summary: "{title} submenu" } },
+    },
     styleClassPassthrough: {
       control: "object",
       description: "Extra CSS classes applied to the root element",
     },
   },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+  },
+  render,
   args: {
+    mainNavJustifyContent: "space-between",
     gapBetweenFirstAndSecondNav: 12,
     collapseBreakpoint: null,
     collapseAtMainNavIntersection: false,
@@ -44,7 +119,8 @@ const meta: Meta<typeof ResponsiveHeader> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof ResponsiveHeader>;
+type Story = StoryObj<StoryArgs>;
+
 
 const responsiveNavLinks = {
   firstNav: [
@@ -73,13 +149,7 @@ export const Default: Story = {
 export const ConstrainedWidth: Story = {
   name: "Constrained Width (items overflow)",
   args: { responsiveNavLinks },
-  render: (args) => ({
-    components: { ResponsiveHeader },
-    setup() {
-      return { args };
-    },
-    template: `<div style="max-width: 420px"><ResponsiveHeader v-bind="args" /></div>`,
-  }),
+  render: renderWith(`<div style="max-width: 420px"><ResponsiveHeader v-bind="componentArgs" /></div>`),
 };
 
 export const CustomOverflowIcons: Story = {
@@ -92,19 +162,13 @@ export const CustomOverflowIcons: Story = {
 export const WithSecondaryNavigationSlot: Story = {
   name: "With secondaryNavigation slot",
   args: { responsiveNavLinks },
-  render: (args) => ({
-    components: { ResponsiveHeader },
-    setup() {
-      return { args };
-    },
-    template: `
-      <ResponsiveHeader v-bind="args">
+  render: renderWith(`
+      <ResponsiveHeader v-bind="componentArgs">
         <template #secondaryNavigation>
           <a href="/settings" aria-label="Settings">⚙</a>
         </template>
       </ResponsiveHeader>
-    `,
-  }),
+    `),
 };
 
 export const SingleFlatGroup: Story = {
@@ -120,3 +184,70 @@ export const SingleFlatGroup: Story = {
     },
   },
 };
+
+export const MainNavAlignment: Story = {
+  name: "Main Nav Alignment",
+  args: { responsiveNavLinks, mainNavJustifyContent: "flex-start" },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The main nav's two groups are spread with `space-between` by default. Use the Main nav justify content control " +
+          "(a CSS token set by the story, not a prop) to try `flex-start`, `safe center` and `safe end`. " +
+          "Narrow the canvas to check items still collapse into the overflow menu from the end, whatever the alignment.",
+      },
+    },
+  },
+};
+
+// ─── Stress test ──────────────────────────────────────────────────────────────
+
+const stressNavLinks: ResponsiveHeaderProp = {
+  primary: [
+    { name: "Startseite", path: "/" },
+    { name: "Pneumonoultramicroscopicsilicovolcanoconiosisbehandlungohneleerzeichen", path: "/long" },
+    {
+      name: "Leistungen und Behandlungen",
+      iconName: "lucide:this-icon-does-not-exist",
+      childLinks: [
+        ...Array.from({ length: 26 }, (_, i) => ({ name: `Behandlung ${i + 1}`, path: `/treatment-${i + 1}` })),
+        { name: "Same name", path: "/same-a" },
+        { name: "Same name", path: "/same-b" },
+        { name: "Kopfhautbehandlungmitspeziellenätherischenölenohneleerzeichendurchgehend", path: "/unbroken" },
+        { name: "💇‍♀️ Emoji first", path: "/emoji" },
+      ],
+    },
+    { name: "One child", childLinksTitle: "Only one", childLinks: [{ name: "The one", path: "/one" }] },
+    { name: "<b>not bold</b>", path: "/html" },
+    { name: "من نحن", path: "/rtl" },
+    ...Array.from({ length: 8 }, (_, i) => ({ name: `Item ${i + 1}`, path: `/item-${i + 1}` })),
+  ],
+  secondary: [{ name: "Kontakt und Terminvereinbarung", path: "/contact" }],
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    responsiveNavLinks: stressNavLinks,
+    mainNavAriaLabel: "Hauptnavigation",
+    secondaryNavAriaLabel: "Sekundäre Navigation",
+    overflowMenuAriaLabel: "Weitere Navigationspunkte",
+    overflowButtonLabel: "Weitere Navigationspunkte anzeigen",
+    submenuAriaLabel: "Untermenü {title}",
+  },
+  parameters: {
+    initialCanvas: "laptopCanvas",
+    docs: {
+      description: {
+        story:
+          "Deliberately hostile data to find breakage: 16 top-level items in group keys other than firstNav/secondNav, " +
+          "a 70-character unbroken item name, a dropdown with no childLinksTitle (its name is shown instead) and 30 children " +
+          "including duplicate names, an unbroken name and emoji, a dropdown with one child, a broken icon name, HTML-like text " +
+          "(must render as text), right-to-left Arabic and German labels throughout. Check at every canvas width: items that " +
+          "don't fit collapse into the overflow menu, the burger only appears when something has collapsed, the top-bar dropdown " +
+          "and the overflow panel never run off-screen (long names wrap, 30 children scroll inside the panel), and nothing " +
+          "shows 'undefined'. Resize the canvas back and forth to check items return to the bar.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/responsive-header/tests/.nuxt/app.config.mjs

@@ -0,0 +1,21 @@
+
+import { defuFn } from 'defu'
+
+const inlineConfig = {
+  "nuxt": {}
+}
+
+/** client **/
+import { _replaceAppConfig } from '#app/config'
+
+// Vite - webpack is handled directly in #app/config
+if (import.meta.dev && !import.meta.nitro && import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    _replaceAppConfig(newModule.default)
+  })
+}
+/** client-end **/
+
+
+
+export default /*@__PURE__*/ defuFn(inlineConfig)

package/app/components/03.organisms/responsive-header/tests/.nuxt/components.d.ts

@@ -0,0 +1,66 @@
+
+import type { DefineComponent, SlotsType } from 'vue'
+type IslandComponent<T> = DefineComponent<{}, {refresh: () => Promise<void>}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, SlotsType<{ fallback: { error: unknown } }>> & T
+
+type HydrationStrategies = {
+  hydrateOnVisible?: IntersectionObserverInit | true
+  hydrateOnIdle?: number | true
+  hydrateOnInteraction?: keyof HTMLElementEventMap | Array<keyof HTMLElementEventMap> | true
+  hydrateOnMediaQuery?: string
+  hydrateAfter?: number
+  hydrateWhen?: boolean
+  hydrateNever?: true
+}
+type LazyComponent<T> = DefineComponent<HydrationStrategies, {}, {}, {}, {}, {}, {}, { hydrated: () => void }> & T
+
+
+export const NuxtWelcome: typeof import("../../../../../../node_modules/nuxt/dist/app/components/welcome.vue")['default']
+export const NuxtLayout: typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-layout")['default']
+export const NuxtErrorBoundary: typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-error-boundary.vue")['default']
+export const ClientOnly: typeof import("../../../../../../node_modules/nuxt/dist/app/components/client-only")['default']
+export const DevOnly: typeof import("../../../../../../node_modules/nuxt/dist/app/components/dev-only")['default']
+export const ServerPlaceholder: typeof import("../../../../../../node_modules/nuxt/dist/app/components/server-placeholder")['default']
+export const NuxtLink: typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-link")['default']
+export const NuxtLoadingIndicator: typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']
+export const NuxtTime: typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-time.vue")['default']
+export const NuxtRouteAnnouncer: typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']
+export const NuxtAnnouncer: typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-announcer")['default']
+export const NuxtImg: typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtImg']
+export const NuxtPicture: typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtPicture']
+export const NuxtPage: typeof import("../../../../../../node_modules/nuxt/dist/pages/runtime/page-placeholder")['default']
+export const NoScript: typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['NoScript']
+export const Link: typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Link']
+export const Base: typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Base']
+export const Title: typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Title']
+export const Meta: typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Meta']
+export const Style: typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Style']
+export const Head: typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Head']
+export const Html: typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Html']
+export const Body: typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Body']
+export const NuxtIsland: typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-island")['default']
+export const LazyNuxtWelcome: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/welcome.vue")['default']>
+export const LazyNuxtLayout: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-layout")['default']>
+export const LazyNuxtErrorBoundary: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-error-boundary.vue")['default']>
+export const LazyClientOnly: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/client-only")['default']>
+export const LazyDevOnly: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/dev-only")['default']>
+export const LazyServerPlaceholder: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/server-placeholder")['default']>
+export const LazyNuxtLink: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-link")['default']>
+export const LazyNuxtLoadingIndicator: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-loading-indicator")['default']>
+export const LazyNuxtTime: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-time.vue")['default']>
+export const LazyNuxtRouteAnnouncer: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-route-announcer")['default']>
+export const LazyNuxtAnnouncer: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-announcer")['default']>
+export const LazyNuxtImg: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtImg']>
+export const LazyNuxtPicture: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-stubs")['NuxtPicture']>
+export const LazyNuxtPage: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/pages/runtime/page-placeholder")['default']>
+export const LazyNoScript: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['NoScript']>
+export const LazyLink: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Link']>
+export const LazyBase: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Base']>
+export const LazyTitle: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Title']>
+export const LazyMeta: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Meta']>
+export const LazyStyle: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Style']>
+export const LazyHead: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Head']>
+export const LazyHtml: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Html']>
+export const LazyBody: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/head/runtime/components")['Body']>
+export const LazyNuxtIsland: LazyComponent<typeof import("../../../../../../node_modules/nuxt/dist/app/components/nuxt-island")['default']>
+
+export const componentNames: string[]