srcdev-nuxt-components 9.3.11 → 9.3.13

package/app/components/03.organisms/services/{services-section/stories/ServicesSection.stories.ts → service-summary/stories/ServiceSummary.stories.ts}

@@ -1,15 +1,14 @@
-import ServicesSection from "../ServicesSection.vue";
+import ServiceSummary from "../ServiceSummary.vue";
 import PageRow from "../../../../01.atoms/page-row/PageRow.vue";
 import TextBlock from "../../../../01.atoms/text-block/TextBlock.vue";
 import EyebrowText from "../../../../01.atoms/text-blocks/eyebrow-text/EyebrowText.vue";
 import HeroText from "../../../../01.atoms/text-blocks/hero-text/HeroText.vue";
-import InputButtonCore from "../../../../05.forms/input-button/InputButtonCore.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { Service } from "~/types/types.services";
 
-const meta: Meta<typeof ServicesSection> = {
-  title: "Organisms/Services/Services Section",
-  component: ServicesSection,
+const meta: Meta<typeof ServiceSummary> = {
+  title: "Organisms/Services/Service Summary",
+  component: ServiceSummary,
   argTypes: {
     tag: {
       control: { type: "select" },
@@ -21,51 +20,15 @@ const meta: Meta<typeof ServicesSection> = {
       options: ["h1", "h2", "h3"],
       description: "Heading element used for the service title",
     },
-    isSummary: {
-      control: { type: "boolean" },
-      description: "Summary mode — compact view with summary-link slot",
-    },
-    summaryAlignment: {
+    alignment: {
       control: { type: "select" },
       options: ["start", "center", "end"],
-      description: "Vertical alignment of the info column in summary mode",
+      description: "Vertical alignment of the info column relative to the image",
     },
     reverse: {
       control: { type: "boolean" },
       description: "Swap image and content columns",
     },
-    durationIcon: {
-      control: { type: "text" },
-      description: "Icon name for the duration row (any Iconify icon)",
-    },
-    priceIcon: {
-      control: { type: "text" },
-      description: "Icon name for the price row (any Iconify icon)",
-    },
-    processHeading: {
-      control: { type: "text" },
-      description: "Heading text for the process section",
-    },
-    idealForHeading: {
-      control: { type: "text" },
-      description: "Heading text for the ideal-for section",
-    },
-    maintenanceHeading: {
-      control: { type: "text" },
-      description: "Heading text for the maintenance/aftercare section",
-    },
-    faqsHeading: {
-      control: { type: "text" },
-      description: "Heading text for the FAQs section",
-    },
-    ctaHeading: {
-      control: { type: "text" },
-      description: "Heading text inside the default CTA glass panel — ignored if the cta-panel slot is used",
-    },
-    ctaBody: {
-      control: { type: "text" },
-      description: "Body text inside the default CTA glass panel — ignored if the cta-panel slot is used",
-    },
     styleClassPassthrough: {
       control: "object",
       description: "Additional CSS classes applied to the root element",
@@ -74,25 +37,22 @@ const meta: Meta<typeof ServicesSection> = {
   args: {
     tag: "section",
     headerTag: "h2",
-    isSummary: false,
-    summaryAlignment: "center",
+    alignment: "center",
     reverse: false,
-    durationIcon: "mdi:clock-time-four-outline",
-    priceIcon: "mdi:currency-gbp",
     styleClassPassthrough: [],
   },
   parameters: {
     docs: {
       description: {
         component:
-          "Renders a single service as a two-column section: image on one side, detailed content on the other. Two modes: summary (compact, with navigation slot) and full (complete content with CTA slot). Icon names for the price/duration row are configurable via `durationIcon` and `priceIcon` props. Section headings and the CTA panel copy are configurable via props (`processHeading`, `idealForHeading`, `maintenanceHeading`, `faqsHeading`, `ctaHeading`, `ctaBody`); the whole CTA panel can be replaced with the `cta-panel` scoped slot.",
+          "Renders a single service as a compact two-column preview: image on one side, eyebrow/title/price-duration pills/summary text on the other, with a summary-link slot for navigating to the full ServiceDetail page. Superseded ServicesSection's old full mode — a ServiceDetail page is the correct place for process/ideal-for/FAQ/CTA content now.",
       },
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof ServicesSection>;
+type Story = StoryObj<typeof ServiceSummary>;
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
 
@@ -153,136 +113,138 @@ const sampleService: Service = {
 
 // ─── Stories ──────────────────────────────────────────────────────────────────
 
-export const FullMode: Story = {
-  name: "Full Mode",
-  args: {
-    ctaHeading: "Ready to book your appointment?",
-    ctaBody: "Mobile service across Bath — I come to you.",
-  },
+export const Default: Story = {
+  name: "Default",
   render: (args) => ({
-    components: { ServicesSection, InputButtonCore },
+    components: { ServiceSummary },
     setup() {
       return { args, sampleService };
     },
     template: `
-      <ServicesSection v-bind="args" :service-data="sampleService">
-        <template #cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" />
+      <ServiceSummary v-bind="args" :service-data="sampleService">
+        <template #summary-link="{ serviceData }">
+          <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+            More about {{ serviceData.title }} →
+          </a>
         </template>
-      </ServicesSection>
+      </ServiceSummary>
     `,
   }),
   parameters: {
     docs: {
       description: {
-        story:
-          "Full mode (isSummary: false) — renders all content including a six-step process, ideal-for list, FAQs, and the CTA panel, matching the real service detail page content shape.",
+        story: "Eyebrow, title, price/duration pills, whatIsIt summary, and the summary-link slot.",
       },
     },
   },
 };
 
-export const SummaryMode: Story = {
-  name: "Summary Mode",
+export const Reversed: Story = {
+  name: "Reversed Layout",
   args: {
-    isSummary: true,
+    reverse: true,
   },
   render: (args) => ({
-    components: { ServicesSection },
+    components: { ServiceSummary },
     setup() {
       return { args, sampleService };
     },
-    template: `
-      <ServicesSection v-bind="args" :service-data="sampleService">
-        <template #summary-link="{ serviceData }">
-          <a :href="'/services/' + serviceData.slug" style="color:inherit;">
-            More about {{ serviceData.title }} →
-          </a>
-        </template>
-      </ServicesSection>
-    `,
+    template: `<ServiceSummary v-bind="args" :service-data="sampleService" />`,
   }),
   parameters: {
     docs: {
       description: {
-        story: "Summary mode — compact view with eyebrow, title, price/duration, whatIsIt, and summary-link slot.",
+        story: "Image on the right, content on the left — use on alternating items in a list.",
       },
     },
   },
 };
 
-export const Reversed: Story = {
-  name: "Reversed Layout",
-  args: {
-    reverse: true,
-  },
+export const FixedRowHeight: Story = {
+  name: "Fixed Row Height",
   render: (args) => ({
-    components: { ServicesSection },
+    components: { ServiceSummary },
     setup() {
       return { args, sampleService };
     },
-    template: `<ServicesSection v-bind="args" :service-data="sampleService" />`,
+    template: `
+      <div style="--service-summary-height-mobile: 24rem; --service-summary-height-tablet: 28rem; --service-summary-height-desktop: 32rem;">
+        <ServiceSummary v-bind="args" :service-data="sampleService">
+          <template #summary-link="{ serviceData }">
+            <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+              More about {{ serviceData.title }} →
+            </a>
+          </template>
+        </ServiceSummary>
+      </div>
+    `,
   }),
   parameters: {
     docs: {
       description: {
-        story: "Image on the right, content on the left — use on alternating items in a list.",
+        story:
+          "--service-summary-height-mobile/-tablet/-desktop set a fixed height for the whole row (both the image and the text column) per @container breakpoint, instead of the default auto — the image crops via object-fit: cover to fill it (--service-summary-image-aspect-ratio no longer has any visible effect once this is set), and the text column gets real leftover space for the alignment prop to position within. Useful for keeping every row in a list a consistent height regardless of each service's source photo dimensions.",
       },
     },
   },
 };
 
-export const CustomIcons: Story = {
-  name: "Custom Icons",
+export const CustomAspectRatio: Story = {
+  name: "Custom Aspect Ratio",
   args: {
-    durationIcon: "mdi:timer-outline",
-    priceIcon: "mdi:currency-eur",
+    alignment: "start",
   },
   render: (args) => ({
-    components: { ServicesSection },
+    components: { ServiceSummary },
     setup() {
       return { args, sampleService };
     },
-    template: `<ServicesSection v-bind="args" :service-data="sampleService" />`,
+    template: `
+      <div style="--service-summary-image-aspect-ratio: 3 / 4;">
+        <ServiceSummary v-bind="args" :service-data="sampleService">
+          <template #summary-link="{ serviceData }">
+            <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+              More about {{ serviceData.title }} →
+            </a>
+          </template>
+        </ServiceSummary>
+      </div>
+    `,
   }),
   parameters: {
     docs: {
       description: {
         story:
-          "Custom icon names passed via durationIcon and priceIcon props — useful when the consuming app uses a different currency or wants a different clock style.",
+          "--service-summary-image-aspect-ratio (default 1 / 1, square) controls the image's own shape when the row height is left auto (the default) — here overridden to a taller 3 / 4 portrait crop. This token only has a visible effect while no --service-summary-height-* override forces a definite row height.",
       },
     },
   },
 };
 
-export const CustomTextAndCta: Story = {
-  name: "Custom Headings & CTA Copy",
-  args: {
-    processHeading: "How It Works",
-    idealForHeading: "Who Is This For",
-    maintenanceHeading: "Aftercare",
-    faqsHeading: "FAQs",
-    ctaHeading: "Ready to book your colour appointment?",
-    ctaBody: "Mobile service across Bath — I come to you.",
-  },
+export const FramedImage: Story = {
+  name: "Framed Image (padding)",
   render: (args) => ({
-    components: { ServicesSection, InputButtonCore },
+    components: { ServiceSummary },
     setup() {
       return { args, sampleService };
     },
     template: `
-      <ServicesSection v-bind="args" :service-data="sampleService">
-        <template #cta>
-          <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" />
-        </template>
-      </ServicesSection>
+      <div style="--service-summary-image-padding-block-mobile: 1.6rem; --service-summary-image-padding-inline-mobile: 1.6rem; background: #1a1a1a;">
+        <ServiceSummary v-bind="args" :service-data="sampleService">
+          <template #summary-link="{ serviceData }">
+            <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+              More about {{ serviceData.title }} →
+            </a>
+          </template>
+        </ServiceSummary>
+      </div>
     `,
   }),
   parameters: {
     docs: {
       description: {
         story:
-          "Section headings and CTA panel copy overridden via props — useful for wording specific to the consuming business rather than the library defaults. Note the heading names the actual service, avoiding the old bug where every service page said 'highlights appointment' regardless of which service it was.",
+          "--service-summary-image-padding-block-*/-inline-* insets the image within .service-summary__image-wrapper instead of letting it fill edge-to-edge — the wrapper's own background shows through as a frame. Combine with a background colour set on the wrapper (via styleClassPassthrough) for a card-like look.",
       },
     },
   },
@@ -290,12 +252,8 @@ export const CustomTextAndCta: Story = {
 
 export const RealisticPageContext: Story = {
   name: "Realistic Page Context",
-  args: {
-    ctaHeading: "Ready to book your appointment?",
-    ctaBody: "Mobile service across Bath — I come to you.",
-  },
   render: (args) => ({
-    components: { ServicesSection, PageRow, TextBlock, EyebrowText, HeroText, InputButtonCore },
+    components: { ServiceSummary, PageRow, TextBlock, EyebrowText, HeroText },
     setup() {
       return { args, sampleService };
     },
@@ -319,11 +277,13 @@ export const RealisticPageContext: Story = {
         </PageRow>
 
         <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <ServicesSection v-bind="args" :service-data="sampleService">
-            <template #cta>
-              <InputButtonCore tag="a" href="/contact" button-text="Book now" variant="primary" />
+          <ServiceSummary v-bind="args" :service-data="sampleService">
+            <template #summary-link="{ serviceData }">
+              <a :href="'/services/' + serviceData.slug" style="color:inherit;">
+                More about {{ serviceData.title }} →
+              </a>
             </template>
-          </ServicesSection>
+          </ServiceSummary>
         </PageRow>
       </div>
     `,
@@ -332,37 +292,7 @@ export const RealisticPageContext: Story = {
     docs: {
       description: {
         story:
-          "Matches the real service detail page (app/pages/services/[slug].vue in the luxury-locs-by-natasha-nuxt3 project): a page hero (EyebrowText + HeroText inside PageRow/TextBlock) followed by ServicesSection with a real 'Book now' CTA button. Use this story to sanity-check layout and spacing changes against the actual consuming page rather than the bare component.",
-      },
-    },
-  },
-};
-
-export const CustomCtaPanel: Story = {
-  name: "Custom CTA Panel (slot override)",
-  render: (args) => ({
-    components: { ServicesSection },
-    setup() {
-      return { args, sampleService };
-    },
-    template: `
-      <ServicesSection v-bind="args" :service-data="sampleService">
-        <template #cta-panel="{ serviceData }">
-          <div style="padding:2.4rem;border:2px dashed #333;border-radius:1rem;text-align:center;">
-            <p style="margin:0 0 1.2rem;">Fully custom CTA block for {{ serviceData.title }} — not a GlassPanel at all.</p>
-            <button style="padding:1.2rem 2.4rem;background:#333;color:#fff;border:none;border-radius:0.4rem;cursor:pointer;">
-              Enquire Now
-            </button>
-          </div>
-        </template>
-      </ServicesSection>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "The cta-panel scoped slot replaces the default GlassPanel entirely — use when a consumer needs a different component or layout for the closing call-to-action, not just different copy.",
+          "Matches the real services listing page (app/pages/services/index.vue in the luxury-locs-by-natasha-nuxt3 project): a page hero (EyebrowText + HeroText inside PageRow/TextBlock) followed by a ServiceSummary. Use ServiceSummaryGrid for the full alternating listing — this story sanity-checks a single instance's layout in context.",
       },
     },
   },

package/app/components/03.organisms/services/service-summary/tests/ServiceSummary.spec.ts

@@ -0,0 +1,210 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ServiceSummary from "../ServiceSummary.vue";
+import type { Service } from "~/types/types.services";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const mockService: Service = {
+  slug: "test-service",
+  category: "hair",
+  title: "Test Service",
+  subtitle: "A subtitle",
+  price: "£50",
+  duration: "60 mins",
+  image: "/images/test.jpg",
+  shortDescription: "Short description",
+  longDescription: "Long description text",
+  heroHeading: [{ text: "A great heading", styleClass: "normal" }],
+  whatIsIt: "What this service is",
+  process: ["Step one", "Step two"],
+  idealFor: ["Person A", "Person B"],
+  maintenance: "Maintenance advice",
+  faqs: [{ question: "FAQ question?", answer: "FAQ answer." }],
+  seoTitle: "SEO Title",
+  seoDescription: "SEO description",
+};
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("ServiceSummary", () => {
+  // ─── Mount ─────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Root element ───────────────────────────────────────────────────────
+
+  it("has service-summary class on root", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.classes()).toContain("service-summary");
+  });
+
+  it("renders as a div by default", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.element.tagName).toBe("DIV");
+  });
+
+  it("renders the tag prop as the root element", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, tag: "section" },
+    });
+    expect(wrapper.element.tagName).toBe("SECTION");
+  });
+
+  // ─── Aria ───────────────────────────────────────────────────────────────
+
+  it("binds aria-labelledby to the title HeroText's own id when tag is section", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, tag: "section" },
+      attachTo: document.body,
+    });
+    const ariaLabelledby = wrapper.attributes("aria-labelledby");
+    expect(ariaLabelledby).toBeTruthy();
+    expect(document.getElementById(ariaLabelledby!)?.textContent).toContain(mockService.title);
+  });
+
+  // ─── Pills ──────────────────────────────────────────────────────────────
+
+  it("renders duration and price as DisplayPill instances", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    const pills = wrapper.findAll(".display-pill");
+    expect(pills).toHaveLength(2);
+    expect(pills[0]?.text()).toContain(mockService.duration);
+    expect(pills[1]?.text()).toContain(mockService.price);
+  });
+
+  // ─── Service data ───────────────────────────────────────────────────────
+
+  it("renders service duration text", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain(mockService.duration);
+  });
+
+  it("renders service price text", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain(mockService.price);
+  });
+
+  it("renders the whatIsIt text", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).toContain(mockService.whatIsIt);
+  });
+
+  it("does not render process, idealFor, maintenance, or FAQ content", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.text()).not.toContain(mockService.longDescription);
+    expect(wrapper.text()).not.toContain(mockService.maintenance);
+    expect(wrapper.text()).not.toContain(mockService.faqs[0]?.question);
+  });
+
+  // ─── summary-link slot ────────────────────────────────────────────────
+
+  it("renders summary-link slot content", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+      slots: {
+        "summary-link": '<a class="test-link" href="/services/test">View service</a>',
+      },
+    });
+    expect(wrapper.find(".test-link").exists()).toBe(true);
+  });
+
+  it("passes serviceData to the summary-link slot", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+      slots: {
+        "summary-link": `<template #summary-link="{ serviceData }"><a class="test-link">{{ serviceData.title }}</a></template>`,
+      },
+    });
+    expect(wrapper.find(".test-link").text()).toBe(mockService.title);
+  });
+
+  // ─── Reverse ────────────────────────────────────────────────────────────
+
+  it("applies reverse class when reverse prop is true", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, reverse: true },
+    });
+    expect(wrapper.find(".service-summary__grid").classes()).toContain("service-summary__grid--reverse");
+  });
+
+  it("does not apply reverse class by default", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.find(".service-summary__grid").classes()).not.toContain("service-summary__grid--reverse");
+  });
+
+  // ─── Alignment ──────────────────────────────────────────────────────────
+
+  it("defaults to center alignment", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService },
+    });
+    expect(wrapper.find(".service-summary__info-wrapper").classes()).toContain(
+      "service-summary__info-wrapper--align-center"
+    );
+  });
+
+  it("applies the alignment prop", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, alignment: "start" },
+    });
+    expect(wrapper.find(".service-summary__info-wrapper").classes()).toContain(
+      "service-summary__info-wrapper--align-start"
+    );
+  });
+
+  // ─── styleClassPassthrough ──────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, styleClassPassthrough: "custom-class" },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(ServiceSummary, {
+      props: { serviceData: mockService, styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/03.organisms/services/service-summary/tests/__snapshots__/ServiceSummary.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ServiceSummary > renders correct HTML structure 1`] = `
+"<div class="service-summary">
+  <div class="service-summary__grid">
+    <div class="service-summary__image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/test.jpg 1x, /_ipx/_/images/test.jpg 2x" alt="Test Service" loading="eager" fetchpriority="high" class="service-summary__image" src="/_ipx/_/images/test.jpg"></div>
+    <div class="service-summary__info-wrapper service-summary__info-wrapper--align-center">
+      <div class="eyebrow-text large">A subtitle</div>
+      <h2 id="v-0-0" class="hero-text mb-20 title axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Test Service</span>
+      </h2>
+      <div class="service-summary__pills"><span class="display-pill md neutral"><span class="pill-label">60 mins</span></span><span class="display-pill md neutral"><span class="pill-label">From £50</span></span></div>
+      <p class="page-body-normal">What this service is</p>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/03.organisms/services/services-grids/{ServicesSectionGrid.vue → ServiceSummaryGrid.vue}

@@ -1,18 +1,17 @@
 <template>
-  <component :is="tag" class="services-grid" :class="[elementClasses]">
-    <ServicesSection
+  <component :is="tag" class="service-summary-grid" :class="[elementClasses]">
+    <ServiceSummary
       v-for="(item, index) in servicesData"
       :key="index"
       :index="index"
       :service-data="item"
-      :is-summary="true"
       :reverse="props.useAlternateReverse ? index % 2 !== 0 : false"
-      :summary-alignment="summaryAlignment"
+      :alignment="alignment"
     >
       <template #summary-link="{ serviceData }">
         <slot name="summary-link" :service-data="serviceData"></slot>
       </template>
-    </ServicesSection>
+    </ServiceSummary>
   </component>
 </template>
 
@@ -23,14 +22,14 @@ interface Props {
   tag?: "div" | "section" | "main";
   servicesData: Service[];
   useAlternateReverse?: boolean;
-  summaryAlignment?: "start" | "center" | "end";
+  alignment?: "start" | "center" | "end";
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   tag: "div",
   useAlternateReverse: false,
-  summaryAlignment: "center",
+  alignment: "center",
   styleClassPassthrough: () => [],
 });
 
@@ -46,11 +45,10 @@ watch(
 
 <style lang="css">
 @layer components {
-  .services-grid {
-    /* Component styles */
+  .service-summary-grid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 4rem;
+    gap: var(--service-summary-grid-row-gap, 4rem);
   }
 }
 </style>