srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/pages/ui/glowing-border.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">GlowingBorder Component</h1>
+          <form class="mb-12">
+            <div>
+              <label for="variant" class="form-label mie-12">Variant:</label>
+              <select id="variant" v-model="glowingBorderVariant" class="form-select">
+                <option value="vivid">Vivid</option>
+                <option value="subtle">Subtle</option>
+                <option value="silver">Silver</option>
+                <option value="steel">Steel</option>
+              </select>
+            </div>
+          </form>
+
+          <form class="mb-12">
+            <div>
+              <label for="variant" class="form-label mie-12">Variant:</label>
+              <select id="variant" v-model="displayCardVariant" class="form-select">
+                <option value="solid">Solid</option>
+                <option value="subtle">Subtle</option>
+                <option value="soft">Soft</option>
+                <option value="outline">Outline</option>
+              </select>
+            </div>
+            <div>
+              <label for="hasDividers" class="form-label mie-12">Has Dividers:</label>
+              <input type="checkbox" id="hasDividers" v-model="hasDividers" class="form-checkbox" />
+            </div>
+            <div>
+              <label for="noOutline" class="form-label mie-12">No Outline:</label>
+              <input type="checkbox" id="noOutline" v-model="noOutline" class="form-checkbox" />
+            </div>
+          </form>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Default</h2>
+
+          <GlowingBorder :variant="glowingBorderVariant" :style-class-passthrough="['mbe-20']">
+            <div class="p-20">
+              <h3 class="page-heading-2">GlowingBorder Header</h3>
+              <h4 class="page-heading-3">GlowingBorder Content</h4>
+              <p class="page-body-normal">This is default slot content for the GlowingBorder component.</p>
+              <p class="page-body-normal">As it's a slot, any html content can be placed here.</p>
+              <p class="page-body-small">GlowingBorder Footer</p>
+            </div>
+          </GlowingBorder>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Default</h2>
+
+          <GlowingBorder :variant="glowingBorderVariant" :style-class-passthrough="['mbe-20']">
+            <DisplayCard :variant="displayCardVariant" :has-dividers :no-outline>
+              <template #header>
+                <h2 class="page-heading-2">DisplayCard Header</h2>
+              </template>
+              <template #default>
+                <h3 class="page-heading-3">DisplayCard Content</h3>
+                <p class="page-body-normal">This is default slot content for the DisplayCard component.</p>
+                <p class="page-body-normal">As it's a slot, any html content can be placed here.</p>
+              </template>
+              <template #footer>
+                <p class="page-body-small">DisplayCard Footer</p>
+              </template>
+            </DisplayCard>
+          </GlowingBorder>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "GlowingBorder Component",
+  meta: [
+    {
+      name: "description",
+      content: "GlowingBorder Component description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "glowing-border-page",
+  },
+})
+
+const glowingBorderVariant = ref("vivid")
+const displayCardVariant = ref("solid")
+const hasDividers = ref(false)
+const noOutline = ref(false)
+</script>
+
+<style lang="css">
+.glowing-border-page {
+  form {
+    display: flex;
+    gap: 2rem;
+    flex-wrap: wrap;
+    margin-bottom: 2rem;
+  }
+}
+</style>

package/app/pages/ui/layout-grid-a.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :styleClassPassthrough="['mbe-20']">
+          <h1 class="page-heading-2">Layout Grid 'A'</h1>
+
+          <CanvasSwitcher v-model:canvasName="canvasName" />
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :styleClassPassthrough="['mbe-20']">
+          <LayoutGridA :styleClassPassthrough="[canvasName]">
+            <template #slot1>
+              <h3 class="page-heading-3">Slot 1</h3>
+              <p>
+                Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+                convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+                ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+                nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+                egestas enim nostra ultricies.
+              </p>
+            </template>
+            <template #slot2>
+              <h3 class="page-heading-3">Slot 2</h3>
+              <p>
+                Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia
+                leo lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu
+                luctus tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur
+                class suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora.
+                Parturient montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus
+                nisi a montes.
+              </p>
+            </template>
+            <template #slot3>
+              <h3 class="page-heading-3">Slot 3</h3>
+              <p>
+                Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia
+                leo lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu
+                luctus tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur
+                class suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora.
+                Parturient montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus
+                nisi a montes.
+              </p>
+            </template>
+            <template #slot4>
+              <h3 class="page-heading-3">Slot 4</h3>
+              <p>
+                Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia
+                leo lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu
+                luctus tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur
+                class suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora.
+                Parturient montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus
+                nisi a montes.
+              </p>
+            </template>
+          </LayoutGridA>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :styleClassPassthrough="['mbe-20']">
+          <h2 class="page-heading-2">Full Width</h2>
+          <p>
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+            egestas enim nostra ultricies.
+          </p>
+          <p>
+            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
+            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
+            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
+            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
+            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+          </p>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MediaCanvas } from "~/types/components";
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "UI Layout Row",
+  meta: [{ name: "description", content: "Examples of UI Component Layout Row" }],
+  bodyAttrs: {
+    class: "home",
+  },
+});
+
+const canvasName = ref<MediaCanvas>("desktopCanvas");
+</script>
+
+<style lang="css">
+.canvas-switcher {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+
+  ul {
+    display: flex;
+    gap: 10px;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      button {
+        all: unset;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 5px;
+        border: 0px solid light-dark(var(--slate-10), var(--slate-02));
+        border-radius: 4px;
+        cursor: pointer;
+
+        .icon {
+          color: light-dark(var(--slate-10), var(--slate-02));
+
+          width: 24px;
+          height: 24px;
+
+          &.current {
+            color: light-dark(var(--green-10), var(--green-04));
+          }
+        }
+      }
+    }
+  }
+}
+
+.layout-grid-a-wrapper {
+  margin-inline: auto;
+  &.mobile {
+    max-width: 412px;
+  }
+  &.tablet {
+    max-width: 768px;
+  }
+  &.desktop {
+    max-width: 1060px;
+  }
+}
+</style>

package/app/pages/ui/layout-grid-b.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">Layout Grid 'B'</h1>
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
+          <LayoutGridB :top-row-slot1-item-count="6" :bottom-row-item-count="4" :style-class-passthrough="[canvasName]">
+            <template #[`top-row-slot1-1-content`]>
+              <p class="p-24">This is content slot 1</p>
+            </template>
+            <template #[`top-row-slot1-2-content`]>
+              <p class="p-24">This is content slot 2</p>
+            </template>
+            <template #[`top-row-slot1-3-content`]>
+              <p class="p-24">This is content slot 3</p>
+            </template>
+            <template #[`top-row-slot1-4-content`]>
+              <p class="p-24">This is content slot 4</p>
+            </template>
+            <template #[`top-row-slot1-5-content`]>
+              <p class="p-24">This is content slot 5</p>
+            </template>
+            <template #[`top-row-slot1-6-content`]>
+              <p class="p-24">This is content slot 6</p>
+            </template>
+
+            <template #top-row-slot-2>
+              <h2 class="page-heading-3">Top row slot 2</h2>
+              <p>
+                Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+                convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+                ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+                nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+                egestas enim nostra ultricies.
+              </p>
+              <p>
+                Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia
+                leo lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu
+                luctus tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur
+                class suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora.
+                Parturient montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus
+                nisi a montes.
+              </p>
+            </template>
+
+            <template #top-row-slot-3>
+              <h2 class="page-heading-3">Top row slot 3</h2>
+              <p>
+                Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+                convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+                ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+                nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+                egestas enim nostra ultricies.
+              </p>
+              <p>
+                Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia
+                leo lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu
+                luctus tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur
+                class suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora.
+                Parturient montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus
+                nisi a montes.
+              </p>
+            </template>
+
+            <template #[`bottom-row-1-content`]>
+              <h2 class="page-heading-3">This is content slot 1</h2>
+              <p class="page-body-normal">
+                Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+                convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+                ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+                nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+                egestas enim nostra ultricies.
+              </p>
+            </template>
+            <template #[`bottom-row-2-content`]>
+              <h2 class="page-heading-3">This is content slot 2</h2>
+              <p class="page-body-normal">
+                Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+                convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+                ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+                nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+                egestas enim nostra ultricies.
+              </p>
+            </template>
+            <template #[`bottom-row-3-content`]>
+              <h2 class="page-heading-3">This is content slot 3</h2>
+              <p class="page-body-normal">
+                Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+                convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+                ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+                nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+                egestas enim nostra ultricies.
+              </p>
+            </template>
+            <template #[`bottom-row-4-content`]>
+              <h2 class="page-heading-3">This is content slot 4</h2>
+              <p class="page-body-normal">
+                Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+                convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+                ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+                nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+                egestas enim nostra ultricies.
+              </p>
+            </template>
+          </LayoutGridB>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MediaCanvas } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "UI Layout Row",
+  meta: [{ name: "description", content: "Examples of UI Component Layout Row" }],
+  bodyAttrs: {
+    class: "home",
+  },
+});
+
+const canvasName = ref<MediaCanvas>("desktopCanvas");
+</script>

package/app/pages/ui/layout-row.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">Layout rows</h1>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Full Track (1fr)</h2>
+          <pre>variant="full"</pre>
+          <p>
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+            egestas enim nostra ultricies.
+          </p>
+          <p>
+            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
+            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
+            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
+            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
+            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+          </p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Full Content Track (1fr)</h2>
+          <pre>variant="full-content"</pre>
+          <p>
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+            egestas enim nostra ultricies.
+          </p>
+          <p>
+            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
+            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
+            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
+            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
+            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+          </p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Popout Track (1400px)</h2>
+          <pre>variant="popout"</pre>
+          <p>
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+            egestas enim nostra ultricies.
+          </p>
+          <p>
+            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
+            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
+            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
+            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
+            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+          </p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Content Track (1064px)</h2>
+          <pre>variant="content"</pre>
+          <p>
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+            egestas enim nostra ultricies.
+          </p>
+          <p>
+            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
+            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
+            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
+            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
+            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+          </p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Inset Content Track (840px)</h2>
+          <pre>variant="inset-content"</pre>
+          <p>
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+            egestas enim nostra ultricies.
+          </p>
+          <p>
+            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
+            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
+            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
+            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
+            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+          </p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Full Width</h2>
+          <pre>variant="full-width"</pre>
+          <p>
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+            egestas enim nostra ultricies.
+          </p>
+          <p>
+            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
+            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
+            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
+            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
+            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+          </p>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "UI Layout Row",
+  meta: [{ name: "description", content: "Examples of UI Component Layout Row" }],
+  bodyAttrs: {
+    class: "home",
+  },
+});
+</script>

package/app/pages/ui/magnetic-navigation.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Magnetic Navigation</h2>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
+          <MagneticNavigation />
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "Magnetic Navigation",
+  meta: [
+    {
+      name: "description",
+      content: "MagneticNavigation Meta description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "magnetic-navigation-page",
+  },
+})
+</script>
+
+<style lang="css">
+.magnetic-navigation-page {
+  /* CSS styles */
+  --_background-image: url("/images/rotating-carousel/image-2.webp");
+  --_background-position: 0 0;
+
+  background-image: var(--_background-image);
+  background-size: cover;
+  background-position: var(--_background-position);
+  background-attachment: fixed;
+
+  .magnetic-navigation {
+  }
+}
+</style>