srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/ui/navigation/site-navigation/services.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="snav-demo-page">
-    <h1>Services</h1>
-    <p>This is the Services page. The active indicator in the navigation above should be sitting under "Services".</p>
-
-    <NuxtImg
-      src="/images/banners/banner-light-brunette.webp"
-      alt="Services banner"
-      width="1200"
-      height="500"
-      loading="eager"
-      class="snav-demo-hero"
-    />
-
-    <h2>What We Offer</h2>
-    <div class="snav-demo-services">
-      <div v-for="(service, i) in services" :key="i" class="snav-demo-service-card">
-        <NuxtImg :src="service.img" :alt="service.title" width="600" height="400" loading="lazy" class="snav-demo-img" />
-        <div class="snav-demo-service-card__body">
-          <h3>{{ service.title }}</h3>
-          <p>{{ service.description }}</p>
-        </div>
-      </div>
-    </div>
-
-    <h2>Our Work</h2>
-    <div class="snav-demo-grid">
-      <NuxtImg v-for="n in [4, 5, 6, 7, 8, 9]" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Work sample ${n}`" width="600" height="400" loading="lazy" class="snav-demo-img" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({ layout: "site-navigation-demo" });
-useHead({ title: "SiteNavigation Demo — Services" });
-
-const services = [
-  { title: "Colour", img: "/images/rotating-carousel/image-1.webp", description: "From subtle highlights to bold transformations. Our colour specialists use only the finest products for vibrant, lasting results." },
-  { title: "Cut & Style", img: "/images/rotating-carousel/image-2.webp", description: "Precision cuts tailored to your face shape and lifestyle. Walk out feeling confident every single time." },
-  { title: "Treatment", img: "/images/rotating-carousel/image-3.webp", description: "Restore shine and health with our premium treatment range. Ideal for damaged, dry, or colour-treated hair." },
-];
-</script>

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

@@ -1,493 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout">
-          <h1 class="page-heading-2">TabNavigation</h1>
-
-          <!-- ── QA Panel (dev only) ───────────────────────────────── -->
-          <div v-if="isDev" class="qa-panel">
-            <details class="qa-panel__details" open>
-              <summary class="qa-panel__summary">
-                <span class="qa-panel__title">QA — TabNavigation</span>
-                <code class="qa-panel__status">
-                  align:{{ navAlign }} · size:{{ qaLinkSize }}rem · gap:{{ qaGap }}rem ·
-                  dur:{{ qaTransitionDuration }}ms
-                </code>
-              </summary>
-              <div class="qa-panel__body">
-                <!-- Props -->
-                <div class="qa-panel__group qa-panel__group--full">
-                  <span class="qa-panel__section">Props</span>
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">nav-align</span>
-                  <div class="qa-panel__chips">
-                    <button
-                      v-for="a in ['left', 'center', 'right']"
-                      :key="a"
-                      class="qa-panel__chip"
-                      :class="{ 'is-active': navAlign === a }"
-                      @click="navAlign = a as 'left' | 'center' | 'right'"
-                    >
-                      {{ a }}
-                    </button>
-                  </div>
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">container width</span>
-                  <div class="qa-panel__chips">
-                    <button
-                      class="qa-panel__chip"
-                      :class="{ 'is-active': !isNarrow }"
-                      @click="isNarrow = false"
-                    >
-                      full
-                    </button>
-                    <button
-                      class="qa-panel__chip"
-                      :class="{ 'is-active': isNarrow }"
-                      @click="isNarrow = true"
-                    >
-                      narrow (burger)
-                    </button>
-                  </div>
-                </div>
-
-                <!-- Link tokens -->
-                <div class="qa-panel__group qa-panel__group--full">
-                  <span class="qa-panel__section">Link tokens</span>
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">link-color</span>
-                  <input v-model="qaLinkColor" type="color" class="qa-panel__color" />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">link-hover-color</span>
-                  <input v-model="qaLinkHoverColor" type="color" class="qa-panel__color" />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">link-active-color</span>
-                  <input v-model="qaLinkActiveColor" type="color" class="qa-panel__color" />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">link-size — {{ qaLinkSize }}rem</span>
-                  <input
-                    v-model.number="qaLinkSize"
-                    type="range"
-                    min="1.2"
-                    max="2.4"
-                    step="0.1"
-                    class="qa-panel__range"
-                  />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">link-weight</span>
-                  <div class="qa-panel__chips">
-                    <button
-                      v-for="w in [300, 400, 500, 600]"
-                      :key="w"
-                      class="qa-panel__chip"
-                      :class="{ 'is-active': qaLinkWeight === w }"
-                      @click="qaLinkWeight = w"
-                    >
-                      {{ w }}
-                    </button>
-                  </div>
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">link-tracking — {{ qaLinkTracking }}em</span>
-                  <input
-                    v-model.number="qaLinkTracking"
-                    type="range"
-                    min="0"
-                    max="0.2"
-                    step="0.01"
-                    class="qa-panel__range"
-                  />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">gap — {{ qaGap }}rem</span>
-                  <input
-                    v-model.number="qaGap"
-                    type="range"
-                    min="0.5"
-                    max="5"
-                    step="0.1"
-                    class="qa-panel__range"
-                  />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">transition — {{ qaTransitionDuration }}ms</span>
-                  <input
-                    v-model.number="qaTransitionDuration"
-                    type="range"
-                    min="0"
-                    max="800"
-                    step="25"
-                    class="qa-panel__range"
-                  />
-                </div>
-
-                <!-- Indicator tokens -->
-                <div class="qa-panel__group qa-panel__group--full">
-                  <span class="qa-panel__section">Indicator tokens</span>
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">indicator-color</span>
-                  <input v-model="qaIndicatorColor" type="color" class="qa-panel__color" />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">hovered-bg color</span>
-                  <input v-model="qaHoveredBgColor" type="color" class="qa-panel__color" />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">hovered-bg opacity — {{ qaHoveredBgOpacity }}</span>
-                  <input
-                    v-model.number="qaHoveredBgOpacity"
-                    type="range"
-                    min="0"
-                    max="1"
-                    step="0.05"
-                    class="qa-panel__range"
-                  />
-                </div>
-
-                <!-- Panel tokens -->
-                <div class="qa-panel__group qa-panel__group--full">
-                  <span class="qa-panel__section">Panel tokens (visible in narrow mode)</span>
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">panel-bg</span>
-                  <input v-model="qaPanelBg" type="color" class="qa-panel__color" />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">panel-link-color</span>
-                  <input v-model="qaPanelLinkColor" type="color" class="qa-panel__color" />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">panel-slide-duration — {{ qaPanelSlideDuration }}ms</span>
-                  <input
-                    v-model.number="qaPanelSlideDuration"
-                    type="range"
-                    min="0"
-                    max="800"
-                    step="25"
-                    class="qa-panel__range"
-                  />
-                </div>
-
-                <!-- Burger tokens -->
-                <div class="qa-panel__group qa-panel__group--full">
-                  <span class="qa-panel__section">Burger tokens (visible in narrow mode)</span>
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">burger-color</span>
-                  <input v-model="qaBurgerColor" type="color" class="qa-panel__color" />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">burger-width — {{ qaBurgerWidth }}px</span>
-                  <input
-                    v-model.number="qaBurgerWidth"
-                    type="range"
-                    min="14"
-                    max="36"
-                    step="1"
-                    class="qa-panel__range"
-                  />
-                </div>
-
-                <div class="qa-panel__group">
-                  <span class="qa-panel__label">burger-gap — {{ qaBurgerGap }}px</span>
-                  <input
-                    v-model.number="qaBurgerGap"
-                    type="range"
-                    min="2"
-                    max="12"
-                    step="1"
-                    class="qa-panel__range"
-                  />
-                </div>
-              </div>
-            </details>
-          </div>
-
-          <!-- ── Component stage ───────────────────────────────────── -->
-          <div class="tab-nav-demo-stage" :class="{ 'is-narrow': isNarrow }" :style="tokenStyles">
-            <TabNavigation :nav-item-data="navData" :nav-align="navAlign" />
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { NavItemData } from "~/types/components";
-
-definePageMeta({ layout: false });
-useHead({
-  title: "TabNavigation — Component Demo",
-  bodyAttrs: { class: "tab-nav-demo-page" },
-});
-
-const isDev = import.meta.dev;
-
-// ── Props ──────────────────────────────────────────────────────────────────
-const navAlign = ref<"left" | "center" | "right">("left");
-const isNarrow = ref(false);
-
-// ── Link tokens ────────────────────────────────────────────────────────────
-const qaLinkColor = ref("#e8e8e8");
-const qaLinkHoverColor = ref("#999999");
-const qaLinkActiveColor = ref("#e8e8e8");
-const qaLinkSize = ref(1.6);
-const qaLinkWeight = ref(400);
-const qaLinkTracking = ref(0.06);
-const qaGap = ref(2.2);
-const qaTransitionDuration = ref(250);
-
-// ── Indicator tokens ───────────────────────────────────────────────────────
-const qaIndicatorColor = ref("#e8e8e8");
-const qaHoveredBgColor = ref("#ffffff");
-const qaHoveredBgOpacity = ref(0.08);
-
-// ── Panel tokens ───────────────────────────────────────────────────────────
-const qaPanelBg = ref("#1a1614");
-const qaPanelLinkColor = ref("#e8e8e8");
-const qaPanelSlideDuration = ref(350);
-
-// ── Burger tokens ──────────────────────────────────────────────────────────
-const qaBurgerColor = ref("#e8e8e8");
-const qaBurgerWidth = ref(22);
-const qaBurgerGap = ref(5);
-
-function hexToRgbParts(hex: string) {
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-  return `${r} ${g} ${b}`;
-}
-
-const tokenStyles = computed(() => ({
-  "--tab-nav-link-color": qaLinkColor.value,
-  "--tab-nav-link-hover-color": qaLinkHoverColor.value,
-  "--tab-nav-link-active-color": qaLinkActiveColor.value,
-  "--tab-nav-link-size": `${qaLinkSize.value}rem`,
-  "--tab-nav-link-weight": String(qaLinkWeight.value),
-  "--tab-nav-link-tracking": `${qaLinkTracking.value}em`,
-  "--tab-nav-gap": `${qaGap.value}rem`,
-  "--tab-nav-transition": `${qaTransitionDuration.value}ms ease`,
-  "--tab-nav-decorator-indicator-color": qaIndicatorColor.value,
-  "--tab-nav-decorator-hovered-bg": `rgb(${hexToRgbParts(qaHoveredBgColor.value)} / ${qaHoveredBgOpacity.value})`,
-  "--tab-nav-panel-bg": qaPanelBg.value,
-  "--tab-nav-panel-link-color": qaPanelLinkColor.value,
-  "--tab-nav-panel-slide-duration": `${qaPanelSlideDuration.value}ms`,
-  "--tab-nav-burger-color": qaBurgerColor.value,
-  "--tab-nav-burger-width": `${qaBurgerWidth.value}px`,
-  "--tab-nav-burger-gap": `${qaBurgerGap.value}px`,
-}));
-
-const navData: NavItemData = {
-  main: [
-    { text: "Components", href: "/ui/anchor-scroll" },
-    { text: "Layouts", href: "/ui/page-row" },
-    { text: "Forms", href: "/forms/examples/buttons" },
-    { text: "Typography", href: "/typography/hero-text" },
-  ],
-};
-</script>
-
-<style lang="css">
-.tab-nav-demo-page {
-  .tab-nav-demo-stage {
-    margin-block-start: 2rem;
-    border: 1px solid oklch(100% 0 0 / 12%);
-    border-radius: 0.8rem;
-    padding: 2rem;
-    background-color: oklch(100% 0 0 / 3%);
-    position: relative;
-    transition: max-inline-size 0.3s ease;
-
-    &.is-narrow {
-      max-inline-size: 260px;
-      overflow: hidden;
-    }
-  }
-
-  .qa-panel {
-    background: oklch(15% 0 0);
-    color: white;
-    font-size: 1.3rem;
-    margin-block-start: 2rem;
-    border-radius: 0.6rem;
-    overflow: hidden;
-  }
-
-  .qa-panel__details {
-    padding: 1rem 2rem;
-  }
-
-  .qa-panel__summary {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 1.6rem;
-    list-style: none;
-    user-select: none;
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-  }
-
-  .qa-panel__title {
-    font-weight: 600;
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-  }
-
-  .qa-panel__status {
-    font-family: monospace;
-    font-size: 1.2rem;
-    background: oklch(0% 0 0 / 0.3);
-    padding: 0.2rem 0.8rem;
-    border-radius: 0.4rem;
-    user-select: text;
-    cursor: text;
-  }
-
-  .qa-panel__body {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2.4rem;
-    padding-block: 1.2rem 1.6rem;
-  }
-
-  .qa-panel__group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-
-    &.qa-panel__group--full {
-      flex-basis: 100%;
-      margin-block-start: 0.8rem;
-      padding-block-end: 0.4rem;
-      border-block-end: 1px solid oklch(100% 0 0 / 0.1);
-
-      &:first-child {
-        margin-block-start: 0;
-      }
-    }
-  }
-
-  .qa-panel__section {
-    font-size: 1.1rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: oklch(65% 0.18 240);
-  }
-
-  .qa-panel__label {
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    opacity: 0.55;
-  }
-
-  .qa-panel__chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.4rem;
-  }
-
-  .qa-panel__chip {
-    font-family: monospace;
-    font-size: 1.2rem;
-    color: white;
-    background: oklch(0% 0 0 / 0.25);
-    border: 1px solid oklch(100% 0 0 / 0.18);
-    padding: 0.3rem 1rem;
-    border-radius: 0.4rem;
-    cursor: pointer;
-    transition: background 0.15s;
-
-    &:hover {
-      background: oklch(0% 0 0 / 0.4);
-    }
-
-    &.is-active {
-      background: oklch(55% 0.18 240);
-      border-color: oklch(55% 0.18 240);
-    }
-  }
-
-  .qa-panel__range {
-    appearance: none;
-    width: 18rem;
-    height: 0.4rem;
-    background: oklch(100% 0 0 / 0.18);
-    border-radius: 0.4rem;
-    outline: none;
-    cursor: pointer;
-
-    &::-webkit-slider-thumb {
-      appearance: none;
-      width: 1.4rem;
-      height: 1.4rem;
-      border-radius: 50%;
-      background: oklch(55% 0.18 240);
-      cursor: pointer;
-      transition: background 0.15s;
-    }
-
-    &::-moz-range-thumb {
-      width: 1.4rem;
-      height: 1.4rem;
-      border: none;
-      border-radius: 50%;
-      background: oklch(55% 0.18 240);
-      cursor: pointer;
-      transition: background 0.15s;
-    }
-
-    &:hover::-webkit-slider-thumb {
-      background: oklch(62% 0.18 240);
-    }
-
-    &:hover::-moz-range-thumb {
-      background: oklch(62% 0.18 240);
-    }
-  }
-
-  .qa-panel__color {
-    width: 4rem;
-    height: 2.8rem;
-    border: 1px solid oklch(100% 0 0 / 0.18);
-    border-radius: 0.4rem;
-    background: none;
-    cursor: pointer;
-    padding: 0.2rem;
-  }
-}
-</style>

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

@@ -1,127 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow :style-class-passthrough="['mbe-4']">
-          <h1 class="page-heading-2">PageRow</h1>
-          <p>
-            Each
-            <code>PageRow</code>
-            is both a CSS grid container and a grid item. All direct children default to the
-            <strong>content</strong>
-            column (max 1064px). Nest a
-            <code>PageRow</code>
-            with a different
-            <code>variant</code>
-            to break out to a wider or narrower track.
-          </p>
-        </PageRow>
-
-        <!-- Direct content — defaults to content column -->
-        <PageRow tag="section" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Default — content column</h2>
-          <pre>variant="content" (default)</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.
-          </p>
-        </PageRow>
-
-        <!-- Nesting: full-width background, constrained content -->
-        <PageRow
-          tag="section"
-          variant="full"
-          :style-class-passthrough="['mbe-20']"
-          style="background: #1e3a5f; color: white; padding-block: 4rem"
-        >
-          <h2 class="page-heading-2">Full-width background with constrained content</h2>
-          <pre style="color: #93c5fd">Outer: variant="full" — Inner: default content column</pre>
-          <p>
-            Wrap a
-            <code style="color: #93c5fd">PageRow</code>
-            in another with
-            <code style="color: #93c5fd">variant="full"</code>
-            to get a full-width background while keeping text in the content column. No extra wrapper divs required.
-          </p>
-        </PageRow>
-
-        <!-- Popout -->
-        <PageRow tag="section" :style-class-passthrough="['mbe-20']">
-          <PageRow variant="popout" :style-class-passthrough="['mbe-4']">
-            <h2 class="page-heading-2">Popout track (max 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.
-            </p>
-          </PageRow>
-        </PageRow>
-
-        <!-- Inset content -->
-        <PageRow tag="section" :style-class-passthrough="['mbe-20']">
-          <PageRow variant="inset-content">
-            <h2 class="page-heading-2">Inset content track (max 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.
-            </p>
-          </PageRow>
-        </PageRow>
-
-        <!-- Mixed nesting: multiple tracks in one section -->
-        <PageRow
-          tag="section"
-          variant="full"
-          :style-class-passthrough="['mbe-20']"
-          style="background: #f00000; padding-block: 4rem"
-        >
-          <h2 class="page-heading-2">Mixed nesting</h2>
-          <p>Content column (default) alongside sibling rows at other tracks.</p>
-
-          <PageRow
-            variant="popout"
-            style="background: #00fc11; padding: 2rem; border-radius: 0.6rem; margin-block: 2rem"
-          >
-            <p>Popout sibling (max 1400px)</p>
-          </PageRow>
-
-          <PageRow variant="inset-content">
-            <p style="font-style: italic">Inset content sibling (max 840px) — ideal for pull-quotes or callouts.</p>
-          </PageRow>
-        </PageRow>
-
-        <!-- Semantic tags + landmark -->
-        <PageRow tag="section" is-landmark :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Semantic tag + landmark</h2>
-          <pre>tag="section" :is-landmark="true"</pre>
-          <p>
-            Any semantic HTML element is supported via the
-            <code>tag</code>
-            prop. Enabling
-            <code>isLandmark</code>
-            adds
-            <code>tabindex="0"</code>
-            and
-            <code>aria-label="Page Row"</code>
-            .
-          </p>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "UI PageRow",
-  meta: [{ name: "description", content: "Examples of the PageRow layout component" }],
-  bodyAttrs: {
-    class: "home",
-  },
-});
-</script>