@codecavepro/brand 2.4.4 → 2.5.0

package/README.md

@@ -155,7 +155,7 @@ Two things to know about it:
 
 ## The components
 
-21 components and 13 icons — the buttons, the form controls and the forms
+22 components and 13 icons — the buttons, the form controls and the forms
 themselves, the nav bar, the footer link group, the article and technology
 cards, the review card and the typing effect codecave.pro renders — ship as
 **source**, byte-for-byte the files the site builds from. Not a reimplementation

package/dist/src/common/SubNav.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type MenuItem } from '../lib/menus/menuTypes';
+
+interface Props {
+  /** The MAIN item name this page sits under. */
+  section?: string;
+  /** The SUB item name to mark current, if any. */
+  current?: string;
+  /** '../' repeated once per directory level below the docs root. */
+  up: string;
+  items: Record<string, MenuItem[]>;
+  
+}
+
+const props = defineProps<Props>();
+
+const subNavBarItems = computed<MenuItem[]>(() => {
+  return (props.section && props.items[props.section]) || [];
+});
+
+/* An unknown `current` is a typo that would otherwise render a bar with
+   nothing marked, which looks exactly like a page that is legitimately not
+   in the bar, so fail early instead. */
+if (
+  props.current &&
+  !subNavBarItems.value.some((item) => item.name === props.current)
+) {
+  throw new Error(
+    `SubNav: no item named "${props.current}" in SUB["${props.section}"].\n` +
+      `Available: ${subNavBarItems.value.map((item) => item.name).join(', ') || '(none)'}`
+  );
+}
+</script>
+
+<template>
+  <nav
+    v-if="subNavBarItems.length > 0"
+    class="ds-subnav"
+    aria-label="Section"
+  >
+    <div class="page-container ds-subnav-inner">
+      <ul>
+        <li
+          v-for="item in subNavBarItems"
+          :key="item.name"
+        >
+          <a
+            class="btn btn-ghost"
+            :href="`${up}${item.href}`"
+            :aria-current="item.name === current ? 'true' : undefined"
+          >
+            {{ item.label }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>

package/dist/src/homepage/technologies.vue

@@ -71,7 +71,16 @@ const carouselLocker = carouselGestureLocker()
           ${hideSelected ? 'pt-8' : 'flex flex-col pt-4 md:pt-14 pb-20 xl:pb-0 swipe-over'}`">
     <div v-if="!hideSelected" class="flex flex-col items-center text-center">
       <div class="space-y-3">
-        <HeaderBrows/>
+        <div class="flex justify-center gap-6 font-bold text-xl">
+          <div class="space-x-1">
+            <span class="font-bold text-body-primary">15+</span>
+            <span class="text-body-secondary">Years of experience</span>
+          </div>
+          <div class="space-x-1">
+            <span class="font-bold text-body-primary">4.7</span>
+            <span class="text-body-secondary">Average rating</span>
+          </div>
+        </div>
         <TypingEffect
             :text1="selectedTechnology.title1"
             :text2="selectedTechnology.title2"

package/dist/src/lib/menus/menuTypes.ts

@@ -0,0 +1,7 @@
+export interface MenuItem {
+  /** Stable id. `current` is matched on this, so labels stay free to change. */
+  name: string;
+  label: string;
+  /** Relative to the docs root; the renderer prefixes `up`. */
+  href: string;
+}

package/dist/tokens/colors.d.ts

@@ -61,7 +61,7 @@ export declare const technologyGradient: {
 export declare const error: {
     readonly 100: "#FE9A9A";
     readonly 200: "#FE2020";
-    readonly 300: "#B42318";
+    readonly 300: "#FF6E14";
     readonly 400: "#CA1400";
 };
 /** The semantic layer. Consume these. */
@@ -82,7 +82,7 @@ export declare const color: {
     readonly surfaceQuaternary: "#2B2848";
     readonly failureproof0: "#050505";
     readonly defaultTransparent: "#DCDCE5";
-    readonly error: "#B42318";
+    readonly error: "#FF6E14";
 };
 /** Violet to near-white, left to right. Display type and rule accents only.
  *  The mid stop is the once-used progress accent, NOT brand-300 — the rebuilt

package/dist/tokens/colors.js

@@ -61,7 +61,7 @@ export const technologyGradient = {
 export const error = {
     100: '#FE9A9A', // error value + message text (9.71:1 on the page)
     200: '#FE2020', // error halo
-    300: '#B42318', // --color-error: icons and rules, NOT body text (3.01:1)
+    300: '#FF6E14', // --color-error: error value + message text (7.06:1 on the page)
     400: '#CA1400', // the pulsing navigation dot
 };
 /** The semantic layer. Consume these. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",