Tabs II

Requirements

• Accept fixed items with unique value, label, and panel fields, an optional defaultValue, a unique groupId, and a required label string for the tab list's accessible name. Item values and group IDs are safe to use in the supplied ID format.
• Initially select defaultValue when it matches an item; otherwise select the first item. Preserve the root data-testid equal to groupId. An empty items list renders that root without a tablist, buttons, or panels.
• For each populated group, place all tab buttons inside one element with role="tablist", aria-label equal to label, and aria-orientation="horizontal".
• Render every tab as a real button with type="button", role="tab", its item label, and data-value equal to the item value. Clicking a tab selects its item.
• Set aria-selected="true" on exactly the selected tab and aria-selected="false" on every other tab. Do not use aria-pressed on tab buttons. The supplied CSS styles aria-selected.
• Give each tab the stable id groupId + "-tab-" + item.value and aria-controls equal to groupId + "-panel-" + item.value.
• Keep one panel element per item mounted at all times. Set role="tabpanel", id to groupId + "-panel-" + item.value, and aria-labelledby to that item's tab ID. Preserve each item's panel text.
• Use the native hidden attribute for every inactive panel and remove it from the selected panel. Each populated group must have exactly one visible panel; inactive panels must remain hidden even after repeated switches.
• Keep IDs unique across groups and preserve the tab/panel relationships across selection changes. State belongs to each component instance, so switching one group must not alter another.
• Preserve the supplied demo content and groups. Keep styles in the provided separate CSS file and implement the component without an existing tabs component library.
• Custom arrow-key navigation, roving tabindex, focus management, controlled props, dynamic item replacement, and asynchronous panels are outside this stage's scope. ARIA semantics alone do not complete the full tabs keyboard pattern.

Examples

Input: Initial render
Output: Primary selects HTML and shows its panel. Secondary selects CSS and shows its panel. Each group retains two hidden panels.

Input: Click JavaScript in the primary group
Output: Primary selects JavaScript and shows primary-panel-javascript. Its HTML and CSS panels are hidden; secondary stays on CSS.

Input: An item with value css in group primary
Output: Tab ID: primary-tab-css. aria-controls: primary-panel-css. The panel has that ID and aria-labelledby: primary-tab-css.

Input: Empty items
Output: The group root contains no tablist, buttons, or panels.