srcdev-nuxt-components 9.1.49 → 9.1.50

package/app/pages/ui/display-pill.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="popout">
+        <PageRow tag="div" variant="popout">
           <h1 class="page-heading-2">Display Pill</h1>
 
           <!-- ── QA Panel (dev only) ───────────────────────────────── -->
@@ -15,7 +15,6 @@
                 </code>
               </summary>
               <div class="qa-panel__body">
-
                 <div class="qa-panel__group">
                   <span class="qa-panel__label">Variant</span>
                   <div class="qa-panel__chips">
@@ -25,7 +24,9 @@
                       class="qa-panel__chip"
                       :class="{ 'is-active': qaVariant === v }"
                       @click="qaVariant = v"
-                    >{{ v }}</button>
+                    >
+                      {{ v }}
+                    </button>
                   </div>
                 </div>
 
@@ -38,23 +39,21 @@
                       class="qa-panel__chip"
                       :class="{ 'is-active': qaSize === s }"
                       @click="qaSize = s"
-                    >{{ s }}</button>
+                    >
+                      {{ s }}
+                    </button>
                   </div>
                 </div>
 
                 <div class="qa-panel__group">
                   <span class="qa-panel__label">Reversed</span>
                   <div class="qa-panel__chips">
-                    <button
-                      class="qa-panel__chip"
-                      :class="{ 'is-active': !qaReversed }"
-                      @click="qaReversed = false"
-                    >icon → text</button>
-                    <button
-                      class="qa-panel__chip"
-                      :class="{ 'is-active': qaReversed }"
-                      @click="qaReversed = true"
-                    >text → icon</button>
+                    <button class="qa-panel__chip" :class="{ 'is-active': !qaReversed }" @click="qaReversed = false">
+                      icon → text
+                    </button>
+                    <button class="qa-panel__chip" :class="{ 'is-active': qaReversed }" @click="qaReversed = true">
+                      text → icon
+                    </button>
                   </div>
                 </div>
 
@@ -67,10 +66,11 @@
                       class="qa-panel__chip"
                       :class="{ 'is-active': qaTag === t }"
                       @click="qaTag = t"
-                    >&lt;{{ t }}&gt;</button>
+                    >
+                      &lt;{{ t }}&gt;
+                    </button>
                   </div>
                 </div>
-
               </div>
             </details>
           </div>
@@ -79,13 +79,7 @@
           <section>
             <h2 class="page-heading-3">Interactive preview</h2>
             <div class="demo-row">
-              <DisplayPill
-                :tag="qaTag"
-                label="Label text"
-                :variant="qaVariant"
-                :size="qaSize"
-                :reversed="qaReversed"
-              >
+              <DisplayPill :tag="qaTag" label="Label text" :variant="qaVariant" :size="qaSize" :reversed="qaReversed">
                 <template #icon>
                   <Icon name="material-symbols:star-outline-rounded" class="demo-icon" aria-hidden="true" />
                 </template>
@@ -138,12 +132,7 @@
 
               <div class="dt">Dashed border</div>
               <div class="dd">
-                <DisplayPill
-                  label="Dashed"
-                  :variant="qaVariant"
-                  :size="qaSize"
-                  style-class-passthrough="demo-dashed"
-                >
+                <DisplayPill label="Dashed" :variant="qaVariant" :size="qaSize" style-class-passthrough="demo-dashed">
                   <template #icon>
                     <Icon name="material-symbols:circle-outline" class="demo-icon" aria-hidden="true" />
                   </template>
@@ -210,12 +199,13 @@
                   <template #icon>
                     <Icon name="material-symbols:info-outline-rounded" class="demo-icon" aria-hidden="true" />
                   </template>
-                  <strong>Custom</strong>&nbsp;slot
+                  <strong>Custom</strong>
+                  &nbsp;slot
                 </DisplayPill>
               </div>
             </div>
           </section>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -271,7 +261,9 @@ const qaTag = ref<Tag>("span");
     list-style: none;
     user-select: none;
 
-    &::-webkit-details-marker { display: none; }
+    &::-webkit-details-marker {
+      display: none;
+    }
   }
 
   .qa-panel__title {
@@ -328,7 +320,9 @@ const qaTag = ref<Tag>("span");
     cursor: pointer;
     transition: background 0.15s;
 
-    &:hover { background: oklch(0% 0 0 / 0.4); }
+    &:hover {
+      background: oklch(0% 0 0 / 0.4);
+    }
 
     &.is-active {
       background: oklch(55% 0.18 240);

package/app/pages/ui/display-prompt.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="popout" style-class-passthrough="['pb-12']">
+        <PageRow tag="div" variant="popout" style-class-passthrough="['pb-12']">
           <h1 class="page-heading-2">Display Prompts</h1>
 
           <section class="prompt-examples pb-12">
@@ -55,7 +55,7 @@
               <template #content>This is prompt content, it can contain html or plain text.</template>
             </DisplayPromptCore>
           </section>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -64,12 +64,12 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "UI Display Prompts",
   meta: [{ name: "description", content: "Examples of UI Display Prompts" }],
-})
+});
 </script>
 
 <style lang="css">

package/app/pages/ui/display-toast.vue

@@ -2,7 +2,7 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20', 'p-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20', 'p-20']">
           <h2 class="page-heading-2">DisplayToast Component</h2>
           <HeaderBlock :tag-level="3" :class-level="3" :style-class-passthrough="['mbe-10']">
             Toast notification component (HeaderBlock)
@@ -93,7 +93,7 @@
               />
             </p>
           </form>
-        </LayoutRow>
+        </PageRow>
 
         <DisplayToast
           v-model="firstToastActive"

package/app/pages/ui/expanding-panel.vue

@@ -2,7 +2,7 @@
   <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-2">Details element - Unlinked</h1>
           <p class="mbe-12">Following 2 details block behave independantly.</p>
 
@@ -41,13 +41,9 @@
               </div>
             </template>
           </ExpandingPanel>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow
-          tag="div"
-          variant="full-width"
-          :style-class-passthrough="['expanding-panel-section', 'mbe-20', 'hidden']"
-        >
+        <PageRow tag="div" variant="full" :style-class-passthrough="['expanding-panel-section', 'mbe-20', 'hidden']">
           <h2 class="page-heading-2">Details element - Linked</h2>
           <p class="mbe-12">Details panels are linked, only 1 can be open at a time.</p>
 
@@ -96,9 +92,9 @@
               </div>
             </template>
           </ExpandingPanel>
-        </LayoutRow>
+        </PageRow>
 
-        <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-2">Details element - forceOpened</h1>
           <p class="page-body-normal">Will be displayed as force opened via prop forceOpened</p>
           <p class="page-body-normal">Also contains a button and link within content which toggles to closed</p>
@@ -134,7 +130,7 @@
               </div>
             </template>
           </ExpandingPanel>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -143,7 +139,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "Browser title tag",
@@ -153,14 +149,14 @@ useHead({
       content: "Meta description content",
     },
   ],
-})
+});
 
-const forceOpened = ref(false)
-const isPanelOpen = ref(false)
+const forceOpened = ref(false);
+const isPanelOpen = ref(false);
 
 const closePanel = () => {
-  isPanelOpen.value = false
-}
+  isPanelOpen.value = false;
+};
 </script>
 
 <style lang="css">

package/app/pages/ui/glowing-border.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">GlowingBorder Component</h1>
           <form class="mb-12">
             <div>
@@ -35,9 +35,9 @@
               <input type="checkbox" id="noOutline" v-model="noOutline" class="form-checkbox" />
             </div>
           </form>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
+        <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']">
@@ -49,9 +49,9 @@
               <p class="page-body-small">GlowingBorder Footer</p>
             </div>
           </GlowingBorder>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
+        <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']">
@@ -69,7 +69,7 @@
               </template>
             </CardCore>
           </GlowingBorder>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -78,7 +78,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "GlowingBorder Component",
@@ -91,12 +91,12 @@ useHead({
   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)
+const glowingBorderVariant = ref("vivid");
+const cardCoreVariant = ref<"outline" | "solid" | "subtle" | "soft">("solid");
+const hasDividers = ref(false);
+const noOutline = ref(false);
 </script>
 
 <style lang="css">

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

@@ -2,13 +2,13 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <LayoutRow tag="div" variant="full-width" :styleClassPassthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']">
           <h1 class="page-heading-2">Layout Grid 'A'</h1>
 
           <CanvasSwitcher v-model:canvasName="canvasName" />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :styleClassPassthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :styleClassPassthrough="['mbe-20']">
           <LayoutGridA :styleClassPassthrough="[canvasName]">
             <template #slot1>
               <h3 class="page-heading-3">Slot 1</h3>
@@ -54,9 +54,9 @@
               </p>
             </template>
           </LayoutGridA>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :styleClassPassthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :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
@@ -72,7 +72,7 @@
             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>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

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

@@ -2,12 +2,12 @@
   <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-2">Layout Grid 'B'</h1>
           <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
+        <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>
@@ -107,7 +107,7 @@
               </p>
             </template>
           </LayoutGridB>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

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

@@ -2,13 +2,13 @@
   <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">Magnetic Navigation</h2>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <MagneticNavigation />
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>
@@ -17,7 +17,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: "Magnetic Navigation",
@@ -30,7 +30,7 @@ useHead({
   bodyAttrs: {
     class: "magnetic-navigation-page",
   },
-})
+});
 </script>
 
 <style lang="css">

package/app/pages/ui/marquee-scroller.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">Marquee Scroller</h1>
 
           <MarqueeScroller
@@ -18,7 +18,7 @@
               </div>
             </template>
           </MarqueeScroller>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/mask-element.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']">
           <h2 class="page-heading-2">Mask Element</h2>
 
           <div class="test-mask-element">
@@ -24,7 +24,7 @@
               </div>
             </AlertMaskCore>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/masonry-columns.vue

@@ -2,13 +2,13 @@
   <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">Masonry Grid Ordered</h1>
           <p class="page-body-normal">Masonry grid ordered displaying dummy posts data</p>
           <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <div v-if="status === 'success'" class="masonry-columns">
             <div
               v-for="(item, index) in quotesData?.quotes.slice(0, displayCount)"
@@ -20,7 +20,7 @@
             </div>
           </div>
           <p v-else class="page-body-normal">&hellip;Loading</p>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/masonry-grid-ordered-experiment.vue

@@ -2,13 +2,13 @@
   <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">Masonry Grid Ordered</h1>
           <p class="page-body-normal">Masonry grid ordered displaying dummy posts data</p>
           <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
           <MasonryGridOrderedGridExperiment
             v-if="status === 'success'"
             :grid-data="quotesData?.quotes?.slice(0, displayCount).map((q) => ({ ...q, id: String(q.id) })) ?? []"
@@ -25,7 +25,7 @@
             </template>
           </MasonryGridOrderedGridExperiment>
           <p v-else class="page-body-normal">&hellip;Loading</p>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/masonry-grid-ordered.vue

@@ -2,13 +2,13 @@
   <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">Masonry Grid Ordered</h1>
           <p class="page-body-normal">Masonry grid ordered displaying dummy posts data</p>
           <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <MasonryGridOrdered
             v-if="status === 'success'"
             :grid-data="quotesData?.quotes.slice(0, displayCount) ?? []"
@@ -25,7 +25,7 @@
             </template>
           </MasonryGridOrdered>
           <p v-else class="page-body-normal">&hellip;Loading</p>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

package/app/pages/ui/masonry-grid-sorted.vue

@@ -2,12 +2,12 @@
   <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-2">Masonry Grid</h1>
           <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <MasonryGridSorted
             :grid-data="quotesData?.quotes.slice(0, qoutesDisplayCount) ?? []"
             :item-min-width="350"
@@ -26,7 +26,7 @@
               </div>
             </template>
           </MasonryGridSorted>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

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

@@ -2,12 +2,12 @@
   <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-2">Masonry Grid</h1>
           <CanvasSwitcher v-model:canvas-name="canvasName" />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
           <MasonryGrid
             :grid-data="quotesData?.quotes.slice(0, qoutesDisplayCount) ?? []"
             :item-min-width="350"
@@ -26,7 +26,7 @@
               </div>
             </template>
           </MasonryGrid>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>

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

@@ -2,25 +2,25 @@
   <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">Navigation Horizontal</h2>
           <p class="page-body-medium">This navigation has a reflective glow effect</p>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <DisplayThemeSwitch />
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-4']">
-          <LayoutRow tag="div" variant="content">
+        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-4']">
+          <PageRow tag="div" variant="content">
             <h3 class="page-heading-3">User controllable</h3>
-          </LayoutRow>
+          </PageRow>
           <div class="nav-preview" :class="`theme-${theme}`" :style="navStyle">
             <NavigationHorizontal :nav-item-data="navItemData" />
           </div>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <div class="nav-playground">
             <fieldset>
               <legend>Theme</legend>
@@ -203,9 +203,9 @@
               </div>
             </fieldset>
           </div>
-        </LayoutRow>
+        </PageRow>
 
-        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
           <div class="css-snippet">
             <div class="css-snippet-header">
               <h3 class="page-heading-3">CSS Token Snippet</h3>
@@ -213,7 +213,7 @@
             </div>
             <pre class="css-snippet-code">{{ cssSnippet }}</pre>
           </div>
-        </LayoutRow>
+        </PageRow>
       </template>
     </NuxtLayout>
   </div>