test: ✅ Moved tests into pathogen demo and updated selectors

embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb

@@ -12,8 +12,8 @@ class TabsPanel < Pathogen::Component
 
     BODY_TAG_DEFAULT = :ul
     BODY_DEFAULT_CLASSES = 'flex flex-wrap text-sm font-medium text-center ' \
-                           'text-slate-500 border-b border-slate-200 ' \
-                           'dark:border-slate-700 dark:text-slate-400'
+                           'text-light-default border-b border-light-neutral-secondary ' \
+                           'dark:border-dark-neutral-primary dark:text-dark-default'
     renders_many :tabs, lambda { |count: nil, selected: false, **system_arguments|
       Pathogen::TabsPanel::Tab.new(
         selected: selected,

embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb

@@ -36,6 +36,7 @@ def initialize(controls:, tab_type:, selected: false, text: '', wrapper_argument
         @system_arguments[:'aria-current'] = @selected ? 'page' : 'false'
         @system_arguments[:classes] = generate_tab_classes
         @system_arguments[:'aria-controls'] = @controls
+        @system_arguments[:'aria-selected'] = @selected
       end
       # rubocop:enable Metrics/ParameterLists
 
@@ -55,7 +56,7 @@ def default_tab_classes
             'rounded-t-lg active dark:bg-dark-neutral-primary dark:text-dark-brand-onneutral'
         else
           'inline-block p-4 rounded-t-lg hover:text-light-neutral-emphasis ' \
-            'hover:bg-slate-50 dark:hover:bg-slate-800 dark:hover:text-slate-300'
+            'hover:bg-light-default dark:hover:bg-dark-neutral-primary-hover dark:hover:text-dark-onneutral-primary'
         end
       end
 

test/components/pathogen/base_button_test.rb → embedded_gems/pathogen/demo/test/components/base_button_test.rb

@@ -3,40 +3,41 @@
 require 'test_helper'
 
 module Pathogen
+  # Test for the BaseButton component
   class BaseButtonTest < ViewComponent::TestCase
     def test_renders_default_button
-      render_inline(BaseButton.new) { 'Click me' }
+      render_inline(Pathogen::BaseButton.new) { 'Click me' }
 
       assert_selector "button[type='button']", text: 'Click me'
     end
 
     def test_renders_anchor_tag
-      render_inline(BaseButton.new(tag: :a)) { 'Click me' }
+      render_inline(Pathogen::BaseButton.new(tag: :a)) { 'Click me' }
 
       assert_selector 'a', text: 'Click me'
       refute_selector 'a[type]' # Ensure type is not set on anchor tags
     end
 
     def test_renders_submit_button
-      render_inline(BaseButton.new(type: :submit)) { 'Submit' }
+      render_inline(Pathogen::BaseButton.new(type: :submit)) { 'Submit' }
 
       assert_selector "button[type='submit']", text: 'Submit'
     end
 
     def test_renders_reset_button
-      render_inline(BaseButton.new(type: :reset)) { 'Reset' }
+      render_inline(Pathogen::BaseButton.new(type: :reset)) { 'Reset' }
 
       assert_selector "button[type='reset']", text: 'Reset'
     end
 
     def test_handles_disabled_state
-      render_inline(BaseButton.new(disabled: true)) { 'Disabled' }
+      render_inline(Pathogen::BaseButton.new(disabled: true)) { 'Disabled' }
 
       assert_selector 'button[disabled]', text: 'Disabled'
     end
 
     def test_converts_disabled_anchor_to_button
-      render_inline(BaseButton.new(tag: :a, disabled: true)) { 'Disabled Link' }
+      render_inline(Pathogen::BaseButton.new(tag: :a, disabled: true)) { 'Disabled Link' }
 
       assert_selector 'button[disabled]', text: 'Disabled Link'
       refute_selector 'a' # Ensure it's not an anchor

test/components/pathogen/button_test.rb → embedded_gems/pathogen/demo/test/components/button_test.rb

@@ -19,7 +19,12 @@ class ButtonTest < ViewComponent::TestCase
         c.with_leading_visual_icon(icon: 'arrow-right')
       end
       render_inline(component) { 'Button' }
-      assert_selector 'button[data-test-selector="playground"]:not([disabled])', count: 1, visible: true, text: 'Button'
+      assert_selector(
+        'button[data-test-selector="playground"]:not([disabled])',
+        count: 1,
+        visible: true,
+        text: 'Button'
+      )
       assert_selector 'button svg.leading_visual_icon', count: 1
     end
 
@@ -28,7 +33,12 @@ class ButtonTest < ViewComponent::TestCase
         c.with_trailing_visual_icon(icon: 'arrow-right')
       end
       render_inline(component) { 'Button' }
-      assert_selector 'button[data-test-selector="playground"]:not([disabled])', count: 1, visible: true, text: 'Button'
+      assert_selector(
+        'button[data-test-selector="playground"]:not([disabled])',
+        count: 1,
+        visible: true,
+        text: 'Button'
+      )
       assert_selector 'button svg.trailing_visual_icon', count: 1
     end
 
@@ -38,13 +48,24 @@ class ButtonTest < ViewComponent::TestCase
     end
 
     test 'button with aria attributes' do
-      render_inline(Pathogen::Button.new(test_selector: 'playground', aria: { label: 'Custom Label', expanded: true })) { 'Button' }
-      assert_selector 'button[data-test-selector="playground"][aria-label="Custom Label"][aria-expanded="true"]', count: 1, visible: true, text: 'Button'
+      render_inline(
+        Pathogen::Button.new(
+          test_selector: 'playground',
+          aria: { label: 'Custom Label', expanded: true }
+        )
+      ) { 'Button' }
+      assert_selector(
+        'button[data-test-selector="playground"][aria-label="Custom Label"][aria-expanded="true"]',
+        count: 1,
+        visible: true,
+        text: 'Button'
+      )
     end
 
     test 'button as a link' do
       render_inline(Pathogen::Button.new(test_selector: 'playground', tag: :a, href: '/example')) { 'Link Button' }
-      assert_selector 'a[data-test-selector="playground"][href="/example"]', count: 1, visible: true, text: 'Link Button'
+      assert_selector 'a[data-test-selector="playground"][href="/example"]', count: 1, visible: true,
+                                                                             text: 'Link Button'
     end
   end
 end

embedded_gems/pathogen/demo/test/components/tabs_panel_test.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+module Pathogen
+  # Test for the TabsPanel component
+  class TabsPanelTest < ViewComponent::TestCase
+    test 'default panel' do
+      tabs_component = Pathogen::TabsPanel.new(id: 'test_panel', test_selector: 'test_panel').tap do |tabs|
+        tabs.with_tab(selected: true, href: '#', text: 'Tab 1')
+        tabs.with_tab(selected: false, href: '#', text: 'Tab 2')
+        tabs.with_tab(selected: false, href: '#', text: 'Tab 3')
+      end
+      render_inline(tabs_component)
+
+      assert_selector 'nav[data-test-selector="test_panel"]'
+      assert_selector 'ul[role="tablist"]', count: 1
+      assert_selector 'li', count: 3
+      assert_selector 'a[aria-current="page"][aria-selected="true"]', text: 'Tab 1'
+      assert_selector 'a[aria-selected="false"]', text: 'Tab 2'
+      assert_selector 'a[aria-selected="false"]', text: 'Tab 3'
+    end
+
+    test 'default panel with counts' do
+      tabs_component = Pathogen::TabsPanel.new(id: 'test_panel', test_selector: 'test_panel').tap do |tabs|
+        tabs.with_tab(selected: true, href: '#', text: 'Tab 1') do |tab|
+          tab.with_count(count: 1)
+        end
+        tabs.with_tab(selected: false, href: '#', text: 'Tab 2') do |tab|
+          tab.with_count(count: 10)
+        end
+        tabs.with_tab(selected: false, href: '#', text: 'Tab 3') do |tab|
+          tab.with_count(count: 100)
+        end
+      end
+      render_inline(tabs_component)
+
+      # Selected tab
+      assert_selector 'a[aria-selected="true"] span', text: '1'
+
+      # Unselected tabs
+      assert_selector 'a[aria-selected="false"] span', text: '10'
+      assert_selector 'a[aria-selected="false"] span', text: '100'
+    end
+
+    test 'underline panel' do
+      tabs_component = Pathogen::TabsPanel.new(id: 'test_panel', test_selector: 'test_panel',
+                                               type: 'underline').tap do |tabs|
+        tabs.with_tab(selected: true, href: '#', text: 'Tab 1')
+        tabs.with_tab(selected: false, href: '#', text: 'Tab 2')
+        tabs.with_tab(selected: false, href: '#', text: 'Tab 3')
+      end
+      render_inline(tabs_component)
+
+      assert_selector 'nav[id="test_panel"]'
+      assert_selector 'ul[role="tablist"]', count: 1
+      assert_selector 'li', count: 3
+      assert_selector 'a[aria-selected="true"]', text: 'Tab 1'
+      assert_selector 'a[aria-selected="false"]', text: 'Tab 2'
+      assert_selector 'a[aria-selected="false"]', text: 'Tab 3'
+    end
+
+    test 'underline panel with counts' do
+      tabs_component = Pathogen::TabsPanel.new(id: 'test_panel', test_selector: 'test_panel',
+                                               type: 'underline').tap do |tabs|
+        tabs.with_tab(selected: true, href: '#', text: 'Tab 1') do |tab|
+          tab.with_count(count: 1)
+        end
+        tabs.with_tab(selected: false, href: '#', text: 'Tab 2') do |tab|
+          tab.with_count(count: 10)
+        end
+        tabs.with_tab(selected: false, href: '#', text: 'Tab 3') do |tab|
+          tab.with_count(count: 100)
+        end
+      end
+      render_inline(tabs_component)
+
+      # Selected tab
+      assert_selector 'a[aria-selected="true"] span', text: '1'
+
+      # Unselected tabs
+      assert_selector 'a[aria-selected="false"] span', text: '10'
+      assert_selector 'a[aria-selected="false"] span', text: '100'
+    end
+  end
+end

embedded_gems/pathogen/tailwind.config.js

@@ -59,6 +59,7 @@ module.exports = {
         // Light mode
         "light-brand-primary": globalColors.brand[600],
         "light-neutral-primary": globalColors.neutral[400],
+        "light-neutral-secondary": globalColors.neutral[200],
         "light-danger-primary": globalColors.danger[400],
 
         // Dark mode