fix(ui): collapse empty navbar topbar and add CTA spacing

packages/ui/COMPONENTS.md

@@ -45,7 +45,7 @@ Secure multi-cell PIN and verification-code input with regex and paste support.
 Theme-aware, responsive strong password component.
 
 - Mount: `data-component="StrongPassword"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Create a strong password"`, `autocomplete: string = "new-password"`, `minLength: number = 8`, `specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?"`, `requireLowercase: boolean = true`, `requireUppercase: boolean = true`, `requireNumber: boolean = true`, `requireSpecialCharacter: boolean = true`, `showRequirements: boolean = true`, `presentation: string = "inline"`, `hintText: string = "Use a unique password you do not use elsewhere."`, `emptyLabel: string = "Enter a password"`, `weakLabel: string = "Weak"`, `fairLabel: string = "Fair"`, `goodLabel: string = "Good"`, `strongLabel: string = "Strong"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Password"`, `name: string = "password"`, `value: string = ""`, `placeholder: string = "Create a strong password"`, `autocomplete: string = "new-password"`, `minLength: number = 8`, `specialCharactersSet: string = "!@#$%^&*()_+-=[]{}|;:,.<>?"`, `requireLowercase: boolean = true`, `requireUppercase: boolean = true`, `requireNumber: boolean = true`, `requireSpecialCharacter: boolean = true`, `showRequirements: boolean = true`, `presentation: string = "inline"`, `hintText: string = "Use a unique password you do not use elsewhere."`, `emptyLabel: string = "Enter a password"`, `weakLabel: string = "Weak"`, `fairLabel: string = "Fair"`, `goodLabel: string = "Good"`, `strongLabel: string = "Strong"`, `disabled: boolean = false`, `readonly: boolean = false`, `required: boolean = false`, `invalid: boolean = false`, `validationMessage: string = ""`, `showLabel: string = "Show password"`, `hideLabel: string = "Hide password"`, `class: string = ""`
 - Slots: None
 - Outputs: `input({ value: string; score: number; maximumScore: number; percent: number; level: string })`, `change({ value: string; score: number; maximumScore: number; percent: number; level: string })`, `strength({ value: string; score: number; maximumScore: number; percent: number; level: string })`
 
@@ -146,7 +146,7 @@ Theme-aware, responsive button group component.
 Group related content in a responsive themed surface with title, description, content, and supporting slots.
 
 - Mount: `data-component="Card"`
-- Props: `title: string = "Card title"`, `subtitle: string = ""`, `description: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionHref: string = ""`, `headerActions: unknown[] = []`, `navigation: unknown[] = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: unknown[] = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""`
+- Props: `title: string = "Card title"`, `titleKey: string = ""`, `subtitle: string = ""`, `subtitleKey: string = ""`, `description: string = ""`, `descriptionKey: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionLabelKey: string = ""`, `actionHref: string = ""`, `headerActions: unknown[] = []`, `navigation: unknown[] = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: unknown[] = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""`
 - Slots: `default`
 - Outputs: `click({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `navigate({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `dismiss({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `load({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `error({ error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)`
 
@@ -606,7 +606,7 @@ Arrange feature cards, services, solutions, or benefits in a responsive equal-he
 Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.
 
 - Mount: `data-component="Footer"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: unknown[] = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: unknown[] = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `copyrightKey: string = ""`, `translationPrefix: string = ""`, `class: string = ""`
 - Slots: `pre-footer`, `post-footer`, `copyright-left`, `copyright-right`
 - Outputs: `select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `action({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`
 
@@ -707,7 +707,7 @@ Publish a responsive notice with badge, icon, supporting copy, action, dismiss b
 Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.
 
 - Mount: `data-component="CTASection"`
-- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: unknown[] = []`, `visualPosition: string = "right"`, `maxWidth: string = "xl"`, `fullBleed: boolean = false`, `class: string = ""`
+- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `spacing: string = "none"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: unknown[] = []`, `visualPosition: string = "right"`, `maxWidth: string = "xl"`, `fullBleed: boolean = false`, `class: string = ""`
 - Slots: `default`, `actions`, `visual`, `footer`
 - Outputs: None
 
@@ -826,7 +826,7 @@ Theme-aware, responsive nav component.
 Theme-aware, responsive navbar component.
 
 - Mount: `data-component="Navbar"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Primary navigation"`, `topbarLabel: string = "Utility navigation"`, `brand: Record<string, unknown> = {}`, `items: unknown[] = []`, `actions: unknown[] = []`, `active: string = ""`, `sticky: boolean = false`, `openOnHover: boolean = false`, `maxWidth: string = "full"`, `mobileLabel: string = "Toggle navigation"`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Primary navigation"`, `topbarLabel: string = "Utility navigation"`, `brand: Record<string, unknown> = {}`, `items: unknown[] = []`, `actions: unknown[] = []`, `active: string = ""`, `sticky: boolean = false`, `openOnHover: boolean = false`, `maxWidth: string = "full"`, `mobileLabel: string = "Toggle navigation"`, `translationPrefix: string = ""`, `class: string = ""`
 - Slots: `topbar`, `actions`
 - Outputs: `toggle({ open: boolean })`, `open({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `close({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `select({ item: string | number | boolean | null | object; value: string | number | boolean; level: string })`, `action({ item: string | number | boolean | null | object; value: string | number | boolean })`
 

packages/ui/component-reference.json

@@ -2180,6 +2180,13 @@
           "default": "\"solid\"",
           "options": []
         },
+        {
+          "name": "spacing",
+          "type": "string",
+          "required": false,
+          "default": "\"none\"",
+          "options": []
+        },
         {
           "name": "primaryLabel",
           "type": "string",
@@ -2318,6 +2325,13 @@
           "default": "\"Card title\"",
           "options": []
         },
+        {
+          "name": "titleKey",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "options": []
+        },
         {
           "name": "subtitle",
           "type": "string",
@@ -2325,6 +2339,13 @@
           "default": "\"\"",
           "options": []
         },
+        {
+          "name": "subtitleKey",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "options": []
+        },
         {
           "name": "description",
           "type": "string",
@@ -2332,6 +2353,13 @@
           "default": "\"\"",
           "options": []
         },
+        {
+          "name": "descriptionKey",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "options": []
+        },
         {
           "name": "header",
           "type": "string",
@@ -2374,6 +2402,13 @@
           "default": "\"\"",
           "options": []
         },
+        {
+          "name": "actionLabelKey",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "options": []
+        },
         {
           "name": "actionHref",
           "type": "string",
@@ -6205,6 +6240,20 @@
           "default": "\"\"",
           "options": []
         },
+        {
+          "name": "copyrightKey",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "options": []
+        },
+        {
+          "name": "translationPrefix",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "options": []
+        },
         {
           "name": "class",
           "type": "string",
@@ -8899,6 +8948,13 @@
           "default": "\"Toggle navigation\"",
           "options": []
         },
+        {
+          "name": "translationPrefix",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "options": []
+        },
         {
           "name": "class",
           "type": "string",
@@ -11844,6 +11900,20 @@
           "default": "\"\"",
           "options": []
         },
+        {
+          "name": "showLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Show password\"",
+          "options": []
+        },
+        {
+          "name": "hideLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Hide password\"",
+          "options": []
+        },
         {
           "name": "class",
           "type": "string",

packages/ui/components/CTASection.wrn

@@ -8,6 +8,7 @@ component CTASection {
     size: string = "default"
     color: string = "primary"
     variant: string = "solid"
+    spacing: string = "none"
     primaryLabel: string = "Get started"
     primaryHref: string = "#"
     primaryIcon: string = ""
@@ -35,6 +36,7 @@ component CTASection {
       data-size='{size}'
       data-color='{color}'
       data-variant='{variant}'
+      data-spacing='{spacing}'
       data-max-width='{maxWidth}'
       data-full-bleed='{fullBleed ? "true" : "false"}'
       data-visual-position='{visualPosition}'
@@ -186,6 +188,18 @@ component CTASection {
       --cta-contrast: var(--wrn-color-secondary-contrast);
     }
 
+    .wrn-cta-section[data-spacing="sm"] {
+      padding-block: 2rem;
+    }
+
+    .wrn-cta-section[data-spacing="md"] {
+      padding-block: 3rem;
+    }
+
+    .wrn-cta-section[data-spacing="lg"] {
+      padding-block: 4rem;
+    }
+
     .wrn-cta-section[data-color="info"] {
       --cta-accent: var(--wrn-color-info);
       --cta-accent-hover: var(--wrn-color-info-hover);
@@ -223,6 +237,20 @@ component CTASection {
       margin-inline: auto;
     }
 
+    @media (max-width: 640px) {
+      .wrn-cta-section[data-spacing="sm"] {
+        padding-block: 1.5rem;
+      }
+
+      .wrn-cta-section[data-spacing="md"] {
+        padding-block: 2rem;
+      }
+
+      .wrn-cta-section[data-spacing="lg"] {
+        padding-block: 2.5rem;
+      }
+    }
+
     .wrn-cta-section[data-max-width="compact"] .wrn-cta-section__outer {
       width: min(calc(100% - 2rem), 64rem);
     }

packages/ui/components/Navbar.wrn

@@ -170,12 +170,11 @@ size: string = "default"
       backdrop-filter: blur(16px);
     }
 
-    .wrn-navbar__topbar:empty,
-    .wrn-navbar__topbar:not(:has(*)) {
+    .wrn-navbar__topbar:not(:has(> *)) {
       display: none;
     }
 
-    .wrn-navbar__topbar:not(:empty) {
+    .wrn-navbar__topbar:has(> *) {
       display: flex;
       min-height: 2.25rem;
       align-items: center;

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.24",
+  "version": "0.8.25",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/test/ui-redesign-contract.test.ts

@@ -118,6 +118,26 @@ describe("@wrnexus/ui redesign component pack", () => {
     }
   });
 
+  test("Navbar only displays its utility bar when the topbar slot has rendered content", async () => {
+    const source = await readFile(join(componentsDir, "Navbar.wrn"), "utf8");
+
+    expect(source).toContain(".wrn-navbar__topbar:not(:has(> *))");
+    expect(source).toContain(".wrn-navbar__topbar:has(> *)");
+    expect(source).not.toContain(".wrn-navbar__topbar:not(:empty)");
+  });
+
+  test("CTASection exposes responsive section spacing", async () => {
+    const source = await readFile(join(componentsDir, "CTASection.wrn"), "utf8");
+    const ast = parse(source);
+    const defaults = new Map(ast.props.map((prop) => [prop.name, prop.default]));
+
+    expect(defaults.get("spacing")).toBe('"none"');
+    expect(source).toContain("data-spacing='{spacing}'");
+    expect(source).toContain('.wrn-cta-section[data-spacing="sm"]');
+    expect(source).toContain('.wrn-cta-section[data-spacing="md"]');
+    expect(source).toContain('.wrn-cta-section[data-spacing="lg"]');
+  });
+
   test("existing public defaults remain release compatible", async () => {
     const expectations: Record<string, string[]> = {
       Container: [