srcdev-nuxt-components 9.4.12 → 9.5.1

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/__snapshots__/LayoutGridByCols.spec.ts.snap

@@ -1,36 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`LayoutGridByCols > renders correct HTML structure (div, 2 items) 1`] = `
-"<div class="layout-grid-by-width">
-  <!--v-if-->
-  <div class="layout-grid-inner">
-    <p>First</p>
-    <p>Second</p>
-  </div>
-</div>"
-`;
-
-exports[`LayoutGridByCols > renders correct HTML structure (section with label) 1`] = `
-"<section class="layout-grid-by-width" aria-labelledby="v-0-0">
-  <p id="v-0-0" class="sr-only">Feature grid</p>
-  <div class="layout-grid-inner"></div>
-</section>"
-`;
-
-exports[`LayoutGridByCols > renders correct HTML structure with styleClassPassthrough 1`] = `
-"<div class="layout-grid-by-width custom-class another-class">
-  <!--v-if-->
-  <div class="layout-grid-inner"></div>
-</div>"
-`;
-
-exports[`LayoutGridByCols > renders correctly with all props and slots combined 1`] = `
-"<section class="layout-grid-by-width services-grid" aria-labelledby="v-0-0" columns="3">
-  <p id="v-0-0" class="sr-only">Services</p>
-  <div class="layout-grid-inner">
-    <p>One</p>
-    <p>Two</p>
-    <p>Three</p>
-  </div>
-</section>"
-`;

package/app/components/01.atoms/content-wrappers/layout-grid/layout-grid-by-width/tests/__snapshots__/LayoutGridByWidth.spec.ts.snap

@@ -1,36 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`LayoutGridByWidth > renders correct HTML structure (div, 2 items) 1`] = `
-"<div class="layout-grid-by-width">
-  <!--v-if-->
-  <div class="layout-grid-inner">
-    <p>First</p>
-    <p>Second</p>
-  </div>
-</div>"
-`;
-
-exports[`LayoutGridByWidth > renders correct HTML structure (section with label) 1`] = `
-"<section class="layout-grid-by-width" aria-labelledby="v-0-0">
-  <p id="v-0-0" class="sr-only">Feature grid</p>
-  <div class="layout-grid-inner"></div>
-</section>"
-`;
-
-exports[`LayoutGridByWidth > renders correct HTML structure with styleClassPassthrough 1`] = `
-"<div class="layout-grid-by-width custom-class another-class">
-  <!--v-if-->
-  <div class="layout-grid-inner"></div>
-</div>"
-`;
-
-exports[`LayoutGridByWidth > renders correctly with all props and slots combined 1`] = `
-"<section class="layout-grid-by-width services-grid" aria-labelledby="v-0-0">
-  <p id="v-0-0" class="sr-only">Services</p>
-  <div class="layout-grid-inner">
-    <p>One</p>
-    <p>Two</p>
-    <p>Three</p>
-  </div>
-</section>"
-`;

package/app/components/01.atoms/cookie-consent-banner/CookieConsentBanner.vue

@@ -1,148 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div
-      class="privacy-notice-banner"
-      :class="[{ closed: status !== 'unset' }, elementClasses]"
-      :data-theme="resolved.theme"
-      data-test-id="privacy-notice-banner"
-    >
-      <div class="privacy-notice-banner-inner" role="region" :aria-label="ariaLabel">
-        <div class="privacy-notice-banner-message">
-          <slot name="message">This site uses cookies to understand how it's used. You can accept or reject them.</slot>
-        </div>
-        <div class="privacy-notice-banner-actions">
-          <button
-            type="button"
-            class="privacy-notice-banner-reject"
-            data-test-id="privacy-notice-banner-reject"
-            @click="rejectAll()"
-          >
-            <slot name="rejectLabel">Reject</slot>
-          </button>
-          <button
-            type="button"
-            class="privacy-notice-banner-accept"
-            data-test-id="privacy-notice-banner-accept"
-            @click="acceptAll()"
-          >
-            <slot name="acceptLabel">Accept</slot>
-          </button>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import type { CookieConsentBannerProps } from "../../../types/components";
-
-const props = withDefaults(defineProps<CookieConsentBannerProps>(), {
-  theme: undefined,
-  styleClassPassthrough: () => [],
-});
-
-const appConfig = useAppConfig();
-
-const resolved = computed(() => {
-  const config = appConfig.srcdev?.cookieConsentBanner;
-  return {
-    theme: props.theme ?? config?.theme ?? "info",
-  } as const;
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-const { status, acceptAll, rejectAll } = useCookieConsent();
-const ariaLabel = "Cookie consent";
-</script>
-
-<style lang="css">
-@layer components {
-  .privacy-notice-banner {
-    /* Matches DisplayToastProvider/DisplayDialog's z-index convention so
-       this clears ordinary page chrome (and a consumer's sticky header) but
-       still sits below an active modal dialog if one somehow overlaps. */
-    --_z-index: var(--privacy-notice-banner-z-index, 999999);
-    --_gutter: var(--privacy-notice-banner-gutter, 1.6rem);
-    --_max-width: var(--privacy-notice-banner-max-width, 64rem);
-    --_border-radius: var(--privacy-notice-banner-border-radius, 0.8rem);
-    --_border: var(--privacy-notice-banner-border, 0.1rem solid light-dark(var(--slate-10), var(--slate-02)));
-    --_background: var(--privacy-notice-banner-background, light-dark(var(--slate-00), var(--slate-10)));
-    --_transition-duration: var(--privacy-notice-banner-transition-duration, 200ms);
-
-    position: fixed;
-    inset-inline: var(--_gutter);
-    inset-block-end: var(--_gutter);
-    z-index: var(--_z-index);
-    margin-inline: auto;
-    max-width: var(--_max-width);
-
-    display: grid;
-    grid-template-rows: 1fr;
-    opacity: 1;
-    transition: all var(--_transition-duration) ease-in-out;
-
-    &.closed {
-      grid-template-rows: 0fr;
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    .privacy-notice-banner-inner {
-      overflow: hidden;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 1.2rem;
-      padding: 1.6rem;
-      border-radius: var(--_border-radius);
-      border: var(--_border);
-      background-color: var(--_background);
-
-      &[aria-label] {
-        border-block-start: 0.2rem solid var(--theme-accent);
-      }
-    }
-
-    .privacy-notice-banner-message {
-      flex: 1 1 24rem;
-    }
-
-    .privacy-notice-banner-actions {
-      display: flex;
-      gap: 0.8rem;
-      margin-inline-start: auto;
-    }
-
-    .privacy-notice-banner-reject,
-    .privacy-notice-banner-accept {
-      padding: 0.8rem 1.6rem;
-      border-radius: 0.4rem;
-      border: 0.1rem solid transparent;
-      cursor: pointer;
-      transition:
-        border-color var(--_transition-duration),
-        background-color var(--_transition-duration);
-    }
-
-    .privacy-notice-banner-reject {
-      background-color: transparent;
-      border: 0.1rem solid light-dark(var(--slate-08), var(--slate-04));
-
-      &:hover,
-      &:focus-visible {
-        border-color: var(--theme-accent);
-      }
-    }
-
-    .privacy-notice-banner-accept {
-      background-color: var(--theme-accent);
-      color: light-dark(var(--slate-00), var(--slate-12));
-
-      &:hover,
-      &:focus-visible {
-        opacity: 0.9;
-      }
-    }
-  }
-}
-</style>

package/app/components/01.atoms/display-avatar/DisplayAvatar.vue

@@ -1,130 +0,0 @@
-<template>
-  <component
-    :is="props.chip ? DisplayChip : as"
-    v-bind="
-      props.chip
-        ? typeof props.chip === 'object'
-          ? { tag: chipTag, config: props.chip }
-          : { tag: chipTag, config: chipDefaultConfig }
-        : {}
-    "
-    class="display-avatar"
-    :class="[size, elementClasses]"
-    :style-class-passthrough="elementClasses"
-  >
-    <slot name="default">
-      <NuxtImg v-if="src" :src :alt="alt || 'Avatar'" width="100%" height="100%" class="avatar-image" />
-      <span v-else>{{ fallback }}</span>
-    </slot>
-    <slot name="icon"></slot>
-  </component>
-</template>
-
-<script setup lang="ts">
-import DisplayChip from "../../02.molecules/display-chip/DisplayChip.vue";
-import type { DisplayChipConfig } from "~/types/components";
-
-interface Props {
-  as?: string | object;
-  src?: string;
-  alt?: string;
-  text?: string;
-  size?: "xs" | "s" | "md" | "lg" | "xl" | string;
-  chip?: boolean | DisplayChipConfig;
-  styleClassPassthrough?: string | string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: "span",
-  src: undefined,
-  alt: undefined,
-  text: undefined,
-  size: "md",
-  chip: undefined,
-  styleClassPassthrough: () => [],
-});
-
-const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(
-  props.styleClassPassthrough
-);
-
-if (props.chip && typeof props.chip === "object" && !("styleClassPassthrough" in props.chip)) {
-  updateElementClasses(["display-avatar", props.size]);
-}
-
-const fallback = computed(
-  () =>
-    props.text ||
-    (props.alt || "")
-      .split(" ")
-      .map((word) => word.charAt(0))
-      .join("")
-      .substring(0, 2)
-);
-
-const chipDefaultConfig: DisplayChipConfig = {
-  size: "12px",
-  maskWidth: "4px",
-  offset: "0px",
-  angle: "90deg",
-};
-
-const chipTag = computed((): "div" | "span" => (props.as === "div" || props.as === "span" ? props.as : "span"));
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-@layer components {
-  .display-avatar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    color: var(--slate-03);
-
-    isolation: isolate;
-
-    &.xs {
-      width: 24px;
-      height: 24px;
-      font-size: 0.75rem;
-    }
-    &.s {
-      width: 32px;
-      height: 32px;
-      font-size: 0.875rem;
-    }
-    &.md {
-      width: 40px;
-      height: 40px;
-      font-size: 1rem;
-    }
-    &.lg {
-      width: 48px;
-      height: 48px;
-      font-size: 1.125rem;
-    }
-    &.xl {
-      width: 56px;
-      height: 56px;
-      font-size: 1.25rem;
-    }
-
-    .avatar-image {
-      width: 100%;
-      border-radius: 50%;
-      object-fit: cover;
-    }
-
-    .avatar-icon {
-      font-size: 24px;
-    }
-  }
-}
-</style>

package/app/components/01.atoms/display-avatar/tests/__snapshots__/DisplayAvatar.spec.ts.snap

@@ -1,11 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`DisplayAvatar > renders correct HTML structure (default) 1`] = `"<span class="display-avatar md" style-class-passthrough=""><span>JD</span></span>"`;
-
-exports[`DisplayAvatar > renders correct HTML structure (with chip) 1`] = `
-"<span class="display-chip-core circle display-avatar md" style="--chip-size: 12px; --chip-mask-width: 4px; --chip-offset: 0px; --chip-angle: 90deg;"><span>JD</span>
-<!--v-if-->
-<!--v-if--></span>"
-`;
-
-exports[`DisplayAvatar > renders correct HTML structure (with src) 1`] = `"<span class="display-avatar lg" style-class-passthrough=""><img data-nuxt-img="" srcset="/_ipx/_/avatar.jpg 1x, /_ipx/_/avatar.jpg 2x" alt="John Doe" class="avatar-image" src="/_ipx/_/avatar.jpg"></span>"`;

package/app/components/02.molecules/action-menu/tests/__snapshots__/ActionMenuItemCore.spec.ts.snap

@@ -1,27 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`ActionMenuItemCore > Snapshots > as external link 1`] = `
-"<a href="https://example.com" class="action-menu-item-core" role="menuitem">
-  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
-</a>"
-`;
-
-exports[`ActionMenuItemCore > Snapshots > as internal link 1`] = `
-"<a href="/about" class="action-menu-item-core" role="menuitem">
-  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
-</a>"
-`;
-
-exports[`ActionMenuItemCore > Snapshots > default button (no href) 1`] = `
-"<button type="button" class="action-menu-item-core" role="menuitem">
-  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
-</button>"
-`;
-
-exports[`ActionMenuItemCore > Snapshots > with icon slot 1`] = `"<button type="button" class="action-menu-item-core" role="menuitem"><span class="action-menu-item-icon" aria-hidden="true"><span data-testid="test-icon">⚡</span></span><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span></button>"`;
-
-exports[`ActionMenuItemCore > Snapshots > with styleClassPassthrough 1`] = `
-"<button type="button" class="action-menu-item-core custom-class another-class" role="menuitem">
-  <!--v-if--><span class="action-menu-item-label">Edit item</span><span class="action-menu-item-arrow" aria-hidden="true"><span class="iconify i-lucide:arrow-right action-menu-item-arrow-icon" aria-hidden="true"></span></span>
-</button>"
-`;

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

@@ -1,162 +0,0 @@
-<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">
-import type { NavItemData } from "~/types/components/navigation-horizontal.d";
-
-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 {
-    /* ─── 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 {
-      .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>