sphinx-filter-tabs 0.8.0__py3-none-any.whl → 1.2.0__py3-none-any.whl

filter_tabs/extension.py

@@ -1,429 +1,464 @@
-#
-# extension.py: The core logic for the sphinx-filter-tabs Sphinx extension.
-#
+# filter_tabs/extension.py
+"""
+Core extension module for sphinx-filter-tabs.
+Consolidated version containing directives, data models, nodes, and Sphinx integration.
+"""
 
-# --- Imports ---
-# Ensures that all type hints are treated as forward references, which is standard practice.
 from __future__ import annotations
-
-import re
-import uuid
 import copy
 import shutil
 from pathlib import Path
 from docutils import nodes
-from docutils.parsers.rst import Directive
+from docutils.parsers.rst import Directive, directives
 from sphinx.application import Sphinx
 from sphinx.util import logging
 from sphinx.writers.html import HTML5Translator
 
-# Used for type hinting to avoid circular imports and improve code clarity.
-from typing import TYPE_CHECKING, Any, Dict, List
-
-# Imports the package version, dynamically read from the installed package's metadata.
+from typing import TYPE_CHECKING, Any, Dict, List, Optional
+from dataclasses import dataclass, field
 from . import __version__
 
-# A block that only runs when a type checker is running, not at runtime.
-# This avoids potential runtime errors from importing types that may not be available.
 if TYPE_CHECKING:
-    from sphinx.config import Config
     from sphinx.environment import BuildEnvironment
 
-# --- Constants ---
-# A dedicated UUID namespace ensures that the same tab name will always produce
-# the same unique identifier. This is a crucial security measure to prevent CSS injection.
-_CSS_NAMESPACE = uuid.UUID('d1b1b3e8-5e7c-48d6-a235-9a4c14c9b139')
-
-# Centralizing CSS class names makes them easy to manage and prevents typos.
-SFT_CONTAINER = "sft-container"
-SFT_FIELDSET = "sft-fieldset"
-SFT_LEGEND = "sft-legend"
-SFT_TAB_BAR = "sft-tab-bar"
-SFT_CONTENT = "sft-content"
-SFT_PANEL = "sft-panel"
-SFT_TEMP_PANEL = "sft-temp-panel"
-COLLAPSIBLE_SECTION = "collapsible-section"
-COLLAPSIBLE_CONTENT = "collapsible-content"
-CUSTOM_ARROW = "custom-arrow"
-
-# --- Logger ---
-# A dedicated logger for this extension, following Sphinx's best practices.
-# This allows for clean, configurable logging output.
-logger = logging.getLogger(__name__)
-
-# --- Custom Nodes ---
-# Each custom node corresponds to a specific part of the component's HTML structure.
-# This allows for fine-grained control over the final HTML output via visitor functions.
+# =============================================================================
+# Custom Docutils Nodes
+# =============================================================================
 
-# The ContainerNode is essential for applying CSS Custom Properties via the 'style' attribute.
-# The default docutils container doesn't reliably render the style attribute, so this
-# custom node and its visitor function ensure the theming mechanism works correctly.
-class ContainerNode(nodes.General, nodes.Element):
-    pass
+class ContainerNode(nodes.General, nodes.Element): pass
+class FieldsetNode(nodes.General, nodes.Element): pass
+class LegendNode(nodes.General, nodes.Element): pass
+class RadioInputNode(nodes.General, nodes.Element): pass
+class LabelNode(nodes.General, nodes.Element): pass
+class PanelNode(nodes.General, nodes.Element): pass
+class DetailsNode(nodes.General, nodes.Element): pass
+class SummaryNode(nodes.General, nodes.Element): pass
 
-class FieldsetNode(nodes.General, nodes.Element): pass # For semantic grouping.
-class LegendNode(nodes.General, nodes.Element): pass # For accessibility.
-class RadioInputNode(nodes.General, nodes.Element): pass # The functional core for tab switching.
-class LabelNode(nodes.General, nodes.Element): pass # The visible, clickable tab titles.
-class PanelNode(nodes.General, nodes.Element): pass # The containers for tab content.
-class DetailsNode(nodes.General, nodes.Element): pass # For collapsible sections.
-class SummaryNode(nodes.General, nodes.Element): pass # The clickable title of a collapsible section.
 
+# =============================================================================
+# Data Models and Configuration
+# =============================================================================
 
-# --- Renderer Class ---
-class FilterTabsRenderer:
+@dataclass
+class TabData:
     """
-    Handles the primary logic of converting the parsed directive content
-    into a final node structure for both HTML and fallback formats (like LaTeX).
+    Represents a single tab's data within a filter-tabs directive.
+    
+    Attributes:
+        name: Display name of the tab
+        is_default: Whether this tab should be selected by default
+        aria_label: Optional ARIA label for accessibility
+        content: List of docutils nodes containing the tab's content
     """
-    def __init__(self, directive: Directive, tab_names: list[str], default_tab: str, temp_blocks: list[nodes.Node]):
-        """Initializes the renderer with all necessary context from the directive."""
-        self.directive: Directive = directive
-        self.env: BuildEnvironment = directive.state.document.settings.env
-        self.tab_names: list[str] = tab_names
-        self.default_tab: str = default_tab
-        self.temp_blocks: list[nodes.Node] = temp_blocks
-
-    def render_html(self) -> list[nodes.Node]:
-        """Constructs the complete, W3C valid, and ARIA-compliant docutils node tree."""
-        # Ensure a unique ID for each filter-tabs instance on a page.
-        if not hasattr(self.env, 'filter_tabs_counter'):
-            self.env.filter_tabs_counter = 0
-        self.env.filter_tabs_counter += 1
-        group_id = f"filter-group-{self.env.filter_tabs_counter}"
-
-        config = self.env.app.config
-
-        # Create a dictionary of CSS Custom Properties from conf.py settings.
-        style_vars = {
-            "--sft-border-radius": str(config.filter_tabs_border_radius),
-            "--sft-tab-background": str(config.filter_tabs_tab_background_color),
-            "--sft-tab-font-size": str(config.filter_tabs_tab_font_size),
-            "--sft-tab-highlight-color": str(config.filter_tabs_tab_highlight_color),
-            "--sft-collapsible-accent-color": str(config.filter_tabs_collapsible_accent_color),
-        }
-        style_string = "; ".join([f"{key}: {value}" for key, value in style_vars.items()])
-
-        # If debug mode is on, log the generated ID and styles.
-        if config.filter_tabs_debug_mode:
-            logger.info(f"[sphinx-filter-tabs] ID: {group_id}, Styles: '{style_string}'")
-
-        # Create the main container node with the inline style for theming.
-        container = ContainerNode(classes=[SFT_CONTAINER], style=style_string)
-
-        # Build the semantic structure using fieldset and a hidden legend.
-        fieldset = FieldsetNode()
-        legend = LegendNode()
-        legend += nodes.Text(f"Filter by: {', '.join(self.tab_names)}")
-        fieldset += legend
-        
-        # --- CSS Generation ---
-        # This generates the dynamic CSS that handles the core filtering logic.
-        css_rules = []
-        for tab_name in self.tab_names:
-            radio_id = f"{group_id}-{self._css_escape(tab_name)}"
-            panel_id = f"{radio_id}-panel"
-            # This rule finds the tab bar that contains the checked radio button,
-            # then finds its sibling content area and shows the correct panel inside.
-            css_rules.append(
-                f".{SFT_TAB_BAR}:has(#{radio_id}:checked) ~ .sft-content > #{panel_id} {{ display: block; }}"
-            )
-        
-        # Write the dynamic CSS to a temporary file and add it to the build.
-        css_content = ''.join(css_rules)
-        static_dir = Path(self.env.app.outdir) / '_static'
-        static_dir.mkdir(parents=True, exist_ok=True)
-        css_filename = f"dynamic-filter-tabs-{group_id}.css"
-        (static_dir / css_filename).write_text(css_content, encoding='utf-8')
-        self.env.app.add_css_file(css_filename)
-
-        # --- ARIA-Compliant HTML Structure ---
-        # The tab bar container now gets the role="tablist".
-        tab_bar = nodes.container(classes=[SFT_TAB_BAR], role='tablist')
-        fieldset += tab_bar
-
-        # The content area holds all the panels.
-        content_area = nodes.container(classes=[SFT_CONTENT])
-        fieldset += content_area
-
-        # Map tab names to their content blocks for easy lookup.
-        content_map = {block['filter-name']: block.children for block in self.temp_blocks}
+    name: str
+    is_default: bool = False
+    aria_label: Optional[str] = None
+    content: List[nodes.Node] = field(default_factory=list)
+    
+    def __post_init__(self):
+        """Validate tab data after initialization."""
+        if not self.name:
+            raise ValueError("Tab name cannot be empty")
         
-        # 1. Create all radio buttons and labels first and add them to the tab_bar.
-        for i, tab_name in enumerate(self.tab_names):
-            radio_id = f"{group_id}-{self._css_escape(tab_name)}"
-            panel_id = f"{radio_id}-panel"
+        # Ensure content is a list
+        if self.content is None:
+            self.content = []
 
-            # The radio button is for state management.
-            radio = RadioInputNode(type='radio', name=group_id, ids=[radio_id])
-            
-            is_default = (self.default_tab == tab_name) or (i == 0 and not self.default_tab)
-            if is_default:
-                radio['checked'] = 'checked'
-            tab_bar += radio
-
-            # The label is the visible tab. It gets role="tab" and aria-controls.
-            label = LabelNode(for_id=radio_id, role='tab', **{'aria-controls': panel_id})
-            if is_default:
-                label['aria-selected'] = 'true'
-            label += nodes.Text(tab_name)
-            tab_bar += label
-
-        # 2. Create all tab panels and add them to the content_area.
-        all_tab_names = ["General"] + self.tab_names
-        for tab_name in all_tab_names:
-            # The "General" panel does not correspond to a specific tab control.
-            if tab_name == "General":
-                panel = PanelNode(classes=[SFT_PANEL], **{'data-filter': tab_name})
-            else:
-                radio_id = f"{group_id}-{self._css_escape(tab_name)}"
-                panel_id = f"{radio_id}-panel"
-                # The panel gets role="tabpanel" and is linked back to the label.
-                panel = PanelNode(classes=[SFT_PANEL], ids=[panel_id], role='tabpanel', **{'aria-labelledby': radio_id})
 
-            if tab_name in content_map:
-                panel.extend(copy.deepcopy(content_map[tab_name]))
-            content_area += panel
+@dataclass
+class FilterTabsConfig:
+    """
+    Simplified configuration settings for filter-tabs rendering.
+    Reduced from 9 options to 2 essential ones.
+    """
+    # Essential theming - only the highlight color is commonly customized
+    highlight_color: str = '#007bff'
+    
+    # Development option
+    debug_mode: bool = False
+    
+    @classmethod
+    def from_sphinx_config(cls, app_config) -> 'FilterTabsConfig':
+        """Create a FilterTabsConfig from Sphinx app.config."""
+        return cls(
+            highlight_color=getattr(
+                app_config, 'filter_tabs_highlight_color', cls.highlight_color
+            ),
+            debug_mode=getattr(
+                app_config, 'filter_tabs_debug_mode', cls.debug_mode
+            ),
+        )
+    
+    def to_css_properties(self) -> str:
+        """Convert config to CSS custom properties string."""
+        # Generate CSS variables - the highlight color drives all other colors
+        return f"--sft-highlight-color: {self.highlight_color};"
+
+
+@dataclass
+class IDGenerator:
+    """
+    Centralized ID generation for consistent element identification.
+    
+    This ensures all IDs follow a consistent pattern and are unique
+    within their filter-tabs group.
+    """
+    group_id: str
+    
+    def radio_id(self, index: int) -> str:
+        """Generate ID for a radio button."""
+        return f"{self.group_id}-radio-{index}"
+    
+    def panel_id(self, index: int) -> str:
+        """Generate ID for a content panel."""
+        return f"{self.group_id}-panel-{index}"
+    
+    def desc_id(self, index: int) -> str:
+        """Generate ID for a screen reader description."""
+        return f"{self.group_id}-desc-{index}"
+    
+    def legend_id(self) -> str:
+        """Generate ID for the fieldset legend."""
+        return f"{self.group_id}-legend"
+    
+    def label_id(self, index: int) -> str:
+        """Generate ID for a label (if needed)."""
+        return f"{self.group_id}-label-{index}"
+
+
+# =============================================================================
+# Directive Classes
+# =============================================================================
 
-        container.children = [fieldset]
-        return [container]
+# --- Constants ---
+COLLAPSIBLE_SECTION = "collapsible-section"
+COLLAPSIBLE_CONTENT = "collapsible-content"
+CUSTOM_ARROW = "custom-arrow"
 
-    def render_fallback(self) -> list[nodes.Node]:
-        """Renders content as a series of simple admonitions for non-HTML builders (e.g., LaTeX/PDF)."""
-        output_nodes: list[nodes.Node] = []
-        content_map = {block['filter-name']: block.children for block in self.temp_blocks}
-        # "General" content is rendered first, without a title.
-        if "General" in content_map:
-            output_nodes.extend(copy.deepcopy(content_map["General"]))
-        # Each specific tab's content is placed inside a titled admonition block.
-        for tab_name in self.tab_names:
-            if tab_name in content_map:
-                admonition = nodes.admonition()
-                admonition += nodes.title(text=tab_name)
-                admonition.extend(copy.deepcopy(content_map[tab_name]))
-                output_nodes.append(admonition)
-        return output_nodes
-
-    @staticmethod
-    def _css_escape(name: str) -> str:
-        """
-        Generates a deterministic, CSS-safe identifier from any given tab name string.
-        This uses uuid.uuid5 to create a hashed value, which robustly prevents
-        CSS injection vulnerabilities that could arise from special characters in tab names.
-        """
-        return str(uuid.uuid5(_CSS_NAMESPACE, name.strip().lower()))
+logger = logging.getLogger(__name__)
 
 
 class TabDirective(Directive):
-    """Handles the `.. tab::` directive, capturing its content."""
+    """Handles the `.. tab::` directive, capturing its content and options."""
     has_content = True
     required_arguments = 1
     final_argument_whitespace = True
+    option_spec = {'aria-label': directives.unchanged}
 
     def run(self) -> list[nodes.Node]:
-        """
-        Parses the content of a tab and stores it in a temporary container.
-        This method validates that the directive is used within a `filter-tabs` block.
-        """
+        """Process the tab directive and return container node."""
         env = self.state.document.settings.env
-        # Ensure `tab` is only used inside `filter-tabs`.
+        
+        # Validate context
         if not hasattr(env, 'sft_context') or not env.sft_context:
-            raise self.error("`tab` can only be used inside a `filter-tabs` directive.")
-        # Store the tab name and parsed content in a temporary node.
-        container = nodes.container(classes=[SFT_TEMP_PANEL])
-        container['filter-name'] = self.arguments[0].strip()
+           raise self.error("`tab` can only be used inside a `filter-tabs` directive.")
+        
+        # Parse tab argument - moved from parsers.py
+        try:
+            tab_name, is_default = self._parse_tab_argument(self.arguments[0])
+        except ValueError as e:
+            raise self.error(f"Invalid tab argument: {e}")
+        
+        # Create container with parsed data
+        container = nodes.container(classes=["sft-temp-panel"])
+        container['filter_name'] = tab_name
+        container['is_default'] = is_default
+        container['aria_label'] = self.options.get('aria-label', None)
+        
+        # Parse the content
         self.state.nested_parse(self.content, self.content_offset, container)
+        
         return [container]
+    
+    def _parse_tab_argument(self, argument: str) -> tuple[str, bool]:
+        """Parse a tab argument string to extract name and default status."""
+        import re
+        
+        logger.debug(f"Parsing tab argument: '{argument}'")
+        if not argument:
+            raise ValueError("Tab argument cannot be empty")
+        
+        lines = argument.strip().split('\n')
+        first_line = lines[0].strip()
+        
+        if len(lines) > 1:
+            logger.debug(
+                f"Tab argument contains multiple lines, using only first: '{first_line}'"
+            )
+        
+        DEFAULT_PATTERN = re.compile(r"^(.*?)\s*\(\s*default\s*\)$", re.IGNORECASE)
+        match = DEFAULT_PATTERN.match(first_line)
+        if match:
+            tab_name = match.group(1).strip()
+            if not tab_name:
+                raise ValueError("Tab name cannot be empty")
+            return tab_name, True
+        
+        return first_line, False
 
 
 class FilterTabsDirective(Directive):
-    """Handles the main `.. filter-tabs::` directive, which orchestrates the entire component."""
+    """Handles the main `.. filter-tabs::` directive."""
     has_content = True
-    required_arguments = 1
-    final_argument_whitespace = True
+    required_arguments = 0
+    optional_arguments = 0
+    option_spec = {'legend': directives.unchanged}
 
     def run(self) -> list[nodes.Node]:
-        """
-        Parses the list of tabs, manages the parsing context for its content,
-        and delegates the final rendering to the FilterTabsRenderer.
-        """
+        """Process the filter-tabs directive."""
         env = self.state.document.settings.env
         
-        # Remove comments to prevent nesting of filter-tabs directives.
-        #if hasattr(env, 'sft_context') and env.sft_context:
-        #    raise self.error("Nesting `filter-tabs` is not supported.")
-
-        # Set a context flag to indicate that we are inside a filter-tabs block.
+        # Set up context
         if not hasattr(env, 'sft_context'):
             env.sft_context = []
         env.sft_context.append(True)
 
-        # Parse the content of the directive to find all `.. tab::` blocks.
+        # Parse content
         temp_container = nodes.container()
         self.state.nested_parse(self.content, self.content_offset, temp_container)
-        env.sft_context.pop() # Unset the context flag.
-
-        # Find all the temporary panel nodes created by the TabDirective.
-        temp_blocks = temp_container.findall(lambda n: isinstance(n, nodes.Element) and SFT_TEMP_PANEL in n.get('classes', []))
-        if not temp_blocks:
-            # Raise a clear error if the directive is empty, instead of failing silently.
-            self.error("No `.. tab::` directives found inside `filter-tabs`. Content will not be rendered.")
-            return []
-
-        # Parse the tab names from the directive's arguments.
-        tabs_raw = [t.strip() for t in self.arguments[0].split(',')]
-        tab_names_only = [re.sub(r'\s*\(\s*default\s*\)$', '', t, re.IGNORECASE).strip() for t in tabs_raw]
-
-        if len(set(tab_names_only)) != len(tab_names_only):
-            raise self.error(f"Duplicate tab names found: {tab_names_only}")
-
-        # Identify the default tab.
-        default_tab, tab_names = "", []
-        for tab in tabs_raw:
-            match = re.match(r"^(.*?)\s*\(\s*default\s*\)$", tab, re.IGNORECASE)
-            tab_name = match.group(1).strip() if match else tab
-            if match and not default_tab:
-                default_tab = tab_name
-            tab_names.append(tab_name)
-
-        # If no default is specified, the first tab becomes the default.
-        if not default_tab and tab_names:
-            default_tab = tab_names[0]
-
-        # Instantiate the renderer and call the appropriate render method based on the builder.
-        renderer = FilterTabsRenderer(self, tab_names, default_tab, temp_blocks)
+        
+        env.sft_context.pop()
+        
+        # Get the custom legend option
+        custom_legend = self.options.get('legend')
+
+        # Separate general content from tabs using TabData
+        general_content = []
+        tab_data_list: List[TabData] = []
+        
+        for node in temp_container.children:
+            if isinstance(node, nodes.Element) and "sft-temp-panel" in node.get('classes', []):
+                # Create TabData object instead of dictionary
+                tab_data = TabData(
+                    name=node.get('filter_name', 'Unknown'),
+                    is_default=node.get('is_default', False),
+                    aria_label=node.get('aria_label', None),
+                    content=list(node.children)
+                )
+                tab_data_list.append(tab_data)
+            else:
+                general_content.append(node)
+        
+        # Validate tabs - moved from parsers.py
+        if not tab_data_list:
+            error_message = (
+                "No `.. tab::` directives found inside `.. filter-tabs::`. "
+                "You must include at least one tab."
+            )
+            if general_content:
+                error_message += (
+                    " Some content was found, but it was not part of a `.. tab::` block."
+                )
+            raise self.error(error_message)
+
+        try:
+            self._validate_tabs(tab_data_list, skip_empty_check=True)
+        except ValueError as e:
+            raise self.error(str(e))
+        
+        # Set first tab as default if none specified
+        if not any(tab.is_default for tab in tab_data_list):
+            tab_data_list[0].is_default = True
+        
+        # Import renderer here to avoid circular imports
+        from .renderer import FilterTabsRenderer
+        renderer = FilterTabsRenderer(self, tab_data_list, general_content, custom_legend=custom_legend)
+        
+        # Render based on builder
         if env.app.builder.name == 'html':
             return renderer.render_html()
         else:
             return renderer.render_fallback()
+    
+    def _validate_tabs(self, tab_data_list: List[TabData], skip_empty_check: bool = False) -> None:
+        """Validate tab data list - moved from parsers.py"""
+        if not tab_data_list and not skip_empty_check:
+            raise ValueError(
+                "No tab directives found inside filter-tabs. "
+                "Add at least one .. tab:: directive."
+            )
+        names = []
+        for tab in tab_data_list:
+            name = tab.name
+            if name in names:
+                raise ValueError(
+                    f"Duplicate tab name '{name}'. Each tab must have a unique name."
+                )
+            names.append(name)
+            if not tab.content:
+                logger.warning(f"Tab '{name}' has no content.")    
+        
+        default_count = 0
+        default_names = []
+        for tab in tab_data_list:
+            if tab.is_default:
+                default_count += 1
+                default_names.append(tab.name)
+        
+        if default_count > 1:
+            logger.warning(
+                f"Multiple tabs marked as default: {', '.join(default_names)}. "
+                f"Using first default: '{default_names[0]}'"
+            )
+
 
+# =============================================================================
+# Collapsible Admonitions Support
+# =============================================================================
 
 def setup_collapsible_admonitions(app: Sphinx, doctree: nodes.document, docname: str):
-    """
-    Finds any admonition with the `:class: collapsible` option and transforms it
-    into an HTML `<details>`/`<summary>` element for a native collapsible effect.
-    This hook runs after the document tree is resolved.
-    """
-    if not app.config.filter_tabs_collapsible_enabled or app.builder.name != 'html':
+    """Convert admonitions with 'collapsible' class to details/summary elements."""
+    # Simplified: always enabled for HTML builds, no config needed
+    if app.builder.name != 'html':
         return
-
-    # Iterate over a copy of the list of nodes to allow for safe modification.
+        
     for node in list(doctree.findall(nodes.admonition)):
         if 'collapsible' not in node.get('classes', []):
             continue
-
+            
         is_expanded = 'expanded' in node.get('classes', [])
         title_node = next(iter(node.findall(nodes.title)), None)
         summary_text = title_node.astext() if title_node else "Details"
+        
         if title_node:
-            title_node.parent.remove(title_node) # Remove the old title.
+            title_node.parent.remove(title_node)
 
-        # Create the new <details> node.
         details_node = DetailsNode(classes=[COLLAPSIBLE_SECTION])
         if is_expanded:
             details_node['open'] = 'open'
-
-        # Create the new <summary> node with a custom arrow.
+        
         summary_node = SummaryNode()
         arrow_span = nodes.inline(classes=[CUSTOM_ARROW])
-        arrow_span += nodes.Text("►")
+        arrow_span += nodes.Text("▶")
         summary_node += arrow_span
         summary_node += nodes.Text(summary_text)
         details_node += summary_node
-
-        # Move the original content of the admonition into a new container.
+        
         content_node = nodes.container(classes=[COLLAPSIBLE_CONTENT])
         content_node.extend(copy.deepcopy(node.children))
         details_node += content_node
-        # Replace the original admonition node with the new details node.
+        
         node.replace_self(details_node)
 
+
+# =============================================================================
+# HTML Visitor Functions
+# =============================================================================
+
 def _get_html_attrs(node: nodes.Element) -> Dict[str, Any]:
-    """Helper to get a clean dictionary of HTML attributes from a docutils node."""
+    """Extract HTML attributes from a docutils node, excluding internal attributes."""
     attrs = node.attributes.copy()
-    # Remove docutils-internal attributes to avoid rendering them in the HTML.
     for key in ('ids', 'backrefs', 'dupnames', 'names', 'classes', 'id', 'for_id'):
         attrs.pop(key, None)
     return attrs
 
-# --- HTML Visitor Functions ---
-# These functions translate the custom docutils nodes into HTML tags.
 
 def visit_container_node(self: HTML5Translator, node: ContainerNode) -> None:
     self.body.append(self.starttag(node, 'div', **_get_html_attrs(node)))
+
 def depart_container_node(self: HTML5Translator, node: ContainerNode) -> None:
     self.body.append('</div>')
 
 def visit_fieldset_node(self: HTML5Translator, node: FieldsetNode) -> None:
-    self.body.append(self.starttag(node, 'fieldset', CLASS=SFT_FIELDSET))
+    attrs = _get_html_attrs(node)
+    if 'role' in node.attributes:
+        attrs['role'] = node['role']
+    self.body.append(self.starttag(node, 'fieldset', CLASS="sft-fieldset", **attrs))
+
 def depart_fieldset_node(self: HTML5Translator, node: FieldsetNode) -> None:
     self.body.append('</fieldset>')
 
 def visit_legend_node(self: HTML5Translator, node: LegendNode) -> None:
-    self.body.append(self.starttag(node, 'legend', CLASS=SFT_LEGEND))
+    self.body.append(self.starttag(node, 'legend', CLASS="sft-legend"))
+
 def depart_legend_node(self: HTML5Translator, node: LegendNode) -> None:
     self.body.append('</legend>')
 
 def visit_radio_input_node(self: HTML5Translator, node: RadioInputNode) -> None:
-    self.body.append(self.starttag(node, 'input', **_get_html_attrs(node)))
+    attrs = _get_html_attrs(node)
+    for key in ['type', 'name', 'checked', 'aria-label']:
+        if key in node.attributes:
+            attrs[key] = node[key]
+    self.body.append(self.starttag(node, 'input', **attrs))
+
 def depart_radio_input_node(self: HTML5Translator, node: RadioInputNode) -> None:
-    pass # No closing tag for <input>.
+    pass  # Self-closing tag
 
 def visit_label_node(self: HTML5Translator, node: LabelNode) -> None:
     attrs = _get_html_attrs(node)
-    attrs['for'] = node['for_id'] # Connect the label to its radio button.
+    if 'for_id' in node.attributes:
+        attrs['for'] = node['for_id']
     self.body.append(self.starttag(node, 'label', **attrs))
+
 def depart_label_node(self: HTML5Translator, node: LabelNode) -> None:
     self.body.append('</label>')
 
 def visit_panel_node(self: HTML5Translator, node: PanelNode) -> None:
-    self.body.append(self.starttag(node, 'div', CLASS=SFT_PANEL, **_get_html_attrs(node)))
+    attrs = _get_html_attrs(node)
+    for key in ['role', 'aria-labelledby', 'tabindex']:
+        if key in node.attributes:
+            attrs[key] = node[key]
+    self.body.append(self.starttag(node, 'div', CLASS="sft-panel", **attrs))
+
 def depart_panel_node(self: HTML5Translator, node: PanelNode) -> None:
     self.body.append('</div>')
 
 def visit_details_node(self: HTML5Translator, node: DetailsNode) -> None:
-    self.body.append(self.starttag(node, 'details', **_get_html_attrs(node)))
+    attrs = _get_html_attrs(node)
+    if 'open' in node.attributes:
+        attrs['open'] = 'open'
+    self.body.append(self.starttag(node, 'details', **attrs))
+
 def depart_details_node(self: HTML5Translator, node: DetailsNode) -> None:
     self.body.append('</details>')
 
 def visit_summary_node(self: HTML5Translator, node: SummaryNode) -> None:
     self.body.append(self.starttag(node, 'summary', **_get_html_attrs(node)))
+
 def depart_summary_node(self: HTML5Translator, node: SummaryNode) -> None:
     self.body.append('</summary>')
 
 
+# =============================================================================
+# Static File Handling
+# =============================================================================
+
 def copy_static_files(app: Sphinx):
-    """
-    Copies the extension's static CSS file to the build output directory.
-    This hook runs when the builder is initialized, ensuring the CSS file is
-    always available for HTML builds without complex packaging maneuvers.
-    """
+    """Copy CSS and JS files to the build directory."""
     if app.builder.name != 'html':
         return
-    source_css = Path(__file__).parent / "static" / "filter_tabs.css"
+        
+    static_source_dir = Path(__file__).parent / "static"
     dest_dir = Path(app.outdir) / "_static"
     dest_dir.mkdir(parents=True, exist_ok=True)
-    shutil.copy(source_css, dest_dir)
-
+    
+    # Only copy the consolidated CSS file
+    css_file = static_source_dir / "filter_tabs.css"
+    if css_file.exists():
+        shutil.copy(css_file, dest_dir)
+    
+    # Copy JS file if it exists
+    js_file = static_source_dir / "filter_tabs.js"
+    if js_file.exists():
+        shutil.copy(js_file, dest_dir)
+
+
+# =============================================================================
+# Extension Setup
+# =============================================================================
 
 def setup(app: Sphinx) -> Dict[str, Any]:
-    """
-    The main entry point for the Sphinx extension.
-    This function registers all components with Sphinx.
-    """
-    # Register custom configuration values, allowing users to theme from conf.py.
-    app.add_config_value('filter_tabs_tab_highlight_color', '#007bff', 'html', [str])
-    app.add_config_value('filter_tabs_tab_background_color', '#f0f0f0', 'html', [str])
-    app.add_config_value('filter_tabs_tab_font_size', '1em', 'html', [str])
-    app.add_config_value('filter_tabs_border_radius', '8px', 'html', [str])
+    """Setup the Sphinx extension with minimal configuration."""
+    
+    # ONLY essential configuration options (down from 9 to 2)
+    app.add_config_value('filter_tabs_highlight_color', '#007bff', 'html', [str])
     app.add_config_value('filter_tabs_debug_mode', False, 'html', [bool])
-    app.add_config_value('filter_tabs_collapsible_enabled', True, 'html', [bool])
-    app.add_config_value('filter_tabs_collapsible_accent_color', '#17a2b8', 'html', [str])
-
-    # Add the main stylesheet to the HTML output.
+    
+    # Add static files
     app.add_css_file('filter_tabs.css')
-
-    # Register all custom nodes and their HTML visitor/depart functions.
+    app.add_js_file('filter_tabs.js')
+    
+    # Register custom nodes (keep existing node registration code)
     app.add_node(ContainerNode, html=(visit_container_node, depart_container_node))
     app.add_node(FieldsetNode, html=(visit_fieldset_node, depart_fieldset_node))
     app.add_node(LegendNode, html=(visit_legend_node, depart_legend_node))
@@ -432,16 +467,15 @@ def setup(app: Sphinx) -> Dict[str, Any]:
     app.add_node(PanelNode, html=(visit_panel_node, depart_panel_node))
     app.add_node(DetailsNode, html=(visit_details_node, depart_details_node))
     app.add_node(SummaryNode, html=(visit_summary_node, depart_summary_node))
-
-    # Register the RST directives.
+    
+    # Register directives
     app.add_directive('filter-tabs', FilterTabsDirective)
     app.add_directive('tab', TabDirective)
-
-    # Connect to Sphinx events (hooks) to run custom functions at specific build stages.
-    app.connect('doctree-resolved', setup_collapsible_admonitions)
+    
+    # Connect event handlers
     app.connect('builder-inited', copy_static_files)
-
-    # Return metadata about the extension.
+    app.connect('doctree-resolved', setup_collapsible_admonitions)
+    
     return {
         'version': __version__,
         'parallel_read_safe': True,