mirror of
https://github.com/we-promise/sure.git
synced 2026-06-06 19:29:03 +00:00
* feat(ds): elevate dropdown overlays and stabilize selection check gutter Menus and popovers floated at the same elevation as inline cards (shadow-border-xs), so dropdowns blended into the content beneath them. Bump DS::Menu and DS::Popover panels to shadow-border-lg. DS::MenuItem rendered its leading icon only when present, so a selection check shifted the row's text out of alignment with the unselected rows. Add a `selected:` param that reserves a fixed-width check gutter (check when selected, empty otherwise) so row text stays aligned. Apply the same reserved gutter to the bespoke category dropdown row, and add a `selectable` menu preview. * fix(ds): expose menu selection via menuitemradio + aria-checked Selectable DS::MenuItem rows conveyed selection only visually. Render them as role="menuitemradio" with aria-checked so assistive tech gets the selection state of single-select lists, merging the menu ARIA contract with any caller-supplied aria. Addresses CodeRabbit review feedback. * fix(ds): include selectable roles in menu roving-focus query DS::MenuItem selectable rows render as role=menuitemradio, but the menu controller built its roving-focus list from [role=menuitem] only, leaving single-select menus with no keyboard focus/arrow handling. Query the menuitemradio/menuitemcheckbox roles too. Addresses Codex review feedback.
20 lines
641 B
Plaintext
20 lines
641 B
Plaintext
<% if variant == :divider %>
|
|
<div role="separator">
|
|
<%= render "shared/ruler", classes: "my-1" %>
|
|
</div>
|
|
<% else %>
|
|
<div class="px-1" role="none">
|
|
<%= wrapper do %>
|
|
<% if selectable? %>
|
|
<span class="flex items-center justify-center w-5 h-5 shrink-0" aria-hidden="true">
|
|
<% if selected %><%= helpers.icon("check", color: destructive? ? :destructive : :default) %><% end %>
|
|
</span>
|
|
<% end %>
|
|
<% if icon %>
|
|
<%= helpers.icon(icon, color: destructive? ? :destructive : :default) %>
|
|
<% end %>
|
|
<%= tag.span(text, class: text_classes) %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|