srcdev-nuxt-components 9.2.8 → 9.2.10

package/.claude/commands/create-release-notes.md

@@ -0,0 +1,34 @@
+---
+description: Produce release notes as a fenced markdown block, scoped to commits since the last release
+---
+
+Produce release notes for the commits since the last `chore(release):` commit. Always output them as a single fenced ` ```markdown ` code block so the content can be copied directly into a git tag, GitHub release, or changelog — never render it as plain markdown.
+
+Steps:
+
+1. **Determine the range.** Run `git log --oneline -20` and find the most recent `chore(release): release vX.Y.Z` commit — that's the boundary. Also check `package.json` for the current version if you need to confirm what's already shipped vs pending.
+2. **Review each commit since that boundary.** Run `git show <commit> --stat` (and the message) for each one to understand what changed. Skip other `chore(release):` commits themselves, and skip purely internal/tooling commits (e.g. adding slash commands, promoting doc gotchas) unless they're user-facing.
+3. **Draft the notes** using the format below. Only include sections that have content — omit empty headings. Keep each bullet to one line where possible. Lead with the most user-facing changes (New, Fixed) before internal ones (Changed, Documentation). Fold minor follow-up commits (e.g. a test/docs completion commit for a feature shipped a commit earlier) into the same bullet as the feature rather than giving them their own line — unless the follow-up is substantial enough to warrant one.
+4. **Output** the result wrapped in a ` ```markdown ` fence. Do not commit, tag, or push anything — this command only produces text for review.
+
+## Format
+
+```markdown
+## vX.Y.Z
+
+### New
+
+- **`ComponentOrComposableName`** — one-line description of what it does and why it exists
+
+### Fixed
+
+- Short description of what was wrong and what was corrected
+
+### Changed
+
+- Short description of intentional behaviour or API changes
+
+### Documentation
+
+- **`skill-name` skill** — new/updated: what it covers
+```

package/.claude/settings.json

@@ -96,7 +96,9 @@
       "Bash(git reset *)",
       "Read(//Users/simoncornforth/.claude/**)",
       "Bash(git push *)",
-      "Bash(node -e \"JSON.parse\\(require\\('fs'\\).readFileSync\\('.vscode/srcdev-component-pricing-card.code-snippets','utf8'\\)\\); console.log\\('valid json'\\)\")"
+      "Bash(node -e \"JSON.parse\\(require\\('fs'\\).readFileSync\\('.vscode/srcdev-component-pricing-card.code-snippets','utf8'\\)\\); console.log\\('valid json'\\)\")",
+      "Bash(rm /Users/simoncornforth/websites/nuxt-components/.claude/skills/create-release-notes.md)",
+      "Bash(node -e \"console.log\\('sanity: file exists and readable'\\)\")"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/instepreflexology",

package/.claude/skills/index.md

@@ -48,7 +48,6 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── robots-env-aware.md               — @nuxtjs/robots: allow crawling on prod domain only, block on preview/staging via env var
 ├── new-app-scaffold.md               — scaffold a new Nuxt consumer app extending this layer (package.json, nuxt.config, app structure, CLAUDE.md)
 ├── qa-panel.md                       — collapsible panel for toggling component props live on a page (always on for /pages/ui/ demo pages; gate with isDev in consuming apps)
-├── create-release-notes.md           — produce release notes as a fenced markdown block from git log (named to avoid colliding with the built-in /release-notes command)
 ├── pull-request-description.md       — produce a PR description as a fenced markdown block from git diff vs main
 ├── using-component-skills.md         — discover and use component skills in consumer apps: where skills land, browsing patterns, workflow for deciding build vs. compose
 ├── composable-canonical-url.md       — useCanonicalUrl: set <link rel="canonical"> from runtimeConfig.public.canonicalHost; layout setup, node types

package/app/assets/styles/setup/01.config/_head.css

@@ -24,7 +24,6 @@ html {
     color: var(--colour-text-default);
     font-family: var(--font-family);
     font-size: var(--step-4);
-    /* min-height: 100dvh; */
     transition:
       background-color 0.4s ease,
       color 0.4s ease;
@@ -33,12 +32,11 @@ html {
 
     #__nuxt {
       height: 100%;
-      div {
-        .page-layout {
-          min-block-size: 100svh;
-          display: grid;
-          grid-template-rows: auto 1fr auto;
-        }
+      .page-layout {
+        min-block-size: 100svh;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        align-items: start;
       }
     }
   }

package/app/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="expanding-panel" :class="[elementClasses, { 'content-is-on-top': contentIsOnTop }]">
+  <div ref="rootEl" class="expanding-panel" :class="[elementClasses, { 'content-is-on-top': contentIsOnTop }]">
     <details class="expanding-panel-details" :name :open @toggle="onDetailsToggle">
       <summary
         :id="`id-${name}-trigger`"
@@ -32,6 +32,8 @@
 </template>
 
 <script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+
 interface Props {
   name?: string;
   animationDuration?: number;
@@ -56,6 +58,17 @@ const open = computed(() => props.forceOpened || isPanelOpen.value);
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
+// contentIsOnTop panels behave like a dropdown/overlay (e.g. ContentDocs' mobile nav) rather
+// than an inline accordion — clicking outside is the expected way to dismiss those, matching
+// native <select>/menu behaviour. Not wanted for ordinary accordions (forceOpened is always
+// false here too — a forceOpened panel isn't meant to be dismissible by any interaction).
+const rootEl = ref<HTMLElement | null>(null);
+onClickOutside(rootEl, () => {
+  if (props.contentIsOnTop && !props.forceOpened && isPanelOpen.value) {
+    isPanelOpen.value = false;
+  }
+});
+
 if (import.meta.dev) {
   watch(
     () => props.contentIsOnTop,
@@ -97,10 +110,9 @@ const onDetailsToggle = (event: Event) => {
         cursor: pointer;
       }
       .expanding-panel-summary {
-        display: flex;
+        display: grid;
         align-items: center;
-        justify-content: space-between;
-        flex-direction: row;
+        grid-template-columns: 1fr auto;
         gap: var(--expanding-panel-summary-gap, 1rem);
         list-style: none;
         user-select: none;

package/app/components/02.molecules/expandable/expanding-panel/tests/ExpandingPanel.spec.ts

@@ -427,6 +427,53 @@ describe("ExpandingPanel", () => {
     expect(vm.isPanelOpen).toBe(true);
   });
 
+  it("closes an open contentIsOnTop panel on outside click", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "content-on-top-outside-click", contentIsOnTop: true },
+      attachTo: document.body,
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelInstance;
+
+    await wrapper.find("summary").trigger("click");
+    expect(vm.isPanelOpen).toBe(true);
+
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+
+    expect(vm.isPanelOpen).toBe(false);
+    wrapper.unmount();
+  });
+
+  it("does not close on outside click when contentIsOnTop is false (ordinary accordion)", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "content-on-top-outside-click-inline" },
+      attachTo: document.body,
+    });
+    const vm = wrapper.vm as unknown as ExpandingPanelInstance;
+
+    await wrapper.find("summary").trigger("click");
+    expect(vm.isPanelOpen).toBe(true);
+
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+
+    expect(vm.isPanelOpen).toBe(true);
+    wrapper.unmount();
+  });
+
+  it("does not close a forceOpened contentIsOnTop panel on outside click", async () => {
+    const wrapper = await mountSuspended(ExpandingPanel, {
+      props: { name: "content-on-top-outside-click-forced", contentIsOnTop: true, forceOpened: true },
+      attachTo: document.body,
+    });
+
+    document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await nextTick();
+
+    expect(wrapper.find("details").attributes("open")).toBeDefined();
+    wrapper.unmount();
+  });
+
   // ─── name prop / useId fallback ───────────────────────────────────────────
 
   it("uses the provided name in ARIA attributes", async () => {

package/app/components/02.molecules/pricing-card/PricingCard.vue

@@ -141,6 +141,9 @@ watch(
       top: -0.6rem;
       left: 50%;
       transform: translateX(-50%);
+      /* Above .pricing-card__ribbon-clip (z-index: 1) — without this the badge has no stacking
+         context of its own and the ribbon, which does, paints over it regardless of DOM order. */
+      z-index: 2;
 
       display: inline-block;
       padding: 0.4rem 1rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.2.8",
+  "version": "9.2.10",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/.claude/skills/create-release-notes.md

@@ -1,48 +0,0 @@
-# Release Notes
-
-## Overview
-
-When asked to create release notes, always produce a fenced markdown code block (` ```markdown `) so the content can be copied and pasted directly into a git tag, GitHub release, or changelog.
-
-## Steps
-
-### 1. Determine the version
-
-Run `git log --oneline -8` to find the most recent release commit and the commits since the previous release.
-
-### 2. Review the diff
-
-Run `git show <commit> --stat` for each commit since the last release to understand what changed.
-
-### 3. Produce a fenced markdown block
-
-Always wrap the output in a ` ```markdown ` code fence — never render it as plain markdown. This ensures the user can copy the raw text without formatting being stripped.
-
-## Format
-
-```markdown
-## vX.Y.Z
-
-### New
-
-- **`ComponentOrComposableName`** — one-line description of what it does and why it exists
-
-### Fixed
-
-- Short description of what was wrong and what was corrected
-
-### Changed
-
-- Short description of intentional behaviour or API changes
-
-### Documentation
-
-- **`skill-name` skill** — new/updated: what it covers
-```
-
-## Notes
-
-- Only include sections that have content — omit empty headings
-- Keep each bullet to one line where possible
-- Lead with the most user-facing changes (New, Fixed) before internal ones (Documentation, Tests)
-- Test additions warrant their own section only when substantial; otherwise fold into the relevant New/Fixed bullet