srcdev-nuxt-components 9.0.15 → 9.0.16

package/app/components/02.molecules/expandable/expanding-panel/tests/__snapshots__/ExpandingPanel.spec.ts.snap

@@ -0,0 +1,38 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ExpandingPanel > renders correct HTML structure with all props set 1`] = `
+"<div class="expanding-panel extra-class">
+  <details class="expanding-panel-details" name="snap-all" open="">
+    <summary id="id-snap-all-trigger" class="expanding-panel-summary" aria-controls="id-snap-all-content" aria-expanded="true"><span class="label-wrapper"></span>
+      <!--v-if-->
+    </summary>
+  </details>
+  <div id="id-snap-all-content" class="expanding-panel-content" aria-labelledby="id-snap-all-trigger" role="region">
+    <div class="inner"></div>
+  </div>
+</div>"
+`;
+
+exports[`ExpandingPanel > renders correct HTML structure with default props 1`] = `
+"<div class="expanding-panel">
+  <details class="expanding-panel-details" name="snap-default">
+    <summary id="id-snap-default-trigger" class="expanding-panel-summary" aria-controls="id-snap-default-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+  </details>
+  <div id="id-snap-default-content" class="expanding-panel-content" aria-labelledby="id-snap-default-trigger" role="region">
+    <div class="inner"></div>
+  </div>
+</div>"
+`;
+
+exports[`ExpandingPanel > renders correct HTML structure with populated slots 1`] = `
+"<div class="expanding-panel">
+  <details class="expanding-panel-details" name="snap-slots">
+    <summary id="id-snap-slots-trigger" class="expanding-panel-summary" aria-controls="id-snap-slots-content" aria-expanded="false"><span class="label-wrapper"><span>Summary text</span></span><span class="icon-wrapper"><span>▸</span></span></summary>
+  </details>
+  <div id="id-snap-slots-content" class="expanding-panel-content" aria-labelledby="id-snap-slots-trigger" role="region">
+    <div class="inner">
+      <p>Content text</p>
+    </div>
+  </div>
+</div>"
+`;

package/app/components/02.molecules/navigation/navigation-horizontal/NavigationHorizontal.vue

@@ -0,0 +1,139 @@
+<template>
+  <nav class="navigation-horizontal" :class="[elementClasses]">
+    <component :is="tag" class="navigation-horizontal-list">
+      <li v-for="(item, index) in navItemData.main" :key="index" :class="item.cssName">
+        <NuxtLink :href="item.href" :external="item.isExternal ? true : undefined">
+          <Icon v-if="item.iconName" :name="`icon-${item.iconName}`" />
+          {{ item.text }}
+        </NuxtLink>
+      </li>
+    </component>
+  </nav>
+</template>
+
+<script setup lang="ts">
+export interface NavItem {
+  text: string;
+  href?: string;
+  isExternal?: boolean;
+  iconName?: string;
+  cssName?: string;
+}
+
+export interface NavItemData {
+  [key: string]: NavItem[];
+}
+
+interface Props {
+  tag?: "ol" | "ul" | "div";
+  navItemData: NavItemData;
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "ul",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    updateElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .navigation-horizontal {
+    --_border-block-start-size: 0;
+    --_border-block-end-size: 3px;
+
+    --_active-link-colour: lime;
+
+    anchor-name: --active-nav;
+
+    background-color: var(--page-bg);
+
+    &::after {
+      content: "";
+      border-block-start: var(--_border-block-start-size) solid transparent;
+      border-block-end: var(--_border-block-end-size) solid transparent;
+
+      background:
+        radial-gradient(var(--page-bg)) padding-box,
+        radial-gradient(var(--_active-link-colour), transparent) border-box;
+
+      /* background:
+        radial-gradient(ellipse at 50% 100%, transparent 10%, var(--page-bg) 75%) padding-box,
+        radial-gradient(ellipse at 50% 100%, var(--_active-link-colour) 10%, transparent 75%) border-box; */
+
+      position: absolute;
+      position-anchor: --active-nav;
+
+      left: calc(anchor(left) - 40px);
+      right: calc(anchor(right) - 40px);
+      top: anchor(top --nav-ul);
+      bottom: anchor(bottom --nav-ul);
+
+      pointer-events: none;
+      z-index: -1;
+
+      opacity: 0;
+      transition:
+        inset 300ms,
+        opacity 700ms;
+      transition-delay: 700ms, 0ms;
+    }
+
+    .navigation-horizontal-list {
+      anchor-name: --nav-ul;
+
+      border-block-start: var(--_border-block-start-size) solid hsl(0 0% 100% / 0.2);
+      border-block-end: var(--_border-block-end-size) solid hsl(0 0% 100% / 0.2);
+
+      a:is(:hover, :focus) {
+        anchor-name: --active-nav;
+      }
+    }
+
+    &:has(a:hover, a:focus)::after {
+      opacity: 1;
+      transition-delay: 0ms, 0ms;
+    }
+  }
+
+  @layer general-styling {
+    .navigation-horizontal {
+      .navigation-horizontal-list {
+        list-style: none;
+        margin: 0rem;
+        padding: 2rem;
+        gap: 3rem;
+
+        display: flex;
+        justify-content: center;
+      }
+
+      a {
+        color: white;
+        text-decoration: none;
+        padding: 0.5rem 1rem;
+
+        border-radius: 0.2rem;
+        /* border: 2px solid hsl(0 0 100% / 0.25); */
+        border-bottom: 2px solid transparent;
+        background: hsl(0 0 20%);
+        transition: background-color 300ms;
+      }
+
+      a:is(:hover, :focus) {
+        /* background: var(--_active-link-colour); */
+        border-color: var(--_active-link-colour);
+        box-shadow: 0 0 32px oklch(from var(--_active-link-colour) l c h / 0.5);
+      }
+    }
+  }
+}
+</style>

package/app/components/02.molecules/navigation/navigation-horizontal/NavigationHorizontalAdvanced.vue

@@ -0,0 +1,172 @@
+<template>
+  <nav class="navigation-horizontal-advanced" :class="[elementClasses]">
+    <component :is="tag" class="navigation-horizontal-list">
+      <li v-for="(item, index) in navItemData.main" :key="index" :class="item.cssName">
+        <NuxtLink :href="item.href" :external="item.isExternal ? true : undefined">
+          <Icon v-if="item.iconName" :name="`icon-${item.iconName}`" />
+          {{ item.text }}
+        </NuxtLink>
+      </li>
+    </component>
+  </nav>
+</template>
+
+<script setup lang="ts">
+export interface NavItem {
+  text: string;
+  href?: string;
+  isExternal?: boolean;
+  iconName?: string;
+  cssName?: string;
+}
+
+export interface NavItemData {
+  [key: string]: NavItem[];
+}
+
+interface Props {
+  tag?: "ol" | "ul" | "div";
+  navItemData: NavItemData;
+  styleClassPassthrough?: string | string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tag: "ul",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    updateElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .navigation-horizontal-advanced {
+    /* ─── Public token API ─────────────────────────────────────────── */
+
+    /* Colours */
+    --_nav-canvas-colour: var(--page-bg);
+    --_active-link-colour: var(--nav-active-colour, lime);
+    --_link-colour: var(--nav-link-colour, light-dark(hsl(0 0% 10%), hsl(0 0% 100%)));
+    --_link-bg: var(--nav-link-bg, light-dark(hsl(0 0% 88%), hsl(0 0% 20%)));
+    --_border-colour: var(--nav-border-colour, light-dark(hsl(0 0% 0% / 0.15), hsl(0 0% 100% / 0.2)));
+
+    /* Borders */
+    --_border-block-start-size: var(--nav-border-start, 0);
+    --_border-block-end-size: var(--nav-border-end, 3px);
+
+    /* Layout */
+    --_list-padding: var(--nav-list-padding, 2rem);
+    --_list-gap: var(--nav-list-gap, 1rem);
+    --_link-padding-block: var(--nav-link-padding-block, 0.5rem);
+    --_link-padding-inline: var(--nav-link-padding-inline, 1rem);
+    --_link-border-radius: var(--nav-link-border-radius, 0.2rem);
+
+    /* Glow effect */
+    --_glow-pos-x: var(--nav-glow-pos-x, 50%);
+    --_glow-pos-y: var(--nav-glow-pos-y, 100%);
+    --_glow-inner-stop: var(--nav-glow-inner-stop, 10%);
+    --_glow-outer-stop: var(--nav-glow-outer-stop, 75%);
+    --_glow-size: var(--nav-glow-size, 32px);
+    --_glow-opacity: var(--nav-glow-opacity, 0.5);
+    --_anchor-offset: var(--nav-anchor-offset, 40px);
+
+    /* Animation */
+    --_transition-duration: var(--nav-transition-duration, 300ms);
+
+    /* ─────────────────────────────────────────────────────────────── */
+
+    anchor-name: --active-nav;
+
+    background-color: var(--_nav-canvas-colour);
+
+    &::after {
+      content: "";
+      border-block-start: var(--_border-block-start-size) solid transparent;
+      border-block-end: var(--_border-block-end-size) solid transparent;
+
+      background:
+        radial-gradient(
+            ellipse at var(--_glow-pos-x) var(--_glow-pos-y),
+            transparent var(--_glow-inner-stop),
+            var(--page-bg) var(--_glow-outer-stop)
+          )
+          padding-box,
+        radial-gradient(
+            ellipse at var(--_glow-pos-x) var(--_glow-pos-y),
+            var(--_active-link-colour) var(--_glow-inner-stop),
+            transparent var(--_glow-outer-stop)
+          )
+          border-box;
+
+      position: absolute;
+      position-anchor: --active-nav;
+
+      left: calc(anchor(left) - var(--_anchor-offset));
+      right: calc(anchor(right) - var(--_anchor-offset));
+      top: anchor(top --nav-ul);
+      bottom: anchor(bottom --nav-ul);
+
+      pointer-events: none;
+      z-index: -1;
+
+      opacity: 0;
+      transition:
+        inset var(--_transition-duration),
+        opacity 700ms;
+      transition-delay: 700ms, 0ms;
+    }
+
+    .navigation-horizontal-list {
+      anchor-name: --nav-ul;
+
+      border-block-start: var(--_border-block-start-size) solid var(--_border-colour);
+      border-block-end: var(--_border-block-end-size) solid var(--_border-colour);
+
+      a:is(:hover, :focus) {
+        anchor-name: --active-nav;
+      }
+    }
+
+    &:has(a:hover, a:focus)::after {
+      opacity: 1;
+      transition-delay: 0ms, 0ms;
+    }
+  }
+
+  @layer general-styling {
+    .navigation-horizontal-advanced {
+      .navigation-horizontal-list {
+        list-style: none;
+        margin: 0rem;
+        padding: var(--_list-padding);
+        gap: var(--_list-gap);
+
+        display: flex;
+        justify-content: center;
+      }
+
+      a {
+        color: var(--_link-colour);
+        text-decoration: none;
+        padding: var(--_link-padding-block) var(--_link-padding-inline);
+
+        border-radius: var(--_link-border-radius);
+        border-bottom: 2px solid transparent;
+        background: var(--_link-bg);
+        transition: background-color var(--_transition-duration);
+      }
+
+      a:is(:hover, :focus) {
+        border-color: var(--_active-link-colour);
+        box-shadow: 0 0 var(--_glow-size) oklch(from var(--_active-link-colour) l c h / var(--_glow-opacity));
+      }
+    }
+  }
+}
+</style>

package/app/components/02.molecules/profile-section/ProfileSection.vue

@@ -3,7 +3,7 @@
     :is="tag"
     class="profile-section"
     :class="[elementClasses]"
-    :aria-labelledby="needsLabel ? headingId : undefined"
+    :aria-labelledby="ariaLabelledby"
   >
     <header class="profile-section-header">
       <slot v-if="hasEyebrowTextSlot" name="eyebrowText"></slot>
@@ -51,8 +51,7 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const headingId = useId();
-const needsLabel = computed(() => props.tag === "section" || props.tag === "article");
+const { headingId, ariaLabelledby } = useAriaLabelledById(() => props.tag);
 
 const slots = useSlots();
 const hasEyebrowTextSlot = computed(() => Boolean(slots.eyebrowText));

package/app/components/02.molecules/profile-section/tests/ProfileSection.spec.ts

@@ -152,11 +152,11 @@ describe("ProfileSection", () => {
     expect(wrapper.find(".profile-section").attributes("aria-labelledby")).toBeUndefined();
   });
 
-  it("does not add aria-labelledby when tag is main", async () => {
+  it("adds aria-labelledby when tag is main", async () => {
     const wrapper = await mountSuspended(ProfileSection, {
       props: { ...defaultProps, tag: "main" },
     });
-    expect(wrapper.find(".profile-section").attributes("aria-labelledby")).toBeUndefined();
+    expect(wrapper.find(".profile-section").attributes("aria-labelledby")).toBeTruthy();
   });
 
   it("does not render profile-links section when slot is not provided", async () => {

package/app/components/02.molecules/stepper-list/StepperList.vue

@@ -1,5 +1,10 @@
 <template>
-  <component :is="tag" class="stepper-list" :class="[elementClasses, { 'has-connectors': props.connected }]">
+  <component
+    :is="tag"
+    ref="listEl"
+    class="stepper-list"
+    :class="[elementClasses, { 'has-connectors': props.connected }]"
+  >
     <li
       v-for="index in itemCount"
       :key="index"
@@ -10,9 +15,7 @@
       ]"
     >
       <div
-        :class="
-          $slots[`indicator-${index - 1}`] ? 'stepper-list__indicator-custom' : 'stepper-list__indicator-counter'
-        "
+        :class="$slots[`indicator-${index - 1}`] ? 'stepper-list__indicator-custom' : 'stepper-list__indicator-counter'"
       >
         <slot :name="`indicator-${index - 1}`"></slot>
       </div>
@@ -28,6 +31,7 @@ interface Props {
   tag?: "ul" | "ol";
   indicatorAlignment?: "top" | "center";
   indicatorVariant?: "disc" | "square" | "circle";
+  indicatorSize?: string;
   connected?: boolean;
   itemCount: number;
   styleClassPassthrough?: string | string[];
@@ -37,122 +41,157 @@ const props = withDefaults(defineProps<Props>(), {
   tag: "ul",
   indicatorAlignment: "top",
   indicatorVariant: "disc",
+  indicatorSize: "3rem",
   connected: true,
   styleClassPassthrough: () => [],
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const listEl = ref<HTMLElement | null>(null);
+let resizeObserver: ResizeObserver | null = null;
+
+function updateConnectors() {
+  if (!listEl.value || !props.connected) return;
+  const lis = Array.from(listEl.value.querySelectorAll<HTMLLIElement>(":scope > li"));
+
+  lis.forEach((li, i) => {
+    if (i >= lis.length - 1) return;
+
+    const indicator = li.querySelector<HTMLElement>(
+      ".stepper-list__indicator-counter, .stepper-list__indicator-custom"
+    );
+    const nextIndicator = lis[i + 1]?.querySelector<HTMLElement>(
+      ".stepper-list__indicator-counter, .stepper-list__indicator-custom"
+    );
+
+    if (!indicator || !nextIndicator) return;
+
+    const liRect = li.getBoundingClientRect();
+    const indicatorRect = indicator.getBoundingClientRect();
+    const nextIndicatorRect = nextIndicator.getBoundingClientRect();
+
+    li.style.setProperty("--_connector-top", `${indicatorRect.bottom - liRect.top}px`);
+    li.style.setProperty("--_connector-height", `${Math.max(0, nextIndicatorRect.top - indicatorRect.bottom)}px`);
+  });
+}
+
+onMounted(() => {
+  updateConnectors();
+  if (typeof ResizeObserver !== "undefined" && listEl.value) {
+    resizeObserver = new ResizeObserver(updateConnectors);
+    resizeObserver.observe(listEl.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+});
+
+watch(
+  () => [props.itemCount, props.connected, props.indicatorAlignment],
+  async () => {
+    await nextTick();
+    updateConnectors();
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
-.stepper-list {
-  --_list-padding-block: 1.2rem;
-  --_counter-size: 3rem;
-  --_stepper-list-connector-width: 0.2rem;
-
-  list-style: none;
-  counter-reset: stepper-list;
-  padding: 0;
-
-  li {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 2.2rem;
-    counter-increment: stepper-list;
-    padding-inline-start: 0rem;
-    padding-block: var(--_list-padding-block);
-    position: relative;
-
-    &.indicator-top {
-      align-items: start;
-    }
+  .stepper-list {
+    --_list-padding-block: 1.2rem;
+    --_counter-size: v-bind(indicatorSize);
+    --_stepper-list-connector-width: 0.2rem;
 
-    &.indicator-center {
-      align-items: center;
-    }
-
-    .stepper-list__indicator-counter::before {
-      content: counter(stepper-list);
+    list-style: none;
+    counter-reset: stepper-list;
+    padding: 0;
 
+    li {
       display: grid;
-      place-content: center;
-      width: var(--_counter-size);
-      height: var(--_counter-size);
-      font-size: 1.4rem;
-      font-weight: 600;
-    }
+      grid-template-columns: auto 1fr;
+      gap: 2.2rem;
+      counter-increment: stepper-list;
+      padding-inline-start: 0rem;
+      padding-block: var(--_list-padding-block);
+      position: relative;
+
+      &.indicator-top {
+        align-items: start;
+      }
 
-    &.indicator-circle .stepper-list__indicator-counter::before {
-      background-color: var(--stepper-list-counter-circle-background);
-      color: var(--stepper-list-counter-circle-text);
-      border: 2px solid var(--stepper-list-counter-circle-border);
-      border-radius: 100vw;
-    }
+      &.indicator-center {
+        align-items: center;
+      }
 
-    &.indicator-disc .stepper-list__indicator-counter::before {
-      background-color: var(--stepper-list-counter-disc-background);
-      color: var(--stepper-list-counter-disc-text);
-      border: 2px solid var(--stepper-list-counter-disc-border);
-      border-radius: 100vw;
-    }
+      .stepper-list__indicator-counter::before {
+        content: counter(stepper-list);
 
-    &.indicator-square .stepper-list__indicator-counter::before {
-      background-color: var(--stepper-list-counter-square-background);
-      color: var(--stepper-list-counter-square-text);
-      border: 2px solid var(--stepper-list-counter-square-border);
-      border-radius: 0.25rem;
-    }
+        display: grid;
+        place-content: center;
+        width: var(--_counter-size);
+        height: var(--_counter-size);
+        font-size: 1.4rem;
+        font-weight: 600;
+      }
 
-    &.has-indicator::before {
-      display: none;
-    }
+      &.indicator-circle .stepper-list__indicator-counter::before {
+        background-color: var(--stepper-list-counter-circle-background);
+        color: var(--stepper-list-counter-circle-text);
+        border: 2px solid var(--stepper-list-counter-circle-border);
+        border-radius: 100vw;
+      }
 
-    .stepper-list__indicator-custom,
-    .stepper-list__indicator-counter {
-      anchor-name: --indicator-bubble;
-    }
+      &.indicator-disc .stepper-list__indicator-counter::before {
+        background-color: var(--stepper-list-counter-disc-background);
+        color: var(--stepper-list-counter-disc-text);
+        border: 2px solid var(--stepper-list-counter-disc-border);
+        border-radius: 100vw;
+      }
 
-    .stepper-list__indicator-custom {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
+      &.indicator-square .stepper-list__indicator-counter::before {
+        background-color: var(--stepper-list-counter-square-background);
+        color: var(--stepper-list-counter-square-text);
+        border: 2px solid var(--stepper-list-counter-square-border);
+        border-radius: 0.25rem;
+      }
 
-      .indicator-icon {
-        color: var(--stepper-list-icon);
-        width: var(--_counter-size);
-        height: var(--_counter-size);
+      &.has-indicator::before {
+        display: none;
+      }
+
+      .stepper-list__indicator-custom,
+      .stepper-list__indicator-counter {
+        anchor-name: --indicator-bubble;
+      }
+
+      .stepper-list__indicator-custom {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        .indicator-icon {
+          color: var(--stepper-list-icon);
+          width: var(--_counter-size) !important;
+          height: var(--_counter-size) !important;
+        }
       }
     }
   }
-}
-
-/* Fallback: per-li connectors for browsers without anchor positioning */
-/* @supports not (anchor-name: --x) { */
-.stepper-list.has-connectors li:not(:last-child)::after {
-  content: "";
-  position: absolute;
-  left: calc(var(--_counter-size) / 2);
-  transform: translateX(-50%);
-  top: calc(1.2rem + 3rem);
-  bottom: calc(-1 * var(--_list-padding-block));
-  width: var(--_stepper-list-connector-width);
-  background-color: var(--stepper-list-connector-color, currentColor);
-}
-/* } */
 
-/* Enhanced: anchor-based connector positioning */
-/* @supports (anchor-name: --x) {
   .stepper-list.has-connectors li:not(:last-child)::after {
     content: "";
     position: absolute;
-    left: anchor(--indicator-bubble, center);
+    left: calc(var(--_counter-size) / 2);
     transform: translateX(-50%);
-    top: anchor(--indicator-bubble, bottom);
-    bottom: calc(-1 * var(--stepper-list-item-gap, 2.4rem));
-    width: var(--stepper-list-connector-width, 2px);
+    /* JS sets --_connector-top and --_connector-height from measured indicator positions.
+     The fallback values handle the indicator-top case before JS runs. */
+    top: var(--_connector-top, calc(var(--_list-padding-block) + var(--_counter-size)));
+    height: var(--_connector-height, auto);
+    bottom: calc(-1 * var(--_list-padding-block));
+    width: var(--_stepper-list-connector-width);
     background-color: var(--stepper-list-connector-color, currentColor);
   }
-} */
 }
 </style>