srcdev-nuxt-components 9.0.18 → 9.1.1

package/app/components/forms/input-copy/tests/__snapshots__/InputCopyCore.spec.ts.snap

@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputCopyCore > Snapshots > custom labels 1`] = `
+"<div class="input-copy-core" data-testid="input-copy-core"><input id="copy-input" type="text" readonly="" aria-readonly="true" class="input-copy-field" value="sk_live_abc123def456"><button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core inline input-copy-button" aria-label="Copy key">
+    <!--v-if-->
+    <!--v-if--><span class="button-text">Copy key</span>
+    <!--v-if-->
+    <!--v-if-->
+  </button></div>"
+`;
+
+exports[`InputCopyCore > Snapshots > default 1`] = `
+"<div class="input-copy-core" data-testid="input-copy-core"><input id="copy-input" type="text" readonly="" aria-readonly="true" class="input-copy-field" value="sk_live_abc123def456"><button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core inline input-copy-button" aria-label="Copy">
+    <!--v-if-->
+    <!--v-if--><span class="button-text">Copy</span>
+    <!--v-if-->
+    <!--v-if-->
+  </button></div>"
+`;
+
+exports[`InputCopyCore > Snapshots > with styleClassPassthrough 1`] = `
+"<div class="input-copy-core my-copy-input" data-testid="input-copy-core"><input id="copy-input" type="text" readonly="" aria-readonly="true" class="input-copy-field" value="sk_live_abc123def456"><button type="button" aria-disabled="false" data-testid="input-button-core" data-theme="default" class="input-button-core inline input-copy-button" aria-label="Copy">
+    <!--v-if-->
+    <!--v-if--><span class="button-text">Copy</span>
+    <!--v-if-->
+    <!--v-if-->
+  </button></div>"
+`;

package/app/layouts/default.vue

@@ -106,6 +106,7 @@ const responsiveNavLinks = {
         { name: "Masonry Grid Sorted", path: "/ui/masonry-grid-sorted" },
         { name: "Masonry Grid Ordered", path: "/ui/masonry-grid-ordered" },
         { name: "Masonry Columns", path: "/ui/masonry-columns" },
+        { name: "Page Hero Highlights", path: "/page-hero-highlights" },
       ],
     },
     {

package/app/pages/index.vue

@@ -31,11 +31,6 @@
           <NuxtLink class="page-body-normal" to="/ui/contact-section">Contact Section</NuxtLink>
         </LayoutRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Treatment Consultant</h1>
-          <NuxtLink class="page-body-normal" to="/ui/services/treatment-consultant">Treatment Consultant</NuxtLink>
-        </LayoutRow>
-
         <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">PopOver component 1</h2>
           <ClientOnly>

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

@@ -3,18 +3,26 @@
     <NuxtLayout name="default">
       <template #layout-content>
         <PageHeroHighlights
+          tag="section"
           max-width="1064px"
           content-align="start"
+          :content-panel="true"
           :highlights-equal-widths="false"
           highlights-justify="start"
           :highlight-title-baseline="true"
           :style-class-passthrough="['mbe-32']"
         >
-          <template #header>
-            <div class="some-header-content">
-              <p class="page-heading-1">Dashboard</p>
-              <p class="page-body-normal">Overview of your account activity and key metrics.</p>
-            </div>
+          <template #header="{ headingId }">
+            <PageHeroHighlightsHeader>
+              <template #start>
+                <h1 :id="headingId" class="page-heading-1">Dashboard</h1>
+                <p class="page-body-normal">Overview of your account activity and key metrics.</p>
+              </template>
+              <template #end>
+                <h1 :id="headingId" class="page-heading-1">Dashboard</h1>
+                <p class="page-body-normal">Overview of your account activity and key metrics.</p>
+              </template>
+            </PageHeroHighlightsHeader>
           </template>
           <template #highlights>
             <div class="highlight">
@@ -59,12 +67,8 @@ useHead({
 <style lang="css">
 .page-hero-highlights-page {
   .page-hero-highlights {
-    .header-row {
-      .header-slot {
-        .some-header-content {
-          padding-block: 4rem 3rem;
-        }
-      }
+    .page-hero-highlights-header {
+      padding-block: 4rem 3rem;
     }
 
     .content-row {

package/modules/icon-sets.ts

@@ -0,0 +1,53 @@
+import { defineNuxtModule, logger } from "@nuxt/kit";
+import { createRequire } from "node:module";
+import { pathToFileURL } from "node:url";
+
+/**
+ * Icon sets used by srcdev-nuxt-components components.
+ * These must be installed in the consumer app to avoid runtime CDN fetches (FOUC).
+ */
+const ICON_SETS = [
+  "@iconify-json/akar-icons",
+  "@iconify-json/bi",
+  "@iconify-json/bitcoin-icons",
+  "@iconify-json/gravity-ui",
+  "@iconify-json/ic",
+  "@iconify-json/lucide",
+  "@iconify-json/material-symbols",
+  "@iconify-json/mdi",
+  "@iconify-json/radix-icons",
+] as const;
+
+export default defineNuxtModule({
+  meta: {
+    name: "srcdev-icon-sets",
+  },
+  setup(_, nuxt) {
+    // Skip when running as the layer's own standalone dev/build
+    if (process.env.SRCDEV_STANDALONE) return;
+
+    // Resolve packages from the consumer's project root, not the layer's own node_modules
+    const consumerRequire = createRequire(pathToFileURL(nuxt.options.rootDir + "/").href);
+
+    const missing = ICON_SETS.filter((pkg) => {
+      try {
+        consumerRequire.resolve(pkg);
+        return false;
+      } catch {
+        return true;
+      }
+    });
+
+    if (missing.length > 0) {
+      logger.info(
+        `[srcdev-nuxt-components] Some icon set packages used by layer components are not installed in this project.\n` +
+          `If you use those components and see icons flashing in on page load, install the relevant packages.\n\n` +
+          `Not installed: ${missing.join(", ")}\n\n` +
+          `Install all at once:\n\n` +
+          `  npm install ${missing.join(" ")}\n\n` +
+          `Your own app's icon sets are unaffected — this only covers sets used by layer components.\n` +
+          `See .claude/skills/srcdev-nuxt-components/skills/icon-sets.md for the component→package mapping.`
+      );
+    }
+  },
+});

package/nuxt.config.ts

@@ -5,6 +5,8 @@ const { resolve } = createResolver(import.meta.url);
 const isStandalone = !!process.env.SRCDEV_STANDALONE;
 
 export default defineNuxtConfig({
+  // debug: !isProduction,
+  debug: false,
   devtools: { enabled: true },
 
   // Server-only secrets — Nuxt reads matching NUXT_* env vars automatically.
@@ -26,6 +28,7 @@ export default defineNuxtConfig({
   modules: [
     // Required by consumers — always included
     resolve("./modules/colour-scheme"),
+    resolve("./modules/icon-sets"),
     "@nuxt/icon",
     ...(process.env.STORYBOOK ? [] : ["@nuxt/fonts"]),
     "@nuxt/image",
@@ -103,6 +106,11 @@ export default defineNuxtConfig({
     // (avoids /_vercel/image which has no source images in storybook-static/)
     provider: process.env.STORYBOOK ? "none" : undefined,
   },
+  vite: {
+    optimizeDeps: {
+      include: ["@oddbird/css-anchor-positioning"],
+    },
+  },
   vue: {
     runtimeCompiler: true,
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.0.18",
+  "version": "9.1.1",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -39,14 +39,57 @@
     "nuxt.config.ts",
     "types.d.ts"
   ],
+  "peerDependencies": {
+    "@iconify-json/akar-icons": "*",
+    "@iconify-json/bi": "*",
+    "@iconify-json/bitcoin-icons": "*",
+    "@iconify-json/gravity-ui": "*",
+    "@iconify-json/ic": "*",
+    "@iconify-json/lucide": "*",
+    "@iconify-json/material-symbols": "*",
+    "@iconify-json/mdi": "*",
+    "@iconify-json/radix-icons": "*"
+  },
+  "peerDependenciesMeta": {
+    "@iconify-json/akar-icons": {
+      "optional": true
+    },
+    "@iconify-json/bi": {
+      "optional": true
+    },
+    "@iconify-json/bitcoin-icons": {
+      "optional": true
+    },
+    "@iconify-json/gravity-ui": {
+      "optional": true
+    },
+    "@iconify-json/ic": {
+      "optional": true
+    },
+    "@iconify-json/lucide": {
+      "optional": true
+    },
+    "@iconify-json/material-symbols": {
+      "optional": true
+    },
+    "@iconify-json/mdi": {
+      "optional": true
+    },
+    "@iconify-json/radix-icons": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.2",
     "@iconify-json/akar-icons": "1.2.7",
     "@iconify-json/bi": "1.2.7",
     "@iconify-json/bitcoin-icons": "1.2.4",
-    "@iconify-json/gravity-ui": "1.2.11",
-    "@iconify-json/material-symbols": "1.2.53",
+    "@iconify-json/gravity-ui": "1.2.12",
+    "@iconify-json/ic": "*",
+    "@iconify-json/lucide": "*",
+    "@iconify-json/material-symbols": "1.2.64",
     "@iconify-json/mdi": "1.2.3",
+    "@iconify-json/radix-icons": "*",
     "@nuxt/eslint": "1.13.0",
     "@nuxt/test-utils": "3.23.0",
     "@nuxtjs/storybook": "9.1.0-29374011.dab79ae",
@@ -55,6 +98,7 @@
     "@storybook/addon-docs": "10.0.7",
     "@storybook/builder-vite": "10.0.7",
     "@vue/test-utils": "2.4.6",
+    "@vueuse/core": "14.2.1",
     "eslint": "9.39.2",
     "eslint-plugin-storybook": "10.0.7",
     "happy-dom": "20.5.0",
@@ -82,10 +126,9 @@
     "@nuxt/image": "2.0.0",
     "@oddbird/css-anchor-positioning": "0.9.0",
     "@pinia/nuxt": "0.11.3",
-    "@vueuse/core": "14.2.0",
-    "@vueuse/motion": "^3.0.3",
+    "@vueuse/motion": "3.0.3",
     "focus-trap-vue": "4.1.0",
-    "nuxt": "4.3.0",
+    "nuxt": "4.4.2",
     "pinia": "3.0.4",
     "pinia-plugin-persistedstate": "4.7.1",
     "zod": "4.3.6"