srcdev-nuxt-components 9.1.49 → 9.1.51

package/app/pages/ui/qr-code/[componentName].vue

@@ -2,20 +2,20 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">Index</h2>
           <p class="page-body-normal">This is the index page for the QR Code component: {{ componentName }}</p>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <ul class="qr-code-index-links-list">
             <li><NuxtLink to="/ui/qr-code/display">Display QR Code</NuxtLink></li>
             <li><NuxtLink to="/ui/qr-code/capture">Capture QR Code</NuxtLink></li>
             <li><NuxtLink to="/ui/qr-code/decode">Decode QR Code</NuxtLink></li>
           </ul>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2 pbe-20">{{ pageHeader }}</h2>
           <div class="demo-panel">
             <div class="qr-code-col">
@@ -89,7 +89,7 @@
               </div>
             </form>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/rotating-carousel.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']">
           <h1 class="page-heading-2">Rotating Carousel</h1>
           <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
             <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
@@ -31,9 +31,9 @@
               <span>{{ useParallaxEffect }}</span>
             </div>
           </div>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']" style="margin-block: 300px">
+        <PageRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']" style="margin-block: 300px">
           <RotatingCarouselImage
             :data
             :rotateX="Number(rotateX)"
@@ -42,9 +42,9 @@
             :pauseOnHover
             :useParallaxEffect
           />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']" style="margin-block-end: 600px">
+        <PageRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']" style="margin-block-end: 600px">
           <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
             <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
               <label for="rotateX">rotateX</label>
@@ -72,7 +72,7 @@
               <span>{{ useParallaxEffect }}</span>
             </div>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -81,7 +81,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "Browser title tag",
@@ -94,17 +94,17 @@ useHead({
   bodyAttrs: {
     class: "classname-for-namespacing-if-desired",
   },
-})
+});
 
-const perspective = ref<number>(1000)
-const rotateX = ref<number>(-13)
-const translateZ = ref<number>(550)
-const pauseOnHover = ref<boolean>(false)
-const useParallaxEffect = ref<boolean>(true)
+const perspective = ref<number>(1000);
+const rotateX = ref<number>(-13);
+const translateZ = ref<number>(550);
+const pauseOnHover = ref<boolean>(false);
+const useParallaxEffect = ref<boolean>(true);
 
 interface IAccordianData {
-  src: string
-  alt: string
+  src: string;
+  alt: string;
 }
 
 const data = ref<IAccordianData[]>([
@@ -144,7 +144,7 @@ const data = ref<IAccordianData[]>([
     src: "/images/rotating-carousel/image-9.webp",
     alt: "Image 9",
   },
-])
+]);
 </script>
 
 <style lang="css">

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

@@ -3,7 +3,7 @@
     <NuxtLayout name="default">
       <template #layout-content>
         <!-- ── Page header ──────────────────────────────────────────────── -->
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
           <h1 class="page-heading-1">ScrollRevealImage / ScrollRevealFrame</h1>
           <p class="page-body-normal">
             A pure-CSS parallax reveal. No scroll listeners, no JS animation — driven entirely by
@@ -18,10 +18,10 @@
             <code>NuxtImg</code>
             optimisation and a horizontal focal-point prop.
           </p>
-        </LayoutRow>
+        </PageRow>
 
         <!-- ── Interactive demo ──────────────────────────────────────────── -->
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
           <h2 class="page-heading-2 mbe-8">Interactive demo</h2>
           <p class="page-body-normal mbe-16">Adjust the props then scroll through the image on the right.</p>
           <div class="demo-controls">
@@ -77,15 +77,15 @@
               />
             </div>
           </div>
-        </LayoutRow>
+        </PageRow>
 
         <!-- ── Variants ──────────────────────────────────────────────────── -->
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-24']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-24']">
           <h2 class="page-heading-2">Variants</h2>
-        </LayoutRow>
+        </PageRow>
 
         <!-- Default -->
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
           <div class="sri-demo-row">
             <div class="sri-demo-row__info">
               <h3 class="page-heading-3 mbe-8">Default</h3>
@@ -109,10 +109,10 @@
               :img-height="1920"
             />
           </div>
-        </LayoutRow>
+        </PageRow>
 
         <!-- Short frame / banner -->
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
           <div class="sri-demo-row">
             <div class="sri-demo-row__info">
               <h3 class="page-heading-3 mbe-8">Short frame — landscape image</h3>
@@ -137,10 +137,10 @@
               parallax-offset="24rem"
             />
           </div>
-        </LayoutRow>
+        </PageRow>
 
         <!-- Rounded corners -->
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
           <div class="sri-demo-row">
             <div class="sri-demo-row__info">
               <h3 class="page-heading-3 mbe-8">Rounded corners</h3>
@@ -169,10 +169,10 @@
               radius="2.4rem"
             />
           </div>
-        </LayoutRow>
+        </PageRow>
 
         <!-- Focal point -->
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
           <div class="sri-demo-row">
             <div class="sri-demo-row__info">
               <h3 class="page-heading-3 mbe-8">Horizontal focal point</h3>
@@ -198,10 +198,10 @@
               focal-x="75%"
             />
           </div>
-        </LayoutRow>
+        </PageRow>
 
         <!-- Tall frame -->
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
           <div class="sri-demo-row">
             <div class="sri-demo-row__info">
               <h3 class="page-heading-3 mbe-8">Tall frame — maximum travel</h3>
@@ -226,17 +226,17 @@
               parallax-offset="60rem"
             />
           </div>
-        </LayoutRow>
+        </PageRow>
 
         <!-- ScrollRevealFrame: image grid -->
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
           <div class="sri-demo-row">
             <div class="sri-demo-row__info">
               <h3 class="page-heading-3 mbe-8">Image grid — ScrollRevealFrame</h3>
               <p class="page-body-normal mbe-12">
                 <code>ScrollRevealFrame</code>
-                accepts arbitrary slot content. Here a six-image CSS grid scrolls as a single unit inside the
-                clipping frame — no
+                accepts arbitrary slot content. Here a six-image CSS grid scrolls as a single unit inside the clipping
+                frame — no
                 <code>focalX</code>
                 or
                 <code>NuxtImg</code>
@@ -322,7 +322,7 @@
               </div>
             </ScrollRevealFrame>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/section-parallax.vue

@@ -2,19 +2,19 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['expanding-panel-section', 'mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['expanding-panel-section', 'mbe-20']">
           <h1 class="page-heading-1">SectionParallax Component</h1>
           <p class="mbe-12">Static image displayed as page scrolls through it.</p>
-        </LayoutRow>
+        </PageRow>
         <SectionParallax
           background-image="/images/rotating-carousel/image-3.webp"
           :style-class-passthrough="['mbe-20']"
         >
-          <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['expanding-panel-section', 'mbe-20']">
+          <PageRow tag="div" variant="full" :style-class-passthrough="['expanding-panel-section', 'mbe-20']">
             <h1 class="page-heading-1">SectionParallax Content</h1>
             <p class="page-body-normal">This is default slot content for the SectionParallax component.</p>
             <p class="page-body-normal">As it's a slot, any html content can be placed here.</p>
-          </LayoutRow>
+          </PageRow>
         </SectionParallax>
       </template>
     </NuxtLayout>
@@ -24,7 +24,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "SectionParallax Component",
@@ -37,9 +37,9 @@ useHead({
   bodyAttrs: {
     class: "section-parallax-page",
   },
-})
+});
 
-const forceOpened = ref(false)
+const forceOpened = ref(false);
 </script>
 
 <style lang="css">

package/app/pages/ui/services/colour-finder.vue

@@ -2,13 +2,13 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">ColourFinder</h2>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <ColourFinder />
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/services/services-cards.vue

@@ -2,18 +2,18 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1">Services Card Grid</h1>
           <p class="page-body-normal">Example of a services card grid component.</p>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <ServicesCardGrid
             :services-data="servicesData ?? []"
             :eyebrow-config="{ fontSize: 'large' }"
             :hero-config="{ tag: 'h2', fontSize: 'heading' }"
           />
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/services/services-section/[slug].vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <EyebrowText font-size="large" text-content="Services" />
 
           <HeroText
@@ -20,11 +20,11 @@
           <p class="page-body-normal">
             <NuxtLink to="/ui/services/services-cards" class="page-link-normal">Back to Services</NuxtLink>
           </p>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <ServicesSection v-if="servicesData.length > 0 && serviceData" :service-data="serviceData!" />
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/services/services-sections-compact.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <EyebrowText font-size="large" text-content="Services" />
           <HeroText
             :tag="'h1'"
@@ -15,23 +15,23 @@
             ]"
             :style-class-passthrough="['mbe-20']"
           />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <p class="page-body-medium">
             I'm a mobile hair artist bringing bold, custom hair transformations straight to your doorstep in Bath. From
             lived-in balayage and dimensional lowlights to face-framing highlights and precision cuts — salon-quality
             results, zero hassle.
           </p>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <ServicesSectionGrid
             :services-data="servicesData ?? []"
             :use-alternate-reverse="true"
             summary-alignment="center"
           />
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/settings.vue

@@ -2,48 +2,48 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1 mbe-18">Settings</h1>
           <h2 class="page-heading-2 mbe-18">Theme Switcher</h2>
 
           <DisplayThemeSwitch />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1 mbe-18">Default button elements</h1>
 
           <div class="mb-12">
             <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="default"</code></p>
             <button class="input-button-core" type="button">This is a button</button>
           </div>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1 mbe-18">Primary button elements</h1>
 
           <div class="mb-12" data-theme="default">
             <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="default"</code></p>
             <button class="input-button-core" type="button">This is a button</button>
           </div>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1 mbe-18">Error button elements</h1>
 
           <div class="mb-12" data-theme="default" data-error>
             <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="error"</code></p>
             <button class="input-button-core" type="button">This is a button</button>
           </div>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-1 mbe-18">Success button elements</h1>
 
           <div class="mb-12" data-theme="success">
             <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="success"</code></p>
             <button class="input-button-core" type="button">This is a button</button>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

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

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <h1 class="page-heading-3">Simple Grid</h1>
           <p class="page-body-normal">Simple grid displaying dummy posts data</p>
 
@@ -21,7 +21,7 @@
           </GridCore>
 
           <p v-else class="page-body-normal">&hellip;Loading</p>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/slider-gallery.vue

@@ -2,11 +2,11 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['display-details-section', 'mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['display-details-section', 'mbe-20']">
           <h1 class="page-heading-2">Slider Gallery Component</h1>
 
           <SliderGallery v-model:gallery-data="galleryData" :auto-run="false" />
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -15,7 +15,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "Slider Gallery Component",
@@ -28,7 +28,7 @@ useHead({
   bodyAttrs: {
     class: "slider-gallery-page",
   },
-})
+});
 
 const galleryData = ref([
   {
@@ -201,7 +201,7 @@ const galleryData = ref([
     },
     textBrightness: "light",
   },
-])
+]);
 </script>
 
 <style lang="css">

package/app/pages/ui/tabs-y.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
           <h1 class="page-heading-2">Tabs #3</h1>
           <p>Data driven accordian navigation with custom content</p>
 
@@ -27,7 +27,7 @@
               <p class="p-24">This is content slot 5</p>
             </template>
           </TabsCore>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -49,7 +49,6 @@ useHead({
 
 const navLinks6: ITabNav[] = [
   { name: "Home", path: "/" },
-  { name: "Layout Row", path: "/ui/layout-row" },
   { name: "Dialogs", path: "/ui/dialog" },
   { name: "Tabs", path: "/ui/tabs" },
   { name: "Something Else", path: "/ui/something" },

package/app/pages/ui/tabs.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
           <h1 class="page-heading-2">Tabs #1</h1>
           <p>Static tabs</p>
 
@@ -25,9 +25,9 @@
               <p class="p-24">This is content slot 2</p>
             </template>
           </TabsCore>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
           <h2 class="page-heading-2">Tabs #2</h2>
           <p>Data driven tabs</p>
 
@@ -46,9 +46,9 @@
               <p class="p-24">This is content slot 3</p>
             </template>
           </TabsCore>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
           <h2 class="page-heading-2">Tabs #3</h2>
           <p>Data driven accordian navigation with custom content</p>
 
@@ -73,7 +73,7 @@
               <p class="p-24">This is content slot 5</p>
             </template>
           </TabsCore>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -100,20 +100,17 @@ interface ITabNav {
 
 const navLinks3: ITabNav[] = [
   { name: "Home", path: "/" },
-  { name: "Layout Row", path: "/ui/layout-row" },
   { name: "Dialogs", path: "/ui/dialog" },
 ];
 
 const navLinks4: ITabNav[] = [
   { name: "Home", path: "/" },
-  { name: "Layout Row", path: "/ui/layout-row" },
   { name: "Dialogs", path: "/ui/dialog" },
   { name: "Tabs", path: "/ui/tabs" },
 ];
 
 const navLinks6: ITabNav[] = [
   { name: "Home", path: "/" },
-  { name: "Layout Row", path: "/ui/layout-row" },
   { name: "Dialogs", path: "/ui/dialog" },
   { name: "Tabs", path: "/ui/tabs" },
   { name: "Something Else", path: "/ui/something" },