srcdev-nuxt-components 9.3.6 → 9.3.8

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

@@ -1,76 +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">Typography - Heading Text</h1>
-          <p class="page-body-normal">Page heading styles</p>
-          <p class="page-body-normal">Use within main body content</p>
-
-          <div class="demo-row">
-            <strong>page-heading-1</strong>
-            <div class="class-demo page-heading-1">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-heading-2</strong>
-            <div class="class-demo page-heading-2">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-heading-3</strong>
-            <div class="class-demo page-heading-3">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit. Lorum ipsum dolor sit amet, consectetur
-              adipiscing elit.
-            </div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-heading-4</strong>
-            <div class="class-demo page-heading-4">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-heading-5</strong>
-            <div class="class-demo page-heading-5">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-heading-6</strong>
-            <div class="class-demo page-heading-6">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</div>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Typography",
-  meta: [{ name: "description", content: "Typography" }],
-  bodyAttrs: {
-    class: "page-typography-heading",
-  },
-});
-</script>
-
-<style lang="css">
-.page-typography-heading {
-  .demo-row {
-    margin-block-end: 1rem;
-    strong {
-      display: block;
-      margin-block: 0;
-    }
-    .class-demo {
-      display: block;
-      margin-block-end: 1rem;
-    }
-  }
-}
-</style>

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

@@ -1,103 +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">Typography - Link Text</h1>
-          <p class="page-body-normal">Page link styles</p>
-          <p class="page-body-normal">Use within main body content</p>
-
-          <div class="demo-row">
-            <strong>page-link-large</strong>
-            <a href="#" class="class-demo page-link-large">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</a>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-link-large-semibold</strong>
-            <a href="#" class="class-demo page-link-large-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </a>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-link-medium</strong>
-            <a href="#" class="class-demo page-link-medium">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</a>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-link-medium-semibold</strong>
-            <a href="#" class="class-demo page-link-medium-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </a>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-link-normal</strong>
-            <a href="#" class="class-demo page-link-normal">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</a>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-link-normal-semibold</strong>
-            <a href="#" class="class-demo page-link-normal-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </a>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-link-small</strong>
-            <a href="#" class="class-demo page-link-small">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</a>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-link-small-semibold</strong>
-            <a href="#" class="class-demo page-link-small-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </a>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-link-xsmall</strong>
-            <a href="#" class="class-demo page-link-xsmall">Lorum ipsum dolor sit amet, consectetur adipiscing elit.</a>
-          </div>
-
-          <div class="demo-row">
-            <strong>page-link-xsmall-semibold</strong>
-            <a href="#" class="class-demo page-link-xsmall-semibold">
-              Lorum ipsum dolor sit amet, consectetur adipiscing elit.
-            </a>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Typography",
-  meta: [{ name: "description", content: "Typography" }],
-  bodyAttrs: {
-    class: "page-typography-link",
-  },
-});
-</script>
-
-<style lang="css">
-.page-typography-link {
-  .demo-row {
-    margin-block-end: 1rem;
-    strong {
-      display: block;
-      margin-block: 0;
-    }
-    .class-demo {
-      display: inline-block;
-      margin-block-end: 1rem;
-    }
-  }
-}
-</style>

package/app/pages/ui/accordian.vue

@@ -1,211 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-2">Accordian</h1>
-          <p>Any item open and/closed</p>
-
-          <AccordianCore
-            :item-count="data.length ?? 0"
-            :animation-duration="1000"
-            :style-class-passthrough="['class-modifier-narrow']"
-          >
-            <template v-for="(item, key) in data" :key="`summary-${key}`" #[`accordian-${key}-summary`]>
-              {{ key }} - {{ item.title }}
-            </template>
-            <template v-for="(item, key) in data" :key="`icon-${key}`" #[`accordian-${key}-icon`]>
-              <Icon name="bi:caret-down-fill" class="icon" />
-            </template>
-            <template v-for="(item, key) in data" :key="`content-${key}`" #[`accordian-${key}-content`]>
-              <p class="pb-12">{{ item.content }}</p>
-            </template>
-          </AccordianCore>
-        </PageRow>
-
-        <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>
-
-          <AccordianCore
-            :item-count="3"
-            :name="`accordian-${useId()}`"
-            :animation-duration="400"
-            :style-class-passthrough="['class-modifier-wide']"
-          >
-            <template v-for="(item, key) in data" :key="`summary-${key}`" #[`accordian-${key}-summary`]>
-              {{ key }} - {{ item.title }}
-            </template>
-            <template v-for="(item, key) in data" :key="`icon-${key}`" #[`accordian-${key}-icon`]>
-              <Icon name="bi:caret-down-fill" class="icon" />
-            </template>
-            <template #[`accordian-0-content`]>
-              <p class="pb-12">This is content slot 0</p>
-            </template>
-            <template #[`accordian-1-content`]>
-              <p class="pb-12">This is content slot 1</p>
-            </template>
-            <template #[`accordian-2-content`]>
-              <p class="pb-12">This is content slot 2</p>
-            </template>
-          </AccordianCore>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Display Accordian",
-  meta: [{ name: "description", content: "Display Accordian" }],
-  bodyAttrs: {
-    class: "",
-  },
-});
-
-interface IAccordianData {
-  title: string;
-  content: string;
-}
-
-const data = ref<IAccordianData[]>([
-  {
-    title: "Trigger Item 1",
-    content:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!. Lorem ipsum dolor sit, adipisicing elit. Iusto, amet!",
-  },
-  {
-    title: "Trigger Item 2",
-    content: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!",
-  },
-  {
-    title: "Trigger Item 3",
-    content:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!, Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!",
-  },
-  {
-    title: "Trigger Item 4",
-    content:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!, Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!",
-  },
-]);
-</script>
-
-<style lang="css">
-.class-modifier-wide {
-  &.display-accordian {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-}
-
-.class-modifier-narrow {
-  &.display-accordian {
-    max-width: 300px;
-    margin: 0 auto;
-
-    .accordian-item {
-      &.expanding-panel {
-        --_border-radius: 0.6rem;
-        --_margin-block-end: 1rem;
-
-        border: 1px solid var(--slate-00);
-        /* transition:
-          margin-block-end 300ms ease-in-out,
-          border-radius 300ms ease-in-out; */
-
-        /* Default state: first element gets top corners, last gets bottom corners */
-        &:first-child {
-          border-start-start-radius: var(--_border-radius);
-          border-start-end-radius: var(--_border-radius);
-        }
-
-        &:last-child {
-          border-end-start-radius: var(--_border-radius);
-          border-end-end-radius: var(--_border-radius);
-        }
-
-        /* When current element is open: gets full border-radius and reduced margin */
-        &:has(.expanding-panel-details[open]) {
-          will-change: margin-block-end, border-radius;
-          border-radius: var(--_border-radius);
-          margin-block-end: var(--_margin-block-end);
-
-          &:first-child {
-            margin-block-end: var(--_margin-block-end);
-          }
-        }
-
-        /* When immediately before an open element: gets bottom corners and margin */
-        &:has(+ .expanding-panel .expanding-panel-details[open]) {
-          will-change: margin-block-end, border-radius;
-          border-end-start-radius: var(--_border-radius);
-          border-end-end-radius: var(--_border-radius);
-          margin-block-end: var(--_margin-block-end);
-        }
-
-        /* Override: if last child and previous element is open, keep bottom corners */
-        &:last-child:has(.expanding-panel-details:not([open])) {
-          border-end-start-radius: var(--_border-radius);
-          border-end-end-radius: var(--_border-radius);
-        }
-
-        /* When following an open element: only gets top corners (not full border-radius) */
-        &:has(.expanding-panel-details[open]) + .expanding-panel {
-          border-start-start-radius: var(--_border-radius);
-          border-start-end-radius: var(--_border-radius);
-        }
-
-        .expanding-panel-details {
-          padding-block: 0.8rem;
-          padding-inline: 1.4rem;
-
-          .expanding-panel-summary {
-            padding: 0.1rem;
-
-            .label-wrapper {
-              /* Custom css */
-            }
-            .icon-wrapper {
-              /* Custom css */
-
-              .icon {
-                /* Custom css */
-              }
-            }
-          }
-
-          &[open] {
-            .expanding-panel-summary {
-              .icon-wrapper {
-                .icon {
-                  /* Custom css */
-                }
-              }
-            }
-            + .expanding-panel-content {
-              /* Custom css */
-              .inner {
-                /* Custom css */
-              }
-            }
-          }
-        }
-
-        .expanding-panel-content {
-          /* Custom css */
-
-          .inner {
-            /* Custom css */
-          }
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -1,191 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <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.
-          </p>
-        </PageRow>
-
-        <div ref="stickyNavRef" class="anchor-tab-nav-sticky">
-          <PageRow tag="div" variant="content">
-            <TabNavigation
-              :nav-item-data="anchorNavData"
-              :anchor-scroll-offset="() => stickyNavRef?.offsetHeight ?? 0"
-            />
-          </PageRow>
-        </div>
-
-        <section id="overview" class="anchor-tab-section">
-          <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.
-            </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.
-            </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.
-            </p>
-          </PageRow>
-        </section>
-
-        <section id="api" class="anchor-tab-section">
-          <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.
-            </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>
-              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>
-          </PageRow>
-        </section>
-
-        <section id="usage" class="anchor-tab-section">
-          <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.
-            </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.
-            </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>
-          </PageRow>
-        </section>
-
-        <section id="motion" class="anchor-tab-section">
-          <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.
-            </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.
-            </p>
-          </PageRow>
-        </section>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { NavItemData } from "~/types/components";
-
-definePageMeta({ layout: false });
-
-const stickyNavRef = ref<HTMLElement | null>(null);
-
-const anchorNavData: NavItemData = {
-  main: [
-    { text: "Overview", href: "#overview" },
-    { text: "API", href: "#api" },
-    { text: "Usage", href: "#usage" },
-    { text: "Reduced Motion", href: "#motion" },
-  ],
-};
-</script>
-
-<style lang="css">
-.anchor-tab-nav-sticky {
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  background-color: var(--page-bg, #000);
-  border-block-end: 1px solid oklch(100% 0 0 / 10%);
-}
-
-.anchor-tab-section {
-  min-block-size: 60vh;
-  padding-block: 6rem 8rem;
-  border-block-end: 1px solid oklch(100% 0 0 / 8%);
-
-  &:last-child {
-    border-block-end: none;
-  }
-
-  .page-heading-2 {
-    margin-block-end: 2rem;
-  }
-
-  .page-body-medium {
-    margin-block-end: 1.6rem;
-  }
-}
-
-.demo-code {
-  background-color: oklch(100% 0 0 / 4%);
-  border: 1px solid oklch(100% 0 0 / 10%);
-  border-radius: 0.6rem;
-  padding: 1.8rem 2rem;
-  overflow-x: auto;
-  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
-  font-size: 1.3rem;
-  line-height: 1.65;
-  margin-block: 1.2rem 2rem;
-  white-space: pre;
-  color: var(--slate-01, currentColor);
-}
-</style>