ariadne_view_components 0.0.12 → 0.0.13

data/app/assets/javascripts/tab-container-component.d.ts

@@ -0,0 +1 @@
+import '@github/tab-container-element';

data/app/assets/javascripts/tab-nav-component.d.ts

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+export default class TabNavComponent extends Controller {
+    static targets: string[];
+    readonly tabTargets: [HTMLAnchorElement];
+    SELECTED_CLASSES: string[];
+    UNSELECTED_CLASSES: string[];
+    connect(): void;
+    toggle(event: Event): void;
+}

data/app/components/ariadne/ariadne.ts

@@ -6,8 +6,10 @@ import ClipboardCopyComponent from './clipboard-copy-component'
 import CommentComponent from './comment-component'
 import RichTextAreaComponent from './rich-text-area-component'
 import SlideoverComponent from './slideover-component'
+import TabNavComponent from './tab-nav-component'
 import TooltipComponent from './tooltip-component'
 
+import './tab-container-component'
 import './time-ago-component'
 
 const application = Application.start()
@@ -17,4 +19,5 @@ application.register('ariadne-form', AriadneForm)
 application.register('comment-component', CommentComponent)
 application.register('rich-text-area-component', RichTextAreaComponent)
 application.register('slideover-component', SlideoverComponent)
+application.register('tab-nav-component', TabNavComponent)
 application.register('tooltip-component', TooltipComponent)

data/app/components/ariadne/body_component.rb

@@ -17,7 +17,7 @@ module Ariadne
       @tag = :body
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/button_component.rb

@@ -82,7 +82,7 @@ module Ariadne
     #
     # @example With leading visual
     #   <%= render(Ariadne::ButtonComponent.new) do |c| %>
-    #     <% c.icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: "text-yellow-600") %>
+    #     <% c.icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: "ariadne-text-yellow-600") %>
     #     Button
     #   <% end %>
     #
@@ -135,7 +135,7 @@ module Ariadne
 
       @classes = class_names(
         SCHEME_CLASS_MAPPINGS[@scheme],
-        classes
+        classes,
       )
     end
 

data/app/components/ariadne/comment_component.html.erb

@@ -2,16 +2,12 @@
   <div class="ariadne-bg-white" data-comment-component-target="commentComponent">
     <div class="ariadne-hidden sm:ariadne-block">
       <div class="ariadne-border-b ariadne-border-gray-200">
-        <%= render(Ariadne::TabBarComponent.new(sr_label: @sr_label, attributes: { :"data-comment-component-target" => "tabBarComponent" })) do |tab_bar| %>
-          <%= public_tab %>
-          <%= internal_tab %>
-        <% end %>
       </div>
     </div>
     <%= ariadne_form_with(url: @url, method: @method, classes: @classes, attributes: @attributes) do |comment_box| %>
       <div class="ariadne-overflow-hidden ariadne-border-x ariadne-border-b ariadne-border-gray-300 ariadne-shadow-sm focus-within:ariadne-border-indigo-500 focus-within:ariadne-ring-1 focus-within:ariadne-ring-indigo-500">
-        <%= hidden_field_tag 'message_public', true  %>
-        <%= render(Ariadne::RichTextAreaComponent.new(name: :bodytext, sr_label: "Select reply type", attributes: { required: true}))  %>
+        <%= hidden_field_tag 'message_public', true %>
+        <%= render(Ariadne::RichTextAreaComponent.new(name: :bodytext, sr_label: "Select reply type", attributes: { required: true})) %>
         <% comment_box.submit { @submit } %>
       </div>
       <div class="ariadne-mt-2 ariadne-flex ariadne-justify-end">

data/app/components/ariadne/comment_component.rb

@@ -42,7 +42,7 @@ module Ariadne
       @tag = DEFAULT_TAG
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
       @url = url
       @method = method

data/app/components/ariadne/component.rb

@@ -10,15 +10,13 @@ module Ariadne
     include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
     include ClassNameHelper
     include FetchOrFallbackHelper
-    include TestSelectorHelper
-    include JoinStyleArgumentsHelper
     include ViewHelper
     include Status::Dsl
     include Audited::Dsl
     include LoggerHelper
     include Ariadne::ActionViewExtensions::FormHelper
 
-    BASE_HTML_CLASSES = "ariadne-h-full scroll-smooth ariadne-bg-white ariadne-antialiased"
+    BASE_HTML_CLASSES = "ariadne-h-full ariadne-scroll-smooth ariadne-bg-white ariadne-antialiased"
     BASE_BODY_CLASSES = "ariadne-flex ariadne-h-full ariadne-flex-col"
     BASE_WRAPPER_CLASSES = "ariadne-flex ariadne-flex-col ariadne-h-screen ariadne-justify-between"
     BASE_MAIN_CLASSES = "ariadne-flex-auto"
@@ -84,7 +82,7 @@ module Ariadne
       if (denylist = attributes[denylist_name])
         check_denylist(denylist, attributes)
 
-        # Remove :attributes_denylist key and any denied keys from system arguments
+        # Remove :attributes_denylist key and any denied keys from attributes
         attributes.except!(denylist_name)
         attributes.except!(*denylist.keys.flatten)
       end
@@ -109,7 +107,7 @@ module Ariadne
       deny_aria_key(
         :label,
         "Don't use `aria-label` on `#{tag}` elements. See https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/",
-        attributes
+        attributes,
       )
     end
 

data/app/components/ariadne/container_component.rb

@@ -16,7 +16,7 @@ module Ariadne
       @tag = :div
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/counter_component.rb

@@ -50,7 +50,7 @@ module Ariadne
 
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
       @attributes[:hidden] = true if count == 0 && hide_if_zero
     end

data/app/components/ariadne/flash_component.rb

@@ -104,7 +104,7 @@ module Ariadne
 
       @classes = class_names(
         CONTENT_SCHEME_CLASS_MAPPINGS[@scheme],
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/flex_component.rb

@@ -36,7 +36,7 @@ module Ariadne
       @classes = class_names(
         DEFAULT_CLASSES,
         classes,
-        flex_class
+        flex_class,
       )
 
       @attributes = attributes

data/app/components/ariadne/footer_component.rb

@@ -14,7 +14,7 @@ module Ariadne
     def initialize(classes: "", attributes: {})
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/grid_component.html.erb

@@ -1,8 +1,8 @@
 <%= render Ariadne::BaseComponent.new(tag: :ul, classes: @classes, attributes: @attributes) do |grid| %>
   <% items.each do |item| %>
-    <li class="<%= item.classes %> <%= item.has_href? ? Ariadne::GridComponent::DEFAULT_LINK_COLOR_CLASSES : "ariadne-bg-white" %>">
+    <li class="<%= item.classes %>">
       <% if item.has_href? %>
-        <%= render Ariadne::LinkComponent.new(href: item.href) do %>
+        <%= render Ariadne::LinkComponent.new(href: item.href, classes: Ariadne::GridComponent::GridItem::DEFAULT_ACTION_LINK_COLORS) do %>
           <%= item.entry %>
         <% end %>
         <% if item.actions.any? %>

data/app/components/ariadne/grid_component.rb

@@ -5,7 +5,7 @@ module Ariadne
   class GridComponent < Ariadne::Component
     DEFAULT_CLASSES = "ariadne-grid ariadne-gap-6 sm:ariadne-grid-cols-2 lg:ariadne-grid-cols-3"
 
-    DEFAULT_LINK_COLOR_CLASSES = "ariadne-text-button-text-color ariadne-bg-button-bg-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
+    DEFAULT_LINK_COLOR_CLASSES = "focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
 
     # The items to show in the ariadne-grid.
     renders_many :items, "GridItem"
@@ -19,7 +19,7 @@ module Ariadne
     def initialize(classes: "", attributes: {})
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       default_attributes = { role: "list" }
@@ -29,18 +29,20 @@ module Ariadne
     # This component is part of `GridComponent` and should not be
     # used as a standalone component.
     class GridItem < Ariadne::Component
-      DEFAULT_ITEM_CLASSES = "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow ariadne-my-4 text-black-700 ariadne-border-black"
+      DEFAULT_ITEM_CLASSES = "ariadne-flex ariadne-flex-col ariadne-text-center ariadne-rounded-lg ariadne-shadow text-black-700 ariadne-border-black"
 
-      DEFAULT_ENTRY_CLASSES = "group ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8 hover:ariadne-bg-button-hover-color hover:ariadne-text-gray-500 ariadne-rounded-lg"
-      renders_one :entry, lambda { |classes: "", &block|
+      DEFAULT_ENTRY_CLASSES = "ariadne-group ariadne-flex-1 ariadne-flex ariadne-flex-col ariadne-p-8 hover:ariadne-text-gray-500"
+      renders_one :entry, lambda { |classes: "", attributes: {}, &block|
         view_context.capture do
-          render(Ariadne::BaseComponent.new(tag: :div, classes: classes)) { block&.call }
+          actual_classes = class_names(DEFAULT_ENTRY_CLASSES, classes)
+          render(Ariadne::BaseComponent.new(tag: :div, classes: actual_classes, attributes: attributes)) { block&.call }
         end
       }
 
-      DEFAULT_ACTION_LINK_CLASSES = "text-button-text-color ariadne-relative ariadne--mr-px ariadne-w-0 ariadne-flex-1 ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-py-4 ariadne-text-sm ariadne-font-medium ariadne-border ariadne-border-transparent ariadne-rounded-bl-lg ariadne-rounded-lg"
+      DEFAULT_ACTION_LINK_CLASSES = "ariadne-relative ariadne--mr-px ariadne-w-0 ariadne-flex-1 ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-py-4 ariadne-text-sm ariadne-font-medium ariadne-border ariadne-border-transparent"
+      DEFAULT_ACTION_LINK_COLORS = "hover:ariadne-text-gray-500"
       renders_many :actions, lambda { |href:, icon:, label:, size: Ariadne::HeroiconComponent::SIZE_DEFAULT, variant: HeroiconsHelper::Icon::VARIANT_SOLID, classes: "", attributes: {}, text_classes: ""|
-        actual_classes = class_names(DEFAULT_ACTION_LINK_CLASSES, classes)
+        actual_classes = class_names(DEFAULT_ACTION_LINK_CLASSES, DEFAULT_ACTION_LINK_COLORS, classes)
         render(Ariadne::LinkComponent.new(href: href, classes: actual_classes, attributes: attributes)) do
           render(Ariadne::HeroiconComponent.new(icon: icon, size: size, variant: variant, text_classes: text_classes)) { label }
         end

data/app/components/ariadne/header_component.rb

@@ -85,7 +85,7 @@ module Ariadne
     def initialize(classes: "", attributes: {})
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/heroicon_component.html.erb

@@ -1,4 +1,4 @@
 <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
-  <%= @icon.path.html_safe %>
+  <%= @icon.path %>
 <% end %>
 <%= render(Ariadne::BaseComponent.new(tag: :span, classes: @text_classes, attributes: @text_attributes)) { content } if content.present? %>

data/app/components/ariadne/heroicon_component.rb

@@ -107,10 +107,9 @@ module Ariadne
       }
 
       @icon = heroicon(icon, variant: variant, **attributes)
-
       @classes = class_names(
         @icon.attributes[:class],
-        classes
+        classes,
       )
       @attributes.merge!(@icon.attributes.except(:class, :"aria-hidden"))
 

data/app/components/ariadne/list_component.html.erb

@@ -1,13 +1,11 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |list| %>
   <% items.each do |item| %>
-    <% if item.linked? %>
-      <%= render Ariadne::BaseComponent.new(tag: :li, classes: item.classes, attributes: item.attributes) do %>
+    <%= render Ariadne::BaseComponent.new(tag: :li, classes: item.classes, attributes: item.attributes) do %>
+      <% if item.linked? %>
         <%= render Ariadne::LinkComponent.new(href: item.link[:href], classes: item.link[:classes], attributes: item.link[:attributes]) do %>
           <%= item.entry %>
         <% end %>
-      <% end %>
-    <% else %>
-      <%= render Ariadne::BaseComponent.new(tag: :li, classes: item.classes, attributes: item.attributes) do %>
+      <% else %>
         <%= item.entry %>
       <% end %>
     <% end %>

data/app/components/ariadne/list_component.rb

@@ -36,11 +36,11 @@ module Ariadne
     class ListItem < Ariadne::Component
       DEFAULT_ITEM_CLASSES = "ariadne-relative ariadne-p-1.5 focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500 hover:ariadne-bg-button-hover-color"
 
-      renders_one :entry, lambda { |static_content = nil, &block|
-        next static_content if static_content.present?
-
-        render(Ariadne::BaseComponent.new(tag: :div)) do
-          view_context.capture { block&.call }
+      DEFAULT_ENTRY_CLASSES = "hover:ariadne-text-gray-500"
+      renders_one :entry, lambda { |classes: "", attributes: {}, &block|
+        view_context.capture do
+          actual_classes = class_names(DEFAULT_ENTRY_CLASSES, classes)
+          render(Ariadne::BaseComponent.new(tag: :div, classes: actual_classes, attributes: attributes)) { block&.call }
         end
       }
 

data/app/components/ariadne/main_component.rb

@@ -17,7 +17,7 @@ module Ariadne
       @tag = :main
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/narrow_container_component.rb

@@ -21,7 +21,7 @@ module Ariadne
       @tag = :div
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/panel_bar_component.rb

@@ -23,7 +23,7 @@ module Ariadne
       @tag = DEFAULT_TAG
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes
@@ -72,7 +72,7 @@ module Ariadne
       end
 
       def call
-        Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes)
+        render(Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes))
       end
     end
   end

data/app/components/ariadne/pill_component.rb

@@ -20,7 +20,7 @@ module Ariadne
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/rich_text_area_component.html.erb

@@ -1,6 +1,6 @@
 <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
   <% if @has_form %>
-    <input type="hidden" data-tiptap-value-container=true name="<%= @name %>" id="<%= @name %>" />
+    <input type="hidden" data-tiptap-value-container=true name="<%= @name %>" id="<%= @name %>">
   <% end %>
   <textarea class="tiptap-editor"></textarea>
 <% end %>

data/app/components/ariadne/rich_text_area_component.rb

@@ -25,7 +25,7 @@ module Ariadne
 
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
       @attributes = attributes
       @attributes[:"data-controller"] = "rich-text-area-component"

data/app/components/ariadne/slideover_component.rb

@@ -57,7 +57,7 @@ module Ariadne
     #
     # @param tag [Symbol, String] The rendered tag name.
     # @param direction [Symbol] <%= one_of(Ariadne::SlideoverComponent::VALID_DIRECTIONS) %>
-    # @param form_id [String] The ID of any <form> tag to submit when the button is clicked.
+    # @param form_id [String] The ID of any `form` tag to submit when the button is clicked.
     # @param open_text [String] The text to use to open the slideover.
     # @param close_text [String] The text to use to close the slideover.
     # @param classes [String] <%= link_to_classes_docs %>
@@ -66,7 +66,7 @@ module Ariadne
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @direction = fetch_or_raise(VALID_DIRECTIONS, direction)

data/app/components/ariadne/tab-container-component.ts

@@ -0,0 +1,24 @@
+import '@github/tab-container-element'
+
+// // keep in sync with tab_container_component.rb
+// const DEFAULT_SELECTED_CLASSES: string[] = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
+// const DEFAULT_UNSELECTED_CLASSES: string[] = [
+//   'ariadne-text-gray-500',
+//   'hover:ariadne-text-gray-700',
+//   'hover:ariadne-border-gray-300'
+// ]
+
+// for (const tabContainer of document.getElementsByTagName('tab-container')) {
+// tabContainer.addEventListener('tab-container-change', function (event: Event) {
+// const newPanel = (event as CustomEvent).detail.relatedTarget as HTMLElement
+// const tabContainer = newPanel.closest('tab-container') as HTMLElement
+// const tabList = tabContainer.firstElementChild as HTMLElement
+// const currentTab = tabList.querySelector('[aria-selected="true"]') as HTMLElement
+// const tabId = newPanel.getAttribute('id')?.split('-').slice(1).join('-')
+// const newTab = tabList.querySelector(`#${tabId}`) as HTMLElement
+// currentTab.classList.remove(...DEFAULT_SELECTED_CLASSES)
+// currentTab.classList.add(...DEFAULT_UNSELECTED_CLASSES)
+// newTab.classList.add(...DEFAULT_SELECTED_CLASSES)
+// newTab.classList.remove(...DEFAULT_UNSELECTED_CLASSES)
+// })
+// }

data/app/components/ariadne/tab-nav-component.ts

@@ -0,0 +1,34 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class TabNavComponent extends Controller {
+  static targets = ['tab']
+
+  declare readonly tabTargets: [HTMLAnchorElement]
+
+  // keep in synch with tab_nav_component
+  SELECTED_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
+  UNSELECTED_CLASSES = ['ariadne-text-gray-500', 'hover:ariadne-text-gray-700', 'hover:ariadne-border-gray-300']
+
+  connect() {
+    for (const tab of this.tabTargets) {
+      if (tab.hasAttribute('aria-current')) {
+        tab.classList.add(...this.SELECTED_CLASSES)
+        tab.classList.remove(...this.UNSELECTED_CLASSES)
+      }
+    }
+  }
+
+  toggle(event: Event) {
+    for (const tab of this.tabTargets) {
+      if (tab === event.target) {
+        tab.setAttribute('aria-current', 'page')
+        tab.classList.add(...this.SELECTED_CLASSES)
+        tab.classList.remove(...this.UNSELECTED_CLASSES)
+      } else if (tab.hasAttribute('aria-current')) {
+        tab.removeAttribute('aria-current')
+        tab.classList.add(...this.UNSELECTED_CLASSES)
+        tab.classList.remove(...this.SELECTED_CLASSES)
+      }
+    }
+  }
+}

data/app/components/ariadne/tab_component.html.erb

@@ -1,7 +1,3 @@
-<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do |component| %>
-  <% if text.present? %>
-    <%= text %>
-  <% else %>
-    <%= content %>
-  <% end %>
+<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
+  <%= text || content %>
 <% end %>

data/app/components/ariadne/tab_component.rb

@@ -1,43 +1,102 @@
 # frozen_string_literal: true
 
 module Ariadne
-  # Represents a sequence of tabs which, when clicked, swap between panel contents.
+  # This component is part of navigation components such as `Ariadne::TabContainerComponent`.
+  # and `Ariadne::TabNavComponent` and should not be used by itself.
+  #
+  # @accessibility
+  #   `TabComponent` renders the selected anchor tab with `aria-current="page"` by default.
+  #    When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
   class TabComponent < Ariadne::Component
-    DEFAULT_TAG = :button
-    TAG_OPTIONS = [DEFAULT_TAG].freeze
+    DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
+    ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
 
-    # The Tab's text.
+    # Panel controlled by the Tab. This will not render anything in the tab itself.
+    # It will provide a accessor for the Tab's parent to call and render the panel
+    # content in the appropriate place.
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :panel, lambda { |classes: "", attributes: {}|
+      attributes[:id] = @panel_id
+      tag = :div
+      attributes[:role] ||= :tabpanel
+      attributes[:tabindex] = 0
+      attributes[:hidden] = true unless @selected
+
+      label_present = aria("label", attributes) || aria("labelledby", attributes)
+      unless label_present
+        if @id.present?
+          attributes[:"aria-labelledby"] = @id
+        else
+          raise ArgumentError, "Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel"
+        end
+      end
+
+      Ariadne::BaseComponent.new(tag: tag, classes: classes, attributes: attributes)
+    }
+
+    # The tab's text.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Ariadne::Text) %>.
     renders_one :text, Ariadne::Text
+    # TODO: test what hapenns with really long inbox names
 
     attr_reader :selected
 
-    DEFAULT_CLASSES = "ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md"
-
-    BASE_TAB_CLASSES = "ariadne-whitespace-nowrap ariadne-py-4 ariadne-px-1 ariadne-border-b-2 ariadne-font-medium ariadne-text-sm"
+    DEFAULT_CLASSES = "ariadne-border-transparent ariadne-text-gray-500 hover:ariadne-text-gray-700 hover:ariadne-border-gray-300 ariadne-whitespace-nowrap ariadne-py-4 ariadne-px-1 ariadne-border-b-2 ariadne-font-medium ariadne-text-sm"
 
     # @example Default
     #
-    #   <%= render(Ariadne::TabComponent.new) { "Example" } %>
-    #
-    # @param tag [Symbol, String] The rendered tag name.
+    #  <%= render(Ariadne::TabComponent.new(id: "pub-comment")) do |tab| %>
+    #    <% tab.text { "Public comment" } %>
+    #    <% tab.panel { "Public comment panel" } %>
+    #  <% end %>
+    # @param id [String] The unique ID of the tab.
     # @param selected [Boolean] Whether the tab is selected or not.
+    # @param with_panel [Boolean] Whether the Tab has an associated panel.
+    # @param href [String] The link to navigate to when the tab is clicked.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: DEFAULT_TAG, selected: false, classes: "", attributes: {})
-      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+    def initialize(id: nil, selected: false, with_panel: false, href: "", classes: "", attributes: {})
+      @id = id
+
+      @href = href
+      @selected = selected
+
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes
-      @attributes[:id] ||= "tabs-tab-#{@tab_idx}"
-      @attributes[:"aria-controls"] = "tabs-panel-#{@tab_idx}"
-      @attributes[:"aria-current"] = "page" if selected
-      @attributes[:selected] = selected
-      @classes = class_names(BASE_TAB_CLASSES, classes)
+      @attributes[:id] ||= @id
+
+      if with_panel # TODO: test
+        if @id.blank?
+          raise ArgumentError, "Tabs with panels must have a unique `id`"
+        end
+
+        @tag = :button
+        @system_arguments[:tag] = :button
+        @system_arguments[:type] = :button
+        @system_arguments[:role] = :tab
+        @panel_id = "panel-#{@id}"
+        @attributes[:"aria-controls"] = @panel_id
+        # https://www.w3.org/TR/wai-aria-practices/#presentation_role
+        @wrapper_arguments[:role] = :presentation
+      else
+        @tag = :a
+      end
+
+      return unless @selected
+
+      if @tag == :a
+        aria_current = aria("current", attributes) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
+        @attributes[:"aria-current"] = fetch_or_raise(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current)
+      else
+        @attributes[:"aria-selected"] = true
+      end
     end
   end
 end

data/app/components/ariadne/tab_container_component.erb

@@ -0,0 +1,12 @@
+<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do  |component| %>
+  <div role="tablist">
+    <% tabs.each do |tab| %>
+      <%= tab %>
+    <% end %>
+  </div>
+  <% tabs.each do |tab| %>
+    <div class="ariadne-pt-2">
+      <%= tab.panel %>
+    </div>
+  <% end %>
+<% end %>