railsui 3.1.4 → 3.2.0

data/app/views/railsui/themes/corgie/authentication/static/_unlocks.html.erb

@@ -0,0 +1,60 @@
+<%= render layout: example, locals: { heading: "Unock", section: "Authentication" } do %>
+  <div class=" border border-neutral-200 rounded-3xl overflow-hidden dark:border-neutral-700">
+  <div class="flex min-h-screen bg-white dark:bg-neutral-900">
+    <%= render "rui/shared/flash" %>
+    <div class="flex items-center justify-center w-full px-6 lg:w-5/12">
+      <div class="w-full max-w-sm space-y-8">
+        <div class="flex flex-col items-center justify-center gap-4">
+          <%= link_to root_path, class: "flex items-center gap-2.5 shrink-0" do %>
+            <!-- Corgie logo -->
+            <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 fill-current", variant: :solid %>
+
+            <span class="h4 font-semibold">Corgie</span>
+          <% end %>
+
+          <% if content_for?(:title) %>
+            <p class="text-neutral-500 dark:text-neutral-400">
+              <%= yield :title %>
+            </p>
+          <% end %>
+        </div>
+
+        <%= form_with(url: "#", builder: Railsui::FormBuilder) do |f| %>
+          <%= f.form_group do %>
+            <%= f.email_field :email, label: "Email", placeholder: "Enter email", required: true %>
+          <% end %>
+
+          <%= f.submit "Resend unlock instructions", class: "w-full btn btn-lg btn-primary" %>
+        <% end %>
+      </div>
+    </div>
+    <div class="relative hidden overflow-hidden lg:flex lg:w-7/12 bg-neutral-950">
+      <%= image_tag "railsui/auth-bg.jpg", alt: "Authentication visual with pulse animation", class: "absolute inset-0 object-cover w-full h-full opacity-20 animate-auth-ambient" %>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+
+
+<% content_for :erb do %>
+<!-- app/views/users/unlocks/new.html.erb -->
+<%% content_for :title, "Resend unlock instructions" %>
+
+<%%= form_with(url: "#", builder: Railsui::FormBuilder) do |f| %>
+  <%%= render "rui/shared/error_messages", resource: f.object %>
+
+  <%%= f.form_group do %>
+    <%%= f.email_field :email, label: "Email", placeholder: "Enter email", required: true %>
+  <%% end %>
+
+  <%%= f.submit "Resend confirmation instructions", class: "w-full btn btn-lg btn-primary" %>
+<%% end %>
+<% end %>
+
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_static_confirmation_path, prev_text: "Confirmation", next_path: systems_mailers_overview_path, next_text: "Mailers") %>

data/app/views/railsui/themes/corgie/components/_accordion.html.erb

@@ -0,0 +1,17 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/accordion" %>
+
+<div class="prose prose-neutral md:prose-lg dark:prose-invert">
+  <p>While not a <em>true</em> accordion we favor the  <code>details</code> and <code>summary</code> HTML tags to produce a <em>good enough</em> solution to a similar problem traditional accordions solve.</p>
+</div>
+
+<%= render "#{path}/contained" %>
+<%= render "#{path}/flush" %>
+
+<%= system_pagination(prev_path: systems_forms_validation_path, prev_text: "Validation", next_path: systems_components_alert_path, next_text: "Alert") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Contained", "#accordion-contained" %>
+    <%= component_link "Flush", "#accordion-flush" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_alert.html.erb

@@ -0,0 +1,23 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/alert" %>
+
+<%= render "#{path}/with_description" %>
+<%= divider %>
+<%= render "#{path}/with_list" %>
+<%= divider %>
+<%= render "#{path}/with_actions" %>
+<%= divider %>
+<%= render "#{path}/with_accent_border" %>
+<%= divider %>
+<%= render "#{path}/dismissable" %>
+
+<%= system_pagination(prev_path: systems_components_accordion_path, prev_text: "Accordion", next_path: systems_components_avatar_path, next_text: "Avatar") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "With description", "#alert-with-description" %>
+		<%= component_link "With list", "#alert-with-list" %>
+		<%= component_link "With actions", "#alert-with-actions" %>
+    <%= component_link "Border accent", "#alert-border-accent" %>
+    <%= component_link "Dismissable", "#alert-dismissable" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_avatar.html.erb

@@ -0,0 +1,13 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/avatar" %>
+
+<%= render "#{path}/rounded" %>
+<%= render "#{path}/circle" %>
+
+<%= system_pagination(prev_path: systems_components_alert_path, prev_text: "Alert", next_path: systems_components_badge_path, next_text: "Badge") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Rounded", "#avatar-rounded" %>
+    <%= component_link "Circle", "#avatar-circle" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_badge.html.erb

@@ -0,0 +1,20 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/badge" %>
+
+<%= render "#{path}/basic" %>
+<%= divider %>
+<%= render "#{path}/pill" %>
+<%= divider %>
+<%= render "#{path}/outline" %>
+<%= divider %>
+<%= render "#{path}/tag" %>
+
+<%= system_pagination(prev_path: systems_components_avatar_path, prev_text: "Avatar", next_path: systems_components_breadcrumb_path, next_text: "Breadcrumb") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Basic", "#badge-basic" %>
+		<%= component_link "Pill", "#badge-pill" %>
+		<%= component_link "Outline", "#badge-outline" %>
+    <%= component_link "Tag", "#badge-tag" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_breadcrumb.html.erb

@@ -0,0 +1,14 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/breadcrumb" %>
+
+<%= render "#{path}/base" %>
+<%= divider %>
+<%= render "#{path}/article" %>
+
+<%= system_pagination(prev_path: systems_components_badge_path, prev_text: "Badge", next_path: systems_components_button_path, next_text: "Button") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#breadcrumb-base" %>
+		<%= component_link "Article", "#breadcrumb-article" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_button.html.erb

@@ -0,0 +1,16 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/button" %>
+
+<%= render "#{path}/base" %>
+<%= render "#{path}/sizes" %>
+<%= render "#{path}/expanded" %>
+
+<%= system_pagination(prev_path: systems_components_breadcrumb_path, prev_text: "Breadcrumb", next_path: systems_components_card_path, next_text: "Card") %>
+
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#button-base" %>
+		<%= component_link "Sizes", "#button-sizes" %>
+    <%= component_link "Expanded display", "#button-expanded" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_card.html.erb

@@ -0,0 +1,23 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/card" %>
+
+<%= render "#{path}/base" %>
+<%= divider %>
+<%= render "#{path}/article" %>
+<%= divider %>
+<%= render "#{path}/value" %>
+<%= divider %>
+<%= render "#{path}/team_member" %>
+<%= divider %>
+<%= render "#{path}/feature" %>
+
+<%= system_pagination(prev_path: systems_components_button_path, prev_text: "Button", next_path: systems_components_combobox_path, next_text: "Combobox") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#card-base" %>
+		<%= component_link "Article", "#card-article" %>
+		<%= component_link "Value", "#card-value" %>
+		<%= component_link "Team Member", "#card-team-member" %>
+		<%= component_link "Feature", "#card-feature" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_combobox.html.erb

@@ -0,0 +1,11 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/combobox" %>
+
+<%= render "#{path}/base" %>
+
+<%= system_pagination(prev_path: systems_components_card_path, prev_text: "Card", next_path: systems_components_dropdown_path, next_text: "Dropdown") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#combobox-base" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_dropdown.html.erb

@@ -0,0 +1,22 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/dropdown" %>
+
+<%= render "#{path}/tutorial/tutorial" %>
+<%= render "#{path}/base" %>
+<%= divider %>
+<%= render "#{path}/with_icons" %>
+<%= divider %>
+<%= render "#{path}/with_dividers" %>
+<%= divider %>
+<%= render "#{path}/right_aligned" %>
+
+<%= system_pagination(prev_path: systems_components_combobox_path, prev_text: "Combobox", next_path: systems_components_flash_path, next_text: "Flash") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Usage", "#dropdown-usage" %>
+    <%= component_link "Base", "#dropdown-base" %>
+		<%= component_link "With icons", "#dropdown-with-icon" %>
+		<%= component_link "With dividers", "#dropdown-with-dividers" %>
+    <%= component_link "Right aligned", "#dropdown-right-aligned" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_flash.html.erb

@@ -0,0 +1,17 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/flash" %>
+
+<%= render "#{path}/notice" %>
+<%= divider %>
+<%= render "#{path}/alert" %>
+<%= divider %>
+<%= render "#{path}/dynamic" %>
+
+<%= system_pagination(prev_path: systems_components_dropdown_path, prev_text: "Dropdown", next_path: systems_components_modal_path, next_text: "Modal") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Notice", "#flash-notice" %>
+    <%= component_link "Alert", "#flash-alert" %>
+		<%= component_link "Dynamic", "#flash-dynamic" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_modal.html.erb

@@ -0,0 +1,27 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/modal" %>
+
+<%= render "#{path}/base" %>
+<%= divider %>
+<%= render "#{path}/single_action" %>
+<%= divider %>
+<%= render "#{path}/centered_dual_action" %>
+<%= divider %>
+<%= render "#{path}/dismiss_icon" %>
+<%= divider %>
+<%= render "#{path}/with_form" %>
+<%= divider %>
+<%= render "#{path}/settings" %>
+
+<%= system_pagination(prev_path: systems_components_flash_path, prev_text: "Flash", next_path: systems_components_navigation_path, next_text: "Navigation") %>
+
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#modal-base" %>
+		<%= component_link "Single action", "#modal-single-action" %>
+		<%= component_link "Centered dual action", "#modal-centered-dual-action" %>
+    <%= component_link "With dismiss button", "#modal-with-dismiss-button" %>
+    <%= component_link "With form", "#modal-with-form" %>
+    <%= component_link "Settings", "#modal-settings" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_navigation.html.erb

@@ -0,0 +1,7 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/navigation" %>
+
+<%= render "#{path}/base" %>
+<%= divider %>
+<%= render "#{path}/chat" %>
+
+<%= system_pagination(prev_path: systems_components_modal_path, prev_text: "Modal", next_path: systems_components_pagination_path, next_text: "Pagination") %>

data/app/views/railsui/themes/corgie/components/_pagination.html.erb

@@ -0,0 +1,15 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/pagination" %>
+
+<%= render "#{path}/simple" %>
+<%= divider %>
+<%= render "#{path}/pagy" %>
+
+<%= system_pagination(prev_path: systems_components_navigation_path, prev_text: "Navigation", next_path: systems_components_tab_path, next_text: "Tab") %>
+
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Simple", "#pagination-simple" %>
+		<%= component_link "Pagy", "#pagination-pagy" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_tab.html.erb

@@ -0,0 +1,23 @@
+<% path = "railsui/themes/#{Railsui.config.theme.downcase}/components/tab" %>
+
+<%= render "#{path}/base" %>
+<%= divider %>
+<%= render "#{path}/pills" %>
+<%= divider %>
+<%= render "#{path}/rounded" %>
+<%= divider %>
+<%= render "#{path}/with_icons" %>
+<%= divider %>
+<%= render "#{path}/vertical" %>
+
+<%= system_pagination(prev_path: systems_components_pagination_path, prev_text: "Pagination", next_path: systems_components_toast_path, next_text: "Toast") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#tab-base" %>
+    <%= component_link "Pill", "#tab-pill" %>
+		<%= component_link "Rounded", "#tab-rounded" %>
+    <%= component_link "With icons", "#tab-with-icons" %>
+    <%= component_link "Vertical", "#tab-vertical" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_toast.html.erb

@@ -0,0 +1,75 @@
+<% path = "railsui/themes/#{Railsui.config.theme}/components/toast" %>
+
+<%= render "#{path}/base" %>
+
+<div class="prose prose-neutral dark:prose-invert mb-8 max-w-full">
+
+<p>Use toasts to deliver real-time updates to a user without disrupting their flow.</p>
+
+<h3>Options</h3>
+
+<ul>
+  <li>
+    <code>triggerOnLoad</code>(<code>data-railsui-toast-trigger-on-load-value="true"</code>): Make the toast notification appear as soon as initialized. Defaults to <code>false</code>.
+  </li>
+</ul>
+
+<h3>CSS</h3>
+
+<p>Toasts typically enter the screen from the left or right side of the viewport. This example accounts for those two variants by extending your Tailwind Theme variables to include new animation-based CSS variables.
+</div>
+
+<div class="not-prose">
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+
+<% end %>
+<% content_for :css, flush: true do %>
+/* Add to app/assets/stylesheets/railsui/theme.css */
+
+--animate-toast-from-right: toast-from-right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+--animate-toast-from-left: toast-from-left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+
+@keyframes toast-from-right {
+  0% {
+    transform: translateX(50%);
+    opacity: 0%;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 100%;
+  }
+}
+
+@keyframes toast-from-left {
+  0% {
+    transform: translateX(-50%);
+    opacity: 0%;
+  }
+
+  100% {
+    transform: translateX(0);
+    opacity: 100%;
+  }
+}
+<% end %>
+<%= render_snippet active_tab: :css, css_filename: "theme.css" %>
+</div>
+
+
+<%= system_pagination(prev_path: systems_components_tab_path, prev_text: "Tab", next_path: systems_components_tooltip_path, next_text: "Tooltip") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Simple", "#toast-simple" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/_tooltip.html.erb

@@ -0,0 +1,77 @@
+<%= render "railsui/shared/usage_guide", title: "Tooltips usage guide" do %>
+
+<p>The short-form tutorial below represents how to pair Rails UI, Stimulus.js, and Tippy.js together.</p>
+
+<h2>1. Initializing the Stimulus.js controller</h2>
+
+<p>Leverage the Railsui Tooltip Stimulus controller from <a href="https://github.com/getrailsui/railsui-stimulus" target="_blank">railsui-stimulus</a> for drop-in tooltips.</p>
+
+<div class="not-prose">
+<%= content_for :js, flush: true do %>
+// Import components adhoc.
+import { RailsuiTooltip } from 'railsui-stimulus'
+application.register('railsui-tooltip', RailsuiTooltip)
+<% end %>
+  <%= render_snippet active_tab: "js", js_filename: "index.js" %>
+</div>
+
+<h2>2. Initialize the controller in your views</h2>
+
+<p>Add the data attribute <code>data-controller='railsui-tooltip'</code> to an HTML element.</p>
+
+<div class="not-prose">
+<% content_for :js, flush: true do %>
+
+<% end %>
+<% content_for :html, flush: true do %>
+<button data-controller="railsui-tooltip" class="btn btn-primary">Tooltip demo</button>
+<% end %>
+  <%= render_snippet %>
+</div>
+
+<h2>3. Pass content to the tooltip</h2>
+
+<p>Add the data attribute <code>data-tooltip-content-value='Your content here'</code> to an HTML element. Inside the data attribute you may pass as much copy as you like.</p>
+
+<div class="not-prose">
+  <button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the content inside my tooltip!" class="btn btn-primary">Tooltip demo</button>
+  <% content_for :js, flush: true do %>
+
+  <% end %>
+<% content_for :html, flush: true do %>
+<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the content inside my tooltip!" class="btn btn-primary">Tooltip demo</button>
+<% end %>
+  <%= render_snippet %>
+</div>
+
+<h3>(optional) 4. Allow HTML in content</h3>
+
+<p>Add the data attribute <code>data-tooltip-allow-html-value="true"</code> to an HTML element. Inside the data attribute pass <code>true</code> to enable the option <code>allowHTML</code> for the tippy.js library.</p>
+
+<div class="not-prose">
+  <button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the <strong>bold</strong> and <u>underlined</u> content inside my tooltip!" data-railsui-tooltip-allow-html-value="true" class="btn btn-primary">Tooltip with HTML demo</button>
+
+
+<% content_for :js, flush: true do %>
+
+<% end %>
+
+<% content_for :html, flush: true do %>
+<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the <strong>bold</strong> and <u>underlined</u> content inside my tooltip!" data-railsui-tooltip-allow-html-value="true" class="btn btn-primary">Tooltip with HTML demo</button>
+<% end %>
+
+<%= render_snippet %>
+</div>
+<% end %>
+
+<% path = "railsui/themes/#{Railsui.config.theme}/components/tooltip" %>
+
+<%= render "#{path}/base" %>
+
+<%= system_pagination(prev_path: systems_components_toast_path, prev_text: "Toast", next_path: systems_authentication_overview_path, next_text: "Authentication") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Base", "#tooltip-base" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/corgie/components/accordion/_contained.html.erb

@@ -0,0 +1,90 @@
+<div id="accordion-contained">
+<%= render layout: example, locals: { heading: "Contained", section: "Accordion" } do %>
+
+<%= render preview('neutral') do %>
+<dl class="font-tiktok my-6 divide-y divide-neutral-100 rounded-lg shadow-xl shadow-neutral-100/50 border border-neutral-200 dark:divide-neutral-700 dark:border-neutral-700 dark:shadow-black/20">
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-semibold leading-7 text-neutral-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the first accordion item
+      <%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6 font-tiktok">
+      <div class="prose prose-neutral dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque explicabo voluptates odio atque reiciendis, dolore magni quos quibusdam numquam, ad distinctio minima reprehenderit nemo harum, in perferendis delectus tempora.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-semibold leading-7 text-neutral-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the second accordion item
+      <%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-neutral dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime temporibus porro aut quis adipisci aliquid vitae labore modi harum facere, commodi molestiae repellat dicta eos officiis enim quae ullam.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-semibold leading-7 text-neutral-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the third accordion item
+      <%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-neutral dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi aliquam quod deleniti sit mollitia at? Voluptates suscipit, perspiciatis fuga nesciunt atque, repellat minus distinctio iure cupiditate tenetur ipsam voluptatem?
+      </div>
+    </div>
+  </details>
+</dl>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<dl class="my-6 divide-y divide-neutral-100 rounded-lg shadow-xl shadow-neutral-100/50 border border-neutral-200 dark:divide-neutral-700 dark:border-neutral-700 dark:shadow-black/20">
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-semibold leading-7 text-neutral-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the first accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-neutral dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloremque explicabo voluptates odio atque reiciendis, dolore magni quos quibusdam numquam, ad distinctio minima reprehenderit nemo harum, in perferendis delectus tempora.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-semibold leading-7 text-neutral-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the second accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-neutral dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates maxime temporibus porro aut quis adipisci aliquid vitae labore modi harum facere, commodi molestiae repellat dicta eos officiis enim quae ullam.
+      </div>
+    </div>
+  </details>
+  <details class="group p-4 marker:content-['']">
+    <summary class="flex w-full cursor-pointer select-none justify-between text-left text-base font-semibold leading-7 text-neutral-900 group-open:text-primary-600 [&::-webkit-details-marker]:hidden dark:group-open:text-primary-300 dark:text-white">
+      This is the third accordion item
+      <%%= icon "plus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:hidden block" %>
+      <%%= icon "minus", class: "size-5 flex-none ml-4 mt-0.5 text-neutral-600 dark:text-neutral-300 group-open:text-primary-500 dark:group-open:text-primary-400 group-open:block hidden" %>
+    </summary>
+    <div class="pt-6 pb-6">
+      <div class="prose prose-neutral dark:prose-invert max-w-none prose-a:font-semibold prose-a:text-primary-600 hover:prose-a:text-primary-500 dark:prose-a:text-primary-400 dark:hover:prose-a:text-primary-300">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus excepturi aliquam quod deleniti sit mollitia at? Voluptates suscipit, perspiciatis fuga nesciunt atque, repellat minus distinctio iure cupiditate tenetur ipsam voluptatem?
+      </div>
+    </div>
+  </details>
+</dl>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>