srcdev-nuxt-components 9.1.50 → 9.1.52

package/app/layouts/default.vue

@@ -16,12 +16,12 @@
           <ResponsiveHeader
             :responsive-nav-links
             :gap-between-first-and-second-nav="12"
-            :style-class-passthrough="['your-scope-class']"
+            :style-class-passthrough="['site-header-nav']"
             :overflow-details-summary-icons="{
               more: 'gravity-ui:ellipsis',
               burger: 'gravity-ui:bars',
             }"
-            :collapse-at-main-nav-intersection="true"
+            :collapse-at-main-nav-intersection="false"
             :allow-expand-on-gesture="false"
           >
             <template #secondaryNavigation>
@@ -215,13 +215,14 @@ onMounted(() => {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr auto;
+  align-items: start;
 
   .main-content {
     container-type: inline-size;
   }
 }
 
-/* Modifiers for ResposiveHeader  */
+/* ─── Header row layout ─────────────────────────────────────────────────── */
 .header {
   .debug-grid {
     display: none !important;
@@ -266,354 +267,44 @@ onMounted(() => {
   }
 }
 
-.navigation {
-  margin: 1.2rem;
-  border-radius: 0.8rem;
-  background-color: #efefef05;
-  border: 1px solid transparent;
-  padding-block: 1rem;
-  padding-inline: 1.2rem;
-  inline-size: 100%;
-  max-height: 6.4rem;
-
-  /* max-block-size: 4.2rem; */
-
-  .main-navigation {
-    gap: 60px;
-
-    .main-navigation-list {
-      &:nth-of-type(1) {
-        gap: 30px;
-      }
-
-      &:nth-of-type(2) {
-        gap: 30px;
-      }
-
-      .main-navigation-item {
-        width: initial;
-
-        .main-navigation-link {
-          position: relative;
-          display: block;
-          color: var(--slate-00);
-          text-decoration: none;
-          margin-inline-start: 0;
-
-          padding: 8px 2px;
-          border-bottom: 0.2rem solid #efefef25;
-
-          &:before {
-            content: "";
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0%;
-            height: 0.2rem;
-            background-color: transparent;
-            transition: all 0.3s;
-          }
-
-          &:hover {
-            &:before {
-              width: 100%;
-              height: 0.2rem;
-              background-color: var(--green-08);
-            }
-          }
-        }
-
-        .main-navigation-details {
-          margin-inline-start: 0;
-
-          .has-toggle-icon {
-            gap: 6px;
-          }
-
-          .main-navigation-details-summary {
-            position: relative;
-            color: var(--slate-00);
-            white-space: nowrap;
-            border-bottom: 0.2rem solid #efefef25;
-
-            &:before {
-              content: "";
-              position: absolute;
-              bottom: 0;
-              left: 0;
-              width: 0%;
-              height: 0.2rem;
-              background-color: transparent;
-              transition: all 0.3s;
-            }
-          }
-
-          &[open] {
-            .main-navigation-details-summary {
-              &:before {
-                width: 100%;
-                height: 0.2rem;
-                background-color: var(--green-08);
-              }
-            }
-          }
-
-          .main-navigation-sub-nav {
-            padding: 8px;
-            border: 1px solid #efefef75;
-            border-radius: 8px;
-            background-color: #000;
-            translate: 0 12px;
-
-            .main-navigation-sub-nav-list {
-              display: grid;
-              grid-template-columns: repeat(2, auto);
-              gap: 12px;
-
-              .main-navigation-sub-nav-item {
-                display: block;
-                margin-bottom: 0;
-
-                &:last-child {
-                  margin-bottom: 0;
-                }
-
-                .main-navigation-sub-nav-link {
-                  position: relative;
-                  display: block;
-                  text-wrap-mode: nowrap;
-                  text-decoration: none;
-                  color: var(--slate-00);
-                  padding: 8px 2px;
-                  border-bottom: 0.2rem solid #efefef25;
-                  min-width: 170px;
-
-                  &:before {
-                    content: "";
-                    position: absolute;
-                    bottom: 0;
-                    left: 0;
-                    width: 0%;
-                    height: 0.2rem;
-                    background-color: transparent;
-                    transition: all 0.3s;
-                  }
-
-                  &:hover {
-                    &:before {
-                      width: 100%;
-                      height: 0.2rem;
-                      background-color: var(--green-08);
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .secondary-navigation {
-    gap: 12px;
-
-    .secondary-navigation-list {
-      .secondary-navigation-item {
-        .secondary-navigation-link {
-          font: inherit;
-          color: var(--slate-00);
-
-          .icon {
-            height: 1.35em;
-            width: 1.35em;
-          }
-        }
-      }
-    }
-
-    .main-navigation-link {
-      color: var(--slate-00);
-
-      .icon {
-        height: 1.35em;
-        width: 1.35em;
-      }
-    }
-
-    .overflow-details {
-      padding: 0;
-      margin: 0;
-
-      .overflow-details-summary {
-        --_icon-zoom: 1;
-        --_icon-size: 20px;
-        --_border-width: 1px;
-        --_outline-width: 1px;
-        padding-inline: 5px;
-
-        border-radius: 4px;
-        border: var(--_border-width) solid #ffffff90;
-        outline: var(--_outline-width) solid #ffffff10;
-        background-color: var(--slate-08);
-
-        width: 3rem;
-        height: 3rem;
-
-        &:hover,
-        &:focus-visible {
-          --_icon-zoom: 1.2;
-          outline: 2px solid var(--green-08);
-          outline-offset: 0.3rem;
-
-          .icon {
-            scale: 0.9;
-          }
-        }
-
-        .icon {
-          color: var(--slate-00);
-          width: 2.6rem;
-          height: 2.6rem;
-        }
-      }
-
-      .overflow-details-nav {
-        top: 135%;
-        right: 0;
-        background-color: #000;
-        border: 0.1rem solid #ffffff90;
-        border-radius: 8px;
-        padding-block: 0;
-        margin-block-end: -0.1rem;
-        gap: 0.8rem;
-
-        .overflow-navigation-wrapper {
-          --overflow-nav-padding-inline: 0.8rem;
-          --overflow-nav-items-gap: 0px;
-          --overflow-nav-items-padding-block: 0.8rem;
-          display: flex;
-          flex-direction: column;
-          gap: var(--overflow-nav-items-gap);
-
-          .overflow-navigation-list {
-            display: none;
-
-            &.visible {
-              display: flex;
-              flex-direction: column;
-              gap: var(--overflow-nav-items-gap);
-              min-width: var(--_overflow-navigation-list-min-width, auto);
-            }
-
-            .overflow-navigation-item {
-              display: none;
-
-              &.visible {
-                display: block;
-              }
-
-              .overflow-navigation-link {
-                text-decoration: none;
-                color: inherit;
-                padding-block: var(--overflow-nav-items-padding-block);
-                padding-inline: var(--overflow-nav-padding-inline);
-                display: flex;
-                color: var(--slate-00);
-                border-bottom: 0.2rem solid #efefef75;
-
-                &:hover {
-                  background-color: var(--slate-07);
-                  border-color: var(--green-08);
-                }
-              }
-
-              .overflow-navigation-details {
-                &.expanding-panel {
-                  margin-block-end: 0;
-
-                  .expanding-panel-details {
-                    .expanding-panel-summary {
-                      padding-block: var(--overflow-nav-items-padding-block);
-                      padding-inline: var(--overflow-nav-padding-inline);
-                      gap: 1rem;
-                      color: var(--slate-00);
-                      border-bottom: 0.2rem solid #efefef75;
-
-                      &:hover {
-                        background-color: var(--slate-07);
-                        border-color: var(--green-08);
-                      }
-
-                      .label-wrapper {
-                        .overflow-navigation-text {
-                          text-wrap: nowrap;
-                        }
-                      }
-                      .icon-wrapper {
-                        padding: 0;
-                      }
-                    }
-
-                    &[open] {
-                      .expanding-panel-summary {
-                        border-color: transparent;
-
-                        &:hover {
-                          background-color: var(--slate-07);
-                          border-color: var(--green-08);
-                        }
-                      }
-                      + .expanding-panel-content {
-                        border-bottom: 0.2rem solid #efefef75;
-                        .inner {
-                          .overflow-navigation-sub-nav-inner {
-                            margin-top: var(--overflow-nav-items-gap);
-                          }
-                        }
-                      }
-                    }
-                  }
-
-                  .expanding-panel-content {
-                    border-bottom: 0.2rem solid transparent;
-
-                    .inner {
-                      margin-top: 0;
-
-                      .overflow-navigation-sub-nav-inner {
-                        margin-top: 0;
-
-                        .overflow-navigation-sub-nav-list {
-                          display: flex;
-                          flex-direction: column;
-                          gap: 2px;
-
-                          .overflow-navigation-sub-nav-item {
-                            padding-block: var(--overflow-nav-items-padding-block);
-                            padding-inline: var(--overflow-nav-padding-inline);
-                            font-size: var(--step-4);
-                            color: var(--slate-00);
-
-                            &:hover {
-                              background-color: var(--slate-07);
-                              border-color: var(--green-08);
-                            }
-                            .overflow-navigation-sub-nav-link {
-                              text-decoration: none;
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
+/* ─── ResponsiveHeader token overrides for this layout ──────────────────── */
+.site-header-nav {
+  --responsive-header-margin: 1.2rem;
+  --responsive-header-bg: #efefef05;
+  --responsive-header-border: 1px solid transparent;
+  --responsive-header-border-radius: 0.8rem;
+  --responsive-header-padding-block: 1rem;
+  --responsive-header-padding-inline: 1.2rem;
+  --responsive-header-max-height: 6.4rem;
+  --responsive-header-inline-size: 100%;
+
+  --responsive-header-color: var(--slate-00);
+  --responsive-header-link-color: var(--slate-00);
+
+  --responsive-header-sub-nav-bg: #000;
+  --responsive-header-sub-nav-border: 1px solid #efefef75;
+
+  --responsive-header-overflow-btn-bg: var(--slate-08);
+  --responsive-header-overflow-btn-size: 3rem;
+  --responsive-header-overflow-btn-border: 1px solid #ffffff90;
+  --responsive-header-overflow-btn-outline: 1px solid #ffffff10;
+  --responsive-header-overflow-btn-icon-color: var(--slate-00);
+  --responsive-header-overflow-btn-hover-outline: 2px solid var(--green-08);
+
+  --responsive-header-overflow-nav-bg: #000;
+  --responsive-header-overflow-nav-border: 0.1rem solid #ffffff90;
+  --responsive-header-overflow-nav-padding-block: 0;
+
+  --overflow-nav-link-color: var(--slate-00);
+  --overflow-nav-link-border-color: #efefef75;
+  --overflow-nav-sub-item-color: var(--slate-00);
+  --overflow-nav-sub-item-font-size: var(--step-4);
+
+  --responsive-nav-decorator-indicator-color: var(--slate-00);
+  --responsive-nav-decorator-hovered-indicator-color: var(--green-08);
+  --responsive-nav-decorator-hovered-bg: oklch(100% 0 0 / 8%);
+  --overflow-nav-decorator-indicator-color: var(--slate-00);
+  --overflow-nav-decorator-hovered-indicator-color: var(--green-08);
+  --overflow-nav-decorator-hovered-bg: oklch(100% 0 0 / 6%);
 }
 </style>

package/app/layouts/site-navigation-demo.vue

@@ -103,15 +103,16 @@ const navItemData: NavItemData = {
   grid-template-columns: repeat(3, 1fr);
   gap: 1.6rem;
 
-  &--wide {
+  @media (max-width: 600px) {
     grid-template-columns: repeat(2, 1fr);
   }
+}
+
+.snav-demo-grid--wide {
+  grid-template-columns: repeat(2, 1fr);
 
   @media (max-width: 600px) {
-    grid-template-columns: repeat(2, 1fr);
-    &--wide {
-      grid-template-columns: 1fr;
-    }
+    grid-template-columns: 1fr;
   }
 }
 
@@ -131,31 +132,31 @@ const navItemData: NavItemData = {
   align-items: start;
   margin-block-end: 4rem;
 
-  &__text {
-    h2,
-    h3 {
-      margin-block-start: 2.4rem;
-    }
-    p {
-      line-height: 1.6;
-      margin-block-end: 1.6rem;
-    }
+  @media (max-width: 650px) {
+    grid-template-columns: 1fr;
   }
+}
 
-  &__img {
-    width: 100%;
-    height: auto;
-    aspect-ratio: 3 / 4;
-    object-fit: cover;
-    border-radius: 0.4rem;
-    display: block;
+.snav-demo-split__text {
+  h2,
+  h3 {
+    margin-block-start: 2.4rem;
   }
-
-  @media (max-width: 650px) {
-    grid-template-columns: 1fr;
+  p {
+    line-height: 1.6;
+    margin-block-end: 1.6rem;
   }
 }
 
+.snav-demo-split__img {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 3 / 4;
+  object-fit: cover;
+  border-radius: 0.4rem;
+  display: block;
+}
+
 .snav-demo-services {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -170,17 +171,18 @@ const navItemData: NavItemData = {
   border-radius: 0.8rem;
   overflow: hidden;
   background: oklch(100% 0 0 / 5%);
+}
+
+.snav-demo-service-card__body {
+  padding: 1.6rem;
 
-  &__body {
-    padding: 1.6rem;
-    h3 {
-      margin-block-end: 0.8rem;
-    }
-    p {
-      font-size: 1.4rem;
-      line-height: 1.6;
-      opacity: 0.8;
-    }
+  h3 {
+    margin-block-end: 0.8rem;
+  }
+  p {
+    font-size: 1.4rem;
+    line-height: 1.6;
+    opacity: 0.8;
   }
 }
 </style>

package/app/pages/page-hero-highlights.vue

@@ -178,7 +178,7 @@ const highlightsJustifyData = ref<IFormMultipleOptions>({
     border-radius: 0.8rem;
     background: var(--slate-01);
 
-    &__heading {
+    .demo-controls__heading {
       font-size: 1.1rem;
       font-weight: 600;
       text-transform: uppercase;
@@ -187,14 +187,14 @@ const highlightsJustifyData = ref<IFormMultipleOptions>({
       margin-block-end: 1.2rem;
     }
 
-    &__toggles {
+    .demo-controls__toggles {
       display: flex;
       flex-wrap: wrap;
       gap: 0.4rem 2.4rem;
       margin-block-end: 1.6rem;
     }
 
-    &__selects {
+    .demo-controls__selects {
       display: flex;
       flex-direction: column;
       gap: 0.8rem;

package/app/pages/ui/scroll-reveal-image.vue

@@ -413,7 +413,7 @@ const radiusData = ref<IFormMultipleOptions>({
       grid-template-columns: 1fr 2fr;
     }
 
-    &__info {
+    & .sri-demo-row__info {
       position: sticky;
       top: 2.4rem;
     }
@@ -464,7 +464,7 @@ const radiusData = ref<IFormMultipleOptions>({
     border-radius: 0.8rem;
     margin-block: 2.4rem;
 
-    &__heading {
+    & .demo-controls__heading {
       font-size: 1.1rem;
       font-weight: 600;
       text-transform: uppercase;
@@ -473,7 +473,7 @@ const radiusData = ref<IFormMultipleOptions>({
       margin-block-end: 1.2rem;
     }
 
-    &__fields {
+    & .demo-controls__fields {
       display: flex;
       flex-direction: column;
       gap: 1.2rem;

package/app/pages/ui/simple-grid.vue

@@ -6,11 +6,7 @@
           <h1 class="page-heading-3">Simple Grid</h1>
           <p class="page-body-normal">Simple grid displaying dummy posts data</p>
 
-          <GridCore
-            v-if="status === 'success'"
-            :grid-data="postsData?.posts.slice(0, displayCount) ?? ({} as Posts)"
-            :style-class-passthrough="['display-posts']"
-          >
+          <LayoutGridByWidth v-if="status === 'success'" column-width="300px" gap="2rem">
             <template v-for="(item, index) in postsData?.posts.slice(0, displayCount)" :key="item.id" #[item.id]>
               <div class="display-post-item">
                 <div>Views: {{ item.views }}</div>
@@ -18,7 +14,7 @@
                 <div>{{ item.body }}</div>
               </div>
             </template>
-          </GridCore>
+          </LayoutGridByWidth>
 
           <p v-else class="page-body-normal">&hellip;Loading</p>
         </PageRow>
@@ -47,20 +43,13 @@ const { data: postsData, status } = await useFetch<Posts>("https://dummyjson.com
 </script>
 
 <style lang="css">
-.display-posts {
+.display-post-item {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-
-  gap: 2rem;
-
-  .display-post-item {
-    display: grid;
-    grid-template-rows: subgrid;
-    grid-row: span 3;
-    gap: 1.2rem;
-    outline: 0.1rem solid green;
-    border-radius: 0.4rem;
-    padding: 1.2rem;
-  }
+  grid-template-rows: subgrid;
+  grid-row: span 3;
+  gap: 1.2rem;
+  outline: 0.1rem solid green;
+  border-radius: 0.4rem;
+  padding: 1.2rem;
 }
 </style>

package/modules/colour-scheme.ts

@@ -6,7 +6,7 @@ export default defineNuxtModule({
     configKey: "colourScheme",
   },
   setup(_, nuxt) {
-    const enabled = (nuxt.options.runtimeConfig.public?.colourScheme as { enabled?: boolean } | undefined)?.enabled ?? true;
+    const enabled = ((nuxt.options.runtimeConfig.public as Record<string, unknown>).colourScheme as { enabled?: boolean } | undefined)?.enabled ?? true;
 
     if (!enabled) return;
 

package/nuxt.config.ts

@@ -109,15 +109,24 @@ export default defineNuxtConfig({
     // (avoids /_vercel/image which has no source images in storybook-static/)
     provider: process.env.STORYBOOK ? "none" : undefined,
   },
+  nitro: {
+    externals: {
+      // Nitro's dependency tracer only copies vue's CJS build but Node.js 22 (ESM)
+      // resolves the "import"+"node" export condition → ./index.mjs, which doesn't exist
+      // in the output. Inlining forces Nitro/Rollup to bundle Vue directly, avoiding the
+      // runtime resolution entirely.
+      inline: ["vue", "@vue/runtime-core", "@vue/runtime-dom", "@vue/reactivity", "@vue/shared", "@vue/server-renderer"],
+    },
+  },
   vite: {
     optimizeDeps: {
-      include: ["@oddbird/css-anchor-positioning"],
+      include: ["@oddbird/css-anchor-positioning", "@vue/devtools-core", "@vue/devtools-kit", "vue-qrcode-reader"],
     },
   },
   vue: {
     runtimeCompiler: true,
   },
-  compatibilityDate: "2026-01-30",
+  compatibilityDate: "2026-05-20",
   typescript: {
     includeWorkspace: true,
     strict: true,