srcdev-nuxt-components 9.3.6 → 9.3.8

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

@@ -1,111 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :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="cardCoreVariant" 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>
-        </PageRow>
-
-        <PageRow 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>
-        </PageRow>
-
-        <PageRow 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']">
-            <CardCore :variant="cardCoreVariant" :has-dividers :no-outline>
-              <template #header>
-                <h2 class="page-heading-2">CardCore Header</h2>
-              </template>
-              <template #content>
-                <h3 class="page-heading-3">CardCore Content</h3>
-                <p class="page-body-normal">This is default slot content for the CardCore 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">CardCore Footer</p>
-              </template>
-            </CardCore>
-          </GlowingBorder>
-        </PageRow>
-      </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 cardCoreVariant = ref<"outline" | "solid" | "subtle" | "soft">("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-content-docs.vue

@@ -1,72 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-2">Layout Content Docs</h1>
-
-          <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <div :class="[canvasName]">
-            <ContentDocs
-              v-model:active-nav-item="activeNavItem"
-              v-model:active-page-nav-item="activePageNavItem"
-              :docs-nav-items="docsNavItems"
-              :docs-page-nav-items="docsPageNavItems"
-            >
-              <template #docsContent>
-                <h3 class="page-heading-3">Docs Content</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>
-            </ContentDocs>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { MediaCanvas, DocsNavItem } from "~/types/components";
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "UI Layout Content Docs",
-  meta: [{ name: "description", content: "Examples of UI Component Layout Content Docs" }],
-  bodyAttrs: {
-    class: "content-docs-demo-page",
-  },
-});
-
-const canvasName = ref<MediaCanvas>("mobileCanvas");
-
-const docsNavItems: DocsNavItem[] = [
-  { label: "Getting started", to: "/ui/layout-content-docs", icon: "lucide:rocket" },
-  { label: "Installation", to: "/ui/layout-content-docs#installation", icon: "lucide:download" },
-  { label: "Configuration", to: "/ui/layout-content-docs#configuration" },
-  { label: "Theming", to: "/ui/layout-content-docs#theming", icon: "lucide:palette" },
-  { label: "Accessibility", to: "/ui/layout-content-docs#accessibility" },
-  { label: "Troubleshooting", to: "/ui/layout-content-docs#troubleshooting", icon: "lucide:life-buoy" },
-];
-
-const docsPageNavItems: DocsNavItem[] = [
-  { label: "Overview", to: "/ui/layout-content-docs#overview", icon: "lucide:eye" },
-  { label: "Examples", to: "/ui/layout-content-docs#examples" },
-  { label: "Props", to: "/ui/layout-content-docs#props", icon: "lucide:settings-2" },
-  { label: "Slots", to: "/ui/layout-content-docs#slots" },
-];
-
-const activeNavItem = ref<string | undefined>(docsNavItems[0]?.to);
-const activePageNavItem = ref<string | undefined>(undefined);
-</script>

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

@@ -1,96 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-2">Layout Grid 'A'</h1>
-
-          <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <LayoutGridA :style-class-passthrough="[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>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['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>
-        </PageRow>
-      </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-grid-b.vue

@@ -1,132 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-2">Layout Grid 'B'</h1>
-          <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </PageRow>
-
-        <PageRow 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>
-        </PageRow>
-      </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/magnetic-navigation.vue

@@ -1,50 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Magnetic Navigation</h2>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <MagneticNavigation />
-        </PageRow>
-      </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>

package/app/pages/ui/marquee-scroller.vue

@@ -1,99 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Marquee Scroller</h1>
-
-          <MarqueeScroller
-            animation-runtime="20s"
-            :marquee-data
-            :item-config="{ width: '100px', height: '100px', quantity: marqueeData.length }"
-            :reverse="false"
-          >
-            <template v-for="item in marqueeData" :key="item.id" #[item.id]>
-              <div class="item-inner">
-                <h3>ID: {{ item.id }}</h3>
-                <p>{{ item.content }}</p>
-              </div>
-            </template>
-          </MarqueeScroller>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Typography",
-  meta: [{ name: "description", content: "Typography" }],
-  bodyAttrs: {
-    class: "page-marquee-scroller",
-  },
-});
-
-const marqueeData = [
-  {
-    id: 1,
-    content: "Item 1",
-  },
-  {
-    id: 2,
-    content: "Item 2",
-  },
-  {
-    id: 3,
-    content: "Item 3",
-  },
-  {
-    id: 4,
-    content: "Item 4",
-  },
-  {
-    id: 5,
-    content: "Item 5",
-  },
-  {
-    id: 6,
-    content: "Item 6",
-  },
-  {
-    id: 7,
-    content: "Item 7",
-  },
-  {
-    id: 8,
-    content: "Item 8",
-  },
-  {
-    id: 9,
-    content: "Item 9",
-  },
-  {
-    id: 10,
-    content: "Item 10",
-  },
-  {
-    id: 11,
-    content: "Item 11",
-  },
-  {
-    id: 12,
-    content: "Item 12",
-  },
-  {
-    id: 13,
-    content: "Item 13",
-  },
-];
-</script>
-
-<style lang="css">
-.page-marquee-scroller {
-}
-</style>

package/app/pages/ui/mask-element.vue

@@ -1,104 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Mask Element</h2>
-
-          <div class="test-mask-element">
-            <AlertMaskCore
-              :config="{
-                backgroundColour: 'rgba(0,0,0,0.25)',
-                borderColour: 'var(--orange-06)',
-                radiusLeft: 12,
-                radiusRight: 4,
-                borderLeft: 12,
-                borderTop: 1,
-                borderRight: 1,
-                borderBottom: 1,
-              }"
-              :style-class-passthrough="['test-alert']"
-            >
-              <div class="some-local-class">
-                <p>Constant-radius masked border demo, and some more text</p>
-              </div>
-            </AlertMaskCore>
-
-            <div class="test-mask-element">
-              <AlertMaskCore
-                :left-border-only="true"
-                :config="{
-                  backgroundColour: 'rgba(0,0,0,0.25)',
-                  borderColour: 'var(--red-06)',
-                  radiusLeft: 12,
-                  radiusRight: 4,
-                  borderLeft: 12,
-                  borderTop: 1,
-                  borderRight: 1,
-                  borderBottom: 1,
-                }"
-                :style-class-passthrough="['test-alert']"
-              >
-                <div class="some-local-class">
-                  <p>Compact</p>
-                </div>
-              </AlertMaskCore>
-            </div>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Mask Element",
-  meta: [
-    {
-      name: "description",
-      content: "Mask Element Meta description content",
-    },
-  ],
-  bodyAttrs: {
-    class: "mask-element-page",
-  },
-});
-</script>
-
-<style lang="css">
-.mask-element-page {
-  --_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;
-
-  .test-mask-element {
-    position: relative;
-    margin-top: 100px;
-    display: grid;
-    justify-self: center;
-
-    .alert-mask-core {
-      &.test-alert {
-        /* width: 600px; */
-
-        .alert-mask-content-slot {
-          .some-local-class {
-            color: white;
-            padding-block: 0.4rem;
-            padding-inline: 0.8rem;
-          }
-        }
-      }
-    }
-  }
-}
-</style>