srcdev-nuxt-components 9.1.49 → 9.1.50

package/app/pages/typography/hero-text.vue

@@ -2,12 +2,12 @@
   <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">Typography - Hero Text</h1>
           <p class="page-body-normal">Hero text styles</p>
-        </LayoutRow>
+        </PageRow>
 
-        <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">Change variants</h2>
           <div class="demo-row">
             <div>
@@ -28,9 +28,9 @@
               </select>
             </div>
           </div>
-        </LayoutRow>
+        </PageRow>
 
-        <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">{{ axisOptions }}: {{ fontSizeOptions }} Variant</h2>
           <HeroText
             tag="h1"
@@ -52,7 +52,7 @@
             ]"
             :style-class-passthrough="['class-demo']"
           />
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/typography/index.vue

@@ -2,11 +2,11 @@
   <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']">
           <h1 class="page-heading-1">Typography</h1>
           <h2 class="page-heading-2">Example styles used within page content</h2>
           <p class="page-body-normal">Use within main body content</p>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -15,7 +15,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "Typography",
@@ -23,7 +23,7 @@ useHead({
   bodyAttrs: {
     class: "page-typography",
   },
-})
+});
 </script>
 
 <style lang="css">

package/app/pages/typography/page-body.vue

@@ -2,7 +2,7 @@
   <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']">
           <h1 class="page-heading-1">Typography - Body Text</h1>
           <p class="page-body-normal">Page body styles</p>
           <p class="page-body-normal">Use within main body content</p>
@@ -134,7 +134,7 @@
             <strong>page-body-xsmall-bold</strong>
             <div class="class-demo page-body-xsmall-bold">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -143,7 +143,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "Typography",
@@ -151,7 +151,7 @@ useHead({
   bodyAttrs: {
     class: "page-typography-body",
   },
-})
+});
 </script>
 
 <style lang="css">

package/app/pages/typography/page-heading.vue

@@ -2,7 +2,7 @@
   <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']">
           <h1 class="page-heading-1">Typography - Heading Text</h1>
           <p class="page-body-normal">Page heading styles</p>
           <p class="page-body-normal">Use within main body content</p>
@@ -39,7 +39,7 @@
             <strong>page-heading-6</strong>
             <div class="class-demo page-heading-6">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -48,7 +48,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "Typography",
@@ -56,7 +56,7 @@ useHead({
   bodyAttrs: {
     class: "page-typography-heading",
   },
-})
+});
 </script>
 
 <style lang="css">

package/app/pages/typography/page-link.vue

@@ -2,7 +2,7 @@
   <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']">
           <h1 class="page-heading-1">Typography - Link Text</h1>
           <p class="page-body-normal">Page link styles</p>
           <p class="page-body-normal">Use within main body content</p>
@@ -66,7 +66,7 @@
               Lorum ipsum dolor sit amet, consectetur adipiscing elit.
             </a>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -75,7 +75,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "Typography",
@@ -83,7 +83,7 @@ useHead({
   bodyAttrs: {
     class: "page-typography-link",
   },
-})
+});
 </script>
 
 <style lang="css">

package/app/pages/ui/accordian.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-2">Accordian</h1>
           <p>Any item open and/closed</p>
 
@@ -21,9 +21,9 @@
               <p class="pb-12">{{ item.content }}</p>
             </template>
           </AccordianCore>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <h2 class="page-heading-2">Accordian</h2>
           <p>Only 1 item open, pass a name prop</p>
 
@@ -49,7 +49,7 @@
               <p class="pb-12">This is content slot 2</p>
             </template>
           </AccordianCore>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/anchor-scroll-tab-navigation.vue

@@ -2,118 +2,129 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-4']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-4']">
           <h1 class="page-heading-1">Anchor Scroll — TabNavigation</h1>
           <p class="page-body-medium">
-            Tests <code class="inline-code">TabNavigation</code> with anchor hrefs. The nav uses
-            plain <code class="inline-code">&lt;a&gt;</code> tags for hash links (not
-            <code class="inline-code">NuxtLink</code>) to keep Vue Router out of the
-            smooth-scroll path. The <code class="inline-code">:anchor-scroll-offset</code> prop
-            passes a getter so the sticky bar height is read at scroll time.
+            Tests
+            <code class="inline-code">TabNavigation</code>
+            with anchor hrefs. The nav uses plain
+            <code class="inline-code">&lt;a&gt;</code>
+            tags for hash links (not
+            <code class="inline-code">NuxtLink</code>
+            ) to keep Vue Router out of the smooth-scroll path. The
+            <code class="inline-code">:anchor-scroll-offset</code>
+            prop passes a getter so the sticky bar height is read at scroll time.
           </p>
-        </LayoutRow>
+        </PageRow>
 
         <div ref="stickyNavRef" class="anchor-tab-nav-sticky">
-          <LayoutRow tag="div" variant="content">
+          <PageRow tag="div" variant="content">
             <TabNavigation
               :nav-item-data="anchorNavData"
               :anchor-scroll-offset="() => stickyNavRef?.offsetHeight ?? 0"
             />
-          </LayoutRow>
+          </PageRow>
         </div>
 
         <section id="overview" class="anchor-tab-section">
-          <LayoutRow tag="div" variant="content">
+          <PageRow tag="div" variant="content">
             <h2 class="page-heading-2">Overview</h2>
             <p class="page-body-medium">
-              This section verifies that clicking the <strong>Overview</strong> link above scrolls
-              here smoothly, with the heading landing below the sticky nav bar rather than behind it.
+              This section verifies that clicking the
+              <strong>Overview</strong>
+              link above scrolls here smoothly, with the heading landing below the sticky nav bar rather than behind it.
             </p>
             <p class="page-body-medium">
               The sticky nav's height is resolved at click time via the getter passed to
-              <code class="inline-code">:anchor-scroll-offset</code>. Resize the viewport — the
-              offset adjusts automatically.
+              <code class="inline-code">:anchor-scroll-offset</code>
+              . Resize the viewport — the offset adjusts automatically.
             </p>
             <p class="page-body-medium">
-              Hash links in <code class="inline-code">TabNavigation</code> render as plain
-              <code class="inline-code">&lt;a&gt;</code> elements (not
-              <code class="inline-code">NuxtLink</code>), which prevents Vue Router from
-              intercepting the click and triggering its own scroll behaviour.
+              Hash links in
+              <code class="inline-code">TabNavigation</code>
+              render as plain
+              <code class="inline-code">&lt;a&gt;</code>
+              elements (not
+              <code class="inline-code">NuxtLink</code>
+              ), which prevents Vue Router from intercepting the click and triggering its own scroll behaviour.
             </p>
-          </LayoutRow>
+          </PageRow>
         </section>
 
         <section id="api" class="anchor-tab-section">
-          <LayoutRow tag="div" variant="content">
+          <PageRow tag="div" variant="content">
             <h2 class="page-heading-2">API</h2>
             <p class="page-body-medium">
-              This section verifies the <strong>API</strong> link. Confirm the heading lands
-              below the sticky nav after scrolling.
+              This section verifies the
+              <strong>API</strong>
+              link. Confirm the heading lands below the sticky nav after scrolling.
             </p>
             <p class="page-body-medium">
-              The <code class="inline-code">anchorScrollOffset</code> prop on
-              <code class="inline-code">TabNavigation</code> accepts
-              <code class="inline-code">number | (() => number)</code> — the same type as the
-              <code class="inline-code">offset</code> option on <code class="inline-code">useAnchorScroll</code>
+              The
+              <code class="inline-code">anchorScrollOffset</code>
+              prop on
+              <code class="inline-code">TabNavigation</code>
+              accepts
+              <code class="inline-code">number | (() => number)</code>
+              — the same type as the
+              <code class="inline-code">offset</code>
+              option on
+              <code class="inline-code">useAnchorScroll</code>
               directly. It is forwarded verbatim to the composable.
             </p>
-            <div class="demo-code">const navItemData = {
-  main: [
-    { text: "Overview", href: "#overview" },
-    { text: "API",      href: "#api" },
-    { text: "Usage",    href: "#usage" },
-    { text: "Motion",   href: "#motion" },
-  ],
-};</div>
-            <div class="demo-code">&lt;div ref="stickyNavRef"&gt;
-  &lt;TabNavigation
-    :nav-item-data="navItemData"
-    :anchor-scroll-offset="() => stickyNavRef?.offsetHeight ?? 0"
-  /&gt;
-&lt;/div&gt;</div>
-          </LayoutRow>
+            <div class="demo-code">
+              const navItemData = { main: [ { text: "Overview", href: "#overview" }, { text: "API", href: "#api" }, {
+              text: "Usage", href: "#usage" }, { text: "Motion", href: "#motion" }, ], };
+            </div>
+            <div class="demo-code">
+              &lt;div ref="stickyNavRef"&gt; &lt;TabNavigation :nav-item-data="navItemData" :anchor-scroll-offset="() =>
+              stickyNavRef?.offsetHeight ?? 0" /&gt; &lt;/div&gt;
+            </div>
+          </PageRow>
         </section>
 
         <section id="usage" class="anchor-tab-section">
-          <LayoutRow tag="div" variant="content">
+          <PageRow tag="div" variant="content">
             <h2 class="page-heading-2">Usage</h2>
             <p class="page-body-medium">
-              This section verifies the <strong>Usage</strong> link. Confirm the heading lands
-              below the sticky nav after scrolling.
+              This section verifies the
+              <strong>Usage</strong>
+              link. Confirm the heading lands below the sticky nav after scrolling.
             </p>
             <p class="page-body-medium">
               Mixed navigation — routes and anchor hrefs in the same
-              <code class="inline-code">navItemData</code> — is supported. Route items render
-              as <code class="inline-code">NuxtLink</code>; anchor items render as plain
-              <code class="inline-code">&lt;a&gt;</code>. The handler is a no-op for routes
-              so both types can share the same click binding.
+              <code class="inline-code">navItemData</code>
+              — is supported. Route items render as
+              <code class="inline-code">NuxtLink</code>
+              ; anchor items render as plain
+              <code class="inline-code">&lt;a&gt;</code>
+              . The handler is a no-op for routes so both types can share the same click binding.
             </p>
-            <div class="demo-code">const navItemData = {
-  main: [
-    { text: "About",    href: "#about" },    // anchor — plain &lt;a&gt;
-    { text: "Services", href: "#services" }, // anchor — plain &lt;a&gt;
-    { text: "Blog",     href: "/blog" },     // route  — NuxtLink
-    { text: "Contact",  href: "#contact" },  // anchor — plain &lt;a&gt;
-  ],
-};</div>
-          </LayoutRow>
+            <div class="demo-code">
+              const navItemData = { main: [ { text: "About", href: "#about" }, // anchor — plain &lt;a&gt; { text:
+              "Services", href: "#services" }, // anchor — plain &lt;a&gt; { text: "Blog", href: "/blog" }, // route —
+              NuxtLink { text: "Contact", href: "#contact" }, // anchor — plain &lt;a&gt; ], };
+            </div>
+          </PageRow>
         </section>
 
         <section id="motion" class="anchor-tab-section">
-          <LayoutRow tag="div" variant="content">
+          <PageRow tag="div" variant="content">
             <h2 class="page-heading-2">Reduced Motion</h2>
             <p class="page-body-medium">
-              This section verifies the <strong>Reduced Motion</strong> link. With
-              <em>Reduce Motion</em> enabled in OS accessibility settings, clicks should
-              produce an instant jump rather than a smooth scroll — and the offset should still
-              be respected.
+              This section verifies the
+              <strong>Reduced Motion</strong>
+              link. With
+              <em>Reduce Motion</em>
+              enabled in OS accessibility settings, clicks should produce an instant jump rather than a smooth scroll —
+              and the offset should still be respected.
             </p>
             <p class="page-body-medium">
-              To test on macOS: <strong>System Settings → Accessibility → Display → Reduce
-              Motion</strong>. Refresh the page after toggling, then click any section link
-              above.
+              To test on macOS:
+              <strong>System Settings → Accessibility → Display → Reduce Motion</strong>
+              . Refresh the page after toggling, then click any section link above.
             </p>
-          </LayoutRow>
+          </PageRow>
         </section>
       </template>
     </NuxtLayout>