srcdev-nuxt-components 5.0.0 → 5.0.2

package/assets/styles/setup/utility-classes/_page.css

@@ -15,6 +15,7 @@ html {
 
   transition: background-color 0.4s ease, color 0.4s ease;
   scrollbar-gutter: stable;
+  overflow-x: hidden;
 }
 body,
 p,

package/components/layout-row/LayoutRow.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="layout-row" :class="elementClasses">
-    <component :is="tag" :data-testid="dataTestid" class="layout-row-inner" :class="variant">
+  <component :is="tag" class="layout-row" :class="elementClasses" :id :tab-index="isLandmark ? 0 : null" :aria-label="isLandmark ? 'Layout Row Landmark' : undefined">
+    <div :data-testid="dataTestid" class="layout-row-inner" :class="variant">
       <div>
         <slot name="default"></slot>
       </div>
-    </component>
-  </div>
+    </div>
+  </component>
 </template>
 
 <script lang="ts">
@@ -51,10 +51,18 @@ const props = defineProps({
       return VARIANT_CLASSES.includes(value);
     },
   },
+  id: {
+    type: String,
+    default: null,
+  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  isLandmark: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);

package/components/responsive-header/ResponsiveHeader.vue

@@ -387,6 +387,15 @@ watch(
   padding: 12px;
 
   .main-navigation {
+    /* Set up some global vars */
+    --_link-padding-block: 0.8rem;
+    --_link-padding-inline: 0.2rem;
+    --_link-margin-block: 0.1rem;
+    --_link-margin-inline: 0.1rem;
+    --_link-focus-visible-outline-width: 0.2rem;
+    --_link-border-default: 2px solid transparent;
+    --_link-border-bottom-hover: var(--green-8);
+
     grid-area: navStack;
     display: flex;
     flex-wrap: nowrap;
@@ -417,6 +426,8 @@ watch(
         width: var(--_main-navigation-item-width);
         overflow: hidden;
         transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+        padding-block: var(--_link-focus-visible-outline-width);
+        padding-inline: var(--_link-focus-visible-outline-width);
 
         .main-navigation-link {
           display: flex;
@@ -426,6 +437,17 @@ watch(
           text-decoration: none;
           margin-inline-start: 0;
           transition: var(--_link-visibility-transition);
+
+          padding-block: var(--_link-padding-block);
+          padding-inline: var(--_link-padding-inline);
+          margin-block: var(--_link-margin-block);
+          margin-inline: var(--_link-margin-inline);
+          border-bottom: var(--_link-border-default);
+
+          &:hover {
+            cursor: pointer;
+            border-bottom-color: var(--_link-border-bottom-hover);
+          }
         }
 
         .main-navigation-details {
@@ -436,6 +458,10 @@ watch(
 
           &[open] {
             --_icon-transform: scaleY(-1);
+
+            .main-navigation-details-summary {
+              border-bottom-color: var(--_link-border-bottom-hover);
+            }
           }
 
           .has-toggle-icon {
@@ -451,6 +477,12 @@ watch(
           }
 
           .main-navigation-details-summary {
+            padding-block: var(--_link-padding-block);
+            padding-inline: var(--_link-padding-inline);
+            margin-block: var(--_link-margin-block);
+            margin-inline: var(--_link-margin-inline);
+            border-bottom: var(--_link-border-default);
+
             &::-webkit-details-marker,
             &::marker {
               display: none;
@@ -458,6 +490,7 @@ watch(
 
             &:hover {
               cursor: pointer;
+              border-bottom-color: var(--_link-border-bottom-hover);
             }
 
             .decorator-icon {

package/components/skip-links/SkipLinks.vue

@@ -0,0 +1,92 @@
+<template>
+  <ul class="home-link-navigation" aria-label="Home Navigation">
+    <li v-if="hasHomeLink" class="home-link">
+      <slot name="homeLink">
+        <NuxtLink to="/" class="home-link-default">Logo</NuxtLink>
+      </slot>
+    </li>
+    <li class="skip-links">
+      <ul class="skip-links-nav">
+        <li class="skip-link-item"><a href="#main-content" class="skip-link" ref="skipLink">Skip to main content</a></li>
+        <li class="skip-link-item"><a href="#footer" class="skip-link">Skip to footer</a></li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+const slots = useSlots();
+const hasHomeLink = ref(slots.homeLink !== undefined);
+</script>
+
+<style lang="css">
+.home-link-navigation {
+  position: relative;
+  list-style: none;
+  padding: 0;
+
+  .skip-links {
+    list-style: none;
+    background-color: black;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    top: 40px;
+    left: 0;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+
+    &:focus-within {
+      height: auto;
+      z-index: 1000;
+    }
+
+    .skip-links-nav {
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+      background-color: black;
+
+      border: 1px solid white;
+
+      list-style: none;
+      padding: 0.2rem;
+      margin: 0;
+
+      .skip-link-item {
+        padding: 0.2rem;
+
+        .skip-link {
+          display: block;
+          color: white;
+          text-decoration: none;
+          margin: 0.2rem;
+
+          padding: 0.8rem 1.2rem;
+          text-wrap: nowrap;
+
+          &:focus-visible {
+            outline: 2px solid white;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* .skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: #000;
+  color: #fff;
+  padding: 8px 12px;
+  text-decoration: none;
+  transition: top 0.3s;
+}
+
+.skip-link:focus {
+  top: 0;
+} */
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",