{"name":"tabs","helper":"rui_tabs","complexity":"moderate","param_count":15,"slot_count":1,"form_builder":false,"standalone":true,"ai_score":7,"human_score":8,"token_estimate":125,"slots":{"tabs":{"type":"renders_many","component":"lambda","example":"component.with_tab"}},"gotchas":[{"id":"tabs_panels_false_no_auto_wiring","severity":"high","component":"rui_tabs","summary":"panels: false renders the tablist only — matching an external panel's id to the built-in pattern does nothing automatically","params":["panels"],"behavior":"With panels: false, the component doesn't emit aria-controls on the tab triggers at all, so the rui--tabs Stimulus controller has no panel id to look up and never toggles anything for you — regardless of what id an external panel uses, even if it exactly matches the built-in \"#{id}-panel-#{tab_id}\" convention. You must listen for the tab-change event the controller dispatches on every activation (rui--tabs:change, or tabs:change if config.stimulus_namespace is unset) and toggle your own panels from its detail.tab.","wrong":"\u003c%= rui_tabs(id: \"wizard\", panels: false) do |t| %\u003e\u003c% t.with_tab(id: \"step-1\", label: \"Step 1\") %\u003e\u003c% end %\u003e\u003cdiv id=\"wizard-panel-step-1\"\u003eStep 1 content\u003c/div\u003e","right":"\u003c%= rui_tabs(id: \"wizard\", panels: false) do |t| %\u003e\u003c% t.with_tab(id: \"step-1\", label: \"Step 1\") %\u003e\u003c% end %\u003e\u003cdiv id=\"wizard-panel-step-1\" data-controller=\"wizard-panels\" data-wizard-panels-tab-id-value=\"step-1\"\u003eStep 1 content\u003c/div\u003e","notes":"See tabs/USAGE.md's \"panels: false — external panels recipe\" for the full wizard_panels_controller.js pattern. This is the single most common source of a tabs UI that looks correct in markup but never switches panels.","detection":"Scan for rui_tabs(..., panels: false) followed by hand-written panel divs with no document.addEventListener('rui--tabs:change', ...) / ('tabs:change', ...) wiring anywhere in the same view/controller.","recovery":"Add a Stimulus controller (or inline script) on each external panel that listens for the tabs:change/rui--tabs:change custom event and toggles hidden based on event.detail.tab."}],"families":[],"compositions":[],"relationships":{}}