srcdev-nuxt-components 9.1.48 → 9.1.50

package/app/components/02.molecules/navigation/tab-navigation/TabNavigation.vue

@@ -9,20 +9,33 @@
     ]"
     aria-label="Site navigation"
   >
-    <ul
-      v-if="!isCollapsed || !isLoaded"
-      ref="navListRef"
-      class="tab-nav-list"
-      @mouseleave="hoveredItemHref = null"
-    >
+    <ul v-if="!isCollapsed || !isLoaded" ref="navListRef" class="tab-nav-list" @mouseleave="hoveredItemHref = null">
       <li
         v-for="item in navItemData.main"
         :key="item.href"
         :data-href="item.href"
-        :class="[item.cssName, { 'is-active': isActiveItem(item.href), 'is-hovered': hoveredItemHref === item.href }]"
+        :class="[
+          item.cssName,
+          {
+            'is-active': item.href?.startsWith('#') ? item.href === activeHash : isActiveItem(item.href),
+            'is-hovered': hoveredItemHref === item.href,
+          },
+        ]"
         @mouseenter="hoveredItemHref = item.href ?? null"
       >
+        <!-- Plain <a> for hash links — keeps Vue Router out of the smooth-scroll path -->
+        <a
+          v-if="item.href?.startsWith('#')"
+          :href="item.href"
+          class="tab-nav-link"
+          data-nav-item
+          @click="(e) => item.href && handleNavClick(e, item.href)"
+        >
+          <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
+          {{ item.text }}
+        </a>
         <NuxtLink
+          v-else
           :href="item.href"
           :external="item.isExternal || undefined"
           class="tab-nav-link"
@@ -74,11 +87,31 @@
       <div class="tab-nav-panel-inner">
         <ul class="tab-nav-panel-list">
           <li v-for="item in navItemData.main" :key="item.href" :class="item.cssName">
+            <a
+              v-if="item.href?.startsWith('#')"
+              :href="item.href"
+              class="tab-nav-panel-link"
+              @click="
+                (e) => {
+                  item.href && handleNavClick(e, item.href);
+                  closeMenu();
+                }
+              "
+            >
+              <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
+              {{ item.text }}
+            </a>
             <NuxtLink
+              v-else
               :href="item.href"
               :external="item.isExternal || undefined"
               class="tab-nav-panel-link"
-              @click="(e) => { item.href && handleNavClick(e, item.href); closeMenu(); }"
+              @click="
+                (e) => {
+                  item.href && handleNavClick(e, item.href);
+                  closeMenu();
+                }
+              "
             >
               <Icon v-if="item.iconName" :name="item.iconName" aria-hidden="true" />
               {{ item.text }}
@@ -97,17 +130,25 @@ interface Props {
   navItemData: NavItemData;
   navAlign?: "left" | "center" | "right";
   styleClassPassthrough?: string | string[];
+  anchorScrollOffset?: number | (() => number);
 }
 
 const props = withDefaults(defineProps<Props>(), {
   navAlign: "left",
   styleClassPassthrough: () => [],
+  anchorScrollOffset: undefined,
 });
 
-const { navRef, navListRef, isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu } =
-  useNavCollapse("tab-nav-loaded");
+const { isCollapsed, isLoaded, isMenuOpen, isActiveItem, toggleMenu, closeMenu } = useNavCollapse("tab-nav-loaded");
+
+const { handleNavClick, activeHash } = useAnchorScroll({ offset: props.anchorScrollOffset });
 
-const { handleNavClick } = useAnchorScroll();
+onMounted(() => {
+  if (!activeHash.value) {
+    const firstHashItem = props.navItemData.main?.find((item) => item.href?.startsWith("#"));
+    if (firstHashItem?.href) activeHash.value = firstHashItem.href;
+  }
+});
 
 // ─── Animation gate — disables indicator transitions during route changes ────
 // Starts true: CSS anchor positioning resolves before first paint so there is

package/app/components/02.molecules/navigation/tab-navigation/tests/__snapshots__/TabNavigation.spec.ts.snap

@@ -3,15 +3,21 @@
 exports[`TabNavigation > renders correct HTML structure 1`] = `
 "<nav class="tab-navigation tab-navigation--left is-loaded is-animated" aria-label="Site navigation">
   <ul class="tab-nav-list">
-    <li data-href="/" class="is-active"><a href="/" class="tab-nav-link" data-nav-item="">
+    <li data-href="/" class="is-active">
+      <!-- Plain <a> for hash links — keeps Vue Router out of the smooth-scroll path --><a href="/" class="tab-nav-link" data-nav-item="">
         <!--v-if--> Home
-      </a></li>
-    <li data-href="/about" class=""><a href="/about" class="tab-nav-link" data-nav-item="">
+      </a>
+    </li>
+    <li data-href="/about" class="">
+      <!-- Plain <a> for hash links — keeps Vue Router out of the smooth-scroll path --><a href="/about" class="tab-nav-link" data-nav-item="">
         <!--v-if--> About
-      </a></li>
-    <li data-href="/contact" class=""><a href="/contact" class="tab-nav-link" data-nav-item="">
+      </a>
+    </li>
+    <li data-href="/contact" class="">
+      <!-- Plain <a> for hash links — keeps Vue Router out of the smooth-scroll path --><a href="/contact" class="tab-nav-link" data-nav-item="">
         <!--v-if--> Contact
-      </a></li>
+      </a>
+    </li>
     <li aria-hidden="true" role="none" class="nav-indicator-li">
       <div class="nav__hovered"></div>
     </li>

package/app/components/{forms/ui → 05.forms/form-field}/FormField.vue

@@ -11,24 +11,18 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
-  width: {
-    type: String as PropType<string>,
-    default: "narrow",
-    validator: (val: string) => ["narrow", "medium", "wide"].includes(val),
-  },
-  fieldHasError: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-  hasGutter: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: "",
-  },
+interface Props {
+  width?: "narrow" | "medium" | "wide";
+  fieldHasError?: boolean;
+  hasGutter?: boolean;
+  styleClassPassthrough?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: "narrow",
+  fieldHasError: false,
+  hasGutter: true,
+  styleClassPassthrough: "",
 });
 </script>
 
@@ -47,7 +41,6 @@ defineProps({
 
     width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
     outline: 0rem solid var(--slate-05);
-    /* overflow-block: hidden; */
 
     &:has(.underline) {
       --_background-color: var(--theme-form-input-bg-underlined);

package/app/components/{forms/ui → 05.forms/form-wrapper}/FormWrapper.vue

@@ -5,12 +5,12 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
-  width: {
-    type: String as PropType<string>,
-    default: "narrow",
-    validator: (val: string) => ["narrow", "medium", "wide"].includes(val),
-  },
+interface Props {
+  width?: "narrow" | "medium" | "wide";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: "narrow",
 });
 </script>
 

package/app/components/{forms → 05.forms}/input-button/InputButtonCore.vue

@@ -87,6 +87,8 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 <style lang="css">
 @layer components {
   .input-button-core {
+    all: unset;
+
     display: grid;
     grid-auto-flow: column;
     gap: var(--button-icon-gap);

package/app/components/{forms → 05.forms}/input-button/stories/InputButtonCore.stories.ts

@@ -239,7 +239,7 @@ const Template: StoryFn<InputButtonCoreStoryArgs> = (args) => ({
     };
   },
   template: `
-    <div class="space-y-4">
+    <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;margin: 36px;">
       <StorybookComponent
         v-bind="args"
         @click="handleClick"

package/app/components/{forms → 05.forms}/input-text/InputTextCore.vue

@@ -126,97 +126,97 @@ onMounted(() => {
 
 <style lang="css">
 @layer components {
-.input-text-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--input-icon-slot-gap);
-  background-color: var(--theme-input-surface);
-  overflow: hidden;
-  transition: all var(--theme-form-transition-duration) ease-in-out;
-
-  z-index: 2;
-  position: relative;
-
-  &.normal {
-    border: var(--form-element-border-width) solid var(--theme-input-border);
-    border-radius: var(--form-input-border-radius);
-    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
-
-    padding-inline: var(--input-padding-inline);
-
-    &:has(input:is(:hover)) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-
-    &:has(input:focus-visible) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
-      outline-offset: var(--form-element-outline-offset-focus);
-    }
-  }
-
-  &.underlined {
-    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-input-border);
-    padding-inline: var(--input-padding-inline);
-  }
-
-  &.has-right-slot:has(.input-button-core) {
-    padding-inline-end: 0;
-  }
-
-  .slot {
+  .input-text-wrapper {
     display: flex;
     align-items: center;
-    justify-content: center;
-    box-sizing: content-box;
+    gap: var(--input-icon-slot-gap);
+    background-color: var(--theme-input-surface);
+    overflow: hidden;
+    transition: all var(--theme-form-transition-duration) ease-in-out;
+
+    z-index: 2;
+    position: relative;
 
-    .input-button-core {
-      background-color: var(--theme-input-surface);
-      aspect-ratio: 1;
-      border-radius: 0;
-      width: var(--input-min-height);
+    &.normal {
+      border: var(--form-element-border-width) solid var(--theme-input-border);
+      border-radius: var(--form-input-border-radius);
+      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
 
-      &:hover {
-        background-color: var(--theme-input-surface-hover);
+      padding-inline: var(--input-padding-inline);
+
+      &:has(input:is(:hover), button:is(:hover)) {
+        outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+        outline-offset: var(--form-element-outline-offset-focus);
       }
 
-      &:is(:focus-visible) {
+      &:has(input:focus-visible, button:focus-visible) {
         outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
-        outline-offset: -4px;
+        outline-offset: var(--form-element-outline-offset-focus);
       }
+    }
 
-      &.icon-only {
-        .btn-icon {
-          margin: 0;
+    &.underlined {
+      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-input-border);
+      padding-inline: var(--input-padding-inline);
+    }
+
+    &.has-right-slot:has(.input-button-core) {
+      padding-inline-end: 0;
+    }
+
+    .slot {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: content-box;
+
+      .input-button-core {
+        background-color: var(--theme-input-surface);
+        aspect-ratio: 1;
+        border-radius: 0;
+        width: var(--input-min-height);
+
+        &:hover {
+          background-color: var(--theme-input-surface-hover);
+        }
+
+        &:is(:focus-visible) {
+          outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+          outline-offset: -4px;
+        }
+
+        &.icon-only {
+          .btn-icon {
+            margin: 0;
+          }
         }
       }
     }
-  }
 
-  .input-text-core {
-    all: unset;
-    touch-action: manipulation;
-    flex-grow: 1;
+    .input-text-core {
+      all: unset;
+      touch-action: manipulation;
+      flex-grow: 1;
 
-    color: var(--theme-input-text-color-normal);
-    font-family: var(--font-family);
-    font-size: var(--input-font-size);
+      color: var(--theme-input-text-color-normal);
+      font-family: var(--font-family);
+      font-size: var(--input-font-size);
 
-    /* line-height: var(--input-element-line-height); */
+      /* line-height: var(--input-element-line-height); */
 
-    padding-block: var(--input-padding-block);
-    padding-inline: var(--input-padding-inline);
-    /* height: stretch; */
-    min-height: var(--input-min-height);
+      padding-block: var(--input-padding-block);
+      padding-inline: var(--input-padding-inline);
+      /* height: stretch; */
+      min-height: var(--input-min-height);
 
-    &::placeholder {
-      color: var(--theme-input-placeholder);
-      font-size: var(--theme-input-placeholder-font-size);
-      font-style: italic;
-      line-height: 1;
-      font-weight: normal;
+      &::placeholder {
+        color: var(--theme-input-placeholder);
+        font-size: var(--theme-input-placeholder-font-size);
+        font-style: italic;
+        line-height: 1;
+        font-weight: normal;
+      }
     }
   }
 }
-}
 </style>

package/app/components/{forms → 05.forms}/input-text/variants/InputTextAsNumberWithLabel.vue

@@ -155,49 +155,49 @@ updateElementClasses(["input-text-as-number", "has-left-button", "has-right-butt
 
 <style lang="css">
 @layer components {
-.input-text-as-number {
-  .input-text-wrapper {
-    width: fit-content;
-    padding-inline: 0;
+  .input-text-as-number {
+    .input-text-wrapper {
+      width: fit-content;
+      padding-inline: 0;
 
-    &:has(.input-text-as-number) {
-      .slot {
-        margin-inline: 0;
+      &:has(.input-text-as-number) {
+        .slot {
+          margin-inline: 0;
 
-        .input-button-core {
-          background-color: var(--theme-input-surface);
+          .input-button-core {
+            background-color: var(--theme-input-surface);
 
-          &:hover {
-            background-color: var(--theme-input-surface-hover);
-          }
+            &:hover {
+              background-color: var(--theme-input-surface-hover);
+            }
 
-          &.icon-only {
-            .btn-icon {
-              margin: 0;
+            &.icon-only {
+              .btn-icon {
+                margin: 0;
+              }
             }
           }
-        }
 
-        &.left-slot {
-          .input-button-core {
-            border-right: var(--form-element-border-width) solid var(--theme-input-border);
+          &.left-slot {
+            .input-button-core {
+              border-right: var(--form-element-border-width) solid var(--theme-input-border);
+            }
           }
-        }
 
-        &.right-slot {
-          .input-button-core {
-            border-left: var(--form-element-border-width) solid var(--theme-input-border);
+          &.right-slot {
+            .input-button-core {
+              border-left: var(--form-element-border-width) solid var(--theme-input-border);
+            }
           }
         }
       }
-    }
 
-    .input-text-core.input-text-as-number {
-      flex-grow: initial;
-      text-align: center;
-      width: v-bind(minLength);
+      .input-text-core.input-text-as-number {
+        flex-grow: initial;
+        text-align: center;
+        width: v-bind(minLength);
+      }
     }
   }
 }
-}
 </style>