From 479115664398dda5b9d65c39794813d1c878854e Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Wed, 3 Jun 2026 02:25:31 -0400
Subject: [PATCH 1/9] feat(design-system): add navigation category button
 toggle component

---
 .../ng-package.json                           |  7 +++++++
 .../navigation-category-toggle/src/index.ts   |  1 +
 .../src/lib/navigation-category-toggle.html   |  1 +
 .../src/lib/navigation-category-toggle.scss   |  7 +++++++
 .../lib/navigation-category-toggle.spec.ts    | 21 +++++++++++++++++++
 .../lib/navigation-category-toggle.stories.ts | 20 ++++++++++++++++++
 .../src/lib/navigation-category-toggle.ts     | 10 +++++++++
 .../src/lib/tokens.scss                       | 10 +++++++++
 nx.json                                       |  5 ++++-
 tsconfig.base.json                            |  3 +++
 10 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 libs/design-system/buttons/navigation-category-toggle/ng-package.json
 create mode 100644 libs/design-system/buttons/navigation-category-toggle/src/index.ts
 create mode 100644 libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
 create mode 100644 libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss
 create mode 100644 libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
 create mode 100644 libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
 create mode 100644 libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
 create mode 100644 libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss

diff --git a/libs/design-system/buttons/navigation-category-toggle/ng-package.json b/libs/design-system/buttons/navigation-category-toggle/ng-package.json
new file mode 100644
index 0000000..dc244f1
--- /dev/null
+++ b/libs/design-system/buttons/navigation-category-toggle/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "lib": {
+    "cssUrl": "inline",
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../../src/sass"]
+  }
+}
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/index.ts b/libs/design-system/buttons/navigation-category-toggle/src/index.ts
new file mode 100644
index 0000000..2af547c
--- /dev/null
+++ b/libs/design-system/buttons/navigation-category-toggle/src/index.ts
@@ -0,0 +1 @@
+import { NavigationCategoryToggle } from './lib/navigation-category-toggle';
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
new file mode 100644
index 0000000..e787aa9
--- /dev/null
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
@@ -0,0 +1 @@
+<p>navigation-category-toggle works!</p>
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss
new file mode 100644
index 0000000..0764d34
--- /dev/null
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss
@@ -0,0 +1,7 @@
+@use '@angular/material' as mat;
+@use 'internal/token-utils';
+@use './tokens' as *;
+
+:host {
+  display: block;
+}
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
new file mode 100644
index 0000000..6ddea5a
--- /dev/null
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavigationCategoryToggle } from './navigation-category-toggle';
+
+describe('NavigationCategoryToggle', () => {
+  let component: NavigationCategoryToggle;
+  let fixture: ComponentFixture<NavigationCategoryToggle>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavigationCategoryToggle],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NavigationCategoryToggle);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
new file mode 100644
index 0000000..a3d1fef
--- /dev/null
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { NavigationCategoryToggle } from './navigation-category-toggle';
+
+const meta: Meta<NavigationCategoryToggle> = {
+  component: NavigationCategoryToggle,
+  title: 'Design System/Buttons/Navigation Category Toggle',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/AtlasNG-Components?node-id=2101-11132',
+    },
+  },
+  args: {},
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<NavigationCategoryToggle>;
+
+export const Default: Story = {};
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
new file mode 100644
index 0000000..b01ccef
--- /dev/null
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'ang-navigation-category-toggle',
+  imports: [],
+  templateUrl: './navigation-category-toggle.html',
+  styleUrl: './navigation-category-toggle.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavigationCategoryToggle {}
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss b/libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss
new file mode 100644
index 0000000..876bdad
--- /dev/null
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss
@@ -0,0 +1,10 @@
+@use 'internal/token-utils';
+
+$config: (
+  namespace: 'social-media-button',
+  tokens: (),
+);
+
+@mixin overrides($overrides) {
+  @include token-utils.apply-overrides($overrides, $config);
+}
diff --git a/nx.json b/nx.json
index ead2db7..3c5b513 100644
--- a/nx.json
+++ b/nx.json
@@ -316,7 +316,10 @@
       "preVersionCommand": "npx nx run-many -t build --projects=tag:library",
       "manifestRootsToUpdate": [
         "{projectRoot}",
-        { "path": "{workspaceRoot}/dist/{projectRoot}", "preserveLocalDependencyProtocols": false }
+        {
+          "path": "{workspaceRoot}/dist/{projectRoot}",
+          "preserveLocalDependencyProtocols": false
+        }
       ],
       "currentVersionResolver": "git-tag",
       "fallbackCurrentVersionResolver": "disk"
diff --git a/tsconfig.base.json b/tsconfig.base.json
index d0bb5c0..059f5b7 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -29,6 +29,9 @@
       "@atlasng/core": ["./libs/core/src/index.ts"],
       "@atlasng/design-system": ["./libs/design-system/src/index.ts"],
       "@atlasng/design-system/buttons/help": ["./libs/design-system/buttons/help/src/index.ts"],
+      "@atlasng/design-system/buttons/navigation-category-toggle": [
+        "./libs/design-system/buttons/navigation-category-toggle/src/index.ts"
+      ],
       "@atlasng/design-system/buttons/social-media": ["./libs/design-system/buttons/social-media/src/index.ts"],
       "@atlasng/design-system/indicators/end-of-results": [
         "./libs/design-system/indicators/end-of-results/src/index.ts"

From 7769f1b59e0b33221d25596694316fd83ca8b2b6 Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Wed, 3 Jun 2026 18:27:44 -0400
Subject: [PATCH 2/9] feat(design-system): add navigation category toggle

---
 .../navigation-category-toggle/src/index.ts   |  2 +-
 .../src/lib/navigation-category-toggle.html   | 19 ++++-
 .../src/lib/navigation-category-toggle.scss   | 39 ++++++++++
 .../lib/navigation-category-toggle.spec.ts    | 74 ++++++++++++++++---
 .../lib/navigation-category-toggle.stories.ts | 12 ++-
 .../src/lib/navigation-category-toggle.ts     | 15 +++-
 .../src/lib/tokens.scss                       | 13 +++-
 7 files changed, 153 insertions(+), 21 deletions(-)

diff --git a/libs/design-system/buttons/navigation-category-toggle/src/index.ts b/libs/design-system/buttons/navigation-category-toggle/src/index.ts
index 2af547c..f92766f 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/index.ts
+++ b/libs/design-system/buttons/navigation-category-toggle/src/index.ts
@@ -1 +1 @@
-import { NavigationCategoryToggle } from './lib/navigation-category-toggle';
+export { NavigationCategoryToggle } from './lib/navigation-category-toggle';
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
index e787aa9..6592d86 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
@@ -1 +1,18 @@
-<p>navigation-category-toggle works!</p>
+<a
+  matButton
+  angTrackClick
+  class="ang-navigation-category-toggle-button"
+  target="_blank"
+  disableRipple
+  [attr.href]="link()"
+  (click)="toggled.set(!toggled())"
+>
+  <span class="ang-navigation-category-toggle-text"><ng-content /></span>
+  @if (!link()) {
+    <mat-icon
+      iconPositionEnd
+      class="ang-navigation-category-togglet-icon"
+      [fontIcon]="toggled() ? 'expand_less' : 'expand_more'"
+    />
+  }
+</a>
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss
index 0764d34..7162c67 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss
@@ -4,4 +4,43 @@
 
 :host {
   display: block;
+
+  @include mat.button-overrides(
+    (
+      text-container-height: 3rem,
+      text-label-text-color: token-utils.slot(label-color, $config),
+      text-icon-spacing: 0.125rem,
+      text-label-text-font: token-utils.slot(label-font, $config),
+      text-label-text-size: token-utils.slot(label-font-size, $config),
+      text-label-text-tracking: token-utils.slot(label-letter-spacing, $config),
+      text-label-text-weight: token-utils.slot(label-font-weight, $config),
+      text-with-icon-horizontal-padding: 0.75rem,
+      text-state-layer-color: transparent,
+    )
+  );
+
+  @include mat.icon-overrides(
+    (
+      color: token-utils.slot(icon-color, $config),
+    )
+  );
+
+  .ang-navigation-category-toggle-button {
+    &:focus-visible {
+      outline: solid 0.125rem token-utils.slot(focus-outline-color, $config);
+    }
+
+    .ang-navigation-category-toggle-text {
+      text-decoration: underline;
+      text-underline-offset: 0.25rem;
+      text-decoration-thickness: 0.125rem;
+      text-decoration-color: token-utils.slot(underline-color, $config);
+    }
+
+    .ang-navigation-category-toggle-icon {
+      height: 1.25rem;
+      width: 1.25rem;
+      font-size: 1.25rem;
+    }
+  }
 }
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
index 6ddea5a..c8fdad2 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
@@ -1,21 +1,71 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
 import { NavigationCategoryToggle } from './navigation-category-toggle';
 
 describe('NavigationCategoryToggle', () => {
-  let component: NavigationCategoryToggle;
-  let fixture: ComponentFixture<NavigationCategoryToggle>;
+  async function setup(link: string | null = null) {
+    const user = userEvent.setup();
+    const rendered = await render(
+      `<ang-navigation-category-toggle [link]="link">Category</ang-navigation-category-toggle>`,
+      {
+        imports: [NavigationCategoryToggle],
+        componentProperties: {
+          link,
+        },
+      },
+    );
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [NavigationCategoryToggle],
-    }).compileComponents();
+    return {
+      user,
+      ...rendered,
+    };
+  }
 
-    fixture = TestBed.createComponent(NavigationCategoryToggle);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
+  it('renders projected text before the icon', async () => {
+    await setup();
+
+    const toggle = screen.getByText('Category').closest('.ang-navigation-category-toggle-button');
+
+    expect(toggle).toBeTruthy();
+
+    const text = toggle?.querySelector('.ang-navigation-category-toggle-text');
+    const icon = toggle?.querySelector('.ang-navigation-category-togglet-icon');
+
+    expect(text).toBeTruthy();
+    expect(icon).toBeTruthy();
+
+    if (!text || !icon) {
+      throw new Error('Expected text and icon elements to exist');
+    }
+
+    expect(text.compareDocumentPosition(icon) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('toggles state when clicked', async () => {
+    const { user } = await setup();
+    const toggle = screen.getByText('Category').closest('.ang-navigation-category-toggle-button');
+
+    expect(toggle).toBeTruthy();
+
+    const icon = toggle?.querySelector('.ang-navigation-category-togglet-icon');
+
+    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_more');
+
+    await user.click(toggle as Element);
+    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_less');
+
+    await user.click(toggle as Element);
+    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_more');
+  });
+
+  it('hides the toggle icon when a link is provided', async () => {
+    await setup('/products');
+
+    const toggle = screen.getByText('Category').closest('.ang-navigation-category-toggle-button');
+
+    expect(toggle).toBeTruthy();
+    expect(toggle).toHaveAttribute('href');
+    expect(toggle?.getAttribute('href')).toContain('/products');
+    expect(toggle?.querySelector('.ang-navigation-category-togglet-icon')).not.toBeInTheDocument();
   });
 });
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
index a3d1fef..9028d56 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
@@ -10,11 +10,19 @@ const meta: Meta<NavigationCategoryToggle> = {
       url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/AtlasNG-Components?node-id=2101-11132',
     },
   },
-  args: {},
-  argTypes: {},
+  render: (args) => ({
+    props: args,
+    template: `<ang-navigation-category-toggle [link]="link">Label</ang-navigation-category-toggle>`,
+  }),
 };
 
 export default meta;
 type Story = StoryObj<NavigationCategoryToggle>;
 
 export const Default: Story = {};
+
+export const WithLink: Story = {
+  args: {
+    link: 'https://example.com',
+  },
+};
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
index b01ccef..b78678b 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
@@ -1,10 +1,19 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { TrackClick } from '@atlasng/analytics';
+import { AnyLinkCommand } from '@atlasng/common';
 
 @Component({
   selector: 'ang-navigation-category-toggle',
-  imports: [],
+  imports: [MatButtonModule, MatIconModule, TrackClick],
   templateUrl: './navigation-category-toggle.html',
   styleUrl: './navigation-category-toggle.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NavigationCategoryToggle {}
+export class NavigationCategoryToggle {
+  /** The link to navigate to (hides toggle icon if provided) */
+  readonly link = input<AnyLinkCommand | null>(null);
+  /** Whether to show the toggle icon */
+  readonly toggled = model<boolean>(false);
+}
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss b/libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss
index 876bdad..d7f9970 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss
@@ -1,8 +1,17 @@
 @use 'internal/token-utils';
 
 $config: (
-  namespace: 'social-media-button',
-  tokens: (),
+  namespace: 'navigation-category-toggle',
+  tokens: (
+    label-color: token-utils.sys-token(on-surface),
+    icon-color: token-utils.sys-token(on-surface-variant),
+    underline-color: token-utils.sys-token(primary),
+    focus-outline-color: token-utils.sys-token(on-surface),
+    label-font: token-utils.sys-token(title-medium-font),
+    label-font-size: token-utils.sys-token(title-medium-size),
+    label-letter-spacing: token-utils.sys-token(title-medium-tracking),
+    label-font-weight: token-utils.sys-token(title-medium-weight),
+  ),
 );
 
 @mixin overrides($overrides) {

From 58acfefa3189f7b75ab80b95e70ba3a128a9532d Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Wed, 3 Jun 2026 18:57:57 -0400
Subject: [PATCH 3/9] fix(design-system): fix icon class name

---
 .../src/lib/navigation-category-toggle.html                 | 2 +-
 .../src/lib/navigation-category-toggle.spec.ts              | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
index 6592d86..d89cfde 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
@@ -11,7 +11,7 @@
   @if (!link()) {
     <mat-icon
       iconPositionEnd
-      class="ang-navigation-category-togglet-icon"
+      class="ang-navigation-category-toggle-icon"
       [fontIcon]="toggled() ? 'expand_less' : 'expand_more'"
     />
   }
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
index c8fdad2..1d61cda 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
@@ -29,7 +29,7 @@ describe('NavigationCategoryToggle', () => {
     expect(toggle).toBeTruthy();
 
     const text = toggle?.querySelector('.ang-navigation-category-toggle-text');
-    const icon = toggle?.querySelector('.ang-navigation-category-togglet-icon');
+    const icon = toggle?.querySelector('.ang-navigation-category-toggle-icon');
 
     expect(text).toBeTruthy();
     expect(icon).toBeTruthy();
@@ -47,7 +47,7 @@ describe('NavigationCategoryToggle', () => {
 
     expect(toggle).toBeTruthy();
 
-    const icon = toggle?.querySelector('.ang-navigation-category-togglet-icon');
+    const icon = toggle?.querySelector('.ang-navigation-category-toggle-icon');
 
     expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_more');
 
@@ -66,6 +66,6 @@ describe('NavigationCategoryToggle', () => {
     expect(toggle).toBeTruthy();
     expect(toggle).toHaveAttribute('href');
     expect(toggle?.getAttribute('href')).toContain('/products');
-    expect(toggle?.querySelector('.ang-navigation-category-togglet-icon')).not.toBeInTheDocument();
+    expect(toggle?.querySelector('.ang-navigation-category-toggle-icon')).not.toBeInTheDocument();
   });
 });

From 9f758f23e0cc12781e3e13a980e58cd6519e51f5 Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Wed, 3 Jun 2026 20:30:37 -0400
Subject: [PATCH 4/9] fix(design-system): update focus behavior

---
 .../src/lib/navigation-category-toggle.html   |  6 ++--
 .../lib/navigation-category-toggle.spec.ts    | 28 +++----------------
 .../lib/navigation-category-toggle.stories.ts |  2 +-
 .../src/lib/navigation-category-toggle.ts     |  4 +--
 4 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
index d89cfde..c6e0712 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
@@ -1,10 +1,10 @@
-<a
+<button
   matButton
   angTrackClick
   class="ang-navigation-category-toggle-button"
   target="_blank"
   disableRipple
-  [attr.href]="link()"
+  [angAnyLink]="link()"
   (click)="toggled.set(!toggled())"
 >
   <span class="ang-navigation-category-toggle-text"><ng-content /></span>
@@ -15,4 +15,4 @@
       [fontIcon]="toggled() ? 'expand_less' : 'expand_more'"
     />
   }
-</a>
+</button>
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
index 1d61cda..9417a22 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
@@ -21,26 +21,6 @@ describe('NavigationCategoryToggle', () => {
     };
   }
 
-  it('renders projected text before the icon', async () => {
-    await setup();
-
-    const toggle = screen.getByText('Category').closest('.ang-navigation-category-toggle-button');
-
-    expect(toggle).toBeTruthy();
-
-    const text = toggle?.querySelector('.ang-navigation-category-toggle-text');
-    const icon = toggle?.querySelector('.ang-navigation-category-toggle-icon');
-
-    expect(text).toBeTruthy();
-    expect(icon).toBeTruthy();
-
-    if (!text || !icon) {
-      throw new Error('Expected text and icon elements to exist');
-    }
-
-    expect(text.compareDocumentPosition(icon) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
-  });
-
   it('toggles state when clicked', async () => {
     const { user } = await setup();
     const toggle = screen.getByText('Category').closest('.ang-navigation-category-toggle-button');
@@ -61,11 +41,11 @@ describe('NavigationCategoryToggle', () => {
   it('hides the toggle icon when a link is provided', async () => {
     await setup('/products');
 
-    const toggle = screen.getByText('Category').closest('.ang-navigation-category-toggle-button');
+    const toggle = screen.getByRole('button', { name: 'Category' });
 
     expect(toggle).toBeTruthy();
-    expect(toggle).toHaveAttribute('href');
-    expect(toggle?.getAttribute('href')).toContain('/products');
-    expect(toggle?.querySelector('.ang-navigation-category-toggle-icon')).not.toBeInTheDocument();
+    expect(toggle).toHaveAttribute('tabindex', '0');
+    expect(toggle).not.toHaveAttribute('href');
+    expect(toggle.querySelector('.ang-navigation-category-toggle-icon')).not.toBeInTheDocument();
   });
 });
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
index 9028d56..2e8eea3 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
@@ -21,7 +21,7 @@ type Story = StoryObj<NavigationCategoryToggle>;
 
 export const Default: Story = {};
 
-export const WithLink: Story = {
+export const AsLink: Story = {
   args: {
     link: 'https://example.com',
   },
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
index b78678b..8a8cc22 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
+++ b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
@@ -2,11 +2,11 @@ import { ChangeDetectionStrategy, Component, input, model } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { TrackClick } from '@atlasng/analytics';
-import { AnyLinkCommand } from '@atlasng/common';
+import { AnyLink, AnyLinkCommand } from '@atlasng/common';
 
 @Component({
   selector: 'ang-navigation-category-toggle',
-  imports: [MatButtonModule, MatIconModule, TrackClick],
+  imports: [MatButtonModule, MatIconModule, AnyLink, TrackClick],
   templateUrl: './navigation-category-toggle.html',
   styleUrl: './navigation-category-toggle.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

From c6ae45011cf9a78b8a49706fc503af53ed0a2232 Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Fri, 5 Jun 2026 02:48:17 -0400
Subject: [PATCH 5/9] refactor(design-system): split navigation category toggle
 button into two components

---
 .../navigation-category-toggle/src/index.ts   |  1 -
 .../src/lib/navigation-category-toggle.html   | 18 -------
 .../lib/navigation-category-toggle.spec.ts    | 51 -------------------
 .../lib/navigation-category-toggle.stories.ts | 28 ----------
 .../src/lib/navigation-category-toggle.ts     | 19 -------
 .../ng-package.json                           |  0
 .../buttons/navigation/src/index.ts           |  2 +
 .../navigation-toggle/navigation-toggle.html  |  9 ++++
 .../navigation-toggle/navigation-toggle.scss} | 18 ++++---
 .../navigation-toggle.spec.ts                 | 37 ++++++++++++++
 .../navigation-toggle.stories.ts              | 22 ++++++++
 .../navigation-toggle/navigation-toggle.ts    | 20 ++++++++
 .../navigation/src/lib/navigation.html        |  3 ++
 .../navigation/src/lib/navigation.scss        | 36 +++++++++++++
 .../navigation/src/lib/navigation.spec.ts     | 36 +++++++++++++
 .../navigation/src/lib/navigation.stories.ts  | 25 +++++++++
 .../buttons/navigation/src/lib/navigation.ts  | 16 ++++++
 .../src/lib/tokens.scss                       |  2 +-
 18 files changed, 217 insertions(+), 126 deletions(-)
 delete mode 100644 libs/design-system/buttons/navigation-category-toggle/src/index.ts
 delete mode 100644 libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
 delete mode 100644 libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
 delete mode 100644 libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
 delete mode 100644 libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
 rename libs/design-system/buttons/{navigation-category-toggle => navigation}/ng-package.json (100%)
 create mode 100644 libs/design-system/buttons/navigation/src/index.ts
 create mode 100644 libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.html
 rename libs/design-system/buttons/{navigation-category-toggle/src/lib/navigation-category-toggle.scss => navigation/src/lib/navigation-toggle/navigation-toggle.scss} (71%)
 create mode 100644 libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.spec.ts
 create mode 100644 libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.stories.ts
 create mode 100644 libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.ts
 create mode 100644 libs/design-system/buttons/navigation/src/lib/navigation.html
 create mode 100644 libs/design-system/buttons/navigation/src/lib/navigation.scss
 create mode 100644 libs/design-system/buttons/navigation/src/lib/navigation.spec.ts
 create mode 100644 libs/design-system/buttons/navigation/src/lib/navigation.stories.ts
 create mode 100644 libs/design-system/buttons/navigation/src/lib/navigation.ts
 rename libs/design-system/buttons/{navigation-category-toggle => navigation}/src/lib/tokens.scss (93%)

diff --git a/libs/design-system/buttons/navigation-category-toggle/src/index.ts b/libs/design-system/buttons/navigation-category-toggle/src/index.ts
deleted file mode 100644
index f92766f..0000000
--- a/libs/design-system/buttons/navigation-category-toggle/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { NavigationCategoryToggle } from './lib/navigation-category-toggle';
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
deleted file mode 100644
index c6e0712..0000000
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<button
-  matButton
-  angTrackClick
-  class="ang-navigation-category-toggle-button"
-  target="_blank"
-  disableRipple
-  [angAnyLink]="link()"
-  (click)="toggled.set(!toggled())"
->
-  <span class="ang-navigation-category-toggle-text"><ng-content /></span>
-  @if (!link()) {
-    <mat-icon
-      iconPositionEnd
-      class="ang-navigation-category-toggle-icon"
-      [fontIcon]="toggled() ? 'expand_less' : 'expand_more'"
-    />
-  }
-</button>
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
deleted file mode 100644
index 9417a22..0000000
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { render, screen } from '@testing-library/angular';
-import userEvent from '@testing-library/user-event';
-import { NavigationCategoryToggle } from './navigation-category-toggle';
-
-describe('NavigationCategoryToggle', () => {
-  async function setup(link: string | null = null) {
-    const user = userEvent.setup();
-    const rendered = await render(
-      `<ang-navigation-category-toggle [link]="link">Category</ang-navigation-category-toggle>`,
-      {
-        imports: [NavigationCategoryToggle],
-        componentProperties: {
-          link,
-        },
-      },
-    );
-
-    return {
-      user,
-      ...rendered,
-    };
-  }
-
-  it('toggles state when clicked', async () => {
-    const { user } = await setup();
-    const toggle = screen.getByText('Category').closest('.ang-navigation-category-toggle-button');
-
-    expect(toggle).toBeTruthy();
-
-    const icon = toggle?.querySelector('.ang-navigation-category-toggle-icon');
-
-    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_more');
-
-    await user.click(toggle as Element);
-    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_less');
-
-    await user.click(toggle as Element);
-    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_more');
-  });
-
-  it('hides the toggle icon when a link is provided', async () => {
-    await setup('/products');
-
-    const toggle = screen.getByRole('button', { name: 'Category' });
-
-    expect(toggle).toBeTruthy();
-    expect(toggle).toHaveAttribute('tabindex', '0');
-    expect(toggle).not.toHaveAttribute('href');
-    expect(toggle.querySelector('.ang-navigation-category-toggle-icon')).not.toBeInTheDocument();
-  });
-});
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
deleted file mode 100644
index 2e8eea3..0000000
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { NavigationCategoryToggle } from './navigation-category-toggle';
-
-const meta: Meta<NavigationCategoryToggle> = {
-  component: NavigationCategoryToggle,
-  title: 'Design System/Buttons/Navigation Category Toggle',
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/AtlasNG-Components?node-id=2101-11132',
-    },
-  },
-  render: (args) => ({
-    props: args,
-    template: `<ang-navigation-category-toggle [link]="link">Label</ang-navigation-category-toggle>`,
-  }),
-};
-
-export default meta;
-type Story = StoryObj<NavigationCategoryToggle>;
-
-export const Default: Story = {};
-
-export const AsLink: Story = {
-  args: {
-    link: 'https://example.com',
-  },
-};
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts b/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
deleted file mode 100644
index 8a8cc22..0000000
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { TrackClick } from '@atlasng/analytics';
-import { AnyLink, AnyLinkCommand } from '@atlasng/common';
-
-@Component({
-  selector: 'ang-navigation-category-toggle',
-  imports: [MatButtonModule, MatIconModule, AnyLink, TrackClick],
-  templateUrl: './navigation-category-toggle.html',
-  styleUrl: './navigation-category-toggle.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class NavigationCategoryToggle {
-  /** The link to navigate to (hides toggle icon if provided) */
-  readonly link = input<AnyLinkCommand | null>(null);
-  /** Whether to show the toggle icon */
-  readonly toggled = model<boolean>(false);
-}
diff --git a/libs/design-system/buttons/navigation-category-toggle/ng-package.json b/libs/design-system/buttons/navigation/ng-package.json
similarity index 100%
rename from libs/design-system/buttons/navigation-category-toggle/ng-package.json
rename to libs/design-system/buttons/navigation/ng-package.json
diff --git a/libs/design-system/buttons/navigation/src/index.ts b/libs/design-system/buttons/navigation/src/index.ts
new file mode 100644
index 0000000..6d8635f
--- /dev/null
+++ b/libs/design-system/buttons/navigation/src/index.ts
@@ -0,0 +1,2 @@
+export { Navigation } from './lib/navigation';
+export { NavigationToggle } from './lib/navigation-toggle/navigation-toggle';
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.html b/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.html
new file mode 100644
index 0000000..951605e
--- /dev/null
+++ b/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.html
@@ -0,0 +1,9 @@
+<button matButton angTrackClick class="ang-navigation-toggle-button" disableRipple>
+  <span class="ang-navigation-toggle-text"><ng-content /></span>
+
+  <mat-icon
+    iconPositionEnd
+    class="ang-navigation-toggle-icon"
+    [fontIcon]="selected() ? 'expand_less' : 'expand_more'"
+  />
+</button>
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss b/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.scss
similarity index 71%
rename from libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss
rename to libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.scss
index 7162c67..c852517 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss
+++ b/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.scss
@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 @use 'internal/token-utils';
-@use './tokens' as *;
+@use '../tokens' as *;
 
 :host {
   display: block;
@@ -25,19 +25,21 @@
     )
   );
 
-  .ang-navigation-category-toggle-button {
+  .ang-navigation-toggle-button {
     &:focus-visible {
       outline: solid 0.125rem token-utils.slot(focus-outline-color, $config);
     }
 
-    .ang-navigation-category-toggle-text {
-      text-decoration: underline;
-      text-underline-offset: 0.25rem;
-      text-decoration-thickness: 0.125rem;
-      text-decoration-color: token-utils.slot(underline-color, $config);
+    :is(&.selected, &:hover, &:active, &:focus) {
+      .ang-navigation-toggle-text {
+        text-decoration: underline;
+        text-underline-offset: 0.25rem;
+        text-decoration-thickness: 0.125rem;
+        text-decoration-color: token-utils.slot(underline-color, $config);
+      }
     }
 
-    .ang-navigation-category-toggle-icon {
+    .ang-navigation-toggle-icon {
       height: 1.25rem;
       width: 1.25rem;
       font-size: 1.25rem;
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.spec.ts b/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.spec.ts
new file mode 100644
index 0000000..d1cf697
--- /dev/null
+++ b/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.spec.ts
@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+import { NavigationToggle } from './navigation-toggle';
+
+describe('NavigationToggle', () => {
+  async function setup(link: string | null = null) {
+    const user = userEvent.setup();
+    const rendered = await render(`<ang-navigation-toggle>Category</ang-navigation-toggle>`, {
+      imports: [NavigationToggle],
+      componentProperties: {
+        link,
+      },
+    });
+
+    return {
+      user,
+      ...rendered,
+    };
+  }
+
+  it('toggles state when clicked', async () => {
+    const { user } = await setup();
+    const toggle = screen.getByText('Category').closest('.ang-navigation-toggle-button');
+
+    expect(toggle).toBeTruthy();
+
+    const icon = toggle?.querySelector('.ang-navigation-toggle-icon');
+
+    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_more');
+
+    await user.click(toggle as Element);
+    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_less');
+
+    await user.click(toggle as Element);
+    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_more');
+  });
+});
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.stories.ts b/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.stories.ts
new file mode 100644
index 0000000..c89f23c
--- /dev/null
+++ b/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.stories.ts
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { NavigationToggle } from './navigation-toggle';
+
+const meta: Meta<NavigationToggle> = {
+  component: NavigationToggle,
+  title: 'Design System/Buttons/Navigation/Navigation Toggle',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/AtlasNG-Components?node-id=2101-11132',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ang-navigation-toggle>Label</ang-navigation-toggle>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<NavigationToggle>;
+
+export const Default: Story = {};
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.ts b/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.ts
new file mode 100644
index 0000000..4ae9c64
--- /dev/null
+++ b/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.ts
@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { TrackClick } from '@atlasng/analytics';
+
+@Component({
+  selector: 'ang-navigation-toggle',
+  imports: [MatButtonModule, MatIconModule, TrackClick],
+  templateUrl: './navigation-toggle.html',
+  styleUrl: './navigation-toggle.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.selected]': 'selected()',
+    '(click)': 'selected.set(!selected())',
+  },
+})
+export class NavigationToggle {
+  /** Whether the button is currently selected */
+  readonly selected = model<boolean>(false);
+}
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.html b/libs/design-system/buttons/navigation/src/lib/navigation.html
new file mode 100644
index 0000000..664bfda
--- /dev/null
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.html
@@ -0,0 +1,3 @@
+<button matButton angTrackClick class="ang-navigation-button" target="_blank" disableRipple [angAnyLink]="link()">
+  <span class="ang-navigation-text"><ng-content /></span>
+</button>
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.scss b/libs/design-system/buttons/navigation/src/lib/navigation.scss
new file mode 100644
index 0000000..0332c89
--- /dev/null
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.scss
@@ -0,0 +1,36 @@
+@use '@angular/material' as mat;
+@use 'internal/token-utils';
+@use './tokens' as *;
+
+:host {
+  display: block;
+
+  @include mat.button-overrides(
+    (
+      text-container-height: 3rem,
+      text-label-text-color: token-utils.slot(label-color, $config),
+      text-icon-spacing: 0.125rem,
+      text-label-text-font: token-utils.slot(label-font, $config),
+      text-label-text-size: token-utils.slot(label-font-size, $config),
+      text-label-text-tracking: token-utils.slot(label-letter-spacing, $config),
+      text-label-text-weight: token-utils.slot(label-font-weight, $config),
+      text-with-icon-horizontal-padding: 0.75rem,
+      text-state-layer-color: transparent,
+    )
+  );
+
+  .ang-navigation-button {
+    &:focus-visible {
+      outline: solid 0.125rem token-utils.slot(focus-outline-color, $config);
+    }
+
+    :is(&:hover, &:active, &:focus) {
+      .ang-navigation-text {
+        text-decoration: underline;
+        text-underline-offset: 0.25rem;
+        text-decoration-thickness: 0.125rem;
+        text-decoration-color: token-utils.slot(underline-color, $config);
+      }
+    }
+  }
+}
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts b/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts
new file mode 100644
index 0000000..60445b2
--- /dev/null
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts
@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+import { Navigation } from './navigation';
+
+describe('Navigation', () => {
+  async function setup(link: string | null = null) {
+    const user = userEvent.setup();
+
+    await render(`<ang-navigation [link]="link">Go to Docs</ang-navigation>`, {
+      imports: [Navigation],
+      componentProperties: {
+        link,
+      },
+    });
+
+    const button = screen.getByRole('button', { name: 'Go to Docs' });
+
+    return {
+      user,
+      button,
+    };
+  }
+
+  it('renders projected content inside the navigation button', async () => {
+    const { button } = await setup();
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Go to Docs');
+  });
+
+  it('applies link to the button', async () => {
+    const { button } = await setup('https://example.com');
+
+    expect(button).toHaveAttribute('href', 'https://example.com');
+  });
+});
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.stories.ts b/libs/design-system/buttons/navigation/src/lib/navigation.stories.ts
new file mode 100644
index 0000000..78bfa4d
--- /dev/null
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.stories.ts
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { Navigation } from './navigation';
+
+const meta: Meta<Navigation> = {
+  component: Navigation,
+  title: 'Design System/Buttons/Navigation',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/AtlasNG-Components?node-id=7493-48830',
+    },
+  },
+  args: {
+    link: 'https://example.com',
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ang-navigation [link]="link">Label</ang-navigation>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<Navigation>;
+
+export const Default: Story = {};
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.ts b/libs/design-system/buttons/navigation/src/lib/navigation.ts
new file mode 100644
index 0000000..e0584b9
--- /dev/null
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.ts
@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { TrackClick } from '@atlasng/analytics';
+import { AnyLink, AnyLinkCommand } from '@atlasng/common';
+
+@Component({
+  selector: 'ang-navigation',
+  imports: [MatButtonModule, AnyLink, TrackClick],
+  templateUrl: './navigation.html',
+  styleUrl: './navigation.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Navigation {
+  /** The link to navigate to */
+  readonly link = input<AnyLinkCommand | null>(null);
+}
diff --git a/libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss b/libs/design-system/buttons/navigation/src/lib/tokens.scss
similarity index 93%
rename from libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss
rename to libs/design-system/buttons/navigation/src/lib/tokens.scss
index d7f9970..48237ca 100644
--- a/libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss
+++ b/libs/design-system/buttons/navigation/src/lib/tokens.scss
@@ -1,7 +1,7 @@
 @use 'internal/token-utils';
 
 $config: (
-  namespace: 'navigation-category-toggle',
+  namespace: 'navigation',
   tokens: (
     label-color: token-utils.sys-token(on-surface),
     icon-color: token-utils.sys-token(on-surface-variant),

From 2e08375b314c077e79e0bebb800d872f3bcd667c Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Fri, 5 Jun 2026 03:25:30 -0400
Subject: [PATCH 6/9] test(design-system): fix test

---
 .../buttons/navigation/src/lib/navigation.spec.ts           | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts b/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts
index 60445b2..3d1e996 100644
--- a/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts
@@ -27,10 +27,4 @@ describe('Navigation', () => {
     expect(button).toBeInTheDocument();
     expect(button).toHaveTextContent('Go to Docs');
   });
-
-  it('applies link to the button', async () => {
-    const { button } = await setup('https://example.com');
-
-    expect(button).toHaveAttribute('href', 'https://example.com');
-  });
 });

From 74d7903c40a5df25d1ae237a16226cd789c4245b Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Fri, 5 Jun 2026 12:31:40 -0400
Subject: [PATCH 7/9] refactor(design-system): tweaks

---
 .../buttons/navigation-toggle/ng-package.json |  7 +++++++
 .../buttons/navigation-toggle/src/index.ts    |  1 +
 .../src/lib}/navigation-toggle.html           |  0
 .../src/lib}/navigation-toggle.scss           |  5 +++--
 .../src/lib}/navigation-toggle.spec.ts        |  0
 .../src/lib}/navigation-toggle.stories.ts     |  2 +-
 .../src/lib}/navigation-toggle.ts             |  6 +++---
 .../navigation-toggle/src/lib/tokens.scss     | 19 +++++++++++++++++++
 .../buttons/navigation/src/index.ts           |  1 -
 .../navigation/src/lib/navigation.html        |  4 ++--
 .../navigation/src/lib/navigation.scss        |  3 ++-
 .../buttons/navigation/src/lib/navigation.ts  |  2 +-
 tsconfig.base.json                            |  5 +++--
 13 files changed, 42 insertions(+), 13 deletions(-)
 create mode 100644 libs/design-system/buttons/navigation-toggle/ng-package.json
 create mode 100644 libs/design-system/buttons/navigation-toggle/src/index.ts
 rename libs/design-system/buttons/{navigation/src/lib/navigation-toggle => navigation-toggle/src/lib}/navigation-toggle.html (100%)
 rename libs/design-system/buttons/{navigation/src/lib/navigation-toggle => navigation-toggle/src/lib}/navigation-toggle.scss (91%)
 rename libs/design-system/buttons/{navigation/src/lib/navigation-toggle => navigation-toggle/src/lib}/navigation-toggle.spec.ts (100%)
 rename libs/design-system/buttons/{navigation/src/lib/navigation-toggle => navigation-toggle/src/lib}/navigation-toggle.stories.ts (89%)
 rename libs/design-system/buttons/{navigation/src/lib/navigation-toggle => navigation-toggle/src/lib}/navigation-toggle.ts (80%)
 create mode 100644 libs/design-system/buttons/navigation-toggle/src/lib/tokens.scss

diff --git a/libs/design-system/buttons/navigation-toggle/ng-package.json b/libs/design-system/buttons/navigation-toggle/ng-package.json
new file mode 100644
index 0000000..dc244f1
--- /dev/null
+++ b/libs/design-system/buttons/navigation-toggle/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "lib": {
+    "cssUrl": "inline",
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../../src/sass"]
+  }
+}
diff --git a/libs/design-system/buttons/navigation-toggle/src/index.ts b/libs/design-system/buttons/navigation-toggle/src/index.ts
new file mode 100644
index 0000000..b929bdf
--- /dev/null
+++ b/libs/design-system/buttons/navigation-toggle/src/index.ts
@@ -0,0 +1 @@
+export { NavigationToggle } from '../../navigation-toggle/src/lib/navigation-toggle';
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.html b/libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.html
similarity index 100%
rename from libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.html
rename to libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.html
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.scss b/libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.scss
similarity index 91%
rename from libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.scss
rename to libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.scss
index c852517..b938abe 100644
--- a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.scss
+++ b/libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.scss
@@ -1,9 +1,10 @@
 @use '@angular/material' as mat;
 @use 'internal/token-utils';
-@use '../tokens' as *;
+@use './tokens' as *;
 
 :host {
   display: block;
+  width: fit-content;
 
   @include mat.button-overrides(
     (
@@ -30,7 +31,7 @@
       outline: solid 0.125rem token-utils.slot(focus-outline-color, $config);
     }
 
-    :is(&.selected, &:hover, &:active, &:focus) {
+    :is(&.ang-navigation-toggle-selected, &:hover, &:active, &:focus-visible) {
       .ang-navigation-toggle-text {
         text-decoration: underline;
         text-underline-offset: 0.25rem;
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.spec.ts b/libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.spec.ts
similarity index 100%
rename from libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.spec.ts
rename to libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.spec.ts
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.stories.ts b/libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.stories.ts
similarity index 89%
rename from libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.stories.ts
rename to libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.stories.ts
index c89f23c..5437d43 100644
--- a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.stories.ts
+++ b/libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.stories.ts
@@ -3,7 +3,7 @@ import { NavigationToggle } from './navigation-toggle';
 
 const meta: Meta<NavigationToggle> = {
   component: NavigationToggle,
-  title: 'Design System/Buttons/Navigation/Navigation Toggle',
+  title: 'Design System/Buttons/Navigation Toggle',
   parameters: {
     design: {
       type: 'figma',
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.ts b/libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.ts
similarity index 80%
rename from libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.ts
rename to libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.ts
index 4ae9c64..526286d 100644
--- a/libs/design-system/buttons/navigation/src/lib/navigation-toggle/navigation-toggle.ts
+++ b/libs/design-system/buttons/navigation-toggle/src/lib/navigation-toggle.ts
@@ -10,11 +10,11 @@ import { TrackClick } from '@atlasng/analytics';
   styleUrl: './navigation-toggle.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[attr.selected]': 'selected()',
-    '(click)': 'selected.set(!selected())',
+    '[class.ang-navigation-toggle-selected]': 'selected()',
+    '(click)': 'selected.update(s => !s)',
   },
 })
 export class NavigationToggle {
   /** Whether the button is currently selected */
-  readonly selected = model<boolean>(false);
+  readonly selected = model(false);
 }
diff --git a/libs/design-system/buttons/navigation-toggle/src/lib/tokens.scss b/libs/design-system/buttons/navigation-toggle/src/lib/tokens.scss
new file mode 100644
index 0000000..48237ca
--- /dev/null
+++ b/libs/design-system/buttons/navigation-toggle/src/lib/tokens.scss
@@ -0,0 +1,19 @@
+@use 'internal/token-utils';
+
+$config: (
+  namespace: 'navigation',
+  tokens: (
+    label-color: token-utils.sys-token(on-surface),
+    icon-color: token-utils.sys-token(on-surface-variant),
+    underline-color: token-utils.sys-token(primary),
+    focus-outline-color: token-utils.sys-token(on-surface),
+    label-font: token-utils.sys-token(title-medium-font),
+    label-font-size: token-utils.sys-token(title-medium-size),
+    label-letter-spacing: token-utils.sys-token(title-medium-tracking),
+    label-font-weight: token-utils.sys-token(title-medium-weight),
+  ),
+);
+
+@mixin overrides($overrides) {
+  @include token-utils.apply-overrides($overrides, $config);
+}
diff --git a/libs/design-system/buttons/navigation/src/index.ts b/libs/design-system/buttons/navigation/src/index.ts
index 6d8635f..820fd64 100644
--- a/libs/design-system/buttons/navigation/src/index.ts
+++ b/libs/design-system/buttons/navigation/src/index.ts
@@ -1,2 +1 @@
 export { Navigation } from './lib/navigation';
-export { NavigationToggle } from './lib/navigation-toggle/navigation-toggle';
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.html b/libs/design-system/buttons/navigation/src/lib/navigation.html
index 664bfda..a3d130e 100644
--- a/libs/design-system/buttons/navigation/src/lib/navigation.html
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.html
@@ -1,3 +1,3 @@
-<button matButton angTrackClick class="ang-navigation-button" target="_blank" disableRipple [angAnyLink]="link()">
+<a matButton angTrackClick class="ang-navigation-button" target="_blank" disableRipple [angAnyLink]="link()">
   <span class="ang-navigation-text"><ng-content /></span>
-</button>
+</a>
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.scss b/libs/design-system/buttons/navigation/src/lib/navigation.scss
index 0332c89..be9c185 100644
--- a/libs/design-system/buttons/navigation/src/lib/navigation.scss
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.scss
@@ -4,6 +4,7 @@
 
 :host {
   display: block;
+  width: fit-content;
 
   @include mat.button-overrides(
     (
@@ -24,7 +25,7 @@
       outline: solid 0.125rem token-utils.slot(focus-outline-color, $config);
     }
 
-    :is(&:hover, &:active, &:focus) {
+    :is(&:hover, &:active, &:focus-visible) {
       .ang-navigation-text {
         text-decoration: underline;
         text-underline-offset: 0.25rem;
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.ts b/libs/design-system/buttons/navigation/src/lib/navigation.ts
index e0584b9..6f18f71 100644
--- a/libs/design-system/buttons/navigation/src/lib/navigation.ts
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.ts
@@ -12,5 +12,5 @@ import { AnyLink, AnyLinkCommand } from '@atlasng/common';
 })
 export class Navigation {
   /** The link to navigate to */
-  readonly link = input<AnyLinkCommand | null>(null);
+  readonly link = input<AnyLinkCommand>();
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 059f5b7..c8e67b6 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -29,8 +29,9 @@
       "@atlasng/core": ["./libs/core/src/index.ts"],
       "@atlasng/design-system": ["./libs/design-system/src/index.ts"],
       "@atlasng/design-system/buttons/help": ["./libs/design-system/buttons/help/src/index.ts"],
-      "@atlasng/design-system/buttons/navigation-category-toggle": [
-        "./libs/design-system/buttons/navigation-category-toggle/src/index.ts"
+      "@atlasng/design-system/buttons/navigation": ["./libs/design-system/buttons/navigation/src/index.ts"],
+      "@atlasng/design-system/buttons/navigation-toggle": [
+        "./libs/design-system/buttons/navigation-toggle/src/index.ts"
       ],
       "@atlasng/design-system/buttons/social-media": ["./libs/design-system/buttons/social-media/src/index.ts"],
       "@atlasng/design-system/indicators/end-of-results": [

From 5a19700ec4e6f18496ca074cfd6240131975171c Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Fri, 5 Jun 2026 12:38:11 -0400
Subject: [PATCH 8/9] test(design-system): test tweak

---
 .../buttons/navigation/src/lib/navigation.html         | 10 +++++++++-
 .../buttons/navigation/src/lib/navigation.spec.ts      |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.html b/libs/design-system/buttons/navigation/src/lib/navigation.html
index a3d130e..4453b9c 100644
--- a/libs/design-system/buttons/navigation/src/lib/navigation.html
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.html
@@ -1,3 +1,11 @@
-<a matButton angTrackClick class="ang-navigation-button" target="_blank" disableRipple [angAnyLink]="link()">
+<a
+  matButton
+  angTrackClick
+  class="ang-navigation-button"
+  role="link"
+  target="_blank"
+  disableRipple
+  [angAnyLink]="link()"
+>
   <span class="ang-navigation-text"><ng-content /></span>
 </a>
diff --git a/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts b/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts
index 3d1e996..2f558b4 100644
--- a/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts
+++ b/libs/design-system/buttons/navigation/src/lib/navigation.spec.ts
@@ -13,7 +13,7 @@ describe('Navigation', () => {
       },
     });
 
-    const button = screen.getByRole('button', { name: 'Go to Docs' });
+    const button = screen.getByRole('link', { name: 'Go to Docs' });
 
     return {
       user,

From 2fc1ad4e5078910a9a2609d152e209e845d70656 Mon Sep 17 00:00:00 2001
From: "nx-cloud[bot]" <71083854+nx-cloud[bot]@users.noreply.github.com>
Date: Fri, 5 Jun 2026 16:45:46 +0000
Subject: [PATCH 9/9] fix(design-system): fix navigation-toggle entry point
 export path

Co-authored-by: edlu77 <edlu77@users.noreply.github.com>
---
 libs/design-system/buttons/navigation-toggle/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/design-system/buttons/navigation-toggle/src/index.ts b/libs/design-system/buttons/navigation-toggle/src/index.ts
index b929bdf..bbdd2d1 100644
--- a/libs/design-system/buttons/navigation-toggle/src/index.ts
+++ b/libs/design-system/buttons/navigation-toggle/src/index.ts
@@ -1 +1 @@
-export { NavigationToggle } from '../../navigation-toggle/src/lib/navigation-toggle';
+export { NavigationToggle } from './lib/navigation-toggle';