{"name":"tabs","helper":"rui_tabs","complexity":"moderate","param_count":22,"slot_count":1,"form_builder":false,"standalone":true,"ai_score":7,"human_score":8,"token_estimate":139,"params":{"id":{"required":true},"variant":{"default":"underline","type":"symbol","closed":true,"values":["spaced","underline","pills","boxed"]},"color":{"default":"primary","type":"symbol","values_from":"colors","open":true},"size":{"default":"base","type":"symbol","closed":true,"values":["sm","base","lg","xl"]},"orientation":{"default":"horizontal","type":"symbol","closed":true,"values":["horizontal","vertical"]},"tablist_position":{"default":"start","type":"symbol","closed":true,"values":["start","end"]},"divider":{},"mobile_layout":{"default":"row","type":"symbol","closed":true,"values":["row","grid"]},"full_width":{"default":false,"type":"boolean"},"activation":{"default":"automatic","type":"symbol","closed":true,"values":["automatic","manual"]},"deep_link":{"default":false,"type":"boolean"},"animation":{"default":"fade","type":"symbol","closed":true,"values":["fade","none"]},"panels":{"default":true,"type":"boolean"},"panel_gap":{"default":"sm","type":"symbol","closed":true,"values":["none","sm","md","lg"]},"active_shade":{},"active_icon_color":{"values_from":"colors","open":true},"active_icon_shade":{"default":300,"type":"integer"},"active_bg_color":{"values_from":"colors","open":true},"active_bg_shade":{"default":100,"type":"integer"},"inactive_bg_color":{"values_from":"colors","open":true},"inactive_bg_shade":{"default":100,"type":"integer"}},"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":{}}