srcdev-nuxt-components 9.4.12 → 9.5.1

package/app/composables/tests/useCancellableTimer.spec.ts

@@ -132,4 +132,52 @@ describe("useCancellableTimer", () => {
       expect(secondResolved).toBe(true);
     });
   });
+  describe("pause / resume", () => {
+    it("holds a pending wait while paused and resolves after resume", async () => {
+      const { wait, start, pause, resume } = useCancellableTimer();
+      start();
+
+      let resolved = false;
+      wait(100).then(() => {
+        resolved = true;
+      });
+      pause();
+      await vi.advanceTimersByTimeAsync(500);
+      expect(resolved).toBe(false);
+
+      resume();
+      await vi.advanceTimersByTimeAsync(100);
+      expect(resolved).toBe(true);
+    });
+
+    it("holds a scheduled callback while paused", async () => {
+      const { schedule, start, pause, resume } = useCancellableTimer();
+      start();
+
+      const fn = vi.fn();
+      schedule(fn, 100);
+      pause();
+      await vi.advanceTimersByTimeAsync(500);
+      expect(fn).not.toHaveBeenCalled();
+
+      resume();
+      await vi.advanceTimersByTimeAsync(100);
+      expect(fn).toHaveBeenCalledOnce();
+    });
+
+    it("stop still rejects a wait held by pause", async () => {
+      const { wait, start, stop, pause } = useCancellableTimer();
+      start();
+
+      let rejected = false;
+      wait(100).catch(() => {
+        rejected = true;
+      });
+      pause();
+      await vi.advanceTimersByTimeAsync(300);
+      stop();
+      await Promise.resolve();
+      expect(rejected).toBe(true);
+    });
+  });
 });

package/app/composables/tests/useMaxChildWidth.spec.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { defineComponent, h } from "vue";
+import { useMaxChildWidth } from "../useMaxChildWidth";
+
+const widths: Record<string, number> = { short: 40, long: 120, other: 300 };
+
+const offsetWidthSpy = vi
+  .spyOn(HTMLElement.prototype, "offsetWidth", "get")
+  .mockImplementation(function (this: HTMLElement) {
+    return widths[this.dataset.size ?? ""] ?? 0;
+  });
+
+afterEach(() => {
+  offsetWidthSpy.mockClear();
+});
+
+const mountWith = (refKey?: string, items = ["short", "long"]) =>
+  mountSuspended(
+    defineComponent({
+      setup() {
+        const { maxChildWidth, updateMaxChildWidth } = refKey
+          ? useMaxChildWidth(".item", "100px", refKey)
+          : useMaxChildWidth(".item", "100px");
+        return { maxChildWidth, updateMaxChildWidth };
+      },
+      render() {
+        return h("div", [
+          h(
+            "div",
+            { ref: refKey ?? "itemsContainer" },
+            items.map((size) => h("span", { class: "item", "data-size": size }))
+          ),
+          h("span", { class: "item", "data-size": "other" }),
+        ]);
+      },
+    })
+  );
+
+describe("useMaxChildWidth", () => {
+  it("starts at the fallback", async () => {
+    const wrapper = await mountWith();
+
+    expect(wrapper.vm.maxChildWidth).toBe("100px");
+  });
+
+  it("measures the widest match inside the itemsContainer template ref", async () => {
+    const wrapper = await mountWith();
+    wrapper.vm.updateMaxChildWidth();
+
+    expect(wrapper.vm.maxChildWidth).toBe("120px");
+  });
+
+  it("uses a custom template ref name", async () => {
+    const wrapper = await mountWith("optionsList");
+    wrapper.vm.updateMaxChildWidth();
+
+    expect(wrapper.vm.maxChildWidth).toBe("120px");
+  });
+
+  it("falls back when nothing matches", async () => {
+    const wrapper = await mountWith(undefined, []);
+    wrapper.vm.updateMaxChildWidth();
+
+    expect(wrapper.vm.maxChildWidth).toBe("100px");
+  });
+});

package/app/composables/useCancellableTimer.ts

@@ -1,8 +1,23 @@
+const PAUSE_POLL_MS = 100;
+
 export function useCancellableTimer() {
   let _isActive = false;
+  let _isPaused = false;
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
   let rejectCurrent: (() => void) | null = null;
 
+  // While paused, a due timer re-arms itself instead of firing, so the sequence resumes where it stopped.
+  const arm = (fn: () => void, ms: number) => {
+    timeoutId = setTimeout(() => {
+      if (!_isActive) return;
+      if (_isPaused) {
+        arm(fn, PAUSE_POLL_MS);
+        return;
+      }
+      fn();
+    }, ms);
+  };
+
   const wait = (ms: number): Promise<void> =>
     new Promise((resolve, reject) => {
       if (!_isActive) {
@@ -10,18 +25,15 @@ export function useCancellableTimer() {
         return;
       }
       rejectCurrent = reject;
-      timeoutId = setTimeout(() => {
+      arm(() => {
         rejectCurrent = null;
-        if (_isActive) resolve();
-        else reject();
+        resolve();
       }, ms);
     });
 
   const schedule = (fn: () => void, ms: number) => {
     if (!_isActive) return;
-    timeoutId = setTimeout(() => {
-      if (_isActive) fn();
-    }, ms);
+    arm(fn, ms);
   };
 
   const stop = () => {
@@ -38,5 +50,13 @@ export function useCancellableTimer() {
     _isActive = true;
   };
 
-  return { wait, schedule, stop, start };
+  const pause = () => {
+    _isPaused = true;
+  };
+
+  const resume = () => {
+    _isPaused = false;
+  };
+
+  return { wait, schedule, stop, start, pause, resume };
 }

package/app/composables/useMaxChildWidth.ts

@@ -1,15 +1,14 @@
-import type { Ref } from "vue";
-
 /**
  * useMaxChildWidth composable
  * Measures the widest child element matching a selector inside a container and returns a reactive pixel width.
  * @param selector - CSS selector for child elements to measure
  * @param fallback - fallback width if no children found (default: "100px")
- * @returns { maxChildWidth, itemsContainer, updateMaxChildWidth }
+ * @param refKey - template ref name of the container element (default: "itemsContainer", i.e. `ref="itemsContainer"`)
+ * @returns { maxChildWidth, updateMaxChildWidth }
  */
-export function useMaxChildWidth(selector: string, fallback = "100px") {
+export function useMaxChildWidth(selector: string, fallback = "100px", refKey = "itemsContainer") {
   const maxChildWidth = ref<string>(fallback);
-  const itemsContainer = ref<HTMLElement | null>(null);
+  const itemsContainer = useTemplateRef<HTMLElement>(refKey);
 
   function updateMaxChildWidth() {
     if (!itemsContainer.value) return;
@@ -24,7 +23,6 @@ export function useMaxChildWidth(selector: string, fallback = "100px") {
 
   return {
     maxChildWidth,
-    itemsContainer,
     updateMaxChildWidth,
   };
 }

package/app/types/app-config.d.ts

@@ -1,4 +1,5 @@
 import type { SemanticTheme, DisplayPromptTheme, DisplayToastTheme, DisplayToastPosition, DisplayToastAlignment } from "./components"
+import type { InputLabelIndicator } from "./forms/types.forms"
 
 declare module "@nuxt/schema" {
   interface AppConfigInput {
@@ -12,6 +13,7 @@ declare module "@nuxt/schema" {
         dismissible?: boolean
         useAutoFocus?: boolean
         masked?: boolean
+        closeLabel?: string
       }
       displayToast?: {
         appearance?: {
@@ -35,6 +37,14 @@ declare module "@nuxt/schema" {
         allowContentScroll?: boolean
         theme?: SemanticTheme
         closeIcon?: string
+        closeLabel?: string
+      }
+      inputLabel?: {
+        indicator?: InputLabelIndicator
+        requiredText?: string
+        optionalText?: string
+        requiredIcon?: string
+        optionalIcon?: string
       }
     }
   }

package/app/types/components/cookie-consent-banner.d.ts

@@ -4,5 +4,8 @@ export type CookieConsentStatus = "unset" | "granted" | "denied"
 
 export interface CookieConsentBannerProps {
   theme?: SemanticTheme
+  ariaLabel?: string
+  icon?: string
+  showIcon?: boolean
   styleClassPassthrough?: string | string[]
 }

package/app/types/components/index.ts

@@ -11,7 +11,7 @@ export * from "./qr-code.d"
 export * from "./alert-mask-core.d"
 export * from "./container-glow.d"
 export * from "./hero-text"
-export * from "./navigation-horizontal.d"
+export * from "./nav-item.d"
 export * from "./social-icons-list.d"
 export * from "./content-docs.d"
 export * from "./breadcrumb"
@@ -21,3 +21,8 @@ export * from "./marquee-scroller.d"
 export * from "./rotating-carousel-image.d"
 export * from "./skip-links.d"
 export * from "./select-menu.d"
+export * from "./price-list.d"
+export * from "./opening-hours.d"
+export * from "./samaritan-prompt.d"
+export * from "./profile-section.d"
+export * from "./services-card.d"

package/app/types/components/opening-hours.d.ts

@@ -0,0 +1,48 @@
+/** 0 = Monday ... 6 = Sunday */
+export type OpeningWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+export type OpeningStatus = "open" | "closed" | "24-hours" | "by-appointment";
+
+export interface OpeningSession {
+  /** 24-hour "HH:MM" */
+  opens: string;
+  /** 24-hour "HH:MM"; earlier than `opens` means it closes after midnight */
+  closes: string;
+  label?: string;
+}
+
+export interface OpeningDay {
+  day: OpeningWeekday;
+  /** Defaults to "open" when sessions are given, otherwise "closed" */
+  status?: OpeningStatus;
+  sessions?: OpeningSession[];
+  note?: string;
+}
+
+export interface OpeningException {
+  /** "YYYY-MM-DD" */
+  from: string;
+  /** "YYYY-MM-DD", inclusive; omit for a single day */
+  to?: string;
+  label?: string;
+  status?: OpeningStatus;
+  sessions?: OpeningSession[];
+  note?: string;
+}
+
+export interface OpeningHoursStructuredData {
+  /** schema.org type, e.g. "HairSalon", "Restaurant" */
+  type?: string;
+  name?: string;
+  /** Match the @id of the site's main business JSON-LD so search engines merge them */
+  id?: string;
+}
+
+export interface OpeningHoursSpecification {
+  "@type": "OpeningHoursSpecification";
+  dayOfWeek?: string | string[];
+  opens: string;
+  closes: string;
+  validFrom?: string;
+  validThrough?: string;
+}

package/app/types/components/price-list.d.ts

@@ -0,0 +1,11 @@
+export interface PriceItem {
+  description: string;
+  price: string;
+  from?: boolean;
+}
+
+export interface PriceListData {
+  headingtext: string;
+  headingIcon?: string;
+  items: PriceItem[];
+}

package/app/types/components/profile-section.d.ts

@@ -0,0 +1,6 @@
+export interface ProfilePicture {
+  src: string;
+  alt: string;
+  width?: number;
+  height?: number;
+}

package/app/types/components/samaritan-prompt.d.ts

@@ -0,0 +1,13 @@
+export type SamaritanPromptEffect = "typewriter" | "word-pulse";
+
+export interface SamaritanPromptMessageConfig {
+  text: string;
+  effect?: SamaritanPromptEffect;
+  typeSpeed?: number;
+  deleteSpeed?: number;
+  holdDuration?: number;
+  pauseDuration?: number;
+  wordDuration?: number;
+  fadeDuration?: number;
+  hideCursorInCycle?: boolean;
+}

package/app/types/components/services-card.d.ts

@@ -0,0 +1,9 @@
+export interface ServicesCardEyebrowConfig {
+  tag?: "p" | "div" | "span";
+  fontSize?: "large" | "medium" | "small";
+}
+
+export interface ServicesCardHeroConfig {
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  fontSize?: "display" | "title" | "heading" | "subheading" | "label";
+}

package/app/types/components/slider-gallery.d.ts

@@ -10,4 +10,6 @@ export interface IGalleryData {
     description: string
   }
   textBrightness: "light" | "dark"
+  /** Link for the slide's call-to-action; no link is rendered without it. */
+  href?: string
 }

package/app/types/components/social-icons-list.d.ts

@@ -3,4 +3,6 @@ export interface ISocialIcon {
   iconName: string;
   baseHref: string;
   profileId: string;
+  /** Accessible name for the link; overrides the list's linkLabelTemplate. */
+  label?: string;
 }

package/app/types/forms/types.forms.d.ts

@@ -10,6 +10,9 @@ export type InputButtonVariant = "primary" | "secondary" | "tertiary" | "inline"
 // Input variant types for form components
 export type InputUiVariant = "normal" | "outlined" | "underlined";
 
+// Which fields InputLabel marks: required ones, optional ones, or neither
+export type InputLabelIndicator = "none" | "required" | "optional";
+
 // Other form-specific types
 export type CheckboxAppearance = null | "with-decorator";
 export type CheckboxStyle = "check" | "cross";

package/app/types/forms/types.zodFormControl.d.ts

@@ -2,9 +2,6 @@ import type {
   IFieldsInitialState,
   IFormFieldsState,
   IFormFieldsC12,
-  IFormFieldC12,
-  IApiErrorMessages,
-  ICustomErrorMessage,
   IErrorMessagesArr,
 } from "../../app/types/forms/types.forms"
 

package/app/utils/opening-hours.ts

@@ -0,0 +1,44 @@
+import type {
+  OpeningDay,
+  OpeningException,
+  OpeningHoursSpecification,
+  OpeningSession,
+  OpeningStatus,
+} from "~/types/components/opening-hours";
+
+const SCHEMA_DAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+
+export const resolveOpeningStatus = (entry: { status?: OpeningStatus; sessions?: OpeningSession[] }): OpeningStatus =>
+  entry.status ?? (entry.sessions?.length ? "open" : "closed");
+
+const specsFor = (
+  entry: { status?: OpeningStatus; sessions?: OpeningSession[] },
+  extra: Partial<OpeningHoursSpecification>
+): OpeningHoursSpecification[] => {
+  switch (resolveOpeningStatus(entry)) {
+    case "open":
+      return (entry.sessions ?? []).map(({ opens, closes }) => ({
+        "@type": "OpeningHoursSpecification",
+        ...extra,
+        opens,
+        closes,
+      }));
+    case "24-hours":
+      return [{ "@type": "OpeningHoursSpecification", ...extra, opens: "00:00", closes: "23:59" }];
+    case "closed":
+      // schema.org marks a closed special date with opens === closes
+      return extra.validFrom ? [{ "@type": "OpeningHoursSpecification", ...extra, opens: "00:00", closes: "00:00" }] : [];
+    default:
+      return [];
+  }
+};
+
+export const buildOpeningHoursSpecification = (
+  days: OpeningDay[],
+  exceptions: OpeningException[] = []
+): OpeningHoursSpecification[] => [
+  ...days.flatMap((day) => specsFor(day, { dayOfWeek: `https://schema.org/${SCHEMA_DAYS[day.day]}` })),
+  ...exceptions.flatMap((exception) =>
+    specsFor(exception, { validFrom: exception.from, validThrough: exception.to ?? exception.from })
+  ),
+];

package/nuxt.config.ts

@@ -57,6 +57,10 @@ export default defineNuxtConfig({
   imports: {
     dirs: ["./stores"],
   },
+  icon: {
+    // Must stay listed before `components` in the @layer order in app/assets/styles/setup/index.css
+    cssLayer: "icons",
+  },
   app: {
     head: {
       htmlAttrs: {
@@ -146,7 +150,7 @@ export default defineNuxtConfig({
     // "esbuild". lightningcss has an open bug where it drops the unprefixed `backdrop-filter`
     // once autoprefixer adds `-webkit-backdrop-filter` alongside it, breaking glass/blur effects
     // (see https://github.com/vitejs/vite/issues/22649) — this repo relies on backdrop-filter in
-    // several components (GlassPanel, SiteNavigation, TabNavigation, DisplayDialog, ColourFinder,
+    // several components (GlassPanel, SiteNavigation, TabNavigation, DisplayDialog,
     // MagneticNavigation). Pin back to esbuild until upstream fixes it.
     build: {
       cssMinify: "esbuild",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.4.12",
+  "version": "9.5.1",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "playwright:update": "SRCDEV_STANDALONE=true npx playwright test --update-snapshots"
   },
   "files": [
-    ".claude/",
+    ".claude/skills/",
     ".vscode/",
     "app/",
     "modules/",

package/ramps.config.mjs

@@ -22,7 +22,7 @@ export const ramps = {
   red:    { hue: 30,  chroma: 0.24 },
   green:  { hue: 157, chroma: 0.19 },
   amber:  { hue: 75,  chroma: 0.19 },
-  orange: { hue: 60,  chroma: 0.15 },
+  orange: { hue: 55,  chroma: 0.19 },
   sunset: { hue: 50,  chroma: 0.22, drift: -25 },
   slate:  { hue: 260, chroma: 0.02 },
 };

package/.claude/commands/create-commit-message.md

@@ -1,13 +0,0 @@
----
-description: Draft a commit message from staged changes only — never runs git add/commit/push
----
-
-Draft a commit message for the currently staged changes. Do not run `git add`, `git commit`, or `git push` — this command only produces the message text for review.
-
-Steps:
-1. Run `git status` and `git diff --staged` to see what's staged. If nothing is staged, say so and stop.
-2. Run `git log --oneline -10` to match this repo's existing commit message style (e.g. `type(scope): summary`).
-3. Draft a concise message: a short summary line, plus a body only if the change needs context not obvious from the diff. Focus on *why*, not a restatement of the diff.
-4. Present the message in a fenced code block. Do not commit it.
-
-If the user's request also explicitly says "commit this" or "run it", that's authorization to act — use the `/run-commit` flow instead of stopping at the draft.

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

@@ -1,34 +0,0 @@
----
-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
-```